/* ── homepage rebuild (extends v3.css + home.css) ────────────────────
   Served at /next only. index.html does not load this file.

   PALETTE IS UNCHANGED. Warm ivory page, ink black, one gold accent,
   mono for data, sans for everything else. Every colour below is a
   v3.css token or a shade derived from one. What changed is scale,
   contrast, and motion:

     · display typography, not document typography. The headline is
       allowed to be the size of the thing it is claiming.
     · full-bleed near-black bands that break the centred shell, so the
       page reads as alternating light and dark rooms instead of one
       long column of cards.
     · the product demonstrates itself. The hero runs a real simulation
       on load, the outputs section is a tabbed instrument, and the
       distribution is draggable. Motion is used to show the mechanism,
       never as decoration.

   Mobile-first. Base rules target 320-430px; min-width queries add
   desktop. Tap targets >= 44px, body copy >= 16px, nothing important
   is hover-only, and every animation is gated on prefers-reduced-motion. */

/* ── local tokens ───────────────────────────────
   Derived from the v3.css palette. Named so the dark bands can be
   reasoned about without hardcoding hexes into forty rules. */

.home-app {
  --hx-void: #0b0b0c;
  --hx-void-2: #191819;
  --hx-on-void: #f2eee4;
  --hx-on-void-dim: #a8a297;
  --hx-on-void-faint: #6c675e;
  --hx-hairline: rgba(255, 255, 255, 0.09);
  --hx-glow: rgba(176, 133, 51, 0.22);
  --hx-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Screen-reader-only text. v3.css has no such utility, and the league
   ribbon needs one: the moving track is aria-hidden, so the same coverage
   has to reach assistive tech as ordinary prose. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── scroll reveal ──────────────────────────────
   One primitive, used everywhere. Elements start slightly low and
   transparent and settle when they enter the viewport. If the browser
   asks for reduced motion, or JS never runs, everything is simply
   visible: the .is-in class is additive, and the no-js fallback below
   turns the whole mechanism off. */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--hx-ease), transform 620ms var(--hx-ease);
  transition-delay: var(--d, 0ms);
}

[data-reveal].is-in { opacity: 1; transform: none; }

html.no-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ── section shell ─────────────────────────────── */

.hx-section {
  display: grid;
  gap: 20px;
  padding: 34px 4px;
  min-width: 0;
}

@media (min-width: 720px) {
  .hx-section { gap: 26px; padding: 56px 4px; }
}

@media (min-width: 1020px) {
  .hx-section { padding: 78px 4px; }
}

/* Full-bleed: break out of the centred .home-app shell to the viewport
   edges. `html { overflow-x: clip }` in v3.css is what makes the 100vw
   safe against the scrollbar, and the shared header already uses this
   same calc pair for its backdrop. */
.hx-bleed {
  /* home.css caps every .home-app child at max-width:100%, which would
     clamp the 100vw straight back to the shell width. */
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: max(18px, calc(50vw - 750px));
  padding-right: max(18px, calc(50vw - 750px));
}

.hx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

.hx-eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--accent);
}

/* Section headings are display-scale. -0.045em tracking is what keeps a
   900-weight sans from looking merely large instead of designed. */
.hx-h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(30px, 6.4vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.045em;
  color: var(--ink);
  text-wrap: balance;
}

.hx-h2 em {
  font-style: normal;
  color: var(--accent-deep);
}

.hx-lede {
  margin: 0;
  max-width: 58ch;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

@media (min-width: 720px) {
  .hx-lede { font-size: 18px; }
}

.hx-section-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-deep);
  letter-spacing: -0.005em;
}

.hx-section-cta .btn-arrow { transition: transform 220ms var(--hx-ease); }
.hx-section-cta:hover { color: var(--ink); }
.hx-section-cta:hover .btn-arrow { transform: translateX(5px); }

/* Oversized outlined section numeral, used as a graphic element rather
   than as information. Hidden from assistive tech in the markup. */
.hx-numeral {
  position: absolute;
  top: -12px;
  right: 0;
  font-family: var(--font-mono);
  font-size: clamp(88px, 20vw, 190px);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-strong);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.hx-slab .hx-numeral { -webkit-text-stroke-color: rgba(255, 255, 255, 0.1); }

.hx-section > * { position: relative; z-index: 1; }
.hx-section { position: relative; }

/* ── header ─────────────────────────────────────
   The shared sticky header (.top, v3.css) is untouched. These rules
   only fill the nav slot beside the logo. */

.hx-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.hx-nav-links { display: none; }

@media (min-width: 900px) {
  .hx-nav-links {
    display: inline-flex;
    align-items: center;
    gap: 22px;
    margin-right: 10px;
  }
  .hx-nav-links a {
    position: relative;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-2);
    letter-spacing: -0.005em;
    white-space: nowrap;
  }
  /* Gold rule wipes in from the left on hover. */
  .hx-nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;
    height: 1.5px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 260ms var(--hx-ease);
  }
  .hx-nav-links a:hover { color: var(--ink); }
  .hx-nav-links a:hover::after { transform: scaleX(1); }
}

