/* ==========================================================================
   Amazon Launch Accelerator - funnel design system
   One stylesheet across all three pages so the funnel reads as one experience.
   Palette is fixed by brief: accent #DDB86C on background #111111.
   Gold is rationed to CTAs, eyebrows, numerals and rules (creative critique,
   three-test lens). Headlines and body copy never take gold.
   ========================================================================== */

:root {
  /* --- surfaces, darkest to lightest --- */
  --bg: #111111;
  --bg-deep: #0B0B0B;
  --surface: #171717;
  --surface-2: #1D1D1D;
  --surface-3: #242424;
  --line: #2A2A2A;
  --line-soft: #202020;

  /* --- accent, gold ramp derived from #DDB86C --- */
  --accent: #DDB86C;
  --accent-bright: #EFD196;
  --accent-deep: #B8944B;
  --accent-ink: #5A4A22;
  --accent-wash: rgba(221, 184, 108, 0.09);
  --accent-line: rgba(221, 184, 108, 0.28);

  /* --- type colors --- */
  --ink: #F4F1EB;
  --ink-2: #DAD5CC;
  --body: #A7A199;
  /* Both clear WCAG AA (4.5:1) on every dark surface used here, including the
     lightest one (#171717). Hierarchy is carried by size and weight instead of
     by dimming text below the readable threshold. */
  --muted: #9A948A;
  --dim: #8B857B;

  /* --- light card (the "Important! Read This!" and "Why You Need This" blocks) --- */
  --card-light: #F5F2EC;
  --card-light-2: #EAE5DB;
  --card-ink: #14130F;
  --card-body: #4A4640;
  --card-line: #D8D2C5;
  /* The accent is unreadable on a cream card (2.55:1), so the light card gets
     its own darker gold for eyebrows, labels and numerals. */
  --card-gold: #7A5E22;

  /* --- semantic --- */
  --danger: #C97B5E;
  --ok: #7FA98A;

  /* --- rhythm --- */
  --wrap: 1120px;
  --read: 660px;
  --gutter: 20px;
  --radius: 4px;
  --radius-lg: 8px;

  /* --- type --- */
  /* Two families only. Inter Tight carries every headline, quote and numeral;
     Inter carries body copy. There is deliberately no serif: an earlier build
     set the pull quotes in Newsreader and it read as a different site. If a
     quote needs to stand apart, use weight, size and the gold rule, not a
     second typeface. */
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ==========================================================================
   Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  background: var(--bg);
  color: var(--body);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: 'kern' 1;
}

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

/* The hidden attribute has to actually hide things.
   The UA stylesheet's [hidden] { display: none } is beaten by ANY class in
   this file that sets display. Not theoretical: .eyebrow sets display:block,
   and the confirmation page toggles two eyebrows with [hidden], so the VIP and
   the standard headings both rendered at once until this rule existed. */
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }

/* Every interactive element gets a visible, high-contrast focus ring. */
:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--accent); color: #14130F; }

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

.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 999;
  background: var(--accent);
  color: #14130F;
  padding: 10px 16px;
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--radius);
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--read { max-width: calc(var(--read) + var(--gutter) * 2); }
.wrap--mid { max-width: 900px; }

.section { padding: 56px 0; position: relative; }
.section--tight { padding: 40px 0; }
.section--loose { padding: 76px 0; }
.section--hairline { border-top: 1px solid var(--line-soft); }
.section--deep { background: var(--bg-deep); }
.section--surface { background: var(--surface); }

@media (min-width: 768px) {
  .section { padding: 76px 0; }
  .section--tight { padding: 52px 0; }
  .section--loose { padding: 104px 0; }
}

.stack > * + * { margin-top: 16px; }
.stack-sm > * + * { margin-top: 10px; }
.stack-lg > * + * { margin-top: 28px; }
.center { text-align: center; }
.measure { max-width: var(--read); }
.measure-center { max-width: var(--read); margin-inline: auto; }

/* ==========================================================================
   Type scale
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(31px, 6.4vw, 60px);
  font-weight: 800;
  letter-spacing: -0.034em;
  line-height: 1.04;
}
h2 {
  font-size: clamp(25px, 4.4vw, 42px);
  line-height: 1.1;
}
h3 {
  font-size: clamp(19px, 2.6vw, 24px);
  letter-spacing: -0.022em;
  line-height: 1.22;
}
h4 {
  font-size: 17px;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

p { text-wrap: pretty; }
p + p { margin-top: 15px; }

.lede {
  font-size: clamp(17px, 2.1vw, 20px);
  line-height: 1.56;
  color: var(--ink-2);
}
.small { font-size: 14.5px; line-height: 1.55; }
.tiny { font-size: 13px; line-height: 1.5; color: var(--muted); }
.strong-ink { color: var(--ink); font-weight: 600; }
.gold { color: var(--accent); }

/* The eyebrow is the one place gold appears above a headline. */
.eyebrow {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 18px;
}
.eyebrow--muted { color: var(--muted); }

/* Nick's spoken lines. Same typeface as the headlines, set apart by weight and
   the gold rule on .pullquote rather than by a second family. Sits deliberately
   below h2 in size so a quote never competes with the heading above it. */
