/* TanStan website — one stylesheet, no framework.
   Dark by default, and the palette is the app's own dark theme
   (lib/colors.ts / lib/theme.ts dark sets), so the real screenshots
   sit on the site the way the app sits on a phone. */
:root {
  --bg: #0f1113;
  --bg-2: #14171b;
  --card: #1a1d21;
  --card-2: #20242a;
  --line: #2a2e33;
  --ink: #f2f3f4;
  --ink-2: #9aa0a6;
  --ink-3: #7f858b;
  --gold: #dcae4a;
  --gold-deep: #c9962a;
  --navy: #7b8cc4;
  --green: #4f9d76;
  --green-deep: #2f6b4f;
  --pee: #dcae4a;
  --poop: #a97a52;
  --water: #5fa6cc;
  --meal: #9791d0;
  --nap: #7b8cc4;
  --radius: 14px;
  --max: 1080px;
  /* Room under the fixed footer. One source, because the scroll tour cancels
     it out again (see `.story`'s negative bottom margin). */
  --footer-space: 72px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .4em; letter-spacing: -.01em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 750; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 1em; }
.muted { color: var(--ink-2); }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 22px; }
/* Story and Support read as one vertical column — 760px is the reading line
   Support already used. Scoped off `.story` because the home page's pinned
   tour is the only other `.wrap` inside a `section`, and it needs the full
   width for its text-and-phone stage. Wraps that already set an inline
   max-width (Story's 680) keep it. */