.hx-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease;
}

.hx-menu-btn:hover { border-color: var(--ink); background: var(--surface-2); }
.hx-menu-btn svg { width: 18px; height: 18px; }

@media (min-width: 900px) { .hx-menu-btn { display: none; } }

/* Below 900px the header carries the logo, the menu trigger, and the cog,
   and nothing else. The shared header reserves a fixed 44px gutter for the
   absolutely-positioned cog (.top-nav padding-right in v3.css), and at 320px
   the shell is only 284px wide: logo + Simulator + menu + that gutter does
   not fit, and the row wraps under the mark.

   So the header's Simulator button steps aside on phones. Nothing is lost:
   the hero's full-width primary CTA is immediately below it, Simulator is the
   first destination in the menu sheet, and the sticky bar re-offers it once
   the hero scrolls away. CSS-only hide on purpose, because home.js sets
   `dash.hidden = false` on every auth change and display:none in a media
   query wins over an absent hidden attribute without the two ever fighting. */
@media (max-width: 899px) {
  .hx-nav .btn-dashboard { display: none; }
}

/* Menu sheet: bottom sheet on phones, where the thumb is. */
.hx-sheet {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  align-items: end;
  background: rgba(12, 12, 14, 0.5);
  backdrop-filter: blur(3px);
}

.hx-sheet[hidden] { display: none !important; }

.hx-sheet-panel {
  display: grid;
  gap: 2px;
  padding: 10px 18px calc(20px + env(safe-area-inset-bottom));
  border-radius: 18px 18px 0 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -24px 60px -30px rgba(12, 12, 14, 0.7);
  max-height: 84vh;
  overflow-y: auto;
}

.hx-sheet-grip {
  justify-self: center;
  width: 38px;
  height: 4px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: var(--line-strong);
}

.hx-sheet-group {
  margin: 12px 0 2px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
}

.hx-sheet-panel a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
  padding: 0 2px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 16.5px;
  font-weight: 600;
  color: var(--ink);
}

.hx-sheet-panel a::after {
  content: "\2192";
  font-family: var(--font-mono);
  color: var(--faint);
}

.hx-sheet-panel a:last-of-type { border-bottom: 0; }
.hx-sheet-panel a:hover { color: var(--accent-deep); }

.hx-sheet-close {
  min-height: 50px;
  margin-top: 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
  .hx-sheet-panel { animation: hx-sheet-in 260ms var(--hx-ease); }
  @keyframes hx-sheet-in {
    from { transform: translateY(20px); opacity: 0.5; }
    to   { transform: translateY(0); opacity: 1; }
  }
}

/* ── hero ─────────────────────────────────────── */

.home-stage.hx-stage { gap: 30px; padding-top: 10px; }

@media (min-width: 1020px) {
  .home-stage.hx-stage {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
    padding-top: 20px;
  }
}

.hx-hero {
  display: grid;
  gap: 20px;
  align-content: center;
  min-width: 0;
}

/* The headline is the loudest thing on the page by a wide margin. 12vw
   on a phone puts "10,000 times." at roughly the full measure, which is
   the point: the number is the product. */
.hx-headline {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(40px, 11.4vw, 92px);
  line-height: 0.94;
  letter-spacing: -0.052em;
  color: var(--ink);
}

@media (min-width: 1020px) {
  .hx-headline { font-size: clamp(58px, 4.9vw, 82px); }
}

/* "10,000 times." gets the gold and a hairline underscore that draws
   itself once, on load. It is the one flourish on the page. */
.hx-headline em {
  position: relative;
  display: inline-block;
  font-style: normal;
  font-weight: 900;
  color: var(--accent-deep);
}

.hx-headline em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.06em;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), rgba(176, 133, 51, 0.15));
  transform: scaleX(0);
  transform-origin: left;
  animation: hx-underscore 900ms var(--hx-ease) 420ms forwards;
}

@keyframes hx-underscore { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .hx-headline em::after { animation: none; transform: scaleX(1); }
}

.hx-hero-sub {
  margin: 0;
  max-width: 50ch;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-2);
  font-weight: 500;
}

@media (min-width: 1020px) { .hx-hero-sub { font-size: 19px; } }

.hx-hero-sub strong { color: var(--ink); font-weight: 800; }

.hx-hero-actions {
  display: grid;
  gap: 12px;
  justify-items: start;
  margin-top: 4px;
}

/* Full-width primary on phones: one strong target, not two narrow ones.
   The gold sweep on hover is a single transform, so it composites. */
.hx-cta-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 0 26px;
  border: 1px solid var(--ink);
  border-radius: var(--r-md);
  background: var(--ink);
  color: #fff;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow: hidden;
  box-shadow: 0 16px 34px -18px rgba(12, 12, 14, 0.6);
  transition: transform 220ms var(--hx-ease), box-shadow 220ms var(--hx-ease);
}

.hx-cta-primary > * { position: relative; z-index: 1; }

