@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=JetBrains+Mono:wght@400;500;700&display=swap");

/* ==========================================================================
   S8 DEAL FLOW — SHARED DESIGN SYSTEM
   Palette sourced from the live s8dealfinder.com compiled CSS (dark tokens).
   Institutional dark navy base + one confident blue + one lime signal.
   Mobile-first: base styles are the 390px phone layout. min-width queries up.
   ALL shared styling lives in this file. Pages add zero <style> blocks except
   page-unique one-offs, and even those should be rare.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* --- surfaces (deep navy-black, warm-free, institutional) --- */
  --c-bg:            #070B12;
  --c-bg-2:          #0A1020;
  --c-surface:       #0C1424;
  --c-surface-2:     #111C31;
  --c-elevated:      #16233B;
  --c-line:          #1E2C42;
  --c-line-soft:     rgba(255, 255, 255, .08);
  --c-line-strong:   rgba(255, 255, 255, .22);

  /* --- text --- */
  --c-text:          #EEF3FA;
  --c-text-2:        #9FB0C5;
  --c-text-3:        #7C8FA8;   /* >=5.1:1 on every surface token, incl. --c-surface-2 */
  --c-text-invert:   #070B12;

  /* --- brand --- */
  --c-blue:          #5B96F0;
  --c-blue-deep:     #2A63BC;
  --c-blue-dim:      rgba(91, 150, 240, .14);
  --c-lime:          #8FE24A;   /* live / signal accent */
  --c-lime-dim:      rgba(143, 226, 74, .12);
  --c-green:         #34D399;   /* positive data (cashflow, confirmed) */
  --c-gold:          #E8B85F;   /* scarcity / session / warm signal */
  --c-gold-dim:      rgba(232, 184, 95, .12);
  --c-danger:        #FF7A73;

  /* --- functional --- */
  --c-accent:        var(--c-blue);        /* primary CTA colour */
  --c-signal:        var(--c-lime);        /* urgency + live markers */
  --c-focus:         #A9CBFF;

  /* --- gradients / effects --- */
  /* Darkened so white 700-weight label clears 4.5:1 across the whole glyph band
     (36%-64% of button height). Do NOT lighten these stops. */
  --g-cta:           linear-gradient(180deg, #4E8BE8 0%, #2F6DC9 42%, #1F4E99 100%);
  --g-cta-hover:     linear-gradient(180deg, #4589E5 0%, #2963BE 42%, #1A448A 100%);
  --g-page:          radial-gradient(120% 70% at 50% -10%, #14243F 0%, rgba(20,36,63,0) 62%),
                     radial-gradient(90% 55% at 100% 8%, rgba(91,150,240,.10) 0%, rgba(91,150,240,0) 60%),
                     linear-gradient(180deg, #070B12 0%, #060911 100%);
  --g-hairline:      linear-gradient(90deg, rgba(91,150,240,0) 0%, rgba(91,150,240,.55) 50%, rgba(91,150,240,0) 100%);

  /* --- typography --- */
  --f-display:       "Fraunces", Georgia, "Times New Roman", serif;
  --f-sans:          "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --f-mono:          "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-h1:            clamp(2.05rem, 8.6vw, 3.4rem);
  --t-h2:            clamp(1.5rem, 6.2vw, 2.35rem);
  --t-h3:            clamp(1.12rem, 4.4vw, 1.45rem);
  --t-lede:          clamp(1.0rem, 3.7vw, 1.18rem);
  --t-body:          clamp(.94rem, 3.3vw, 1.02rem);
  --t-small:         clamp(.82rem, 2.9vw, .9rem);
  --t-micro:         clamp(.7rem, 2.5vw, .78rem);
  --t-eyebrow:       clamp(.66rem, 2.4vw, .74rem);
  --t-stat:          clamp(1.35rem, 6vw, 1.9rem);

  --lh-tight:        1.04;
  --lh-snug:         1.22;
  --lh-body:         1.62;
  --ls-eyebrow:      .16em;
  --ls-btn:          .06em;

  /* --- spacing scale --- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  56px;
  --s-10: 72px;
  --s-11: 96px;
  --gutter:      clamp(16px, 5vw, 28px);
  --section-y:   clamp(40px, 11vw, 88px);
  --stack:       clamp(14px, 4vw, 20px);

  /* --- radii --- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* --- shadows --- */
  --sh-sm:   0 1px 2px rgba(0,0,0,.4);
  --sh-md:   0 8px 24px rgba(0,0,0,.45);
  --sh-lg:   0 22px 60px rgba(0,0,0,.55);
  --sh-cta:  inset 0 1px 0 rgba(255,255,255,.32), 0 5px 0 #1B4585, 0 14px 28px rgba(42,99,188,.34);
  --sh-cta-active: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 0 #1B4585, 0 4px 10px rgba(42,99,188,.3);
  --sh-ring: 0 0 0 1px var(--c-line), inset 0 0 60px rgba(91,150,240,.05);

  /* --- easing / motion --- */
  --e-out:   cubic-bezier(.22, 1, .36, 1);
  --e-inout: cubic-bezier(.65, 0, .35, 1);
  --d-fast:  140ms;
  --d-med:   260ms;
  --d-slow:  620ms;

  /* --- containers --- */
  --w-narrow: 560px;   /* funnel reading column — lander/bridge/apply/thank-you */
  --w-mid:    760px;   /* wider prose + form pages */
  --w-wide:   1100px;  /* deck + grids */

  /* --- fixed furniture --- */
  --sticky-h:      68px;
  --sticky-bottom: max(10px, env(safe-area-inset-bottom, 0px));
  --header-h:      48px;
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; scroll-padding-bottom: 140px; }

body {
  margin: 0;
  min-height: 100%;
  background: var(--c-bg);
  background-image: var(--g-page);
  background-attachment: fixed;
  color: var(--c-text);
  font-family: var(--f-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

/* Pages that mount .stickycta MUST also carry class="has-sticky" on <body>. */
body.has-sticky {
  padding-bottom: calc(var(--sticky-bottom) + var(--sticky-h) + var(--s-4));
}

img, video, svg, iframe { max-width: 100%; display: block; }
img, video { height: auto; }

a { color: var(--c-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

hr { border: 0; height: 1px; background: var(--c-line); margin: var(--s-7) 0; }

::selection { background: var(--c-blue); color: #fff; }

/* Global focus ring — every interactive element, no exceptions. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
:where(a, button, input, select, textarea):focus:not(:focus-visible) { outline: none; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--c-blue); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. LAYOUT — .container / .section / .divider
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--w-narrow);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--mid  { max-width: var(--w-mid); }
.container--wide { max-width: var(--w-wide); }
.container--flush { padding-inline: 0; }

.section {
  padding-block: var(--section-y);
  position: relative;
  scroll-margin-bottom: calc(var(--sticky-bottom) + var(--sticky-h) + 16px);
  scroll-margin-top: 16px;
}
.section--tight  { padding-block: clamp(26px, 7vw, 48px); }
.section--flush-top { padding-top: 0; }
.section--hero   { padding-top: clamp(24px, 7vw, 56px); padding-bottom: clamp(30px, 8vw, 60px); }
.section--panel  { background: linear-gradient(180deg, rgba(12,20,36,.85), rgba(7,11,18,.85)); border-block: 1px solid var(--c-line); }
.section--accent { background:
    radial-gradient(90% 60% at 50% 0%, rgba(91,150,240,.10), rgba(91,150,240,0) 70%),
    linear-gradient(180deg, rgba(12,20,36,.9), rgba(7,11,18,.9));
  border-block: 1px solid var(--c-line);
}

/* vertical rhythm helper: direct children get consistent gaps */
.stack > * + * { margin-top: var(--stack); }
.stack-sm > * + * { margin-top: var(--s-2); }
.stack-lg > * + * { margin-top: var(--s-6); }

.divider { height: 1px; border: 0; background: var(--c-line); margin-block: var(--s-7); }
.divider--glow { height: 1px; background: var(--g-hairline); }
.divider--dashed { height: 0; border-top: 1px dashed var(--c-line-strong); background: none; }

.center { text-align: center; }
.mono { font-family: var(--f-mono); }
.nowrap { white-space: nowrap; }

/* --------------------------------------------------------------------------
   4. TYPE — .eyebrow .h1 .h2 .h3 .lede .body .microcopy
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--f-mono);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-2);
  margin-bottom: var(--s-3);
}
.eyebrow--live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-lime); box-shadow: 0 0 0 3px var(--c-lime-dim);
  animation: s8-pulse 2.4s var(--e-inout) infinite;
}
.eyebrow--gold { color: var(--c-gold); }
.eyebrow--blue { color: var(--c-blue); }

@keyframes s8-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.h1 {
  font-family: var(--f-display);
  font-optical-sizing: auto;
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: -.022em;
  font-weight: 600;
  color: var(--c-text);
  text-wrap: balance;
}
.h2 {
  font-family: var(--f-display);
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: -.018em;
  font-weight: 600;
  color: var(--c-text);
  text-wrap: balance;
}
.h3 {
  font-family: var(--f-sans);
  font-size: var(--t-h3);
  line-height: 1.3;
  letter-spacing: -.01em;
  font-weight: 700;
  color: var(--c-text);
}
/* emphasis inside a display headline */
.h1 em, .h2 em { font-style: italic; color: var(--c-blue); }
.h1 .hl, .h2 .hl { color: var(--c-lime); font-style: normal; }

.lede {
  font-size: var(--t-lede);
  line-height: 1.52;
  color: var(--c-text-2);
  text-wrap: pretty;
}
.lede strong { color: var(--c-text); font-weight: 600; }

.body { font-size: var(--t-body); line-height: var(--lh-body); color: var(--c-text-2); text-wrap: pretty; }
.body strong { color: var(--c-text); font-weight: 600; }
.body + .body { margin-top: var(--s-4); }

.microcopy {
  font-size: var(--t-micro);
  line-height: 1.5;
  color: var(--c-text-3);
  overflow-wrap: anywhere;
}
.microcopy--center { text-align: center; }
.microcopy a { color: var(--c-text-2); text-decoration: underline; text-underline-offset: 2px; }

/* --------------------------------------------------------------------------
   5. BUTTONS — .btn (.btn--primary .btn--secondary .btn--ghost)
   -------------------------------------------------------------------------- */
.btn {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  width: 100%;
  min-height: 56px;
  padding: 14px 20px;
  border: 0; border-radius: var(--r-sm);
  font-family: var(--f-sans);
  font-size: clamp(.94rem, 3.2vw, 1.02rem);
  font-weight: 700;
  letter-spacing: var(--ls-btn);
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out),
              background var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
}
.btn:hover { text-decoration: none; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; }
.btn--inline { width: auto; }

.btn--primary {
  background: var(--g-cta);
  color: #fff;
  box-shadow: var(--sh-cta);
}
.btn--primary:hover { background: var(--g-cta-hover); transform: translateY(-1px); }
.btn--primary:active { transform: translateY(4px); box-shadow: var(--sh-cta-active); }

.btn--secondary {
  background: var(--c-surface-2);
  color: var(--c-text);
  border: 1px solid var(--c-line);
  box-shadow: var(--sh-sm);
}
.btn--secondary:hover { background: var(--c-elevated); border-color: var(--c-line-strong); transform: translateY(-1px); }
.btn--secondary:active { transform: translateY(1px); }

.btn--ghost {
  background: transparent;
  color: var(--c-text-2);
  border: 1px solid transparent;
  min-height: 44px;
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.btn--ghost:hover { color: var(--c-text); }

.btn--sm { min-height: 44px; padding: 10px 16px; font-size: var(--t-small); }
.btn--lime { background: linear-gradient(180deg,#A6ED67,#7CD238 45%,#5FB020); color: #08130A;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 5px 0 #3E7615, 0 14px 28px rgba(143,226,74,.24); }
.btn--lime:active { transform: translateY(4px); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 #3E7615; }

/* Button subline convention: put <p class="microcopy microcopy--center btn-sub"> after any .btn */
.btn-sub { margin-top: var(--s-3); }

/* --------------------------------------------------------------------------
   6. BADGE / PILL
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-text-2);
  white-space: nowrap;
}
.badge--live   { border-color: rgba(143,226,74,.4); background: var(--c-lime-dim); color: var(--c-lime); }
.badge--gold   { border-color: rgba(232,184,95,.4); background: var(--c-gold-dim); color: var(--c-gold); }
.badge--blue   { border-color: rgba(91,150,240,.4); background: var(--c-blue-dim); color: var(--c-blue); }
.badge--green  { border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.12); color: var(--c-green); }
.badge--dot::before { content:""; width:6px; height:6px; border-radius:50%; background: currentColor; }

/* --------------------------------------------------------------------------
   7. CARD / PANEL
   -------------------------------------------------------------------------- */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: clamp(16px, 4.5vw, 24px);
  box-shadow: var(--sh-md);
}
.card--flat { box-shadow: none; }
.card--accent { border-top: 3px solid var(--c-blue); }
.card--lime   { border-top: 3px solid var(--c-lime); }
.card__title { font-family: var(--f-sans); font-weight: 700; font-size: var(--t-h3); margin-bottom: var(--s-2); color: var(--c-text); }
.card__body  { font-size: var(--t-small); color: var(--c-text-2); line-height: 1.55; }

/* The signature offer container: dashed frame + hatch texture. Use once per page max. */
.panel {
  position: relative;
  border: 2px dashed var(--c-line-strong);
  border-radius: var(--r-lg);
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M-1 1 l2 -2 M0 8 l8 -8 M7 9 l2 -2' stroke='rgba(255,255,255,0.04)' stroke-width='1'/></svg>") repeat,
    linear-gradient(180deg, rgba(17,28,49,.92), rgba(10,16,32,.92));
  padding: clamp(18px, 5vw, 30px) clamp(15px, 4.5vw, 26px);
  box-shadow: var(--sh-ring), var(--sh-lg);
}
.panel--solid { border-style: solid; border-width: 1px; border-color: var(--c-line); }
.panel__label {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  background: var(--c-bg-2); padding: 4px 12px; border: 1px solid var(--c-line); border-radius: var(--r-pill);
  font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-2);
  white-space: nowrap;
}

/* generic responsive grid for cards */
.grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 620px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 620px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------------------
   8. PROOF BAR — 6 stats. 2-up @390 · 3-up @620 · 6-up @980
   REQUIRED: identical numbers on lander, bridge and deck.
   -------------------------------------------------------------------------- */
.proofbar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  list-style: none;
}
.proofbar__item {
  background: var(--c-surface);
  padding: clamp(12px, 3.6vw, 18px) clamp(8px, 2.6vw, 14px);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 92px;
}
.proofbar__num {
  font-family: var(--f-mono);
  font-size: var(--t-stat);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--c-lime);
  font-variant-numeric: tabular-nums;
}
.proofbar__label {
  font-size: clamp(.66rem, 2.4vw, .74rem);
  line-height: 1.3;
  color: var(--c-text-3);
  letter-spacing: .01em;
  text-wrap: balance;
}
@media (min-width: 620px) { .proofbar { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .proofbar { grid-template-columns: repeat(6, 1fr); } }

/* --------------------------------------------------------------------------
   9. COUNTDOWN — 4 cells, always 4-up
   -------------------------------------------------------------------------- */
.countdown { display: grid; gap: var(--s-3); }
.countdown__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(6px, 2vw, 10px); }
.countdown__cell {
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  padding: clamp(9px, 2.8vw, 14px) 4px;
  text-align: center;
}
.countdown__num {
  display: block;
  font-family: var(--f-mono);
  font-size: clamp(1.5rem, 7.4vw, 2.2rem);
  font-weight: 700;
  line-height: 1;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}
.countdown__unit {
  display: block; margin-top: 5px;
  font-family: var(--f-mono);
  font-size: clamp(.6rem, 2.2vw, .68rem);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-text-3);
}
.countdown__when {
  font-family: var(--f-mono);
  font-size: var(--t-small);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-gold);
  text-align: center;
}
.countdown--expired .countdown__num { color: var(--c-text-3); }

/* --------------------------------------------------------------------------
   10. LIST-CHECK — bullet list with a lime tick
   -------------------------------------------------------------------------- */
.list-check { display: grid; gap: var(--s-3); }
.list-check > li {
  position: relative;
  padding-left: 30px;
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--c-text-2);
  text-wrap: pretty;
}
.list-check > li::before {
  content: "";
  position: absolute; left: 0; top: .18em;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--c-lime-dim);
  border: 1px solid rgba(143,226,74,.42);
}
.list-check > li::after {
  content: "";
  position: absolute; left: 6px; top: .46em;
  width: 4px; height: 8px;
  border: solid var(--c-lime);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
.list-check > li strong { color: var(--c-text); font-weight: 600; }
.list-check--tight { gap: var(--s-2); }

/* numbered steps (thank-you "what happens next") */
.list-steps { display: grid; gap: var(--s-5); counter-reset: s8step; }
.list-steps > li { position: relative; padding-left: 44px; counter-increment: s8step; }
.list-steps > li::before {
  content: counter(s8step);
  position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-blue-dim); border: 1px solid rgba(91,150,240,.42);
  font-family: var(--f-mono); font-size: .82rem; font-weight: 700; color: var(--c-blue);
}
.list-steps__title { font-weight: 700; color: var(--c-text); display: block; margin-bottom: 3px; }

/* --------------------------------------------------------------------------
   11. FORM — .form .field .input .form__error
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--s-4); }
/* The HTML `hidden` attribute only sets `display: none` from the UA stylesheet,
   so ANY author `display` rule silently beats it — `.field { display: grid }`
   below is exactly that case, and it left prefilled-and-hidden fields on screen.
   This guard must stay ahead of every component that sets `display`. */
[hidden] { display: none !important; }

.field { display: grid; gap: 6px; }
.field__label {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-text-2);
}
.field__hint { font-size: var(--t-micro); color: var(--c-text-3); }

.input, select.input, textarea.input {
  -webkit-appearance: none; appearance: none;
  width: 100%;
  min-height: 54px;
  padding: 14px 16px;
  background: #0A1120;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  color: var(--c-text);
  font-family: var(--f-sans);
  font-size: 16px;              /* 16px min — stops iOS zoom-on-focus */
  line-height: 1.35;
  transition: border-color var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out);
}
.input::placeholder { color: var(--c-text-3); }
.input:hover { border-color: var(--c-line-strong); }
.input:focus { border-color: var(--c-blue); box-shadow: 0 0 0 3px var(--c-blue-dim); background: #0C1424; outline: none; }
.input:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
textarea.input { min-height: 120px; resize: vertical; padding-top: 12px; }
select.input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%239FB0C5' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px;
}
.input[aria-invalid="true"] { border-color: var(--c-danger); box-shadow: 0 0 0 3px rgba(255,122,115,.14); }

.field__error, .form__error {
  font-size: var(--t-micro);
  color: var(--c-danger);
  line-height: 1.4;
  min-height: 0;
}
.form__error[hidden], .field__error[hidden] { display: none; }
.form__error {
  padding: 10px 12px;
  border: 1px solid rgba(255,122,115,.35);
  background: rgba(255,122,115,.09);
  border-radius: var(--r-sm);
}

/* radio / checkbox groups */
.choices { display: grid; gap: var(--s-2); }
.choice {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: #0A1120;
  cursor: pointer;
  font-size: var(--t-small);
  line-height: 1.4;
  transition: border-color var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out);
}
.choice:hover { border-color: var(--c-line-strong); }
.choice input { margin: 2px 0 0; accent-color: var(--c-blue); width: 18px; height: 18px; flex: 0 0 auto; }
.choice:has(input:checked) { border-color: var(--c-blue); background: var(--c-blue-dim); }
.choice:has(input:focus-visible) { outline: 2px solid var(--c-focus); outline-offset: 2px; }

