/* ==========================================================================
   NEXUS SITE — page + section composition
   --------------------------------------------------------------------------
   Layer 2 of 2. Depends on nexus-system.css for tokens and primitives.
   This file owns the *rhythm*: how sections differ from one another.

     01  Section shell + rhythm
     02  Hero + hand-off reveal
     03  Proof band
     04  Sticky sequence (the loop)
     05  Coverage registry
     06  Terminal showcase
     07  Evidence / track record split
     08  Bento modules
     09  Workflow rail
     10  Pricing
     11  FAQ accordion
     12  Closing call
     13  Interior pages
   ========================================================================== */

/* ── 01 SECTION SHELL + RHYTHM ─────────────────────────────────────────── */

/* Three section tones, alternated deliberately so no two adjacent movements
   read the same. `sunken` is reserved for full-bleed instrument moments. */
.section { position: relative; padding: var(--s24) 0; }
.section-tight  { padding: var(--s16) 0; }
.section-alt    { background: var(--surface-1); }
.section-sunken { background: var(--surface-sunken); }

.section-alt::before, .section-sunken::before {
  content: '';
  position: absolute; inset-inline: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

/* Section header. `.head-left` breaks the centered default — used on the
   asymmetric movements so the page stops feeling like a stack of slides. */
.section-head { max-width: 720px; margin: 0 auto var(--s12); text-align: center; }
.section-head .eyebrow { margin-bottom: var(--s4); }
.section-head h2 { margin-bottom: var(--s4); }

.head-left { margin-inline: 0; text-align: left; }

/* Ambient glow anchored to a section — used at most twice per page. */
.section-glow::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(79,124,255,0.09), transparent 70%);
  pointer-events: none;
}

@media (max-width: 700px) {
  .section { padding: var(--s16) 0; }
  .section-tight { padding: var(--s12) 0; }
  .section-head { margin-bottom: var(--s8); }
}

/* ── 02 HERO + HAND-OFF REVEAL ─────────────────────────────────────────── */

.hero {
  position: relative;
  padding: var(--s16) 0 var(--s12);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: -20% 0 auto;
  height: 90%;
  background:
    radial-gradient(ellipse 55% 60% at 22% 10%, rgba(79,124,255,0.16), transparent 65%),
    radial-gradient(ellipse 45% 50% at 85% 0%, rgba(139,92,246,0.10), transparent 70%);
  pointer-events: none;
}
/* Faint engineering grid — sells "instrument" without adding noise. */
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(126,160,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126,160,255,0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent 75%);
  pointer-events: none;
}

.hero-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: clamp(28px, 3.4vw, 56px);
  align-items: center;
}

.hero-kicker { margin-bottom: var(--s5); }
/* Capped below --fs-display so "Every forecast" holds one line and the
   headline stays exactly two lines on desktop, as the reference requires. */
.hero-headline {
  font-size: clamp(38px, 4.6vw, 64px);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
.hero-headline span { display: block; }
.hero-rule {
  width: 62px; height: 3px; margin: var(--s5) 0 var(--s5);
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
}
.hero-sub { max-width: 46ch; margin-bottom: var(--s8); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s6); }
.hero-legal { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.6; }

/* --- the instrument --- */
.instrument { position: relative; }

.instrument-topbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s2);
  padding: 10px var(--s5);
  background: var(--surface-3);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  color: var(--text-2);
}
.instrument-topbar strong { color: var(--text); font-weight: 600; }
.instrument-topbar > span { display: inline-flex; align-items: center; gap: var(--s2); }

.instrument-workspace { display: grid; grid-template-columns: auto minmax(0, 1fr); }

.instrument-rail {
  display: flex; flex-direction: column; gap: 5px;
  padding: var(--s4) var(--s3);
  border-right: 1px solid var(--line-subtle);
  background: rgba(4,5,10,0.45);
}
.instrument-rail button {
  padding: 7px 12px;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  text-align: center;
  transition: all var(--dur-fast) var(--ease-out);
}
.instrument-rail button:hover { color: var(--text); background: var(--surface-2); }
.instrument-rail button.active {
  color: var(--text);
  background: var(--brand-wash);
  border-color: var(--brand-edge);
  box-shadow: 0 0 12px rgba(79,124,255,0.15);
}
.rail-divider { height: 1px; margin: var(--s2) 4px; background: var(--line); }

.instrument-main { padding: var(--s4) var(--s5) var(--s5); min-width: 0; }

.instrument-controls {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s3);
  margin-bottom: var(--s4);
}
.instrument-eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-bright);
}
.instrument-countdown {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.instrument-countdown strong {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--state-pass);
  text-shadow: 0 0 14px rgba(46,230,168,0.4);
}

.forecast-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--s5);
  padding-bottom: var(--s5);
  margin-bottom: var(--s4);
  border-bottom: 1px solid var(--line-subtle);
}
.forecast-bands { min-width: 0; }
.forecast-lock {
  margin: 10px 0 var(--s3);
  font-size: var(--fs-xs);
  color: var(--text-3);
}
/* Sits beside the band readouts, so it gets its own divider and centres
   against them rather than floating at the top of the cell.

   Stacked as rows, not three columns. Three columns gave each metric about
   76px, which a numeric value fits and the word "Pending" does not — markets
   without aggregated accuracy rendered as "PendingPending$4.74" running over
   each other. Label left, value right always fits. */
