/* ── Get Storey ────────────────────────────────────────────────────────
   The app CTA used on tools and blog posts. It sits after the free thing
   (a routine, a plan, an article) is already finished and useful, so it
   explains the next step rather than shouting: what you do in the app,
   what you see, and the real store badges for this device.

   Loaded after each page's inline styles, so these rules win over the
   older centred `.finale` / `.cta-card` rules where they overlap. Tokens
   fall back to literal values for the tools that use their own stylesheet. */

.gs{
  --gs-bright:var(--bright,#F6F8FF);
  --gs-muted:var(--muted,#A7B0C0);
  --gs-soft:var(--soft,#6B7686);
  --gs-border:var(--card-border,rgba(255,255,255,.09));
  --gs-acc:var(--acc,#5CE1A6);
  --gs-display:var(--display,'Bricolage Grotesque',sans-serif);
  --gs-mono:var(--mono,'JetBrains Mono',monospace);
  text-align:left;
}

.gs .gs-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--gs-mono);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  line-height:1.4;color:var(--gs-acc);margin:0 0 14px!important;
}
.gs .gs-eyebrow::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--gs-acc);
  box-shadow:0 0 0 4px rgba(92,225,166,.14),0 0 14px rgba(92,225,166,.6);
}

/* Three-step loop: what actually happens after you install. */
.gs-steps{list-style:none;counter-reset:gs;margin:0 0 26px;padding:0;display:grid;gap:10px;max-width:480px}
.gs-steps li{
  counter-increment:gs;position:relative;padding-left:36px;margin:0;
  font-size:15px;line-height:1.5;color:var(--gs-muted);text-align:left;
}
.gs-steps li::before{
  content:counter(gs);position:absolute;left:0;top:0;
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--gs-mono);font-size:11.5px;font-weight:600;color:var(--gs-acc);
  background:rgba(92,225,166,.1);border:1px solid rgba(92,225,166,.32);
}
.gs-steps strong{color:var(--gs-bright);font-weight:600}

/* Store badges. downloads.js hides the other platform's badge on phones;
   desktop visitors see both. */
.gs .storey-store-badges{justify-content:flex-start;gap:10px 14px}
.gs .app-store-badge{display:inline-flex;flex:none;width:168px;max-width:100%;border-radius:10px;line-height:0;transition:transform .18s ease}
.gs .app-store-badge img{display:block;width:100%;height:auto}
.gs .storey-play-badge{width:217px;transition:transform .18s ease}
.gs .app-store-badge:hover,.gs .storey-play-badge:hover{transform:translateY(-2px)}
.gs .app-store-badge:focus-visible{outline:2px solid var(--gs-acc);outline-offset:5px}
.storey-ios .gs .app-store-badge{width:186px}
.storey-android .gs .storey-play-badge{width:240px}
.gs .appstore-note{font-family:var(--gs-mono);font-size:12px;line-height:1.6;letter-spacing:.04em;color:var(--gs-soft);text-align:left;margin:16px 0 0!important;max-width:none!important}