/* honeypot — must stay in the DOM, must never be visible */
.hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

.form__submitting { position: relative; }
.btn.is-loading::after {
  content: ""; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: s8-spin .7s linear infinite;
}
@keyframes s8-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   12. VIDEOFRAME — 16:9 slot, poster + play affordance, swappable embed
   -------------------------------------------------------------------------- */
.videoframe {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #05080F center/cover no-repeat;
  border: 1px solid var(--c-line);
  box-shadow: var(--sh-lg);
  isolation: isolate;
}
.videoframe > iframe,
.videoframe > video,
.videoframe > img.videoframe__poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  object-fit: cover;
}
.videoframe__poster { z-index: 1; }
.videoframe__scrim {
  position: absolute; inset: 0; z-index: 2;
  background: radial-gradient(60% 60% at 50% 45%, rgba(7,11,18,.15), rgba(7,11,18,.72));
  pointer-events: none;
}
.videoframe__play {
  position: absolute; z-index: 3; inset: 0; margin: auto;
  width: 68px; height: 68px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--g-cta);
  border: 0; cursor: pointer;
  box-shadow: 0 10px 30px rgba(42,99,188,.45), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform var(--d-fast) var(--e-out);
}
.videoframe__play::before {
  content: ""; width: 0; height: 0; margin-left: 5px;
  border-left: 17px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent;
}
.videoframe__play:hover { transform: scale(1.06); }
.videoframe__caption {
  position: absolute; z-index: 3; left: 12px; bottom: 12px;
  font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-text-2); background: rgba(7,11,18,.72); border: 1px solid var(--c-line);
  padding: 4px 9px; border-radius: var(--r-pill);
}
/* the un-supplied state: an obvious placeholder, never a fake video */
.videoframe--placeholder {
  display: grid; place-items: center;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><path d='M-1 1 l2 -2 M0 10 l10 -10 M9 11 l2 -2' stroke='rgba(255,255,255,0.05)' stroke-width='1.2'/></svg>") repeat,
    linear-gradient(180deg, #0C1424, #070B12);
  border-style: dashed; border-width: 2px; border-color: var(--c-line-strong);
}
/* The note is build-time scaffolding: it exists ONLY for the placeholder state.
   Hidden by default so a filled embed URL can never leak the raw URL on screen. */
.videoframe__note { display: none; }
.videoframe--placeholder .videoframe__note {
  display: block;
  font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-text-3); text-align: center; padding: 0 var(--s-5);
}
.videoframe.is-playing .videoframe__poster,
.videoframe.is-playing .videoframe__play,
.videoframe.is-playing .videoframe__scrim { display: none; }

