/* ============================================================================
   Hermoso — marketing design system  ·  v3 "Atelier"
   Warm cinematic near-black · Fraunces editorial display · coral, rationed
   Pairs a characterful serif (Fraunces — the brand's own wordmark face) with a
   clean grotesque (Hanken) — a serif/grotesque signature no rival in this space
   uses. Coral is punctuation, not paint: most of the page is warm monochrome.
   Every class/id from v2 is preserved so the markup + JS keep working.
   ========================================================================== */

/* Self-hosted fonts (latin subset, variable) — no render-blocking third-party
   request chain, and the LCP headline faces are preloaded in the HTML. */
@font-face{
  font-family:'Fraunces'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('fonts/fraunces-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Fraunces'; font-style:italic; font-weight:400 500; font-display:swap;
  src:url('fonts/fraunces-italic-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Hanken Grotesk'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('fonts/hanken-latin.woff2') format('woff2');
}
/* Metric-matched fallback for the display face (Georgia overridden to Fraunces'
   own metrics — ascent/descent measured from the font, size-adjust to match its
   width). The pre-swap headline is already the right size, so the LCP headline is
   recorded at first paint instead of at the Fraunces swap — and nothing shifts. */
@font-face{
  font-family:'Fraunces Fallback';
  src:local('Georgia');
  ascent-override:97.8%; descent-override:25.5%; line-gap-override:0%; size-adjust:107%;
}

:root{
  /* warm near-black ground (a hair of red so it reads like unbleached film) */
  --bg:        #0a0908;
  --bg-2:      #0f0d0c;
  --surface:   #151210;
  --surface-2: #1b1714;
  --surface-3: #241e1a;

  /* warm hairlines */
  --line:      rgba(255,246,238,.09);
  --line-2:    rgba(255,246,238,.16);
  --hair:      rgba(255,246,238,.055);

  /* warm ink */
  --text:   #f7f3ec;
  --muted:  #b3a99c;
  --faint:  #837a6d;

  /* coral — Hermoso "Full Bloom" (used sparingly) */
  --coral:        #ED8468;   /* bright coral, ink/accents on dark */
  --coral-solid:  #D85C42;   /* primary fill */
  --coral-deep:   #B23E29;   /* pressed / deep */
  --plum:         #6B3A52;   /* bloom center / secondary warm */
  --cream:        #FBF7F1;   /* ink on coral */
  --gold:         #ECB079;   /* warm secondary spark */

  --glow:   rgba(216,92,66,.40);
  --glow-2: rgba(107,58,82,.34);

  /* type */
  --display: 'Fraunces', 'Fraunces Fallback', Georgia, 'Times New Roman', serif;
  --body:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* shape */
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --pill: 999px;

  /* elevation */
  --el-1: 0 1px 2px rgba(0,0,0,.45);
  --el-2: 0 18px 50px -14px rgba(0,0,0,.7);
  --el-glow: 0 26px 70px -20px var(--glow);

  --maxw: 1180px;
  --t: 240ms cubic-bezier(.2,.7,.2,1);
  --t-slow: 600ms cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
/* NOTE: no global scroll-behavior:smooth — a long fragment jump (0→7000px) under
   smooth gets cancelled by lazy layout and strands the page at the top. JS handles
   in-page nav clicks with smooth scrolling + the correct sticky-nav offset instead;
   native/deep-link jumps stay instant and reliable. scroll-padding-top is the no-JS
   fallback offset. */
html{ -webkit-text-size-adjust:100%; scroll-padding-top:96px; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:none; }
:focus-visible{ outline:2px solid var(--coral); outline-offset:3px; border-radius:6px; }
.btn:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--coral-solid); color:var(--cream); padding:10px 16px; border-radius:0 0 10px 0; font-weight:600; }
.skip:focus{ left:0; }
.field-err{ display:block; color:var(--coral); font-size:.8rem; margin-top:8px; text-align:left; padding-left:8px; }
::selection{ background:rgba(216,92,66,.30); color:#fff; }

/* ── ambient grain + filmic light ────────────────────────────────────────── */
body::before{ /* fine grain */
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
body::after{ /* warm top light + vignette — replaces blobby orbs as the base atmosphere */
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% -8%, rgba(216,92,66,.10), transparent 55%),
    radial-gradient(100% 100% at 50% 120%, rgba(107,58,82,.10), transparent 60%),
    radial-gradient(140% 100% at 50% 40%, transparent 62%, rgba(0,0,0,.45));
}
.page{ position:relative; z-index:1; }

/* ── type scale ──────────────────────────────────────────────────────────── */
.display{ font-family:var(--display); font-weight:500; line-height:1.02; letter-spacing:-.022em; font-optical-sizing:auto; }
h1,h2,h3{ font-family:var(--display); font-weight:500; line-height:1.05; letter-spacing:-.022em; font-optical-sizing:auto; }
.h1{ font-size:clamp(2.7rem, 6vw, 5rem); }
.h2{ font-size:clamp(2.05rem, 4.2vw, 3.45rem); line-height:1.04; }
.h3{ font-size:clamp(1.35rem, 2vw, 1.7rem); }
.serif-i,.key{ font-family:var(--display); font-style:italic; font-weight:500; }
/* hero/headline keyword — editorial italic in coral, not a gradient cliché */
.key{ color:var(--coral); }
.coral-ink{ color:var(--coral); }
.cream-ink{ color:var(--cream); }

/* refined warm gradient — reserved for big numerals in the stat band */
.grad{
  background:linear-gradient(102deg, var(--gold), var(--coral) 46%, var(--coral-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

p{ color:var(--muted); }
.lead{ font-size:clamp(1.08rem,1.5vw,1.3rem); line-height:1.58; color:#cbc6bd; }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--body);
  font-size:.74rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--coral);
}
.eyebrow::before{ content:""; width:22px; height:1px; background:linear-gradient(90deg,transparent,var(--coral)); }
.eyebrow.center::before{ display:none; }

/* ── layout ──────────────────────────────────────────────────────────────── */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:26px; }
.section{ padding-block:clamp(76px,9.5vw,136px); position:relative; }
.section.tight{ padding-block:clamp(50px,6vw,84px); }
.center{ text-align:center; }
.mx-auto{ margin-inline:auto; }
.measure{ max-width:60ch; }
.measure-sm{ max-width:44ch; }

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight:600; font-size:.96rem; letter-spacing:-.01em;
  padding:13px 22px; border-radius:var(--pill);
  border:1px solid transparent; transition:var(--t); white-space:nowrap; isolation:isolate;
}
.btn .arr{ transition:transform var(--t); }
.btn:hover .arr{ transform:translateX(3px); }
.btn-primary{
  background:linear-gradient(180deg, #e2664a, var(--coral-deep));
  color:var(--cream);
  box-shadow:0 1px 0 rgba(255,255,255,.20) inset, 0 12px 30px -10px var(--glow);
}
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,.26) inset, 0 18px 44px -10px var(--glow); }
.btn-primary:active{ transform:translateY(0); background:var(--coral-deep); }
.btn-ghost{ background:rgba(255,246,238,.045); color:var(--text); border-color:var(--line-2); }
.btn-ghost:hover{ background:rgba(255,246,238,.09); border-color:rgba(255,246,238,.26); }
.btn-lg{ padding:16px 28px; font-size:1.02rem; }
.btn-text{ display:inline-flex; align-items:center; gap:7px; color:var(--text); font-weight:600; }
.btn-text:hover{ color:var(--coral); }
.btn-block{ width:100%; }

/* ── nav ─────────────────────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:60;
  backdrop-filter:saturate(150%) blur(16px);
  -webkit-backdrop-filter:saturate(150%) blur(16px);
  background:rgba(10,9,8,.55);
  border-bottom:1px solid transparent;
  transition:border-color var(--t), background var(--t);
}
.nav.scrolled{ border-color:var(--line); background:rgba(10,9,8,.86); }
.nav-in{ display:flex; align-items:center; justify-content:space-between; height:70px; gap:24px; }
.brand{ display:inline-flex; align-items:center; gap:11px; font-family:var(--display); font-size:1.4rem; font-weight:600; letter-spacing:-.02em; }
.brand .bloom{ width:27px; height:27px; transition:transform var(--t-slow); }
.brand:hover .bloom{ transform:rotate(135deg); }
.brand b{ font-weight:600; }
.nav-links{ display:flex; align-items:center; gap:32px; }
.nav-links a{ position:relative; font-size:.93rem; font-weight:500; color:var(--muted); transition:color var(--t); }
.nav-links a::after{ content:""; position:absolute; left:0; right:100%; bottom:-6px; height:1px; background:var(--coral); transition:right var(--t); opacity:.8; }
.nav-links a:hover{ color:var(--text); }
.nav-links a:hover::after{ right:0; }
.nav-cta{ display:flex; align-items:center; gap:10px; }
.nav-cta .btn-ghost{ background:transparent; border-color:transparent; color:var(--muted); padding-inline:14px; }
.nav-cta .btn-ghost:hover{ color:var(--text); background:rgba(255,246,238,.05); }
.nav-toggle{ display:none; }

/* ── bloom mark ──────────────────────────────────────────────────────────── */
.bloom-petals{ transform-origin:center; }
.spin-slow{ animation:spin 40s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ── glow orbs (kept for the few hero/cta accents; subtler + warmer) ─────── */
.glow{ position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; z-index:0; opacity:.5; }
.glow-coral{ background:radial-gradient(circle, rgba(224,122,95,.46), rgba(216,92,66,.18) 40%, transparent 72%); }
.glow-plum{ background:radial-gradient(circle, var(--glow-2), transparent 70%); }

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero{ position:relative; padding-top:clamp(58px,8vw,116px); padding-bottom:clamp(40px,5vw,64px); overflow:hidden; }
.hero .glow-1{ width:820px; height:820px; top:-380px; left:50%; transform:translateX(-50%); filter:blur(120px); opacity:.6; }
.hero .glow-2{ width:540px; height:540px; top:40px; right:-200px; opacity:.32; }
.hero-inner{ position:relative; z-index:2; text-align:center; }
.hero h1{ font-size:clamp(3rem, 7.4vw, 6rem); line-height:1.02; max-width:15ch; margin-inline:auto; }
.hero .lead{ margin:28px auto 0; max-width:58ch; }
.hero-form{ margin:38px auto 0; display:flex; gap:10px; max-width:486px; }
.hero-note{ margin-top:15px; font-size:.86rem; color:var(--faint); }
.hero-note b{ color:var(--muted); font-weight:600; }

.field{
  flex:1; display:flex; align-items:center;
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--pill);
  padding:4px 4px 4px 20px; transition:border-color var(--t), box-shadow var(--t);
}
.field:focus-within{ border-color:rgba(224,122,95,.6); box-shadow:0 0 0 4px rgba(216,92,66,.13); }
.field input{ flex:1; background:none; border:none; outline:none; color:var(--text); font-size:.98rem; min-width:0; }
.field input::placeholder{ color:var(--faint); }

/* ── hero marquee (showcase strip) ───────────────────────────────────────── */
.marquee{ position:relative; margin-top:clamp(48px,6vw,80px); overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{ display:flex; align-items:center; gap:18px; width:max-content; animation:scroll 60s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes scroll{ to{ transform:translateX(-50%); } }
.reel-card{
  position:relative; flex:0 0 auto; border-radius:16px; overflow:hidden;
  border:1px solid var(--line); background:var(--surface); box-shadow:var(--el-2);
}
.reel-card video, .reel-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.reel-card.v{ width:206px; aspect-ratio:9/16; }
.reel-card.s{ width:300px; aspect-ratio:1/1; }
.reel-card.w{ width:488px; aspect-ratio:16/9; }
.reel-card::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,246,238,.06); border-radius:inherit; pointer-events:none; }

/* ── trust strip ─────────────────────────────────────────────────────────── */
.trust{ border-block:1px solid var(--line); background:rgba(255,246,238,.012); }
.trust-in{ display:flex; flex-direction:column; align-items:center; justify-content:center; flex-wrap:wrap; gap:16px 38px; padding-block:32px; }
.trust-label{ font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); }
.trust-logos{ display:flex; flex-wrap:wrap; gap:12px 26px; align-items:center; justify-content:center; }
.model-chip{ display:inline-flex; align-items:center; gap:7px; padding:8px 15px; border:1px solid var(--line); border-radius:var(--pill); background:rgba(255,246,238,.02); font-weight:600; font-size:.88rem; color:var(--muted); transition:var(--t); }
.model-chip:hover{ color:var(--text); border-color:var(--line-2); }
.model-chip .dot{ color:var(--coral); margin-right:7px; }