.hx-cta-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--accent-deep), var(--accent));
  transform: translateX(-101%);
  transition: transform 420ms var(--hx-ease);
  z-index: 0;
}

.hx-cta-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 22px 44px -20px rgba(12, 12, 14, 0.7); }
.hx-cta-primary:hover::before { transform: translateX(0); }
.hx-cta-primary .btn-arrow { transition: transform 260ms var(--hx-ease); }
.hx-cta-primary:hover .btn-arrow { transform: translateX(5px); }

@media (min-width: 560px) {
  .hx-cta-primary { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .hx-cta-primary, .hx-cta-primary::before { transition: none; }
  .hx-cta-primary:hover { transform: none; }
}

.hx-offer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.hx-offer span { display: inline-flex; align-items: center; gap: 6px; }

.hx-offer span::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--accent);
}

.hx-hero-secondary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 650;
  color: var(--ink-2);
}

.hx-hero-secondary span:first-child {
  border-bottom: 1.5px solid var(--line-strong);
  transition: border-color 200ms ease;
}

.hx-hero-secondary:hover { color: var(--accent-deep); }
.hx-hero-secondary:hover span:first-child { border-color: var(--accent); }

/* ── the engine panel ───────────────────────────
   The hero's right column, and the signature moment of the page. On
   load it actually runs: the counter races to 10,000 while the
   histogram fills, then it settles into a real matchup off today's
   cached board. The animation is the product's own claim, performed. */

.hx-engine {
  position: relative;
  display: grid;
  gap: 0;
  border-radius: 18px;
  overflow: hidden;
  color: var(--hx-on-void);
  background:
    radial-gradient(120% 140% at 8% 0%, var(--hx-glow), transparent 56%),
    linear-gradient(158deg, var(--hx-void-2) 0%, var(--hx-void) 70%);
  border: 1px solid var(--hx-hairline);
  box-shadow: 0 34px 70px -40px rgba(12, 12, 14, 0.95);
  min-width: 0;
}

/* Gold filament along the top edge, the same detail the existing
   coverage plate uses. It is the through-line between old and new. */
.hx-engine::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  z-index: 2;
  background: linear-gradient(90deg, transparent, var(--accent), rgba(176, 133, 51, 0.05) 72%, transparent);
}

.hx-engine-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--hx-hairline);
  background: rgba(255, 255, 255, 0.02);
}

.hx-engine-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.hx-engine-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(176, 133, 51, 0.16), 0 0 12px rgba(176, 133, 51, 0.9);
}

@media (prefers-reduced-motion: no-preference) {
  .hx-engine-dot { animation: pulse 2.4s ease-in-out infinite; }
}

.hx-engine[data-mode="sample"] .hx-engine-tag { color: var(--warn-soft); }

/* The run counter. tabular-nums is doing real work here: without it the
   digits jitter horizontally as the number races. */
.hx-engine-count {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--hx-on-void);
  font-variant-numeric: tabular-nums;
}

.hx-engine-count span { color: var(--hx-on-void-faint); font-weight: 600; }

.hx-engine-body { display: grid; gap: 16px; padding: 16px; }

/* histogram */
.hx-hist {
  display: grid;
  grid-template-columns: repeat(28, minmax(0, 1fr));
  align-items: end;
  gap: 2px;
  height: 108px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--hx-hairline);
}

@media (min-width: 720px) { .hx-hist { height: 132px; } }

.hx-hist i {
  display: block;
  height: 2px;
  min-height: 2px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, rgba(176, 133, 51, 0.85), rgba(176, 133, 51, 0.28));
  transform-origin: bottom;
  will-change: height;
}

/* The band holding the middle 80% of runs is lit; the tails are dimmed.
   That is the section's whole lesson, said in colour. */
.hx-hist i.is-tail {
  background: linear-gradient(180deg, rgba(242, 238, 228, 0.22), rgba(242, 238, 228, 0.07));
}

.hx-hist-axis {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hx-on-void-faint);
  font-variant-numeric: tabular-nums;
}

.hx-engine-match {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #fbf8f1;
  line-height: 1.2;
}

.hx-engine-match em {
  font-style: normal;
  font-weight: 500;
  color: var(--hx-on-void-faint);
  padding: 0 6px;
}

/* win probability */
.hx-prob { display: grid; gap: 9px; }

.hx-prob-rows {
  display: grid;
  gap: 5px;
  font-size: 13.5px;
}

.hx-prob-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
}

.hx-prob-name {
  font-weight: 600;
  color: var(--hx-on-void-dim);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hx-prob-pct {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 15px;
  color: var(--hx-on-void);
  font-variant-numeric: tabular-nums;
}

.hx-prob-bar {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.07);
}

.hx-prob-bar span {
  display: block;
  height: 100%;
  width: 0;
  transition: width 900ms var(--hx-ease);
}

.hx-prob-bar .hx-seg-away { background: var(--hx-on-void-dim); }
.hx-prob-bar .hx-seg-draw { background: var(--hx-on-void-faint); }
.hx-prob-bar .hx-seg-home { background: linear-gradient(90deg, var(--accent-deep), var(--accent)); }