.instrument-metrics {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-content: center;
  justify-content: center;
  padding-left: var(--s5);
  border-left: 1px solid var(--line-subtle);
  min-width: 0;
}
.instrument-metrics .stat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s3);
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid var(--line-subtle);
}
.instrument-metrics .stat:last-child { border-bottom: none; }
.instrument-metrics .stat-label {
  order: 1;
  line-height: 1.3;
  text-transform: uppercase;
  /* "Avg miss - 30 candles" carries its sample size and wraps to two lines;
     "MAE goal" and "Avg band" do not. Without a reservation the first row ran
     13px taller than the other two and broke the rhythm of the stack. Two
     lines are reserved for all three. Relative to the label's own size, so it
     survives a type-scale change. */
  min-height: 2.6em;
}
.instrument-metrics .stat-value {
  order: 2;
  font-size: 17px;
  text-align: right;
  white-space: nowrap;
}
/* Word values ("Pending") need to sit at label scale, not figure scale. */
.instrument-metrics .stat-value.is-text {
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--text-3);
}

.chart-heading {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s2);
  margin-bottom: var(--s3);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.chart-legend { display: flex; gap: var(--s3); }
.chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend span::before { content: ''; width: 12px; height: 2px; border-radius: 2px; background: currentColor; }
.legend-high   { color: var(--brand-bright); }
.legend-low    { color: var(--brand-deep); }
.legend-actual { color: var(--data-up); }

#evidence-chart { width: 100%; height: 230px; }
#eo-chart-caption { margin-top: var(--s2); font-size: var(--fs-xs); color: var(--text-3); }

/* Receipt sequence — the four-beat proof of the loop. */
.receipt-sequence {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  background: rgba(4,5,10,0.5);
}
.sequence-step {
  position: relative;
  padding: var(--s4) var(--s4);
  border-right: 1px solid var(--line-subtle);
}
.sequence-step:last-child { border-right: none; }
.sequence-step strong {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 4px;
}
.sequence-step p { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.5; margin-bottom: 5px; }
.sequence-step time {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  color: var(--text-3);
}
.sequence-icon {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin-bottom: 10px;
  font-size: 14px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--text-3);
}
.sequence-icon > svg { width: 14px; height: 14px; display: block; }
.sequence-step.complete .sequence-icon { color: var(--state-pass); border-color: rgba(46,230,168,0.35); background: var(--pass-wash); }
.sequence-step.complete strong { color: var(--text); }
.sequence-step.active .sequence-icon {
  color: var(--brand-bright);
  border-color: var(--brand-edge);
  background: var(--brand-wash);
  box-shadow: 0 0 16px rgba(79,124,255,0.3);
}
.sequence-step.active strong { color: var(--text); }

/* --- hand-off reveal --- */
/* The instrument is held back until the sigil hands it over. `.handoff-armed`
   is set synchronously in the document head, so the panel is never painted
   and then hidden. A no-JS or reduced-motion visitor never gets the class. */
.instrument-reveal {
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}
.handoff-armed .instrument-reveal {
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  /* Failsafe: if the motion bundle never loads, the instrument still arrives.
     Nothing may leave paid-for content stranded behind an animation. */
  animation: nx-handoff-failsafe 1ms linear 4s forwards;
}
.handoff-armed .instrument-reveal.delivered { opacity: 1; transform: none; animation: none; }

@keyframes nx-handoff-failsafe { to { opacity: 1; transform: none; } }

.handoff-stage {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  z-index: 5;
}
.handoff-canvas { width: 100%; height: 100%; opacity: 0; transition: opacity 500ms var(--ease-out); }
.handoff-stage.running .handoff-canvas { opacity: 1; }
.handoff-stage.done { opacity: 0; visibility: hidden; transition: opacity 600ms var(--ease-out), visibility 600ms; }

/* The light sweep that travels down the panel as the forecast is released. */
.handoff-sweep {
  position: absolute; inset-inline: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand-bright), var(--state-pass), transparent);
  box-shadow: 0 0 24px rgba(126,160,255,0.75);
  opacity: 0;
  z-index: 6;
}
.handoff-stage.sweeping .handoff-sweep { animation: nx-sweep 900ms var(--ease-in-out) forwards; }

@keyframes nx-sweep {
  0%   { opacity: 0; transform: translateY(0)    scaleX(0.35); }
  15%  { opacity: 1; }
  85%  { opacity: 1; transform: translateY(var(--sweep-to, 460px)) scaleX(1); }
  100% { opacity: 0; transform: translateY(var(--sweep-to, 460px)) scaleX(1); }
}

