/* ════════════════════════════════════════════════════════════════════
   VOLLEY · funnel - the cinematic UXI v2 layer
   Vendored from the hub (vyan-platform/assets/css/{tokens,base,marketing}.css)
   per FLEET D-0010/D-0011. ADDITIVE only: the page's inline styles still load
   first; these v2 classes layer the cinematic editorial grammar on top.

   Token-only. The site already vendors the canonical tokens.css (--ember,
   --tool-volley, the warm ground, the radius + elevation ladders). This file
   only adds the v2 tokens that tokens.css does not yet carry, then the v2
   component vocabulary the cinematic spec names. No raw hex outside the tokens
   block below (which is the system-of-record slice we are vendoring).

   THE ACCENT LAW: --accent is a MARKING color (kicker rule, figure stroke,
   section number, list ticks, hover borders). EMBER alone fills the one CTA
   and money. This is the Volley Rally sovereign site, so --accent = the Volley Rally
   magenta fleet accent; ember stays the lone gold.
   ════════════════════════════════════════════════════════════════════ */

/* ── v2 tokens · the fluid display ramp, section rhythm, accent seam,
      mono legend, tracking, and figure strokes that tokens.css predates.
      ADDITIVE: nothing above in tokens.css is redefined. ─────────────── */
:root {
  /* Fluid display type ramp (Michroma display, capped for legibility) */
  --fs-d1:   clamp(34px, 6vw, 64px);     /* hero h1 · line-height 1.03 · -.015em */
  --fs-d2:   clamp(28px, 3.6vw, 46px);   /* section h2 */
  --fs-d3:   clamp(20px, 2vw, 28px);     /* card / sub-section */
  --fs-lede: clamp(16px, 2.2vw, 19px);   /* hero lede · plat-dim · max 58ch */

  /* Marketing section rhythm */
  --section-pad: clamp(64px, 10vh, 120px);

  /* Legacy spacing scale · vertical rhythm the v2 components read */
  --sp-1: 8px;   --sp-2: 16px;  --sp-3: 24px;  --sp-4: 40px;
  --sp-5: 64px;  --sp-6: 80px;  --sp-7: 96px;  --sp-8: 112px;

  /* Legend scale · mono UI labels (floored at 10px for legibility) */
  --m-lg: 12px;  --m-md: 11px;  --m-sm: 10px;

  /* Tracking · the three sanctioned letter-spacings */
  --trk-1: .12em;  --trk-2: .16em;  --trk-3: .20em;

  /* ember AS SMALL TEXT (marks, money, links) - dark ember already passes */
  --ember-text: var(--ember);

  /* Figure / engineering-drawing strokes (token so they flip to ink on paper) */
  --draw-line:  #7A7A85;          /* mid grey · primary draw stroke */
  --draw-faint: #3A3A42;          /* darker grey · faint construction lines */
  --draw-ember: var(--ember);     /* the ember stroke · earned figure accent */

  /* THE ACCENT SEAM · pinned to the Volley Rally fleet accent (a MARKING color) */
  --accent:      var(--tool-volley);
  --accent-text: var(--tool-volley-text);
}
@media (prefers-color-scheme: light) {
  :root {
    --ember-text: #7A5D14;        /* ember as small text on warm paper (~4.9:1 AA) */
    --draw-line:  #5C5C66;        /* mid ink · primary draw stroke on paper */
    --draw-faint: #B4B4BE;        /* light grey · faint construction lines on paper */
  }
}

/* ── BUTTONS · the one ember CTA (enriched press) + the ruled secondary
      + the .tlink editorial link + the animated arrow. Vendored from
      base.css (.btn-gold/.tlink) and marketing.css v2.4. ─────────────── */
