/* ===========================================================================
   home.css — the landing page's stylesheet. HAND-MAINTAINED, never built.
   ===========================================================================

   This page does NOT load app.css, and that is not a layering preference: the
   two sheets disagree on names. app.css's `.hero-grid` is the old landing's
   two-column hero; here it is the faint grid behind the headline. `.hero`,
   `.eyebrow`, `.lead` and `.micro` collide the same way. So this file is
   self-contained — the pattern dashboard.css and paywall.css already set — and
   it repeats the design tokens on purpose, exactly as paywall.css does.

   THE PALETTE IS DOCUMENTED HERE AND SHARED BY THE WHOLE SITE. This file landed
   it first, as a trial on one page, and app.css, dashboard.css and paywall.css
   now carry the same values — so the token block below is the reference the
   other three point back at, and a change to a shared colour belongs in all
   four. (brand.css still holds no colour at all, only the lockup's geometry,
   which is what let the palette move without the logo noticing.)

   It is a flattening of assets/styles.css, the reviewed prototype. That file
   grew by appending four rounds of overrides after the base rules (a `h1`
   declared five times, the last one winning), which is fine for a prototype
   and unmaintainable here: a later reader cannot tell which value is live.
   Every rule below is the value that actually won, written once.

   Two deliberate departures from the prototype, both of which it got wrong:

   - Letter-spacing on the display type is in `em`, not `px`. The prototype
     paired `font-size: clamp(62px, 6.2vw, 88px)` with a fixed `-4.8px`, so the
     tracking it was tuned for at 88px became -0.077em at the small end of the
     clamp and crushed the headline on a laptop. In `em` it holds at every size
     and the four media-query re-declarations it needed collapse into one.

   - Nothing in the product illustration is below 10px. The prototype drew the
     demo window's text at 6-8px to read as a thumbnail of an app. At that size
     it is not small type, it is texture — unreadable, and it renders blurry on
     a non-HiDPI screen. The hierarchy is kept, the floor is raised.

   The float on the hero's scene cards animates `translate` while `rotate`
   carries the tilt, as separate properties. The prototype needed the Web
   Animations API and a computed-style read to compose `rotate() translateY()`
   into one `transform`; as individual properties CSS composes them itself, so
   the animation is a keyframe block and home.js only toggles a class.
   =========================================================================== */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* The palette is Lucky Orange's Discovery page, read off the live stylesheet
     rather than eyeballed: cream #faf9f6 (their body background), aubergine
     #320132, coral #ff704c, violet #645da2, lilac-grey #e6e6eb. The greys below
     are NOT their hexes — they are the old palette's greys rotated into these
     hues at their *original lightness*, which is what keeps every contrast
     relationship the layout was built on (which grey is a border and which is
     text) exactly where it was.

     One rule holds the accents together: AGAINST CREAM, CORAL IS ONLY EVER A
     FILL. It is a 2.6:1 colour there, so a coral word or a coral icon on the
     page background is a contrast failure waiting to happen, while a coral bar,
     dot, ring or tint is free. Everywhere the old sheet used gold for *text* on
     cream, the plum tones below took over. On the aubergine it is a different
     colour entirely — 6.5:1 — which is why the banner's sparkle, the two mark
     glyphs and the primary button's focus ring are all coral and all sitting on
     #320132. */
  --ink: #190119;           /* deepest plum — body text */
  --ink-deep: #320132;      /* aubergine — the primary button, the dark banner */
  --paper: #faf9f6;         /* warm cream — the page */
  --coral: #ff704c;         /* the accent. a fill, only ever a fill */
  --coral-ink: #4c2217;     /* text sitting on a coral tint */
  --violet: #645da2;        /* the "yes / done" signal, where green used to be */
  --plum: #5b345b;          /* a hovered link, a small label */
  --muted: #785c78;
  --muted-soft: #9b7d9b;
  --line: #e2e2e8;
  --line-soft: #ececf0;
  --font-display: "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --lp-wide: 1240px;    /* header, footer */
  --lp-max: 1100px;     /* every content section */
  --lp-demo: 1020px;    /* the demo window and the strip under it */
  --stage: 5.6s;        /* one beat of the demo; home.js uses the same number */

  /* Two button heights for the whole page, and they are HEIGHTS rather than
     paddings on purpose. A padding-built control's height is padding +
     line-height + border, so two of them with different font sizes or a
     different icon inside drift apart by a few pixels and there is no way to
     keep them level except by hand — which is how the landing ended up with
     seven controls at seven heights: the hero's pair at 60px beside 56.4px,
     and the nav's row at 44.8px, 46px and 40px. With the height stated and the
     padding horizontal only, what a control contains stops deciding how tall
     it is. `min-height`, not `height`, so a label that wraps on a narrow phone
     still grows rather than spilling out. */
  --btn-lg: 60px;   /* the hero's pair and the closing call to action */
  --btn-md: 44px;   /* everything else: nav, chip, tabs, banner, card */
}

/* ── Base ───────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 108px;   /* the sticky header, so #how lands below it */
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body.lp-body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { max-width: 100%; }
/* Several things here are toggled with the `hidden` attribute — the demo's two
   card faces, the extension button's two labels — and every one of them also
   carries a `display` of its own. Without this the attribute loses. */
[hidden] { display: none !important; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; }
p { margin: 0; }

/* Two rings, because one cannot do it any more. The page's ring is the
   aubergine, which reads against cream and against white. The primary button IS
   that aubergine, so the same ring on it would be invisible — it takes coral,
   the one place a 2.6:1-against-cream colour is safe, because here it is sitting
   on #320132 at 6.5:1. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible {
  outline: 3px solid var(--ink-deep);
  outline-offset: 4px;
  border-radius: 3px;
}
.button:focus-visible { outline-color: var(--coral); }

/* Every icon is an inline SVG sized by its caller (lp_icon's $size), so it must
   never be stretched by a flex parent, and it must sit on the text baseline
   where it is used inline. */