.voice {
  font-family: var(--display);
  font-style: normal;
  font-weight: 700;
  font-size: clamp(20px, 3vw, 28px);
  line-height: 1.24;
  color: var(--ink);
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.voice-sm {
  font-family: var(--display);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(17.5px, 2vw, 20px);
  line-height: 1.36;
  color: var(--ink-2);
  letter-spacing: -0.022em;
  text-wrap: pretty;
}
.attrib {
  font-family: var(--sans);
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

.pullquote {
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 22px;
}

a { color: var(--accent-bright); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.012em;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background-color .16s ease, transform .1s ease, box-shadow .16s ease, color .16s ease;
  /* 56px tall on mobile clears the 44px touch-target minimum comfortably. */
  min-height: 56px;
  padding: 15px 26px;
  font-size: 17px;
  line-height: 1.22;
}

.btn--primary {
  background: var(--accent);
  color: #14130F;
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 8px 24px -12px rgba(221,184,108,.7);
}
.btn--primary:hover { background: var(--accent-bright); color: #14130F; }
.btn--primary:active { transform: translateY(1px); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn--ghost:hover { border-color: var(--accent-line); color: var(--accent-bright); }

.btn--block { width: 100%; display: flex; }

.btn--lg {
  font-size: clamp(17px, 2.3vw, 21px);
  min-height: 64px;
  padding: 18px 30px;
}

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

/* Sub-text under a CTA. Never gold, so the button stays the brightest thing. */
.cta-sub {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.cta-sub strong { color: var(--ink-2); font-weight: 600; }

/* ==========================================================================
   Header / footer
   ========================================================================== */

.masthead {
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-deep);
  position: relative;
  z-index: 5;
}
.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-block: 14px;
  flex-wrap: wrap;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
}
.logo__mark {
  width: 26px; height: 26px;
  border: 1px solid var(--accent-line);
  border-radius: 3px;
  display: grid;
  place-items: center;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  background: var(--accent-wash);
  flex: none;
}
.logo__text small {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-top: 1px;
}

.masthead__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.masthead__meta b { color: var(--accent); font-weight: 600; }
.live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  box-shadow: 0 0 0 0 rgba(221,184,108,.55);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(221,184,108,.5); }
  70%  { box-shadow: 0 0 0 7px rgba(221,184,108,0); }
  100% { box-shadow: 0 0 0 0 rgba(221,184,108,0); }
}

.footer {
  border-top: 1px solid var(--line-soft);
  background: var(--bg-deep);
  padding: 34px 0 44px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--dim);
}
.footer p + p { margin-top: 11px; }
.footer__disclaimer {
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent-deep);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 15px 17px;
  color: var(--muted);
  background: rgba(255,255,255,.012);
}
.footer__disclaimer b { color: var(--ink-2); font-weight: 600; }
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}
.footer__links a { color: var(--muted); text-decoration: none; }
.footer__links a:hover { color: var(--accent); text-decoration: underline; }
.footer__legal { margin-top: 14px; color: var(--dim); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero { position: relative; padding: 40px 0 8px; overflow: hidden; }
@media (min-width: 900px) { .hero { padding: 62px 0 8px; } }

/* A single, very low-contrast radial. No gradient meshes, no glows. */
.hero::before {
  content: "";
  position: absolute;
  inset: -30% 0 auto 50%;
  width: min(900px, 130vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(221,184,108,.07) 0%, rgba(221,184,108,0) 62%);
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }

.hero__grid { display: grid; gap: 34px; }
@media (min-width: 980px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr);
    gap: 52px;
    align-items: start;
  }
}

.hero__headline strong { color: var(--accent); font-weight: 800; }
.hero__sub {
  margin-top: 20px;
  font-size: clamp(16.5px, 2vw, 19.5px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 620px;
}
.hero__sub strong { color: var(--ink); font-weight: 600; }

/* The founder line. Deliberately quieter than the subhead: on cold traffic it
   is credentialing, not the pitch, and it has to name Nick without competing
   with the headline for the first read. */
.hero__by {
  margin-top: 14px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--body);
  max-width: 620px;
}
.hero__by strong { color: var(--ink-2); font-weight: 600; }

/* Qualifier row: four objections answered before the reader has consciously
   raised them. A wrapping row rather than a bulleted list, because on a phone
   this has to be scanned in about a second, not read. */
.quals {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  padding: 0;
}
.quals li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  line-height: 1.2;
  color: var(--ink-2);
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  padding: 7px 13px 7px 11px;
}
/* Check drawn in CSS rather than four inline SVGs: it is decorative, and the
   text beside it already carries the meaning. */
.quals li::before {
  content: "";
  flex: none;
  width: 9px;
  height: 5px;
  border-left: 1.8px solid var(--accent);
  border-bottom: 1.8px solid var(--accent);
  transform: rotate(-45deg) translate(1px, -1px);
}
@media (max-width: 380px) {
  .quals li { font-size: 12.5px; padding: 6px 11px 6px 9px; }
}

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 26px 0;
}
.rule--gold {
  background: linear-gradient(90deg, var(--accent-line), transparent);
}
.rule--short { width: 54px; height: 2px; background: var(--accent); margin: 0 0 22px; }
.rule--short-center { margin-inline: auto; }

