/* ============================================================================
   landing.css — the marketing landing (site-landing-alive-v9).
   PORTED VERBATIM from the founder-approved mock:
     docs/design-mocks/landing-alive-v9/landing-alive-mock-v1.html  (v9, 2026-07-24)
   Doctrine (Huly craft → Homescreen warm skin): sections are static furniture;
   the life lives inside. Light moves; layout never moves. One easing; Swiss hovers;
   prefers-reduced-motion honored; entrance animations backwards-fill so content is
   NEVER opacity-gated (the standing anti-AI rule). Loaded ONLY by index.html, so the
   mock's generic class names (.nav/.hero/.stat/.room/…) stay isolated from styles.css.
   Any change here = a mock deviation → founder sign-off via o23 first.
   ============================================================================ */
/* ============================================================
   HULY CRAFT SPEC → HOMESCREEN (light/warm translation)
   Doctrine: sections are static furniture; the life lives inside.
   Light moves; layout never moves. One easing. Hovers are Swiss.
   ============================================================ */
:root{
  --accent:#F4593A; --accent-2:#C03623; --amber:#FFB27A; --cream:#FFF9F3;
  --ink:#231A14; --sec:#6E5F55; --faint:#9C8D82; --line:rgba(120,90,70,.14);
  --card:rgba(255,255,255,.66);
  --serif:Georgia,'Times New Roman',serif;
  --ease:cubic-bezier(.4,0,.2,1);
  --t-fast:200ms; --t-med:300ms; --t-slow:500ms;
  --mx:50%; --my:30%;
}
*{margin:0;padding:0;box-sizing:border-box}
/* site-landing-alive-v9: the [hidden] attribute must win over explicit display (e.g. .btn-hero's
   inline-flex) so main.js renderNav can hide the CTA / Log in / Dashboard / account chip on the nav swap. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(120% 60% at 50% -15%, rgba(244,89,58,.13), transparent 60%),
    linear-gradient(180deg,#FBF7F4 0%,#F4ECE6 100%);
  background-attachment:fixed;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font:inherit;border:none;background:none;cursor:pointer;color:inherit}

/* ── the morphing nav (founder-directed): WIDE + integrated at rest (like the live site),
   shrinks into the compact floating pill on slight scroll (creed width-collapse).
   A deliberate exception to "layout never moves" — chrome morph only, content never shifts. ── */
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:26px;
  width:calc(100vw - 48px);max-width:760px;padding:12px 18px 12px 26px;border-radius:99px;
  background:rgba(255,255,255,.55);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 6px 20px -14px rgba(60,40,25,.18), inset 0 1px 0 rgba(255,255,255,.8);
  white-space:nowrap;
  transition:max-width .8s var(--ease), padding .6s var(--ease), background .6s var(--ease), box-shadow .6s var(--ease)}
.nav.scrolled{max-width:520px;padding:10px 12px 10px 22px;
  background:rgba(255,255,255,.85);
  box-shadow:0 12px 32px -14px rgba(60,40,25,.3), inset 0 1px 0 rgba(255,255,255,.9)}
@media (prefers-reduced-motion: reduce){.nav{transition:none}}
/* the §7 lockup: gradient house mark at 1.08em on the baseline, gap .30em,
   gradient "Home" + warm-ink "screen" */