@media (prefers-reduced-motion: reduce) {
  .hx-prob-bar span { transition: none; }
}

/* stat strip */
.hx-engine-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--hx-hairline);
}

.hx-stat {
  display: grid;
  gap: 3px;
  padding: 11px 12px;
  background: rgba(255, 255, 255, 0.025);
  min-width: 0;
}

.hx-stat-label {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hx-on-void-faint);
}

.hx-stat-val {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 800;
  color: var(--hx-on-void);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.hx-engine-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 16px;
  border-top: 1px solid var(--hx-hairline);
  background: rgba(0, 0, 0, 0.22);
}

.hx-engine-note {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 9.5px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hx-on-void-faint);
  flex: 1 1 160px;
}

.hx-engine-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--r-sm);
  color: var(--hx-on-void);
  font-size: 13.5px;
  font-weight: 650;
  white-space: nowrap;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}

.hx-engine-cta:hover { border-color: var(--accent); color: var(--accent); background: rgba(176, 133, 51, 0.08); }

/* ── league marquee ─────────────────────────────
   Full-bleed dark band. Replaces the static coverage plate: same
   information, but it moves, and it separates the hero from the
   argument below it like a scoreboard ribbon. */

.hx-ribbon {
  position: relative;
  display: flex;
  align-items: center;
  height: 62px;
  overflow: hidden;
  color: var(--hx-on-void);
  background: linear-gradient(90deg, var(--hx-void) 0%, var(--hx-void-2) 50%, var(--hx-void) 100%);
  border-top: 1px solid var(--hx-hairline);
  border-bottom: 1px solid var(--hx-hairline);
  padding-left: 0;
  padding-right: 0;
}

.hx-ribbon::before,
.hx-ribbon::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 90px;
  z-index: 2;
  pointer-events: none;
}

.hx-ribbon::before { left: 0; background: linear-gradient(90deg, var(--hx-void), transparent); }
.hx-ribbon::after { right: 0; background: linear-gradient(270deg, var(--hx-void), transparent); }

.hx-ribbon-track {
  display: inline-flex;
  align-items: center;
  gap: 30px;
  white-space: nowrap;
  padding-left: 30px;
  will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
  .hx-ribbon-track { animation: hx-ribbon 44s linear infinite; }
  .hx-ribbon:hover .hx-ribbon-track { animation-play-state: paused; }
}

@keyframes hx-ribbon {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.hx-ribbon-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hx-on-void);
}

.hx-ribbon-item::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(176, 133, 51, 0.8);
}

.hx-ribbon-item.is-soon { color: var(--hx-on-void-faint); }
.hx-ribbon-item.is-soon::before { background: var(--hx-on-void-faint); box-shadow: none; }

/* ── tabbed outputs instrument ──────────────────
   The "what the simulation shows" section, built as an instrument
   rather than four static cards. Tabs swap a live HTML crop, so the
   visitor operates the idea instead of reading about it. */

.hx-tabs {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 24px 60px -44px rgba(12, 12, 14, 0.5);
}

.hx-tablist {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.hx-tablist::-webkit-scrollbar { display: none; }

.hx-tab {
  flex: 1 0 auto;
  position: relative;
  min-height: 52px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color 200ms ease, background 200ms ease;
}

.hx-tab::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 300ms var(--hx-ease);
}

.hx-tab:hover { color: var(--ink); background: rgba(176, 133, 51, 0.05); }

.hx-tab[aria-selected="true"] { color: var(--ink); background: var(--surface); }
.hx-tab[aria-selected="true"]::after { transform: scaleX(1); }

.hx-panels { display: grid; }

.hx-panel {
  grid-area: 1 / 1;
  display: grid;
  gap: 18px;
  padding: 22px 18px 24px;
  min-width: 0;
}

@media (min-width: 860px) {
  .hx-panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 32px;
    align-items: center;
    padding: 30px 28px 32px;
  }
}

.hx-panel[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .hx-panel:not([hidden]) { animation: hx-panel-in 380ms var(--hx-ease); }
  @keyframes hx-panel-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
}

.hx-panel-copy { display: grid; gap: 10px; align-content: start; min-width: 0; }

.hx-panel-title {
  margin: 0;
  font-size: clamp(21px, 4.6vw, 30px);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--ink);
}

.hx-panel-body {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
}

.hx-crop {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--surface-2);
  min-width: 0;
}

.hx-crop-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}

/* light-mode probability bar used inside crops */
.hx-crop .hx-prob-bar { background: var(--surface-3); }
.hx-crop .hx-prob-bar .hx-seg-away { background: var(--ink-2); }
.hx-crop .hx-prob-bar .hx-seg-home { background: linear-gradient(90deg, var(--accent-deep), var(--accent)); }
.hx-crop .hx-prob-bar span { width: auto; transition: none; }