/* ==========================================================================
   Stat bar
   ========================================================================== */

.statbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.statbar__item { background: var(--bg-deep); padding: 16px 12px; text-align: center; }
.statbar__num {
  font-family: var(--display);
  font-size: clamp(19px, 3.4vw, 27px);
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.statbar__lab {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
  font-weight: 500;
  line-height: 1.35;
}

/* ==========================================================================
   Countdown
   ========================================================================== */

.countdown { text-align: center; }
.countdown__label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 12px;
}
.countdown__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  max-width: 400px;
  margin-inline: auto;
}
.countdown__cell {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 4px 10px;
}
.countdown__val {
  font-family: var(--display);
  font-size: clamp(24px, 5.6vw, 34px);
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  line-height: 1;
}
.countdown__unit {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 7px;
  font-weight: 600;
}
.countdown--live .countdown__val { color: var(--accent); }
.countdown__live-msg {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  color: var(--accent);
  letter-spacing: -0.02em;
}

/* ==========================================================================
   Registration form card
   ========================================================================== */

.formcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px 20px 22px;
  position: relative;
}
@media (min-width: 560px) { .formcard { padding: 30px 28px 26px; } }

.formcard__top {
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
  margin-bottom: 20px;
  text-align: center;
}
.formcard__title {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.022em;
}
.formcard__seats {
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
}

.field { margin-bottom: 15px; }
.field__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}
.field__input {
  width: 100%;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 15px;
  /* 16px minimum stops iOS Safari zooming the viewport on focus. */
  font-size: 16px;
  color: var(--ink);
  min-height: 52px;
  transition: border-color .15s ease, background-color .15s ease;
  appearance: none;
}
.field__input::placeholder { color: var(--dim); }
.field__input:hover { border-color: var(--surface-3); }
.field__input:focus {
  border-color: var(--accent);
  background: #0E0E0E;
  outline: none;
  box-shadow: 0 0 0 3px rgba(221,184,108,.13);
}
select.field__input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23837D74' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 42px;
  cursor: pointer;
}

.field--invalid .field__input { border-color: var(--danger); }
.field--invalid .field__input:focus { box-shadow: 0 0 0 3px rgba(201,123,94,.15); }
.field__error {
  display: none;
  margin-top: 7px;
  font-size: 13px;
  color: var(--danger);
  line-height: 1.4;
}
.field--invalid .field__error { display: block; }

.form__status {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
  border-radius: var(--radius);
  padding: 12px 14px;
  display: none;
}
.form__status[data-state="error"] {
  display: block;
  background: rgba(201,123,94,.09);
  border: 1px solid rgba(201,123,94,.34);
  color: #E4A88F;
}
.form__status[data-state="working"] {
  display: block;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--body);
}

.btn__spinner {
  width: 17px; height: 17px;
  border: 2px solid rgba(20,19,15,.28);
  border-top-color: #14130F;
  border-radius: 50%;
  animation: spin .62s linear infinite;
  display: none;
  flex: none;
}
.btn[data-loading="true"] .btn__spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

.trustline {
  margin-top: 15px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: var(--dim);
  line-height: 1.45;
}
.trustline svg { flex: none; margin-top: 2px; }

/* ==========================================================================
   Light card - used for the two "read this" blocks, per brief
   ========================================================================== */

.lightcard {
  background: var(--card-light);
  color: var(--card-body);
  border-radius: var(--radius-lg);
  padding: 30px 22px;
  position: relative;
  box-shadow: 0 24px 60px -34px rgba(0,0,0,.9);
}
@media (min-width: 768px) { .lightcard { padding: 48px 46px; } }

.lightcard h2, .lightcard h3, .lightcard h4 { color: var(--card-ink); }
.lightcard .eyebrow { color: var(--card-gold); }
.lightcard p { color: var(--card-body); }
.lightcard li { color: var(--card-body); }
.lightcard strong { color: var(--card-ink); font-weight: 700; }
.lightcard .rule { background: var(--card-line); }
.lightcard hr { border: 0; height: 1px; background: var(--card-line); margin: 26px 0; }