/* ── section headers + editorial index ───────────────────────────────────── */
.sec-head{ max-width:62ch; position:relative; }
.sec-head.center{ margin-inline:auto; }
.sec-head h2{ margin-top:18px; }
.sec-head p{ margin-top:18px; }

/* ── steps (how it works) ────────────────────────────────────────────────── */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:58px; }
.step{
  position:relative; padding:32px 30px; border-radius:var(--r-lg);
  background:linear-gradient(180deg, var(--surface), var(--bg-2));
  border:1px solid var(--line); transition:var(--t); overflow:hidden;
}
.step:hover{ border-color:var(--line-2); transform:translateY(-4px); box-shadow:var(--el-2); }
.step::before{ content:""; position:absolute; inset:0 0 auto 0; height:1px; background:linear-gradient(90deg,transparent,rgba(224,122,95,.6),transparent); opacity:0; transition:opacity var(--t); }
.step:hover::before{ opacity:1; }
.step .num{ font-family:var(--display); font-style:italic; font-size:1.02rem; color:var(--coral); font-weight:500; letter-spacing:0; }
.step .ico{ width:48px; height:48px; display:grid; place-items:center; border-radius:13px; background:rgba(216,92,66,.12); border:1px solid rgba(224,122,95,.22); color:var(--coral); margin-bottom:22px; }
.step h3{ font-size:1.34rem; margin:14px 0 9px; }
.step p{ font-size:.97rem; }