.btn-gold {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--grad-ember); color: var(--ember-ink);
  border: none; border-radius: 2px;
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%);
  padding: 14px 26px; font-weight: 700; white-space: nowrap; cursor: pointer;
  box-shadow: var(--e2), var(--e-inset);
  transition: background var(--m-fast) var(--ease),
              box-shadow var(--m-fast) var(--ease),
              transform var(--m-fast) var(--ease-spring);
}
.btn-gold:hover { background: linear-gradient(90deg, #F0DA9A, var(--ember)); box-shadow: var(--ring-ember), var(--e2); }
.btn-gold:active { transform: scale(.985) translateY(1px); }
.btn-gold.btn-lg { padding: 16px 30px; font-size: 14.5px; }

/* the ruled secondary - transparent, 1px line, mono uppercase, ember on hover */
.btn-ruled {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: var(--trk-1); text-transform: uppercase;
  padding: 14px 24px; color: var(--platinum);
  background: transparent; border: 1px solid var(--line-hi); border-radius: var(--r-control);
  transition: border-color var(--m-fast) var(--ease), color var(--m-fast) var(--ease);
}
.btn-ruled:hover { border-color: var(--ember); color: var(--ember-text); }
.btn-ruled.btn-lg { padding: 16px 28px; }
.btn-ruled.btn-block, .btn-gold.btn-block { width: 100%; }

/* the understated editorial link - often better than a second button */
.tlink {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--platinum);
  border-bottom: 1px solid var(--line-hi); padding-bottom: 3px;
  transition: border-color var(--m-fast) var(--ease);
}
.tlink:hover { border-color: var(--ember); }
.tlink .arr { color: var(--ember-text); font-weight: 400; }

/* the animated arrow · slides on parent hover */
.arr, .btn-arrow {
  display: inline-block;
  transition: transform var(--m-base) var(--ease-spring), color var(--m-fast) var(--ease);
}
.btn-ruled:hover .arr, .tlink:hover .arr, .btn-gold:hover .arr { transform: translateX(3px); }

/* ── v2 · THE CINEMATIC HERO STAGE (placeholder-only here; cinematic-hero.js
      holds the logo and retires the haze). Token-only. ─────────────────── */
.cinematic-hero {
  position: relative; width: 100%;
  height: 64vh; min-height: 440px; max-height: 760px;
  overflow: hidden; background: var(--obsidian); margin-top: -1px;
}
.cinematic-hero__stage { position: absolute; inset: 0; display: grid; }
.cinematic-hero__placeholder {
  grid-area: 1 / 1; width: 100%; height: 100%; position: relative;
  background: linear-gradient(180deg, var(--obsidian) 0%, var(--graphite-3) 50%, var(--obsidian) 100%);
  transition: opacity 800ms var(--ease);
}
.cinematic-hero__svg { width: 100%; height: 100%; display: block; }
.cinematic-hero__paper { transform-origin: 50% 50%; animation: ciPaperFloat 12s ease-in-out infinite; color: var(--draw-line); }
.cinematic-hero__field { opacity: 0; animation: ciFieldReveal 8s ease-in-out infinite; color: var(--accent); }
.cinematic-hero__field[data-step="1"] { animation-delay: 1.0s; }
.cinematic-hero__field[data-step="2"] { animation-delay: 1.4s; }
.cinematic-hero__field[data-step="3"] { animation-delay: 1.8s; }
.cinematic-hero__scan { opacity: 0; animation: ciScan 6s ease-in-out infinite; color: var(--accent); }
.cinematic-hero__overlay {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(8,7,5,0) 0%, rgba(8,7,5,.14) 60%, rgba(8,7,5,.48) 100%),
    linear-gradient(180deg, rgba(8,7,5,0) 55%, var(--obsidian) 94%);
}
.cinematic-hero__logo {
  position: absolute; inset: 0; display: grid; place-items: center;
  pointer-events: none; z-index: 2; opacity: 1; transition: opacity 80ms linear;
}
.cinematic-hero__logo img { width: clamp(120px, 18vw, 260px); height: auto; display: block; filter: drop-shadow(0 4px 18px rgba(0,0,0,.35)); }
.cinematic-hero__haze {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  -webkit-backdrop-filter: blur(16px) saturate(118%); backdrop-filter: blur(16px) saturate(118%);
  background: radial-gradient(48% 42% at 50% 46%,
    rgba(236,232,222,.22) 0%, rgba(236,232,222,.10) 48%, rgba(236,232,222,0) 78%);
  animation: ci-haze-out 1.4s var(--ease) forwards; will-change: opacity;
}
@keyframes ci-haze-out { 0% { opacity: 0; } 9% { opacity: 1; } 40% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ciPaperFloat { 0%, 100% { transform: translateY(0) rotate(-.4deg); } 50% { transform: translateY(-14px) rotate(.4deg); } }
@keyframes ciFieldReveal { 0%, 6% { opacity: 0; transform: translateY(4px); } 14%, 70% { opacity: 1; transform: translateY(0); } 78%, 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes ciScan { 0%, 8% { opacity: 0; transform: translateY(0); } 12% { opacity: .7; } 60% { opacity: .7; transform: translateY(360px); } 70%, 100% { opacity: 0; transform: translateY(360px); } }
@media (max-width: 640px) { .cinematic-hero { height: 42vh; min-height: 300px; } }
@media (prefers-reduced-motion: reduce) {
  .cinematic-hero__paper, .cinematic-hero__field, .cinematic-hero__scan, .cinematic-hero__haze { animation: none; }
  .cinematic-hero__field { opacity: 1; }
  .cinematic-hero__haze { opacity: 0; }
  .cinematic-hero__logo { opacity: 1; }
}

/* ── v2 · THE CONTENT HERO · .hero-grid 7fr/5fr, fluid display h1 ───────
   NOTE: these sections also carry .wrap, so set only the VERTICAL padding
   here. Using the `padding` shorthand would zero .wrap's 0 20px horizontal
   gutter and flush all content to the screen edges on every breakpoint. */
.hero-v2 { padding-top: var(--sp-5); }
.hero-v2 .hero-grid {
  display: grid; grid-template-columns: 7fr 5fr;
  gap: clamp(40px, 6vw, 80px); align-items: start; text-align: left;
}
@media (max-width: 920px) { .hero-v2 .hero-grid { grid-template-columns: 1fr; gap: var(--sp-4); } }
.hero-v2 h1 { font-family: var(--disp); font-weight: 400; font-size: var(--fs-d1); line-height: 1.03; letter-spacing: -.015em; max-width: 16ch; margin: 18px 0 0; }
.hero-v2 .hero-lede { font-size: var(--fs-lede); color: var(--plat-dim); max-width: 58ch; margin: 24px 0 0; line-height: 1.6; }
.hero-v2 .hero-lede strong { color: var(--platinum); font-weight: 600; }
.hero-v2 .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 32px; }
.hero-v2 h1 .ember, h1 .ember { color: var(--ember-text); }
h1 .accent, h2 .accent { color: var(--accent-text); }

/* the accent kicker - mono rule + accent ink (a MARKING use) */
.kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-text);
}
.kicker::before { content: ""; width: 18px; height: 1px; background: var(--accent); flex-shrink: 0; }