@media (max-width: 1040px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s10); }
  .hero-sub { max-width: none; }
  .receipt-sequence { grid-template-columns: repeat(2, 1fr); }
  .sequence-step:nth-child(2) { border-right: none; }
  .sequence-step:nth-child(-n+2) { border-bottom: 1px solid var(--line-subtle); }
}
@media (max-width: 720px) {
  .hero { padding-top: var(--s10); }
  .instrument-workspace { grid-template-columns: minmax(0, 1fr); }
  /* Twelve columns divide cleanly by both groups: six assets at span 4 give
     3-per-row, four timeframes at span 3 give one full row. The previous
     `flex: 1 1 auto` wrap fitted five assets on the first row and then let
     flex-grow stretch the orphaned sixth (XAU) across the full width. */
  .instrument-rail {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 5px;
    border-right: none; border-bottom: 1px solid var(--line-subtle);
  }
  .instrument-rail [data-eo-asset] { grid-column: span 4; }
  .instrument-rail [data-eo-tf]    { grid-column: span 3; }
  /* 44px is the comfortable touch minimum; these were 36px. */
  .instrument-rail button { min-width: 0; min-height: 44px; }
  .rail-divider { grid-column: 1 / -1; height: 1px; margin: 4px 0; }
  .forecast-overview { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .instrument-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-left: 0; padding-top: var(--s4);
    border-left: none; border-top: 1px solid var(--line-subtle);
  }
  #evidence-chart { height: 190px; }
}
@media (max-width: 460px) {
  .receipt-sequence { grid-template-columns: minmax(0, 1fr); }
  .sequence-step { border-right: none; border-bottom: 1px solid var(--line-subtle); }
  .sequence-step:last-child { border-bottom: none; }
}

/* ── 03 PROOF BAND ─────────────────────────────────────────────────────── */

/* Full-bleed measured band directly under the hero. Deliberately a different
   texture from both the hero and the first content section. */
.proof-band {
  position: relative;
  padding: var(--s8) 0;
  background: var(--surface-sunken);
  border-block: 1px solid var(--line);
}
.proof-band::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 63px, var(--line-subtle) 63px 64px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
  pointer-events: none;
}
.proof-band-inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s6);
}
.proof-item { position: relative; padding-left: var(--s5); }
.proof-item::before {
  content: '';
  position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--brand), transparent);
}
.proof-item .stat-note { margin-top: 6px; }

@media (max-width: 900px) { .proof-band-inner { grid-template-columns: repeat(2, 1fr); gap: var(--s6) var(--s5); } }
@media (max-width: 460px) { .proof-band-inner { grid-template-columns: minmax(0, 1fr); } }

/* ── 04 STICKY SEQUENCE (THE LOOP) ─────────────────────────────────────── */

/* Left column pins while the right column scrolls — the single biggest break
   from the old centered-stack rhythm. */
.sticky-split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
}
.sticky-col { position: sticky; top: calc(var(--nav-h) + var(--s10)); }

.loop-steps { display: flex; flex-direction: column; gap: var(--s4); }
.loop-step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s5);
  padding: var(--s6);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.loop-step:hover { border-color: var(--brand-edge); background: var(--surface-3); }
.loop-index {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  font-family: var(--mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--brand-bright);
  background: var(--brand-wash);
  border: 1px solid var(--brand-edge);
  border-radius: var(--r);
}
.loop-step h3 { margin-bottom: 6px; }
.loop-step p { font-size: var(--fs-sm); color: var(--text-2); }

/* Connector line threading the steps together. */
.loop-steps { position: relative; }
.loop-steps::before {
  content: '';
  position: absolute; left: 45px; top: 42px; bottom: 42px; width: 1px;
  background: linear-gradient(180deg, var(--brand-edge), var(--line-subtle));
  z-index: 0;
}
.loop-step { z-index: 1; }

@media (max-width: 900px) {
  .sticky-split { grid-template-columns: minmax(0, 1fr); gap: var(--s8); }
  .sticky-col { position: static; }
  .loop-steps::before { display: none; }
  .loop-step { grid-template-columns: minmax(0, 1fr); gap: var(--s3); padding: var(--s5); }
}

/* ── 05 COVERAGE REGISTRY ──────────────────────────────────────────────── */

.registry-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s5);
  margin-bottom: var(--s8);
}
.registry-count {
  display: flex; align-items: baseline; gap: var(--s3);
  font-family: var(--mono);
}
.registry-count b {
  font-size: clamp(40px, 5vw, 62px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text);
}
.registry-count span {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-3);
}

/* Dense market tiles. Fixed at three across so the six featured markets fill
   two clean rows instead of leaving an orphan. */
.market-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-subtle);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.market-tile {
  padding: var(--s5);
  background: var(--surface-2);
  transition: background-color var(--dur) var(--ease-out);
}
.market-tile:hover { background: var(--surface-3); }
.market-sym {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 9px;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--brand-bright);
  background: var(--brand-wash);
  border: 1px solid var(--brand-edge);
  border-radius: var(--r-sm);
}
.market-tile h3 { font-size: var(--fs-h4); margin-bottom: 5px; }
.market-tile p { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.5; }

/* Horizon strip — four beats, mono, equal weight. */
.horizon-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: var(--s5);
  background: var(--line-subtle);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.horizon-cell { padding: var(--s5); background: var(--surface-2); }
.horizon-cell strong {
  display: block;
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 500;
  color: var(--brand-bright);
  margin-bottom: 5px;
}
.horizon-cell span { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.5; }

@media (max-width: 900px) {
  .market-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .horizon-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .registry-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) {
  .market-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Marquee of all covered markets. */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track {
  display: inline-flex; gap: var(--s2);
  white-space: nowrap;
  animation: nx-marquee 42s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes nx-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── 06 TERMINAL SHOWCASE ──────────────────────────────────────────────── */

.showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--line-subtle);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--e3);
}
.showcase-pane {
  display: flex; flex-direction: column;
  padding: var(--s6);
  background: var(--surface-2);
  min-width: 0;
}
.showcase-pane.center { background: var(--surface-3); }