/* Buffering. These files are 25-55MB; on a phone on cell data the gap between
   the tap and the first frame is real. A dead black rectangle reads as broken. */
.videoframe.is-loading::after {
  content: "";
  position: absolute; z-index: 4;
  top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border: 3px solid rgba(255,255,255,.22);
  border-top-color: var(--c-accent);
  border-radius: 50%;
  animation: s8spin 780ms linear infinite;
}
@keyframes s8spin { to { transform: rotate(360deg); } }

.videoframe.is-error::after {
  content: "This video failed to load. Refresh and try again.";
  position: absolute; inset: auto var(--s-4) var(--s-6) var(--s-4); z-index: 4;
  font-family: var(--f-mono); font-size: var(--t-micro); text-align: center;
  color: var(--c-danger);
}

/* Shown only when the browser refused sound. Sits above the native controls,
   never over them. */
.videoframe__unmute {
  position: absolute; z-index: 5;
  left: 50%; top: var(--s-4); transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  font-family: var(--f-sans); font-size: var(--t-small); font-weight: 600;
  letter-spacing: var(--ls-btn);
  color: var(--c-text-invert); background: var(--c-signal);
  border: 0; border-radius: var(--r-pill); cursor: pointer;
  box-shadow: var(--sh-md);
}
.videoframe__unmute:hover { filter: brightness(1.06); }