/* Numbered proprietary-name list inside the light card */
.secrets { list-style: none; counter-reset: secret; }
.secrets > li {
  counter-increment: secret;
  position: relative;
  padding-left: 52px;
  padding-top: 22px;
  margin-top: 22px;
  border-top: 1px solid var(--card-line);
}
.secrets > li:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.secrets > li::before {
  content: counter(secret, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 22px;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 800;
  color: var(--card-gold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  background: rgba(122,94,34,.10);
  border: 1px solid rgba(122,94,34,.32);
  border-radius: 3px;
  width: 34px;
  height: 26px;
  display: grid;
  place-items: center;
}
.secrets > li:first-child::before { top: 0; }
.secrets__name {
  font-family: var(--display);
  font-size: clamp(18px, 2.4vw, 21px);
  font-weight: 800;
  color: var(--card-ink);
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin-bottom: 8px;
}
.secrets__body { font-size: 16px; line-height: 1.58; }

@media (max-width: 480px) {
  .secrets > li { padding-left: 0; }
  .secrets > li::before { position: static; margin-bottom: 12px; }
  .secrets__name { margin-top: 0; }
}

/* ==========================================================================
   Contrast block (prepared vs unprepared, employment vs single income)
   ========================================================================== */

.contrast { display: grid; gap: 14px; }
@media (min-width: 760px) { .contrast { grid-template-columns: 1fr 1fr; gap: 18px; } }

.contrast__col {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px 22px;
  background: var(--surface);
}
.contrast__col--bad { background: var(--bg-deep); border-color: var(--line-soft); }
.contrast__col--good { border-color: var(--accent-line); background: var(--accent-wash); }

.contrast__tag {
  font-size: 11px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--muted);
}
.contrast__col--good .contrast__tag { color: var(--accent); }

/* Inside the light card these columns must invert, or they render dark text on
   a near-black panel and gold on cream. Both were measured failing badly
   (2.1:1 and 1.69:1) before this block existed. */
.lightcard .contrast__col {
  background: var(--card-light-2);
  border-color: var(--card-line);
}
.lightcard .contrast__col--good {
  background: rgba(122, 94, 34, 0.10);
  border-color: rgba(122, 94, 34, 0.42);
}
.lightcard .contrast__tag { color: var(--card-ink); }
.lightcard .contrast__col--good .contrast__tag { color: var(--card-gold); }
.lightcard .contrast__col li { color: var(--card-body); }

.ticklist { list-style: none; }
.ticklist li {
  position: relative;
  padding-left: 27px;
  margin-bottom: 11px;
  font-size: 15.5px;
  line-height: 1.5;
}
.ticklist li:last-child { margin-bottom: 0; }
.ticklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 13px; height: 13px;
  border-radius: 2px;
  background: no-repeat center / 13px 13px;
}
.ticklist--no li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath stroke='%23635E57' stroke-width='2' stroke-linecap='round' d='M3 3l8 8M11 3l-8 8'/%3E%3C/svg%3E");
}
.ticklist--yes li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='%23DDB86C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M2 7.6l3.4 3.4L12 4'/%3E%3C/svg%3E");
}
.lightcard .ticklist--no li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath stroke='%236B665C' stroke-width='2' stroke-linecap='round' d='M3 3l8 8M11 3l-8 8'/%3E%3C/svg%3E");
}
.lightcard .ticklist--yes li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='%237A5E22' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M2 7.6l3.4 3.4L12 4'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Founder story
   ========================================================================== */

.founder { display: grid; gap: 30px; }
@media (min-width: 900px) {
  .founder {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 48px;
    align-items: start;
  }
}

/* The after-work timeline. The proof architecture from concept #1. */
.timeline { list-style: none; position: relative; margin-top: 8px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 6px; top: 8px; bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, var(--accent-line), var(--line) 70%, transparent);
}
.timeline li {
  position: relative;
  padding-left: 30px;
  padding-bottom: 16px;
  font-size: 15.5px;
  line-height: 1.5;
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: "";
  position: absolute;
  left: 2px; top: 8px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--accent-deep);
}
.timeline__time {
  font-family: var(--display);
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin-right: 9px;
  letter-spacing: -0.015em;
}

/* ==========================================================================
   Proof / media frames
   ==========================================================================
   Placeholder frames are composed, captioned elements, never gray boxes.
   Asset identifiers live in data-asset + HTML comments, not visible text.
   Binding condition from the named-competitor critique lens.
   -------------------------------------------------------------------------- */

.frame {
  position: relative;
  background:
    linear-gradient(135deg, rgba(221,184,108,.05), rgba(221,184,108,0) 60%),
    var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.frame--wide { aspect-ratio: 16 / 10; }
.frame--square { aspect-ratio: 1; }
.frame--portrait { aspect-ratio: 3 / 4; }

.frame > img { width: 100%; height: 100%; object-fit: cover; }

/* Shown only while the real asset is not yet dropped in. */
.frame__pending {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px;
  background-image:
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,.014) 0 12px,
      rgba(255,255,255,0) 12px 24px
    );
}
.frame__pending::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px dashed rgba(221,184,108,.2);
  border-radius: 3px;
  pointer-events: none;
}
.frame__caption {
  position: relative;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}
.frame__caption b {
  display: block;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-2);
  letter-spacing: -0.015em;
  margin-bottom: 3px;
}

/* ==========================================================================
   Proof cards
   ========================================================================== */

.proofgrid { display: grid; gap: 16px; }
@media (min-width: 700px) { .proofgrid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }

.proofcard {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 100%;
}
.proofcard .frame { border: 0; border-radius: 0; border-bottom: 1px solid var(--line); aspect-ratio: 4/3; }
.proofcard__body { padding: 20px 20px 18px; display: flex; flex-direction: column; flex: 1; }
.proofcard__name {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.024em;
}
.proofcard__from {
  font-size: 12px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent-deep);
  font-weight: 600;
  margin-top: 5px;
}
.proofcard__story {
  margin-top: 13px;
  font-size: 15px;
  line-height: 1.55;
  flex: 1;
}
.proofcard__note {
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--dim);
  line-height: 1.45;
}

/* ==========================================================================
   Offer stack (bridge page)
   ========================================================================== */