.deck-list { display: flex; flex-direction: column; gap: 4px; }
.deck-list-label {
  margin: var(--s3) 0 6px;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-3);
}
.deck-list-label:first-child { margin-top: 0; }
.deck-list button {
  padding: 9px 12px;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  text-align: left;
  color: var(--text-2);
  background: var(--surface-sunken);
  border: 1px solid var(--line-subtle);
  border-radius: var(--r-sm);
  transition: all var(--dur-fast) var(--ease-out);
}
.deck-list button:hover { color: var(--text); border-color: var(--line-strong); }
.deck-list button.active { color: var(--text); background: var(--brand-wash); border-color: var(--brand-edge); }

.deck-status {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s2);
  margin-bottom: var(--s4);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.deck-status > span { display: inline-flex; align-items: center; gap: var(--s2); }

.deck-note {
  margin-top: var(--s4);
  padding: var(--s4);
  background: var(--surface-sunken);
  border: 1px solid var(--line-subtle);
  border-left: 2px solid var(--brand);
  border-radius: var(--r-sm);
}
.deck-note h4 {
  display: flex; align-items: center; gap: var(--s2);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.deck-note p { font-size: var(--fs-xs); color: var(--text-2); line-height: 1.6; }

/* Decorative chart stand-in for the preview pane. Grows to fill the pane so
   the three columns bottom out together. */
.deck-chart {
  position: relative;
  flex: 1 1 auto;
  min-height: 200px;
  border: 1px solid var(--line-subtle);
  border-radius: var(--r-sm);
  background:
    linear-gradient(rgba(126,160,255,0.05) 1px, transparent 1px) 0 0 / 100% 25%,
    linear-gradient(90deg, rgba(126,160,255,0.05) 1px, transparent 1px) 0 0 / 16.6% 100%,
    var(--surface-sunken);
  overflow: hidden;
}
.deck-chart::before {
  content: '';
  position: absolute; left: 8%; right: 8%; top: 30%; height: 34%;
  border-top: 2px dashed var(--brand-bright);
  border-bottom: 2px dashed var(--brand-deep);
  background: linear-gradient(180deg, rgba(79,124,255,0.16), rgba(79,124,255,0.04));
  border-radius: 3px;
}
.deck-chart::after {
  content: '';
  position: absolute; left: 8%; right: 8%; top: 44%; height: 42%;
  border-top: 2px solid var(--data-up);
  border-radius: 50%;
  filter: drop-shadow(0 0 8px rgba(22,216,118,0.4));
}
.deck-caption { margin-top: var(--s3); font-size: var(--fs-xs); color: var(--text-3); }

/* ── 07 EVIDENCE SPLIT ─────────────────────────────────────────────────── */

.evidence-split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.window-stack { display: flex; flex-direction: column; gap: var(--s3); }
.window-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s4);
  align-items: center;
  padding: var(--s5);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease-out);
}
.window-row.featured { background: var(--surface-3); border-color: var(--brand-edge); box-shadow: var(--e2); }
.window-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--state-live);
}
.window-rate {
  font-family: var(--mono);
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--state-pass);
  text-shadow: 0 0 26px rgba(46,230,168,0.28);
}
.window-meta { text-align: right; }
.window-meta strong {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-sm);
  color: var(--text);
}
.window-meta span { font-size: var(--fs-micro); color: var(--text-3); }

/* Rolling MAE stack — mirrors the ROLLING MAE panel in the Terminal.
   Dollars, not percentages: the average miss between the forecast bounds and
   the candle's actual extremes, measured against the engine's own goal. */
/* Label row above the MAE panel: which market, and when it last refreshed. */
.evidence-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-bottom: var(--s3);
}

/* Four horizons across, so the whole precision picture reads at a glance
   instead of as a list you scan top to bottom. */
.mae-stack {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-subtle);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.mae-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--s5);
  background: var(--surface-2);
  transition: background-color var(--dur) var(--ease-out);
}
.mae-row:hover { background: var(--surface-3); }
.mae-tf {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--brand-bright);
}
.mae-value {
  font-family: var(--mono);
  font-size: clamp(22px, 2.3vw, 32px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.mae-meta {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
/* Two windows per horizon: the stable 30-candle figure the site leads with,
   and the recent 5-candle figure the Terminal shows. Both carry their candle
   count so they can never be mistaken for the same statistic. */
.mae-primary { display: flex; flex-direction: column; gap: 3px; }
.mae-sub {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line-subtle);
}
.mae-sub-label {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.mae-sub-value {
  font-family: var(--mono);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}

.mae-verdict { margin-top: auto; padding-top: var(--s4); }

/* Forecast range as a share of the band midpoint, under the H/L pair. */
.feed-range {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-micro);
  letter-spacing: 0.05em;
  color: var(--brand-bright);
}
.mae-goal {
  display: block;
  margin-top: 5px;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  color: var(--text-3);
}
/* A thin sample-size cue. Low n gets flagged rather than hidden. */
.mae-n { color: var(--text-3); }
.mae-n.thin { color: var(--state-warn); }

@media (max-width: 900px) { .mae-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .mae-stack { grid-template-columns: minmax(0, 1fr); } }

/* Asset switcher — full width, one row per market type with the label in a
   fixed left gutter. No scroll container: at full width all 31 markets fit
   in a few lines, and clipping them was hiding half the registry. */
.asset-switch {
  margin-bottom: var(--s6);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  overflow: hidden;
}
.asset-group {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--s4);
  align-items: baseline;
  padding: var(--s4) var(--s5);
}
.asset-group + .asset-group { border-top: 1px solid var(--line-subtle); }
.asset-group-label {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-3);
}
.asset-group-chips { display: flex; flex-wrap: wrap; gap: 6px; }