/* ── bento features ──────────────────────────────────────────────────────── */
#features{ border-top:1px solid var(--hair); background:linear-gradient(180deg, transparent, rgba(255,246,238,.012)); }
.bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px; margin-top:58px; }
.tile{
  position:relative; padding:30px; border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface); border:1px solid var(--line); transition:var(--t);
  display:flex; flex-direction:column;
}
.tile:hover{ border-color:var(--line-2); background:var(--surface-2); transform:translateY(-3px); }
.tile .ico{ width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:rgba(216,92,66,.1); border:1px solid rgba(224,122,95,.2); color:var(--coral); margin-bottom:20px; }
.tile h3{ font-size:1.26rem; margin-bottom:9px; }
.tile p{ font-size:.95rem; }
.tile.col-3{ grid-column:span 3; }
.tile.col-2{ grid-column:span 2; }
.tile.col-4{ grid-column:span 4; }
.tile.feature{ background:linear-gradient(150deg, rgba(216,92,66,.14), var(--surface) 56%); border-color:rgba(224,122,95,.22); }
.tile .glow-tile{ position:absolute; width:240px; height:240px; right:-60px; bottom:-90px; opacity:.45; }
.tile .tile-media{ margin-top:22px; border-radius:13px; overflow:hidden; border:1px solid var(--line); aspect-ratio:16/10; background:var(--bg); }
.tile .tile-media video, .tile .tile-media img{ width:100%; height:100%; object-fit:cover; }
.kbd{ font-family:var(--body); font-size:.78rem; padding:3px 8px; border-radius:7px; background:var(--surface-3); border:1px solid var(--line-2); color:var(--muted); }