section:not(.story) > .wrap { max-width: 760px; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 10; background: rgba(15,17,19,.88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 28px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; color: var(--ink); }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.nav ul { display: flex; gap: 22px; list-style: none; margin: 0 0 0 auto; padding: 0; }
.nav li a { color: var(--ink-2); font-weight: 500; font-size: .95rem; }
.nav li a.active, .nav li a:hover { color: var(--ink); text-decoration: none; }
.btn { display: inline-block; padding: 11px 18px; border-radius: 999px; font-weight: 650; font-size: .95rem; }
.btn-primary { background: var(--green-deep); color: #fff; }
.btn-primary:hover { background: var(--green); text-decoration: none; }
.btn-ghost { border: 1.5px solid var(--navy); color: var(--navy); }
.btn-ghost:hover { background: rgba(123,140,196,.12); text-decoration: none; }
.nav-toggle { display: none; margin-left: auto; background: none; border: 0; font-size: 1.6rem; cursor: pointer; color: var(--ink); }
@media (max-width: 760px) {
  .nav ul { display: none; position: absolute; left: 0; right: 0; top: 64px; flex-direction: column; gap: 0; background: var(--bg-2); border-bottom: 1px solid var(--line); padding: 8px 22px 16px; }
  .nav ul.open { display: flex; }
  .nav li { padding: 10px 0; }
  .nav-toggle { display: block; }
  /* "Get the app" is the third item in the bar, not an extra, so it stays on
     a phone. The gap and padding come in to make room beside the toggle. */
  .nav .wrap { gap: 12px; }
  .nav .btn { padding: 9px 13px; font-size: .88rem; }
  .nav-toggle { margin-left: auto; }
}

/* Hero (Support's page head; Story's and Features' used it too) */
.hero { padding: 72px 0 48px; position: relative; overflow: hidden; }
/* The two-column grid and the `.center` variant went with Features and Story,
   26 Aug — the one remaining hero sets `display:block` inline. */
.hero .wrap { position: relative; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 700; color: var(--gold); margin-bottom: 14px; }
.get-in-touch { font-size: 1.15rem; color: var(--ink-2); margin: 0; }
/* The two legal doors under it — quiet, one per line, deliberately smaller
   than the sentence they sit under. */
.legal-link { font-size: .95rem; margin: 14px 0 0; }
.legal-link + .legal-link { margin-top: 8px; }
.legal-link a { color: var(--ink-2); }
.legal-link a:hover { color: var(--ink); }
.cta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 26px; }
.badge { display: inline-flex; align-items: center; gap: 8px; background: #f2f3f4; color: #111; border-radius: 10px; padding: 9px 14px; font-size: .9rem; line-height: 1.1; }
.badge svg { fill: #111; }
.badge small { display: block; font-size: .65rem; opacity: .7; }
.badge:hover { text-decoration: none; opacity: .9; }
.badge.soon { background: #3a4046; color: #f2f3f4; }
.badge.soon svg { fill: #f2f3f4; }
@media (max-width: 760px) { .hero { padding-top: 40px; } }

/* Sections. No banded `section.alt` and no `.card` any more: Support is one
   flat background, and it was the last page using either (26 Aug). The legal
   pages never did — they are `main.legal`. `.grid`/`.grid-2` went with the
   cards, and `.card .n` with them. */
section { padding: 64px 0; }
.section-head { max-width: 60ch; margin-bottom: 36px; }
/* The stat tiles (.stats/.stat/.k/.v/.s) went with the Features page, 26 Aug. */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }
blockquote { margin: 0; padding: 22px 26px; background: var(--card); border-left: 4px solid var(--gold); border-radius: 0 var(--radius) var(--radius) 0; font-size: 1.1rem; }
blockquote footer { font-size: .9rem; color: var(--ink-3); margin-top: 8px; }
.rule { margin: 0 0 1em; padding-left: 1.2em; }
.rule li { margin-bottom: .5em; }

/* Real screenshot in a frame */
.shotframe { width: 310px; max-width: 100%; margin: 0 auto; border-radius: 46px; border: 7px solid #26292e; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.55), 0 0 0 1px #000; background: #000; }
.shotframe img { width: 100%; height: auto; display: block; }

/* Decorative paw prints */
.paw { position: absolute; opacity: .05; pointer-events: none; fill: var(--gold); }

/* ---- Scroll tour: a pinned stage; beats disintegrate in and out ----
   Beat 0 is the hero. The phone is a WINDOW that grows: slices keep hard
   bottom edges (the phone continues), the top keeps the real bezel corners,
   and the dynamic island + physical side buttons are modelled in at each
   step's scale. */
/* The bottom margin is the whole of rule 3's "last slide stays put": the
   sticky stage can only travel `height - 100vh`, but the document is that
   plus the body's footer padding, so the final beat used to slide up by
   exactly `--footer-space` after it appeared. Cancelling the padding here
   makes the sticky's travel end on the last scrollable pixel — the residual
   is zero, whatever the footer's height. */
.story { position: relative; height: 490vh; margin-top: -64px; /* the nav's height — so the pinned stage fills the viewport exactly and the scroll cue sits on the fold */ margin-bottom: calc(-1 * var(--footer-space)); }
.story-track { position: absolute; inset: 0; display: flex; flex-direction: column; }
.story-track .step { flex: 1; }
.story-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; }
.story-frame { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; width: 100%; }
.story-text { position: relative; min-height: 320px; }
.panel { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(calc(-50% + 22px)); opacity: 0; filter: blur(14px); transition: opacity .55s, filter .55s, transform .55s; pointer-events: none; max-width: 44ch; }
.panel.active { opacity: 1; filter: blur(0); transform: translateY(-50%); pointer-events: auto; }
/* The beat register: a big top line, then a gold line under it. Unscoped,
   because Support's page head uses the same two registers — only the scale is
   set per place (the `.panel.beat` rules in the media queries below).
   `.beat-title` is a heading wherever it is used; `.beat-eyebrow` never is. */
/* `balance` so a title that needs two lines splits evenly — "Bring Your Own
   AI" otherwise drops a lone "AI" onto the second line. */
.beat-title { font-size: clamp(2rem, 3.9vw, 3rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; margin: 0 0 12px; text-wrap: balance; }
/* Sentence case, so the tracking comes back down: .12em is set for capitals
   and reads as gaps between lowercase letters. */
.beat-eyebrow { letter-spacing: .005em; font-size: clamp(.9rem, 1.15vw, 1.06rem); font-weight: 700; color: var(--gold); line-height: 1.4; margin-bottom: 16px; }
/* A eyebrow of two or more lines wraps each in a span. The line-height above
   is what separates them, so a one-line eyebrow needs no span and looks
   identical either way. */
.beat-eyebrow span { display: block; }
.panel.beat p { margin-bottom: 0; }
.panel p { color: var(--ink-2); }
.panel p a { font-weight: 650; }

/* Beat 0: the hero, centred on the whole stage */
.p-hero { top: 0; bottom: 0; left: 0; right: 0; max-width: none; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 22px; transform: translateY(22px); }
.p-hero.active { transform: none; }
/* Beat 7, the closing card: headline over the mark, both centred by
   `.p-hero`'s own flex. `balance` splits the line evenly where it has to
   wrap rather than stranding "2026". */
.p-hero .cta-title { font-size: clamp(1.9rem, 3.6vw, 2.9rem); text-wrap: balance; margin-bottom: 0; }
.p-hero .cta-mark { display: block; width: clamp(110px, 17vh, 190px); height: auto; border-radius: 22%; margin-top: 30px; box-shadow: 0 22px 50px rgba(0,0,0,.5); }
/* Beat 0's two columns: the wordmark and the pitch on the left, the icon
   with the App Store badge under it on the right — the same
   text-left/visual-right shape the other beats use. Beat 7 shares `.p-hero`
   and stays centred, so everything here hangs off `.hero-grid`. */
.p-hero .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.25fr .75fr; gap: 48px; align-items: center; width: 100%; max-width: var(--max); text-align: left; }
.p-hero .wordmark { font-size: clamp(2.4rem, 5.4vw, 3.8rem); font-weight: 800; letter-spacing: -.02em; line-height: 1; margin-bottom: 12px; }
.p-hero .hero-copy .eyebrow { margin-bottom: 0; font-size: clamp(.95rem, 1.3vw, 1.12rem); letter-spacing: .12em; }
/* One heading-scale passage over three quiet questions. The custom property
   carries the heading size so a short viewport steps the register down in a
   single place. No `max-width`: the grid column is already the measure, and a
   `ch` cap computed off a bold face came out far narrower than the column. */
.p-hero .hero-copy { --hero-head: clamp(1.15rem, 1.65vw, 1.58rem); }
/* Roughly two line breaks between the wordmark block and the passage */
.p-hero .hero-lead { font-size: var(--hero-head); font-weight: 750; line-height: 1.32; letter-spacing: -.01em; color: var(--ink); margin: 1.8rem 0 0; }
.hero-visual { display: flex; flex-direction: column; align-items: center; gap: 30px; }
/* Beat 0 reserves the nav above and the cue's zone below, so the copy centres
   in what is actually free instead of running under either. Scoped to step 0:
   beat 7 shares `.p-hero` and has to stay dead-centred. */
.p-hero[data-step="0"] { padding-top: 76px; padding-bottom: 150px; }
/* Short viewports tighten the spacing rather than shrink the copy out of
   readability — the wordmark and the questions give up the most. */
/* Relaxed once the four claim lines left beat 0 for beats 1-3: the copy is
   about a third the height it was, so a short viewport gives up much less. */
@media (max-height: 820px) {
  .p-hero .hero-copy { --hero-head: clamp(1.05rem, 1.5vw, 1.4rem); }
  .p-hero .wordmark { font-size: clamp(2rem, 4.3vw, 2.8rem); margin-bottom: 7px; }
  .p-hero .hero-lead { margin-top: 1.4rem; }
  .hero-visual { gap: 24px; }
  .panel.beat .beat-title { font-size: clamp(1.8rem, 3.2vw, 2.5rem); }
}
/* The icon is the only visual on this column now the QR has gone, so it takes
   the height the pair used to share — still clamped by `vh` so a 720px-tall
   window keeps the whole hero inside its 100vh stage. */
.hero-icon { width: clamp(150px, 30vh, 300px); height: clamp(150px, 30vh, 300px); border-radius: 22%; display: block; box-shadow: 0 26px 60px rgba(0,0,0,.55); }

/* The scroll cues — one per direction, shown whenever there is a beat that
   way. Driven off the stage's own data-step, which the tracker sets. */
.cue { position: absolute; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity .45s; pointer-events: none; z-index: 6; }
.cue-down { bottom: 84px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cue-up { top: 84px; /* clear of the 64px nav */ }
/* Quieter than the chevron on purpose, and it does not bob (only the svg
   animates). It fades on its own clock: the label is the hero's invitation,
   so it goes after beat 0 while the chevron carries on to the last step. */
.cue-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 600; color: var(--gold); opacity: 1; transition: opacity .45s; }
.story-sticky:not([data-step="0"]) .cue-label { opacity: 0; }
.story-sticky:not([data-step="7"]) .cue-down { opacity: 1; }
.story-sticky:not([data-step="0"]) .cue-up { opacity: 1; }
.cue svg { display: block; filter: drop-shadow(0 3px 9px rgba(0,0,0,.6)); }
.cue-down svg { animation: cue-bob-down 1.7s ease-in-out infinite; }
.cue-up svg { animation: cue-bob-up 1.7s ease-in-out infinite; }
@keyframes cue-bob-down { 0%, 100% { transform: translateY(0); opacity: .8; } 50% { transform: translateY(12px); opacity: 1; } }
@keyframes cue-bob-up { 0%, 100% { transform: translateY(0); opacity: .8; } 50% { transform: translateY(-12px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cue svg { animation: none; } }

/* The phone window */
.story-shot { position: relative; height: 680px; display: flex; align-items: center; justify-content: center; }
.phone-wrap { position: relative; padding: 0 4px; overflow: hidden; width: 478px; height: 240px; filter: drop-shadow(0 26px 42px rgba(0,0,0,.55)); transition: width .7s cubic-bezier(.2,.7,.2,1), height .7s cubic-bezier(.2,.7,.2,1), opacity .5s, filter .6s; }
.crop { position: relative; width: 100%; height: 100%; border: 6px solid #26292e; border-bottom: 0; border-radius: 42px 42px 0 0; overflow: hidden; background: #000; transition: border-radius .7s cubic-bezier(.2,.7,.2,1); }
.crop img { display: block; width: 458px; height: auto; transition: width .7s cubic-bezier(.2,.7,.2,1); }
.island { position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); top: 12px; width: 114px; height: 30px; background: #000; border: 1px solid #24272b; border-radius: 999px; transition: top .7s cubic-bezier(.2,.7,.2,1), width .7s cubic-bezier(.2,.7,.2,1), height .7s cubic-bezier(.2,.7,.2,1); }
.pbtn { position: absolute; width: 4px; border-radius: 2px; background: #383d44; transition: top .7s cubic-bezier(.2,.7,.2,1), height .7s cubic-bezier(.2,.7,.2,1); }
.pbtn.action, .pbtn.volup, .pbtn.voldown { left: 0; }
.pbtn.power { right: 0; }
/* step 1 geometry is the default (phone at 458px wide; heights are that
   width x the hardware's proportions) */
.pbtn.action { top: 154px; height: 30px; }
.pbtn.volup { top: 208px; height: 53px; }
.pbtn.voldown { top: 271px; height: 53px; }
.pbtn.power { top: 233px; height: 79px; }

.story-sticky[data-step="0"] .phone-wrap { opacity: 0; filter: drop-shadow(0 26px 42px rgba(0,0,0,.55)) blur(12px); }

.story-sticky[data-step="2"] .phone-wrap { width: 420px; height: 400px; }
.story-sticky[data-step="2"] .crop img { width: 400px; }
.story-sticky[data-step="2"] .island { top: 10px; width: 100px; height: 26px; }
.story-sticky[data-step="2"] .pbtn.action { top: 134px; height: 26px; }
.story-sticky[data-step="2"] .pbtn.volup { top: 182px; height: 46px; }
.story-sticky[data-step="2"] .pbtn.voldown { top: 237px; height: 46px; }
.story-sticky[data-step="2"] .pbtn.power { top: 204px; height: 69px; }

.story-sticky[data-step="3"] .phone-wrap, .story-sticky[data-step="4"] .phone-wrap,
.story-sticky[data-step="5"] .phone-wrap, .story-sticky[data-step="6"] .phone-wrap,
.story-sticky[data-step="7"] .phone-wrap { width: 310px; height: 641px; }
.story-sticky[data-step="3"] .crop, .story-sticky[data-step="4"] .crop,
.story-sticky[data-step="5"] .crop, .story-sticky[data-step="6"] .crop { border-radius: 42px; border-bottom: 6px solid #26292e; }
.story-sticky[data-step="3"] .crop img, .story-sticky[data-step="4"] .crop img,
.story-sticky[data-step="5"] .crop img, .story-sticky[data-step="6"] .crop img { width: 290px; }
.story-sticky[data-step="3"] .island, .story-sticky[data-step="4"] .island,
.story-sticky[data-step="5"] .island, .story-sticky[data-step="6"] .island { top: 8px; width: 72px; height: 19px; }
.story-sticky[data-step="3"] .pbtn.action, .story-sticky[data-step="4"] .pbtn.action { top: 97px; height: 19px; }
.story-sticky[data-step="3"] .pbtn.volup, .story-sticky[data-step="4"] .pbtn.volup { top: 132px; height: 33px; }
.story-sticky[data-step="3"] .pbtn.voldown, .story-sticky[data-step="4"] .pbtn.voldown { top: 172px; height: 33px; }
.story-sticky[data-step="3"] .pbtn.power, .story-sticky[data-step="4"] .pbtn.power { top: 148px; height: 50px; }

.story-sticky[data-step="5"] .phone-wrap, .story-sticky[data-step="6"] .phone-wrap,
.story-sticky[data-step="7"] .phone-wrap { opacity: 0; filter: drop-shadow(0 26px 42px rgba(0,0,0,.55)) blur(12px); }

/* The scrolled-feed screenshot fades in at beat 3; the real Summary
   screenshot on top of it at beat 4 */
.feed-shot { position: absolute; inset: 0; z-index: 1; background: #000; opacity: 0; transition: opacity .5s; pointer-events: none; }
.feed-shot img { width: 100%; height: auto; display: block; }
.story-sticky[data-step="3"] .feed-shot { opacity: 1; }
.sum-shot { position: absolute; inset: 0; z-index: 2; background: #000; opacity: 0; transition: opacity .5s; pointer-events: none; }
.sum-shot img { width: 100%; height: auto; display: block; }
.story-sticky[data-step="4"] .sum-shot { opacity: 1; }

/* The household: three phones at their real relative sizes, one log on all.
   The case colour is the person. Widths follow the hardware (SE 67.3mm,
   Pro 71.9mm, Pro Max 77.6mm at ~2.84 px/mm); the shorter bodies crop the
   same screenshot rather than shrinking it. */
/* The 30px of negative inset is elbow room: even overlapped, the three
   bodies are wider than this column, and flex would otherwise shrink them
   below their real sizes. What shrink remains at narrower widths is
   proportional now — see `aspect-ratio` below. */
.lineup { position: absolute; inset: 0 -30px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 30px; opacity: 0; filter: blur(14px); transition: opacity .55s, filter .55s; pointer-events: none; }
.story-sticky[data-step="5"] .lineup, .story-sticky[data-step="6"] .lineup { opacity: 1; filter: blur(0); }
.lineup .ph { border-radius: 34px; border: 6px solid; overflow: hidden; background: #000; box-shadow: 0 24px 55px rgba(0,0,0,.55); transition: filter .5s; }
.lineup .ph img { width: 100%; height: auto; display: block; }
/* `aspect-ratio` rather than a height: the three bodies plus their overlaps
   are wider than this column, so flex shrinks them — and with a fixed height
   the whole of that shrink came out of the width, which had the Max
   rendering ~16% too narrow for its own hardware. */
.lineup .ph.se { width: 191px; aspect-ratio: 191 / 392; border-color: #a63a31; margin-right: -26px; z-index: 1; }
.lineup .ph.max { width: 220px; aspect-ratio: 220 / 462; border-color: #26292e; z-index: 2; }
.lineup .ph.pro { width: 204px; aspect-ratio: 204 / 424; border-color: #31569e; margin-left: -26px; z-index: 1; }
.story-sticky[data-step="6"] .lineup .ph { filter: brightness(.4); }

/* AI chat card — beat 6 */
.sv-ai { position: absolute; z-index: 4; left: 8%; right: 8%; top: 32%; opacity: 0; transform: translateY(26px); filter: blur(10px); transition: opacity .5s, transform .5s cubic-bezier(.2,.7,.2,1), filter .5s; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.6); pointer-events: none; }
.story-sticky[data-step="6"] .sv-ai { opacity: 1; transform: none; filter: blur(0); }
.bubble { border-radius: 14px; padding: 10px 13px; font-size: .92rem; max-width: 85%; }
.bubble.q { background: var(--green-deep); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.bubble.a { background: var(--card-2); border: 1px solid var(--line); margin-top: 10px; border-bottom-left-radius: 4px; }
.sv-ai .cap { font-size: .78rem; color: var(--ink-3); margin: 12px 0 0; }

/* Back to the top — persistent once you've left it */
.totop { position: fixed; right: 20px; bottom: 62px; z-index: 30; width: 46px; height: 46px; border-radius: 50%; background: var(--card-2); border: 1px solid var(--line); display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .3s; cursor: pointer; }
.totop.show { opacity: 1; pointer-events: auto; }
.totop svg { stroke: var(--ink-2); }
.totop:hover svg { stroke: var(--ink); }

@media (max-width: 900px) {
  .story-sticky { align-items: flex-start; }
  .story-frame { grid-template-columns: 1fr; gap: 0; align-items: start; padding-top: 84px; }
  /* The panels are centred in this box, so its height sets where the tallest
     beat's first line lands. 250px let the AI beat reach up into the up-cue;
     this pushes the centre down far enough to clear it, while the tallest
     beat still stops above the phone at 349px. */
  .story-text { min-height: 300px; }
  .panel h2 { font-size: 1.45rem; }
  .p-hero .cta-title { font-size: clamp(1.5rem, 6.4vw, 2rem); }
  .p-hero .cta-mark { width: clamp(96px, 14vh, 150px); margin-top: 24px; }
  .panel.beat .beat-title { font-size: clamp(1.7rem, 7vw, 2.1rem); margin-bottom: 8px; }
  .panel.beat .beat-eyebrow { font-size: .78rem; margin-bottom: 12px; }
  .panel p { font-size: .93rem; }
  .panel { max-width: none; }
  .p-hero { padding-top: 0; justify-content: center; }
  /* Hero stacks: the text first, the icon and the badge under it. */
  .p-hero .hero-grid { grid-template-columns: 1fr; gap: 24px; text-align: center; justify-items: center; }
  .p-hero .wordmark { font-size: clamp(2rem, 9vw, 2.7rem); }
  /* The narrow cue sits at 118px and is taller than the wide one now that it
     carries a label, so beat 0 reserves the whole of that zone. */
  .p-hero[data-step="0"] { padding-bottom: 186px; }
  .p-hero .hero-copy { --hero-head: clamp(1.05rem, 4.4vw, 1.3rem); }
  .p-hero .hero-lead { margin-top: 1rem; }
  /* One visual and the badge: the column stays a flex stack (the side-by-side
     grid existed only to fit the QR beside the icon). */
  .hero-visual { gap: 18px; }
  .hero-icon { width: clamp(104px, 17vh, 168px); height: clamp(104px, 17vh, 168px); }
  /* Out of flow so the wide beat-1 slice can't stretch the grid column */
  .story-shot { position: absolute; top: 348px; left: 50%; width: 470px; height: 660px; transform: translateX(-50%) scale(.6); transform-origin: top center; }
  .cue-down { bottom: 118px; }
  .cue-up { top: 76px; }
  .cue svg { width: 44px; height: 44px; }
}

/* Support / legal */
.legal .wrap { max-width: 720px; }
.legal h1 { font-size: 2.2rem; }
.legal .updated { color: var(--ink-3); font-size: .9rem; margin-bottom: 26px; }
.legal .lead { font-size: 1.15rem; color: var(--ink-2); }
.legal h2 { font-size: 1.3rem; margin-top: 2em; }
.legal p { white-space: pre-line; }
/* `.socials` (the pill row) and `.contact a.big` went with Support's rework,
   26 Aug; `.hero p.lede` went with it too. */
details { border-top: 1px solid var(--line); padding: 14px 0; }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; font-weight: 650; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
summary::marker, summary::-webkit-details-marker { display: none; content: ""; }
summary::after { content: "+"; color: var(--ink-3); }
/* The child combinator matters now that topics nest questions: without it an
   open topic turns every "+" inside it into a "–". */
details[open] > summary::after { content: "–"; }
details p { margin: 10px 0 0; color: var(--ink-2); }

/* Support's questions: topics shut by default, questions inside them, and a
   box that searches question and answer together. */
.faq-search { width: 100%; box-sizing: border-box; margin-bottom: 8px; padding: 12px 15px;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink); font: inherit; font-size: .98rem; -webkit-appearance: none; appearance: none; }
.faq-search::placeholder { color: var(--ink-3); }
.faq-search:focus { outline: none; border-color: var(--navy); }
.faq-none { margin: 16px 0 0; color: var(--ink-2); }
.faq { margin-top: 12px; }
.faq .topic { border-top: 1px solid var(--line); padding: 0; }
.faq .topic:last-of-type { border-bottom: 1px solid var(--line); }
.faq .topic > summary { padding: 16px 0; font-weight: 700; font-size: 1.06rem; }
/* Indented and ruled, so an open topic reads as holding its questions */
.faq .topic-body { margin: 0 0 14px 2px; padding-left: 16px; border-left: 2px solid var(--line); }
.faq .topic-body > details { border-top: 0; padding: 9px 0; }
.faq .topic-body > details:last-of-type { border-bottom: 0; }
/* A question is always the bright line and its answer the quiet one, open or
   shut — the reader can tell what is pressable without pressing it. Weight and
   size carry the rest of the hierarchy: topic 700/1.06, question 600/.96,
   answer plain. */
.faq .topic-body > details > summary { font-weight: 600; font-size: .96rem; color: var(--ink); }
.faq .topic-body > details > p { color: var(--ink-2); }

/* The CSS phone mock (.phone/.screen/.state/.stretch/.row/.chip/.buttons/
   .shot) lived here and went with the Features page, 26 Aug. Home's phone is
   real screenshots (.phone-wrap/.crop), not this. */

/* Footer — pinned to the bottom of the screen on every page */
footer.site { position: fixed; bottom: 0; left: 0; right: 0; z-index: 15; background: rgba(15,17,19,.92); backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding: 12px 0; font-size: .82rem; color: var(--ink-2); }
/* One line, lower left. The flex row, the link list and the link colour went
   with the links themselves — a lone span needs none of them, and `.wrap`
   already carries the width and the side padding. */
body { padding-bottom: var(--footer-space); }