@media (max-width: 620px) {
  .asset-group { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
}

.asset-switch button {
  padding: 7px 14px;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-3);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  transition: all var(--dur-fast) var(--ease-out);
}
.asset-switch button:hover { color: var(--text); border-color: var(--line-strong); }
.asset-switch button.active {
  color: var(--text);
  background: var(--brand-wash);
  border-color: var(--brand);
  box-shadow: 0 0 14px rgba(79,124,255,0.18);
}

/* Live graded feed. */
.feed-rows { display: flex; flex-direction: column; }
.feed-cols, .feed-row {
  display: grid;
  grid-template-columns: 1.25fr 1.2fr 1.2fr 0.9fr 0.8fr;
  gap: var(--s3);
  align-items: center;
}
.feed-cols {
  padding: 9px var(--s5);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
  border-bottom: 1px solid var(--line);
}
.feed-row {
  padding: 11px var(--s5);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  border-bottom: 1px solid var(--line-subtle);
  animation: nx-row-in var(--dur-slow) var(--ease-out) both;
}
.feed-row:last-child { border-bottom: none; }
.feed-row .right { text-align: right; }
.feed-row .verdict {
  display: inline-block;
  padding: 2px 8px;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  border-radius: var(--r-full);
}
.verdict.pass { background: var(--pass-wash); color: var(--state-pass); }
.verdict.warn { background: var(--warn-wash); color: var(--state-warn); }
.verdict.fail { background: var(--fail-wash); color: var(--state-fail); }
.feed-loading { padding: var(--s6) var(--s5); font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-3); }

@keyframes nx-row-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (max-width: 980px) {
  .evidence-split { grid-template-columns: minmax(0, 1fr); gap: var(--s10); }
}
@media (max-width: 620px) {
  .feed-cols, .feed-row { grid-template-columns: 1fr 1fr 0.7fr; }
  .feed-cols span:nth-child(3), .feed-row span:nth-child(3),
  .feed-cols span:nth-child(4), .feed-row span:nth-child(4) { display: none; }
  .window-row { grid-template-columns: 1fr auto; }
  .window-row .window-tag { grid-column: 1 / -1; }
}

/* ── 08 BENTO MODULES ──────────────────────────────────────────────────── */

/* Varied cell sizes so the eye has somewhere to land — the fix for forty
   identical rectangles. */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s4);
}
.bento-cell {
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--s6);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.bento-cell:hover { border-color: var(--brand-edge); background: var(--surface-3); transform: translateY(-2px); }
.bento-lg { grid-column: span 4; }
.bento-sm { grid-column: span 2; }
.bento-md { grid-column: span 3; }

.bento-cell .kicker {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--brand-bright);
  margin-bottom: 10px;
}
.bento-cell h3 { margin-bottom: 8px; }
.bento-cell p { font-size: var(--fs-sm); color: var(--text-2); }

.bento-lg { background: linear-gradient(140deg, var(--surface-3), var(--surface-2) 60%); }
.bento-lg::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, transparent 0 10px, rgba(79,124,255,0.02) 10px 11px);
  pointer-events: none;
}
.bento-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s4); }
.bento-tags b {
  padding: 4px 10px;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-2);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
}

@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-lg, .bento-md, .bento-sm { grid-column: span 2; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento-lg, .bento-md, .bento-sm { grid-column: span 1; }
}

/* ── 09 WORKFLOW RAIL ──────────────────────────────────────────────────── */

.rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s6);
}
.rail::before {
  content: '';
  position: absolute; top: 26px; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-edge) 20%, var(--brand-edge) 80%, transparent);
}
.rail-step { position: relative; text-align: center; }
.rail-marker {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin-bottom: var(--s5);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--brand-bright);
  background: var(--surface-0);
  border: 1px solid var(--brand-edge);
  border-radius: 50%;
  box-shadow: 0 0 0 6px var(--surface-0), 0 0 24px rgba(79,124,255,0.22);
}
.rail-step h3 { margin-bottom: 8px; }
.rail-step p { font-size: var(--fs-sm); color: var(--text-2); max-width: 34ch; margin-inline: auto; }

@media (max-width: 800px) {
  .rail { grid-template-columns: minmax(0, 1fr); gap: var(--s8); }
  .rail::before { top: 0; bottom: 0; left: 26px; right: auto; width: 1px; height: auto;
    background: linear-gradient(180deg, transparent, var(--brand-edge) 15%, var(--brand-edge) 85%, transparent); }
  .rail-step { display: grid; grid-template-columns: auto 1fr; gap: var(--s5); text-align: left; align-items: start; }
  .rail-marker { margin-bottom: 0; }
  .rail-step p { margin-inline: 0; max-width: none; }
  .rail-step > div { grid-column: 2; }
}

/* ── 10 PRICING ────────────────────────────────────────────────────────── */