/* ── showcase gallery ────────────────────────────────────────────────────── */
.gallery{ columns:4; column-gap:16px; margin-top:52px; }
.shot{
  position:relative; break-inside:avoid; margin-bottom:16px; border-radius:15px; overflow:hidden;
  border:1px solid var(--line); background:var(--surface); box-shadow:var(--el-1); transition:var(--t);
}
.shot:hover{ transform:translateY(-4px); border-color:var(--line-2); box-shadow:var(--el-2); }
.shot video, .shot img{ width:100%; height:auto; display:block; }
.shot .tag{ position:absolute; left:12px; bottom:12px; z-index:2; font-size:.7rem; font-weight:600; letter-spacing:.03em; padding:5px 11px; border-radius:var(--pill); background:rgba(10,9,8,.62); backdrop-filter:blur(8px); border:1px solid var(--line-2); color:var(--text); }
.shot .play{ position:absolute; inset:0; display:grid; place-items:center; z-index:1; opacity:0; transition:opacity var(--t); background:rgba(10,9,8,.18); }
.shot:hover .play{ opacity:1; }
.shot .play span{ width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.94); color:#111; }

/* ── split / why ─────────────────────────────────────────────────────────── */
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center; }
.checklist{ list-style:none; display:grid; gap:18px; margin-top:32px; }
.checklist li{ display:flex; gap:14px; align-items:flex-start; }
.checklist .ck{ flex:0 0 auto; width:27px; height:27px; border-radius:8px; display:grid; place-items:center; background:rgba(216,92,66,.14); border:1px solid rgba(224,122,95,.26); color:var(--coral); margin-top:2px; }
.checklist b{ color:var(--text); font-weight:600; }
.checklist span{ color:var(--muted); }
.media-frame{ position:relative; border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--line-2); box-shadow:var(--el-glow); background:var(--surface); }
.media-frame video, .media-frame img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.media-frame .chrome{ display:flex; gap:6px; padding:13px 16px; border-bottom:1px solid var(--line); background:var(--surface-2); }
.media-frame .chrome i{ width:11px; height:11px; border-radius:50%; background:var(--surface-3); }

