/* ============================================================
   STOLAN ACRES - FIND THE LEAK  ·  SALES FLOOR (funnel-ladder-v2)
   The direct-response cut of the free quiz funnel.

   This is the SALES FLOOR, not the showroom. find-the-leak.css is the
   showroom (moody, full-bleed, gallery). This file engineers MASS
   CONVERSION on top of the same brand DNA: louder, more offer-forward,
   more scannable, high-contrast. High-end direct response, not a moody
   gallery and not ugly ClickFunnels.

   The bridge: direct-response mechanics (one path, no exits, promise and
   offer always forward, contrast bands, value stack, proof, guarantee,
   repeated CTAs) wearing the Stolan skin (moss/fern/cream/orange, Big
   Shoulders / Switzer / Hanken, real imagery, real craft).

   palette  ink #060507 / black #08080A · moss #36402A · fern #6A865C
            flint #413933 · stone #9A938A · leather #7B4C2C
            cream #EBDED0 (text on dark) · orange #FF6A00 (CTAs + key pops)
   type     Big Shoulders Display (display) / Switzer (label) / Hanken (body)
   Built 2026-06-28 by steve-code (Mason) · project brand-read-funnel
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;700;800;900&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap");
@import url("https://api.fontshare.com/v2/css?f[]=switzer@400,500,600,700&display=swap");

:root {
  --black: #08080A; --ink: #060507;
  --moss: #36402A; --fern: #6A865C; --flint: #413933;
  --stone: #9A938A; --leather: #7B4C2C; --cream: #EBDED0; --orange: #FF6A00;
  --body-dim: #CFCABF; --body-low: #9c978d;

  /* the lit band: cream surface for the high-contrast sales sections.
     a real lighter band reads "this page sells" instead of "gallery". */
  --paper: #EFE7DB; --paper-2: #E6DBCB;
  --ink-on-paper: #18140E; --sub-on-paper: #4A4034; --line-on-paper: rgba(24,20,14,.14);

  --font-display: "Big Shoulders Display", system-ui, sans-serif;
  --font-label: "Switzer", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;

  --radius: 18px; --radius-sm: 11px; --radius-lg: 26px;
  /* spring-physical easings (engine: high-end-visual-design custom curves) */
  --ease-spring: cubic-bezier(.32, .72, 0, 1);
  --ease-out-expo: cubic-bezier(.19, 1, .22, 1);
  --ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
  --shadow-lift: 0 28px 70px -18px rgba(0, 0, 0, .55);
  --shadow-paper: 0 30px 70px -24px rgba(40, 28, 12, .35);
  --line: 1px solid rgba(235, 222, 208, .14);
  --line-soft: 1px solid rgba(235, 222, 208, .08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--ink); color: var(--cream); font-family: var(--font-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden; position: relative; min-height: 100svh;
  /* room for the sticky CTA bar so it never covers the footer (ux: fixed-element-offset) */
  padding-bottom: 0;
}
::selection { background: var(--orange); color: var(--black); }
:focus-visible { outline: 2px solid var(--fern); outline-offset: 3px; border-radius: 3px; }
button:focus-visible, a:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--fern); outline-offset: 3px; }
img { display: block; max-width: 100%; }

/* a calm fixed wash on the dark sections. NOTHING like the showroom's
   four drifting glows. one still, low moss bloom for depth, then quiet. */
.wash { position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60vw 50vw at 82% -6%, rgba(54, 64, 42, .5), transparent 60%),
    radial-gradient(56vw 46vw at -8% 104%, rgba(65, 57, 51, .42), transparent 62%);
}
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- type primitives ---------- */
.disp { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -.022em; line-height: .86; text-wrap: balance; }
.lab  { font-family: var(--font-label); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; color: var(--stone); }
.o    { color: var(--orange); }
/* the round Stolan dot (true circle, not the square Big Shoulders period) */
.dot { display: inline-block; width: .14em; height: .14em; border-radius: 50%; background: var(--orange); vertical-align: baseline; margin-left: .05em; position: relative; top: -.02em; }
/* highlighter: a key phrase gets an olive marker swipe (directional cue) */
.mark-hi { background: linear-gradient(180deg, transparent 56%, rgba(106, 134, 92, .42) 56%); padding: 0 .04em; }
.mark-hi-paper { background: linear-gradient(180deg, transparent 56%, rgba(106, 134, 92, .5) 56%); padding: 0 .04em; }

/* =====================================================================
   HEADER - minimal. Small wordmark only. NO nav, NO exit links. Every
   off-page link is a leak. Not fixed/glued (engine anti-pattern); it sits
   in the flow above the hero and scrolls away.
   ===================================================================== */
.s-head { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  max-width: 1140px; margin: 0 auto; padding: clamp(15px, 3.5vw, 22px) clamp(18px, 5vw, 40px); }
.s-head .wm { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; font-size: 18px; color: var(--cream); display: inline-flex; align-items: center; gap: 3px; }
/* a single trust microline in the header instead of nav (no link = no leak) */
.s-head .trust-mini { font-family: var(--font-label); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); display: inline-flex; align-items: center; gap: 8px; }
.s-head .trust-mini::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fern); flex: none; }
@media (max-width: 520px) { .s-head .trust-mini { display: none; } }

/* shared content rails */
.wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding-inline: clamp(18px, 5vw, 40px); }
.wrap-narrow { width: 100%; max-width: 760px; margin: 0 auto; padding-inline: clamp(18px, 5vw, 28px); }

/* the eyebrow pill (engine: high-end-visual-design eyebrow tag) */
.eyebrow-pill { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-label); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600;
  padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(106, 134, 92, .45); color: var(--fern); background: rgba(106, 134, 92, .08); }