.stackitem {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.stackitem:first-child { border-top: 0; padding-top: 0; }
.stackitem__icon {
  width: 34px; height: 34px;
  border-radius: 3px;
  border: 1px solid var(--accent-line);
  background: var(--accent-wash);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.stackitem__title {
  font-family: var(--display);
  font-size: 17.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.022em;
  line-height: 1.25;
}
.stackitem__meta {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-deep);
  font-weight: 600;
  margin-top: 4px;
}
.stackitem__body { margin-top: 9px; font-size: 15.5px; line-height: 1.55; }

.pricebox {
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(221,184,108,.06), rgba(221,184,108,0));
  padding: 26px 22px;
  text-align: center;
}
.pricebox__strike {
  font-size: 15px;
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: var(--danger);
}
/* A framing line above the price that is NOT a struck-through former price.
   Striking a sentence reads as a rendering fault, not as a discount. */
.pricebox__note {
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--muted);
  max-width: 34ch;
  margin-inline: auto;
}
.pricebox__price {
  font-family: var(--display);
  font-size: clamp(46px, 11vw, 68px);
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin: 6px 0 4px;
}
.pricebox__terms { font-size: 13.5px; color: var(--muted); }

/* Whop checkout container.
   The embed renders itself inside this, so the container stays out of its way:
   no border, no background, no forced height. It exists to give the checkout
   its own block and to hold the load-failure message. */
.whop-mount {
  display: block;
  min-height: 0;
}
.whop-mount > [data-whop-checkout-plan-id] { width: 100%; }

/* Only shown when Whop's loader never rendered. Carries its own box, because
   the container deliberately has none. */
.whop-mount__hint {
  max-width: 460px;
  margin-inline: auto;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  border: 1px dashed var(--accent-line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 22px 20px;
  text-align: center;
}
.whop-mount__hint[hidden] { display: none; }
.whop-mount__hint b {
  display: block;
  font-family: var(--display);
  font-size: 16px;
  color: var(--ink-2);
  font-weight: 700;
  margin-bottom: 7px;
  letter-spacing: -0.015em;
}

/* ==========================================================================
   The conversion card (bridge page)

   Whop's embedded checkout is supplied on its LIGHT theme with Whop's blue
   accent, and the brief requires it stays exactly that. So the card is the
   integration: it gives the light checkout a light surface to belong to,
   inside a #111111 page, framed in brand gold. Everything here is the
   surround; nothing reaches inside the checkout iframe.
   ========================================================================== */

.checkoutcard {
  max-width: 560px;
  margin: 0 auto;
  background: var(--card-light);
  color: var(--card-body);
  border-radius: var(--radius-lg);
  border-top: 3px solid var(--accent);
  padding: 28px 18px 26px;
  text-align: center;
  box-shadow: 0 26px 64px -34px rgba(0,0,0,.92);
}
@media (min-width: 768px) { .checkoutcard { padding: 36px 34px 32px; } }

.checkoutcard__eyebrow {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--card-gold);
}
.checkoutcard__head {
  margin-top: 10px;
  font-family: var(--display);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--card-ink);
  max-width: 24ch;
  margin-inline: auto;
}
@media (min-width: 768px) { .checkoutcard__head { font-size: 23px; } }

.checkoutcard__price {
  margin-top: 16px;
  font-family: var(--display);
  font-size: 46px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--card-ink);
}
.checkoutcard__once {
  display: block;
  margin-top: 7px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--card-gold);
}
.checkoutcard__terms {
  margin-top: 12px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--card-body);
  max-width: 40ch;
  margin-inline: auto;
}

/* The mount itself carries no box: the card is the box. */
.checkoutcard .whop-mount { margin-top: 22px; }

/* The load-failure notice inherits the dark palette by default, which would
   drop a near-black panel into a cream card. Restated for this surface. */
.checkoutcard .whop-mount__hint {
  color: var(--card-body);
  border-color: var(--card-line);
  background: var(--card-light-2);
}
.checkoutcard .whop-mount__hint b { color: var(--card-ink); }

.checkoutcard__trust {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--card-body);
  max-width: 46ch;
  margin-inline: auto;
}
.checkoutcard__trust strong { color: var(--card-ink); font-weight: 700; }

.checkoutcard__fine {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--card-body);
  max-width: 52ch;
  margin-inline: auto;
}

/* ==========================================================================
   VIP confirmation flag (thank-you page, VIP buyers only)
   ========================================================================== */

.vipflag {
  max-width: 540px;
  margin: 28px auto 0;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg);
  background: var(--accent-wash);
  padding: 20px 20px 22px;
  text-align: left;
}
.vipflag[hidden] { display: none; }
@media (min-width: 768px) { .vipflag { padding: 24px 26px 26px; } }

.vipflag__label {
  display: inline-block;
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--bg);
  background: var(--accent);
  border-radius: var(--radius);
  padding: 4px 9px;
}
.vipflag__body {
  margin-top: 13px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}

.badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 20px;
  margin-top: 20px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.badge svg { flex: none; color: var(--accent-deep); }

/* Badges on the cream conversion card. The dark-theme --muted is 2.2:1 on
   cream, a contrast failure, so this surface restates label and icon color. */