/* compare table */
.compare{ margin-top:50px; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.compare-row{ display:grid; grid-template-columns:1.4fr 1fr 1fr; align-items:center; }
.compare-row + .compare-row{ border-top:1px solid var(--line); }
.compare-row > div{ padding:18px 22px; font-size:.97rem; }
.compare-head{ background:var(--surface-2); font-weight:600; }
.compare-head .h-hermoso{ color:var(--coral); display:flex; align-items:center; gap:8px; box-shadow:inset 0 2px 0 var(--coral-solid); }
.compare-row .feat{ color:var(--muted); }
.compare .yes{ color:var(--coral); font-weight:600; }
.compare .no{ color:var(--faint); }
.compare-row .col-hermoso{ background:rgba(216,92,66,.09); box-shadow:inset 1px 0 0 rgba(224,122,95,.25), inset -1px 0 0 rgba(224,122,95,.25); }

/* ── stat band ───────────────────────────────────────────────────────────── */
.band{ border-radius:var(--r-xl); padding:clamp(42px,5vw,66px); background:linear-gradient(150deg, rgba(216,92,66,.16), rgba(107,58,82,.12) 70%, var(--surface)); border:1px solid rgba(224,122,95,.2); position:relative; overflow:hidden; }
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; text-align:center; }
.stat .n{ font-family:var(--display); font-size:clamp(2.4rem,3.6vw,3.3rem); font-weight:500; color:var(--text); line-height:1; }
.stat .n .grad{ font-family:inherit; font-style:italic; }
.stat .l{ margin-top:12px; font-size:.92rem; color:var(--muted); }