.ic { flex: none; vertical-align: -0.14em; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 60;
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
  padding: 12px 16px; font-size: 14px; font-weight: 600;
}
.skip-link:focus { top: 12px; }

/* ── Buttons and links ──────────────────────────────────────────────────── */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  background: var(--ink-deep); color: var(--paper);
  border: 1px solid var(--ink-deep); border-radius: 8px;
  min-height: var(--btn-lg); padding: 0 26px; font-size: 15px; font-weight: 700;
  box-shadow: 0 3px 0 var(--ink), 0 8px 23px rgba(50, 1, 50, 0.16);
  transition: translate 0.2s ease, box-shadow 0.2s ease;
}
.button:hover {
  translate: 0 -2px;
  box-shadow: 0 5px 0 var(--ink), 0 10px 26px rgba(50, 1, 50, 0.22);
}
.button.small { min-height: var(--btn-md); padding: 0 18px; font-size: 13px; gap: 10px; }
.button.light {
  background: #fff; border-color: #fff; color: var(--ink);
  box-shadow: none; font-size: 14px; white-space: nowrap;
  min-height: var(--btn-md); padding: 0 20px;
}
.button.light:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); }

.text-button {
  background: transparent; border: 0; color: #755a75;
  font-size: 11px; padding: 6px 8px;
}
.text-button:hover { color: var(--ink); }

.text-link {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 14px; font-weight: 700;
  border-bottom: 1px solid #b099b0; padding-bottom: 6px;
}
.text-link:hover { border-bottom-color: var(--ink); }

.eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: 0.17em;
  text-transform: uppercase; color: #735973;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
/* Sticky, because the two in-page anchors (#how, #faq) are the page's only
   navigation and a visitor three sections down has nothing else to steer with.
   The structural hooks — .nav-toggle, .nav-menu, #userChip — are the ones
   assets/js/app.js already wires; this file changed how the bar looks, not
   what it does. */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 249, 246, 0.88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: var(--lp-wide); margin: 0 auto; padding: 0 30px;
  height: 88px; display: flex; align-items: center; gap: 28px;
}
.nav-menu { display: flex; align-items: center; gap: 36px; margin-left: auto; }
.nav-links { display: flex; align-items: center; gap: 32px; font-size: 14px; font-weight: 600; }
.nav-links a:hover { color: var(--plum); }
.nav-actions { display: flex; align-items: center; gap: 22px; }
.signin { font-size: 14px; font-weight: 600; }
.signin:hover { color: var(--plum); }

.nav-toggle {
  display: none; background: transparent; border: 1px solid var(--line);
  border-radius: 8px; margin-left: auto; padding: 0;
  /* Square, so the one control that is an icon and no label still belongs to
     the scale the labelled ones follow. */
  min-height: var(--btn-md); min-width: var(--btn-md);
}
.nav-toggle .bars { display: grid; gap: 4px; }
.nav-toggle .bars i { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; }

/* The account chip and its dropdown — same markup the dashboard's header uses,
   so sign-out keeps working from here without a second copy of that handler. */
.user-menu { position: relative; }
.user-chip {
  display: flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  min-height: var(--btn-md); padding: 0 15px 0 7px; font-size: 13px; font-weight: 600;
}
.user-avatar { width: 28px; height: 28px; border-radius: 50%; display: block; }
.user-avatar-fallback {
  display: grid; place-items: center; background: var(--ink-deep); color: var(--paper);
  font-size: 13px; font-weight: 700;
}
.user-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-dropdown {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 10;
  min-width: 212px; display: grid; gap: 2px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 8px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
}
.user-dropdown[hidden] { display: none; }
.user-email {
  font-size: 11px; color: var(--muted); padding: 6px 10px 8px;
  border-bottom: 1px solid var(--line-soft); margin-bottom: 4px;
  overflow: hidden; text-overflow: ellipsis;
}
.user-logout {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 0; border-radius: 6px;
  padding: 9px 10px; font-size: 13px; font-weight: 600;
}
.user-logout:hover { background: var(--line-soft); }

/* ── Hero ───────────────────────────────────────────────────────────────── */
/* `isolation: isolate` is load-bearing: the grid (-2), the glow (-1) and the
   marker behind "On your terms." all sit on negative z-indexes, and without a
   stacking context here they would paint behind the page background instead. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  text-align: center; padding: 72px 24px 0;
  background: radial-gradient(ellipse at 50% 48%, #ffe2db 0, transparent 59%);
  perspective: 1500px;
}
.hero-grid {
  position: absolute; inset: 0 0 auto; height: 830px; z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(198, 190, 205, 0.26) 1px, transparent 1px),
    linear-gradient(90deg, rgba(198, 190, 205, 0.26) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: linear-gradient(transparent, #000 25%, #000 65%, transparent);
  mask-image: linear-gradient(transparent, #000 25%, #000 65%, transparent);
}
.hero::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  width: 960px; height: 420px; left: 50%; top: 435px; translate: -50% 0;
  background: radial-gradient(ellipse, rgba(255, 149, 120, 0.3), transparent 69%);
}

/* 44px, not the 28px that sat under the eyebrow. Everything in the hero's flow
   hangs off this margin, while the four scene cards are positioned absolutely
   at fixed tops tuned against it — so letting the headline rise by the height
   of the label that used to be above it would have slid the whole column up
   and left the cards sitting low beside it. The sum to the headline is
   unchanged: 72px of padding + 44px here. */