.tier-paths {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin-bottom: var(--s8);
}
.tier-path {
  padding: var(--s5);
  background: var(--surface-1);
  border: 1px solid var(--line-subtle);
  border-radius: var(--r);
}
.tier-path span {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--brand-bright);
  margin-bottom: 8px;
}
.tier-path strong { display: block; font-size: var(--fs-h4); margin-bottom: 6px; }
.tier-path p { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.55; }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
  align-items: stretch;
}
.price-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--s8) var(--s6) var(--s6);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
/* The featured plan physically sits above the others. */
.price-card.featured {
  background: var(--surface-3);
  border-color: transparent;
  box-shadow: var(--e4);
  transform: translateY(-14px);
  z-index: 1;
}
.price-card.featured::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, var(--brand), var(--accent) 55%, transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.price-flag {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  white-space: nowrap;
}
.price-name {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-bright);
  margin-bottom: var(--s3);
  /* Two lines are reserved whether or not this tier's name wraps. Only Tier 2's
     does, and letting it push only that column knocked its price out of line
     with the other two. */
  line-height: 1.4;
  min-height: 2.8em;
}
.price-amount {
  display: flex; align-items: baseline; gap: 4px;
  font-family: var(--mono);
  font-size: clamp(38px, 4.4vw, 52px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: var(--s4);
}
.price-amount span { font-family: var(--font); font-size: var(--fs-sm); font-weight: 500; color: var(--text-3); }
.price-best {
  padding: var(--s3) var(--s4);
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text-2);
  background: var(--surface-sunken);
  border: 1px solid var(--line-subtle);
  border-radius: var(--r-sm);
  margin-bottom: var(--s5);
}
.price-best strong { color: var(--text); }
.price-features { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-bottom: var(--s6); flex: 1; }
.price-features li {
  position: relative;
  padding-left: 24px;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-2);
}
.price-features li::before {
  content: '';
  position: absolute; left: 0; top: 7px;
  width: 13px; height: 7px;
  border-left: 2px solid var(--state-pass);
  border-bottom: 2px solid var(--state-pass);
  transform: rotate(-45deg);
}
.price-features strong { color: var(--text); font-weight: 600; }
.price-features code {
  font-family: var(--mono);
  font-size: 12.5px;
  padding: 1px 5px;
  background: var(--surface-sunken);
  border: 1px solid var(--line-subtle);
  border-radius: 4px;
  color: var(--brand-bright);
}
.price-fine {
  margin-top: var(--s3);
  font-size: var(--fs-micro);
  color: var(--text-3);
  line-height: 1.5;
  text-align: center;
  min-height: 4.5em; /* three lines reserved; keeps the CTAs on one baseline */
}

@media (max-width: 1000px) {
  .pricing-grid { grid-template-columns: minmax(0, 1fr); max-width: 480px; margin-inline: auto; }
  .price-card.featured { transform: none; }
  .tier-paths { grid-template-columns: minmax(0, 1fr); }
  /* One column: nothing to align against, so the reserved rows are dead space. */
  .price-name, .price-fine { min-height: 0; }
}

/* ── 11 FAQ ACCORDION ──────────────────────────────────────────────────── */

/* Collapsed by default. This alone removes ~1,400px from the mobile scroll. */
.faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3) var(--s5); align-items: start; }
.faq-item {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.faq-item[open] { border-color: var(--brand-edge); background: var(--surface-3); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s5);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '';
  flex: 0 0 auto;
  width: 9px; height: 9px;
  border-right: 2px solid var(--text-3);
  border-bottom: 2px solid var(--text-3);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur);
}
.faq-item[open] summary::after { transform: rotate(-135deg) translateY(-2px); border-color: var(--brand-bright); }
.faq-item summary:hover { color: var(--brand-bright); }
.faq-answer { padding: 0 var(--s5) var(--s5); font-size: var(--fs-sm); color: var(--text-2); line-height: 1.65; }

@media (max-width: 760px) { .faq-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── 12 CLOSING CALL ───────────────────────────────────────────────────── */

.closing {
  position: relative;
  padding: var(--s24) 0;
  text-align: center;
  overflow: hidden;
  background: var(--surface-sunken);
  border-block: 1px solid var(--line);
}
.closing::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 70% at 50% 100%, rgba(79,124,255,0.16), transparent 70%);
  pointer-events: none;
}
/* The emblem art is 418x512. Forcing it into a square box squashed the
   hexagon; contain keeps its real proportions. */
.closing-mark {
  width: auto; height: 62px;
  margin: 0 auto var(--s6);
  object-fit: contain;
  opacity: 0.9;
  filter: drop-shadow(0 0 22px rgba(79,124,255,0.5));
}
.closing h2 { max-width: 16ch; margin-inline: auto; }
.closing p { max-width: 58ch; margin: var(--s4) auto var(--s8); }

/* ── 13 INTERIOR PAGES ─────────────────────────────────────────────────── */

.page-head {
  position: relative;
  padding: var(--s16) 0 var(--s12);
  text-align: center;
  overflow: hidden;
}
.page-head::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 55% 70% at 50% 0%, rgba(79,124,255,0.13), transparent 70%);
  pointer-events: none;
}
.page-head > * { position: relative; }
.page-head h1 { margin: var(--s4) 0; }
.page-head p { max-width: 62ch; margin-inline: auto; }

.ledger-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1px;
  background: var(--line-subtle);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.ledger-cell { padding: var(--s4) var(--s5); background: var(--surface-2); }