.wordmark{display:inline-block;font-weight:800;font-size:17px;letter-spacing:-.025em;line-height:1}
.wordmark img{height:1.08em;width:auto;vertical-align:baseline;margin-right:.30em}
.wordmark .hm{background:linear-gradient(46deg,#F4593A 0%,#F15F46 38%,#F0726B 68%,#FB8A60 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.wordmark .sc{color:#2B211C}
/* the center links are pinned to the nav's CENTER (which never moves) so they
   stay perfectly still while the edges slide during the morph */
.nav .links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:34px}
/* .nav .link, not `a.link`: the nav mixes ELEMENT TYPES — Pricing/Dashboard are <a>, "Log in" is a
   <button> (it opens Clerk, it is not a navigation). An anchor-only selector left the button missing
   font-size, font-weight AND colour, inheriting body text next to a 14px/600 sibling, which is what the
   founder saw as "Log in is in a different font". Scoped to .nav, so the share-card .link is untouched. */
.nav .link{font-size:14px;font-weight:600;color:var(--sec);transition:color var(--t-fast) var(--ease)}
.nav .link:hover{color:var(--accent-2)}     /* Swiss: color only, 200ms, no travel */
.nav .link.active{color:var(--accent-2)}

/* ── the 3-ring GLOW CTA (Huly A3, coral-on-cream) ─────────── */
.glow-wrap{position:relative;display:inline-block;isolation:isolate}
.glow-wrap .ring{position:absolute;inset:0;border-radius:99px;pointer-events:none;
  background:linear-gradient(var(--cream),var(--cream)) padding-box,
             linear-gradient(92deg, rgba(244,89,58,0) 40%, rgba(244,89,58,.55) 78%, var(--accent) 99%) border-box;
  border:2px solid transparent}
.glow-wrap .r1{filter:blur(2px)}
.glow-wrap .r2{filter:blur(7px)}
.glow-wrap .r3{filter:blur(15px);border-width:3px}
.btn-hero{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;
  padding:15px 30px;border-radius:99px;font-weight:700;font-size:16px;color:var(--accent-2);
  background:var(--cream);border:1px solid rgba(244,89,58,.25);
  box-shadow:0 10px 30px -12px rgba(244,89,58,.35), inset 0 1px 1px rgba(255,255,255,.9);
  transition:color var(--t-fast) var(--ease)}
.btn-hero:hover{color:#8f2413}
.btn-hero .hotspot{position:absolute;top:50%;left:50%;width:150px;height:80px;z-index:-1;
  transform:translate(calc(-50% + var(--bx,0px)),-50%);
  transition:transform var(--t-med) var(--ease);pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, #FFFDF5 4%, rgba(255,170,129,.75) 30%, rgba(255,218,159,.4) 55%, transparent 75%);
  filter:blur(6px)}
.btn-ghost{padding:14px 24px;border-radius:99px;font-weight:600;font-size:15px;color:var(--sec);
  border:1px solid var(--line);transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.btn-ghost:hover{color:var(--ink);border-color:rgba(120,90,70,.3)}

/* ── HERO with cursor spotlight + idle autopilot (Huly A2); full-bleed spot ── */
.herowrap{position:relative;width:100%}
/* the light must never hit the section boundary — mask fades it out before the
   bottom edge so scrolling can't reveal a hard clipped seam */
.herowrap .spot{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(420px at var(--mx) var(--my), rgba(244,89,58,.10), rgba(255,178,122,.05) 45%, transparent 72%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 70%,transparent 98%);
  mask-image:linear-gradient(180deg,#000 0%,#000 70%,transparent 98%)}
.hero{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:150px 32px 90px;display:grid;
  grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero .eyebrow{font-size:13px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-2);margin-bottom:16px}
.hero h1{position:relative;z-index:1;font-size:60px;line-height:1.03;letter-spacing:-.035em;font-weight:800}
.builtfrom{text-align:center;margin-bottom:14px;font-size:13px;font-weight:600;color:var(--sec)}
.builtfrom .at{color:var(--accent-2);font-weight:700;background:rgba(255,255,255,.7);border:1px solid var(--line);border-radius:99px;padding:3px 10px;margin-right:6px}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .sub{position:relative;z-index:1;margin-top:18px;font-size:18px;line-height:1.55;color:var(--sec);max-width:44ch}
.hero .ctas{position:relative;z-index:1;display:flex;gap:14px;margin-top:32px;align-items:center}
/* one-time entrance orchestration (the residence pattern): transform+opacity only,
   backwards-fill — if the animation never runs the content simply sits there */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero .eyebrow{animation:rise .45s var(--ease) .04s backwards}
.hero h1{animation:rise .45s var(--ease) .10s backwards}
.hero .sub{animation:rise .45s var(--ease) .16s backwards}
.hero .ctas{animation:rise .45s var(--ease) .22s backwards}
.builtfrom{animation:rise .45s var(--ease) .26s backwards}
.phone{animation:rise .5s var(--ease) .30s backwards}
/* the phone: the REAL app (Sunday With Rosa, built tonight from @nonnarosa) — alive on
   arrival via a slow ambient scroll, clickable through to the live app */
.appcap{display:block;height:100%;overflow:hidden;border-radius:inherit}
/* site-landing-retina-captures added width/height attrs to every landing <img> (correct: they reserve
   space and stop layout shift). But an HTML height attribute is a PRESENTATION HINT that wins when CSS
   sets only a width, so .mastchip and .appcap img rendered SQUASHED (the masthead at 170x460 instead of
   170x209, a 45% horizontal compression). One rule fixes the class, not just the two instances. */
img{height:auto}
.appcap img{width:100%;display:block;transform:translateY(var(--capy,0px));transition:transform .9s cubic-bezier(.22,.7,.3,1)}
/* THE LOOP (conversion-spec S1, in-mock simulation): the two pre-cut faces sit over
   the real app; a JUMP CUT is a display toggle — film grammar, never a crossfade */
.face{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:linear-gradient(180deg,#FBF8F5,#F6EEE7)}
.face.hid{display:none}
.face .fq{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.face .ffield{min-width:190px;border:1px solid var(--line);background:#fff;border-radius:12px;padding:12px 16px;
  font-size:16px;font-weight:700;text-align:left;box-shadow:0 10px 24px -14px rgba(60,25,8,.35)}
.face .caret,.mcaret{display:inline-block;width:2px;height:1.05em;vertical-align:text-bottom;background:var(--accent);
  margin-left:1px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.face .fbtn{background:var(--cream);border:1px solid rgba(244,89,58,.25);color:var(--accent-2);border-radius:99px;
  padding:9px 18px;font-size:13px;font-weight:700}
.face .fframe{border-radius:16px;padding:3px;width:72%;
  background:conic-gradient(from var(--sweep), rgba(244,89,58,0) 0deg, rgba(255,178,122,.9) 40deg, var(--accent) 70deg, rgba(244,89,58,0) 130deg, rgba(244,89,58,0) 360deg);
  animation:sweepSpin 2.2s linear infinite}
.face .fframe .fin{border-radius:13px;background:#FFFDFA;padding:34px 12px;text-align:center;font-size:12.5px;font-weight:600;color:var(--sec)}

.phone{position:relative;z-index:1;width:340px;aspect-ratio:9/19.3;margin:0 auto;border-radius:50px;padding:12px;
  background:linear-gradient(180deg,#17171a,#0d0d0f 55%,#101013);box-shadow:0 34px 80px -26px rgba(35,20,10,.5)}
.phone::after{content:"";position:absolute;inset:0;border-radius:50px;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.28), inset 0 -1px 1px rgba(255,255,255,.1)}
.screen{position:relative;height:100%;border-radius:38px;overflow:hidden;background:linear-gradient(180deg,#FBF8F5,#F6EEE7)}
.screen .mast{padding:30px 18px 12px;text-align:center}
.screen .mast .wm{font-family:var(--serif);font-weight:400;font-size:26px;letter-spacing:-.02em}
.screen .mast .tg{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-top:5px}
.deck{position:relative;height:58%;margin:10px 14px}
.rcard{position:absolute;inset:0;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 8px 24px -12px rgba(40,25,15,.25);
  opacity:0;transform:translateY(14px) scale(.98)}
.rcard .ph{height:62%;background:linear-gradient(135deg,var(--c1),var(--c2))}
.rcard .tt{font-family:var(--serif);font-weight:400;font-size:18px;padding:12px 14px 2px}
.rcard .mt{font-size:11px;color:var(--faint);padding:2px 14px}
@keyframes cardCycle{0%,4%{opacity:0;transform:translateY(14px) scale(.98)}
  8%,30%{opacity:1;transform:translateY(0) scale(1)}
  34%,100%{opacity:0;transform:translateY(-10px) scale(.985)}}
.rcard{animation:cardCycle 12s var(--ease) infinite}
.rcard:nth-child(2){animation-delay:4s}
.rcard:nth-child(3){animation-delay:8s}
/* in-phone floating glass tab bar — the product's own chrome, echoed */
.dock{position:absolute;bottom:14px;left:16px;right:16px;height:46px;border-radius:23px;
  background:rgba(255,255,255,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.8);box-shadow:0 10px 24px -12px rgba(40,25,15,.3), inset 0 1px 0 rgba(255,255,255,.85);
  display:flex;align-items:center;justify-content:space-around}
.dock span{font-size:10px;font-weight:600;color:var(--sec);display:flex;flex-direction:column;align-items:center;gap:3px}
.dock span::before{content:"";width:14px;height:14px;border-radius:5px;background:currentColor;opacity:.55}
.dock span.on{color:var(--accent-2)}
.dock span.on::before{background:linear-gradient(135deg,var(--amber),var(--accent));opacity:1}

/* ── S3 · WHY HOMESCREEN — creed's "Why Use It?" chapter, honest numbers only.
   Huge centered header, the serif claim as the subline (still the page's only
   scroll-triggered moment), three stat cards with giant one-family numerals. ── */
.why{max-width:1180px;margin:0 auto;padding:120px 32px 110px;position:relative;text-align:center}
.why h2{font-size:52px;letter-spacing:-.035em;line-height:1.06;font-weight:800}
.why .claim-line{font-family:var(--serif);font-weight:400;font-size:27px;line-height:1.42;letter-spacing:-.01em;
  max-width:62ch;margin:20px auto 0;color:var(--ink)}
.hl{background-image:linear-gradient(rgba(244,89,58,.26),rgba(244,89,58,.26));
  background-repeat:no-repeat;background-size:100% 2px;background-position:0 92%;
  transition:background-size 1s var(--ease), color var(--t-slow) var(--ease)}
.why.lit .hl1{transition-delay:.4s,.3s}
.why.lit .hl2{transition-delay:1.6s,1.5s}
.why.lit .hl{background-size:100% 88%;}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px}
.stat{border-radius:20px;background:var(--card);border:1px solid rgba(255,255,255,.8);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 0 0 6px rgba(255,255,255,.42), 0 24px 50px -30px rgba(40,25,15,.35);
  padding:34px 28px 30px;text-align:left}
.stat .n{font-size:74px;font-weight:800;letter-spacing:-.045em;line-height:1}
.stat .t{margin-top:12px;font-weight:700;font-size:16px;letter-spacing:-.01em}
.stat .d{margin-top:6px;font-size:14px;color:var(--sec);line-height:1.5}
.why .fn{margin-top:20px;font-size:12px;color:var(--faint)}

/* ── S4 · THE THREE ROOMS (creed How-It-Works): full-width alternating white panels,
   one mechanism per room — headline+copy beside ONE big slab holding real UI ── */
.rooms{max-width:1180px;margin:0 auto;padding:0 32px 120px;display:flex;flex-direction:column;gap:26px}
.room{border-radius:22px;background:var(--card);border:1px solid rgba(255,255,255,.8);
  box-shadow:0 0 0 6px rgba(255,255,255,.42), 0 24px 50px -30px rgba(40,25,15,.35);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:24px;
  display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:center}
.room.flip .rtext{order:2}
.room.flip .rslab{order:1}
.rtext{padding:12px 8px 12px 26px}
.room.flip .rtext{padding:12px 26px 12px 8px}
.rtext h3{font-size:29px;letter-spacing:-.025em;line-height:1.15;font-weight:800}
.rtext p{margin-top:12px;font-size:15.5px;line-height:1.6;color:var(--sec);max-width:38ch}
.rslab{position:relative;min-height:430px;border-radius:16px;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.stage.slab-coral{background:linear-gradient(135deg,#F4693A,#E0430F)}
.stage.slab-amber{background:linear-gradient(135deg,#FFB27A,#F08A3C)}
.stage.slab-terra{background:linear-gradient(135deg,#C0552F,#8F2413)}
/* room 1: handle in, cookbook out — real tiles assemble into the white cookbook */
.cookbook{background:#fff;border-radius:16px;padding:20px 22px;box-shadow:0 18px 44px -18px rgba(90,30,5,.55)}
.ckhead{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;margin-bottom:14px}
.ckhead .at2{color:var(--accent-2);background:var(--cream);border:1px solid rgba(244,89,58,.25);border-radius:99px;padding:4px 12px}
.ckhead .arr{color:var(--faint);font-weight:600}
.ckhead .ckname{font-family:var(--serif);font-weight:400;font-size:16px;letter-spacing:-.01em}
.ckgrid{display:grid;grid-template-columns:repeat(3,88px);gap:10px}
.tile{width:88px;height:88px;border-radius:12px;opacity:0;object-fit:cover;
  box-shadow:0 4px 12px -4px rgba(60,20,5,.3)}
@keyframes tileIn{0%,3%{opacity:0;transform:translateY(16px) scale(.9)}
  11%,86%{opacity:1;transform:translateY(0) scale(1)}96%,100%{opacity:0}}
.tile{animation:tileIn 9s var(--ease) infinite}
/* room 2: the approval inbox — the diff-approve trust grammar on a real recipe */
.inbox{width:86%;display:flex;flex-direction:column;gap:14px}
.apcard{background:#fff;border-radius:14px;box-shadow:0 18px 44px -18px rgba(90,40,5,.5);overflow:hidden;
  animation:apIn 12s var(--ease) infinite}
.aphead{display:flex;align-items:center;white-space:nowrap;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:12px;font-weight:600;color:var(--sec)}
.aptag{background:rgba(244,89,58,.1);color:var(--accent-2);border-radius:99px;padding:2px 9px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.apbtns{margin-left:auto;display:flex;gap:10px;align-items:center}
.apbtns .rej{color:var(--faint);font-weight:600}
.apbtns .acc{background:var(--cream);border:1px solid rgba(244,89,58,.3);color:var(--accent-2);border-radius:99px;padding:5px 13px;font-weight:700}
.apbody{display:flex;gap:12px;align-items:center;padding:14px}
.apbody img{width:54px;height:54px!important;border-radius:10px;object-fit:cover;flex:none}
.apbody b{display:block;font-size:14px;letter-spacing:-.01em}
.apbody span{display:block;margin-top:3px;font-size:12px;color:var(--faint)}
@keyframes apIn{0%,4%{transform:translateY(-70px);opacity:0}12%,88%{transform:translateY(0);opacity:1}96%,100%{opacity:0}}
.pubrow{background:rgba(255,255,255,.92);border-radius:11px;padding:10px 14px;display:flex;align-items:center;gap:9px;
  font-size:12.5px;font-weight:700;color:#1B7A4B;box-shadow:0 10px 24px -12px rgba(90,40,5,.4);
  opacity:0;animation:pubIn 12s var(--ease) infinite}
@keyframes pubIn{0%,55%{opacity:0;transform:translateY(8px)}63%,88%{opacity:1;transform:translateY(0)}96%,100%{opacity:0}}
/* room 3: the real masthead over a slow breathing warmth */
.masthalo{position:absolute;left:50%;top:50%;width:360px;height:360px;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle, rgba(255,216,182,.4) 0%, rgba(255,178,122,.14) 45%, transparent 70%);
  animation:halobreathe 7s ease-in-out infinite alternate}
@keyframes halobreathe{from{opacity:.5;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}
.mastchip{position:relative;width:170px;border-radius:16px;border:3px solid rgba(255,255,255,.85);z-index:1;
  box-shadow:0 16px 40px -14px rgba(40,10,0,.65)}
/* ambient light drift inside every slab — soft-light warmth, per-slab periods so nothing syncs */
.stage::after,.step .slab::after{content:"";position:absolute;inset:-45%;pointer-events:none;z-index:3;
  background:radial-gradient(42% 36% at 32% 30%, rgba(255,244,230,.5), transparent 70%);
  mix-blend-mode:soft-light;animation:slabdrift 16s ease-in-out infinite alternate}
.stage.slab-amber::after{animation-duration:13s}
.stage.slab-terra::after{animation-duration:19s}
.slab.ramp1::after{animation-duration:14s}.slab.ramp2::after{animation-duration:17s}.slab.ramp3::after{animation-duration:21s}
@keyframes slabdrift{from{transform:translate(-7%,-5%)}to{transform:translate(9%,7%)}}

/* ── S5 · BUILDER GLOW-FRAME — creed-scale centered chapter, frame below (Huly A7) ── */
/* ── site-landing-fan-payment-sections PART 1: the paid moment ──────────────────────────────────
   Replaces the old "Watch it assemble" build-frame slot. Section rhythm mirrors .buildsec exactly (same
   h2 scale, same .p) and the stage/slab shell is REUSED, not reinvented, per the port contract. The phone
   cards deliberately use var(--serif): that is Rosa's APP register, not the marketing register. */
.paysec{max-width:1180px;margin:0 auto;padding:20px 32px 140px;position:relative;text-align:center}
.paysec h2{font-size:46px;letter-spacing:-.035em;line-height:1.08;font-weight:800}
.paysec .p{margin:16px auto 0;font-size:17px;line-height:1.55;color:var(--sec);max-width:52ch}
.paysec .stage{margin:44px auto 0;max-width:720px;display:flex;align-items:center;justify-content:center;
  padding:38px 28px;border-radius:22px;position:relative;overflow:hidden}
.twoup{display:flex;gap:26px;align-items:center;justify-content:center;flex-wrap:wrap}
.ph{width:266px;background:#FAF4EC;border-radius:34px;overflow:hidden;text-align:left;
  box-shadow:0 26px 60px rgba(60,30,15,.3);font-family:var(--serif)}
.ph .phhead{padding:16px 18px 12px;border-bottom:1px solid rgba(120,90,70,.13);display:flex;gap:10px;align-items:center}
.ph .avt{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none}
.ph .phname{font-size:14.5px;font-weight:700;line-height:1.15}
.ph .phsub{font-size:10.5px;color:var(--faint);font-family:inherit}
.paywall{padding:20px 18px 22px;text-align:center}
.paywall .lock{width:34px;height:34px;border-radius:50%;background:rgba(196,86,47,.1);
  display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.paywall .lock svg{width:16px;height:16px;fill:var(--accent-2)}
.paywall .pw-t{font-size:16px;font-weight:700;margin:0 0 5px}
.paywall .pw-b{font-size:11.5px;color:var(--sec);line-height:1.5;margin:0 0 16px}
.paywall .price{font-size:25px;font-weight:700;margin:0 0 3px}
.paywall .per{font-size:11px;color:var(--faint);margin:0 0 15px}
/* a SPAN, not a button: this is a picture of a fan's screen, never a control the visitor can press */
.joinbtn{display:block;width:100%;background:var(--accent);color:#fff;border-radius:99px;
  padding:12px 0;font-size:13.5px;font-weight:700;text-align:center;
  box-shadow:0 8px 20px rgba(244,89,58,.32)}
.blurred{filter:blur(3.4px);opacity:.5;pointer-events:none;padding:0 18px 16px}
.blurred .brow{height:9px;background:rgba(60,40,25,.19);border-radius:4px;margin:9px 0}
.blurred .brow.s{width:62%}
.unlocked{padding:16px 18px 20px}
.unlocked .uimg{width:100%;height:112px;object-fit:cover;border-radius:12px;margin-bottom:11px}
.unlocked .ut{font-size:15px;font-weight:700;margin:0 0 4px}
.unlocked .ing{font-size:11.5px;color:var(--sec);line-height:1.75;margin:0}
.stamp{display:inline-flex;align-items:center;gap:6px;background:rgba(27,122,75,.1);color:#1B7A4B;
  font-size:10.5px;font-weight:700;padding:5px 10px;border-radius:99px;margin-bottom:11px}
.arrowcol{display:flex;flex-direction:column;align-items:center;gap:7px;color:#fff;flex:none}
.arrowcol .ar{font-size:23px;line-height:1}
.arrowcol .arl{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.9;white-space:nowrap}
@media (max-width:860px){
  .paysec h2{font-size:34px}
  .twoup{gap:18px}
  .arrowcol .ar{transform:rotate(90deg)}
}
.buildsec{max-width:1180px;margin:0 auto;padding:20px 32px 140px;position:relative;text-align:center}
.buildsec h2{font-size:46px;letter-spacing:-.035em;line-height:1.08;font-weight:800}
.buildsec .p{margin:16px auto 0;font-size:17px;line-height:1.55;color:var(--sec);max-width:52ch}
@property --sweep{syntax:'<angle>';initial-value:0deg;inherits:false}
.frame{position:relative;border-radius:22px;padding:3px;max-width:720px;margin:40px auto 0;
  background:conic-gradient(from var(--sweep),
    rgba(244,89,58,.0) 0deg, rgba(255,178,122,.9) 40deg, var(--accent) 70deg, rgba(244,89,58,.0) 130deg, rgba(244,89,58,.0) 360deg);}
.frame.generating{animation:sweepSpin 2.6s linear infinite}
@keyframes sweepSpin{to{--sweep:360deg}}
.frame.done{animation:finishSweep 1.1s var(--ease) forwards}
@keyframes finishSweep{0%{--sweep:0deg}100%{--sweep:360deg}}
.frame.settled{background:linear-gradient(180deg,rgba(244,89,58,.35),rgba(244,89,58,.12));animation:none}
.frame .inner{border-radius:19px;background:linear-gradient(180deg,#FFFDFA,#F7EFE8);min-height:320px;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px}
.frame .inner .lbl{font-size:13px;font-weight:600;color:var(--sec)}
.frame .inner .bigwm{font-family:var(--serif);font-size:36px;font-weight:400;opacity:0;transform:translateY(6px);
  transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.frame.done .inner .bigwm,.frame.settled .inner .bigwm{opacity:1;transform:none}
.buildsec .replay{margin-top:26px}

/* ── S6 · GET STARTED IN MINUTES — creed's 3-step closer on our warm ramp.
   Colour-pop doctrine: one slab hue per step (amber → coral → terracotta), the real
   mini-UI always on white inside the slab, the step number colored to match. ── */
.steps{max-width:1180px;margin:0 auto;padding:10px 32px 120px;text-align:center}
.steps h2{font-size:46px;letter-spacing:-.035em;line-height:1.08;font-weight:800}
.steps .sub{margin:16px auto 0;font-size:17px;color:var(--sec)}
.stepgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px;text-align:left}
.step{border-radius:20px;background:var(--card);border:1px solid rgba(255,255,255,.8);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 0 0 6px rgba(255,255,255,.42), 0 24px 50px -30px rgba(40,25,15,.35);
  padding:16px 16px 22px}
.step .slab{position:relative;height:216px;border-radius:14px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.slab.ramp1{background:linear-gradient(135deg,#F5A83C,#E88427)}
.slab.ramp2{background:linear-gradient(135deg,#F4693A,#E0430F)}
.slab.ramp3{background:linear-gradient(135deg,#C0552F,#8F2413)}
.step h3{display:flex;align-items:baseline;gap:10px;font-size:19px;letter-spacing:-.02em;margin:18px 6px 0}
.step h3 .sn{font-weight:800}
.step p{margin:6px 6px 0;font-size:14px;color:var(--sec);line-height:1.5}
/* the mini-UIs: real product moments, always on white */
.mini{background:#fff;border-radius:12px;padding:16px 18px;width:76%;box-shadow:0 12px 28px -12px rgba(60,25,8,.5)}
.mini .q{font-size:11px;font-weight:600;color:var(--faint);letter-spacing:.04em;text-transform:uppercase}
.mini .field{margin-top:8px;border:1px solid var(--line);border-radius:9px;padding:8px 10px;font-size:13px;font-weight:600}
.mini .go{margin-top:12px;display:inline-block;background:var(--cream);border:1px solid rgba(244,89,58,.25);
  color:var(--accent-2);border-radius:99px;padding:7px 14px;font-size:12px;font-weight:700}
.miniframe{border-radius:12px;padding:3px;margin-top:12px;
  background:conic-gradient(from var(--sweep), rgba(244,89,58,0) 0deg, rgba(255,178,122,.9) 40deg, var(--accent) 70deg, rgba(244,89,58,0) 130deg, rgba(244,89,58,0) 360deg);
  animation:sweepSpin 2.6s linear infinite}
.minifin{border-radius:9px;background:#FFFDFA;padding:24px 10px;font-family:var(--serif);font-size:17px;letter-spacing:-.01em}
.mini.share{text-align:center}
.qr{position:relative;overflow:hidden;width:84px;height:84px;margin:0 auto;border-radius:8px;border:5px solid #231A14;
  background:repeating-linear-gradient(0deg,#231A14 0 6px,transparent 6px 13px),
             repeating-linear-gradient(90deg,#231A14 0 6px,#fff 6px 13px)}
.qr::after{content:"";position:absolute;inset:0;transform:translateY(-110%);
  background:linear-gradient(180deg,transparent, rgba(244,89,58,.45), transparent);
  animation:scan 13s var(--ease) infinite}
@keyframes scan{0%,78%{transform:translateY(-110%)}88%,100%{transform:translateY(110%)}}
.mini .link{margin-top:12px;display:inline-block;border:1px solid var(--line);border-radius:99px;padding:6px 12px;font-size:12px;font-weight:700}
.mini .hint{margin-top:8px;font-size:11px;color:var(--faint)}
.steps .close{margin-top:48px;display:flex;flex-direction:column;align-items:center;gap:12px}
.steps .close .note{font-size:13px;color:var(--faint)}

/* ── S-HOME · DIFFERENTIATOR: the one claim nobody else owns ── */
.homesec{max-width:1180px;margin:0 auto;padding:20px 32px 130px;text-align:center}
.homesec h2{font-size:46px;letter-spacing:-.035em;line-height:1.08;font-weight:800}
.homesec .p{margin:16px auto 0;font-size:17px;line-height:1.55;color:var(--sec);max-width:52ch}
.phone2{position:relative;width:300px;aspect-ratio:9/19.3;margin:44px auto 0;border-radius:46px;padding:11px;
  background:linear-gradient(180deg,#17171a,#0d0d0f 55%,#101013);box-shadow:0 34px 80px -26px rgba(35,20,10,.5)}
.phone2::after{content:"";position:absolute;inset:0;border-radius:46px;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.28), inset 0 -1px 1px rgba(255,255,255,.1)}
.screen2{position:relative;height:100%;border-radius:36px;overflow:hidden;
  background:linear-gradient(200deg,#3a2e28 0%,#241d1a 45%,#191512 100%)}
.icongrid{display:grid;grid-template-columns:repeat(4,52px);gap:18px 16px;justify-content:center;padding:64px 0 0}
.hicon{width:52px;height:52px;border-radius:13px;background:var(--ic,rgba(255,255,255,.14))}
.hicon.focal{position:relative;background:none;overflow:hidden}
.hicon.focal img{width:100%;height:100%;object-fit:cover;display:block}
.hicon.focal::after{content:"";position:absolute;inset:-4px;border-radius:16px;border:2px solid rgba(244,89,58,.85);
  animation:iconring 6s var(--ease) infinite}
@keyframes iconring{0%,55%,100%{opacity:0;transform:scale(1.12)}62%,80%{opacity:1;transform:scale(1)}}
/* site-landing-fan-payment-sections PART 2: real app marks on the home screen.
   .mono = a third-party brand mark shipped MONOCHROME because the founder had not yet ruled on using
   third-party logos on marketing. Only Rosa's icon carries colour, which is also why she reads as the
   focal tile. Flip these to brand colour only after he approves. */
.hicon.mono{background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center}
.hicon.mono svg{width:26px;height:26px;fill:rgba(255,255,255,.72)}
.hicon.focal img{border-radius:13px}
.hlabel{position:absolute;font-size:8.5px;font-weight:600;color:rgba(255,255,255,.85);letter-spacing:.02em}
.dock2{position:absolute;bottom:12px;left:14px;right:14px;height:58px;border-radius:22px;
  background:rgba(255,255,255,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:space-around;padding:0 8px}
.dock2 span{width:44px;height:44px;border-radius:11px;background:var(--ic,rgba(255,255,255,.16))}
.pushbanner{position:absolute;top:12px;left:10px;right:10px;border-radius:16px;padding:10px 12px;display:flex;gap:10px;align-items:center;
  background:rgba(255,255,255,.92);box-shadow:0 14px 30px -12px rgba(0,0,0,.55);text-align:left;
  transform:translateY(-90px);animation:pushIn 10s var(--ease) infinite}
.pushbanner img{width:34px;height:34px;border-radius:9px;object-fit:cover;flex:none}
.pushbanner .pt{font-size:9.5px;font-weight:800;letter-spacing:.08em;color:var(--faint)}
.pushbanner .pm{font-size:12px;font-weight:600;color:var(--ink);margin-top:1px}
@keyframes pushIn{0%,18%{transform:translateY(-90px)}26%,78%{transform:translateY(0)}86%,100%{transform:translateY(-90px)}}

/* ── S-DIAL · THE CONTROL DIAL: review everything, or nothing (spec S4) ── */
.dialsec{max-width:1180px;margin:0 auto;padding:0 32px 130px;text-align:center}
.dialsec h2{font-size:46px;letter-spacing:-.035em;line-height:1.08;font-weight:800}
.dialsec .p{margin:16px auto 0;font-size:17px;color:var(--sec);max-width:46ch}
.dialpanel{max-width:640px;margin:40px auto 0;border-radius:22px;background:var(--card);border:1px solid rgba(255,255,255,.8);
  box-shadow:0 0 0 6px rgba(255,255,255,.42), 0 24px 50px -30px rgba(40,25,15,.35);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:30px 30px 26px}
.dialseg{position:relative;display:grid;grid-template-columns:repeat(3,1fr);background:rgba(120,90,70,.08);
  border-radius:99px;padding:5px}
.dialhl{position:absolute;top:5px;bottom:5px;left:5px;width:calc((100% - 10px)/3);border-radius:99px;background:#fff;
  box-shadow:0 6px 16px -6px rgba(60,30,10,.35), inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .45s var(--ease)}
.dialseg span{position:relative;z-index:1;padding:11px 6px;font-size:14px;font-weight:700;color:var(--sec);
  transition:color var(--t-fast) var(--ease)}
.dialseg span.on{color:var(--accent-2)}
.dialcap{margin-top:18px;font-size:15px;color:var(--sec);min-height:24px}

/* ── S-DEPTH · FEATURE DEPTH: the parts you'd need five tools for ── */
.depthsec{max-width:1180px;margin:0 auto;padding:0 32px 130px;text-align:center}
.depthsec h2{font-size:46px;letter-spacing:-.035em;line-height:1.08;font-weight:800}
.depthsec .p{margin:16px auto 0;font-size:17px;color:var(--sec)}
.depthgrid{display:flex;flex-wrap:wrap;gap:26px;margin-top:44px;text-align:left;justify-content:center}
.dcard{flex:0 1 calc((100% - 52px)/3);border-radius:20px;background:var(--card);border:1px solid rgba(255,255,255,.8);
  box-shadow:0 0 0 6px rgba(255,255,255,.42), 0 24px 50px -30px rgba(40,25,15,.35);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:26px 26px 24px}
.dcard svg{width:26px;height:26px;stroke:var(--accent-2);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.dcard h3{margin-top:14px;font-size:18px;letter-spacing:-.02em}
.dcard p{margin-top:6px;font-size:14px;line-height:1.55;color:var(--sec)}

/* ── S-STACK · WORKS WITH WHAT YOU HAVE (spec S6, honesty-gated) ── */
.stacksec{max-width:1180px;margin:0 auto;padding:0 32px 130px;text-align:center}
.stacksec h2{font-size:46px;letter-spacing:-.035em;line-height:1.08;font-weight:800}
.stacksec .p{margin:16px auto 0;font-size:17px;color:var(--sec);max-width:48ch}
.chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:720px;margin:38px auto 0}
.chip{padding:12px 20px;border-radius:99px;background:rgba(255,255,255,.8);border:1px solid var(--line);
  font-size:14.5px;font-weight:700;color:var(--ink);box-shadow:0 6px 16px -10px rgba(60,40,25,.25)}
.chip.link{background:var(--cream);border-color:rgba(244,89,58,.35);color:var(--accent-2)}
.chip.next{background:transparent;border:1.5px dashed rgba(120,90,70,.35);color:var(--faint);font-weight:600}
.chip.next em{font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);margin-left:7px}

/* ── S-FAQ · QUESTIONS: bare rows, no furniture (creed cue) ── */
.faqsec{max-width:760px;margin:0 auto;padding:0 32px 130px}
.faqsec h2{font-size:46px;letter-spacing:-.035em;font-weight:800;text-align:center}
.faqsec details{border-bottom:1px solid var(--line);padding:4px 2px}
.faqsec details:first-of-type{margin-top:30px;border-top:1px solid var(--line)}
.faqsec summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  padding:19px 2px;font-size:17px;font-weight:600}
.faqsec summary::-webkit-details-marker{display:none}
.faqsec summary::after{content:"";width:9px;height:9px;border-right:1.8px solid var(--faint);border-bottom:1.8px solid var(--faint);
  transform:rotate(45deg);transition:transform var(--t-fast) var(--ease);flex:none;margin-left:16px}
.faqsec details[open] summary::after{transform:rotate(-135deg)}
.faqsec details p{padding:0 2px 20px;font-size:15px;line-height:1.6;color:var(--sec);max-width:60ch}

/* ── S-CLOSE · the earned conclusion (spec S9): full-attention emotional close ── */
.closer{position:relative;padding:150px 32px 170px;text-align:center;overflow:hidden}
.closer .bloom{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(560px 340px at 50% 58%, rgba(244,89,58,.16), rgba(255,178,122,.07) 55%, transparent 75%)}
.closer h2{position:relative;font-size:56px;letter-spacing:-.035em;line-height:1.05;font-weight:800}
.closer .sub{position:relative;margin-top:16px;font-size:19px;color:var(--sec)}
.closer .cta{position:relative;margin-top:34px;display:flex;flex-direction:column;align-items:center;gap:12px}
.closer .note{font-size:13px;color:var(--faint)}

/* ── quiet footer ── */
/* flex-wrap: the footer gained the Companies House trading disclosure (a 5th child), and without
   wrapping a single no-wrap row squashes every item on a phone. Kept byte-identical to pricing.css. */
.footer{border-top:1px solid var(--line);padding:34px;display:flex;gap:24px;align-items:center;justify-content:center;flex-wrap:wrap;
  font-size:13px;color:var(--faint)}
.footer a{transition:color var(--t-fast) var(--ease)}.footer a:hover{color:var(--accent-2)}

@media (max-width:900px){
  .nav{gap:16px;padding:8px 10px 8px 18px}
  .hero{grid-template-columns:1fr;padding-top:120px;text-align:center}
  .hero .sub{margin-inline:auto}.hero .ctas{justify-content:center}
  .hero h1{font-size:42px}
  .room{grid-template-columns:1fr;gap:18px}
  .cookbook{max-width:88%;padding:16px}
  .ckgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .tile{width:100%;height:auto;aspect-ratio:1/1}
  .room.flip .rtext{order:1}.room.flip .rslab{order:2}
  .rtext,.room.flip .rtext{padding:8px 6px}
  .rslab{min-height:360px}
  .why h2{font-size:34px}
  .why .claim-line{font-size:22px}
  .stats{grid-template-columns:1fr}
  .buildsec h2{font-size:33px}
  .steps h2{font-size:33px}
  .stepgrid{grid-template-columns:1fr}
  .homesec h2,.dialsec h2,.depthsec h2,.stacksec h2,.faqsec h2{font-size:33px}
  .closer h2{font-size:36px}
  .dcard{flex-basis:100%}
  .phone2{width:260px}
  .dialseg span{font-size:12px}
}
/* site-landing-alive-v9: responsive anti-overflow in the mock's own doctrine (cf. the fluid cookbook tiles).
   The hero device is a fixed 340px; below the persona iPhone (<=375px, e.g. the 360px Android floor) that
   would push the hero past the edge and give the page a horizontal scrollbar. Cap it to the content width
   ONLY on those narrow phones — the founder-approved 390px + desktop views are byte-identical (untouched). */
@media (max-width:380px){
  .phone{width:min(340px, calc(100vw - 64px))}
}
/* 20260726-0100-mobile-nav-unreachable — the phone nav used to be `.nav .links{display:none}`, which
   took Pricing, Log in AND Dashboard off every phone: the whole nav was the wordmark and the CTA, and a
   signed-in creator could sign out but could not reach their own dashboard. DMs open on a phone, so this
   is the front door for every creator in the outreach list.
   The links were hidden because they are absolutely CENTRED (line 67) and at this width the centre is
   already taken. So un-centre them and put them in the flex row. The room comes from the WORDMARK, not
   the CTA: "Homescreen" at 17px is ~140px of a ~298px content box, so on phones the mark carries the
   brand alone and the wordtext is hidden. That frees enough for the links AND the accent CTA (founder
   picked treatment C, 2026-07-26 — candidate A dropped the CTA and he chose to keep it).
   ⚠️ Every rule here is inside the <=560px query, so >=561px and desktop stay byte-identical. */
@media (max-width:560px){
  .nav{gap:6px;padding:6px 12px}
  /* out of the centre and into the row; flex:1 pushes the pair up against the CTA */
  .nav .links{position:static;transform:none;display:flex;gap:2px;align-items:center;
    flex:1;justify-content:flex-end}
  /* 44px minimum tap target — the padding absorbs into the pill's existing height */
  .nav .link{font-size:13px;display:inline-flex;align-items:center;min-height:44px;padding:0 10px}
  /* the mark alone carries the brand and stays the home affordance (renderNav retargets its href) */
  .nav .wordmark span{display:none}
  .nav .wordmark img{margin-right:0}
  /* condensed CTA: padding and size only. The LABEL is founder-locked and unchanged. */
  .nav .btn-hero{padding:9px 13px;font-size:12px}
}
@media (prefers-reduced-motion: reduce){
  .rcard,.tile,.apcard{animation:none;opacity:1;transform:none}
  .masthalo{animation:none}
  .pubrow{animation:none;opacity:1}
  .appcap img{transition:none}
  .face{display:none!important}
  .hero .eyebrow,.hero h1,.hero .sub,.hero .ctas,.builtfrom,.phone{animation:none}
  .stage::after,.step .slab::after,.qr::after{animation:none}
  .pushbanner{animation:none;transform:translateY(0)}
  .hicon.focal::after{animation:none;opacity:1;transform:scale(1)}
  .dialhl{transition:none}
  .miniframe{animation:none}
  .face .caret,.mcaret{display:none}
  .rcard:nth-child(2),.rcard:nth-child(3){opacity:0}
  .frame.generating{animation:none}
  .herowrap .spot{background:radial-gradient(420px at 50% 30%, rgba(244,89,58,.08), transparent 70%)}
  .hl{transition:none}.why.lit .hl{background-size:100% 88%}
}

/* ── site-landing-alive-v9: the SIGNED-IN nav cluster ────────────────────────────────
   The mock shows the logged-OUT nav (the founder-approved surface). main.js renderNav reveals the
   Dashboard link + [data-account] (Sign out) for a signed-in creator. fix-landing-nav-signed-in-overlap
   (founder-ruled 2026-07-24): the email is DROPPED entirely from the signed-in nav (it overlapped Dashboard
   in the scrolled 520px pill) — signed-in nav = Dashboard + Sign out only. */
.nav .account{ display:flex; align-items:center; gap:10px }
.nav .account[hidden]{ display:none }
.nav .account__signout{ border:1px solid var(--line); border-radius:99px; padding:8px 16px;
  font-size:13px; font-weight:600; color:var(--sec); background:rgba(255,255,255,.5);
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease) }
.nav .account__signout:hover{ color:var(--ink); border-color:rgba(120,90,70,.3) }