.hx-crop-rows {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.hx-crop-score {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  padding: 6px 0 2px;
  font-family: var(--font-mono);
  font-size: clamp(28px, 8vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.hx-crop-score span { font-size: 0.42em; color: var(--faint); font-weight: 600; }

/* box-score crop */
.hx-playerrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
}

.hx-playerrow:last-of-type { border-bottom: 0; }

.hx-player-name { font-size: 13.5px; font-weight: 700; color: var(--ink); }

.hx-player-meta {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.hx-player-cells { display: flex; gap: 6px; }

.hx-cell {
  display: grid;
  gap: 1px;
  justify-items: center;
  min-width: 46px;
  padding: 6px 7px;
  border-radius: 5px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
}

.hx-cell-label {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--faint);
}

.hx-cell-val {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* signal pills: always carry their word, never colour alone */
.hx-signals { display: grid; gap: 8px; }

.hx-signal-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-2);
}

.hx-signal {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}

.hx-signal::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}

.hx-signal--strong { background: var(--positive-soft); color: var(--positive); border-color: rgba(44, 106, 74, 0.3); }
.hx-signal--neutral { background: var(--neutral-soft); color: var(--muted); border-color: var(--line-strong); }
.hx-signal--weak { background: var(--negative-soft); color: var(--negative); border-color: rgba(139, 53, 39, 0.28); }

/* ── distribution explorer ──────────────────────
   The one section where the visitor drives. Drag the threshold and the
   readout recomputes off the same 10,000-run distribution the hero
   built. It teaches what a distribution is by making you push on it. */

.hx-explorer {
  position: relative;
  display: grid;
  gap: 18px;
  padding: 22px 18px 24px;
  border-radius: 18px;
  color: var(--hx-on-void);
  background:
    radial-gradient(110% 130% at 100% 0%, var(--hx-glow), transparent 58%),
    linear-gradient(158deg, var(--hx-void-2) 0%, var(--hx-void) 72%);
  border: 1px solid var(--hx-hairline);
  overflow: hidden;
}

@media (min-width: 720px) { .hx-explorer { padding: 30px 28px 32px; } }

.hx-explorer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.hx-explorer-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.hx-explorer-title {
  margin: 0;
  font-size: clamp(20px, 5vw, 27px);
  font-weight: 900;
  letter-spacing: -0.035em;
  color: #fbf8f1;
}

/* The readout: the number the visitor is moving. It is display-scale on
   purpose, because it is the answer to the question the section asks. */
.hx-readout {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.hx-readout-num {
  font-family: var(--font-mono);
  font-size: clamp(46px, 15vw, 82px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.hx-readout-text {
  margin: 0;
  max-width: 26ch;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--hx-on-void-dim);
}

.hx-readout-text strong { color: var(--hx-on-void); font-weight: 700; }

/* explorer histogram: same construction as the hero's, with the runs
   above the threshold lit and the rest dimmed */
.hx-explorer-hist {
  display: grid;
  grid-template-columns: repeat(28, minmax(0, 1fr));
  align-items: end;
  gap: 2px;
  height: 96px;
}

@media (min-width: 720px) { .hx-explorer-hist { height: 124px; } }

.hx-explorer-hist i {
  display: block;
  min-height: 2px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, rgba(242, 238, 228, 0.2), rgba(242, 238, 228, 0.06));
  transition: background 180ms ease;
}

.hx-explorer-hist i.is-over {
  background: linear-gradient(180deg, rgba(176, 133, 51, 0.9), rgba(176, 133, 51, 0.3));
}

.hx-slider-wrap { display: grid; gap: 10px; }

.hx-slider-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hx-on-void-faint);
  font-variant-numeric: tabular-nums;
}

/* A native range input, restyled. Native because it is keyboard
   operable, screen-reader announced, and thumb-friendly for free. */
.hx-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: grab;
}

.hx-slider:active { cursor: grabbing; }

.hx-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.hx-slider::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.hx-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -11px;
  border-radius: 999px;
  background: var(--accent);
  border: 2px solid #0b0b0c;
  box-shadow: 0 0 0 4px rgba(176, 133, 51, 0.2), 0 6px 16px -6px rgba(0, 0, 0, 0.9);
  transition: box-shadow 200ms ease, transform 200ms ease;
}

.hx-slider::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--accent);
  border: 2px solid #0b0b0c;
  box-shadow: 0 0 0 4px rgba(176, 133, 51, 0.2);
}

.hx-slider:hover::-webkit-slider-thumb { transform: scale(1.08); }
.hx-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(176, 133, 51, 0.35); }

.hx-explorer-foot {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 9.5px;
  line-height: 1.55;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hx-on-void-faint);
}

/* ── dark slab (pipeline, final CTA) ─────────────
   Full-bleed near-black rooms. Grain is an inline SVG turbulence at
   very low opacity: it stops a large flat dark area from banding on
   cheap phone panels, and costs no request. */