.eyebrow-pill .pip { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.eyebrow-pill.on-paper { border-color: rgba(91, 107, 53, .4); color: var(--moss); background: rgba(91, 107, 53, .08); }

/* =====================================================================
   BUTTONS - one reserved CTA grammar. The money color is fern + orange
   arrow. Button-in-button trailing arrow (engine: high-end-visual-design).
   ===================================================================== */
.btn { font-family: var(--font-label); font-weight: 700; font-size: 14px; letter-spacing: .03em; border: none; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 18px 16px 28px; text-decoration: none;
  transition: transform .4s var(--ease-spring), box-shadow .4s var(--ease-spring), background .3s, opacity .25s, border-color .25s, color .25s; }
.btn .arr { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none;
  transition: transform .4s var(--ease-spring), background .3s; }
.btn .arr svg { width: 15px; height: 15px; }
/* primary money button: fern field, dark arrow puck */
.btn-go { background: var(--fern); color: var(--black); box-shadow: 0 16px 36px -12px rgba(106, 134, 92, .6); }
.btn-go .arr { background: rgba(8, 8, 10, .16); color: var(--black); }
@media (hover: hover) { .btn-go:hover { transform: translateY(-2px); box-shadow: 0 22px 50px -12px rgba(106, 134, 92, .7); } .btn-go:hover .arr { transform: translateX(3px); } }
.btn-go:active { transform: translateY(0) scale(.985); }
/* the loud offer button: orange field (used only at the buy moment) */
.btn-buy { background: var(--orange); color: #1a0d00; box-shadow: 0 18px 42px -12px rgba(255, 106, 0, .6); font-weight: 800; }
.btn-buy .arr { background: rgba(26, 13, 0, .18); color: #1a0d00; }
@media (hover: hover) { .btn-buy:hover { transform: translateY(-2px); box-shadow: 0 24px 56px -12px rgba(255, 106, 0, .72); } .btn-buy:hover .arr { transform: translateX(3px); } }
.btn-buy:active { transform: translateY(0) scale(.985); }
/* cream button (on dark, secondary emphasis e.g. the start CTA) */
.btn-cream { background: var(--cream); color: var(--black); box-shadow: var(--shadow-lift); }
.btn-cream .arr { background: rgba(8, 8, 10, .1); color: var(--orange); }
@media (hover: hover) { .btn-cream:hover { transform: translateY(-2px); box-shadow: 0 24px 56px -16px rgba(0, 0, 0, .6); } .btn-cream:hover .arr { transform: translateX(3px); } }
.btn-cream:active { transform: translateY(0) scale(.985); }
.btn-ghost { background: transparent; color: var(--body-dim); border: 1px solid rgba(235, 222, 208, .22); box-shadow: none; padding: 15px 26px; }
.btn-ghost .arr { display: none; }
@media (hover: hover) { .btn-ghost:hover { border-color: var(--fern); color: var(--cream); } }
.btn-block { width: 100%; }
.btn:disabled { opacity: .42; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-lg { font-size: 15.5px; padding: 19px 20px 19px 32px; }
.btn-lg .arr { width: 34px; height: 34px; }

/* trust line under a CTA (free · ~2 min · you keep what we find) */
.trustline { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
.trustline .t { font-family: var(--font-label); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--stone); display: inline-flex; align-items: center; gap: 8px; }
.trustline .t svg { width: 14px; height: 14px; color: var(--fern); flex: none; }
.trustline.on-paper .t { color: var(--sub-on-paper); }
.trustline.on-paper .t svg { color: var(--moss); }

/* =====================================================================
   HERO - the promise, not a mood. Reads FAST. High-contrast cream band.
   Big outcome headline a tired thumb gets in one second, one-line subhead,
   CTA visible immediately, trust line under it. Imagery SUPPORTS in a framed
   proof card, it never swallows the message.
   ===================================================================== */
.hero { position: relative; background: linear-gradient(178deg, var(--paper), var(--paper-2)); color: var(--ink-on-paper); overflow: hidden;
  border-bottom: 1px solid var(--line-on-paper); }
/* faint warm bloom + hairline grid, keeps the lit band from feeling flat */
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(50vw 40vw at 88% -10%, rgba(255, 106, 0, .1), transparent 60%),
             radial-gradient(46vw 40vw at -6% 110%, rgba(91, 107, 53, .14), transparent 60%); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: clamp(30px, 5vw, 56px);
  max-width: 1140px; margin: 0 auto; padding: clamp(34px, 6vw, 72px) clamp(18px, 5vw, 40px) clamp(40px, 7vw, 84px); align-items: center; }
@media (min-width: 920px) { .hero-grid { grid-template-columns: 1.12fr .88fr; gap: clamp(40px, 4.5vw, 76px); } }

.hero-copy .eyebrow-pill { margin-bottom: clamp(18px, 3vw, 24px); }
.hero h1 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -.026em; line-height: .9;
  font-size: clamp(42px, 8.2vw, 82px); color: var(--ink-on-paper); max-width: 15ch; }
.hero h1 .leak { color: var(--leather); }
.hero .subhead { font-size: clamp(17px, 2.1vw, 22px); line-height: 1.45; color: var(--sub-on-paper); margin-top: clamp(18px, 2.6vw, 26px); max-width: 40ch; font-weight: 500; }
.hero .subhead b { color: var(--ink-on-paper); font-weight: 700; }
.hero-cta { margin-top: clamp(26px, 3.6vw, 36px); }
.hero-cta .btn { width: 100%; }
@media (min-width: 560px) { .hero-cta .btn { width: auto; } }
.hero-cta .trustline { margin-top: 20px; }
/* the proof chip just under the hero CTA: tiny stars + count, recognition-first social proof up top */
.hero-microproof { display: inline-flex; align-items: center; gap: 11px; margin-top: 22px; padding: 9px 15px; border-radius: 999px; background: rgba(24, 20, 14, .06); border: 1px solid var(--line-on-paper); }
.hero-microproof .stars { display: inline-flex; gap: 2px; }
.hero-microproof .stars svg { width: 14px; height: 14px; color: var(--orange); }
.hero-microproof .mp-txt { font-family: var(--font-label); font-size: 11px; letter-spacing: .04em; color: var(--sub-on-paper); font-weight: 600; }
.hero-microproof .mp-txt b { color: var(--ink-on-paper); }

/* hero visual: a framed proof still in a double-bezel tray. Supports, does
   not swallow. Tucked beside the promise, never behind it. */
.hero-visual { position: relative; }
.bezel { padding: 7px; border-radius: var(--radius-lg); background: linear-gradient(160deg, rgba(24, 20, 14, .1), rgba(24, 20, 14, .04));
  border: 1px solid var(--line-on-paper); box-shadow: var(--shadow-paper); }
.bezel-core { position: relative; border-radius: calc(var(--radius-lg) - 7px); overflow: hidden; aspect-ratio: 4 / 5;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .14); }
.bezel-core .bz-img { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.02); }
.bezel-core::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6, 5, 7, .68), transparent 52%); }
.bezel-core .bz-cap { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; display: flex; align-items: center; gap: 10px;
  font-family: var(--font-label); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--cream); }
.bezel-core .bz-cap::before { content: ""; width: 16px; height: 1px; background: var(--orange); flex: none; }
/* a floating "the leak" tag overlapping the frame (z-axis depth, sales-floor pop) */
.hero-tag { position: absolute; left: -10px; top: 24px; z-index: 2; display: inline-flex; align-items: center; gap: 9px;
  background: var(--black); color: var(--cream); font-family: var(--font-label); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 11px 16px; border-radius: 999px; box-shadow: var(--shadow-lift); border: 1px solid rgba(235, 222, 208, .14); }
.hero-tag .pip { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); animation: pip 2.4s var(--ease-out-cubic) infinite; }
@keyframes pip { 0%, 100% { opacity: .5; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } }
@media (max-width: 919px) { .hero-visual { max-width: 440px; margin: 0 auto; } .hero-tag { left: 2px; } }

/* =====================================================================
   PAIN AGITATE - short, scannable. Three burnt-out lines as a row of
   cards, NOT a wall of text. On the dark, contrast after the lit hero.
   ===================================================================== */
.sec { position: relative; padding: clamp(56px, 9vw, 104px) 0; }
.sec-dark { background: var(--ink); }
.sec-head { max-width: 760px; }
.sec-head .eyebrow-pill { margin-bottom: 18px; }
.sec-head h2 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; line-height: .92;
  font-size: clamp(32px, 6vw, 60px); color: var(--cream); }