/* --------------------------------------------------------------------------
   13. STICKY CTA — bottom bar, safe-area aware
   -------------------------------------------------------------------------- */
.stickycta {
  position: fixed; z-index: 60;
  left: 0; right: 0; bottom: 0;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(7,11,18,0) 0%, rgba(7,11,18,.94) 32%, var(--c-bg) 100%);
  pointer-events: none;
  transform: translateY(0);
  transition: transform var(--d-med) var(--e-out), opacity var(--d-med) var(--e-out);
}
.stickycta__inner {
  max-width: var(--w-narrow); margin-inline: auto;
  display: flex; align-items: center; gap: var(--s-3);
  pointer-events: auto;
}
.stickycta__meta {
  flex: 0 0 auto; min-width: 0;
  font-family: var(--f-mono); font-size: var(--t-micro);
  letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-2);
  line-height: 1.25;
  display: none;
}
.stickycta .btn { flex: 1 1 auto; min-height: var(--sticky-h); box-shadow: var(--sh-cta), 0 -2px 30px rgba(0,0,0,.5); }
@media (min-width: 560px) { .stickycta__meta { display: block; } }

/* hidden-until-scrolled variant: add .stickycta--reveal, JS adds .is-visible.
   Only hides once funnel.js has run — otherwise the bar (and its Apply CTA)
   would be permanently off-screen. */
