/* landing-redesign.css — the public landing page, and nothing else.
   Only index.html loads this file, which is why the selectors are bare rather
   than scoped under .landing-page: there is no other page for them to reach.

   The palette matches production (hooklab.css tokens, redesign.css values).
   What changed on 2026-08-04 is layout and motion. The site nav is NOT here —
   nav.js injects .suite-nav and redesign.css themes it. Do not add a second
   one. Dark is the only theme since 2026-08-21; there is no light palette to
   keep in step. */

/* ============================================================
   MOCKUP A — "PROOF WALL"
   Palette unchanged from production. Layout and motion only.
   ============================================================ */
:root {
  --bg: #1b1b1c;
  --surface: #232324;
  --surface-2: #2a2a2c;
  --plan-surface: rgba(35,35,36,.72);
  --ink: #F5F5F6;
  --ink-2: #C9CCD1;
  --muted: #9C9FA6;
  --line: rgba(255,255,255,.10);
  --line-2: rgba(255,255,255,.20);
  --signal: #FFDD00;
  --font: 'Archivo','Helvetica Neue',Arial,sans-serif;
  --mono: 'JetBrains Mono',ui-monospace,monospace;
  --shadow-s: 0 10px 30px rgba(0,0,0,.30);
  --shadow-m: 0 22px 60px rgba(0,0,0,.40);
  --shadow-l: 0 40px 90px rgba(0,0,0,.55);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--bg); }
body {
  font-family:var(--font); background:var(--bg); color:var(--ink);
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:clip;
  transition: background .3s ease, color .3s ease;
}
@supports not (overflow:clip) { body { overflow-x:hidden; } }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
.wrap { width:min(1180px, calc(100% - 48px)); margin-inline:auto; }

/* ---------- FLAIR 1: living canvas ----------
   Replaces Vanta. Two huge soft monochrome blobs + one faint signal blob,
   drifting on 40-60s cycles. No lines, no nodes, no library. */
.canvas-fx {
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  contain:strict; transform:translateZ(0); backface-visibility:hidden;
}
.blob { position:absolute; border-radius:50%; filter:blur(90px); opacity:.55; }
.blob-1 { width:52vw; height:52vw; left:-12vw; top:-16vw; background:rgba(255,255,255,.055); animation:drift1 44s ease-in-out infinite; }
.blob-2 { width:46vw; height:46vw; right:-14vw; top:6vw;  background:rgba(255,255,255,.04); animation:drift2 58s ease-in-out infinite; }
.blob-3 { width:30vw; height:30vw; left:38vw;  top:24vw;  background:rgba(255,221,0,.10); animation:drift3 51s ease-in-out infinite; }
@keyframes drift1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(9vw,7vw) scale(1.14)} }
@keyframes drift2 { 0%,100%{transform:translate(0,0) scale(1.06)} 50%{transform:translate(-8vw,10vw) scale(.9)} }
@keyframes drift3 { 0%,100%{transform:translate(0,0) scale(.95)} 50%{transform:translate(-12vw,-6vw) scale(1.2)} }
/* The grain overlay that used to sit here was removed 2026-08-08: it was a
   plain fixed inset:0 layer, so on a phone its box tracked the shrinking
   viewport while the URL bar retracted and left a bar-sized un-grained band at
   the bottom of the screen. The fog canvas below is pinned to 100lvh for
   exactly this reason; the grain never was. */
main, .nav { position:relative; z-index:2; }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font); font-size:15px; font-weight:620; line-height:1;
  padding:14px 24px; border-radius:11px; border:1px solid transparent; cursor:pointer;
  transition:transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s, background .18s, border-color .18s;
}
.btn-sm { padding:10px 17px; font-size:13.5px; border-radius:9px; }
.btn-primary { background:var(--ink); color:var(--bg); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(0,0,0,.7); }
.btn-signal { background:var(--signal); color:#000; }
.btn-signal:hover { transform:translateY(-2px); box-shadow:0 16px 34px -10px rgba(255,221,0,.6); }
.btn-ghost { background:var(--surface); border-color:var(--line); color:var(--ink); }
.btn-ghost:hover { border-color:var(--line-2); transform:translateY(-2px); }

/* ---------- HERO ---------- */
.hero { padding:clamp(26px,4vw,54px) 0 0; text-align:center; }
.kicker {
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  padding:7px 15px 7px 12px; border:1px solid var(--line); border-radius:99px;
  background:var(--surface);
}
.kicker::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--signal); box-shadow:0 0 0 3px rgba(255,221,0,.2); animation:ping 2.4s ease-out infinite; }
@keyframes ping { 0%,60%,100%{box-shadow:0 0 0 3px rgba(255,221,0,.2)} 30%{box-shadow:0 0 0 8px rgba(255,221,0,0)} }
.hero h1 {
  margin:20px auto 0; max-width:17ch;
  font-size:clamp(40px,5.6vw,72px); font-weight:700;
  letter-spacing:-.05em; line-height:1.0;
}
/* ---------- FLAIR 3: the rotating word ----------
   The swap must never reflow the rest of the line. Two things guarantee it:
   every word is 3-4 characters, and the slot reserves the widest of them. A
   longer word list would need a wider reservation, which leaves a visible gap
   around the short ones — so keep them the same length. */
.rotator { display:inline-block; position:relative; }
/* The word and the word after it are one unit, so a swap can never leave
   "noticed." stranded on its own line. Every word is 3-4 characters, so the
   line's own width barely moves either. Both guards, because one alone is
   one browser's text-measuring quirk away from wrapping anyway. */
