/* 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: 56px; transition: padding-top .7s cubic-bezier(.2,.7,.2,1); }
  /* The household and the AI beat carry the tallest copy in the tour, and the
     up-cue sits at 76px: centred in a box that starts at 56 their titles run
     under the chevron. They are also the two beats with room to spare under
     the text — the lineup is far shorter than a whole phone — so they keep
     the old position and the four phone beats take the room instead. The
     transition is what stops the swap reading as a jolt. */
  .story-sticky[data-step="5"] .story-frame,
  .story-sticky[data-step="6"] .story-frame { padding-top: 98px; }
  /* The panels are centred in this box, so its height sets where each beat's
     first line lands. 240 over 56px of padding puts every beat's last line
     ~60px higher than 300 over 84 did, and that 60px is what the phone rises
     into. The two beats whose copy is too tall for it are the two that keep
     the old position above — a shorter box only pays for itself where the
     beat under it is a whole phone. */
  .story-text { min-height: 240px; }
  .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.
     The phone is placed by its own middle: on a phone the beat reads as a
     line of text, a picture, and the cue to carry on, and the picture wants
     to sit halfway between the other two. `50vh` is what makes that hold on
     a 667pt screen and a 932pt one — the text is anchored to the top and the
     cue to the bottom, so their midpoint is half the viewport plus a
     constant. Each number below is (that midpoint) minus (where the visual's
     own middle sits inside this 660px box, scaled): 330px for the phone,
     393px for the household lineup, which stands on the box's floor.
     The two tall beats step down to .56 because a full phone at .6 lands on
     the cue at 812pt — the height a Pro Max actually gives Safari. */
  .story-shot { position: absolute; top: calc(50vh - 167px); left: 50%; width: 470px; height: 660px; transform: translateX(-50%) scale(.6); transform-origin: top center; transition: top .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
  .story-sticky[data-step="3"] .story-shot, .story-sticky[data-step="4"] .story-shot { top: calc(50vh - 154px); transform: translateX(-50%) scale(.56); }
  .story-sticky[data-step="5"] .story-shot, .story-sticky[data-step="6"] .story-shot,
  .story-sticky[data-step="7"] .story-shot { top: calc(50vh - 173px); }
  .cue-down { bottom: 104px; }
  .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); }