.s8-js .stickycta--reveal { transform: translateY(130%); opacity: 0; }
.s8-js .stickycta--reveal.is-visible { transform: translateY(0); opacity: 1; }

/* NOTE: hiding the sticky bar during video playback is done with INLINE styles
   from funnel.js (VideoSlot), not from here. A `body.video-playing .stickycta`
   rule loses to the .stickycta--reveal state rules above and silently does
   nothing — the bar then sits on top of the native player controls and the
   viewer cannot scrub, pause or unmute. Inline wins unconditionally.
   If you add sticky-bar styling, do not assume you can override it from CSS. */

/* --------------------------------------------------------------------------
   14. URGENCY STRIP — static seat-cap statement only.
   The simulated seats-left counter, "people viewing now" counter and the
   fake .urgency__bar / .urgency__fill progress meter were removed: they were
   fabricated live data (FTC Act §5 deceptive urgency). Do not add them back.
   -------------------------------------------------------------------------- */
.urgency {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--s-2) var(--s-4);
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: .06em;
  color: var(--c-text-2);
  text-transform: uppercase;
}
.urgency__num { color: var(--c-gold); font-weight: 700; font-variant-numeric: tabular-nums; }
.urgency__num--live { color: var(--c-lime); }

/* --------------------------------------------------------------------------
   15. FOOTER
   -------------------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--c-line);
  padding-block: var(--s-8) var(--s-9);
  background: rgba(5,8,15,.6);
}
.footer__inner { max-width: var(--w-mid); margin-inline: auto; padding-inline: var(--gutter); text-align: center; display: grid; gap: var(--s-3); }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); justify-content: center; }
.footer__links a { color: var(--c-text-2); font-size: var(--t-micro); text-decoration: underline; text-underline-offset: 2px; }
/* Mandatory disclosure. Must never be smaller or dimmer than body microcopy
   (FTC .com Disclosures — clear and conspicuous). Do not shrink. */