.sec-head h2 .green { color: var(--fern); }
.sec-head .sub { font-size: clamp(16px, 1.9vw, 19px); line-height: 1.55; color: var(--body-dim); margin-top: 18px; max-width: 56ch; }

.pain-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: clamp(34px, 5vw, 52px); }
@media (min-width: 720px) { .pain-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.pain-card { padding: clamp(22px, 3vw, 28px); border-radius: var(--radius); border: 1px solid rgba(235, 222, 208, .12);
  background: linear-gradient(180deg, rgba(20, 20, 16, .55), rgba(10, 10, 8, .4)); position: relative; overflow: hidden;
  transition: border-color .4s var(--ease-spring), transform .4s var(--ease-spring); }
@media (hover: hover) { .pain-card:hover { border-color: rgba(106, 134, 92, .42); transform: translateY(-3px); } }
.pain-card .pc-q { font-family: var(--font-display); font-weight: 800; font-size: 30px; color: transparent; -webkit-text-stroke: 1px rgba(255, 106, 0, .5); line-height: 1; }
.pain-card p { font-family: var(--font-display); font-weight: 700; text-transform: none; font-size: clamp(18px, 2.4vw, 22px); line-height: 1.18; color: var(--cream); margin-top: 14px; letter-spacing: -.01em; }
.pain-turn { margin-top: clamp(30px, 4vw, 44px); display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.pain-turn .turnline { font-size: clamp(18px, 2.4vw, 24px); line-height: 1.4; color: var(--cream); max-width: 30ch; font-weight: 500; }
.pain-turn .turnline b { color: var(--fern); font-weight: 700; }

/* =====================================================================
   QUIZ - the funnel. One question per screen. Segmented progress that
   never stalls. Big tap targets. Lit-band quiz card on the dark, so the
   work area itself feels like a clean tool, not a gallery plate.
   ===================================================================== */
.quiz-sec { background: var(--ink); padding: clamp(34px, 6vw, 70px) 0 clamp(120px, 14vw, 150px); }
.quiz-card { position: relative; max-width: 720px; margin: 0 auto; border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--paper), var(--paper-2)); color: var(--ink-on-paper);
  box-shadow: var(--shadow-paper); border: 1px solid var(--line-on-paper); overflow: hidden;
  padding: clamp(22px, 4.5vw, 40px); }
.quiz-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .45;
  background: radial-gradient(40vw 30vw at 100% 0%, rgba(255, 106, 0, .08), transparent 60%); }
.quiz-inner { position: relative; z-index: 1; }

/* progress: discrete segments, never a stalling bar */
.prog { display: flex; gap: 6px; }
.prog .seg { height: 4px; flex: 1; border-radius: 3px; background: rgba(24, 20, 14, .14); overflow: hidden; position: relative; }
.prog .seg i { position: absolute; inset: 0; background: var(--moss); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out-expo); }
.prog .seg.done i { transform: scaleX(1); }
.prog .seg.active i { transform: scaleX(1); background: linear-gradient(90deg, var(--moss), var(--orange)); }
.prog-meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; margin-bottom: clamp(22px, 4vw, 32px); }
.prog-meta .pm { font-family: var(--font-label); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--sub-on-paper); }
.prog-meta .pm b { color: var(--moss); }

.step { display: none; }
.step.show { display: block; animation: stepIn .45s var(--ease-spring) both; }
@keyframes stepIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.q-kicker { font-family: var(--font-label); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--moss); font-weight: 600; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.q-kicker::before { content: ""; width: 24px; height: 1px; background: var(--moss); opacity: .7; flex: none; }
.qtext { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -.018em; font-size: clamp(28px, 6vw, 46px); line-height: .96; color: var(--ink-on-paper); margin-bottom: 11px; text-wrap: balance; }
.qhint { font-size: clamp(14.5px, 1.7vw, 16px); line-height: 1.5; color: var(--sub-on-paper); max-width: 48ch; margin-bottom: clamp(20px, 3.5vw, 28px); }

/* single-tap choices: big tap targets, full-row hit area */
.choices { display: flex; flex-direction: column; gap: 10px; }
.choice { position: relative; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 15px; width: 100%;
  background: rgba(255, 255, 255, .5); border: 1.5px solid rgba(24, 20, 14, .16); border-radius: var(--radius);
  padding: 16px 18px; min-height: 60px; color: var(--ink-on-paper); font-family: var(--font-body);
  transition: border-color .3s var(--ease-spring), transform .25s var(--ease-spring), background .3s, box-shadow .3s; }
@media (hover: hover) { .choice:hover { border-color: rgba(91, 107, 53, .6); background: rgba(255, 255, 255, .8); transform: translateY(-2px); box-shadow: 0 12px 28px -16px rgba(40, 28, 12, .4); } }
.choice:active { transform: translateY(0) scale(.995); }
.choice.sel { border-color: var(--moss); background: rgba(91, 107, 53, .12); box-shadow: 0 0 0 1px var(--moss); }
.choice .ci { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid rgba(24, 20, 14, .26); display: grid; place-items: center; transition: border-color .25s, background .25s; }
.choice.sel .ci { border-color: var(--moss); background: var(--moss); }
.choice .ci svg { width: 13px; height: 13px; opacity: 0; transform: scale(.5); transition: opacity .2s, transform .2s var(--ease-spring); color: var(--paper); }
.choice.sel .ci svg { opacity: 1; transform: scale(1); }
.choice .ctitle { font-size: clamp(15.5px, 2vw, 17.5px); font-weight: 600; color: var(--ink-on-paper); line-height: 1.25; }
.choice .csub { display: block; font-size: 13px; color: var(--sub-on-paper); margin-top: 3px; line-height: 1.4; font-weight: 400; }

/* free-text input on the lit card */
.field { position: relative; }
.field textarea { width: 100%; min-height: 120px; resize: vertical; background: rgba(255, 255, 255, .65); border: 1.5px solid rgba(24, 20, 14, .18); border-radius: var(--radius);
  color: var(--ink-on-paper); font-family: var(--font-body); font-size: 16px; line-height: 1.5; padding: 15px 17px; transition: border-color .3s var(--ease-spring), background .3s; }