/* ── pricing ─────────────────────────────────────────────────────────────── */
.plans{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:58px; align-items:stretch; }
.plan{
  display:flex; flex-direction:column; padding:32px 30px; border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--line); transition:var(--t); position:relative;
}
.plan:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.plan.pop{ background:linear-gradient(180deg, rgba(216,92,66,.11), var(--surface) 42%); border-color:rgba(224,122,95,.42); box-shadow:var(--el-glow); transform:scale(1.02); }
.plan.pop:hover{ transform:scale(1.02) translateY(-3px); }
.plan .ribbon{ position:absolute; top:-12px; left:50%; transform:translateX(-50%); font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:5px 14px; border-radius:var(--pill); background:linear-gradient(180deg,#e76a4e,var(--coral-solid)); color:var(--cream); white-space:nowrap; box-shadow:0 8px 22px -8px var(--glow); }
.plan .pname{ font-family:var(--display); font-size:1.55rem; font-weight:600; }
.plan .pdesc{ font-size:.92rem; color:var(--muted); margin-top:6px; min-height:42px; }
.plan .price{ display:flex; align-items:baseline; gap:6px; margin:22px 0 4px; }
.plan .price .amt{ font-family:var(--display); font-size:3.1rem; font-weight:500; line-height:1; }
.plan .price .per{ color:var(--faint); font-size:.92rem; }
.plan .price-note{ font-size:.84rem; color:var(--faint); min-height:20px; }
.plan ul{ list-style:none; display:grid; gap:13px; margin:26px 0 28px; }
.plan li{ display:flex; gap:11px; align-items:flex-start; font-size:.95rem; color:var(--muted); }
.plan li .ck{ flex:0 0 auto; color:var(--coral); margin-top:3px; }
.plan li b{ color:var(--text); font-weight:600; }
.plan .btn{ margin-top:auto; }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq{ max-width:800px; margin:50px auto 0; border-top:1px solid var(--line); }
.qa{ border-bottom:1px solid var(--line); }
.qa-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:26px 4px; text-align:left; font-family:var(--display); font-size:1.2rem; font-weight:500; color:var(--text); transition:color var(--t); }
.qa-q:hover{ color:var(--coral); }
.qa-q .pm{ flex:0 0 auto; width:24px; height:24px; position:relative; }
.qa-q .pm::before,.qa-q .pm::after{ content:""; position:absolute; background:var(--coral); border-radius:2px; transition:var(--t); }
.qa-q .pm::before{ top:11px; left:3px; width:18px; height:2px; }
.qa-q .pm::after{ left:11px; top:3px; width:2px; height:18px; }
.qa.open .pm::after{ transform:scaleY(0); }
.qa-a{ max-height:0; overflow:hidden; transition:max-height 360ms cubic-bezier(.2,.7,.2,1); }
.qa-a-in{ padding:0 4px 26px; color:var(--muted); font-size:1rem; max-width:66ch; }

/* ── final CTA ───────────────────────────────────────────────────────────── */
.cta-band{ position:relative; overflow:hidden; border-radius:var(--r-xl); padding:clamp(50px,7vw,92px) 32px; text-align:center; background:linear-gradient(160deg, rgba(216,92,66,.2), rgba(107,58,82,.16) 60%, var(--surface)); border:1px solid rgba(224,122,95,.24); }
.cta-band h2{ max-width:18ch; margin-inline:auto; }
.cta-band .glow-c{ width:580px; height:580px; left:50%; top:24%; transform:translateX(-50%); opacity:.5; }

/* ── footer ──────────────────────────────────────────────────────────────── */
.footer{ border-top:1px solid var(--line); padding-block:66px 40px; margin-top:clamp(60px,8vw,110px); position:relative; }
.foot-grid{ display:grid; grid-template-columns:1.6fr repeat(4, 1fr); gap:40px; }
.foot-brand .brand{ margin-bottom:16px; }
.foot-brand p{ font-size:.92rem; max-width:30ch; }
.foot-col h3{ font-family:var(--body); font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); font-weight:700; margin-bottom:16px; }
.foot-col a{ display:block; color:var(--muted); font-size:.94rem; padding:5px 0; transition:color var(--t); }
.foot-col a:hover{ color:var(--text); }
.foot-bottom{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-top:56px; padding-top:28px; border-top:1px solid var(--line); }
.foot-bottom .meta{ font-size:.86rem; color:var(--faint); }
.lang{ display:inline-flex; align-items:center; gap:8px; font-size:.88rem; color:var(--muted); border:1px solid var(--line-2); border-radius:var(--pill); padding:7px 14px; }
.social{ display:flex; gap:10px; }
.social a{ width:36px; height:36px; display:grid; place-items:center; border-radius:10px; border:1px solid var(--line); color:var(--muted); transition:var(--t); }
.social a:hover{ color:var(--text); border-color:var(--line-2); background:var(--surface); }

/* ── prose (legal / manifesto) ───────────────────────────────────────────── */
.prose{ max-width:720px; margin-inline:auto; }
.prose .eyebrow{ margin-bottom:18px; }
.prose h1{ font-size:clamp(2.4rem,5vw,3.6rem); margin-bottom:14px; }
.prose .updated{ color:var(--faint); font-size:.9rem; margin-bottom:8px; }
.prose h2{ font-size:1.55rem; margin:44px 0 14px; }
.prose h3{ font-size:1.18rem; margin:28px 0 10px; }
.prose p{ margin-bottom:16px; line-height:1.74; }
.prose ul,.prose ol{ margin:0 0 18px 22px; color:var(--muted); display:grid; gap:9px; }
.prose a{ color:var(--coral); text-decoration:underline; text-underline-offset:3px; }
.prose .callout{ border:1px solid var(--line); background:var(--surface); border-radius:var(--r); padding:20px 24px; margin:24px 0; font-size:.95rem; color:var(--muted); }
.prose .callout b{ color:var(--text); }
.prose .big-quote{ font-family:var(--display); font-size:clamp(1.65rem,3vw,2.3rem); line-height:1.3; font-weight:500; color:var(--text); margin:38px 0; }