.h1-tail { white-space:nowrap; }
.rotator-word {
  display:inline-block; position:relative; color:var(--ink);
  padding:0 .06em;
}
/* the yellow highlighter swipes in behind the swapped word */
.rotator-word::before {
  content:''; position:absolute; left:0; right:0; bottom:.09em; height:.34em;
  background:var(--signal); z-index:-1; transform-origin:left center;
  animation:swipe .5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes swipe { from{transform:scaleX(0)} to{transform:scaleX(1)} }
.rotator-word.is-out { animation:wordOut .22s ease-in forwards; }
.rotator-word.is-in  { animation:wordIn .34s cubic-bezier(.22,1,.36,1) both; }
@keyframes wordOut { to{opacity:0; transform:translateY(-.22em); filter:blur(4px)} }
@keyframes wordIn  { from{opacity:0; transform:translateY(.26em); filter:blur(5px)} to{opacity:1; transform:none; filter:none} }
.hero .sub {
  margin:20px auto 0; max-width:52ch; color:var(--muted);
  font-size:clamp(16px,1.5vw,19px); line-height:1.6; text-wrap:balance;
}
.pastebar {
  display:flex; align-items:center; gap:8px; width:min(560px,100%);
  margin:26px auto 0; padding:6px 6px 6px 8px;
  border:1px solid var(--line-2); border-radius:14px; background:var(--surface);
  box-shadow:var(--shadow-s); transition:border-color .2s, box-shadow .2s, transform .2s;
}
.pastebar:focus-within { border-color:var(--ink); box-shadow:var(--shadow-m); transform:translateY(-1px); }
.pastebar input {
  flex:1; min-width:0; border:0; outline:0; background:none; color:var(--ink);
  font-family:var(--font); font-size:15px; padding:12px 10px;
}
.pastebar input::placeholder { color:var(--muted); }
.fine { margin-top:12px; font-family:var(--mono); font-size:11.5px; letter-spacing:.05em; color:var(--muted); }
.waitlist-consent {
  display:flex; align-items:center; justify-content:center; gap:7px; max-width:560px;
  margin:10px auto 0; color:var(--muted); font-size:11.5px; line-height:1.4;
}
.waitlist-consent input { accent-color:var(--ink); }

/* ---------- FLAIR 4: the fanned deck that reshuffles on hover ---------- */
.deck {
  position:relative; height:clamp(320px,40vw,500px);
  margin:clamp(30px,3.6vw,52px) auto 0; width:min(940px,100%);
  perspective:1400px;
}
.deck-card {
  position:absolute; left:50%; top:0;
  width:clamp(200px,26vw,320px); aspect-ratio:4/5;
  border-radius:18px; overflow:hidden; background:var(--surface-2);
  appearance:none; padding:0; border:0; box-shadow:var(--shadow-m);
  cursor:pointer;
  transition:transform .55s cubic-bezier(.34,1.4,.42,1), opacity .35s, box-shadow .4s, z-index 0s;
}
.deck-card img { width:100%; height:100%; object-fit:cover; }
/* Three cards stay visible while all six slides rotate through these slots. */
.deck-card[data-pos="0"] { transform:translateX(-50%) translateX(-62%) translateY(30px) rotate(-7deg) scale(.9); z-index:1; }
.deck-card[data-pos="1"] { transform:translateX(-50%) translateY(0) rotate(0deg) scale(1); z-index:3; box-shadow:var(--shadow-l); }
.deck-card[data-pos="2"] { transform:translateX(-50%) translateX(62%) translateY(30px) rotate(7deg) scale(.9); z-index:1; }
.deck-card[data-pos="hidden"] { transform:translateX(-50%) translateY(24px) scale(.82); opacity:0; z-index:0; pointer-events:none; }
.deck-card[data-pos="0"]:hover { transform:translateX(-50%) translateX(-66%) translateY(12px) rotate(-4deg) scale(.96); z-index:4; }
.deck-card[data-pos="2"]:hover { transform:translateX(-50%) translateX(66%) translateY(12px) rotate(4deg) scale(.96); z-index:4; }
.deck-card[data-pos="1"]:hover { transform:translateX(-50%) translateY(-10px) scale(1.03); }
.deck-card:focus-visible { outline:3px solid var(--signal); outline-offset:4px; }
.deck-caption {
  position:absolute; left:50%; bottom:-6px; transform:translateX(-50%);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.04em;
  color:var(--muted); white-space:nowrap;
}

/* ---------- FLAIR 5: the receipt marquee ---------- */
.marquee-band { padding:clamp(64px,8vw,110px) 0 0; overflow:hidden; }
.band-label {
  text-align:center; font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin-bottom:34px;
}
.marquee { display:flex; gap:18px; width:max-content; animation:slide 46s linear infinite; }
.marquee:hover { animation-play-state:paused; }
@keyframes slide { to { transform:translateX(-50%); } }
.mq-card {
  position:relative; width:clamp(150px,15vw,196px); aspect-ratio:4/5; flex:0 0 auto;
  border-radius:13px; overflow:hidden; border:1px solid var(--line);
  background:var(--surface-2); box-shadow:var(--shadow-s);
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
}
.mq-card:nth-child(even) { transform:translateY(20px); }
.mq-card:hover { transform:translateY(-8px) scale(1.03); box-shadow:var(--shadow-l); }
.mq-card:nth-child(even):hover { transform:translateY(12px) scale(1.03); }
.mq-card img { width:100%; height:100%; object-fit:cover; }
.mq-receipt {
  position:absolute; left:9px; bottom:9px;
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 9px; border-radius:99px; background:var(--signal); color:#000;
  font-family:var(--mono); font-size:10px; font-weight:700; font-variant-numeric:tabular-nums;
}

/* ---------- FLAIR 6: counting numbers ---------- */
.numbers { padding:clamp(76px,9vw,120px) 0; }
.numbers-grid {
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(40px,6vw,90px); align-items:center;
}
.numbers h2 {
  font-size:clamp(34px,4.4vw,58px); font-weight:700;
  letter-spacing:-.05em; line-height:1.02; max-width:14ch;
}
.numbers p { margin-top:20px; max-width:44ch; color:var(--muted); font-size:16.5px; line-height:1.62; }
.numbers p b { color:var(--ink); font-weight:650; }
.stat-rows { display:grid; }
.stat-row {
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:20px;
  padding:26px 0; border-bottom:1px solid var(--line);
}
.stat-row:first-child { border-top:1px solid var(--line); }
.stat-label { font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); }
.stat-value {
  display:flex; align-items:baseline; gap:2px;
  font-size:clamp(38px,5.2vw,66px); font-weight:750;
  letter-spacing:-.055em; line-height:1; font-variant-numeric:tabular-nums;
}
.stat-value .unit { font-size:.5em; letter-spacing:-.03em; color:var(--muted); }
.stat-row:nth-child(2) .stat-value { color:var(--ink); }
.stat-mark { display:inline-block; width:10px; height:10px; border-radius:2px; background:var(--signal); margin-right:10px; transform:translateY(-.35em); }

/* ---------- section heads, left-aligned (the rhythm break) ---------- */
.section { padding:clamp(76px,9vw,120px) 0; }
.section-head { max-width:640px; margin-bottom:clamp(34px,4vw,54px); }
.section-head.center { margin-inline:auto; text-align:center; }
.eyebrow { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.section-head h2 { margin-top:14px; font-size:clamp(32px,4.4vw,56px); font-weight:700; letter-spacing:-.05em; line-height:1.02; }
.section-head p { margin-top:16px; color:var(--muted); font-size:16.5px; line-height:1.6; max-width:52ch; }

/* ---------- FLAIR 7: format grid, hover-lift with revealing chip ---------- */
.fmt-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.fmt {
  position:relative; aspect-ratio:4/5; border-radius:15px; overflow:hidden;
  border:1px solid var(--line); background:var(--surface-2); box-shadow:var(--shadow-s);
  transition:transform .34s cubic-bezier(.22,1,.36,1), box-shadow .34s, border-color .34s;
}
.fmt img { width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.22,1,.36,1), filter .34s; }
.fmt:hover { transform:translateY(-10px); box-shadow:var(--shadow-l); border-color:var(--line-2); }
.fmt:hover img { transform:scale(1.07); }
.fmt-chip {
  position:absolute; top:11px; left:11px; z-index:2;
  padding:5px 11px; border-radius:99px;
  background:rgba(15,15,17,.72); backdrop-filter:blur(8px);
  color:#fff; font-family:var(--mono); font-size:9.5px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
}
.fmt-meta {
  position:absolute; inset:auto 0 0 0; z-index:2; padding:34px 13px 13px;
  background:linear-gradient(180deg,transparent,rgba(10,10,12,.86));
  color:#fff; font-size:12.5px; font-weight:600;
  transform:translateY(100%); opacity:0;
  transition:transform .34s cubic-bezier(.22,1,.36,1), opacity .34s;
}
.fmt:hover .fmt-meta { transform:none; opacity:1; }