.field textarea:focus { outline: none; border-color: var(--moss); background: #fff; box-shadow: 0 0 0 3px rgba(91, 107, 53, .14); }
.field textarea::placeholder { color: rgba(24, 20, 14, .38); }
.field input[type="email"] { width: 100%; background: rgba(255, 255, 255, .65); border: 1.5px solid rgba(24, 20, 14, .18); border-radius: var(--radius);
  color: var(--ink-on-paper); font-family: var(--font-body); font-size: 16px; padding: 16px 18px; transition: border-color .3s var(--ease-spring), background .3s; }
.field input[type="email"]:focus { outline: none; border-color: var(--moss); background: #fff; box-shadow: 0 0 0 3px rgba(91, 107, 53, .14); }
.field input[type="email"]::placeholder { color: rgba(24, 20, 14, .38); }
.egs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.egs .eglabel { font-family: var(--font-label); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--sub-on-paper); align-self: center; margin-right: 2px; }
.eg-chip { font-family: var(--font-body); font-size: 13px; color: var(--sub-on-paper); cursor: pointer; background: rgba(24, 20, 14, .05); border: 1px solid rgba(24, 20, 14, .16); border-radius: 999px; padding: 7px 13px; transition: border-color .25s, color .25s, background .25s; }
@media (hover: hover) { .eg-chip:hover { border-color: var(--moss); color: var(--ink-on-paper); background: rgba(91, 107, 53, .1); } }
.err { color: #B4451E; font-size: 14px; margin-top: 11px; min-height: 1em; line-height: 1.4; font-weight: 500; }

/* quiz nav rows (dark buttons on the lit card) */
.qrow { display: flex; gap: 12px; margin-top: clamp(22px, 4vw, 30px); align-items: center; }
.qrow.end { justify-content: flex-end; }
.qrow.split { justify-content: space-between; }
.btn-dark { background: var(--ink-on-paper); color: var(--paper); box-shadow: 0 14px 30px -14px rgba(24, 20, 14, .5); }
.btn-dark .arr { background: rgba(235, 222, 208, .14); color: var(--orange); }
@media (hover: hover) { .btn-dark:hover { transform: translateY(-2px); box-shadow: 0 20px 42px -14px rgba(24, 20, 14, .6); } .btn-dark:hover .arr { transform: translateX(3px); } }
.btn-dark:active { transform: translateY(0) scale(.985); }
.btn-dark:disabled { opacity: .35; box-shadow: none; transform: none; }
.btn-quiet { background: transparent; color: var(--sub-on-paper); border: 1.5px solid rgba(24, 20, 14, .2); box-shadow: none; padding: 15px 24px; }
.btn-quiet .arr { display: none; }
@media (hover: hover) { .btn-quiet:hover { border-color: var(--moss); color: var(--ink-on-paper); } }

/* =====================================================================
   EMAIL GATE - after the last question, before the result. On the lit card.
   Single field, one button, the exact payoff stated, one teaser line.
   ===================================================================== */
.gate-kicker { font-family: var(--font-label); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--moss); font-weight: 600; margin-bottom: 13px; }
.gate h2 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; font-size: clamp(34px, 7vw, 56px); line-height: .92; color: var(--ink-on-paper); margin-bottom: 13px; }
.gate .gsub { font-size: clamp(15px, 1.9vw, 17px); line-height: 1.5; color: var(--sub-on-paper); margin-bottom: 18px; max-width: 46ch; }
.gate .gsub b { color: var(--ink-on-paper); font-weight: 600; }
.teaser { margin: 4px 0 22px; padding: 18px 20px; border: 1.5px solid rgba(91, 107, 53, .4); border-radius: var(--radius); background: rgba(91, 107, 53, .1); position: relative; }
.teaser .tlabel { font-family: var(--font-label); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--moss); margin-bottom: 9px; font-weight: 600; }
.teaser .ttext { font-size: clamp(15.5px, 2vw, 17px); line-height: 1.45; color: var(--ink-on-paper); font-weight: 500; }
.gate .fineprint { font-size: 12.5px; color: var(--sub-on-paper); margin-top: 15px; line-height: 1.5; }

/* =====================================================================
   ANTICIPATION BEAT - short labeled "reading your answers". On the lit card.
   Instant + final state under reduced motion.
   ===================================================================== */
.beat { text-align: center; padding: clamp(40px, 9vw, 72px) clamp(20px, 4vw, 40px); }
.beat .mark { width: 60px; height: 60px; margin: 0 auto 24px; display: grid; place-items: center; position: relative; }
.beat .mark .ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(91, 107, 53, .25); }
.beat .mark .ring.spin { border-top-color: var(--moss); border-right-color: var(--moss); animation: beatspin 1s linear infinite; }
.beat .mark .core { width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle, var(--moss), var(--fern)); animation: beatpulse 1.8s var(--ease-out-cubic) infinite; }
@keyframes beatspin { to { transform: rotate(360deg); } }
@keyframes beatpulse { 0%, 100% { transform: scale(.85); opacity: .7; } 50% { transform: scale(1.2); opacity: 1; } }
.beat .status { font-family: var(--font-label); font-size: clamp(15px, 2.2vw, 18px); color: var(--ink-on-paper); min-height: 1.5em; transition: opacity .3s; font-weight: 600; }
.beat .statusline { width: min(78vw, 240px); height: 3px; margin: 16px auto 0; background: rgba(24, 20, 14, .14); border-radius: 2px; overflow: hidden; }
.beat .statusline i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--moss), var(--orange)); transform: scaleX(0); transform-origin: left; }
.beat .bsub { font-size: 13px; color: var(--sub-on-paper); margin-top: 14px; max-width: 40ch; margin-inline: auto; }

/* =====================================================================
   THE REVEAL - the win. On the dark, so it lands cinematic after the lit
   quiz, then we go BACK to lit for the offer. Personalized, the ONE leak
   named, the first move, the custom visual, the relief.
   ===================================================================== */
.reveal-sec { background: var(--ink); padding: clamp(48px, 8vw, 92px) 0 clamp(30px, 5vw, 56px); }
.reveal-wrap { max-width: 820px; margin: 0 auto; }
.rstage { opacity: 0; transform: translateY(20px); }
.rstage.in { opacity: 1; transform: none; transition: opacity .7s var(--ease-out-expo), transform .7s var(--ease-out-expo); }

.reveal-head .rk { font-family: var(--font-label); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--fern); font-weight: 600; display: flex; align-items: center; gap: 10px; }
.reveal-head .rk::before { content: ""; width: 24px; height: 1px; background: var(--fern); opacity: .7; }
.reveal-head h2 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; font-size: clamp(40px, 9.5vw, 76px); line-height: .9; color: var(--cream); margin-top: 14px; }
.reveal-head h2 .green { color: var(--fern); }

.recognition { font-size: clamp(18px, 2.4vw, 22px); line-height: 1.55; color: var(--cream); margin-top: 24px; max-width: 60ch; }

/* the named leak - the ache, set apart with the orange seam */
.named-leak { margin-top: 28px; padding: clamp(22px, 4vw, 30px) clamp(22px, 4vw, 28px); border-left: 3px solid var(--orange);
  background: linear-gradient(90deg, rgba(255, 106, 0, .1), transparent 82%); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.named-leak .nl-label { font-family: var(--font-label); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--orange); margin-bottom: 11px; font-weight: 600; }
.named-leak .nl-text { font-family: var(--font-display); font-weight: 700; text-transform: none; font-size: clamp(22px, 4.2vw, 32px); line-height: 1.1; letter-spacing: -.01em; color: var(--cream); }

/* the first move, made to feel like the prize */
.usable { margin-top: 26px; padding: clamp(24px, 4vw, 32px); border: 1px solid rgba(106, 134, 92, .45); border-radius: var(--radius);
  background: linear-gradient(150deg, rgba(54, 64, 42, .45), rgba(10, 10, 8, .5)); position: relative; overflow: hidden; }