/* ── v2 · the .overline section-head pair (mono, left/right) ──────────── */
.overline.v2 {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--plat-faint);
  border-bottom: 1px solid var(--line); padding: 0 0 14px; margin: 0 0 44px;
}
.overline.v2 .section-no { color: var(--accent-text); }
@media (max-width: 640px) { .overline.v2 > span:last-child { display: none; } }

/* ── v2 · .spec stat strip (Michroma .v, mono .k, .v.gold = ember) ────── */
.spec {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) { .spec { grid-template-columns: repeat(4, 1fr); } }
.spec .cell { padding: 22px 20px 22px 0; border-right: 1px solid var(--line); }
.spec .cell:last-child { border-right: none; }
.spec .cell .v { font-family: var(--disp); font-size: clamp(20px, 2.4vw, 28px); letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--platinum); }
.spec .cell .v.gold { background: var(--grad-ember); -webkit-background-clip: text; background-clip: text; color: transparent; }
.spec .cell .k { font-family: var(--mono); font-size: 12px; letter-spacing: var(--trk-1); text-transform: uppercase; color: var(--plat-faint); margin-top: 8px; }
@media (max-width: 719px) {
  .spec .cell { border-right: none; border-bottom: 1px solid var(--line); }
  .spec .cell:nth-child(odd) { border-right: 1px solid var(--line); padding-right: 20px; }
}