.badges--light { gap: 9px 16px; }
.badges--light .badge { color: var(--card-body); }
.badges--light .badge svg { color: var(--card-gold); }

/* ==========================================================================
   Event detail rows (thank-you page)
   ========================================================================== */

.detailcard {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
.detailrow {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 20px;
  border-top: 1px solid var(--line);
  align-items: center;
}
.detailrow:first-child { border-top: 0; }
.detailrow__label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.detailrow__value {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.018em;
  overflow-wrap: anywhere;
}
.detailrow__value small {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0;
  margin-top: 3px;
}
@media (max-width: 560px) {
  .detailrow { grid-template-columns: 1fr; gap: 5px; padding: 15px 17px; }
}

.linkrow {
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: wrap;
}
.linkrow__url {
  flex: 1 1 240px;
  min-width: 0;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 15px;
  font-size: 14px;
  color: var(--ink-2);
  font-family: var(--sans);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
}
.copybtn { flex: 0 0 auto; }
.copybtn[data-copied="true"] { background: var(--ok); color: #0B0B0B; }

.steplabel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.steplabel__num {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: #14130F;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 14px;
  flex: none;
}
.steplabel__text {
  font-size: 11.5px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.checklist { list-style: none; }
.checklist li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 13px;
  font-size: 15.5px;
  line-height: 1.55;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 3px;
  width: 18px; height: 18px;
  border: 1px solid var(--accent-line);
  border-radius: 3px;
  background: var(--accent-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='%23DDB86C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M2.6 7.4l3 3L11.4 4'/%3E%3C/svg%3E") no-repeat center / 11px 11px;
}

/* ==========================================================================
   Video container - responsive, no layout shift, no autoplay audio
   ========================================================================== */

.video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.video > iframe, .video > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video__pending {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  text-align: center;
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.014) 0 12px, rgba(255,255,255,0) 12px 24px);
}
.video__pending::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px dashed rgba(221,184,108,.2);
  border-radius: 3px;
}
.video__pending-inner { position: relative; max-width: 340px; }
.video__play {
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 1px solid var(--accent-line);
  background: var(--accent-wash);
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  color: var(--accent);
}

/* ==========================================================================
   Sticky mobile CTA
   ========================================================================== */

.stickycta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: rgba(11,11,11,.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
  transform: translateY(105%);
  transition: transform .22s ease;
}
.stickycta[data-visible="true"] { transform: translateY(0); }
.stickycta .btn { width: 100%; min-height: 52px; font-size: 16px; padding: 13px 20px; }
.stickycta__meta {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 900px) { .stickycta { display: none; } }
/* Clears the sticky bar so the footer is never trapped underneath it. */
body[data-sticky="on"] .footer { padding-bottom: 108px; }
@media (min-width: 900px) { body[data-sticky="on"] .footer { padding-bottom: 44px; } }

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 19px 0;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.35;
}
.faq__q:hover { color: var(--accent-bright); }
.faq__icon {
  flex: none;
  width: 20px; height: 20px;
  position: relative;
  margin-top: 2px;
}
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
  transition: opacity .16s ease, transform .16s ease;
}
.faq__icon::before { width: 13px; height: 1.5px; }
.faq__icon::after { width: 1.5px; height: 13px; }
.faq__q[aria-expanded="true"] .faq__icon::after { opacity: 0; transform: translate(-50%,-50%) rotate(90deg); }
.faq__a { display: none; padding: 0 0 20px; font-size: 15.5px; line-height: 1.6; max-width: var(--read); }
.faq__a p + p { margin-top: 12px; }
.faq__q[aria-expanded="true"] + .faq__a { display: block; }

/* ==========================================================================
   Urgency block
   ========================================================================== */

.urgency {
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(221,184,108,.055), rgba(221,184,108,0) 65%);
  padding: 32px 22px;
}
@media (min-width: 768px) { .urgency { padding: 46px 44px; } }

/* ==========================================================================
   Config warning - visible only when placeholder config is still in place.
   Stops the funnel shipping with a fake date, time or link.
   ========================================================================== */

.confwarn {
  display: none;
  background: #3A2A10;
  border-bottom: 1px solid var(--accent-deep);
  color: #F0DDB4;
  font-size: 13px;
  line-height: 1.5;
  padding: 11px 0;
}
.confwarn[data-show="true"] { display: block; }
.confwarn code {
  background: rgba(0,0,0,.32);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 12px;
}

/* ==========================================================================
   Reveal-on-scroll. Opacity and a small translate only.
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
  will-change: opacity, transform;
}
[data-reveal][data-shown="true"] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ==========================================================================
   V2 COLD BUILD ADDITIONS
   Three components added for the cold-traffic v2 registration page:
   the hero mini-VSL frame, the credential band, and the repeated CTA block.
   Appended rather than woven in so a diff against the v1 stylesheet is
   readable and so nothing above this line changed.
   ========================================================================== */

/* --- Mini VSL, hero -------------------------------------------------------
   16:9 via aspect-ratio with a padding-top fallback for older Safari. The
   pending state is a composed, captioned panel rather than a gray box, matching
   the .frame convention already used for the photo placeholders. */
