/* ═══════════════════════════════════════════════════════════════════════════
 * SaleSteem AI — JV partner page
 * Design system: "The Thread" — derived from the product (a messaging thread).
 *   · Bubble geometry is the signature container shape.
 *   · Read-receipt ticks are the affirmative marker.
 *   · Green is the only accent; red is reserved for "silence".
 *   · Three section archetypes: stage / ledger / argument.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;

  /* Surfaces */
  --bg: #07090B;
  --surface: #0F1417;
  --raised: #161D21;
  /* Translucent so the fixed background shows through; composites to ~#0C1012. */
  --ledger: rgba(20, 28, 32, .35);
  --alt: rgba(255, 255, 255, .025);

  /* Lines — decorative vs interactive. Interactive must clear 3:1 (WCAG 1.4.11). */
  --border: #1F2A2F;
  --border-strong: #2C3A40;
  --border-interactive: #5E6F75;

  /* Ink */
  --text: #F1F5F4;
  --muted: #93A3A0;

  /* Accent */
  --brand: #1CBD58;
  --brand-hover: #22D364;
  --brand-ink: #04150B;
  --brand-soft: rgba(28, 189, 88, .12);
  --brand-line: rgba(28, 189, 88, .35);

  /* Silence */
  --danger: #F0616D;
  --danger-soft: rgba(240, 97, 109, .12);
  --gold: #F5C451;

  /* Radii — three steps, all derived from the bubble */
  --r-sm: 10px;
  --r: 20px;
  --r-lg: 28px;
  /* The signature shape: three corners round, one tight. */
  --bubble: var(--r) var(--r) var(--r) 6px;
  --bubble-r: var(--r) var(--r) 6px var(--r);

  /* Layout */
  --container: 1180px;
  --gutter: 20px;
  --nav-top: 16px;
  --nav-h: 78px;
  --anchor-offset: calc(var(--nav-h) + var(--nav-top) + 16px);

  /* Type */
  --display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --body: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --lift: -2px;
}

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

/* 17px base so every rem value matches the body size it is measured against. */
html {
  font-size: 17px;
  scroll-behavior: smooth;
  scroll-padding-top: var(--anchor-offset);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(28, 189, 88, .18);
}

[hidden] { display: none !important; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 {
  font-family: var(--display);
  line-height: 1.1;
  margin: 0;
  letter-spacing: -.02em;
  text-wrap: balance;
}
strong, b { color: var(--text); font-weight: 700; }
.muted { color: var(--muted); }
.brand { color: var(--brand); }

button, a, summary, input, [role="button"] { touch-action: manipulation; }

.icon {
  width: 1.15em; height: 1.15em; flex: none;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.icon-sm { width: 14px; height: 14px; }
.icon-lg { width: 24px; height: 24px; }

.sr-only {
  position: absolute; 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;
}

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

.skip-link {
  position: fixed; left: -9999px; top: 12px; z-index: 100;
  background: var(--brand); color: var(--brand-ink);
  padding: 10px 16px; border-radius: var(--r-sm); font-weight: 700;
}
.skip-link:focus { left: 12px; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: var(--r-sm); }
main:focus { outline: none; }

/* ── Background layer ───────────────────────────────────────────────────── */
.bg-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .7; }
/* Content needs its own layer: a positioned canvas otherwise paints above the
   non-positioned text inside sections. */
main, .legal { position: relative; z-index: 1; }

/* ── Section archetypes ─────────────────────────────────────────────────── */
section { position: relative; padding: 104px 0; }

/* Ledger — money, dates, data. A document inside the page. */
.sec-ledger { background: var(--ledger); border-block: 1px solid var(--border); }
/* Consecutive ledger sections read as one band: no divider between them, and
   an even gap — the first gives up its bottom border and most of its padding,
   the next gives up its top. */
.sec-ledger:has(+ .sec-ledger) { border-bottom: 0; padding-bottom: 56px; }
.sec-ledger + .sec-ledger { border-top: 0; padding-top: 0; }

/* Argument — the persuasion sections. */
.sec-argument.alt { background: var(--alt); }

/* ── Type scale ─────────────────────────────────────────────────────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 12px/1 var(--display); letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand); padding: 8px 14px; border: 1px solid var(--brand-line);
  border-radius: var(--bubble); background: var(--brand-soft);
}
.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand);
  box-shadow: 0 0 0 0 var(--brand); animation: ping 2s infinite;
}
@keyframes ping {
  0% { box-shadow: 0 0 0 0 rgba(28, 189, 88, .6); }
  80%, 100% { box-shadow: 0 0 0 10px rgba(28, 189, 88, 0); }
}

/* A timestamp eyebrow — the product's own vocabulary as a section label. */
.eyebrow.stamp {
  color: var(--muted); border-color: var(--border-strong); background: transparent;
  font-variant-numeric: tabular-nums; letter-spacing: .1em;
}
.eyebrow.stamp .icon { width: 13px; height: 13px; color: var(--brand); }

.h-section { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 700; margin: 18px 0 20px; max-width: 18ch; }
.h-section.wide { max-width: 26ch; }
.h-sub { font-size: clamp(1.5rem, 2.6vw, 1.95rem); font-weight: 700; }
.lead { font-size: clamp(1.15rem, 1.4vw, 1.3rem); color: var(--muted); max-width: 64ch; }
.section-head { margin-bottom: 48px; }
.section-head.center { text-align: center; }
.section-head.center .h-section,
.section-head.center .lead { margin-left: auto; margin-right: auto; }

/* One measure limit for every long-form body block. */
.reason p, .step p, .script, .script-note,
.upgrade-body p, td.answer, .pl-lock-copy p, .recip p { max-width: 68ch; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px; border-radius: var(--bubble);
  font: 600 1rem/1.2 var(--display); letter-spacing: .01em; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
              box-shadow .2s var(--ease), transform .2s var(--ease), color .2s var(--ease);
}
.btn-primary { background: var(--brand); color: var(--brand-ink); box-shadow: 0 8px 30px -10px rgba(28, 189, 88, .65); }
.btn-primary:hover { background: var(--brand-hover); box-shadow: 0 12px 38px -10px rgba(28, 189, 88, .8); transform: translateY(var(--lift)); }
.btn-ghost { background: rgba(255, 255, 255, .03); color: var(--text); border-color: var(--border-interactive); }
.btn-ghost:hover { border-color: var(--brand-line); background: var(--brand-soft); transform: translateY(var(--lift)); }
.btn .icon { transition: transform .2s var(--ease); }
.btn:hover .icon-arrow { transform: translateX(3px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-lg { min-height: 56px; padding: 16px 28px; font-size: 1.05rem; }
.btn-full { width: 100%; }

/* Links with no URL in JV_CONFIG yet. Muted but never below contrast. */
.is-pending {
  background: var(--raised); color: var(--muted);
  border-color: var(--border-interactive); box-shadow: none;
  pointer-events: none; cursor: default;
}
.pending-tag {
  white-space: nowrap; flex: none;
  font: 600 11px/1 var(--display); letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 8px; border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .1); color: var(--text);
}

/* ── Graphic placeholders ───────────────────────────────────────────────── */
/* Reserve the exact final dimensions so dropping the PNG in shifts nothing. */
.gfx { position: relative; display: block; width: 100%; border-radius: var(--r); overflow: hidden; }
.gfx img { width: 100%; height: auto; }
/* Generated art has an opaque dark background. Fading its edges lets it melt
   into the page instead of reading as a black rectangle over the particles. */
.gfx-fade { border-radius: 0; overflow: visible; }
.gfx-fade img {
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 8%, #000 92%, transparent),
    linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 8%, #000 92%, transparent),
    linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  mask-composite: intersect;
}
.gfx-ph {
  display: grid; place-content: center; justify-items: center; gap: 10px;
  width: 100%; padding: 24px; text-align: center;
  border: 1px solid var(--border); border-radius: var(--r);
  background:
    linear-gradient(180deg, rgba(28, 189, 88, .05), transparent 60%),
    var(--raised);
  color: var(--muted);
}
.gfx-ph .icon { width: 26px; height: 26px; color: var(--border-interactive); }
.gfx-ph b { display: block; font: 600 .95rem/1.3 var(--display); color: var(--text); }
.gfx-ph small { font-size: 12px; letter-spacing: .04em; }
/* Small placeholders have no room for a label — icon only. */
.gfx-ph.is-compact { padding: 0; gap: 0; }
.gfx-ph.is-compact .icon { width: 40%; height: 40%; }
.gfx-ph[data-ratio="1-1"] { aspect-ratio: 1 / 1; }
.gfx-ph[data-ratio="16-9"] { aspect-ratio: 16 / 9; }
.gfx-ph[data-ratio="16-10"] { aspect-ratio: 16 / 10; }
.gfx-ph[data-ratio="4-5"] { aspect-ratio: 4 / 5; }

/* ── Nav ────────────────────────────────────────────────────────────────── */
.nav {
  position: fixed; z-index: 50;
  top: var(--nav-top); left: var(--gutter); right: var(--gutter);
  max-width: var(--container); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 10px 10px var(--gutter); border-radius: var(--r);
  background: rgba(10, 14, 16, .72); border: 1px solid var(--border);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding-top: max(10px, env(safe-area-inset-top));
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.nav.scrolled { background: rgba(8, 11, 13, .92); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .8); }
.nav-logo img { height: 26px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 12px;
  border-radius: var(--r-sm); font: 500 .88rem/1 var(--body); color: var(--muted);
  text-decoration: none; transition: color .2s, background-color .2s;
}
.nav-links a:hover, .nav-links a[aria-current] { color: var(--text); background: rgba(255, 255, 255, .05); }
.nav-cta { min-height: 44px; padding: 10px 16px; font-size: .88rem; }
.nav-toggle {
  display: none; width: 44px; height: 44px; border-radius: var(--r-sm);
  border: 1px solid var(--border-interactive); background: transparent; color: var(--text);
  cursor: pointer; align-items: center; justify-content: center;
}
.nav-mobile { display: none; }
/* Out of the flex flow: otherwise this empty wrapper takes a space-between slot
   on desktop and pushes the CTA away from the right edge. */
.nav-mobile-wrap { position: absolute; inset: 0; pointer-events: none; }

@media (max-width: 900px) {
  .nav-links, .nav .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; }
  /* Anchored to the header, not the viewport: the header's backdrop-filter makes
     it the containing block for fixed children anyway, so say so explicitly. */
  .nav-mobile {
    position: absolute; z-index: 49;
    top: calc(100% + 12px); left: 0; right: 0;
    display: grid; gap: 4px; padding: 12px; margin: 0; list-style: none;
    border-radius: var(--r); background: rgba(8, 11, 13, .97);
    border: 1px solid var(--border);
    max-height: calc(100dvh - var(--nav-h) - var(--nav-top) - 32px);
    overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; transform: translateY(-8px); visibility: hidden; pointer-events: none;
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
  }
  .nav-mobile.open { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition-delay: 0s; }
  .nav-mobile a:not(.btn) {
    display: flex; align-items: center; min-height: 48px; padding: 0 14px;
    border-radius: var(--r-sm); text-decoration: none; color: var(--text); font-weight: 500;
  }
  .nav-mobile a:not(.btn):hover { background: rgba(255, 255, 255, .05); }
  .nav-mobile .btn { margin-top: 8px; }
}

/* ── Hero (Stage archetype) ─────────────────────────────────────────────── */
.hero { padding: 132px 0 96px; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -30% -10% auto; height: 900px; pointer-events: none;
  background:
    radial-gradient(600px 380px at 70% 30%, rgba(28, 189, 88, .2), transparent 70%),
    radial-gradient(500px 320px at 15% 10%, rgba(28, 189, 88, .09), transparent 70%);
  animation: glow 12s ease-in-out infinite alternate;
}
@keyframes glow {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-4%, 3%, 0) scale(1.08); }
}
.hero .container { position: relative; z-index: 1; }
/* Stacked: centred copy, then the showcase full-size beneath it. */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.hero-top { text-align: center; max-width: 980px; margin: 0 auto; }
.hero h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 700; letter-spacing: -.035em; margin: 26px auto 22px; }
.hero h1 .accent { color: var(--brand); }
.hero-sub { font-size: clamp(1.15rem, 1.6vw, 1.35rem); color: var(--muted); max-width: 62ch; margin: 0 auto 30px; }
.hero .btn-row { justify-content: center; }
.hero-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 30px; font-size: .88rem; color: var(--muted); }
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta .icon { color: var(--brand); }
/* ── Hero showcase ──────────────────────────────────────────────────────
   The pedestal is an AI render; the boxes and chips are real page elements
   layered on it, so all text is exact. Positions are % of the stage box. */