.hero h1 {
  font-size: clamp(38px, 6.2vw, 88px);
  letter-spacing: -0.055em; line-height: 1.025; font-weight: 700;
  margin: 44px auto 26px; max-width: 1000px;
}
.highlight { position: relative; z-index: 0; white-space: nowrap; }
.highlight::after {
  content: ''; position: absolute; z-index: -1;
  left: 1px; right: 0; bottom: 0.06em; height: 0.14em;
  background: var(--coral); rotate: -1.1deg;
}

.hero .lead {
  font-size: 17px; line-height: 1.8; color: #715771;
  max-width: 610px; margin: 0 auto;
}
.hero-actions {
  display: flex; justify-content: center; align-items: center;
  gap: 17px; margin-top: 29px; flex-wrap: wrap;
}
.watch {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid #d3d3dd; background: rgba(255, 255, 255, 0.74);
  border-radius: 8px; min-height: var(--btn-lg); padding: 0 22px;
  font-size: 15px; font-weight: 600;
}
.watch:hover { background: #fff; border-color: #bbbbcb; }
.play { display: inline-flex; color: var(--plum); }
.hero .micro { font-size: 11px; margin-top: 21px; color: #916f91; }

/* The four cards orbiting the headline. They repeat the demo window's four
   beats, so they are aria-hidden in the markup and purely decorative here. */
.hero-art { pointer-events: none; }
.scene-card {
  position: absolute; z-index: 1; text-align: left;
  background: rgba(255, 255, 255, 0.93);
  border: 1px solid #dedee6; border-radius: 11px; padding: 17px;
  box-shadow: 0 3px 3px rgba(50, 1, 50, 0.02), 0 15px 30px rgba(50, 1, 50, 0.05);
  transition: border-color 0.6s ease, box-shadow 0.6s ease;
  will-change: translate;
}
.scene-card.is-active {
  border-color: var(--coral);
  box-shadow: 0 0 0 4px rgba(255, 112, 76, 0.12), 0 18px 35px rgba(50, 1, 50, 0.08);
  animation: sceneFloat var(--stage) cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.scene-label {
  font-size: 9px; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: #9a7b9a; margin-bottom: 14px;
}
.scene-card small { display: block; font-size: 10px; color: #a388a3; line-height: 1.55; }

.scene-url { width: 220px; left: max(23px, calc(50% - 660px)); top: 79px; rotate: -9deg; }
.scene-address {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.scene-address .ic { color: var(--plum); }
.scene-url small { margin-top: 9px; }
.scan-track { height: 3px; background: #ebebf0; overflow: hidden; margin-top: 15px; }
.scan-track i { display: block; width: 45%; height: 100%; background: var(--coral); }

.scene-profile { width: 212px; right: max(24px, calc(50% - 650px)); top: 62px; rotate: 9deg; }
.scene-identity { display: flex; gap: 9px; align-items: center; }
.scene-mark {
  flex: none; width: 30px; height: 30px; border-radius: 7px;
  background: var(--ink-deep); color: var(--paper);
  font: 26px/30px Georgia, "Times New Roman", serif; text-align: center;
}
.scene-mark b { color: var(--coral); font-weight: inherit; }
.scene-identity strong { display: block; font-size: 12px; }
.scene-identity small { font-size: 9px; margin-top: 2px; }
.scene-lines { margin: 15px 0; }
.scene-lines i { display: block; height: 4px; background: #e0dfed; margin: 7px 0; border-radius: 2px; }
.scene-lines i:nth-child(2) { width: 85%; }
.scene-lines i:nth-child(3) { width: 62%; }
.scene-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 10px;
  background: #ffd7ce; color: var(--coral-ink); padding: 5px 8px; border-radius: 4px;
}

.scene-directories { width: 216px; left: max(35px, calc(50% - 610px)); top: 396px; rotate: 5deg; }
.scene-directory {
  display: flex; align-items: center; gap: 9px;
  font-size: 11px; padding: 9px 0; border-bottom: 1px solid #e9e8f2;
}
.scene-directory:last-child { border-bottom: 0; }
.scene-directory > span {
  flex: none; width: 22px; height: 22px; display: grid; place-items: center;
  border: 1px solid #dfddec; border-radius: 5px; color: #a185a1;
}
.scene-directory b { font-weight: 500; }
.scene-directory > .ic { margin-left: auto; color: #9b7d9b; }

.scene-review { width: 200px; right: max(25px, calc(50% - 620px)); top: 385px; rotate: -7deg; }
.scene-answer { margin-top: 9px; }
.scene-answer small { font-size: 10px; }
.scene-answer > span {
  display: flex; justify-content: space-between; align-items: center;
  border: 1px solid #dddceb; border-radius: 4px;
  padding: 7px; font-size: 11px; margin-top: 3px;
}
.scene-answer .ic { color: #625ba2; }
.scene-done {
  display: flex; justify-content: space-between;
  font-size: 10px; font-weight: 600; margin-top: 14px;
}

.hero-motion {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 32px auto 0; color: #a084a0;
}
.hero-motion > span {
  font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase;
}
.hero-motion button { font-size: 11px; border-left: 1px solid #d4d2e5; padding: 3px 0 3px 13px; }

/* ── The demo window ────────────────────────────────────────────────────── */
.demo-wrap {
  position: relative; max-width: var(--lp-demo); margin: 26px auto 0;
  background: #fff; border: 1px solid #d1d1db; border-radius: 14px;
  text-align: left; scroll-margin-top: 112px;
  box-shadow: 0 35px 65px rgba(50, 1, 50, 0.1), 0 1px 1px #fff, 0 0 0 8px rgba(255, 255, 255, 0.69);
  transform: rotateX(3deg); transform-origin: center top;
}
.demo-toolbar {
  height: 44px; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0 16px;
  background: #f0f0f6; border-bottom: 1px solid var(--line); border-radius: 13px 13px 0 0;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #846584;
}
.demo-toolbar > span:nth-child(2) { display: inline-flex; align-items: center; gap: 8px; }
.window-dots { display: inline-flex; gap: 5px; }
.window-dots i { width: 7px; height: 7px; border-radius: 50%; background: #ccccd7; }

.demo-grid { display: grid; grid-template-columns: 180px 1fr; min-height: 368px; }
.demo-sidebar {
  padding: 24px 13px; background: #fdfcfa; border-right: 1px solid var(--line);
  font-size: 11px;
}
.side-brand { display: flex; gap: 10px; align-items: center; padding: 0 7px 24px; }
.side-item {
  display: flex; gap: 11px; align-items: center;
  padding: 9px 10px; margin-bottom: 5px; color: #8c6b8c; border-radius: 5px;
}
.side-item.selected { background: #ffc6b9; color: var(--ink); }
.side-note {
  border: 1px solid #e4e4ea; border-radius: 6px; background: #fcfcfa;
  padding: 13px; margin-top: 30px;
}
.side-note .spark { display: block; margin-bottom: 8px; color: var(--plum); }
.side-note b { display: block; font-size: 12px; line-height: 1.45; }
.side-note p { font-size: 10px; line-height: 1.55; color: #906f90; margin-top: 7px; }

.demo-content { padding: 24px 28px 16px; }
.demo-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.demo-heading .eyebrow { font-size: 9px; letter-spacing: 0.13em; }
/* These three read as headings and are not elements — see the notes in
   partials/home/hero.php and extension.php. They sit inside mock-ups, so they
   carry the display face by hand rather than inheriting it from h1-h4. */
.stage-heading {
  font-family: var(--font-display); font-weight: 700;
  font-size: 20px; letter-spacing: -0.02em; margin: 8px 0 16px;
}
.example-badge {
  flex: none; font-size: 10px; border: 1px solid var(--line); border-radius: 4px;
  padding: 5px 8px; color: #917191; white-space: nowrap;
}

.url-card {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid #d9d9e2; background: #faf9f6; border-radius: 7px;
  padding: 12px; font-size: 12px;
}
.url-icon { display: inline-flex; color: var(--plum); }
.url-status { margin-left: auto; font-size: 10px; color: var(--plum); }

.flow-cards { display: flex; align-items: center; gap: 13px; margin-top: 16px; }
.profile-card, .destination-card {
  flex: 1; min-width: 0; overflow: hidden;
  border: 1px solid #dfdfe6; border-radius: 8px; background: #fff;
  transition: opacity 0.5s ease, translate 0.5s ease, box-shadow 0.5s ease;
}
.destination-card { align-self: stretch; }
.flow-arrow { flex: none; color: #8f8fa8; }

.card-top {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  border-bottom: 1px solid #ebebef; padding: 11px 13px;
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #8d6d8d;
}
.card-top .check { color: #4f4983; display: inline-flex; }

.product-identity { display: flex; gap: 10px; align-items: center; padding: 15px 14px 10px; }
.product-icon {
  flex: none; width: 34px; height: 34px; border-radius: 8px;
  background: var(--ink-deep); color: var(--paper); text-align: center;
  font: 28px/34px Georgia, "Times New Roman", serif;
}
.product-icon b { color: var(--coral); font-weight: inherit; }
.product-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 15px; margin: 0 0 4px;
}
.product-identity p { font-size: 10px; color: #906e90; }

.profile-details { padding: 0 14px 10px; font-size: 11px; }
.profile-details > div { display: flex; justify-content: space-between; gap: 10px; margin-top: 9px; }
.profile-details span { color: #977797; }
.profile-details b { font-weight: 500; }
.profile-details p { font-size: 10px; line-height: 1.55; text-align: right; }
.profile-footer {
  display: flex; align-items: center; gap: 7px;
  background: #fbfaf8; border-top: 1px solid #ebebef;
  padding: 9px 13px; font-size: 10px; color: #856785;
}

.directory {
  display: flex; align-items: center; gap: 9px;
  padding: 14px 10px; border-bottom: 1px solid #ededf1;
}
.directory-icon {
  flex: none; width: 27px; height: 27px; display: grid; place-items: center;
  background: #eaeaef; border-radius: 6px; font-size: 12px; font-weight: 600; color: #8b6b8b;
}
.directory b { display: block; font-size: 11px; }
.directory small { display: block; font-size: 10px; color: #947494; margin-top: 3px; }
.match {
  margin-left: auto; flex: none; font-size: 9px;
  background: #eae9f3; color: #4a447a; padding: 4px 6px; border-radius: 3px;
}
.directory-note { text-align: center; padding: 10px; font-size: 10px; color: #947394; }

.demo-field { padding: 10px 13px 0; font-size: 10px; color: #977797; }
.fill-value {
  display: flex; justify-content: space-between; align-items: center;
  border: 1px solid #e3e3e9; border-radius: 4px; padding: 8px;
  margin-top: 5px; font-size: 11px; color: #2b1b2b;
  animation: fillIn 0.65s both;
}
.fill-value .ic { color: #575190; }
.demo-field:nth-child(2) .fill-value { animation-delay: 0.3s; }
.demo-field:nth-child(3) .fill-value { animation-delay: 0.6s; }
.review-note {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; margin: 10px 13px; color: #4e4981;
}

.demo-caption {
  display: flex; gap: 7px; align-items: center;
  font-size: 11px; color: #896989; margin-top: 15px; min-height: 20px;
}
.status-dot { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--coral); }

.demo-steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line); padding: 0 20px;
}
/* The one control still sized by its padding, and on purpose: it is not a page
   button but a row of four tabs drawn INSIDE the mock-up, where what matters is
   that the strip is in proportion to the window above it rather than level with
   the nav's chip. Holding it to --btn-md would make the demo's footer as tall as
   the real header. Same reason .text-button (the two "Pause animation" links) is
   left out of the scale — it is a link, not a button. */
.demo-steps button {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: transparent; border: 0; border-top: 2px solid transparent;
  padding: 16px 8px; font-size: 11px; color: #896a89;
}
.demo-steps button span { font-size: 10px; color: #af97af; }
.demo-steps button[aria-pressed="true"] { border-top-color: var(--coral); color: var(--ink); font-weight: 700; }
.demo-steps button[aria-pressed="true"] span { color: var(--plum); }
/* The thin bar that drains across the active step is the clock made visible:
   it is how long the stage has left, so it runs only while the demo is playing
   and the stage class is what restarts it. */
.demo-steps button[aria-pressed="true"]::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 100%; height: 2px; background: var(--coral);
  transform: scaleX(0); transform-origin: left;
}
.hero.is-playing .demo-steps button[aria-pressed="true"]::after {
  animation: stageProgress var(--stage) linear forwards;
}

/* The stage states. Each one dims what the founder is not being shown and rings
   what they are, so the window reads as a single flow rather than four
   screenshots. */
[data-stage="0"] .profile-details { opacity: 0.55; }
[data-stage="0"] .destination-card { opacity: 0.6; translate: 4px 0; }
[data-stage="1"] .profile-card { box-shadow: 0 0 0 3px rgba(255, 112, 76, 0.28); }
[data-stage="1"] .destination-card { opacity: 0.55; }
[data-stage="2"] .destination-card { box-shadow: 0 0 0 3px rgba(255, 112, 76, 0.3); }
[data-stage="2"] .directory { animation: directoryArrival 0.6s both; }
[data-stage="2"] .directory:nth-child(2) { animation-delay: 0.14s; }
[data-stage="2"] .directory:nth-child(3) { animation-delay: 0.28s; }

/* Pausing freezes every animation in the hero — but a reveal caught halfway is
   a half-drawn field, so the two that animate in are forced to their finished
   state instead of held mid-flight. */
.hero.is-paused * { animation-play-state: paused !important; }
.hero.is-paused .fill-value,
.hero.is-paused .directory,
.hero.is-paused .scene-card.is-active,
.hero.is-paused .scene-card.is-active .scan-track i,
.hero.is-paused .scene-card.is-active .scene-lines i,
.hero.is-paused .scene-card.is-active .scene-directory,
.hero.is-paused .scene-card.is-active .scene-answer {
  animation: none !important; opacity: 1; translate: none;
}

@keyframes sceneFloat {
  0%   { translate: 0 0; }
  22%  { translate: 0 -9px; }
  72%  { translate: 0 -9px; }
  100% { translate: 0 0; }
}
@keyframes sceneReveal {
  from { opacity: 0.35; translate: 0 5px; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes fillIn {
  from { opacity: 0; translate: 0 4px; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes directoryArrival {
  from { opacity: 0.3; translate: 12px 0; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes stageProgress { to { transform: scaleX(1); } }

/* The active card's own contents stagger in behind the float. */
.scene-card.is-active .scan-track i,
.scene-card.is-active .scene-lines i,
.scene-card.is-active .scene-directory,
.scene-card.is-active .scene-answer {
  animation: sceneReveal 0.65s ease-out both;
}
/* nth-of-type, not nth-child: each card opens with a <p class="scene-label">, so
   the rows are the 1st, 2nd and 3rd <div> inside it and counting children would
   be counting the label too. */
.scene-card.is-active .scene-directory:nth-of-type(2),
.scene-card.is-active .scene-answer:nth-of-type(2) { animation-delay: 0.16s; }
.scene-card.is-active .scene-directory:nth-of-type(3) { animation-delay: 0.32s; }

/* ── The strip under the demo ───────────────────────────────────────────── */
.category-strip {
  max-width: var(--lp-demo); margin: 44px auto 0; padding: 0 0 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  border-bottom: 1px solid var(--line); font-size: 13px; color: #856685;
}
.category-strip > span {
  font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
}
/* The separators are drawn, not typed: the prototype put a ✳ between each pair
   in the markup, which a screen reader reads out as four loose glyphs. */
.category-strip b + b::before { content: '✳'; color: #bca7bc; margin-right: 20px; font-weight: 400; }
.category-strip b { font-weight: 600; }

/* ── Sections ───────────────────────────────────────────────────────────── */
.section { max-width: var(--lp-max); margin: 0 auto; padding: 92px 25px; }
.section-intro {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 40px; margin-bottom: 44px;
}
.section h2 { font-size: 37px; line-height: 1.15; letter-spacing: -0.04em; margin: 14px 0 0; }
.section-intro > p { max-width: 300px; font-size: 14px; line-height: 1.75; color: var(--muted); }
.section h3 { font-size: 18px; letter-spacing: -0.022em; margin: 0 0 8px; }

/* ── Workspace: the two real product screenshots ────────────────────────── */
.workspace { padding-bottom: 28px; }
.workspace .section-intro { margin-bottom: 30px; }
.product-tabs { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.product-tabs button {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid #d7d7e0; border-radius: 7px;
  min-height: var(--btn-md); padding: 0 18px;
  background: #fff; font-size: 13px; color: #826482;
}
.product-tabs button span { font-size: 11px; color: #af97af; }
.product-tabs button[aria-pressed="true"] {
  background: #ffc3b5; border-color: var(--coral); color: var(--ink); font-weight: 600;
}
.product-tabs button[aria-pressed="true"] span { color: var(--plum); }
.product-screenshot {
  margin: 0; background: #fff; border: 1px solid #d7d7e0; border-radius: 10px;
  overflow: hidden; box-shadow: 0 16px 35px rgba(50, 1, 50, 0.05);
}
.product-screenshot img { display: block; width: 100%; height: auto; }
.product-screenshot figcaption {
  display: flex; justify-content: space-between; gap: 20px;
  border-top: 1px solid var(--line); padding: 14px 18px;
  font-size: 12px; color: #816481; line-height: 1.5;
}
.product-screenshot figcaption > span:last-child { font-size: 11px; color: #a185a1; white-space: nowrap; }
.screen-helper { font-size: 11px; color: #a185a1; text-align: center; margin-top: 16px; }

/* ── Workflow: the four steps ───────────────────────────────────────────── */
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.steps-grid article { padding: 3px 26px; border-right: 1px solid var(--line); }
.steps-grid article:first-child { padding-left: 0; }
.steps-grid article:last-child { border-right: 0; padding-right: 0; }
.step-number {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #866886;
}
.line-icon {
  display: grid; place-items: center; width: 49px; height: 49px;
  margin: 22px 0 16px; background: #e7e7ed; border-radius: 10px; color: #795d79;
}
/* Step 03 is the only yellow tile: filling the form is the one step the product
   does for the founder, and the other three are things they do with it. */
.line-icon.accent { background: var(--coral); color: var(--ink); }
.steps-grid p { font-size: 14px; color: var(--muted); line-height: 1.75; }

/* ── Extension ──────────────────────────────────────────────────────────── */
.extension-section {
  background: var(--line-soft);
  border-top: 1px solid #e3e3e9; border-bottom: 1px solid #e3e3e9;
}
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.feature-copy h2 { font-size: 37px; line-height: 1.15; letter-spacing: -0.04em; margin: 14px 0 20px; }
.feature-copy p { font-size: 14px; color: var(--muted); line-height: 1.8; }
.feature-copy .muted { color: #9b7e9b; }
.feature-copy .footnote { font-size: 12px; color: #a286a2; margin-top: 14px; }
.checks { list-style: none; padding: 0; margin: 24px 0 28px; font-size: 13px; }
.checks li { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0; }
.checks .ic { color: var(--violet); margin-top: 3px; }

.extension-visual {
  position: relative; background: #fff;
  border: 1px solid #d2d2dd; border-radius: 12px; rotate: 1deg;
  box-shadow: 0 22px 35px rgba(50, 1, 50, 0.06);
}
.browser-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #f9f7f3; padding: 13px 16px; border-radius: 11px 11px 0 0;
  border-bottom: 1px solid var(--line); font-size: 11px; color: #a78da7;
}
.browser-end { display: inline-flex; }
.extension-form { padding: 23px; }
.ext-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 20px; letter-spacing: -0.02em; margin: 10px 0 22px;
}
.extension-form label { display: block; font-size: 11px; margin-bottom: 14px; color: #7e617e; }
.extension-form input {
  display: block; width: 100%; margin-top: 7px;
  min-height: var(--btn-md); padding: 0 11px;
  border: 1px solid #dadae2; border-radius: 5px; background: #fff;
  font-size: 12px; color: var(--ink);
}
.extension-form input::placeholder { color: #af97af; }
.extension-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 20px;
}
.extension-footer > span { font-size: 11px; line-height: 1.55; max-width: 165px; color: #846684; }
/* The button carries both of its labels and home.js toggles which one shows;
   `.button` is already a flex row, so each face is one inline row inside it.
   "Fill form" and "Try again" are the same length to within a pixel or two,
   which is why the hidden face can be `display: none` — a pair of labels that
   differed in width would need stacking, or the button would resize under the
   cursor that just pressed it. */
.ext-face { display: inline-flex; align-items: center; gap: 8px; }
.floating-note {
  position: absolute; right: -14px; bottom: -19px;
  border: 1px solid #d2d2dd; background: #f9f8f4; border-radius: 6px;
  padding: 12px 18px; font-size: 11px; rotate: -4deg;
  box-shadow: 0 5px 13px rgba(0, 0, 0, 0.03);
}

/* ── Tracking ───────────────────────────────────────────────────────────── */
.tracking-visual {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 16px 6px;
}
.tracking-visual .card-top {
  border-bottom: 0; padding: 15px 5px; font-size: 12px;
  letter-spacing: normal; text-transform: none;
}
.tracking-visual .card-top span { font-size: 10px; color: #a58aa5; }
.tracking-visual table { width: 100%; border-collapse: collapse; }
.tracking-visual th {
  text-align: left; font-size: 10px; font-weight: 700; color: #9e809e;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 12px 5px; border-bottom: 1px solid #eaeaee;
}
.tracking-visual th:last-child { text-align: right; }
.tracking-visual td {
  padding: 18px 5px; border-bottom: 1px solid #eaeaee; font-size: 12px;
}
.tracking-visual td:last-child { text-align: right; }
.track-icon { display: inline-flex; margin-right: 9px; color: #9c7f9c; }
.pill {
  display: inline-block; font-size: 10px; border-radius: 4px;
  padding: 5px 8px; background: #eeeef2; color: #8a6b8a;
}
.pill.pending { background: #ffdbd3; color: var(--coral-ink); }
.pill.live { background: #eae9f2; color: #4e4981; }
.tracking-note { font-size: 11px; color: #a083a0; padding: 12px 5px; }

/* ── Control banner ─────────────────────────────────────────────────────── */
.control-banner {
  max-width: 1050px; padding: 36px;
  display: flex; gap: 26px; align-items: center;
  background: var(--ink-deep); color: var(--paper); border-radius: 12px;
}
.control-symbol { flex: none; color: var(--coral); display: inline-flex; }
.control-banner h2 { font-size: 25px; letter-spacing: -0.025em; margin: 10px 0; }
.control-banner .eyebrow { color: #ae95ae; }
.control-banner p:not(.eyebrow) { font-size: 13px; color: #b8a2b8; }
.control-banner .button { margin-left: auto; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq { display: grid; grid-template-columns: 1fr 1.25fr; gap: 60px; align-items: start; }
.faq h2 { font-size: 33px; }
.faq > div > p { font-size: 14px; color: var(--muted); line-height: 1.8; margin-top: 16px; }
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq details:first-child { padding-top: 0; }
.faq summary {
  position: relative; cursor: pointer; list-style: none;
  font-size: 14px; font-weight: 600; line-height: 1.5; padding-right: 28px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 0; top: -2px;
  font-size: 19px; font-weight: 400; color: var(--muted);
}
.faq details[open] summary::after { content: '\2212'; }
.faq details p { font-size: 13px; color: #8c6b8c; line-height: 1.8; margin-top: 12px; }

/* ── Final CTA ──────────────────────────────────────────────────────────── */
.final-cta {
  text-align: center; border-top: 1px solid var(--line);
  padding: 74px 24px 84px;
  background: radial-gradient(ellipse at 50% 100%, #ffb8a8, transparent 65%);
}
.final-cta h2 { font-size: clamp(34px, 5vw, 49px); letter-spacing: -0.042em; margin: 18px 0 30px; }
.final-cta .micro { font-size: 12px; color: #916f91; margin-top: 18px; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.ft {
  max-width: var(--lp-wide); margin: 0 auto; padding: 34px 25px;
  display: flex; align-items: center; gap: 30px; flex-wrap: wrap;
}
.ft p { font-size: 12px; color: #957695; }
.ft-links { display: flex; gap: 22px; font-size: 12px; margin-left: auto; }
.ft-links a:hover { color: var(--plum); }
.ft small { font-size: 11px; color: var(--muted-soft); }

/* ── Wide screens ───────────────────────────────────────────────────────── */
@media (min-width: 1500px) {
  .scene-url  { left: max(23px, calc(50% - 700px)); }
  .scene-profile { right: max(24px, calc(50% - 690px)); }
}

/* ── ≤1250px: the orbiting cards pull in ────────────────────────────────── */
@media (max-width: 1250px) {
  .hero h1 { letter-spacing: -0.05em; }
  .hero .lead { font-size: 16px; }
  .scene-card { padding: 13px; }
  .scene-url { width: 180px; left: 18px; top: 86px; }
  .scene-profile { width: 172px; right: 20px; top: 70px; }
  .scene-directories { width: 182px; left: 18px; top: 406px; }
  .scene-review { width: 172px; right: 20px; top: 391px; }
  .scene-label { font-size: 8px; margin-bottom: 11px; }
  .scene-address { font-size: 11px; }
}

/* ── ≤1100px ────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .split { gap: 44px; }
  .control-banner { margin: 0 25px; }
  .category-strip { font-size: 11px; }
}

/* ── ≤1000px: the two upper cards go, the lower two fade to the edge ────── */
@media (max-width: 1000px) {
  .hero { padding-top: 58px; }
  .scene-url, .scene-profile { display: none; }
  .scene-directories { left: -75px; top: 400px; opacity: 0.5; }
  .scene-review { right: -70px; top: 380px; opacity: 0.5; }
}

/* ── ≤900px: the header collapses into a panel ──────────────────────────── */
/* The nav is the page's only navigation, so below the breakpoint it becomes a
   panel under the bar rather than disappearing — the prototype simply hid the
   links and the sign-in on a phone, which took two of the three ways in off
   the screen. One markup at every width; a phone-only menu would be a second
   list of links to keep in step with this one. */
@media (max-width: 900px) {
  .nav-inner { height: 72px; padding: 0 20px; }
  .nav-toggle { display: grid; place-items: center; }
  .nav-menu {
    position: absolute; left: 0; right: 0; top: 100%;
    display: grid; gap: 18px; margin: 0; padding: 20px;
    background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.08);
    visibility: hidden; opacity: 0;
    transition: opacity 0.16s ease, visibility 0s linear 0.16s;
  }
  .nav.nav-open .nav-menu {
    visibility: visible; opacity: 1;
    transition: opacity 0.16s ease, visibility 0s;
  }
  .nav-links { flex-direction: column; align-items: stretch; gap: 0; font-size: 15px; }
  .nav-links a { padding: 11px 2px; border-bottom: 1px solid var(--line-soft); }
  .nav-actions { gap: 16px; justify-content: space-between; }
  .nav-actions .button.small { flex: 1; justify-content: center; }
  .user-menu { flex: 1; }
  .user-chip { width: 100%; }
}

/* ── ≤760px: phone ─────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  /* Redefining the two tokens is the whole mobile button story. Both members of
     the hero's pair shrink by the same amount because they read the same
     number — the old sheet re-stated four paddings here and at 380px, which is
     where the 60/56 mismatch came from in the first place. */
  :root { --btn-lg: 52px; --btn-md: 42px; }

  html { scroll-padding-top: 88px; }

  .hero { padding: 40px 18px 0; }
  .hero-grid { background-size: 60px 60px; height: 650px; }
  .hero::before { top: 285px; width: 600px; height: 320px; }
  /* No compensation needed here, unlike the desktop margin above: .hero-art is
     display:none at this width, so there are no absolutely-positioned cards for
     the headline to stay level with. */
  .hero h1 { font-size: clamp(29px, 8.5vw, 56px); letter-spacing: -0.045em; margin: 22px auto; }
  .hero .lead { font-size: 14px; line-height: 1.7; max-width: 380px; }
  /* The lead's <br> balances two lines at desktop width. On a phone the text
     already wraps where it needs to, and keeping the break splits it into a
     short line and a long one. */
  .wide-only { display: none; }
  .hero-actions { gap: 10px; margin-top: 24px; }
  .hero-actions .button { padding: 0 16px; font-size: 13px; gap: 10px; }
  .watch { padding: 0 14px; font-size: 13px; gap: 7px; }
  .hero .micro { font-size: 10px; margin-top: 18px; }
  /* The four cards are decoration that repeats the demo below them; at this
     width there is no room for both, and the demo is the one that informs. */
  .hero-art { display: none; }
  .hero-motion { margin-top: 24px; }

  .demo-wrap {
    margin-top: 20px; transform: none;
    box-shadow: 0 15px 35px rgba(50, 1, 50, 0.07), 0 0 0 5px rgba(255, 255, 255, 0.69);
  }
  .demo-toolbar { padding: 0 12px; font-size: 9px; letter-spacing: 0.1em; }
  .demo-grid { grid-template-columns: 1fr; min-height: 0; }
  .demo-sidebar { display: none; }
  .demo-content { padding: 18px 13px 13px; }
  .stage-heading { font-size: 18px; }
  .url-card { font-size: 11px; gap: 8px; padding: 10px; }
  .url-status { font-size: 9px; }
  /* Two cards side by side on a phone is two columns of ~150px; stacked, each
     one keeps the width its own content needs. The arrow turns a quarter so it
     still points from the profile to where it is used. */
  .flow-cards { flex-direction: column; align-items: stretch; gap: 10px; }
  .flow-arrow { align-self: center; rotate: 90deg; }
  .profile-details p { text-align: left; }
  .demo-caption { font-size: 10px; line-height: 1.5; align-items: flex-start; }
  .status-dot { margin-top: 6px; }
  .demo-steps { padding: 0 4px; }
  .demo-steps button { flex-direction: column; gap: 5px; padding: 13px 4px; font-size: 10px; }

  .category-strip {
    flex-wrap: wrap; justify-content: center; gap: 12px;
    margin-top: 28px; padding-bottom: 30px; font-size: 12px;
  }
  .category-strip > span { width: 100%; text-align: center; font-size: 9px; }
  .category-strip b + b::before { margin-right: 12px; }

  .section { padding: 58px 22px; }
  .section-intro { display: block; margin-bottom: 28px; }
  .section-intro > p { max-width: 100%; font-size: 13px; margin-top: 16px; }
  .section h2, .feature-copy h2 { font-size: 29px; letter-spacing: -0.032em; }

  .product-tabs button { font-size: 12px; padding: 0 13px; }
  .product-screenshot figcaption { display: block; font-size: 11px; padding: 12px; }
  .product-screenshot figcaption > span:last-child { display: block; margin-top: 5px; font-size: 10px; }
  .workspace { padding-bottom: 0; }

  .steps-grid { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
  .steps-grid article { padding: 0; border-right: 0; }
  .steps-grid h3 { font-size: 16px; }
  .steps-grid p { font-size: 13px; }
  .line-icon { margin: 16px 0 12px; }

  .split { grid-template-columns: 1fr; gap: 34px; }
  .extension-visual { rotate: none; }
  .extension-form { padding: 20px; }
  .floating-note { right: 0; }
  /* The copy explains the table, so on one column it has to come first. */
  .tracking .feature-copy { grid-row: 1; }

  .control-banner { display: block; margin: 0 18px; padding: 28px 24px; }
  .control-symbol { margin-bottom: 10px; }
  .control-banner h2 { font-size: 24px; }
  .control-banner .button { margin: 18px 0 0; }

  .faq { grid-template-columns: 1fr; gap: 22px; }
  .faq h2 { font-size: 28px; }

  .final-cta { padding: 54px 20px 64px; }

  .ft { gap: 18px; padding: 30px 22px; }
  .ft p { margin-left: auto; }
  .ft-links { margin-left: 0; }
  .ft small { margin-left: auto; }
}

/* ── ≤380px: the narrowest real phones ─────────────────────────────────── */
@media (max-width: 380px) {
  :root { --btn-lg: 48px; }
  .nav-inner { gap: 12px; }
  .hero-actions { gap: 8px; }
  .hero-actions .button { font-size: 12px; padding: 0 13px; }
  .watch { font-size: 12px; padding: 0 11px; }
  .steps-grid { grid-template-columns: 1fr; }
  /* The status line and the button are ~250px side by side and the form's inner
     width here is ~236px, so on one row they both shrink: the line wraps to
     four and the button's own label breaks. Stacked, each keeps its shape. */
  .extension-footer { flex-direction: column; align-items: stretch; }
  .extension-footer > span { max-width: 100%; }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
/* home.js also reads this preference and starts the demo paused, so nothing
   advances on its own. What is left here is the standing transforms: the
   window's 3deg tilt and the extension card's 1deg are static, but they are
   the kind of thing that reads as instability to a visitor who asked for less
   of it. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  .demo-wrap, .extension-visual { transform: none; rotate: none; }
  .scene-card { will-change: auto; rotate: none; }
  .scene-card.is-active { animation: none; }
}