.vslframe {
  margin: 0 0 24px;
}
.vslframe__box {
  position: relative;
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(135deg, rgba(221,184,108,.07), rgba(221,184,108,0) 62%),
    var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
@supports not (aspect-ratio: 1) {
  .vslframe__box { height: 0; padding-top: 56.25%; display: block; }
}
/* The real embed drops straight in and fills the box. */
.vslframe__box > iframe,
.vslframe__box > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.vslframe__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(17,17,17,.82);
  border: 1px solid var(--accent-line);
  border-radius: 100px;
  padding: 5px 11px;
}
.vslframe__pending {
  display: block;
  max-width: 34ch;
  padding: 20px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}
.vslframe__pending b {
  display: block;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-2);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.vslframe__pending em {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}

/* --- Credential band ------------------------------------------------------
   Sits directly under the hero. Deliberately low-ornament: it is a fact strip,
   not a second founder section, and it must not compete with the hero above it
   or the founder story below it. */
.credband {
  background: var(--bg-deep);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 30px 0;
}
.credband__inner {
  max-width: var(--read);
  margin: 0 auto;
  text-align: center;
}
.credband__claim {
  font-family: var(--display);
  font-size: clamp(18px, 2.5vw, 23px);
  line-height: 1.32;
  letter-spacing: -0.024em;
  color: var(--body);
  text-wrap: balance;
  margin: 0;
}
.credband__claim strong {
  display: block;
  color: var(--ink);
  font-weight: 700;
}
.credband__facts {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  text-align: left;
}
@media (min-width: 620px) {
  .credband__facts {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    text-align: center;
  }
}
.credband__facts li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
@media (min-width: 620px) {
  .credband__facts li {
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 14px 12px;
  }
}
.credband__facts b {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.02em;
  flex: none;
}
.credband__facts span {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--muted);
}
.credband__note {
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--dim);
}

/* --- Repeated CTA block ---------------------------------------------------
   Ask, reason to attend live, proof line. Used at every non-form ask. */
.ctablock {
  margin-top: 30px;
  text-align: center;
}
.ctablock__reason {
  margin: 14px auto 0;
  max-width: 52ch;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.ctablock__reason strong { color: var(--ink-2); font-weight: 600; }
.ctablock__proof {
  margin: 10px auto 0;
  max-width: 52ch;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--dim);
}
.ctablock__proof strong { color: var(--muted); font-weight: 600; }

/* Proof grid variants. Added 2026-08-17 when the cold build split its single
   three-card proof section into two: one relatable student in front of the
   mechanism, the other two after the curriculum. The base .proofgrid is a
   hardcoded 3-column grid, so one card would render a third of the width and
   two would leave a hole. */
@media (min-width: 700px) {
  .proofgrid--one { grid-template-columns: minmax(0, 560px); justify-content: center; }
  .proofgrid--two { grid-template-columns: repeat(2, 1fr); }
}