.footer__legal {
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--c-text-2);
  max-width: 62ch; margin-inline: auto;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
.footer__brand { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-3); }

/* --------------------------------------------------------------------------
   16. SCROLL REVEAL (JS adds .is-in)
   -------------------------------------------------------------------------- */
/* CONTENT IS VISIBLE BY DEFAULT. The hidden start state is opt-in and only
   applies once funnel.js has actually run (it stamps .s8-js on <html>). If the
   script 404s, is blocked, or throws, every .reveal block still renders.
   Do NOT move these rules out from under .s8-js. */
.reveal { transition: opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out); will-change: opacity, transform; }
.s8-js .reveal { opacity: 0; transform: translateY(16px); }
.s8-js .reveal.is-in { opacity: 1; transform: none; }
.reveal[data-reveal-delay="1"] { transition-delay: 80ms; }
.reveal[data-reveal-delay="2"] { transition-delay: 160ms; }
.reveal[data-reveal-delay="3"] { transition-delay: 240ms; }

/* --------------------------------------------------------------------------
   17. DECK (only /deck uses these)
   -------------------------------------------------------------------------- */
.deck { --w-narrow: var(--w-wide); }
.slide {
  min-height: 100svh;
  display: flex; flex-direction: column;
  justify-content: safe center; align-items: safe center;
  padding: clamp(46px, 9vw, 80px) var(--gutter);
  border-bottom: 1px solid var(--c-line);
  position: relative;
  scroll-margin-top: 0;
}
.slide > * { flex-shrink: 0; }
.slide__inner { width: 100%; max-width: var(--w-wide); margin-inline: auto; }
.slide__num {
  position: absolute; top: clamp(14px, 4vw, 24px); left: var(--gutter);
  font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .18em; color: var(--c-text-3);
}
.slide--paper { background: linear-gradient(180deg, #0D1728, #0A1120); }

/* --------------------------------------------------------------------------
   18. MOTION PREFERENCES
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .s8-js .reveal { opacity: 1 !important; transform: none !important; }
  .btn--primary:hover, .btn--secondary:hover, .videoframe__play:hover { transform: none; }
  .stickycta--reveal, .s8-js .stickycta--reveal { transform: none; opacity: 1; }
}

/* --------------------------------------------------------------------------
   19. PRINT (deck export)
   -------------------------------------------------------------------------- */
@media print {
  .stickycta, .videoframe__play { display: none !important; }
  body { background: #fff; color: #000; }
  .slide { min-height: auto; page-break-after: always; }
}