/* waitlist confirmation */
.waitlist-done{ width:100%; text-align:center; padding:15px 22px; border-radius:var(--pill); background:rgba(216,92,66,.12); border:1px solid rgba(224,122,95,.3); color:var(--coral); font-weight:600; font-size:.96rem; }

/* inner page hero (legal / manifesto / pricing) */
.page-hero{ position:relative; padding-top:clamp(62px,8vw,108px); padding-bottom:clamp(24px,3vw,40px); overflow:hidden; }
.page-hero .glow{ width:560px; height:560px; top:-300px; left:50%; transform:translateX(-50%); opacity:.4; }
.page-hero-in{ position:relative; z-index:2; }

/* credits table (pricing) */
.credits{ margin-top:18px; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.credits-row{ display:grid; grid-template-columns:1.5fr 1fr 1fr; align-items:center; }
.credits-row + .credits-row{ border-top:1px solid var(--line); }
.credits-row > div{ padding:16px 22px; font-size:.96rem; }
.credits-head{ background:var(--surface-2); font-weight:600; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.credits-row .feat{ color:var(--text); font-weight:500; }
.credits-row .val{ color:var(--muted); }
.credits-row .val b{ color:var(--coral); font-weight:600; }
@media (max-width:640px){ .credits-row{ grid-template-columns:1.4fr .8fr .8fr; } .credits-row > div{ padding:13px 14px; font-size:.86rem; } }

/* ── reveal motion ───────────────────────────────────────────────────────── */
/* below-the-fold: JS IntersectionObserver toggles .in as sections scroll in */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }

/* The hero entrance is CSS-only (no JS dependency) and transform-ONLY (opacity
   stays 1). The LCP headline (h1) itself does NOT animate — a CSS animation on the
   LCP element makes Chrome defer the LCP timestamp until the element settles, so
   the h1 is painted in its final position at first frame while the supporting
   eyebrow / lead / form / marquee slide in around it. */
.hero .reveal{ opacity:1; animation:riseIn .8s cubic-bezier(.2,.7,.2,1) both; }
.hero h1.reveal{ animation:none; transform:none; }
.hero .reveal.d2{ animation-delay:.10s; }
.hero .reveal.d3{ animation-delay:.18s; }
.hero .reveal.d4{ animation-delay:.28s; }
@keyframes riseIn{ from{ transform:translateY(20px); } to{ transform:none; } }

@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero .reveal{ animation:none; }
  .marquee-track,.spin-slow{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* the mobile nav drawer is hidden on desktop; only revealed at ≤860px when .open */
.mobile-menu{ display:none; }

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width:980px){
  .steps{ grid-template-columns:1fr; }
  .bento{ grid-template-columns:repeat(2,1fr); }
  .tile.col-3,.tile.col-4,.tile.col-2{ grid-column:span 2; }
  .split{ grid-template-columns:1fr; gap:36px; }
  .plans{ grid-template-columns:repeat(2,1fr); max-width:760px; margin-inline:auto; }
  .plan.pop{ transform:none; }
  .plan.pop:hover{ transform:translateY(-3px); }
  .stats{ grid-template-columns:repeat(2,1fr); gap:26px; }
  .gallery{ columns:2; }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:32px; }
  .foot-brand{ grid-column:span 2; }
  .compare-row{ grid-template-columns:1.2fr .8fr .8fr; }
  .compare-row > div{ padding:14px 14px; font-size:.9rem; }
}

/* tablet / small — switch to the mobile drawer below 860px so the cramped
   in-line nav never appears */