.usable::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 140% at 0% 0%, rgba(106, 134, 92, .18), transparent 58%); }
.usable .ulabel { position: relative; font-family: var(--font-label); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--fern); margin-bottom: 13px; font-weight: 600; }
.usable .uline { position: relative; font-family: var(--font-display); font-weight: 700; text-transform: none; font-size: clamp(21px, 4.4vw, 30px); line-height: 1.14; color: var(--cream); letter-spacing: -.01em; }
.usable .urow { position: relative; display: flex; gap: 16px; align-items: center; justify-content: space-between; margin-top: 18px; flex-wrap: wrap; }
.usable .ucopy { flex: none; font-family: var(--font-label); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; padding: 11px 18px; border-radius: 999px; background: var(--cream); color: var(--black); border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: transform .25s var(--ease-spring), background .25s; }
@media (hover: hover) { .usable .ucopy:hover { transform: translateY(-2px); } }
.usable .ucopy.copied { background: var(--fern); }
.usable .ucopy svg { width: 14px; height: 14px; }
.usable .ucopy .ulab2 { font-family: var(--font-label); font-size: 11px; color: var(--stone); font-weight: 600; }

/* the custom visual generated for this read */
.revealvisual { margin-top: 26px; }
.revealvisual .rv-frame { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid rgba(235, 222, 208, .12); box-shadow: var(--shadow-lift); }
.revealvisual .rv-img { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.02); }
.revealvisual .rv-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6, 5, 7, .68), transparent 55%); }
.revealvisual .rv-cap { position: absolute; left: 16px; bottom: 14px; font-family: var(--font-label); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--cream); display: flex; align-items: center; gap: 9px; }
.revealvisual .rv-cap::before { content: ""; width: 16px; height: 1px; background: var(--orange); }

.relief { font-size: clamp(16px, 2vw, 18px); line-height: 1.6; color: var(--body-dim); margin-top: 26px; max-width: 58ch; }
.relief b { color: var(--cream); font-weight: 600; }
/* the bridge line into the offer */
.reveal-bridge { margin-top: 30px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.reveal-bridge .bridge-txt { font-family: var(--font-display); font-weight: 700; text-transform: none; font-size: clamp(19px, 2.6vw, 24px); color: var(--cream); letter-spacing: -.01em; }
.reveal-bridge .bridge-txt .o { color: var(--orange); }

/* =====================================================================
   THE OFFER - $27 "The Playbook". The money moment. Contained, unmissable.
   On the LIT band, double-bezel card. Value stack with checkmarks, struck
   anchor, the big $27, guarantee seal, the loud orange CTA.
   ===================================================================== */
.offer-sec { background: linear-gradient(180deg, var(--paper), var(--paper-2)); color: var(--ink-on-paper); position: relative; overflow: hidden;
  padding: clamp(56px, 9vw, 104px) 0; border-top: 1px solid var(--line-on-paper); border-bottom: 1px solid var(--line-on-paper); }
.offer-sec::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(48vw 38vw at 90% -8%, rgba(255, 106, 0, .12), transparent 60%), radial-gradient(44vw 38vw at -6% 108%, rgba(91, 107, 53, .14), transparent 60%); }
.offer-head { position: relative; z-index: 1; text-align: center; max-width: 720px; margin: 0 auto clamp(34px, 5vw, 48px); }
.offer-head .eyebrow-pill { margin-bottom: 18px; }
.offer-head h2 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; line-height: .9;
  font-size: clamp(38px, 8vw, 74px); color: var(--ink-on-paper); }
.offer-head h2 .o { color: var(--orange); }
.offer-head .sub { font-size: clamp(16px, 2vw, 19px); line-height: 1.5; color: var(--sub-on-paper); margin-top: 16px; max-width: 52ch; margin-inline: auto; }
.offer-head .sub b { color: var(--ink-on-paper); font-weight: 700; }

/* the offer card itself: double-bezel, the machined-hardware feel */
.offer-card-shell { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 8px; border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(24, 20, 14, .12), rgba(24, 20, 14, .04)); border: 1px solid var(--line-on-paper); box-shadow: var(--shadow-paper); }
.offer-card { position: relative; border-radius: calc(var(--radius-lg) - 8px); overflow: hidden; background: #FBF6EE;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6); }
/* the manual hero banner inside the card */
.offer-banner { position: relative; height: clamp(150px, 26vw, 230px); overflow: hidden; }
.offer-banner .ob-img { position: absolute; inset: 0; background-size: cover; background-position: center 42%; transform: scale(1.03); }
.offer-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10, 8, 5, .9), rgba(10, 8, 5, .2) 55%, rgba(10, 8, 5, .4)); }
.offer-banner .ob-badge { position: absolute; left: clamp(20px, 4vw, 34px); bottom: 16px; z-index: 1; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-label); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--cream); font-weight: 700; }
.offer-banner .ob-badge::before { content: ""; width: 22px; height: 1px; background: var(--orange); }
.offer-body { padding: clamp(26px, 5vw, 44px); }
.offer-body h3 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -.018em; font-size: clamp(40px, 9vw, 76px); line-height: .9; color: var(--ink-on-paper); margin-bottom: 14px; text-wrap: balance; }
.offer-body .olead { font-size: clamp(15.5px, 1.9vw, 17.5px); line-height: 1.55; color: var(--sub-on-paper); margin-bottom: 26px; max-width: 54ch; }
.offer-body .olead b { color: var(--ink-on-paper); font-weight: 700; }

/* value stack with checkmarks, each line a real deliverable */
.vstack { display: flex; flex-direction: column; margin-bottom: 28px; }
.vstack .vrow { display: flex; align-items: flex-start; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line-on-paper); }
.vstack .vrow:first-child { border-top: 1px solid var(--line-on-paper); }
.vstack .vcheck { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--moss); display: grid; place-items: center; margin-top: 1px; }
.vstack .vcheck svg { width: 12px; height: 12px; color: var(--paper); }
.vstack .vfree .vcheck { background: var(--orange); }
.vstack .vmain { flex: 1; min-width: 0; }
.vstack .vname { font-size: clamp(15px, 1.9vw, 16.5px); font-weight: 700; color: var(--ink-on-paper); line-height: 1.3; }
.vstack .vsub { font-size: 13px; color: var(--sub-on-paper); margin-top: 2px; line-height: 1.4; }
.vstack .vval { flex: none; font-family: var(--font-label); font-size: 12px; letter-spacing: .02em; color: var(--sub-on-paper); white-space: nowrap; padding-top: 2px; }
.vstack .vval b { color: var(--ink-on-paper); font-weight: 700; }
.vstack .vfree .vval { color: var(--leather); font-weight: 700; }

/* the price block: struck anchor, the big $27, tabular figures */
.priceblock { display: flex; align-items: flex-end; gap: clamp(16px, 4vw, 30px); flex-wrap: wrap; padding-top: 6px; }
.priceblock .anchor { display: flex; flex-direction: column; gap: 4px; }
.priceblock .anchor .alab { font-family: var(--font-label); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--sub-on-paper); }
.priceblock .anchor .aval { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 5vw, 40px); line-height: 1; color: var(--sub-on-paper); font-variant-numeric: tabular-nums;
  text-decoration: line-through; text-decoration-color: var(--orange); text-decoration-thickness: 3px; }