.hx-slab {
  position: relative;
  color: var(--hx-on-void);
  background:
    radial-gradient(70% 110% at 12% 0%, var(--hx-glow), transparent 60%),
    linear-gradient(168deg, var(--hx-void-2) 0%, var(--hx-void) 62%);
  border-top: 1px solid var(--hx-hairline);
  border-bottom: 1px solid var(--hx-hairline);
  overflow: hidden;
}

.hx-slab::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}

.hx-slab > * { position: relative; z-index: 1; }

.hx-slab .hx-eyebrow { color: var(--accent); }
.hx-slab .hx-eyebrow::before { background: var(--accent); }
.hx-slab .hx-h2 { color: #fbf8f1; }
.hx-slab .hx-h2 em { color: var(--accent); }
.hx-slab .hx-lede { color: var(--hx-on-void-dim); }

.hx-slab-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
}

.hx-slab-cta .btn-arrow { transition: transform 220ms var(--hx-ease); }
.hx-slab-cta:hover { color: var(--hx-on-void); }
.hx-slab-cta:hover .btn-arrow { transform: translateX(5px); }

/* ── pipeline ───────────────────────────────────
   Three stages with a connector that draws itself when the section
   arrives. The connector is the mechanism, so it earns the motion. */

.hx-pipe {
  display: grid;
  gap: 14px;
  counter-reset: hx-step;
}

@media (min-width: 900px) {
  .hx-pipe { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}

.hx-pipe-step {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 22px 20px;
  border: 1px solid var(--hx-hairline);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.03);
  min-width: 0;
  overflow: hidden;
  transition: border-color 300ms ease, background 300ms ease, transform 300ms var(--hx-ease);
}

.hx-pipe-step:hover {
  border-color: rgba(176, 133, 51, 0.45);
  background: rgba(176, 133, 51, 0.06);
  transform: translateY(-3px);
}

/* The connector: a gold rule that runs between the cards. Vertical on
   phones, horizontal on desktop. Scales in from the leading edge when
   the step reveals. */
.hx-pipe-step::after {
  content: "";
  position: absolute;
  background: linear-gradient(180deg, var(--accent), transparent);
  left: 50%;
  bottom: -14px;
  width: 1px;
  height: 14px;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 500ms var(--hx-ease) 260ms;
}

.hx-pipe-step:last-child::after { display: none; }
.hx-pipe-step.is-in::after { transform: scaleY(1); }

@media (min-width: 900px) {
  .hx-pipe-step::after {
    left: auto;
    right: -20px;
    bottom: auto;
    top: 50%;
    width: 20px;
    height: 1px;
    background: linear-gradient(90deg, var(--accent), transparent);
    transform: scaleX(0);
    transform-origin: left;
  }
  .hx-pipe-step.is-in::after { transform: scaleX(1); }
}

.hx-pipe-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--accent);
}

.hx-pipe-title {
  margin: 0;
  font-size: clamp(19px, 4.4vw, 25px);
  font-weight: 900;
  letter-spacing: -0.032em;
  color: #fbf8f1;
}

.hx-pipe-copy {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--hx-on-void-dim);
}

/* The category phrase, set as a wide mono rule under the three steps. */
.hx-phrase {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0;
  padding-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.hx-phrase i {
  flex: 1 1 30px;
  height: 1px;
  min-width: 20px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

/* ── not another picks model ────────────────────
   Split layout: an oversized statement on the left, the substance on
   the right. On phones it stacks and the statement stays large. */

.hx-split {
  display: grid;
  gap: 22px;
  align-items: start;
}

@media (min-width: 960px) {
  .hx-split { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 56px; }
}

.hx-points {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.hx-points li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 16px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--muted);
  transition: background 240ms ease, padding-left 240ms var(--hx-ease);
}

.hx-points li:hover { background: rgba(176, 133, 51, 0.045); padding-left: 12px; }

.hx-points li::before {
  content: counter(hx-point, decimal-leading-zero);
  counter-increment: hx-point;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--accent);
  padding-top: 4px;
}

.hx-points { counter-reset: hx-point; }

.hx-points strong { display: block; color: var(--ink); font-weight: 800; font-size: 16px; margin-bottom: 2px; }

/* ── trust ──────────────────────────────────────
   Numbers count up when the row arrives. Only reproducible facts get
   this treatment: an animated number that cannot be verified is just
   theatre. */

.hx-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--line-soft);
  overflow: hidden;
}