.hero-showcase { position: relative; width: 100%; max-width: 1040px; margin: 0 auto; aspect-ratio: 1600 / 1195; }
.hs-stage {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 55%, #000 45%, transparent 78%);
  mask-image: radial-gradient(ellipse 72% 70% at 50% 55%, #000 45%, transparent 78%);
}
.hs-box { position: absolute; height: auto; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .6)); }
.hs-front { width: 44%; left: 28%; bottom: 29%; z-index: 3; animation: hs-float 7s ease-in-out infinite; }
.hs-back { width: 36%; z-index: 2; filter: drop-shadow(0 20px 24px rgba(0, 0, 0, .6)) brightness(.82); }
.hs-left { left: 17%; bottom: 34%; }
.hs-right { left: 47%; bottom: 34%; }

.hs-chip {
  position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 9px 14px; border-radius: var(--bubble);
  background: rgba(12, 17, 19, .8); border: 1px solid var(--border-strong);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .9);
  font: 600 1rem/1 var(--display); color: var(--text);
  animation: hs-float 6s ease-in-out infinite;
}
.hs-chip .icon { width: 17px; height: 17px; color: var(--brand); }
.hs-chip b { color: var(--brand); font-variant-numeric: tabular-nums; }
.hs-chip.is-gold { border-color: rgba(245, 196, 81, .45); }
.hs-chip.is-gold .icon { color: var(--gold); }
.hs-c1 { top: 20%; left: 4%; animation-delay: -1s; }
.hs-c2 { top: 32%; right: 3%; animation-delay: -3s; border-radius: var(--bubble-r); }
.hs-c3 { bottom: 30%; left: 2%; animation-delay: -2s; }
.hs-c4 { bottom: 18%; right: 6%; animation-delay: -4.5s; border-radius: var(--bubble-r); }
@keyframes hs-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* ── The Silence Test ───────────────────────────────────────────────────── */
.silence { margin-top: 72px; }
.silence-label { text-align: center; margin-bottom: 26px; }
.silence-label p { color: var(--muted); margin: 8px 0 0; }
.phones { display: grid; grid-template-columns: 1fr auto 1fr; gap: 28px; align-items: stretch; max-width: 960px; margin: 0 auto; }
.phones > .phone-col { display: flex; flex-direction: column; }
.phones-vs {
  align-self: center; font: 700 .82rem/1 var(--display); letter-spacing: .14em; color: var(--muted);
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--border-strong); background: var(--surface);
}
.phone {
  position: relative; display: flex; flex-direction: column; flex: 1;
  border-radius: 30px; padding: 10px;
  background: linear-gradient(160deg, #1b2226, #0b0f11);
  border: 1px solid var(--border-strong);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.phone.win {
  border-color: var(--brand-line);
  box-shadow: 0 40px 90px -40px rgba(28, 189, 88, .45), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.phone-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 22px 22px 0 0; background: #1F2C33; }
.avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 700 .9rem/1 var(--display); color: #fff; background: #3B4A54; flex: none; }
.phone.win .avatar { background: var(--brand); color: var(--brand-ink); }
.phone-name { font: 600 .88rem/1.2 var(--body); }
.phone-status { font-size: 12px; color: #9AA9B1; }
.phone-status.online { color: var(--brand); }
.phone-body {
  flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0;
  padding: 16px 12px 18px; border-radius: 0 0 22px 22px;
  background-color: #0B141A;
  background-image: radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 18px 18px;
}
.msg {
  max-width: 86%; padding: 8px 10px 6px; border-radius: var(--bubble);
  font-size: .85rem; line-height: 1.45;
}
.msg.out { align-self: flex-end; background: #005C4B; border-radius: var(--bubble-r); }
.msg.in { align-self: flex-start; background: #202C33; }
.msg-meta { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 2px; font-size: 11px; color: rgba(233, 237, 239, .85); }
.ticks { width: 16px; height: 11px; color: #9FB0BA; transition: color .3s; }
.ticks.read { color: #53BDEB; }
.slot-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.slot { font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(83, 189, 235, .55); color: #7fd3f5; }
.slot.picked { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.typing {
  align-self: flex-start; display: inline-flex; gap: 4px; overflow: hidden;
  height: 0; padding: 0 13px; border-radius: var(--bubble); background: #202C33;
  opacity: 0; transform: translateY(6px);
  transition: opacity .25s, transform .25s, height .25s var(--ease), padding .25s var(--ease);
}
.typing.show { height: 35px; padding: 11px 13px; opacity: 1; transform: none; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: #8696A0; animation: bounce 1.2s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-4px); opacity: 1; }
}
.sys {
  align-self: center; display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; padding: 6px 12px; border-radius: var(--r-sm);
  background: rgba(32, 44, 51, .9); color: #b4c0c6;
}
.sys.bad { background: var(--danger-soft); color: #ffb3ba; border: 1px solid rgba(240, 97, 109, .3); }
.clock { font-variant-numeric: tabular-nums; font-weight: 700; color: #fff; }

/* Animated states are only hidden when JS is there to reveal them again. */
.js .msg, .js .sys { opacity: 0; transform: translateY(8px) scale(.98); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.js .msg.show, .js .sys.show { opacity: 1; transform: none; }

.phone-result {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 12px; padding: 12px; border-radius: var(--r);
  font: 600 .88rem/1.2 var(--display);
}
.phone-result.bad { color: #ffb3ba; background: var(--danger-soft); }
.phone-result.good { color: #8ff0b4; background: var(--brand-soft); }
.silence-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 24px; margin-top: 30px; }
.replay {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px;
  border-radius: var(--bubble); border: 1px solid var(--border-interactive);
  background: transparent; color: var(--muted); font: 500 .88rem/1 var(--body);
  cursor: pointer; transition: color .2s, border-color .2s;
}
.replay:hover { color: var(--text); border-color: var(--brand-line); }
.note-illustration { font-size: 12.5px; color: var(--muted); }

.pitch { max-width: 760px; margin: 72px auto 0; text-align: center; }
.pitch .big { margin-bottom: 18px; }
.pitch p { color: var(--muted); font-size: 1.05rem; }
.pitch .btn-row { justify-content: center; margin-top: 28px; }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card {
  position: relative; border-radius: var(--bubble); border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface), rgba(15, 20, 23, .6)); padding: 28px;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.card.hover:hover { border-color: var(--brand-line); transform: translateY(var(--lift)); box-shadow: 0 30px 60px -36px rgba(28, 189, 88, .5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.icon-tile {
  width: 46px; height: 46px; border-radius: var(--bubble); display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand); border: 1px solid var(--brand-line); margin-bottom: 18px;
}
.icon-tile .icon { width: 22px; height: 22px; }
.card h3 { font-size: 1.25rem; margin-bottom: 10px; }
.card p { margin: 0; }
.card p:not(.script):not(.script-note) { color: var(--muted); }

/* ── Schedule ───────────────────────────────────────────────────────────── */
/* Countdown panel: launch graphic beside the live timer. */
.launch-panel {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 12px; align-items: center;
  padding: 20px 48px 20px 20px; border-radius: var(--r-lg); border: 1px solid var(--brand-line);
  background: radial-gradient(560px 380px at 24% 50%, rgba(28, 189, 88, .16), transparent 70%), var(--surface);
  box-shadow: 0 40px 80px -60px rgba(28, 189, 88, .55);
}
.launch-visual { margin: 0; aspect-ratio: 1400 / 1045; }
.launch-visual img {
  width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: radial-gradient(ellipse 64% 64% at 50% 50%, #000 50%, transparent 82%);
  mask-image: radial-gradient(ellipse 64% 64% at 50% 50%, #000 50%, transparent 82%);
  animation: hs-float 7s ease-in-out infinite;
}
.countdown-card { text-align: center; }
.countdown-phase { font: 600 .82rem/1.3 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 22px 0 28px; }
.cd-unit { padding: 20px 6px 16px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--border-strong); }
.cd-unit.is-secs { border-color: var(--brand-line); box-shadow: inset 0 0 24px rgba(28, 189, 88, .12); }
.cd-unit.is-secs .cd-num { color: var(--brand); }
.cd-num { display: block; font: 700 clamp(2rem, 4.4vw, 3.2rem)/1 var(--display); font-variant-numeric: tabular-nums; }
.cd-label { display: block; margin-top: 10px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.countdown-done { font: 700 1.4rem/1.3 var(--display); margin: 22px 0; }
/* Stacked full-width action rows: icon tile, label, status tag on the right. */
.countdown-card .btn-row { flex-direction: column; gap: 10px; }
.countdown-card .btn {
  width: 100%; min-height: 60px; justify-content: flex-start; gap: 14px;
  padding: 10px 14px 10px 10px; white-space: nowrap; text-align: left;
}
.countdown-card .btn > .icon {
  width: 40px; height: 40px; padding: 10px; flex: none; box-sizing: border-box;
  border-radius: 12px; background: rgba(4, 21, 11, .18);
}
.countdown-card .btn-ghost > .icon { background: var(--brand-soft); color: var(--brand); }
.countdown-card .btn .pending-tag { margin-left: auto; }
.countdown-card .btn.is-pending > .icon { background: var(--bg); color: var(--muted); border: 1px solid var(--border-strong); }

/* Timeline: four calendar leaves joined by a solid line, a card under each. */
.timeline { position: relative; list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.timeline::before { content: ""; position: absolute; top: 38px; left: 12.5%; right: 12.5%; height: 2px; background: linear-gradient(90deg, var(--brand-line), var(--brand) 60%, var(--brand-line)); }
.timeline li { position: relative; display: flex; flex-direction: column; align-items: center; }
.t-leaf {
  position: relative; z-index: 1; width: 64px; flex: none; overflow: hidden; text-align: center;
  border-radius: 14px; border: 1px solid var(--border-interactive); background: var(--raised);
  box-shadow: 0 0 0 6px var(--bg);
}
.t-leaf small { display: block; font: 700 10px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.t-leaf small:first-child { padding: 6px 0 5px; background: var(--border-strong); color: var(--text); }
.t-leaf small:last-child { padding: 0 0 7px; color: var(--muted); }
.t-leaf b { display: block; padding: 4px 0 2px; font: 700 1.6rem/1 var(--display); font-variant-numeric: tabular-nums; }
.t-card { flex: 1; width: 100%; margin-top: 16px; padding: 20px; border-radius: var(--bubble); border: 1px solid var(--border); background: var(--surface); transition: border-color .2s, transform .2s; }
.t-card:hover { border-color: var(--brand-line); transform: translateY(var(--lift)); }
.t-when { display: flex; align-items: center; gap: 10px; min-height: 34px; font: 600 .8rem/1.2 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--brand); }
.t-dot { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand); }
.t-dot .icon { width: 17px; height: 17px; }
.t-what { font: 700 1.15rem/1.3 var(--display); margin: 14px 0 6px; }
.t-note { color: var(--muted); font-size: .93rem; line-height: 1.5; margin: 0; }
.timeline .is-hot .t-leaf { border-color: var(--brand); box-shadow: 0 0 0 6px var(--bg), 0 0 30px rgba(28, 189, 88, .55); }
.timeline .is-hot .t-leaf small:first-child { background: var(--brand); color: var(--brand-ink); }
.timeline .is-hot .t-card { border-color: var(--brand-line); background: linear-gradient(180deg, rgba(28, 189, 88, .16), var(--surface)); }
.timeline .is-hot .t-dot { background: var(--brand); color: var(--brand-ink); }

/* ── Stat bar ───────────────────────────────────────────────────────────── */
.statbar { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.statbar > div { padding: 30px 20px; text-align: center; border-right: 1px solid var(--border); }
.statbar > div:last-child { border-right: 0; }
.stat-num { display: block; font: 700 clamp(2.2rem, 5vw, 3.6rem)/1 var(--display); letter-spacing: -.03em; color: var(--brand); font-variant-numeric: tabular-nums; }
.stat-label { display: block; margin-top: 12px; color: var(--muted); font-size: .95rem; }
.stat-gfx { width: 76px; margin: 0 auto 14px; }
.stat-gfx img { width: 100%; height: auto; }

/* Product screenshots — you supply these. */
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
.shot {
  margin: 0; overflow: hidden; border-radius: var(--r); border: 1px solid var(--border); background: var(--raised);
  box-shadow: 0 24px 50px -34px rgba(0, 0, 0, .95);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.shot:hover { transform: translateY(var(--lift)); border-color: var(--brand-line); }
.shot-open { display: block; color: inherit; text-decoration: none; cursor: zoom-in; }
.shot-open:focus-visible { outline-offset: -3px; }
.shot figcaption {
  display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-top: 1px solid var(--border);
  font: 600 .9rem/1.2 var(--display); color: var(--text);
}
.shot figcaption::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }

/* Browser-window frame, shared by the cards and the lightbox. */
.browser { position: relative; display: block; background: #0B1013; }
.browser img { display: block; width: 100%; height: auto; }
.browser-bar {
  display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px;
  background: #1A2226; border-bottom: 1px solid var(--border);
}
.browser-dots { display: flex; gap: 6px; flex: none; }
.browser-dots i { width: 9px; height: 9px; border-radius: 50%; background: #F0616D; opacity: .85; }
.browser-dots i:nth-child(2) { background: #F5C451; }
.browser-dots i:nth-child(3) { background: #1CBD58; }
.browser-url {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 22px; margin: 0 6px; padding: 0 10px; border-radius: 999px; background: rgba(7, 9, 11, .55);
  font: 500 11px/1 var(--body); color: var(--muted); white-space: nowrap; overflow: hidden;
}
.browser-url .icon { width: 11px; height: 11px; color: var(--brand); }
.browser-expand { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: var(--muted); transition: color .2s, background-color .2s; }
.browser-expand .icon { width: 13px; height: 13px; }
.shot-open:hover .browser-expand, .shot-open:focus-visible .browser-expand { color: var(--brand-ink); background: var(--brand); }

/* ── Lightbox ─────────────────────────────────────────────────────────── */
.lightbox {
  width: min(1200px, 94vw); max-width: none; max-height: 94vh; margin: auto; padding: 0;
  border: 0; background: transparent; color: var(--text); overflow: visible;
}
.lightbox::backdrop { background: rgba(4, 6, 8, .84); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
/* Fade in: the popup and its backdrop together. Fade out mirrors it (.is-closing). */
.lightbox[open] { animation: lightbox-in .3s var(--ease); }
.lightbox[open]::backdrop { animation: lightbox-fade-in .3s ease; }
.lightbox.is-closing { animation: lightbox-out .2s ease forwards; }
.lightbox.is-closing::backdrop { animation: lightbox-fade-out .2s ease forwards; }
@keyframes lightbox-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes lightbox-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes lightbox-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lightbox-fade-out { from { opacity: 1; } to { opacity: 0; } }
.lightbox-frame {
  overflow: hidden; border-radius: var(--r); border: 1px solid var(--border-strong);
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .95), 0 0 0 1px rgba(28, 189, 88, .12);
}
.lightbox-frame .browser-bar { height: 40px; }
.lightbox-frame img { max-height: calc(94vh - 110px); object-fit: contain; background: #0B1013; }
.lightbox-close {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--border-interactive); background: transparent; color: var(--text); cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.lightbox-close:hover { background: var(--danger-soft); border-color: rgba(240, 97, 109, .5); }
.lightbox-foot { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 14px; }
.lightbox-caption { margin: 0; min-width: 140px; text-align: center; font: 600 1rem/1.2 var(--display); }
.lightbox-nav {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--border-interactive); background: rgba(15, 20, 23, .9); color: var(--text);
  transition: border-color .2s, background-color .2s;
}
.lightbox-nav:hover { border-color: var(--brand-line); background: var(--brand-soft); }
html.lightbox-open { overflow: hidden; }

/* ── Affiliate ──────────────────────────────────────────────────────────── */
.affiliate {
  text-align: center; padding: 56px 28px; border-radius: var(--r-lg);
  border: 1px solid var(--brand-line);
  background: radial-gradient(700px 260px at 50% 0%, rgba(28, 189, 88, .18), transparent 70%), var(--surface);
}
.affiliate h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); margin: 16px 0 12px; }
.affiliate .btn-row { justify-content: center; margin: 26px 0 38px; }
.jvzoo-note { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: .95rem; }
.jvzoo-note .icon { color: var(--brand); }
.notify { max-width: 640px; margin: 0 auto; padding-top: 32px; border-top: 1px solid var(--border); }
.notify p { color: var(--muted); margin-bottom: 16px; }
.notify p .icon { display: inline; vertical-align: -3px; color: var(--brand); }
.notify-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; }
.field { position: relative; }
.field input {
  width: 100%; min-height: 50px; padding: 12px 16px; border-radius: var(--r-sm);
  border: 1px solid var(--border-interactive); background: var(--bg); color: var(--text);
  font: 400 1rem var(--body); transition: border-color .2s, box-shadow .2s;
}
.field input::placeholder { color: #7A8A87; }
.field input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-color: var(--brand); }
.field input[aria-disabled="true"], .field input:disabled { opacity: 1; color: var(--muted); }

/* ── Opportunity — split head + 4-step flow ───────────────────────────── */
.callout {
  margin: 38px 0 0; display: flex; align-items: center; gap: 14px; padding: 18px 22px;
  border-radius: var(--bubble); background: var(--brand-soft); border: 1px solid var(--brand-line);
  font: 600 1.05rem/1.4 var(--display);
}
.callout .icon { color: var(--brand); width: 22px; height: 22px; flex: none; }

.split-head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 44px; align-items: end; margin-bottom: 56px; }
.split-head .h-section { margin-bottom: 0; }
.split-copy .lead { margin-bottom: 14px; }
.split-copy .lead-em { color: var(--text); margin-bottom: 0; }

.flow {
  position: relative; list-style: none; margin: 0; padding: 58px 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--flow-gap); align-items: stretch;
  --flow-gap: 20px;
}
.flow-step {
  position: relative; z-index: 1; display: grid; justify-items: center; align-content: start;
  text-align: center; padding: 0 18px 24px; border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(22, 29, 33, .92), var(--surface));
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.flow-step:hover { transform: translateY(var(--lift)); border-color: var(--brand-line); box-shadow: 0 30px 60px -40px rgba(28, 189, 88, .55); }
/* Solid connector spanning the gap to the next card, at card mid-height. */
.flow-step:not(:last-child)::after {
  content: ""; position: absolute; top: 50%; left: 100%; width: var(--flow-gap); height: 2px;
  transform: translateY(-50%); background: linear-gradient(90deg, var(--brand-line), var(--border-interactive));
}
/* The icon rises out of the card, like the medals on the prize cards. */
.flow-icon {
  width: 116px; height: 116px; margin-top: -58px; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, rgba(28, 189, 88, .22), var(--raised) 72%);
  border: 1px solid var(--border-interactive); box-shadow: 0 22px 44px -26px rgba(0, 0, 0, .95);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.flow-step:hover .flow-icon { border-color: var(--brand-line); box-shadow: 0 0 0 6px rgba(28, 189, 88, .1), 0 22px 44px -26px rgba(0, 0, 0, .95); }
.flow-icon img { width: 80px; height: auto; }
.flow-n {
  margin-top: 14px; padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--brand-line); background: var(--brand-soft);
  font: 600 11px/1 var(--display); letter-spacing: .14em; color: var(--brand);
}
.flow-title { margin-top: 12px; font-size: 1.15rem; }
.flow-text { margin: 8px 0 0; color: var(--muted); font-size: .95rem; }

/* ── Steps ──────────────────────────────────────────────────────────────── */
.steps { display: grid; gap: 18px; list-style: none; padding: 0; margin: 0; }
.step { display: grid; grid-template-columns: 96px 1fr; gap: 26px; align-items: start; }
.step-num { font: 700 4rem/0.9 var(--display); color: transparent; -webkit-text-stroke: 1.5px var(--brand-line); }
.step-kicker { font: 600 12px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
.step h3 { font-size: 1.25rem; margin: 8px 0 10px; }
.step p { color: var(--muted); margin: 0; }
.script {
  margin: 18px 0 14px; padding: 20px 22px; border-radius: var(--bubble);
  border-left: 3px solid var(--brand); background: var(--raised);
  font-size: 1.05rem; color: var(--text); font-style: italic;
}
.script-note { color: var(--text); font-weight: 500; }

/* ── Market ─────────────────────────────────────────────────────────────── */
.whatsapp-hero { display: grid; grid-template-columns: auto 1fr; gap: 36px; align-items: center; padding: 36px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); margin-bottom: 26px; }
.whatsapp-hero .stat-num { font-size: clamp(3.4rem, 8vw, 6rem); }
.whatsapp-hero p { color: var(--muted); margin: 8px 0 0; font-size: 1.05rem; }
.market-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mstat { padding: 24px; border-radius: var(--bubble); border: 1px solid var(--border); background: var(--surface); }
.mstat .stat-num { font-size: 2.5rem; }
.mstat .prefix-word { display: block; font: 600 12px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; min-height: 12px; }
.mstat p { color: var(--text); margin: 12px 0 10px; font-size: .95rem; }
.source { font-size: 12.5px; color: var(--muted); }

/* The closing line is a caption, not a stat that failed to load. */
.market-caption {
  grid-column: span 2; display: flex; align-items: center; padding: 24px 28px;
  border-radius: var(--bubble); border: 1px solid var(--brand-line); background: var(--brand-soft);
}
.market-caption p { margin: 0; font: 600 1.15rem/1.4 var(--display); color: var(--text); }

.market-read { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 56px; align-items: center; }
.market-read p { color: var(--muted); }
.quote-big { font: 700 clamp(1.6rem, 3.2vw, 2.4rem)/1.2 var(--display); }
.quote-big .brand { display: block; }

/* ── Reasons ────────────────────────────────────────────────────────────── */
.reasons { display: grid; gap: 16px; list-style: none; margin: 0; padding: 0; }
.reason { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 26px; border-radius: var(--bubble); border: 1px solid var(--border); background: var(--surface); }
.reason .n { width: 44px; height: 44px; border-radius: var(--r-sm); display: grid; place-items: center; font: 700 1.2rem/1 var(--display); color: var(--brand-ink); background: var(--brand); }
.reason h3 { font-size: 1.25rem; margin-bottom: 8px; }
.reason p { color: var(--muted); margin: 0; }

/* ── Tables ─────────────────────────────────────────────────────────────── */
.table-scroll { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); }
table { width: 100%; border-collapse: collapse; min-width: 560px; }
th, td { text-align: left; padding: 18px 22px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
thead th { font: 600 .78rem/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--raised); }
.th-icon { display: inline-flex; align-items: center; gap: 8px; }
.th-icon .icon { width: 16px; height: 16px; }
.th-icon.bad .icon { color: var(--danger); }
.th-icon.good .icon { color: var(--brand); }
.fear { color: #ffc4c9; font-weight: 500; }
.answer { color: var(--text); }
tbody tr { transition: background-color .2s; }
tbody tr:hover { background: rgba(255, 255, 255, .02); }

/* ── Checklists ─────────────────────────────────────────────────────────── */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--border); }
/* Read receipts, not generic checkmarks — the product's own affirmative. */
.tick { flex: none; width: 26px; height: 18px; color: var(--brand); margin-top: 5px; }
.fe-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 36px; }
.fe-head .h-section { margin-bottom: 0; }
.price-tag { display: flex; align-items: baseline; gap: 10px; padding: 16px 24px; border-radius: var(--bubble); border: 1px solid var(--brand-line); background: var(--brand-soft); }
.price-tag .amt { font: 700 3rem/1 var(--display); color: var(--brand); }
.price-tag .lbl { color: var(--muted); font-size: .95rem; }

/* ── Funnel — zig-zag product list ─────────────────────────────────────── */
.tier {
  display: inline-block; min-width: 64px; font: 600 12px/1 var(--display); letter-spacing: .06em;
  padding: 6px 9px; border-radius: var(--r-sm); background: var(--raised); color: var(--muted);
  border: 1px solid var(--border-interactive); text-align: center;
}
.tier.fe { color: var(--brand); border-color: var(--brand-line); background: var(--brand-soft); }
.tier.bundle { color: var(--gold); border-color: rgba(245, 196, 81, .35); background: rgba(245, 196, 81, .08); }

.zz-list { display: grid; gap: 20px; list-style: none; margin: 0; padding: 0; }
.zz {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 36px; align-items: stretch; padding: 22px;
  border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface);
}
/* Zig-zag: every second product puts the box on the right. */
.zz:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.zz:nth-child(even) .zz-media { order: 2; }

/* The media panel stretches to the row height and the box scales to fit it, so
   the image always matches the content beside it. The picture is absolutely
   positioned so the image's own 1024px size can never make the row taller. */
.zz-media {
  position: relative; min-height: 440px; border-radius: var(--r);
  border: 1px solid var(--border);
  background: radial-gradient(58% 58% at 50% 55%, rgba(28, 189, 88, .2), transparent 72%), var(--raised);
}
.zz-media picture, .zz-media .gfx-ph { position: absolute; inset: 12px; z-index: 1; }
/* The box is drawn at 80% of the panel height, centred, so the grid shows
   around it. The square image is 96% box by height but only 68% by width
   (transparent margins either side), so height drives the size; max-width
   caps it where those margins run out (100% / .683) and object-fit then
   shrinks it instead of cutting the box. */
.zz-media picture { display: flex; justify-content: center; align-items: center; overflow: hidden; }
.zz-media img { flex: none; width: auto; height: 80%; max-width: calc(100% / .683); object-fit: contain; }
.zz-media .gfx-ph { aspect-ratio: auto; border: 0; background: transparent; }

/* Grid children default to min-width:auto; long lines would otherwise widen the card. */
.zz-body { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 6px 14px 6px 0; }
.zz:nth-child(even) .zz-body { padding: 6px 0 6px 14px; }
.zz-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.zz-step { font: 600 12px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.zz-name { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 10px 0 6px; }
.zz-tagline { color: var(--muted); font-size: 1rem; line-height: 1.5; max-width: 62ch; margin: 0; }

.zz-money { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.zz-money > div {
  display: flex; align-items: baseline; gap: 10px; padding: 9px 14px;
  border-radius: var(--bubble); border: 1px solid var(--border-strong); background: var(--raised);
}
.zz-money dt { font: 600 11px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.zz-money dd { margin: 0; font: 700 1.4rem/1 var(--display); font-variant-numeric: tabular-nums; color: var(--text); }
.zz-money .earn { border-color: var(--brand-line); background: var(--brand-soft); }
.zz-money .earn dd { color: var(--brand); }

.zz-features {
  list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--border);
  display: grid; grid-template-columns: 1fr 1fr; gap: 9px 22px;
}
.zz-features li { display: flex; gap: 10px; align-items: flex-start; font-size: .94rem; line-height: 1.45; }
.zz-features .tick { width: 20px; height: 14px; margin-top: 4px; }

/* Bundle — the best-value row gets the gold accent used elsewhere for first place. */
.zz.is-bundle { border-color: rgba(245, 196, 81, .4); background: linear-gradient(135deg, rgba(245, 196, 81, .07), var(--surface) 45%); }
.zz.is-bundle .zz-media { background: radial-gradient(58% 58% at 50% 55%, rgba(245, 196, 81, .16), transparent 72%), var(--raised); }

/* ── Animated grid behind each product box ──────────────────────────────
   Drawn on a canvas by main.js (initGridPanels): back-wall grid with light
   pulses along its lines + a perspective floor scrolling toward the viewer.
   Runs only while the panel is on screen; static frame under reduced motion. */
.zz-media { overflow: hidden; isolation: isolate; }
.zz-grid { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

.max-commission {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 24px; padding: 22px 26px; border-radius: var(--r-lg);
  background: linear-gradient(90deg, rgba(28, 189, 88, .18), rgba(28, 189, 88, .04));
  border: 1px solid var(--brand-line);
}
.max-commission span { color: var(--muted); }
.max-commission strong { font: 700 clamp(1.8rem, 4vw, 2.6rem)/1 var(--display); color: var(--brand); }

/* ── Why promote ────────────────────────────────────────────────────────── */
.why-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.why-grid li {
  display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px;
  border-radius: var(--bubble); border: 1px solid var(--border); background: var(--surface);
  transition: border-color .2s, transform .2s var(--ease);
}
.why-grid li:hover { border-color: var(--brand-line); transform: translateY(var(--lift)); }
.why-grid b { display: block; font-family: var(--display); font-size: 1rem; margin-bottom: 2px; }
.why-grid span.t { color: var(--muted); font-size: .92rem; }

/* ── Prelaunch ──────────────────────────────────────────────────────────── */
.lock-card { display: flex; gap: 16px; align-items: flex-start; margin: 0 0 22px; padding: 28px; border-radius: var(--bubble); border: 1px solid var(--brand-line); background: linear-gradient(135deg, rgba(28, 189, 88, .16), rgba(28, 189, 88, .04)); box-shadow: 0 30px 60px -44px rgba(28, 189, 88, .6); }
.lock-card .icon { color: var(--brand); width: 28px; height: 28px; margin-top: 2px; flex: none; }
.lock-card p { margin: 0; color: var(--text); max-width: none; font-size: 1.08rem; line-height: 1.6; }
.plan-head { font-size: 1.4rem; margin-bottom: 18px; }
.h-section .accent { color: var(--brand); }
.plan-day { font: 700 .9rem/1.3 var(--display); color: var(--brand); }

/* Band 1: lock graphic (AI render, edges faded into the page) + the lock claim. */
.pl-lock { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.pl-lock-copy p { color: var(--muted); }
.pl-visual { position: relative; margin: 0; aspect-ratio: 1400 / 1045; }
.pl-visual img {
  width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: radial-gradient(ellipse 66% 66% at 50% 50%, #000 48%, transparent 80%);
  mask-image: radial-gradient(ellipse 66% 66% at 50% 50%, #000 48%, transparent 80%);
}
.pl-visual .hs-chip { line-height: 1.15; }
.pl-visual .hs-chip small { display: block; margin-bottom: 3px; font: 600 10px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pl-c1 { top: 16%; left: 2%; animation-delay: -1s; }
.pl-c2 { top: 36%; right: 0; animation-delay: -3.5s; border-radius: var(--bubble-r); }
.pl-c3 { bottom: 12%; left: 8%; animation-delay: -2s; }

/* Band 2: the live webinar → cart-open hour. */
.pl-live {
  margin-top: 64px; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 40px; align-items: center;
  padding: 34px 38px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface);
}
.pl-live-copy p { margin: 0; color: var(--muted); max-width: 72ch; }
.pl-live-copy .pl-sold { margin-top: 16px; font-size: 1.15rem; color: var(--text); }
.pl-live-copy .pl-sold strong { color: var(--brand); }
.pl-hours { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.pl-hours::before { content: ""; position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px; background: linear-gradient(var(--border-interactive), var(--brand)); }
.pl-hours li { position: relative; display: flex; align-items: center; gap: 14px; }
.pl-hours b { display: block; font: 700 1rem/1.2 var(--display); color: var(--text); }
.pl-hours li > span:last-child { font-size: .9rem; color: var(--muted); }
.pl-hour-dot { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--raised); border: 1px solid var(--border-interactive); color: var(--brand); }
.pl-hour-dot .icon { width: 20px; height: 20px; }
.pl-hours .is-cart .pl-hour-dot { background: var(--brand); border-color: var(--brand); color: #04150B; box-shadow: 0 0 26px rgba(28, 189, 88, .55); }
.pl-hours .is-cart b { color: var(--brand); }

/* Band 3: the plan as a horizontal timeline joined by a solid line. */
.pl-plan { margin-top: 72px; text-align: center; }
.pl-plan .plan-head { margin-bottom: 30px; }
.pl-steps { position: relative; list-style: none; margin: 0 0 36px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.pl-steps::before { content: ""; position: absolute; top: 27px; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg, var(--brand-line), var(--brand) 50%, var(--brand-line)); }
.pl-steps li { position: relative; display: flex; flex-direction: column; align-items: center; }
.pl-dot {
  position: relative; z-index: 1; width: 56px; height: 56px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--raised); border: 1px solid var(--brand-line); color: var(--brand);
  box-shadow: 0 0 0 6px var(--bg);
}
.pl-dot .icon { width: 22px; height: 22px; }
.pl-card { flex: 1; width: 100%; margin-top: 16px; padding: 18px 16px; border-radius: var(--bubble); border: 1px solid var(--border); background: var(--surface); text-align: left; transition: border-color .2s, transform .2s; }
.pl-card:hover { border-color: var(--brand-line); transform: translateY(var(--lift)); }
.pl-card p { margin: 8px 0 0; color: var(--muted); font-size: .95rem; line-height: 1.5; }
.pl-steps li.hot .pl-dot { background: var(--brand); border-color: var(--brand); color: #04150B; box-shadow: 0 0 0 6px var(--bg), 0 0 30px rgba(28, 189, 88, .6); }
.pl-steps li.hot .pl-card { border-color: var(--brand-line); background: linear-gradient(180deg, rgba(28, 189, 88, .16), var(--surface)); }
.pl-steps li.hot p { color: var(--text); }
.pl-cta .btn { min-width: min(100%, 460px); }

/* ── Contest — banner + medal prize cards ────────────────────────────── */
/* A warm gold spotlight behind the section so it reads as a high point. */
.contest-sec {
  background:
    radial-gradient(900px 520px at 50% 34%, rgba(245, 196, 81, .07), transparent 70%),
    var(--ledger);
}
.contest-head { margin-bottom: 36px; }
.contest-head .lead { margin-bottom: 0; }
.gold-text {
  background: linear-gradient(180deg, #FFEBB0 0%, #F5C451 55%, #D39A24 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 22px rgba(245, 196, 81, .28));
}

/* The banner is shown whole — never cropped — at the container's width. */
.contest-banner {
  position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; background: #0B1110;
  box-shadow: 0 0 0 1px rgba(245, 196, 81, .24), 0 50px 100px -60px rgba(245, 196, 81, .4);
}
.contest-banner img { width: 100%; height: auto; }
/* Fade the floor into the card so the podium's mirrored digits don't show between the prize cards. */
.contest-banner::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 30%; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 17, 16, 0), rgba(11, 17, 16, .94));
}
/* Inner vignette so the image edges sit softly into the card. */
.contest-banner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 90px 24px rgba(7, 9, 11, .55);
}

.window {
  position: absolute; left: 22px; top: 22px; z-index: 1; display: grid; gap: 7px;
  padding: 11px 16px; border-radius: var(--bubble);
  border: 1px solid rgba(245, 196, 81, .35); background: rgba(8, 11, 13, .74);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.window-k { display: flex; align-items: center; gap: 8px; font: 600 11px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.window-k .icon { width: 14px; height: 14px; color: var(--brand); }
.window-range { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: .96rem; }
.window-arrow { color: var(--brand); font-weight: 700; }

/* Prize cards rise out of the bottom of the banner; each carries its medal. */
.prize-cards {
  position: relative; z-index: 2; list-style: none; margin: -44px 26px 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
  gap: 14px; align-items: end;
}
/* Mirror the podium: 4 · 2 · 1 · 3 · 5. Only the visual order changes — the list
   stays 1st → 5th in the markup, so assistive tech still reads it in sequence. */
.pc4 { order: 1; }
.pc2 { order: 2; }
.pc1 { order: 3; }
.pc3 { order: 4; }
.pc5 { order: 5; }
.prize-card {
  --tone: var(--brand-line);
  position: relative; display: grid; justify-items: center; gap: 4px; text-align: center;
  padding: 0 12px 18px; border-radius: var(--r-lg) var(--r-lg) var(--r) var(--r);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(22, 29, 33, .94), rgba(15, 20, 23, .98));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .95);
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.prize-card:hover { transform: translateY(-4px); border-color: var(--tone); }
.prize-medal { width: 92px; margin-top: -46px; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .55)); }
.prize-medal img { width: 100%; height: auto; }
.prize-place { margin-top: 4px; font: 600 .74rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.prize-amt { font: 700 1.75rem/1.1 var(--display); font-variant-numeric: tabular-nums; color: var(--text); }
.pc1 {
  --tone: rgba(245, 196, 81, .7);
  padding-bottom: 32px; border-color: rgba(245, 196, 81, .5);
  background: linear-gradient(180deg, rgba(245, 196, 81, .17), rgba(15, 20, 23, .98) 72%);
  box-shadow: 0 40px 80px -40px rgba(245, 196, 81, .55);
}
.pc1 .prize-medal { width: 128px; margin-top: -64px; }
.pc1 .prize-place { color: var(--text); }
.pc1 .prize-amt { font-size: 2.5rem; color: var(--gold); }
.pc2 { --tone: rgba(233, 238, 242, .5); }
.pc3 { --tone: rgba(242, 185, 138, .55); }
.pc4, .pc5 { --tone: var(--brand-line); }
.pc2, .pc3 { padding-bottom: 24px; }
.pc2 .prize-medal, .pc3 .prize-medal { width: 104px; margin-top: -52px; }
.pc4, .pc5 { padding-bottom: 14px; }
.pc4 .prize-medal, .pc5 .prize-medal { width: 84px; margin-top: -42px; }

.contest-actions { display: flex; justify-content: center; margin-top: 34px; }

.contest-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 30px; }
.contest-callout {
  display: flex; gap: 14px; align-items: flex-start; margin: 0; padding: 18px 20px;
  border-radius: var(--bubble); border: 1px solid var(--brand-line); background: rgba(28, 189, 88, .1);
}
.contest-callout .icon { color: var(--brand); width: 22px; height: 22px; margin-top: 2px; }
.contest-rules {
  list-style: none; margin: 0; padding: 16px 20px; display: grid; gap: 8px;
  border-radius: var(--bubble); border: 1px solid var(--border); background: var(--surface);
}
.contest-rules li { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); font-size: .94rem; line-height: 1.5; }
.contest-rules .tick { width: 20px; height: 14px; margin-top: 4px; }

/* ── Reciprocation ──────────────────────────────────────────────────────── */
.recip { display: grid; grid-template-columns: .95fr 1.05fr; gap: 48px; align-items: center; }
.recip p { color: var(--muted); }
.recip .promise { font: 700 1.35rem/1.35 var(--display); color: var(--text); }
.boards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; list-style: none; margin: 0; padding: 0; }
.board-slot {
  aspect-ratio: 16 / 10; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--raised);
  display: grid; place-items: center; text-align: center; padding: 12px;
  color: var(--muted); font-size: 12.5px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .02);
}
.board-slot .icon { width: 22px; height: 22px; margin: 0 auto 6px; color: var(--border-interactive); }

/* ── Promo tools ────────────────────────────────────────────────────────── */
.tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; list-style: none; margin: 0; padding: 0; }
.tool {
  display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 18px;
  border-radius: var(--bubble); border: 1px solid var(--border); background: var(--surface);
  text-decoration: none; transition: border-color .2s, transform .2s var(--ease), background-color .2s;
}
.tool:hover { border-color: var(--brand-line); background: var(--raised); transform: translateY(var(--lift)); }
.tool .tool-icon { width: 42px; height: 42px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); flex: none; }
.tool .tool-icon .icon { width: 20px; height: 20px; }
.tool .name { font: 600 1rem/1.3 var(--display); }
.tool .pending-tag { margin-left: auto; }
.tools li.featured { grid-column: span 2; }
.tools li.featured .tool { border-color: var(--brand-line); background: linear-gradient(90deg, rgba(28, 189, 88, .14), var(--surface)); }

/* ── Contact ────────────────────────────────────────────────────────────── */
.contact {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px; align-items: center;
  padding: 52px 20px 52px 52px; border-radius: var(--r-lg); border: 1px solid var(--border);
  background: radial-gradient(640px 420px at 78% 50%, rgba(28, 189, 88, .16), transparent 70%), var(--surface);
}
.contact-copy { min-width: 0; }
.contact h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: 14px 0; }
.contact p { color: var(--muted); max-width: 56ch; }

.contact-asks { list-style: none; margin: 22px 0 28px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 10px; }
.contact-asks li {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px;
  border-radius: var(--bubble); border: 1px solid var(--border-strong); background: var(--raised);
  font: 600 .9rem/1.2 var(--display); color: var(--text);
}
.contact-asks .icon { width: 16px; height: 16px; color: var(--brand); flex: none; }

.creator {
  display: flex; align-items: center; gap: 16px; max-width: 560px; padding: 16px 16px 16px 18px;
  border-radius: var(--r-lg); border: 1px solid var(--brand-line);
  background: linear-gradient(135deg, rgba(28, 189, 88, .12), var(--bg) 60%);
  box-shadow: 0 30px 60px -44px rgba(28, 189, 88, .6);
}
.creator .avatar { width: 56px; height: 56px; font-size: 1.2rem; background: var(--brand); color: var(--brand-ink); box-shadow: 0 0 0 4px rgba(28, 189, 88, .18); }
.creator-body { flex: 1; min-width: 0; }
.creator-name { font: 700 1.15rem/1.2 var(--display); }
.creator-role { color: var(--muted); font-size: .9rem; }
.creator .btn { flex: none; }

/* Graphic: AI render, edges faded into the panel; chips float over it. */
.contact-visual { position: relative; margin: 0; aspect-ratio: 1400 / 1045; }
.contact-visual img {
  width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: radial-gradient(ellipse 64% 64% at 50% 50%, #000 50%, transparent 82%);
  mask-image: radial-gradient(ellipse 64% 64% at 50% 50%, #000 50%, transparent 82%);
}
.contact-visual .hs-chip { line-height: 1.15; }
.contact-visual .hs-chip small { display: block; margin-bottom: 3px; font: 600 10px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ct-c1 { top: 12%; right: 4%; animation-delay: -2s; border-radius: var(--bubble-r); }
.ct-c2 { bottom: 12%; left: 4%; animation-delay: -4s; }

/* ── Legal ──────────────────────────────────────────────────────────────── */
.legal { padding: 76px 0 40px; border-top: 1px solid var(--border); }
.legal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.legal h2 { font-size: 1.2rem; margin-bottom: 16px; }
.legal ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 1rem; }
.legal li { margin-bottom: 7px; }
.legal p { color: var(--muted); font-size: 1rem; }
.footer { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; color: var(--muted); font-size: .92rem; }
.footer img { height: 22px; width: auto; }

/* ── Reveals ────────────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .45s var(--ease), transform .45s var(--ease); transition-delay: var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }
/* Container-level stagger: children animate without each being observed. */
.stagger > * { opacity: 0; transform: translateY(12px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.stagger.in > * { opacity: 1; transform: none; }
.stagger.in > :nth-child(1) { transition-delay: 0ms; }
.stagger.in > :nth-child(2) { transition-delay: 45ms; }
.stagger.in > :nth-child(3) { transition-delay: 90ms; }
.stagger.in > :nth-child(4) { transition-delay: 135ms; }
.stagger.in > :nth-child(n+5) { transition-delay: 180ms; }

/* ═══ Responsive — three breakpoints: 1180 / 900 / 640 ═══════════════════ */
@media (max-width: 1180px) {
  .market-grid { grid-template-columns: repeat(3, 1fr); }
  .market-caption { grid-column: span 3; }
  .tools { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  section { padding: 84px 0; }
  .pl-lock, .recip, .market-read { grid-template-columns: 1fr; gap: 28px; }
  .pl-visual { max-width: 560px; width: 100%; margin: 0 auto; }
  .pl-live { grid-template-columns: 1fr; gap: 26px; padding: 26px 22px; }
  .pl-hours { grid-template-columns: repeat(2, max-content); gap: 18px 30px; }
  .pl-hours::before { display: none; }
  .pl-steps { grid-template-columns: 1fr; gap: 12px; }
  .pl-steps::before { top: 28px; bottom: 28px; left: 27px; right: auto; width: 2px; height: auto; background: linear-gradient(var(--brand-line), var(--brand) 50%, var(--brand-line)); }
  .pl-steps li { flex-direction: row; align-items: flex-start; gap: 16px; }
  .pl-card { margin-top: 0; }
  .launch-panel { grid-template-columns: 1fr; gap: 0; padding: 12px 24px 32px; }
  .launch-visual { max-width: 420px; width: 100%; margin: 0 auto -8px; }
  .timeline { grid-template-columns: 1fr; gap: 12px; }
  .timeline::before { top: 30px; bottom: 30px; left: 31px; right: auto; width: 2px; height: auto; background: linear-gradient(var(--brand-line), var(--brand) 60%, var(--brand-line)); }
  .timeline li { flex-direction: row; align-items: flex-start; gap: 16px; }
  .t-card { margin-top: 0; }
  .grid-3, .market-grid, .tools, .shots { grid-template-columns: repeat(2, 1fr); }
  .market-caption { grid-column: span 2; }
  .tools li.featured { grid-column: span 2; }
  .contact { grid-template-columns: 1fr; padding: 36px 32px; }
  .contact-visual { order: -1; max-width: 520px; width: 100%; margin: -12px auto -24px; }
  .whatsapp-hero { grid-template-columns: 1fr; gap: 12px; text-align: center; }
  .phones { grid-template-columns: 1fr; max-width: 440px; }
  .phones-vs { justify-self: center; }
  .split-head { grid-template-columns: 1fr; gap: 20px; align-items: start; margin-bottom: 40px; }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 58px var(--flow-gap); }
  .flow-step:nth-child(2n)::after { display: none; }
  .contest-foot { grid-template-columns: 1fr; }
  .prize-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: -40px 10px 0; row-gap: 52px; }
  .pc1 { grid-column: 1 / -1; }
  .prize-card { order: 0; }
  .window { position: static; margin: 0; border-radius: 0; border-width: 1px 0 0; background: rgba(8, 11, 13, .9); }

  .zz, .zz:nth-child(even) { grid-template-columns: 1fr; gap: 20px; padding: 18px; }
  .zz:nth-child(even) .zz-media { order: 0; }
  .zz-media { min-height: 440px; }
  .zz-body, .zz:nth-child(even) .zz-body { padding: 0 4px 4px; }
  .hero { padding-top: 124px; }
  .hs-chip { font-size: .85rem; padding: 8px 12px; }
  .hs-chip .icon { width: 15px; height: 15px; }
}

@media (max-width: 640px) {
  section { padding: 68px 0; }
  .grid-3, .market-grid, .tools, .checklist, .why-grid,
  .legal-grid, .notify-form, .shots { grid-template-columns: 1fr; }
  .market-caption { grid-column: auto; }
  .tools li.featured { grid-column: auto; }
  .statbar { grid-template-columns: 1fr; }
  .statbar > div { border-right: 0; border-bottom: 1px solid var(--border); }
  .statbar > div:last-child { border-bottom: 0; }
  .countdown { grid-template-columns: repeat(2, 1fr); }
  .cd-label { letter-spacing: .06em; }
  .countdown-card .btn { white-space: normal; font-size: .95rem; }

  .step { grid-template-columns: 1fr; gap: 6px; }
  .step-num { font-size: 2.6rem; }
  .hs-c1, .hs-c3 { left: 0; }
  .hs-c2, .hs-c4 { right: 0; }
  .hs-chip { font-size: .72rem; padding: 7px 10px; }
  .hs-chip .icon { width: 13px; height: 13px; }
  /* Phones: icon beside the text instead of raised above the card. */
  .flow { grid-template-columns: 1fr; gap: 14px; padding-top: 0; }
  .flow-step::after { display: none; }
  .flow-step { grid-template-columns: 92px minmax(0, 1fr); justify-items: start; text-align: left; column-gap: 16px; padding: 18px; }
  .flow-icon { width: 92px; height: 92px; margin-top: 0; grid-row: span 3; align-self: center; }
  .flow-icon img { width: 64px; }
  .flow-n { margin-top: 0; }
  .flow-title { margin-top: 6px; }
  .contest-banner img { height: 230px; object-fit: cover; }
  .prize-cards { margin: -28px 0 0; gap: 12px; row-gap: 48px; }
  .prize-amt { font-size: 1.45rem; }
  .pc1 .prize-amt { font-size: 2.1rem; }
  .zz, .zz:nth-child(even) { padding: 14px; }
  .zz-media picture, .zz-media .gfx-ph { inset: 6px; }
  .zz-features { grid-template-columns: 1fr; }
  .zz-features li { font-size: 1rem; }
  .reason { grid-template-columns: 1fr; gap: 14px; }
  .pl-hours { grid-template-columns: 1fr; }
  .pl-visual .hs-chip small { font-size: 9px; }
  .boards { grid-template-columns: repeat(2, 1fr); }
  .contact { padding: 28px 20px; }
  .contact-asks { grid-template-columns: 1fr; }
  .creator { flex-wrap: wrap; }
  .creator .btn { width: 100%; white-space: normal; }
  .affiliate { padding: 40px 20px; }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal, .stagger > * { opacity: 1; transform: none; }
  .js .msg, .js .sys { opacity: 1; transform: none; }
  .typing { display: none; }
  .bg-canvas { display: none; }
}

/* ── Windows high contrast ──────────────────────────────────────────────── */
@media (forced-colors: active) {
  .tick, .icon, .t-dot, .t-leaf { forced-color-adjust: auto; }
  .step-num { -webkit-text-stroke: 0; color: CanvasText; }

  .card, .mstat, .tool, .why-grid li, .pl-card, .prize-card, .board-slot { border: 1px solid CanvasText; }
  .btn { border: 1px solid ButtonText; }
}