.priceblock .nowblock { display: flex; align-items: baseline; gap: 10px; }
.priceblock .now { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(60px, 13vw, 104px); line-height: .8; letter-spacing: -.03em; color: var(--ink-on-paper); font-variant-numeric: tabular-nums; }
.priceblock .now .cur { font-size: .5em; vertical-align: top; position: relative; top: .12em; color: var(--leather); }
.priceblock .unit { font-family: var(--font-label); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--sub-on-paper); max-width: 12ch; line-height: 1.5; }

/* guarantee seal - a real money-back seal at the buy button */
.guarantee-seal { display: flex; align-items: center; gap: 16px; margin-top: 26px; padding: 18px 20px; border-radius: var(--radius);
  background: rgba(91, 107, 53, .1); border: 1.5px solid rgba(91, 107, 53, .4); }
.guarantee-seal .seal { flex: none; width: 52px; height: 52px; position: relative; display: grid; place-items: center; }
.guarantee-seal .seal .seal-ring { position: absolute; inset: 0; color: var(--moss); }
.guarantee-seal .seal .seal-ring svg { width: 100%; height: 100%; }
.guarantee-seal .seal .seal-shield { width: 24px; height: 24px; color: var(--moss); z-index: 1; }
.guarantee-seal .gtext { font-size: 13.5px; line-height: 1.5; color: var(--sub-on-paper); }
.guarantee-seal .gtext b { color: var(--ink-on-paper); font-weight: 700; }

.offer-cta { margin-top: 24px; }
.offer-cta .btn { width: 100%; }
.offer-cta .paynote { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; font-family: var(--font-label); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--sub-on-paper); }
.offer-cta .paynote svg { width: 14px; height: 14px; color: var(--moss); }
.anchor-note { font-size: 13.5px; line-height: 1.6; color: var(--sub-on-paper); margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-on-paper); }
.anchor-note b { color: var(--ink-on-paper); font-weight: 600; }

/* =====================================================================
   SOCIAL PROOF - star rating + testimonials. Clearly labeled PLACEHOLDER
   for Steve to swap real. On the dark, after the lit offer.
   ===================================================================== */
.proof-sec { background: var(--ink); padding: clamp(56px, 9vw, 100px) 0; }
.proof-top { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
@media (min-width: 720px) { .proof-top { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 30px; } }
.rating-block { display: flex; align-items: center; gap: 16px; }
.rating-block .rnum { font-family: var(--font-display); font-weight: 900; font-size: clamp(48px, 9vw, 72px); line-height: .82; color: var(--cream); font-variant-numeric: tabular-nums; }
.rating-block .rstars { display: flex; gap: 3px; margin-bottom: 6px; }
.rating-block .rstars svg { width: 18px; height: 18px; color: var(--orange); }
.rating-block .rmeta { font-family: var(--font-label); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--stone); margin-top: 4px; }
.proof-ph-flag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-label); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--stone);
  padding: 7px 13px; border-radius: 999px; border: 1px dashed rgba(154, 147, 138, .4); background: rgba(154, 147, 138, .06); }
.proof-ph-flag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--stone); }

.testi-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: clamp(34px, 5vw, 48px); }
@media (min-width: 720px) { .testi-grid { grid-template-columns: repeat(3, 1fr); } }
.testi { padding: clamp(24px, 3vw, 30px); border-radius: var(--radius); border: 1px solid rgba(235, 222, 208, .12);
  background: linear-gradient(180deg, rgba(20, 20, 16, .55), rgba(10, 10, 8, .4)); display: flex; flex-direction: column; gap: 16px;
  transition: border-color .4s var(--ease-spring), transform .4s var(--ease-spring); }
@media (hover: hover) { .testi:hover { border-color: rgba(106, 134, 92, .4); transform: translateY(-3px); } }
.testi .tstars { display: flex; gap: 2px; }
.testi .tstars svg { width: 15px; height: 15px; color: var(--orange); }
.testi .tquote { font-size: clamp(15.5px, 1.9vw, 17px); line-height: 1.5; color: var(--cream); font-weight: 500; flex: 1; }
.testi .tperson { display: flex; align-items: center; gap: 12px; padding-top: 4px; border-top: var(--line-soft); }
.testi .tav { flex: none; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(150deg, var(--moss), var(--flint)); display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--cream); }
.testi .tname { font-family: var(--font-body); font-weight: 700; font-size: 14px; color: var(--cream); }
.testi .trole { font-size: 12px; color: var(--body-low); margin-top: 1px; }
.testi .tph { font-family: var(--font-label); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--stone); margin-left: auto; align-self: flex-start; padding: 4px 8px; border-radius: 999px; border: 1px dashed rgba(154, 147, 138, .4); }

/* =====================================================================
   MID + FINAL CTA bands - the offer pulled back to the front. CTA repeated
   at every decision point. The mid band is on the dark; the final is loud.
   ===================================================================== */
.cta-band { background: var(--ink); padding: clamp(48px, 8vw, 88px) 0; }
.cta-band-inner { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; max-width: 820px; }
.cta-band h2 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; line-height: .9; font-size: clamp(34px, 7vw, 62px); color: var(--cream); }
.cta-band h2 .green { color: var(--fern); }
.cta-band .cb-sub { font-size: clamp(16px, 1.9vw, 18px); line-height: 1.5; color: var(--body-dim); max-width: 50ch; }
.cta-band .cb-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.price-flag { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--font-label); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--stone); }
.price-flag b { font-family: var(--font-display); font-weight: 900; font-size: 22px; color: var(--cream); letter-spacing: -.01em; }

/* =====================================================================
   FAQ - short, objection-busting. On the lit band so it reads as the calm,
   honest answer section, then we go dark for the final CTA.
   ===================================================================== */