/* Phone showing the city: the thing you are building toward. */
.gs-phone{
  position:relative;margin:0;justify-self:center;width:250px;aspect-ratio:9/18.5;
  border-radius:40px;padding:9px;background:linear-gradient(160deg,#2A2F3A,#0E1016 55%,#1B1F28);
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 80px rgba(0,0,0,.55),0 0 90px rgba(92,225,166,.16);
  transform:rotate(2.5deg);
}
.gs-phone img{display:block;box-sizing:border-box;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:32px;border-top:34px solid #0C0D11;background:#0C0D11}
.gs-phone::after{ /* dynamic island */
  content:"";position:absolute;top:19px;left:50%;width:70px;height:20px;margin-left:-35px;border-radius:12px;background:#000;
}

/* ── Final band ───────────────────────────────────────────────────── */
.finale.gs{padding:84px 24px 92px}
.gs-wrap{
  max-width:1000px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:56px;align-items:center;
}
.finale.gs h2{text-align:left;line-height:1.1;margin:0 0 16px}
.finale.gs .gs-copy > p:not(.gs-eyebrow):not(.appstore-note){text-align:left;margin:0 0 24px;max-width:520px}

@media(max-width:820px){
  .gs-wrap{grid-template-columns:1fr;gap:36px}
  .finale.gs{padding:64px 16px 72px}
  .gs-wrap .gs-phone{order:-1;width:200px}
}
@media(max-width:560px){
  .gs,.finale.gs h2,.finale.gs .gs-copy > p:not(.gs-eyebrow):not(.appstore-note){text-align:center}
  .gs-copy{display:flex;flex-direction:column;align-items:center}
  .gs .storey-store-badges{justify-content:center}
  .gs .appstore-note{text-align:center}
  .gs-wrap .gs-phone{width:180px;aspect-ratio:9/11;transform:none;margin-bottom:-28px;
    -webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
}

/* ── Card inside a tool's results ─────────────────────────────────── */
.gs-card{
  margin:24px 0 0;padding:30px;border-radius:20px;
  /* The city runs full width across the top, the copy sits below it.
     Sized by its own width, not the viewport (container queries below). */
  display:flex;flex-direction:column;align-items:stretch;gap:28px;container-type:inline-size;
  background:
    radial-gradient(460px 240px at 0% 0%,rgba(92,225,166,.12),transparent 62%),
    radial-gradient(420px 220px at 100% 100%,rgba(167,139,250,.1),transparent 62%),
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid rgba(92,225,166,.22);
}
.gs-card h2,.gs-card h3{
  font-family:var(--gs-display);font-size:clamp(21px,3vw,26px);font-weight:800;line-height:1.15;letter-spacing:-.02em;
  color:var(--gs-bright);text-align:left;margin:0 0 10px;
}
.gs-card .gs-copy > p:not(.gs-eyebrow):not(.appstore-note){text-align:left;margin:0 0 20px;max-width:none}
.gs-card > .gs-copy{min-width:0}
.gs-card > .gs-city{order:-1;width:100%;margin:0}
@media(max-width:720px){
  .gs-card{padding:24px 18px}
  .gs-city-sky{height:184px}
  .gs-b{gap:3px}
  .gs-w{height:7px}
}
@media(max-width:560px){
  .gs-card h2,.gs-card h3,.gs-card .gs-copy > p:not(.gs-eyebrow):not(.appstore-note){text-align:center}
}

/* Mini city: the visitor's own habits drawn as Storey buildings. */
.gs-city{margin:0;display:flex;flex-direction:column;align-items:stretch;gap:10px}
.gs-city-sky{
  position:relative;height:230px;border-radius:16px;overflow:hidden;
  display:flex;align-items:flex-end;justify-content:center;gap:12px;padding:0 14px;
  background:
    radial-gradient(120px 60px at 80% 18%,rgba(255,227,176,.12),transparent 70%),
    linear-gradient(180deg,#0B1020 0%,#101627 70%,#151B2A 100%);
  border:1px solid rgba(255,255,255,.07);
}
.gs-city-sky::before{ /* moon + far skyline */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 90% 13%,#FFE3B0 0 9px,rgba(255,227,176,.16) 10px,transparent 30px),
    linear-gradient(#141A2B,#141A2B) 4% 100%/22px 46% no-repeat,
    linear-gradient(#121828,#121828) 14% 100%/30px 30% no-repeat,
    linear-gradient(#141A2B,#141A2B) 86% 100%/26px 38% no-repeat,
    linear-gradient(#121828,#121828) 96% 100%/20px 56% no-repeat;
}
.gs-city-sky::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:#0A0D16;border-top:1px solid rgba(255,255,255,.06)}
.gs-b{
  position:relative;z-index:1;flex:0 1 62px;margin-bottom:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:8px 7px 10px;
  border-radius:5px 5px 0 0;background:color-mix(in srgb,var(--c) 14%,#0D111C);
  border:1px solid color-mix(in srgb,var(--c) 55%,transparent);border-bottom:0;
  box-shadow:0 0 22px color-mix(in srgb,var(--c) 22%,transparent);
}
.gs-b::before{content:"";position:absolute;left:8px;right:8px;top:-4px;height:4px;border-radius:2px 2px 0 0;background:var(--c)}
.gs-w{height:9px;border-radius:1.5px;background:color-mix(in srgb,var(--c) 18%,#161B28);transition:background .35s ease,box-shadow .35s ease}
.gs-w.on{background:var(--c);box-shadow:0 0 6px color-mix(in srgb,var(--c) 70%,transparent)}
.gs-city-labels{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.gs-city-labels span{
  font-family:var(--gs-mono);font-size:11px;line-height:1.2;color:var(--gs-bright);padding:5px 9px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--c) 60%,transparent);background:color-mix(in srgb,var(--c) 10%,transparent);
  max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.gs-city figcaption{font-family:var(--gs-mono);font-size:11px;letter-spacing:.06em;color:var(--gs-soft);text-align:center}

/* ── Compact card inside an article ───────────────────────────────── */
.cta-card.gs:not(.gs-card){
  display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:14px 24px;text-align:left;padding:22px 24px;
}
.cta-card.gs:not(.gs-card) > p{flex:1 1 100%;margin:0!important;color:var(--gs-muted);font-size:15px}
.cta-card.gs:not(.gs-card) .storey-store-badges{width:auto;flex:none}
.cta-card.gs:not(.gs-card) .app-store-badge{width:140px}
.cta-card.gs:not(.gs-card) .storey-play-badge{width:181px}
.storey-ios .cta-card.gs:not(.gs-card) .app-store-badge{width:150px}
.storey-android .cta-card.gs:not(.gs-card) .storey-play-badge{width:194px}
@media(max-width:560px){.cta-card.gs:not(.gs-card){justify-content:center;text-align:center}.cta-card.gs:not(.gs-card) > p{flex-basis:100%}}

/* Small badge row dropped into an existing block (cleaning plan). */
.gs-badges-sm{justify-content:flex-start;gap:8px 12px;margin:10px 0 8px}
.gs-badges-sm .app-store-badge{display:inline-flex;width:132px;line-height:0;border-radius:8px}
.gs-badges-sm .app-store-badge img{width:100%;height:auto}
.gs-badges-sm .storey-play-badge{width:170px}

@media(prefers-reduced-motion:reduce){
  .gs-w,.gs .app-store-badge,.gs .storey-play-badge{transition:none}
  .gs-phone{transform:none}
}
@media print{.gs{display:none!important}}

/* ── Building city: blog finale ───────────────────────────────────────
   A phone showing real Storey towers (the homepage skyline exports) rising
   one storey per kept week. get-storey.js drives it; the HTML itself is the
   finished city, so no JS or reduced motion simply shows that. Every export
   stands on y=537 of 560, hence the 4.1% drop that puts it on the ground. */
.gs-build{
  position:relative;margin:0;justify-self:center;width:264px;
  border-radius:42px;padding:9px;background:linear-gradient(160deg,#2A2F3A,#0E1016 55%,#1B1F28);
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 80px rgba(0,0,0,.55),0 0 110px rgba(92,225,166,.18);
  transform:rotate(2deg);
}
.gs-build::after{ /* dynamic island */
  content:"";position:absolute;top:19px;left:50%;width:70px;height:20px;margin-left:-35px;border-radius:12px;background:#000;
}
.gs-build-screen{border-radius:34px;background:#0C0D11;padding:46px 12px 14px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.gs-build-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:0 4px}
.gs-build-k{font-family:var(--gs-display);font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.1;color:var(--gs-bright)}
.gs-build-week{font-family:var(--gs-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gs-acc);white-space:nowrap}

.gs-build-sky{
  position:relative;height:204px;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(circle at 86% 13%,#FFE3B0 0 7px,rgba(255,227,176,.18) 8px,transparent 26px),
    radial-gradient(circle at 11% 16%,#fff 0 1px,transparent 1.6px),
    radial-gradient(circle at 33% 8%,rgba(255,255,255,.8) 0 1px,transparent 1.6px),
    radial-gradient(circle at 57% 21%,rgba(255,255,255,.7) 0 1px,transparent 1.6px),
    radial-gradient(circle at 70% 6%,#fff 0 1px,transparent 1.6px),
    radial-gradient(circle at 24% 33%,rgba(255,255,255,.5) 0 1px,transparent 1.6px),
    radial-gradient(circle at 94% 34%,rgba(255,255,255,.6) 0 1px,transparent 1.6px),
    linear-gradient(180deg,#0A0F1F 0%,#111830 65%,#18203A 100%);
}
.gs-build-sky::after{ /* street */
  content:"";position:absolute;left:0;right:0;bottom:0;height:12px;z-index:2;background:#0A0D16;border-top:1px solid rgba(255,255,255,.07);
}
.gs-tw{position:absolute;bottom:12px;aspect-ratio:400/560;transform:translate(-50%,4.1%);--clip:0%}
.gs-tw:nth-child(1){left:18%;width:72%}
.gs-tw:nth-child(2){left:50%;width:80%;z-index:1}
.gs-tw:nth-child(3){left:82%;width:72%}
.gs-tw img{
  display:block;width:100%;height:100%;
  clip-path:inset(var(--clip) 0 0 0);transition:clip-path .6s cubic-bezier(.2,.8,.2,1);
  filter:drop-shadow(0 0 12px color-mix(in srgb,var(--c) 28%,transparent)) brightness(1);
}
/* The bright edge where the new storey is going up, and its "+1". */
.gs-scaf{
  position:absolute;top:var(--clip);left:var(--l,28%);right:var(--r,28%);height:2px;margin-top:-1px;border-radius:2px;
  background:#fff;box-shadow:0 0 6px #fff,0 0 14px var(--c),0 0 28px var(--c);opacity:0;
  transition:top .6s cubic-bezier(.2,.8,.2,1);
}
.gs-plus{
  position:absolute;left:50%;top:var(--clip);transform:translate(-50%,-140%);opacity:0;
  font-family:var(--gs-mono);font-size:12px;font-weight:700;color:var(--c);text-shadow:0 0 10px var(--c);
  transition:top .6s cubic-bezier(.2,.8,.2,1);
}
.gs-tw.gs-rise .gs-scaf{animation:gs-scaf .9s ease-out}
.gs-tw.gs-rise .gs-plus{animation:gs-plus 1s ease-out}
.gs-tw.gs-rise img{animation:gs-flash .9s ease-out}
@keyframes gs-scaf{15%{opacity:1}70%{opacity:.9}100%{opacity:0}}
@keyframes gs-plus{0%{opacity:0;transform:translate(-50%,-60%)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-260%)}}
@keyframes gs-flash{30%{filter:drop-shadow(0 0 18px color-mix(in srgb,var(--c) 60%,transparent)) brightness(1.15)}}

/* Habit labels under each building, like the app's City screen. */
.gs-build-pills{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.gs-build-pills span{
  display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 2px;border-radius:10px;min-width:0;
  border:1px solid color-mix(in srgb,var(--c) 55%,transparent);background:color-mix(in srgb,var(--c) 9%,transparent);
}
.gs-build-pills b{font-family:var(--gs-display);font-size:11.5px;font-weight:700;line-height:1.2;color:var(--c);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-build-pills small{font-family:var(--gs-mono);font-size:9px;letter-spacing:.03em;color:var(--gs-muted);white-space:nowrap}
.gs-n{display:inline-block;font-style:normal;color:var(--gs-bright)}
.gs-n.gs-bump{animation:gs-bump .45s ease-out}
@keyframes gs-bump{40%{transform:scale(1.35);color:var(--c)}}

/* This week's check-ins. Dots fill, the goal is met, the city rises. */
.gs-build-weekbar{
  display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);transition:border-color .3s,box-shadow .3s;
}
.gs-build-weekbar > span:first-child{font-family:var(--gs-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gs-soft);white-space:nowrap}
.gs-days{display:flex;gap:5px}
.gs-day{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.09);transition:background .2s,box-shadow .2s,transform .2s}
.gs-day.on{background:var(--gs-acc);box-shadow:0 0 8px rgba(92,225,166,.6)}
.gs-build.gs-goal .gs-build-weekbar{border-color:rgba(92,225,166,.5);box-shadow:0 0 18px rgba(92,225,166,.2)}
.gs-build.gs-goal .gs-day.on{transform:scale(1.15)}

.gs-build.gs-instant *{transition:none!important}
@media(max-width:820px){.gs-wrap .gs-build{order:-1;width:244px}}
@media(max-width:560px){.gs-wrap .gs-build{transform:none}}
@media(prefers-reduced-motion:reduce){.gs-build{transform:none}}

/* ── Tool city: full-width skyline in a tool's app card ───────────────
   get-storey.js (Storey.miniCity) builds it from the tool's own result:
   real Storey towers named after the visitor's habits, in front of a dim
   neighbourhood, rising one storey per kept week. Reuses the blog's
   .gs-tw / .gs-scaf / .gs-plus / .gs-day pieces above. */
.gs-town{display:flex;flex-direction:column;gap:12px}
.gs-town-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:0 2px}
.gs-town-k{font-family:var(--gs-display);font-size:17px;font-weight:800;letter-spacing:-.02em;line-height:1.1;color:var(--gs-bright)}
.gs-town-week{font-family:var(--gs-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gs-acc);white-space:nowrap}
.gs-town-week b{font-weight:600}

.gs-town .gs-city-sky{
  display:block;height:clamp(210px,34cqw,300px);padding:0;gap:0;border-radius:18px;
  background:
    radial-gradient(circle at 88% 15%,#FFE3B0 0 9px,rgba(255,227,176,.16) 10px,transparent 34px),
    radial-gradient(circle at 7% 14%,#fff 0 1px,transparent 1.6px),
    radial-gradient(circle at 21% 30%,rgba(255,255,255,.55) 0 1px,transparent 1.6px),
    radial-gradient(circle at 34% 9%,rgba(255,255,255,.8) 0 1px,transparent 1.6px),
    radial-gradient(circle at 47% 24%,rgba(255,255,255,.6) 0 1px,transparent 1.6px),
    radial-gradient(circle at 61% 7%,#fff 0 1px,transparent 1.6px),
    radial-gradient(circle at 74% 28%,rgba(255,255,255,.5) 0 1px,transparent 1.6px),
    radial-gradient(circle at 96% 38%,rgba(255,255,255,.6) 0 1px,transparent 1.6px),
    linear-gradient(180deg,#0A0F1F 0%,#111830 62%,#18203A 100%);
}
.gs-town .gs-city-sky::before{display:none}
.gs-town .gs-city-sky::after{height:12px;z-index:3;background:#0A0D16;border-top:1px solid rgba(255,255,255,.07)}
.gs-tbg{
  position:absolute;bottom:12px;aspect-ratio:400/560;transform:translate(-50%,4.1%);z-index:0;
  opacity:.34;filter:saturate(.45) brightness(.62);
}
.gs-tbg img{display:block;width:100%;height:100%}
.gs-town .gs-city-sky .gs-tw{width:auto;height:114%;z-index:2}

.gs-town .gs-city-labels{gap:8px}
.gs-town .gs-city-labels span{
  display:inline-flex;align-items:baseline;gap:8px;max-width:none;padding:7px 12px;border-radius:12px;
  border:1px solid color-mix(in srgb,var(--c) 55%,transparent);background:color-mix(in srgb,var(--c) 9%,transparent);
}
.gs-town .gs-city-labels b{font-family:var(--gs-display);font-size:13px;font-weight:700;line-height:1.2;color:var(--c);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-town .gs-city-labels small{font-family:var(--gs-mono);font-size:10.5px;letter-spacing:.03em;color:var(--gs-muted);white-space:nowrap}

.gs-town-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);transition:border-color .3s,box-shadow .3s;
}
.gs-town-bar > span:first-child,.gs-town-goal{font-family:var(--gs-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gs-soft);white-space:nowrap}
.gs-town-goal b{color:var(--gs-acc);font-weight:600}
.gs-town .gs-days{gap:7px}
.gs-town .gs-day{width:13px;height:13px}
.gs-town.gs-goal .gs-town-bar{border-color:rgba(92,225,166,.5);box-shadow:0 0 18px rgba(92,225,166,.2)}
.gs-town.gs-goal .gs-day.on{transform:scale(1.15)}
.gs-town.gs-instant *{transition:none!important}

/* Wide cards: the three steps sit side by side under the copy. */
@container (min-width:760px){
  .gs-card .gs-steps{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;gap:16px}
}
@container (max-width:420px){
  .gs-town-bar{flex-wrap:wrap;justify-content:center}
  .gs-town .gs-day{width:11px;height:11px}
  .gs-town .gs-days{gap:5px}
}