/* Qualification checkbox on the VIP page. Added 2026-08-25. */
.qualbox {
  display: flex; gap: 12px; align-items: flex-start;
  max-width: 520px; margin: 0 auto 18px;
  padding: 16px 18px;
  border: 1px solid rgba(221,184,108,.38);
  border-radius: 12px;
  background: rgba(221,184,108,.07);
  cursor: pointer;
  text-align: left;
}
.qualbox input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: #DDB86C; cursor: pointer; }
.qualbox span { font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.78); }
.qualbox strong { display: block; color: #fff; margin-bottom: 3px; font-size: 15.5px; }
.qualbox:hover { border-color: rgba(221,184,108,.6); }

/* Wistia testimonial + VSL frames. Added 2026-08-25.
   The embed's own :not(:defined) rule paints a blurred poster until the
   player upgrades, so there is never an empty box during load. */
/* FIXED 2026-08-25: a tall black box was appearing under every video.
   Cause: the figure had background #000 and the wistia-player element does not
   collapse to the video's height while it initializes, so the wrapper grew to
   roughly twice the player and the surplus rendered as a black slab.
   Fix: pin the wrapper to 16:9 and make the player fill it absolutely, so the
   box can never be taller than the video regardless of the player's own state. */
.frame--video {
  position: relative;
  margin: 0 0 14px;
  border-radius: 12px;
  overflow: hidden;
  background: transparent;
  aspect-ratio: 16 / 9;
}
.frame--video wistia-player {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
}
.frame--video.vsl { max-width: 680px; margin: 26px auto 0; border-radius: 14px; }

/* Community wins gallery on the confirmation page. Added 2026-08-25.
   Masonry-ish columns so mixed-aspect phone screenshots do not get cropped
   or letterboxed - each one keeps its own shape. */
.wins { columns: 2; column-gap: 12px; margin-top: 26px; }
@media (min-width: 700px)  { .wins { columns: 3; column-gap: 14px; } }
@media (min-width: 1000px) { .wins { columns: 4; column-gap: 14px; } }
.wins__item {
  break-inside: avoid; margin: 0 0 12px;
  border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: #0b0b0b;
}
.wins__item img { display: block; width: 100%; height: auto; }

/* Proof photographs and dashboard screenshots. Added 2026-08-25. */
.frame--shot { margin: 20px auto 0; max-width: 520px; border-radius: 12px; overflow: hidden;
               border: 1px solid rgba(255,255,255,.10); background: #0b0b0b; }
.frame--shot.frame--wide { max-width: 720px; margin-bottom: 26px; }
.frame--shot img { display: block; width: 100%; height: auto; }
.frame__cap { padding: 10px 14px; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.62);
              border-top: 1px solid rgba(255,255,255,.08); }


/* Portrait proof photographs (the McDonald's shot). Capped so a 9:16 phone
   photo does not take over a whole screen on mobile. */
.frame--shot.frame--portrait { max-width: 320px; }


/* ==========================================================================
   MOBILE FIXES  -  2026-08-25, from a real device-width pass
   ==========================================================================

   1. PHOTOS WERE BEING CROPPED. `.frame` forces aspect-ratio 4/5 and
      `.frame > img` uses object-fit: cover, so any portrait photograph lost
      its top and bottom - which is why Nick's head was half missing. Proof
      photographs must keep their own shape, so .frame--shot opts out of both.
   ========================================================================== */
.frame--shot { aspect-ratio: auto !important; }
.frame--shot > img { height: auto !important; object-fit: contain !important; }
.frame--shot.frame--portrait { max-width: 300px; aspect-ratio: auto !important; }
.frame--shot.frame--wide { max-width: 560px; }

/* 2. The setup warning is developer scaffolding. It was eating roughly a
      fifth of the mobile fold before a visitor saw a single word of copy.
      Shrunk to one quiet line; it still cannot be missed by whoever is
      building, and it disappears entirely once the values are set. */
.confwarn[data-show="true"] { font-size: 11.5px; line-height: 1.35; padding: 6px 0; }
.confwarn code { font-size: 10.5px; }

/* 3. Tighten the hero on phones so the form is reachable without a scroll
      marathon. The brief is explicit: no oversized hero taking multiple
      screens, short distance between persuasion and the CTA. */
@media (max-width: 700px) {
  .hero { padding-top: 18px; }
  .hero__grid { gap: 22px; }
  .hero__headline { font-size: clamp(30px, 8.5vw, 40px); line-height: 1.08; }
  .hero__sub { font-size: 16.5px; line-height: 1.5; }
  .hero__by { font-size: 14.5px; line-height: 1.5; }
  .eyebrow { font-size: 10.5px; letter-spacing: .1em; }
  .statbar { gap: 8px; }
}

/* Warning bar is build-time scaffolding: keep it to a single quiet line so it
   never competes with the hero on a phone. Gone entirely once values are set. */
.confwarn[data-show="true"] { padding: 5px 0 !important; font-size: 11px !important; }
.confwarn .wrap { white-space: nowrap; overflow-x: auto; }


/* ==========================================================================
   HERO ORDER  -  2026-08-25, Jake's call from a mobile pass.
   On a phone the form must come straight after the qualifier chips, with the
   track record underneath it. DOM order is therefore: copy, form, proof -
   which is exactly what a single-column phone layout renders.
   On desktop the two-column hero is preserved by placing copy and proof in
   column one and letting the form span both rows in column two.
   ========================================================================== */
.hero__proof { margin-top: 4px; }
@media (min-width: 980px) {
  .hero__copy  { grid-column: 1; grid-row: 1; }
  .hero__proof { grid-column: 1; grid-row: 2; margin-top: 0; }
  .hero__form  { grid-column: 2; grid-row: 1 / span 2; }
  .hero__grid  { row-gap: 26px; }
}

/* Registration notification toast. Added 2026-08-25.
   Sized up and moved clear of the countdown 2026-08-25 (Jake): it was landing
   on top of the "LIVE EVENT STARTS IN" block. Overlap is now prevented in two
   ways at once - it sits lower with more clearance, and signups.js hides it
   outright whenever the countdown is on screen, so they can never collide at
   any scroll position or screen height. */
.signup-toast {
  position: fixed;
  left: 18px; bottom: 18px;
  z-index: 60;
  display: flex; align-items: center; gap: 12px;
  max-width: min(380px, calc(100vw - 36px));
  padding: 15px 18px;
  background: rgba(22,22,22,.97);
  border: 1px solid rgba(221,184,108,.32);
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(0,0,0,.5);
  color: #fff; font-size: 15px; line-height: 1.4;
  pointer-events: none;
  opacity: 0; transform: translateY(12px);
  transition: opacity .35s ease, transform .35s ease;
}
.signup-toast[data-show="true"] { opacity: 1; transform: translateY(0); }
.signup-toast[data-blocked="true"] { opacity: 0 !important; transform: translateY(12px) !important; }
.signup-toast__dot {
  width: 9px; height: 9px; flex: none; border-radius: 50%;
  background: #4ade80; box-shadow: 0 0 0 4px rgba(74,222,128,.18);
}
.signup-toast__body b { color: var(--accent); font-weight: 700; }
.signup-toast__ago { color: rgba(255,255,255,.52); }
@media (max-width: 620px) {
  .signup-toast { left: 12px; right: 12px; max-width: none; bottom: 96px; font-size: 14.5px; padding: 14px 16px; }
}
@media (prefers-reduced-motion: reduce) { .signup-toast { display: none; } }