/* ── v2 · .compare 2-col comparison grid (them dim / us platinum + ember) ─ */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.compare .compare-col { padding: 24px 26px; }
.compare .compare-col + .compare-col { border-left: 1px solid var(--line); }
.compare .compare-head { font-family: var(--mono); font-size: var(--m-sm); letter-spacing: var(--trk-2); text-transform: uppercase; margin-bottom: 16px; }
.compare .compare-col.them .compare-head { color: var(--plat-faint); }
.compare .compare-col.us .compare-head { color: var(--ember-text); }
.compare .compare-row { padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.compare .compare-row:last-child { border-bottom: none; }
.compare .compare-col.them .compare-row { color: var(--plat-dim); }
.compare .compare-col.us .compare-row { color: var(--platinum); font-weight: 600; }
.compare .compare-col.us .compare-row b { color: var(--ember-hi); font-weight: 700; }
@media (max-width: 560px) { .compare { grid-template-columns: 1fr; } .compare .compare-col + .compare-col { border-left: none; border-top: 1px solid var(--line); } }

/* ── v2 · .ix indexed list (hairline rows, accent/ember number on resolve) ─ */
.ix { border-top: 1px solid var(--line); }
.ix-row { display: grid; grid-template-columns: 48px 1fr; gap: 24px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); }
.ix-row .ix-num { font-family: var(--mono); font-size: var(--m-md); letter-spacing: var(--trk-1); color: var(--plat-faint); }
.ix-row.resolve .ix-num, .ix-row.lit .ix-num { color: var(--ember-text); }
.ix-row .ix-label { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--platinum); }
.ix-row .ix-desc { font-size: 14px; color: var(--plat-dim); line-height: 1.6; max-width: 64ch; margin-top: 4px; }

/* ── v2 · .proof pull quote (accent rule, mono cite) ─────────────────── */
.proof.v2 { border-left: 1px solid var(--accent); padding: 4px 0 4px 24px; }
.proof.v2 p { font-size: clamp(18px, 2.2vw, 24px); font-weight: 550; line-height: 1.45; letter-spacing: -.015em; max-width: 30ch; color: var(--platinum); margin: 0 0 12px; text-wrap: balance; }
.proof.v2 cite { display: block; font-style: normal; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--plat-faint); }

/* ── v2 · the asymmetric split pair ──────────────────────────────────── */
.split-v2 { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
@media (min-width: 860px) { .split-v2 { grid-template-columns: 1fr 1fr; gap: 56px; } }
.split-v2.s57 { grid-template-columns: 1fr; }
@media (min-width: 860px) { .split-v2.s57 { grid-template-columns: 5fr 7fr; } }

/* ── v2 · the live figure (cadence row that stops on reply) ───────────── */
.fig-v2 { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--graphite-2); overflow: hidden; box-shadow: var(--e2), var(--e-inset); }
.fig-v2 .fig-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.fig-v2 .fig-head .who { font-weight: 700; font-size: 14px; }
.fig-v2 .fig-head .enr { font-family: var(--mono); font-size: var(--m-sm); letter-spacing: var(--trk-1); text-transform: uppercase; color: var(--plat-faint); }
.fig-v2 .step { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: baseline; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.fig-v2 .step:last-child { border-bottom: none; }
.fig-v2 .step .day { font-family: var(--mono); font-size: var(--m-sm); letter-spacing: .08em; color: var(--plat-faint); }
.fig-v2 .step .chan { font-family: var(--mono); font-size: var(--m-sm); letter-spacing: var(--trk-1); text-transform: uppercase; color: var(--accent-text); margin-right: 6px; }
.fig-v2 .step .what { font-size: 13.5px; color: var(--plat-dim); }
.fig-v2 .step .state { font-family: var(--mono); font-size: 9.5px; letter-spacing: var(--trk-1); text-transform: uppercase; color: var(--plat-faint); justify-self: end; white-space: nowrap; }
.fig-v2 .step.sent .what { color: var(--platinum); }
.fig-v2 .step.sent .state { color: var(--green); }
.fig-v2 .step.reply { background: var(--tint-row); }
.fig-v2 .step.reply .what { color: var(--platinum); font-weight: 700; }
.fig-v2 .step.reply .state { color: var(--ember-hi); }
.fig-v2 .step.held .state { color: var(--plat-faint); }
.fig-cap.v2 { display: flex; gap: 12px; align-items: baseline; padding: 12px 18px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 9.5px; letter-spacing: var(--trk-1); text-transform: uppercase; color: var(--plat-faint); }
.fig-cap.v2 .fig-no { color: var(--accent-text); }

/* ── v2 · .opt-card pricing tier (ember tick = ACCENT marking; rec = ember) ─ */
.opt-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--graphite-2); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--e2), var(--e-inset); padding: 28px;
  transition: border-color var(--m-base) var(--ease), background var(--m-base) var(--ease),
              transform var(--m-base) var(--ease-spring), box-shadow var(--m-base) var(--ease);
}
.opt-card:hover { border-color: var(--ember); background: color-mix(in srgb, var(--ember) 7%, var(--graphite-2)); transform: translateY(-2px); box-shadow: var(--e3), var(--e-inset); }
.opt-card .opt-name { font-weight: 750; font-size: 16px; letter-spacing: -.01em; color: var(--platinum); }
.opt-card .opt-for { font-size: 12.5px; color: var(--plat-faint); margin-top: 4px; }
.opt-card .opt-price { font-family: var(--mono); font-size: 24px; font-variant-numeric: tabular-nums; color: var(--ember-text); margin: 22px 0 4px; }
.opt-card .opt-price small { font-size: 12px; color: var(--plat-faint); letter-spacing: 0; }
.opt-card ul { list-style: none; margin: 20px 0 26px; padding: 0; display: grid; gap: 10px; }
.opt-card ul li { font-size: 13px; color: var(--plat-dim); padding-left: 18px; position: relative; line-height: 1.5; }
.opt-card ul li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 1px; background: var(--accent); }
.opt-card .btn-gold, .opt-card .btn-ruled { margin-top: auto; }
.opt-card.feat, .opt-card.rec { border-left: 2px solid var(--ember); background: color-mix(in srgb, var(--ember) 4%, var(--graphite-2)); }
.opt-card .opt-badge { position: absolute; top: 14px; right: 16px; font-family: var(--mono); font-size: 8.5px; letter-spacing: var(--trk-2); text-transform: uppercase; color: var(--ember-text); }