.ledger-cell h4 {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--brand-bright);
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line-subtle);
}
.ledger-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  padding: 4px 0;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}
.ledger-row span { color: var(--text-3); }
.ledger-row b { color: var(--text-2); font-weight: 500; }

/* Team rows — image and copy trade sides down the page so the About page has
   the same alternating rhythm as the homepage rather than a card wall. */
.team-rows { display: flex; flex-direction: column; gap: var(--s5); }
.team-row {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
  padding: var(--s8);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.team-row:hover { border-color: var(--brand-edge); background: var(--surface-3); }
.team-row.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr); }
.team-row.flip .team-visual { order: 2; }
.team-row.flip .team-copy { order: 1; }

.team-visual {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-sunken);
}
.team-visual img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.team-visual::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(6,7,12,0.55));
  pointer-events: none;
}

.team-copy .kicker {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--brand-bright);
  margin-bottom: 10px;
}
.team-copy h3 { margin-bottom: 6px; }
.team-role {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--text-3);
  margin-bottom: var(--s4);
}
.team-copy p { font-size: var(--fs-sm); color: var(--text-2); margin-bottom: var(--s3); }
.team-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: var(--s4); }

@media (max-width: 820px) {
  .team-row, .team-row.flip { grid-template-columns: minmax(0, 1fr); gap: var(--s5); padding: var(--s5); }
  .team-row.flip .team-visual { order: 0; }
  .team-row.flip .team-copy { order: 1; }
}

/* Roadmap cards — the diagonal hatch marks them as "in motion", not shipped. */
.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s5);
}
.roadmap-card {
  position: relative;
  padding: var(--s6);
  background: linear-gradient(160deg, var(--surface-3), var(--surface-2) 65%);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.roadmap-card::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, transparent 0 9px, rgba(79,124,255,0.022) 9px 10px);
  pointer-events: none;
}
.roadmap-card > * { position: relative; z-index: 1; }
.roadmap-tag {
  position: absolute; top: var(--s5); right: var(--s5);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  color: var(--text-3);
  z-index: 1;
}
.roadmap-card .badge { margin-bottom: var(--s4); }
.roadmap-card h3 { margin-bottom: 8px; }
.roadmap-card p { font-size: var(--fs-sm); color: var(--text-2); }

.inline-form { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }
.inline-form input {
  flex: 1 1 160px; min-width: 0;
  padding: 11px 14px;
  font-family: var(--mono);
  font-size: var(--fs-sm);
  color: var(--text);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.inline-form input::placeholder { color: var(--text-3); }
.inline-form input:focus { outline: none; border-color: var(--brand); }
.form-msg { margin-top: 10px; min-height: 18px; font-family: var(--mono); font-size: var(--fs-xs); color: var(--state-pass); }

/* Walkthrough — raw output on the left, plain-English read on the right.
   The snippet keeps terminal styling so the contrast does the teaching. */
.walkthrough { display: flex; flex-direction: column; gap: var(--s5); }
.walk-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s5);
  align-items: stretch;
}
.walk-snippet {
  padding: var(--s5);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  line-height: 1.85;
  white-space: pre-wrap;
  color: var(--text-2);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-sm);
  overflow-x: auto;
}
.walk-snippet .em { color: var(--brand-bright); font-weight: 600; }
.walk-snippet .sect {
  display: block;
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.walk-explain {
  padding: var(--s5);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.walk-explain h3 { display: flex; align-items: center; gap: var(--s3); margin-bottom: 10px; }
.walk-num {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  width: 26px; height: 26px;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--brand-bright);
  background: var(--brand-wash);
  border: 1px solid var(--brand-edge);
  border-radius: var(--r-sm);
}
.walk-explain p { font-size: var(--fs-sm); color: var(--text-2); margin-bottom: 8px; }
.walk-explain p:last-child { margin-bottom: 0; }
.walk-explain strong { color: var(--text); }

@media (max-width: 780px) { .walk-row { grid-template-columns: minmax(0, 1fr); gap: var(--s3); } }

/* Guide prose inside accordions — long-form copy without a wall of text. */
.guide-prose h4 {
  margin: var(--s5) 0 8px;
  font-size: var(--fs-h4);
  color: var(--text);
}
.guide-prose h4:first-child { margin-top: 0; }
.guide-prose p { font-size: var(--fs-sm); color: var(--text-2); margin-bottom: 10px; line-height: 1.7; }
.guide-prose strong { color: var(--text); }
.guide-prose ul { margin: 0 0 12px; padding-left: var(--s5); }
.guide-prose li { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.7; margin-bottom: 6px; }

.callout {
  margin: var(--s4) 0;
  padding: var(--s4);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-sm);
}
.callout.warn { border-left-color: var(--state-warn); }
.callout-title {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text);
  margin-bottom: 6px;
}
.callout p { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }


/* Pricing education links — keep the purchase CTA primary and the deeper tour secondary. */
.price-learn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: var(--s3);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--brand-bright);
}
.price-learn:hover { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }

/* What You Receive: tier tour foundation. */
.receive-jump-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
}
.receive-jump {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 178px;
  padding: var(--s6);
  background: linear-gradient(150deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.receive-jump:hover { transform: translateY(-2px); border-color: var(--brand-edge); background: var(--surface-3); }
.receive-jump span {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--brand-bright);
}
.receive-jump strong { font-size: var(--fs-h4); color: var(--text); }
.receive-jump em { margin-top: auto; font-size: var(--fs-sm); font-style: normal; color: var(--text-2); line-height: 1.55; }

.receive-tier {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.receive-tier.flip .receive-copy { order: 2; }
.receive-tier.flip .receive-visuals { order: 1; }
.receive-copy .eyebrow { margin-bottom: var(--s4); }
.receive-copy h2 { max-width: 17ch; margin-bottom: var(--s4); }
.receive-copy .lead { max-width: 60ch; }
.receive-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: var(--s6);
  background: var(--line-subtle);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.receive-list div {
  padding: var(--s4);
  background: var(--surface-2);
}
.section-sunken .receive-list div { background: var(--surface-sunken); }
.receive-list strong {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-sm);
  color: var(--text);
}
.receive-list span {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-3);
  line-height: 1.55;
}
.receive-visuals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(190px, auto);
  gap: var(--s4);
}
.receive-shot {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 190px;
  padding: var(--s5);
  background:
    linear-gradient(rgba(126,160,255,0.045) 1px, transparent 1px) 0 0 / 100% 26%,
    linear-gradient(90deg, rgba(126,160,255,0.045) 1px, transparent 1px) 0 0 / 20% 100%,
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(79,124,255,0.12), transparent 70%),
    var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--e2);
}
.receive-shot.large { grid-row: span 2; min-height: 100%; }
.receive-shot::before {
  content: '';
  position: absolute;
  left: var(--s5); right: var(--s5); top: var(--s5);
  height: 34%;
  border-top: 2px solid var(--brand-bright);
  border-bottom: 2px dashed var(--brand-deep);
  background: linear-gradient(180deg, rgba(79,124,255,0.16), rgba(79,124,255,0.035));
  border-radius: var(--r-sm);
  opacity: 0.72;
}
.receive-shot::after {
  content: '';
  position: absolute;
  left: 12%; right: 12%; top: 33%; height: 30%;
  border-top: 2px solid var(--data-up);
  border-radius: 50%;
  opacity: 0.55;
  filter: drop-shadow(0 0 10px rgba(22,216,118,0.3));
}
.receive-shot.code-shot::before {
  height: 52%;
  border: 1px solid var(--line);
  background: repeating-linear-gradient(180deg, rgba(126,160,255,0.16) 0 1px, transparent 1px 18px), var(--surface-2);
}
.receive-shot.live-shot::before {
  border-top-color: var(--state-warn);
  border-bottom-color: var(--state-fail);
  background: linear-gradient(180deg, rgba(255,184,77,0.18), rgba(255,90,122,0.055));
}
.receive-shot > * { position: relative; z-index: 1; }
.receive-shot span {
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--brand-bright);
}
.receive-shot.live-shot span { color: var(--state-warn); }
.receive-shot strong { display: block; margin-bottom: 6px; color: var(--text); }
.receive-shot p { font-size: var(--fs-xs); color: var(--text-2); line-height: 1.55; }

@media (max-width: 980px) {
  .receive-jump-grid { grid-template-columns: minmax(0, 1fr); }
  .receive-tier, .receive-tier.flip { grid-template-columns: minmax(0, 1fr); }
  .receive-tier.flip .receive-copy, .receive-tier.flip .receive-visuals { order: initial; }
}
@media (max-width: 620px) {
  .receive-list, .receive-visuals { grid-template-columns: minmax(0, 1fr); }
  .receive-shot.large { grid-row: span 1; min-height: 220px; }
}

/* Sample-output page: device frames for the terminal captures. */
.device-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--s6);
  align-items: start;
}
.device-frame {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  overflow: hidden;
  box-shadow: var(--e3);
}
.device-frame img { width: 100%; display: block; }
/* The phone capture is far taller than it is wide — cap it so the right
   column does not run away from the desktop frame beside it. */
.device-frame.phone { display: flex; flex-direction: column; align-items: center; }
.device-frame.phone img { max-width: 290px; padding: var(--s4) var(--s4) 0; }
.device-frame.phone .device-caption { width: 100%; margin-top: var(--s4); text-align: center; }
.device-caption {
  padding: 10px var(--s4);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  background: var(--surface-3);
  border-top: 1px solid var(--line);
}
@media (max-width: 820px) { .device-grid { grid-template-columns: minmax(0, 1fr); } }

.contact-bar {
  padding: var(--s5) var(--gutter);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-2);
  background: var(--surface-1);
  border-top: 1px solid var(--line);
}
.contact-bar a { color: var(--brand-bright); }
.contact-bar a:hover { text-decoration: underline; }

/* ── TOUCH TARGETS ─────────────────────────────────────────────────────────
   Pointer-coarse devices get a 44px minimum on the controls people actually
   drive the page with: the market switchers and the deck's asset/timeframe
   lists were 36-38px. Scoped to (pointer: coarse) so the desktop rhythm --
   which is tuned for a mouse -- is untouched.

   Deliberately excluded: footer link lists and the wordmark. Reaching 44px
   there means padding that visibly loosens the footer, and they are not
   primary controls. Worth revisiting as a footer redesign, not a patch. */
@media (pointer: coarse) {
  .asset-switch button,
  .deck-list button,
  .nav-toggle,
  .btn-sm {
    min-height: 44px;
  }
  .asset-switch button { padding-block: 0; }
  .deck-list button { padding-block: 0; }
}