/* ---------- shapes: two, side by side ---------- */
.shapes { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.shape {
  display:flex; flex-direction:column; gap:18px; padding:26px;
  border:1px solid var(--line); border-radius:16px; background:var(--surface);
  transition:transform .34s cubic-bezier(.22,1,.36,1), box-shadow .34s, border-color .34s;
}
.shape:hover { transform:translateY(-7px); box-shadow:var(--shadow-m); border-color:var(--line-2); }
.shape h3 { font-size:22px; font-weight:700; letter-spacing:-.035em; }
.shape p { color:var(--muted); font-size:15px; line-height:1.6; }
.shape-strip { display:flex; gap:9px; }
.shape-strip figure { flex:1; aspect-ratio:4/5; overflow:hidden; border-radius:9px; border:1px solid var(--line); background:var(--surface-2); }
.shape-strip img { width:100%; height:100%; object-fit:cover; }
/* ---------- learns: three rows ---------- */
.learns { display:grid; border-top:1px solid var(--line); }
.learn {
  display:grid; grid-template-columns:44px minmax(0,1fr); gap:22px;
  padding:26px 6px; border-bottom:1px solid var(--line);
  transition:background .3s, padding-left .3s;
}
.learn:hover { background:var(--surface); padding-left:18px; }
.learn-n { font-family:var(--mono); font-size:11px; font-weight:700; color:var(--muted); padding-top:4px; transition:color .3s; }
.learn:hover .learn-n { color:var(--ink); }
.learn h3 { font-size:19.5px; font-weight:660; letter-spacing:-.025em; }
.learn p { margin-top:8px; color:var(--muted); font-size:15.5px; line-height:1.6; max-width:62ch; }

/* ---------- steps: connected rail ---------- */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line); }
.step { position:relative; padding:34px 34px 34px 0; border-right:1px solid var(--line); }
.step:last-child { border-right:0; }
.step:not(:first-child) { padding-left:34px; }
.step-n {
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:10px; background:var(--surface-2);
  border:1px solid var(--line);
  font-family:var(--mono); font-size:12px; font-weight:700; color:var(--ink);
  transition:background .3s, color .3s, transform .3s;
}
.step:hover .step-n { background:var(--signal); color:#000; border-color:var(--signal); transform:translateY(-3px) rotate(-6deg); }
.step h3 { margin:18px 0 10px; font-size:20px; font-weight:680; letter-spacing:-.025em; }
.step p { color:var(--muted); font-size:15.5px; line-height:1.6; max-width:34ch; }
/* the rail fills as it enters view */
.step::after {
  content:''; position:absolute; top:-1px; left:0; height:2px; width:0; background:var(--signal);
  transition:width .8s cubic-bezier(.22,1,.36,1);
}
.step.rv-in::after { width:100%; }
.step:nth-child(2)::after { transition-delay:.15s; }
.step:nth-child(3)::after { transition-delay:.3s; }

/* ---------- pricing ---------- */
.plans { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; max-width:760px; margin-inline:auto; }
.plan {
  position:relative; padding:32px; border:1px solid var(--line); border-radius:16px;
  background:var(--plan-surface); display:flex; flex-direction:column;
  -webkit-backdrop-filter:blur(12px) saturate(115%); backdrop-filter:blur(12px) saturate(115%);
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s, border-color .3s;
}
.plan:hover { transform:translateY(-6px); box-shadow:var(--shadow-m); border-color:var(--line-2); }
.plan.featured { border-color:var(--ink); }
.plan.featured::before {
  content:'MOST PICKED'; position:absolute; top:-11px; left:32px;
  padding:4px 11px; border-radius:99px; background:var(--signal); color:#000;
  font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.1em;
}
.plan .pname { font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); }
.plan .price { margin:12px 0 4px; font-size:48px; font-weight:750; letter-spacing:-.05em; line-height:1; font-variant-numeric:tabular-nums; }
.plan .price small { font-size:15px; font-weight:500; color:var(--muted); letter-spacing:0; }
.plan .for { color:var(--muted); font-size:14.5px; line-height:1.5; margin-bottom:22px; }
.plan ul { list-style:none; display:grid; gap:11px; margin-bottom:26px; }
.plan li { position:relative; padding-left:23px; font-size:15px; color:var(--ink-2); line-height:1.45; }
.plan li::before { content:''; position:absolute; left:0; top:.5em; width:9px; height:2px; border-radius:2px; background:var(--signal); }
.plan .btn { margin-top:auto; }

/* ---------- faq ---------- */
/* ---------- THE STICKY PHONE CTA ---------- */
/* Desktop keeps the hero bar in reach and has a nav; a fixed bar there would
   only cover the work. Phones lose the paste bar on the first scroll, so it
   follows them down instead. Hidden until the hero bar leaves the screen, so
   the two are never on screen together. */
.stickybar { display:none; }

@media (max-width:720px) {
  .stickybar {
    display:flex; align-items:center; gap:8px;
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:var(--surface); border-top:1px solid var(--line-2);
    box-shadow:var(--shadow-m);
    /* Starts down and out. `hidden` still wins over display:flex, so the
       attribute is what actually gates it and this is only the movement. */
    transform:translateY(110%); opacity:0;
    transition:transform .28s cubic-bezier(.22,1,.36,1), opacity .28s;
  }
  .stickybar[data-shown="1"] { transform:none; opacity:1; }
  .stickybar input {
    flex:1 1 0; min-width:0; border:1px solid var(--line-2); border-radius:11px;
    outline:0; background:var(--bg); color:var(--ink);
    font-family:var(--font); font-size:16px; /* 16px or iOS zooms the page on focus */
    padding:12px 12px;
  }
  .stickybar input::placeholder { color:var(--muted); }
  .stickybar input:focus { border-color:var(--ink); }
  .stickybar .btn { flex:0 0 auto; white-space:nowrap; padding:13px 18px; font-size:15px; }
  .stickybar .btn[disabled] { opacity:.6; }

  /* The last section would otherwise sit under the bar. */
  body:has(.stickybar[data-shown="1"]) .footer { padding-bottom:96px; }
}
@media (prefers-reduced-motion:reduce) {
  .stickybar { transition:none; }
}