/* ── v2 · .trust-band slim ruled reassurance ─────────────────────────── */
.trust-band {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 0;
  font-family: var(--mono); font-size: var(--m-sm); letter-spacing: var(--trk-1);
  text-transform: uppercase; color: var(--plat-dim);
}
.trust-band .tb-item { display: inline-flex; align-items: center; gap: 8px; }
.trust-band .tb-item::before { content: ""; width: 5px; height: 5px; border-radius: 1px; background: var(--ember); }

/* ── v2 · .colophon lean footer (accent-marked column heads) ─────────── */
.colophon {
  border-top: 1px solid var(--line); padding: 56px 0 40px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.colophon .colophon-brand { display: flex; align-items: center; gap: 12px; }
.colophon .colophon-brand .word { font-family: var(--disp); font-size: 14px; letter-spacing: .04em; color: var(--platinum); }
.colophon .colophon-brand .mark { width: 22px; height: 22px; flex: none; display: block; }
.colophon .colophon-cols { display: flex; gap: 44px; flex-wrap: wrap; }
.colophon .col h4 { font-family: var(--mono); font-size: 9.5px; letter-spacing: var(--trk-3); text-transform: uppercase; color: var(--accent-text); font-weight: 500; margin: 0 0 14px; }
.colophon .col a { display: block; font-size: 13px; color: var(--plat-dim); padding: 4px 0; transition: color var(--m-fast) var(--ease); }
.colophon .col a:hover { color: var(--ember-text); }
.colophon .colophon-legal { font-size: 12px; color: var(--plat-faint); max-width: 52ch; line-height: 1.7; }

/* ── v2 · margin utilities used by the overhauled markup ─────────────── */
.mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); }

/* ── v2.11 · polish.js reveal contract (MARKETING ONLY) ──────────────────
   polish.js sets [data-reveal=hidden]->[visible]; the element RESTS hidden
   only with motion allowed, staggered via --polish-delay. Reduced motion:
   polish.js shows all at once, and this rule keeps them visible. With JS
   DISABLED no [data-reveal=hidden] is ever set, so content RESTS VISIBLE. */