@media (min-width: 860px) {
  .hx-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.hx-fact {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 22px 18px;
  background: var(--surface);
  min-width: 0;
  transition: background 260ms ease;
}

.hx-fact:hover { background: var(--surface-2); }

.hx-fact-num {
  font-family: var(--font-mono);
  font-size: clamp(30px, 7vw, 44px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.hx-fact-label {
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

/* ── plans ──────────────────────────────────────── */

.hx-plans {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 800px) {
  .hx-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

.hx-plan {
  position: relative;
  display: grid;
  gap: 16px;
  align-content: start;
  padding: 26px 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  min-width: 0;
  transition: transform 300ms var(--hx-ease), box-shadow 300ms var(--hx-ease), border-color 300ms ease;
}

.hx-plan:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: 0 26px 60px -34px rgba(12, 12, 14, 0.45);
}

.hx-plan--pro {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--surface) 42%);
}

.hx-plan--pro:hover { border-color: var(--accent-deep); box-shadow: 0 26px 60px -30px rgba(138, 100, 34, 0.4); }

.hx-plan-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hx-plan-name {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

.hx-plan-price {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-family: var(--font-sans);
  font-size: clamp(40px, 10vw, 54px);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--ink);
}

.hx-plan-per {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.hx-plan-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}

.hx-plan-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: start;
}

.hx-plan-list li::before {
  content: "";
  width: 15px;
  height: 15px;
  margin-top: 3px;
  border-radius: 999px;
  background: var(--surface-3);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b73' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 10px;
  background-position: center;
  background-repeat: no-repeat;
}

.hx-plan--pro .hx-plan-list li::before {
  background-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.hx-plan-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  border-radius: var(--r-sm);
  font-size: 15.5px;
  font-weight: 700;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  transition: background 200ms ease, border-color 200ms ease, transform 200ms var(--hx-ease);
}

.hx-plan-cta:hover { background: var(--ink-2); border-color: var(--ink-2); color: #fff; transform: translateY(-1px); }

.hx-plan-cta--gold { background: var(--accent); border-color: var(--accent-deep); color: #14120e; }
.hx-plan-cta--gold:hover { background: #c9993c; border-color: var(--accent-deep); color: #14120e; }

.hx-plan-foot {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

/* ── FAQ ────────────────────────────────────────
   <details> keeps every answer in the DOM while collapsed, so it stays
   crawlable and reachable by assistive tech. */

.hx-faq {
  display: grid;
  border-top: 1px solid var(--line);
}

.hx-faq-item {
  border-bottom: 1px solid var(--line);
  transition: background 240ms ease;
}

.hx-faq-item[open] { background: var(--surface); }

.hx-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 66px;
  padding: 16px 4px;
  cursor: pointer;
  font-size: clamp(16px, 3.6vw, 19px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  list-style: none;
}

.hx-faq-q::-webkit-details-marker { display: none; }

/* Plus that rotates into a minus. Two rules, one pseudo-element. */
.hx-faq-icon {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  transition: border-color 240ms ease, background 240ms ease, transform 300ms var(--hx-ease);
}

.hx-faq-icon::before,
.hx-faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 1.6px;
  background: var(--ink-2);
  transform: translate(-50%, -50%);
  transition: transform 300ms var(--hx-ease), background 240ms ease;
}

.hx-faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }

.hx-faq-item[open] .hx-faq-icon { border-color: var(--accent); background: var(--accent); transform: rotate(180deg); }
.hx-faq-item[open] .hx-faq-icon::before,
.hx-faq-item[open] .hx-faq-icon::after { background: #fff; }
.hx-faq-item[open] .hx-faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }

.hx-faq-q:hover { color: var(--accent-deep); }
.hx-faq-q:hover .hx-faq-icon { border-color: var(--accent); }

.hx-faq-a {
  margin: 0;
  padding: 0 4px 20px;
  max-width: 68ch;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted);
}

.hx-faq-a a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }

/* ── final CTA ──────────────────────────────────── */

.hx-final { justify-items: center; text-align: center; }
.hx-final .hx-h2 { font-size: clamp(32px, 8vw, 68px); }
.hx-final .hx-lede { max-width: 44ch; }

.hx-final-actions {
  display: grid;
  gap: 12px;
  width: 100%;
  justify-items: center;
  margin-top: 6px;
}

@media (min-width: 560px) {
  .hx-final-actions { display: flex; gap: 16px; justify-content: center; }
}

.hx-final-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  min-height: 58px;
  padding: 0 30px;
  border-radius: var(--r-md);
  background: var(--accent);
  border: 1px solid var(--accent-deep);
  color: #14120e;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  box-shadow: 0 18px 40px -18px rgba(176, 133, 51, 0.6);
  transition: background 220ms ease, transform 220ms var(--hx-ease), box-shadow 220ms ease;
}

.hx-final-primary:hover {
  background: #d0a043;
  color: #14120e;
  transform: translateY(-2px);
  box-shadow: 0 26px 52px -20px rgba(176, 133, 51, 0.75);
}

.hx-final-primary .btn-arrow { transition: transform 240ms var(--hx-ease); }
.hx-final-primary:hover .btn-arrow { transform: translateX(5px); }

.hx-final-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 0 30px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: var(--hx-on-void);
  font-size: 16.5px;
  font-weight: 650;
  transition: border-color 220ms ease, color 220ms ease, background 220ms ease;
}

.hx-final-secondary:hover { border-color: var(--accent); color: var(--accent); background: rgba(176, 133, 51, 0.08); }

@media (min-width: 560px) {
  .hx-final-primary, .hx-final-secondary { width: auto; }
}