@media (max-width:860px){
  .nav-links, .nav-cta{ display:none; }
  .nav-toggle{ display:grid; place-items:center; width:44px; height:44px; border-radius:12px; border:1px solid var(--line-2); transition:var(--t); }
  .nav-toggle:hover{ border-color:rgba(255,246,238,.26); }
  .nav-toggle span{ width:18px; height:2px; background:var(--text); position:relative; display:block; transition:var(--t); }
  .nav-toggle span::before,.nav-toggle span::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:var(--text); transition:transform var(--t), top var(--t); }
  .nav-toggle span::before{ top:-6px; } .nav-toggle span::after{ top:6px; }
  /* animated close (X) when open */
  .nav-toggle.open span{ background:transparent; }
  .nav-toggle.open span::before{ top:0; transform:rotate(45deg); }
  .nav-toggle.open span::after{ top:0; transform:rotate(-45deg); }

  /* opaque full drawer — no bleed-through, with sign in + sign up.
     Height is explicit (not a bottom inset): the nav's backdrop-filter makes it
     the containing block for this fixed child, so an inset bottom would collapse
     the drawer to zero height. top + height sidesteps that and fills the screen. */
  .mobile-menu{
    position:fixed; top:70px; left:0; right:0; z-index:58; display:none;
    height:calc(100vh - 70px); height:calc(100dvh - 70px);
    flex-direction:column; gap:2px;
    background:linear-gradient(180deg, #100d0c, #090807);  /* fully opaque — no bleed-through */
    border-top:1px solid var(--line);
    padding:22px 26px calc(26px + env(safe-area-inset-bottom,0px));
    overflow-y:auto; overscroll-behavior:contain;
    animation:menuIn .28s cubic-bezier(.2,.7,.2,1);
  }
  .mobile-menu.open{ display:flex; }
  @keyframes menuIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
  .mobile-menu a{ display:flex; align-items:center; justify-content:space-between; padding:17px 2px; font-size:1.22rem; font-family:var(--display); color:var(--text); border-bottom:1px solid var(--hair); transition:color var(--t); }
  .mobile-menu a:hover,.mobile-menu a:active{ color:var(--coral); }
  .mobile-menu .m-actions{ display:grid; gap:10px; margin-top:24px; }
  .mobile-menu .btn{ width:100%; padding:15px; font-size:1rem; border-bottom:0; }
  .mobile-menu .btn.btn-ghost{ font-family:var(--body); }
  /* when the drawer is open, lock the page behind it */
  body.menu-open{ overflow:hidden; }
}

@media (max-width:640px){
  body{ font-size:16px; }
  .hero-form{ flex-direction:column; }
  .hero-form .btn{ width:100%; }
  .bento{ grid-template-columns:1fr; }
  .tile.col-3,.tile.col-4,.tile.col-2{ grid-column:span 1; }
  .gallery{ columns:1; }
  .stats{ grid-template-columns:1fr 1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .compare-row{ grid-template-columns:1.3fr .7fr .7fr; }
  .plans{ grid-template-columns:1fr; max-width:440px; }
  .band,.cta-band{ padding:36px 22px; }

  /* mobile display type — stop big headings from overflowing the viewport */
  h1,h2,h3{ text-wrap:balance; }
  h1,h2,h3,.h1,.h2{ overflow-wrap:break-word; }
  .hero h1{ font-size:clamp(2.15rem,8.4vw,3.2rem); max-width:none; letter-spacing:-.02em; }
  .hero .lead{ font-size:1.04rem; }
  .hero-note{ font-size:.82rem; }
  .h1{ font-size:clamp(2rem,8vw,3rem); max-width:none; }
  .h2{ font-size:clamp(1.78rem,7vw,2.35rem); }
  .prose h1{ font-size:clamp(2rem,8vw,2.8rem); }
  .prose .big-quote{ font-size:1.48rem; }
  .eyebrow{ font-size:.62rem; letter-spacing:.14em; flex-wrap:wrap; justify-content:center; row-gap:2px; }
  .sec-head{ margin-bottom:6px; }
  .section{ padding-block:clamp(60px,12vw,88px); }
}

/* anchor jumps clear the sticky nav and keep the section title in view */
:where(section,[id]){ scroll-margin-top:96px; }
/* the hero is the very top — land flush so the headline is never cut off */
#top{ scroll-margin-top:0; }