.faq-sec { background: linear-gradient(180deg, var(--paper-2), var(--paper)); color: var(--ink-on-paper); padding: clamp(56px, 9vw, 100px) 0; border-top: 1px solid var(--line-on-paper); }
.faq-sec .sec-head h2 { color: var(--ink-on-paper); }
.faq-sec .sec-head .sub { color: var(--sub-on-paper); }
.faq-list { max-width: 820px; margin: clamp(30px, 4vw, 44px) auto 0; }
.faq-item { border-bottom: 1px solid var(--line-on-paper); }
.faq-item summary { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; font-size: clamp(19px, 2.6vw, 28px); color: var(--ink-on-paper); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .fq-i { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid rgba(24, 20, 14, .3); display: grid; place-items: center; color: var(--leather); transition: transform .3s var(--ease-spring), background .3s, border-color .3s; }
.faq-item summary .fq-i svg { width: 14px; height: 14px; }
.faq-item[open] summary .fq-i { transform: rotate(45deg); background: var(--orange); border-color: var(--orange); color: #1a0d00; }
.faq-item .fq-a { font-size: clamp(15px, 1.8vw, 16.5px); line-height: 1.62; color: var(--sub-on-paper); max-width: 70ch; padding-bottom: 24px; }
.faq-item .fq-a b { color: var(--ink-on-paper); font-weight: 600; }

/* =====================================================================
   FOOTER - quiet. One line. No exit links (still a sales floor).
   ===================================================================== */
.s-foot { background: var(--ink); padding: clamp(40px, 6vw, 56px) 0 calc(clamp(40px, 6vw, 56px) + 88px); text-align: center; }
.s-foot .line { font-family: var(--font-label); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #6b6760; }
.s-foot .line .o { color: var(--orange); }
.s-foot .foot-mark { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; font-size: clamp(40px, 10vw, 88px); color: rgba(235, 222, 208, .06); line-height: .9; margin-bottom: 20px; }

/* =====================================================================
   STICKY CTA BAR - the offer always within reach (mobile-first). Shows
   after the hero scrolls out; hides while the quiz is the focus and again
   once the offer block is on screen. CTA always within thumb reach.
   ===================================================================== */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; transform: translateY(120%); transition: transform .5s var(--ease-spring);
  background: rgba(8, 8, 10, .9); backdrop-filter: blur(14px); border-top: 1px solid rgba(235, 222, 208, .14);
  padding: 12px clamp(14px, 5vw, 24px) calc(12px + env(safe-area-inset-bottom, 0px)); }
.sticky-cta.show { transform: translateY(0); }
.sticky-inner { max-width: 1140px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.sticky-cta .sc-left { min-width: 0; }
.sticky-cta .sc-title { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; font-size: clamp(16px, 4vw, 20px); color: var(--cream); line-height: 1; white-space: nowrap; }
.sticky-cta .sc-sub { font-family: var(--font-label); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--stone); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-cta .sc-sub b { color: var(--fern); }
.sticky-cta .btn { flex: none; padding: 14px 16px 14px 22px; font-size: 13.5px; }
.sticky-cta .btn .arr { width: 28px; height: 28px; }
@media (max-width: 420px) { .sticky-cta .sc-sub { display: none; } }

/* =====================================================================
   REVEAL-ON-SCROLL primitive (IntersectionObserver-driven). Engine:
   high-end-visual-design heavy fade-up. Reduced-motion shows static.
   ===================================================================== */
.fade-up { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease-out-expo), transform .8s var(--ease-out-expo); }
.fade-up.in { opacity: 1; transform: none; }

.hidden { display: none !important; }

/* =====================================================================
   REDUCED MOTION - hard requirement (Steve runs Reduce Motion ON).
   .no-motion is set by JS (prefers-reduced-motion OR toggle). We ALSO
   answer the media query, so zero-JS is calm + complete. Nothing depends
   on an animation to become visible or usable. Imagery and the sticky CTA
   stay. The page is fully usable static.
   ===================================================================== */
.no-motion .step.show { animation: none; }
.no-motion .rstage,
.no-motion .fade-up { opacity: 1 !important; transform: none !important; transition: none; }
.no-motion .beat .mark .ring.spin { border-color: rgba(91, 107, 53, .25); animation: none; }
.no-motion .beat .mark .core { animation: none; }
.no-motion .beat .statusline i { transform: scaleX(1); }
.no-motion .hero-tag .pip { animation: none; }
.no-motion .sticky-cta { transition: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .rstage, .fade-up { opacity: 1 !important; transform: none !important; }
  .beat .statusline i { transform: scaleX(1); }
  .beat .mark .ring.spin { border-color: rgba(91, 107, 53, .25); }
}

/* ---------- responsive nudges ---------- */
@media (max-width: 480px) {
  .usable .urow { flex-direction: column; align-items: stretch; gap: 14px; }
  .usable .ucopy { width: 100%; justify-content: center; }
  .priceblock { gap: 14px; }
  .guarantee-seal { gap: 13px; padding: 16px; }
  .offer-cta .btn, .hero-cta .btn { width: 100%; }
}

/* =====================================================================
   v2 ADDITIONS (funnel-ladder-v2 · sales-floor v3)
   Only NEW elements. The whole sales-floor look above is unchanged.
   1. name woven into the reveal headline
   2. the BLURRED, LOCKED Playbook preview (the gold through fog)
   ===================================================================== */

/* the reveal headline now reads "Sarah, here is what we see". The name is a
   span inside the same display h2, tinted fern so it pops as theirs. */
.reveal-head h2 #nameLine { color: var(--fern); }

/* ---------- LOCKED PLAYBOOK PREVIEW ----------------------------------
   Tasteful and premium, not a cheap paywall. Real card craft (the offer
   card's shadow + hairline), each card titled in the clear with its body
   rendered as blurred fog bars under a small lock. They see the shape of
   the gold without the words. The only way through is the $27. */
.locked-block { margin-top: clamp(34px, 6vw, 48px); }
.locked-head { max-width: 60ch; }
.locked-head .lh-kicker { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-label); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--orange); }
.locked-head .lh-kicker .pip { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.locked-head .lh-line { margin-top: 13px; font-size: clamp(16px, 2vw, 18px); line-height: 1.6; color: var(--body-dim); }
.locked-head .lh-line b { color: var(--cream); font-weight: 600; }

.locked-grid { margin-top: clamp(20px, 3.5vw, 28px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; position: relative; }

.lock-card { position: relative; overflow: hidden; border-radius: var(--radius); padding: 22px 20px 24px;
  background: linear-gradient(180deg, rgba(235, 222, 208, .055), rgba(235, 222, 208, .02));
  border: 1px solid rgba(235, 222, 208, .12); box-shadow: var(--shadow-lift);
  min-height: 168px; display: flex; flex-direction: column; }
/* a faint moss bloom in the corner so the locked cards still feel part of the
   warm world, not flat grey paywall tiles */
.lock-card::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 120% at 100% 0%, rgba(106, 134, 92, .12), transparent 56%); }

.lock-card .lock-pin { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none;
  background: rgba(255, 106, 0, .14); border: 1px solid rgba(255, 106, 0, .4); color: var(--orange); margin-bottom: 15px; position: relative; z-index: 1; }
.lock-card .lock-pin svg { width: 15px; height: 15px; }

.lock-card .lc-title { position: relative; z-index: 1; font-family: var(--font-display); font-weight: 700; text-transform: none;
  font-size: clamp(16px, 2.1vw, 19px); line-height: 1.16; letter-spacing: -.01em; color: var(--cream); }

/* the fog: stacked bars that mimic body lines, then heavily blurred + faded so
   the content reads as "there but not yet readable" */
.lock-card .lc-blur { position: relative; z-index: 0; margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; gap: 8px;
  filter: blur(5px); opacity: .5; -webkit-user-select: none; user-select: none; }
.lock-card .lc-blur span { display: block; height: 8px; border-radius: 5px; background: linear-gradient(90deg, rgba(235, 222, 208, .55), rgba(235, 222, 208, .22)); }
.lock-card .lc-blur span.short { width: 52%; }
.lock-card.lock-card--ghost { opacity: .82; }

/* hover lifts the lock slightly so the whole block feels alive and clickable
   (degrades to nothing under reduced motion via the no-motion rules below) */
@media (hover: hover) { .lock-card:hover { transform: translateY(-3px); transition: transform .4s var(--ease-spring); } }