[data-reveal] { transition: opacity var(--m-enter) var(--ease), transform var(--m-enter) var(--ease); }
[data-reveal="hidden"] { opacity: 0; transform: translateY(14px); transition-delay: var(--polish-delay, 0ms); }
[data-reveal="visible"] { opacity: 1; transform: none; transition-delay: var(--polish-delay, 0ms); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal="hidden"], [data-reveal="visible"] { opacity: 1; transform: none; transition: none; }
}

/* ── v2.12 · exit-intent modal + founder FAB skins (conversion.js builds) ─ */
.exit-intent { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; opacity: 0; transition: opacity var(--m-base) var(--ease); }
.exit-intent.is-open { opacity: 1; }
.exit-intent.is-closing { opacity: 0; }
.exit-intent__backdrop { position: absolute; inset: 0; background: var(--scrim); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.exit-intent__card { position: relative; width: min(440px, calc(100vw - 40px)); background: var(--graphite); border: 1px solid var(--line-hi); border-radius: var(--r-card-lg); box-shadow: var(--e4); padding: 32px 30px 28px; transform: translateY(10px); transition: transform var(--m-base) var(--ease-spring); }
.exit-intent.is-open .exit-intent__card { transform: translateY(0); }
.exit-intent__close { position: absolute; top: 14px; right: 16px; background: none; border: none; color: var(--plat-faint); font-size: 22px; line-height: 1; cursor: pointer; }
.exit-intent__close:hover { color: var(--platinum); }
.exit-intent__title { font-family: var(--disp); font-size: var(--fs-d3); line-height: 1.1; letter-spacing: -.01em; margin: 12px 0 10px; }
.exit-intent__lede { font-size: 14px; color: var(--plat-dim); line-height: 1.6; }
.exit-intent__row { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.exit-intent__input { flex: 1 1 200px; background: var(--obsidian); border: 1px solid var(--line-hi); border-radius: var(--r-control); color: var(--platinum); padding: 12px 13px; font-size: 14px; }
.exit-intent__input:focus { outline: none; box-shadow: var(--ring-ember); border-color: var(--ember); }
.exit-intent__small { font-family: var(--mono); font-size: var(--m-sm); letter-spacing: var(--trk-1); color: var(--plat-faint); margin-top: 12px; }
.founder-widget { position: fixed; right: 22px; bottom: 22px; z-index: 900; }
.founder-widget__btn { width: 52px; height: 52px; border-radius: var(--r-pill); background: var(--ember); color: var(--ember-ink); border: none; cursor: pointer; display: grid; place-items: center; box-shadow: var(--e-ember), var(--e3); transition: transform var(--m-fast) var(--ease-spring); }
.founder-widget__btn:hover { transform: translateY(-2px); }
.founder-widget__btn:active { transform: scale(.96); }
.founder-widget__panel { position: absolute; right: 0; bottom: 64px; width: min(340px, calc(100vw - 44px)); background: var(--graphite); border: 1px solid var(--line-hi); border-radius: var(--r-card); box-shadow: var(--e4); padding: 22px 20px 20px; }
.founder-widget__panel[hidden] { display: none; }
.founder-widget__close { position: absolute; top: 10px; right: 12px; background: none; border: none; color: var(--plat-faint); font-size: 20px; line-height: 1; cursor: pointer; }
.founder-widget__lede { font-size: 13px; color: var(--plat-dim); line-height: 1.55; margin: 8px 0 14px; }
.founder-widget__form { display: grid; gap: 10px; }
.founder-widget__email, .founder-widget__msg { background: var(--obsidian); border: 1px solid var(--line-hi); border-radius: var(--r-control); color: var(--platinum); padding: 11px 12px; font-size: 14px; font-family: inherit; width: 100%; }
.founder-widget__email:focus, .founder-widget__msg:focus { outline: none; box-shadow: var(--ring-ember); border-color: var(--ember); }
.founder-widget__small { font-family: var(--mono); font-size: var(--m-sm); letter-spacing: var(--trk-1); color: var(--plat-faint); }
.founder-widget__done { font-size: 13px; color: var(--ember-text); }
@media (prefers-reduced-motion: reduce) {
  .exit-intent, .exit-intent__card { transition: none; transform: none; }
  .founder-widget__btn { transition: none; }
}