.faq { max-width:760px; margin-inline:auto; border-top:1px solid var(--line); }
/* The support address, stated once in the open. /contact, /help and /support
   redirect to this section, so it cannot be hidden inside an accordion. */
.faq-contact {
  max-width:760px; margin:22px auto 0; text-align:center;
  font-size:14.5px; color:var(--muted);
}
.faq-contact a { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.faq-contact a:hover { text-decoration-thickness:2px; }
.faq details { border-bottom:1px solid var(--line); }
.faq summary {
  list-style:none; cursor:pointer; padding:22px 4px;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  font-size:17px; font-weight:620; letter-spacing:-.015em;
  transition:color .2s;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary:hover { color:var(--muted); }
.faq summary::after { content:'+'; font-size:22px; font-weight:400; color:var(--muted); transition:transform .28s cubic-bezier(.22,1,.36,1); }
.faq details[open] summary::after { transform:rotate(45deg); color:var(--ink); }
.faq .a { padding:0 4px 24px; color:var(--muted); font-size:15.5px; line-height:1.65; max-width:64ch; animation:fadeUp .35s cubic-bezier(.22,1,.36,1) backwards; }

/* ---------- final ---------- */
.final {
  position:relative; overflow:hidden; text-align:center;
  margin:0 auto clamp(48px,6vw,80px); padding:clamp(56px,8vw,96px) 28px;
  border-radius:20px; background:#101011; color:#F5F5F6;
  border:1px solid var(--line);
}
.final::before {
  content:''; position:absolute; left:50%; top:-40%; width:70%; aspect-ratio:1;
  transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(circle, rgba(255,221,0,.20), transparent 62%);
  animation:pulseGlow 7s ease-in-out infinite;
}
@keyframes pulseGlow { 0%,100%{opacity:.6; transform:translateX(-50%) scale(1)} 50%{opacity:1; transform:translateX(-50%) scale(1.16)} }
.final h2 { position:relative; margin-inline:auto; max-width:17ch; font-size:clamp(30px,4.6vw,54px); font-weight:700; letter-spacing:-.045em; line-height:1.04; }
.final .btn { position:relative; margin-top:30px; }
.final .fine { color:rgba(245,245,246,.6); }

.footer { border-top:1px solid var(--line); padding:40px 0 60px; }
.footer-inner { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.footer nav { display:flex; gap:24px; font-size:14px; color:var(--muted); }

/* ---------- FLAIR 8: scroll reveal ---------- */
.rv { opacity:0; transform:translateY(26px); transition:opacity .75s ease, transform .75s cubic-bezier(.22,1,.36,1); }
.rv-in { opacity:1; transform:none; }
/* #static — freezes the page for screenshots. Not part of the design. */
@keyframes fadeUp { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }

@media (max-width:900px) {
  .numbers-grid { grid-template-columns:1fr; }
  .fmt-grid { grid-template-columns:repeat(2,1fr); }
  .shapes { grid-template-columns:1fr; }
  .steps { grid-template-columns:1fr; }
  .step { border-right:0; border-bottom:1px solid var(--line); padding:28px 0 !important; }
  .plans { grid-template-columns:1fr; }
  .nav-links { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01s !important; transition-duration:.01s !important; }
  .rv { opacity:1; transform:none; }
}


/* ============================================================
   THE LIVE DEMO (#real-output)
   Moved here from index.html's inline <style> during the 2026-08-04 redesign.
   This markup is wired to landing-create.mjs by about forty element ids and
   was carried across untouched; only where it sits on the page changed.
   ============================================================ */
[hidden] { display: none !important; }
.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
.demo {
  position: relative; z-index: 3;
  max-width: min(1480px, 100% - 48px);
  margin: calc(var(--demo-lift) * -1) auto 0;
  padding: 0; scroll-margin-top: 92px;
}
.demo-frame {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius);
  background:
    radial-gradient(circle at 82% 0%, rgba(255,255,255,.055), transparent 30%),
    linear-gradient(180deg, #0C0D10, #101114);
  padding: clamp(22px, 4vw, 44px);
  box-shadow: 0 48px 120px -48px rgba(0,0,0,.95), 0 10px 34px -14px rgba(0,0,0,.65);
  transition: border-color .35s ease, box-shadow .35s ease;
}
.demo-frame[data-state="reading"],
.demo-frame[data-state="matching"],
.demo-frame[data-state="writing"],
.demo-frame[data-state="designing"] {
  border-color: rgba(255,221,0,.25);
  box-shadow: 0 48px 120px -48px rgba(0,0,0,.95), 0 0 54px -30px rgba(255,221,0,.42);
}
.demo-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: end; gap: 24px 40px;
  padding-bottom: 24px; margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.demo-state-copy { min-width: 0; }
.demo-eyebrow {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: var(--t-meta); font-weight: 650;
  letter-spacing: .11em; line-height: 1.4; text-transform: uppercase;
  color: var(--muted);
}
.demo-state-dot {
  width: 7px; height: 7px; flex: 0 0 auto; border-radius: 999px;
  background: #737781;
  box-shadow: 0 0 0 5px rgba(255,255,255,.045);
}
.demo-frame[data-state="reading"] .demo-state-dot,
.demo-frame[data-state="matching"] .demo-state-dot,
.demo-frame[data-state="writing"] .demo-state-dot,
.demo-frame[data-state="designing"] .demo-state-dot {
  background: var(--signal);
  box-shadow: 0 0 0 5px rgba(255,221,0,.08);
}
.demo-frame[data-state="ready"] .demo-state-dot { background: #5AE39B; box-shadow: 0 0 0 5px rgba(90,227,155,.09); }
.demo-frame[data-state="error"] .demo-state-dot,
.demo-frame[data-state="gated"] .demo-state-dot { background: var(--muted); box-shadow: none; }
.demo-head h2 {
  margin-top: 10px; max-width: 23ch;
  font-size: clamp(24px, 3vw, 40px); font-weight: 700;
  letter-spacing: -.025em; line-height: 1.08; text-wrap: balance;
}
.demo-head h2 span:last-child { color: var(--ink-2); }
.demo-status {
  min-height: 1.5em; max-width: 62ch; margin-top: 10px;
  color: var(--muted); font-size: var(--t-support); line-height: 1.5;
}
.demo-receipt {
  display: grid; grid-template-columns: auto auto; align-items: center;
  gap: 7px 9px; min-width: 236px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 14px;
  background: rgba(255,255,255,.025);
}
.demo-receipt-label {
  grid-column: 1 / -1; color: var(--muted);
  font-size: var(--t-meta); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
.demo-receipt-link {
  color: var(--ink-2); font-size: var(--t-label); line-height: 1.35;
  text-underline-offset: 3px; white-space: nowrap;
}
.demo-receipt-link[aria-disabled="true"] { color: var(--muted); text-decoration: none; }

.demo-progress {
  list-style: none; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; margin: 0 0 30px; padding: 0;
}
.demo-progress li {
  position: relative; display: flex; align-items: center; gap: 10px;
  min-width: 0; color: var(--muted);
  font-family: var(--mono); font-size: var(--t-meta);
  letter-spacing: .055em; text-transform: uppercase;
}
.demo-progress li:not(:last-child)::after {
  content: ''; position: absolute; z-index: 0;
  top: 50%; left: 34px; right: 12px; height: 1px;
  background: var(--line); transform: translateY(-50%);
}
.demo-progress-number {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: 0 0 auto;
  border: 1px solid var(--line); border-radius: 999px;
  background: #101114; color: var(--muted); font-size: 10px;
}
.demo-progress-label {
  position: relative; z-index: 1;
  padding-right: 10px; background: #101114;
}
.demo-progress li.is-active { color: var(--ink); }
.demo-progress li.is-active .demo-progress-number {
  border-color: var(--signal); background: var(--signal); color: #000;
  box-shadow: 0 0 0 5px rgba(255,221,0,.08);
}
.demo-progress li.is-active .demo-progress-number::after {
  content: ''; position: absolute; inset: -5px;
  border: 1px solid rgba(255,221,0,.26); border-radius: inherit;
  animation: progress-pulse 1.5s ease-out infinite;
}
.demo-progress li.is-complete { color: var(--ink-2); }
.demo-progress li.is-complete .demo-progress-number {
  border-color: rgba(255,255,255,.32); color: transparent;
}
.demo-progress li.is-complete .demo-progress-number::before {
  content: '✓'; position: absolute; color: var(--ink); font-size: 12px;
}
.demo-progress li.is-complete:not(:last-child)::after { background: rgba(255,255,255,.28); }

.slide-strip { display: flex; gap: 18px; justify-content: center; outline: none; }
.slide-strip:focus-visible {
  outline: 2px solid var(--signal); outline-offset: 8px; border-radius: 10px;
}
.mini-slide {
  margin: 0; aspect-ratio: 4 / 5; flex: 1 1 0; min-width: 0; max-width: 208px;
  border-radius: 14px; overflow: hidden; background: #17181C;
  border: 1px solid var(--line);
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
}
.mini-slide img, .mini-slide canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
/* loose deck of physical cards, not a row of tiles */
.slide-strip .mini-slide:nth-child(1) { transform: translateY(10px) rotate(-1.6deg); }
.slide-strip .mini-slide:nth-child(2) { transform: rotate(.9deg); }
.slide-strip .mini-slide:nth-child(3) { transform: translateY(10px) rotate(-.8deg); }
.slide-strip .mini-slide:nth-child(4) { transform: rotate(1.4deg); }
.slide-strip .mini-slide:nth-child(5) { transform: translateY(10px) rotate(-1.2deg); }
.slide-strip .mini-slide:nth-child(6) { transform: rotate(-.6deg); }
.slide-strip .mini-slide:nth-child(n):hover { transform: translateY(-6px) rotate(0deg); box-shadow: 0 20px 50px -18px rgba(0,0,0,.8); }
@media (max-width: 1050px) { .slide-strip { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 10px; scrollbar-width: none; } .slide-strip::-webkit-scrollbar { display: none; } .mini-slide { flex: 0 0 auto; width: clamp(170px, 42vw, 220px); max-width: none; } }
.demo-skeleton {
  position: relative; color: var(--muted);
  background:
    linear-gradient(115deg, transparent 25%, rgba(255,255,255,.055) 42%, transparent 58%) -180% 0 / 240% 100%,
    linear-gradient(145deg, #17181C, #111216);
  animation: skeleton-sweep 1.9s ease-in-out infinite;
}
.demo-skeleton::before {
  content: ''; position: absolute; inset: 12px;
  border: 1px solid rgba(255,255,255,.06); border-radius: 9px;
}
.demo-skeleton-inner {
  position: absolute; z-index: 1; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 9px; padding: 18px;
}
.demo-skeleton-number {
  position: absolute; top: 18px; left: 18px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
}
.demo-skeleton-heading {
  overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: rgba(245,245,246,.72); font-size: clamp(14px, 1.35vw, 20px);
  font-weight: 650; line-height: 1.15; letter-spacing: -.015em;
}
.demo-skeleton-label {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: .09em; text-transform: uppercase;
}
.mini-slide.is-ready { animation: slide-reveal .55s cubic-bezier(.22,1,.36,1) both; }
.mini-slide.is-ready:nth-child(2) { animation-delay: .04s; }
.mini-slide.is-ready:nth-child(3) { animation-delay: .08s; }
.mini-slide.is-ready:nth-child(4) { animation-delay: .12s; }
.mini-slide.is-ready:nth-child(5) { animation-delay: .16s; }
.mini-slide.is-ready:nth-child(6) { animation-delay: .2s; }
.demo-swipe-hint {
  display: none; margin-top: 8px;
  color: var(--muted); font-family: var(--mono);
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
}
.demo-output-label {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 28px 0 14px; color: var(--ink-2);
  font-family: var(--mono); font-size: var(--t-meta);
  font-weight: 650; letter-spacing: .09em; text-transform: uppercase;
}
.demo-output-label span:last-child { color: var(--muted); font-weight: 500; }
.demo-reel {
  display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  align-items: center; gap: clamp(24px, 5vw, 64px);
  max-width: 850px; margin: 34px auto 0; padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--line); border-radius: 20px;
  background: radial-gradient(circle at 16% 18%, rgba(255,221,0,.09), transparent 36%), rgba(255,255,255,.022);
}
.demo-reel-phone {
  position: relative; width: min(100%, 280px); aspect-ratio: 9 / 16;
  overflow: hidden; justify-self: center; border-radius: 25px;
  border: 1px solid rgba(255,255,255,.2); background: #070708;
  box-shadow: 0 28px 70px -28px rgba(0,0,0,.95);
}
.demo-reel-backdrop, .demo-reel-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.demo-reel-backdrop { object-fit: cover; filter: blur(20px) brightness(.46); transform: scale(1.14); }
.demo-reel-art { z-index: 1; object-fit: contain; }
.demo-reel-shade {
  position: absolute; z-index: 2; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.08), transparent 65%, rgba(0,0,0,.62));
  pointer-events: none;
}
.demo-reel-play {
  position: absolute; z-index: 4; inset: 0; width: 100%; border: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.38); color: #fff; cursor: pointer;
  font: 650 14px/1.3 var(--sans);
}
.demo-reel-play span {
  display: inline-flex; align-items: center; gap: 9px; padding: 12px 16px;
  border: 1px solid rgba(255,255,255,.3); border-radius: 999px;
  background: rgba(10,10,12,.82); backdrop-filter: blur(10px);
}
.demo-reel-play span::before { content: '▶'; font-size: 11px; }
.demo-reel-slide-count {
  position: absolute; z-index: 3; top: 14px; right: 14px;
  padding: 6px 9px; border-radius: 999px; background: rgba(0,0,0,.58);
  color: rgba(255,255,255,.88); font-family: var(--mono); font-size: 9px;
  letter-spacing: .08em; text-transform: uppercase;
}
.demo-reel-now-playing {
  position: absolute; z-index: 3; left: 14px; right: 14px; bottom: 14px;
  display: flex; align-items: center; gap: 8px; min-width: 0;
  color: rgba(255,255,255,.9); font-size: 10px;
}
.demo-reel-now-playing span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-reel-bars { display: inline-flex; align-items: end; gap: 2px; height: 12px; flex: 0 0 auto; }
.demo-reel-bars i { width: 2px; height: 5px; background: var(--signal); animation: reel-bars .7s ease-in-out infinite alternate; }
.demo-reel-bars i:nth-child(2) { height: 11px; animation-delay: -.3s; }
.demo-reel-bars i:nth-child(3) { height: 8px; animation-delay: -.5s; }
.demo-reel.is-paused .demo-reel-bars i { animation-play-state: paused; }
.demo-reel-copy h3 {
  margin: 8px 0 12px; font-size: clamp(24px, 3vw, 36px);
  letter-spacing: -.025em; line-height: 1.08;
}
.demo-reel-kicker {
  color: var(--signal); font-family: var(--mono); font-size: var(--t-meta);
  font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
}
.demo-reel-description { max-width: 47ch; color: var(--muted); line-height: 1.55; }
.demo-reel-track {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px;
  margin: 22px 0; padding: 14px 0; border-block: 1px solid var(--line);
}
.demo-reel-track strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-reel-track span, .demo-reel-track a { color: var(--muted); font-size: var(--t-meta); }
.demo-reel-track a { text-underline-offset: 3px; }
.demo-reel-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.demo-reel-controls .btn { min-width: 146px; }
.demo-reel-sound-state { color: var(--muted); font-size: var(--t-meta); }
.reel-showcase { padding-top: clamp(18px, 4vw, 52px); }
.reel-showcase-card { max-width: 900px; margin-top: clamp(28px, 4vw, 46px); }
.reel-showcase-card .demo-reel-art { transform-origin: center; }
.reel-showcase-card.is-moving .demo-reel-art { animation: reel-art-drift var(--reel-scene, 8500ms) ease-in-out both; }
.reel-showcase-card.is-moving .demo-reel-backdrop { animation: reel-backdrop-drift var(--reel-scene, 8500ms) ease-in-out both; }
@keyframes reel-art-drift {
  from { transform: scale(1.015) translate3d(-.7%, .4%, 0); }
  to { transform: scale(1.065) translate3d(.7%, -.4%, 0); }
}
@keyframes reel-backdrop-drift {
  from { transform: scale(1.14) translate3d(-1.2%, 0, 0); }
  to { transform: scale(1.22) translate3d(1.2%, 0, 0); }
}
.demo-post { margin-top: 26px; border: 1px solid var(--line); border-radius: 16px; background: var(--glass); padding: 18px 20px; max-width: 720px; margin-left: auto; margin-right: auto; }
.demo-post .dp-label { font-size: var(--t-meta); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
/* A real caption, so it is set like one: body size, comfortable leading, and
   capped near 68ch even though the card is wider. */
.demo-post p { font-size: var(--t-body); color: var(--ink-2); font-weight: 450; line-height: 1.6; max-width: 68ch; }
.demo-post .dp-tags { margin-top: 12px; font-size: var(--t-support); color: var(--muted); word-spacing: 3px; line-height: 1.5; }
.demo-post.is-loading {
  min-height: 132px;
  background:
    linear-gradient(115deg, transparent 25%, rgba(255,255,255,.04) 42%, transparent 58%) -180% 0 / 240% 100%,
    var(--glass);
  animation: skeleton-sweep 1.9s ease-in-out infinite;
}
.demo-post.is-loading::before,
.demo-post.is-loading::after {
  content: ''; display: block; height: 11px; border-radius: 999px;
  background: rgba(255,255,255,.08);
}
.demo-post.is-loading::before { width: min(92%, 590px); margin-top: 22px; }
.demo-post.is-loading::after { width: min(58%, 380px); margin-top: 13px; }
.demo-frame[data-state="error"] .demo-skeleton,
.demo-frame[data-state="error"] .demo-post.is-loading { animation: none; }
.demo-error {
  display: grid; justify-items: start; gap: 10px;
  max-width: 720px; margin: 0 auto 28px; padding: 22px;
  border: 1px solid rgba(255,255,255,.13); border-radius: 16px;
  background: rgba(255,255,255,.025);
}
.demo-error h3 { font-size: var(--t-heading); letter-spacing: -.015em; }
.demo-error p { color: var(--muted); line-height: 1.55; }
.demo-error-buttons { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 5px; }
.demo-actions {
  display: flex; align-items: center; justify-content: center;
  gap: 16px 20px; max-width: 820px; margin: 24px auto 0;
  padding-top: 24px; border-top: 1px solid var(--line);
}
.demo-actions .btn { flex: 0 0 auto; }
.demo-actions p {
  max-width: 48ch; color: var(--muted);
  font-size: var(--t-support); line-height: 1.5;
}

@keyframes skeleton-sweep {
  0% { background-position: 180% 0, 0 0; }
  100% { background-position: -80% 0, 0 0; }
}
@keyframes progress-pulse {
  0% { opacity: .75; transform: scale(.82); }
  70%, 100% { opacity: 0; transform: scale(1.45); }
}
@keyframes slide-reveal {
  from { opacity: 0; filter: blur(5px); }
  to { opacity: 1; filter: none; }
}
@keyframes reel-bars {
  from { transform: scaleY(.45); opacity: .62; }
  to { transform: scaleY(1); opacity: 1; }
}


@media (max-width: 640px) {
  .demo {
    max-width: calc(100% - 24px);
    padding-top: 8px;
    scroll-margin-top: calc(var(--suite-nav-height, 64px) + 12px);
  }
  .demo-frame { border-radius: 20px; padding: 16px; }
  .demo-head { grid-template-columns: 1fr; align-items: start; gap: 16px; padding-bottom: 18px; margin-bottom: 18px; }
  .demo-head h2 { max-width: none; margin-top: 8px; font-size: 27px; line-height: 1.12; }
  .demo-status { min-height: 0; margin-top: 8px; font-size: 14px; }
  .demo-receipt { width: 100%; min-width: 0; padding: 12px 13px; }
  .demo-receipt .score-chip { padding: 3px 9px; font-size: 11px; }
  .demo-receipt-link { font-size: 12px; white-space: normal; }
  .demo-progress { grid-template-columns: repeat(4, 1fr); gap: 0; margin-bottom: 16px; padding-left: 0; }
  .demo-progress li { min-height: 26px; gap: 0; }
  .demo-progress li:not(:last-child)::after {
    top: 50%; bottom: auto; left: 28px; right: 4px;
    width: auto; height: 1px; transform: translateY(-50%);
  }
  .demo-progress-label {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap;
  }
  .slide-strip { gap: 12px; padding: 4px 2px 14px; scroll-snap-type: x mandatory; }
  .mini-slide { width: min(72vw, 272px); border-radius: 12px; scroll-snap-align: start; }
  .slide-strip .mini-slide:nth-child(n),
  .slide-strip .mini-slide:nth-child(n):hover { transform: none; }
  .demo-skeleton-inner { padding: 20px; }
  .demo-swipe-hint { display: block; }
  .demo-reel { grid-template-columns: 1fr; }
  .demo-reel-copy { text-align: center; }
  .demo-reel-description { margin-inline: auto; }
  .demo-reel-controls { justify-content: center; }
  .demo-reel-track { text-align: left; }
  .demo-post { margin-top: 18px; padding: 16px; }
  .demo-post .dp-label { font-size: 12px; }
  .demo-post p { font-size: 16px; line-height: 1.55; }
  .demo-post .dp-tags { font-size: 14px; line-height: 1.55; word-spacing: 2px; }
  .demo-error { margin-bottom: 18px; padding: 18px; }
  .demo-error-buttons, .demo-actions { align-items: stretch; flex-direction: column; }
  .demo-error-buttons .btn, .demo-actions .btn { width: 100%; }
  .demo-actions { gap: 12px; margin-top: 18px; padding-top: 18px; text-align: center; }
}

@media (max-width: 640px) and (max-height: 720px) {
  .demo-head { gap: 12px; padding-bottom: 14px; margin-bottom: 14px; }
  .demo-head h2 { font-size: 24px; }
  .demo-status { font-size: 13.5px; line-height: 1.4; }
  .demo-receipt { padding: 10px 12px; }
  .mini-slide { width: min(68vw, 248px); }
}

@media (prefers-reduced-motion: reduce) {
  .demo-skeleton, .demo-post.is-loading,
  .demo-progress li.is-active .demo-progress-number::after,
  .mini-slide.is-ready,
  .demo-reel-bars i,
  .reel-showcase-card.is-moving .demo-reel-art,
  .reel-showcase-card.is-moving .demo-reel-backdrop { animation: none !important; }
}

/* The demo sits between the hero deck and the marquee, so it needs its own
   breathing room and the light-theme surfaces the rest of the page uses. */
.demo { max-width: min(1180px, calc(100% - 48px)); margin: clamp(48px,6vw,86px) auto 0; padding: 0; scroll-margin-top: 92px; }
.demo-frame { border-color: var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-m); }
.demo-head { border-bottom-color: var(--line); }
.demo-head h2 { color: var(--ink); }
.demo-eyebrow, .demo-status, .demo-receipt-label, .demo-receipt-link,
.demo-swipe-hint, .demo-output-label, .demo-post .dp-label,
.demo-post .dp-tags, .demo-progress li { color: var(--muted); }
.demo-receipt { border-color: var(--line); border-radius: 12px; background: var(--surface-2); }
.demo-receipt .score-chip { background: var(--signal); color: #000; }
.mini-slide { border-color: var(--line); background: var(--surface-2); }
.demo-post { border-color: var(--line); background: var(--surface-2); color: var(--ink-2); }
.demo-progress-number { border-color: var(--line); background: var(--surface-2); color: var(--ink); }
.demo-progress-label { background: var(--surface); }
.demo-reel { border-color: var(--line); }
.demo-error { border-color: var(--line); background: var(--surface-2); }
.plan-note { margin-top: 12px; text-align: center; color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: .04em; }

/* Yearly is a second Stripe price, so this is a real switch between two
   offers, not a discount badge. It sits under the cards rather than above
   them: the tier is the decision, how you pay for it is the afterthought. */
.plan-billing { margin-top: 26px; text-align: center; }
.billing-toggle {
  padding: 11px 20px; border-radius: 99px; border: 1px solid var(--line-2);
  background: transparent; color: var(--ink); cursor: pointer;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  transition: border-color .2s, background .2s, color .2s;
}
.billing-toggle:hover { border-color: var(--ink); }
.billing-toggle[aria-pressed="true"] { background: var(--signal); border-color: var(--signal); color: #000; }
.billing-note { margin-top: 12px; color: var(--muted); font-size: 13.5px; }
@media (max-width: 640px) {
  .demo {
    max-width: calc(100% - 24px);
    scroll-margin-top: calc(var(--suite-nav-height, 64px) + 12px);
  }
}

/* The highlighter cannot be a bottom band under --ink type here: --ink is
   white and white on #FFDD00 is about 1.1:1. It is a solid chip with near-black
   type instead — same gesture, same colour, legible on the dark page. */
.rotator-word { color: #141416; }
.rotator-word::before {
  top: .04em; bottom: .02em; height: auto; border-radius: 4px;
}

/* hooklab.css centres .section-head for the app pages. The landing breaks that
   rhythm on purpose — five identically centred sections in a row was the main
   thing making the old page feel flat — so reset it here and let .center opt
   back in for pricing, which genuinely wants to be symmetrical. */
.section-head { margin-inline: 0; text-align: left; }
.section-head p { margin-inline: 0; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center p { margin-inline: auto; }

/* ---------- the eight opening shapes, as names rather than eight more tiles ----------
   These were an eight-image grid until 2026-08-04. The page already had five
   other galleries drawn from the same fourteen pictures, and by the third wall
   the repetition made the output look thinner than it is. The claim was worth
   keeping; a sixth wall of the same slides was not. */
.shape-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.shape-chips span {
  padding:7px 13px; border:1px solid var(--line); border-radius:99px;
  background:var(--surface); color:var(--ink-2);
  font-family:var(--mono); font-size:11px; letter-spacing:.04em;
}
.shape-note { margin-top:14px; color:var(--muted); font-size:14.5px; line-height:1.55; max-width:46ch; }

/* ---------- story vs app list, without a strip of thumbnails each ---------- */
.shapes-compact {
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  margin-top:26px; padding-top:26px; border-top:1px solid var(--line);
}
.shapes-compact h3 { font-size:19px; font-weight:680; letter-spacing:-.025em; }
.shapes-compact p { margin-top:9px; color:var(--muted); font-size:15px; line-height:1.6; max-width:46ch; }
@media (max-width:900px) { .shapes-compact { grid-template-columns:1fr; gap:22px; } }

/* ---------- fit the hero AND the deck in one screen ----------
   The deck is the proof that the product makes something good. Having to
   scroll to reach it means the first thing a visitor sees is a claim with no
   evidence under it.

   So the hero measures itself against the viewport's HEIGHT, not just its
   width. Every size below is min(vw, svh): on a wide short screen -- a laptop,
   which is most people -- the vh term wins and everything shrinks together.
   svh rather than vh because mobile browser chrome counts against the space we
   actually get, and vh lies about that. */
.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100svh - var(--suite-nav-height, 64px));
  padding: clamp(10px, 1.6vh, 28px) 0 clamp(12px, 2vh, 34px);
}
.hero h1 {
  margin-top: clamp(10px, 1.6vh, 20px);
  font-size: clamp(30px, min(5.6vw, 6.4vh), 66px);
}
.hero .sub {
  margin-top: clamp(10px, 1.5vh, 20px);
  font-size: clamp(14.5px, min(1.35vw, 1.95vh), 18px);
}
.hero .pastebar { margin-top: clamp(14px, 2.2vh, 26px); }
.hero .fine { margin-top: clamp(8px, 1.2vh, 13px); }
.kicker { font-size: clamp(9.5px, 1.15vh, 11px); padding: 6px 13px 6px 11px; }

/* The card width drives everything: its height is width x 1.25 (4:5), and the
   two side cards sit 30px lower, so the container only ever needs that plus a
   little air. Deriving it means the deck cannot reserve space it is not using,
   which is what left a hole under it on phones. */
.deck {
  --card-w: clamp(132px, min(24vw, 25svh), 290px);
  height: calc(var(--card-w) * 1.25 + 52px);
  margin-top: clamp(24px, 3.2vh, 52px);
  width: min(940px, 100%);
}
.deck-card { width: var(--card-w); }
.deck-caption { font-size: clamp(9px, 1.1vh, 10.5px); }

/* Under about 640px tall there is no arrangement that fits a headline, a form
   and three cards at a readable size. Stop pretending: let the page scroll and
   keep the type legible. */
@media (max-height: 640px) {
  .hero { min-height: 0; padding-block: 24px 32px; }
  .hero h1 { font-size: clamp(28px, 5.2vw, 40px); }
}

/* ---------- mobile: go big, and let the deck run off the bottom ----------
   Fitting the whole hero above the fold is the right goal on a laptop and the
   wrong one on a phone. Compare slideys.app on mobile: enormous headline,
   comfortable sub, cards that fill most of the width and are plainly CUT OFF
   by the fold. The cut is the invitation -- you can see there is more.

   Shrinking type and cards to force everything into 100svh, which is what the
   rule above did here, buys a complete view of a hero nobody wants to read at
   30px. So the viewport-fit only applies where there is room for it. */
@media (max-width: 899px) {
  .hero {
    min-height: 0;
    justify-content: flex-start;
    padding: clamp(22px, 5vw, 40px) 0 0;
  }
  .hero h1 {
    max-width: 15ch;
    margin-top: clamp(16px, 4vw, 26px);
    font-size: clamp(34px, 9.4vw, 52px);
    line-height: 1.03;
  }
  .hero .sub {
    max-width: 34ch;
    margin-top: clamp(14px, 3.6vw, 22px);
    font-size: clamp(15.5px, 4.1vw, 18px);
    line-height: 1.5;
  }
  .kicker { font-size: 10.5px; }
  .hero .pastebar { margin-top: clamp(18px, 5vw, 30px); }

  /* Big cards, and a tighter fan so three of them still sit inside a phone:
     at 54vw each, the old +/-62% spread came to 455px on a 390px screen. */
  .deck {
    --card-w: clamp(180px, 54vw, 300px);
    height: calc(var(--card-w) * 1.25 + 48px);
    margin-top: clamp(34px, 8vw, 56px);
    margin-bottom: 0;
  }
  .deck-card[data-pos="0"] { transform: translateX(-50%) translateX(-38%) translateY(22px) rotate(-7deg) scale(.9); }
  .deck-card[data-pos="2"] { transform: translateX(-50%) translateX(38%) translateY(22px) rotate(7deg) scale(.9); }
  .deck-card[data-pos="0"]:hover { transform: translateX(-50%) translateX(-40%) translateY(12px) rotate(-5deg) scale(.94); }
  .deck-card[data-pos="2"]:hover { transform: translateX(-50%) translateX(40%) translateY(12px) rotate(5deg) scale(.94); }
  .deck-caption { bottom: 0; font-size: 9px; }
}

/* The fog canvas lives here. Fixed and behind everything, like the blobs it
   replaces; the grain overlay still sits on top of it. */
.canvas-fx { background: var(--bg); }

/* The fog backdrop is sized to the LARGEST viewport height, not the current
   one. 100% of a fixed element tracks the visual viewport, which on a phone
   grows and shrinks every time the URL bar hides -- and every one of those is a
   canvas reallocation, which blanks for a frame. lvh is the height with browser
   chrome retracted, so this box is set once and never resized by scrolling.
   It is taller than the screen while the chrome is showing; the overflow is
   hidden and nobody can tell. */
.canvas-fx { inset: 0 0 auto 0; height: 100lvh; }
@supports not (height: 100lvh) { .canvas-fx { inset: 0; height: auto; } }

/* The kicker pill is gone, so the headline is the first thing in the hero and
   should not carry the gap that used to sit under the pill. Its old margin-top
   moves into the hero's own padding, which keeps the block optically centred
   instead of just shunting everything up by the pill's height. */
.hero h1 { margin-top: 0; }
.hero { padding-top: clamp(18px, 3vh, 46px); }
@media (max-width: 899px) {
  .hero { padding-top: clamp(30px, 7vw, 54px); }
  .hero h1 { margin-top: 0; }
}

/* The swapping word ENDS the headline now. That is the whole fix: previously it
   sat second-to-last, so "noticed." followed it and got shoved sideways on
   every swap. Reserving a width only hid it -- with nothing after the word,
   there is nothing left to move, whatever length it is.
   .h1-tail is gone with it; it existed only to stop that word being orphaned. */
.h1-tail { white-space: normal; }

/* The swapping word gets its OWN line.
   Being last was not enough: the headline is centred, so a word that changes
   width changes the width of its line, and a centred line of a new width puts
   every word on it in a new place -- "your" slides about even though nothing
   follows it. On its own line the word centres by itself and the line above is
   never re-measured. This is what slideys.app does, and it is the only fix that
   holds for any word length. */
.rotator { display: block; }

/* The free offer is the objection-killer, and it was set at 11px in mono like a
   legal disclaimer. Give it the weight of a promise. It stays under the button
   rather than beside it: read after the CTA, it removes the reason not to
   press; read before, it is just noise. */
.fine-offer {
  font-family: var(--font);
  font-size: clamp(13.5px, 1.5vh, 15.5px);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink-2);
}
@media (max-width: 899px) { .fine-offer { font-size: 15px; } }