.locked-cta { margin-top: clamp(22px, 4vw, 30px); display: flex; align-items: center; gap: 16px 20px; flex-wrap: wrap; }
.locked-cta .lc-through-line { font-family: var(--font-display); font-weight: 700; text-transform: none; font-size: clamp(18px, 2.5vw, 23px); color: var(--cream); letter-spacing: -.01em; }

/* staged reveal still applies (the locked block is a .rstage). Under motion it
   fades up with the rest; static under no-motion. */
.no-motion .lock-card { transform: none !important; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .locked-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .locked-grid { grid-template-columns: 1fr; gap: 12px; }
  .lock-card { min-height: 0; padding: 20px 18px 22px; }
  .lock-card .lc-blur { padding-top: 14px; }
  .locked-cta { flex-direction: column; align-items: stretch; }
  .locked-cta .btn { width: 100%; }
}

/* ============================================================
   ELEVATION LAYER (funnel-elevation, 2026-07-09)
   The SYSTEM-overhaul grammar on the sales floor: plates with
   mono captions, mask/rise/clip devices (fx.js), the strike
   band, product proof + founder block, sticky variants.
   Mono label layer: real monospace for captions and kickers.
   ============================================================ */
:root { --font-mono: ui-monospace, "SF Mono", "Menlo", "Cascadia Mono", monospace; }

/* ---------- plates: image + mono caption (SYSTEM layout grammar) ---------- */
.plate { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; }
.plate .plate-img { aspect-ratio: 4 / 5; background-size: cover; background-position: center; will-change: transform; }
.plate::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6, 5, 7, .58), transparent 46%); pointer-events: none; }
.plate .plate-cap { position: absolute; left: 16px; right: 16px; bottom: 13px; z-index: 1; display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; color: rgba(235, 222, 208, .92); }
.plate .plate-cap::before { content: ""; width: 16px; height: 1px; background: var(--orange); flex: none; }
.hero-visual .plate .plate-img { aspect-ratio: 4 / 5; }

/* mask device word wrappers (fx.js sets transforms) */
.fxw { display: inline-block; overflow: hidden; vertical-align: bottom; }
.fxw-i { display: inline-block; }

/* ---------- hero mechanism line (replaces the unsourced rating) ---------- */
.hero-mechline { margin-top: 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--stone); }
.hero-mechline b { color: var(--cream); font-weight: 600; }

/* ---------- the told band (per-line strike, the kit's kill move) ---------- */
.told-band { margin: clamp(30px, 5vw, 44px) auto 0; max-width: 860px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(20px, 4vw, 44px); align-items: center; padding: clamp(22px, 3.4vw, 34px); border: 1px solid rgba(235, 222, 208, .1); border-radius: var(--radius-lg);
  background: linear-gradient(150deg, rgba(65, 57, 51, .3), rgba(6, 5, 7, .2)); }
.told-kick { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; color: var(--stone); display: block; margin-bottom: 12px; }
.told-list { list-style: none; margin: 0; padding: 0; }
.told-list li { position: relative; display: inline-block; font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(19px, 2.6vw, 26px); letter-spacing: -.01em; line-height: 1.16; color: var(--body-low); padding: 3px 0; --sx: 1; }
.told-list li::after { content: ""; position: absolute; left: -2px; right: -2px; top: 54%; height: 3px; background: var(--orange);
  transform: scaleX(var(--sx)); transform-origin: left center; transition: transform .6s cubic-bezier(.30, 0, .10, 1); }
.told-list li { display: block; }
.no-motion .told-list li { text-decoration: none; }
.told-turn { font-size: clamp(15.5px, 2vw, 17.5px); line-height: 1.55; color: var(--body-dim); margin: 0; }
.told-turn b { color: var(--cream); }
@media (max-width: 720px) { .told-band { grid-template-columns: 1fr; gap: 18px; } }

/* ---------- gate refinements ---------- */
.teaser-lead { margin: 2px 0 20px; }
.lab-opt { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: none; color: var(--sub-on-paper); opacity: .75; margin-left: 8px; }

/* ---------- locked block: the unblurred Day-1 peek ---------- */
.lc-peek { margin: 10px 0 8px; padding: 10px 12px; border-left: 2px solid var(--orange); background: rgba(255, 106, 0, .06); border-radius: 6px; }
.lc-peek.hidden { display: none; }
.lp-lab { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); margin-bottom: 5px; }
.lp-line { display: block; font-size: 13.5px; line-height: 1.45; color: var(--cream); filter: none; }

/* ---------- offer refinements ---------- */
.ofree-line { margin: 14px 0 6px; font-size: 14.5px; line-height: 1.5; color: var(--sub-on-paper); }
.anchor-note--setup { margin: 18px 0 6px; }
.risk-line { margin-top: 10px; text-align: center; font-family: var(--font-label); font-weight: 600; font-size: 12.5px; letter-spacing: .02em; color: var(--moss); }

/* ---------- proof: the product + the founders ---------- */
.proof-sec .sec-head { max-width: 760px; }
.proof-grid { margin-top: clamp(26px, 4vw, 40px); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(22px, 4vw, 48px); align-items: start; }
.proof-plate .plate-img { aspect-ratio: 4 / 5; background-position: top center; }
.proof-copy { padding-top: clamp(4px, 1vw, 14px); }
.pf-line { font-family: var(--font-display); font-weight: 700; text-transform: none; font-size: clamp(20px, 2.8vw, 27px); line-height: 1.2; letter-spacing: -.01em; color: var(--cream); margin: 0 0 14px; }
.pf-line b { color: var(--fern); font-weight: 700; }
.pf-sub { font-size: clamp(15px, 2vw, 16.5px); line-height: 1.6; color: var(--body-dim); margin: 0 0 26px; }
.founder-block { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; align-items: center;
  padding: 18px; border: 1px solid rgba(235, 222, 208, .1); border-radius: var(--radius-lg); background: linear-gradient(150deg, rgba(54, 64, 42, .22), rgba(6, 5, 7, .1)); }
.founder-plate { border-radius: var(--radius); }
.founder-plate .plate-img { aspect-ratio: 1 / 1.15; }
.founder-plate::after { background: linear-gradient(0deg, rgba(6, 5, 7, .3), transparent 60%); }
.fd-kick { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; color: var(--fern); display: block; margin-bottom: 8px; }
.founder-copy p { font-size: 14.5px; line-height: 1.6; color: var(--body-dim); margin: 0; }
.founder-copy b { color: var(--cream); }
@media (max-width: 860px) { .proof-grid { grid-template-columns: 1fr; } .proof-plate { max-width: 480px; } }
@media (max-width: 420px) { .founder-block { grid-template-columns: 1fr; } .founder-plate { max-width: 160px; } }

/* ---------- footer legal ---------- */
.foot-legal { margin-top: 14px; display: flex; justify-content: center; gap: 10px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--body-low); }
.foot-legal a { color: var(--body-low); text-decoration: none; border-bottom: 1px solid rgba(235, 222, 208, .18); padding-bottom: 1px; }
.foot-legal a:hover { color: var(--stone); }