/* ── sticky mobile CTA ──────────────────────────
   Appears only after the hero CTA has scrolled away, and only on
   phones. Dismissible, respects the iOS safe area, and sits above the
   footer rather than covering it. */

.hx-sticky {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(11, 11, 12, 0.94);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 44px -20px rgba(0, 0, 0, 0.8);
  transform: translateY(140%);
  transition: transform 420ms var(--hx-ease);
}

.hx-sticky.is-up { transform: translateY(0); }

.hx-sticky[hidden] { display: none !important; }

@media (min-width: 900px) { .hx-sticky { display: none !important; } }

.hx-sticky-copy {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hx-on-void-dim);
  line-height: 1.4;
}

.hx-sticky-copy strong { display: block; color: var(--hx-on-void); font-size: 12px; letter-spacing: 0.04em; }

.hx-sticky-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  background: var(--accent);
  color: #14120e;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.hx-sticky-cta:hover { background: #d0a043; color: #14120e; }

.hx-sticky-close {
  flex: none;
  width: 30px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--hx-on-void-faint);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.hx-sticky-close:hover { color: var(--hx-on-void); }

@media (prefers-reduced-motion: reduce) {
  .hx-sticky { transition: none; }
}

/* ── footer groups ──────────────────────────────── */

.hx-foot-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 20px;
  width: 100%;
}

@media (min-width: 760px) {
  .hx-foot-groups { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 30px; }
}

.hx-foot-group { display: grid; gap: 11px; align-content: start; min-width: 0; }

.hx-foot-group h3 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
}

.hx-foot-group a {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  line-height: 1.35;
  transition: color 180ms ease, transform 180ms var(--hx-ease);
}

.hx-foot-group a:hover { color: var(--accent-deep); transform: translateX(3px); }

/* ── motion opt-out ─────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .hx-ribbon-track { animation: none; }
  .hx-pipe-step, .hx-plan, .hx-fact, .hx-points li, .hx-foot-group a { transition: none; }
  .hx-pipe-step:hover, .hx-plan:hover { transform: none; }
  .hx-pipe-step::after { transform: none; }
  .hx-panel:not([hidden]) { animation: none; }
}

/* ══ OddsJam-informed density pass ══════════════════════════════════
   What we took from their page: a hard-specifics badge strip under the
   hero, a scannable benefit-led card grid instead of a click-to-see tab
   instrument, and repeated CTA bands between sections.

   What we did not take: the register. Their page is built on "Make
   $500-$1000+ weekly" and profit testimonials, which is a claim we do
   not make and a product we are not. Structure transfers; claims do not. */

/* ── badge strip ─────────────────────────────── */

.hx-badges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--line-soft);
  overflow: hidden;
}

@media (min-width: 760px) {
  .hx-badges { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.hx-badge {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  background: var(--surface);
  min-width: 0;
}

.hx-badge b {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.hx-badge span {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--muted);
}

/* ── benefit card grid ───────────────────────────
   Their "Why OddsJam will work for you" block: name, benefit headline,
   one line. Readable at a glance without opening anything. */

.hx-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

@media (min-width: 660px) { .hx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1020px) { .hx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }

.hx-card {
  position: relative;
  display: grid;
  gap: 7px;
  align-content: start;
  padding: 20px 18px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  min-width: 0;
  overflow: hidden;
  transition: transform 280ms var(--hx-ease), border-color 280ms ease, box-shadow 280ms var(--hx-ease);
}

/* Gold rule wipes across the top edge on hover, the same gesture the
   header links and the primary CTA use. */
.hx-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), rgba(176, 133, 51, 0.1));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 340ms var(--hx-ease);
}

.hx-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: 0 22px 48px -32px rgba(12, 12, 14, 0.45);
}

.hx-card:hover::before { transform: scaleX(1); }

.hx-card-kicker {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

.hx-card-title {
  margin: 0;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--ink);
}

.hx-card-copy {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .hx-card, .hx-card::before { transition: none; }
  .hx-card:hover { transform: none; }
}

/* ── mid-page CTA band ───────────────────────────
   Their page re-asks twice before the footer. Ours re-asks in the same
   two places, with the offer terms attached so the ask is never
   ambiguous about what it costs. */

.hx-band {
  display: grid;
  gap: 14px;
  align-items: center;
  padding: 24px 20px;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: linear-gradient(140deg, var(--accent-soft) 0%, var(--surface) 58%);
}

@media (min-width: 800px) {
  .hx-band {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    padding: 28px 30px;
  }
}

.hx-band-title {
  margin: 0;
  font-size: clamp(21px, 4.4vw, 30px);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--ink);
}

.hx-band-copy {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}

.hx-band-actions { display: grid; gap: 8px; justify-items: stretch; }

@media (min-width: 800px) { .hx-band-actions { justify-items: end; } }

.hx-band .hx-cta-primary { width: 100%; min-height: 52px; font-size: 16px; }

@media (min-width: 800px) { .hx-band .hx-cta-primary { width: auto; } }

.hx-band-fine {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

@media (min-width: 800px) { .hx-band-fine { text-align: right; } }