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

:root {
  --primary-dark: #05080d;
  --secondary-dark: #0b1118;
  --tertiary-dark: #17202a;
  --accent-green: #3fcf9b;
  --accent-green-light: #8de3bb;
  --accent-green-glow: rgba(63, 207, 155, 0.22);
  --accent-gold: #d0b06a;
  --accent-gold-glow: rgba(208, 176, 106, 0.22);
  --glass-bg: rgba(255, 255, 255, 0.028);
  --glass-bg-hover: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(211, 223, 236, 0.1);
  --text-light: #edf3f8;
  --text-muted: #8a98a8;
  --border-color: rgba(255, 255, 255, 0.1);
  --warning-color: #ff6b35;
  --success-color: #00c896;
  --danger-color: #ff4757;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.35);
  --shadow-glow: 0 0 40px rgba(0, 200, 150, 0.12);
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'IBM Plex Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background:
    radial-gradient(circle at top left, rgba(63, 207, 155, 0.08), transparent 24%),
    radial-gradient(circle at top right, rgba(109, 168, 255, 0.07), transparent 22%),
    linear-gradient(180deg, #04070c 0%, #081019 38%, #05080d 100%);
  color: #ffffff;
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: rgba(0, 200, 150, 0.3);
  color: #fff;
}

::-moz-selection {
  background: rgba(0, 200, 150, 0.3);
  color: #fff;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--primary-dark);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

.gradient-bg {
  background:
    linear-gradient(180deg, rgba(5, 8, 13, 0.98) 0%, rgba(9, 16, 24, 0.96) 44%, rgba(5, 8, 13, 1) 100%);
  position: relative;
}

.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  transition: all var(--transition-smooth);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.glass-card:hover {
  background: var(--glass-bg-hover);
  border-color: rgba(0, 200, 150, 0.2);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg), 0 0 50px rgba(0, 200, 150, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ================================================================
   FONT AWESOME 5/6 COMPATIBILITY SHIM

   We ship Font Awesome 4.7 (css/font-awesome.min.css + the 4.7
   webfont in /fonts), but the components are written against the
   FA5/FA6 API. Two things break as a result:

     1. FA4 only defines `.fa`. It has no `.fas` / `.far` / `.fab`,
        so every `<i class="fas fa-bolt">` in the app got its glyph
        codepoint from `.fa-bolt::before` but never got
        `font-family: FontAwesome` — the codepoint rendered in the
        body font, i.e. as a blank or a tofu box.

     2. Fourteen of the icon names in use were introduced in FA5 and
        do not exist in the 4.7 stylesheet at all.

   Rather than pull in ~1 MB of FA6 webfonts, this block teaches the
   4.7 file the newer class names. Rule 1 is the family fix; rule 2
   maps each FA5-era name onto the nearest glyph that genuinely
   exists in the 4.7 font.

   If FA6 is ever vendored properly, delete this whole block — it
   becomes dead weight, and `.fa-robot` should then be a robot rather
   than the cogs standing in for it here.
   ================================================================ */
.fas,
.far,
.fal,
.fab,
.fa-solid,
.fa-regular,
.fa-brands {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fa-book-open:before { content: "\f02d"; }        /* → book */
.fa-chart-line:before { content: "\f201"; }       /* → line-chart */
.fa-circle-notch:before { content: "\f1ce"; }     /* → circle-o-notch */
.fa-coins:before { content: "\f0d6"; }            /* → money */
.fa-envelope-open-text:before { content: "\f2b6"; } /* → envelope-open */
.fa-exchange-alt:before { content: "\f0ec"; }     /* → exchange */
.fa-layer-group:before { content: "\f24d"; }      /* → clone */
.fa-lock-open:before { content: "\f09c"; }        /* → unlock */
.fa-newspaper:before { content: "\f1ea"; }        /* → newspaper-o */
.fa-robot:before { content: "\f085"; }            /* → cogs (no robot in 4.7) */
.fa-shield-alt:before { content: "\f132"; }       /* → shield */
.fa-sliders-h:before { content: "\f1de"; }        /* → sliders */
.fa-wave-square:before { content: "\f1fe"; }      /* → area-chart */
.fa-discord:before { content: "\f086"; }          /* → comments (no brand glyph in 4.7) */
/* Added for the architecture map and the risk-control row. Without these
   four the icons rendered as empty circles, since 4.7 has neither the name
   nor a fallback for them. */
.fa-stream:before { content: "\f0c9"; }           /* → bars (stacked windows) */
.fa-hand-paper:before { content: "\f256"; }       /* → hand-paper-o */
.fa-arrows-alt-h:before { content: "\f07e"; }     /* → arrows-h */
.fa-clock:before { content: "\f017"; }            /* → clock-o */

/* ============================================
   NAVBAR - Modern sleek design
   ============================================ */
.navbar {
  padding: 0.9rem 0;
  background: rgba(5, 9, 14, 0.78);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(222, 233, 245, 0.08);
  transition: all 0.3s ease;
  z-index: 1000;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.navbar-compact {
  background: rgba(5, 9, 14, 0.93);
  border-bottom: 1px solid rgba(222, 233, 245, 0.08);
}

/* Brand vs. nav sizing. Everything inside both flex children is `white-space: nowrap`,
   so by default neither child can shrink and, once the combined intrinsic width exceeds
   the container, the nav list runs back across the brand. Pinning the brand to its
   intrinsic size and letting the nav side shrink (min-width: 0 defeats the automatic
   min-content floor) keeps the two apart at every width. */
.navbar > .container {
  column-gap: 1rem;
  min-width: 0;
}

.navbar-brand {
  flex: 0 0 auto;
}

.navbar-compact .navbar-collapse {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.navbar-compact .nav-primary,
.navbar-compact .nav-secondary {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  min-width: 0;
}

/* The link row is the only zone that shrinks; if it still overflows at a wide-but-tight
   width it scrolls within itself rather than overlapping the account menu that follows it.
   Scrollbar hidden so a full-width nav doesn't grow an ugly track. */
.navbar-compact .nav-primary {
  flex: 1 1 auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.navbar-compact .nav-primary::-webkit-scrollbar {
  display: none;
}

.navbar-compact .nav-secondary,
.navbar-compact .nav-actions {
  flex: 0 0 auto;
}

.navbar-compact .nav-actions {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.6rem;
  margin-left: auto;
}

.navbar-compact .nav-cta {
  padding: 0.55rem 1.1rem;
  box-shadow: 0 4px 12px rgba(0, 182, 133, 0.25);
}

.nav-more-menu {
  position: relative;
}

.nav-more-menu summary {
  list-style: none;
  cursor: pointer;
}

.nav-more-menu summary::-webkit-details-marker {
  display: none;
}

.nav-more-panel {
  position: absolute;
  right: 0;
  top: 130%;
  min-width: 180px;
  background: var(--secondary-dark);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 0.5rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  z-index: 20;
}

.nav-more-menu[open] .nav-more-panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.language-switch {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.language-select {
  background: rgba(6, 10, 16, 0.8);
  color: var(--text-light);
  border: 1px solid var(--glass-border);
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
}

.navbar.scrolled {
  background: rgba(6, 10, 16, 0.95);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}

.navbar-brand {
  font-family: "Space Grotesk", "IBM Plex Sans", "Inter", sans-serif;
  font-size: 1.48rem;
  font-weight: 700;
  color: var(--accent-green) !important;
  letter-spacing: -0.04em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.navbar-brand i {
  font-size: 1.4rem;
}

.nav-link {
  color: rgba(233, 239, 245, 0.7) !important;
  margin: 0 0.5rem;
  padding: 0.52rem 0.84rem !important;
  font-weight: 600;
  font-size: 0.84rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: all 0.3s ease;
  border-radius: 999px;
  position: relative;
}

.navbar-brand span,
.nav-actions .btn {
  white-space: nowrap;
}

/* Tightening for the narrow end of the horizontal-nav range. The horizontal nav now
   begins at 1200px (was 992px), so this squeeze applies from there up to 1500px — the band
   where a logged-in user's full link row is tightest. */
@media (min-width: 1200px) and (max-width: 1500px) {
  .navbar-brand {
    font-size: 1.35rem;
  }

  .navbar-brand i {
    font-size: 1.2rem;
  }

  .navbar-compact .navbar-collapse {
    gap: 0.5rem;
  }

  .navbar-compact .nav-primary,
  .navbar-compact .nav-secondary {
    gap: 0.1rem;
  }

  .nav-link {
    margin: 0 0.15rem;
    padding: 0.45rem 0.55rem !important;
    font-size: 0.8rem;
  }

  .navbar-compact .nav-actions {
    gap: 0.4rem;
  }

  .navbar-compact .nav-cta {
    padding: 0.5rem 0.85rem;
  }
}

.nav-link:hover {
  color: var(--accent-green) !important;
  background: rgba(0, 200, 150, 0.1);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--accent-green);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.nav-link:hover::after {
  width: 60%;
}

/* Mobile navbar toggle */
.navbar-toggler {
  border: none;
  padding: 0.5rem;
  background: transparent !important;
  box-shadow: none !important;
}

/* Pointer activation only — the keyboard ring is authored in
   css/eq-system.css § 3 and must survive here. */
.navbar-toggler:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none !important;
}

.navbar-toggler i {
  font-size: 1.5rem;
  transition: transform 0.3s ease;
}

/* Collapsed (hamburger) menu styles. Now applies up to 1199.98px, matching the
   `navbar-expand-xl` breakpoint — below 1200 the nav is the vertical dropdown, so the
   crowded logged-in link row never has to fit on one horizontal line. */
@media (max-width: 1199.98px) {
  .navbar-collapse {
    background: var(--secondary-dark);
    border-radius: 12px;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--glass-border);
  }

  .navbar-nav {
    gap: 0.5rem !important;
  }

  .nav-link {
    padding: 0.75rem 1rem !important;
    margin: 0 !important;
    border-radius: 8px;
  }

  .nav-link:hover {
    background: rgba(0, 200, 150, 0.15);
  }

  .nav-item.ml-2, .nav-item.ml-3 {
    margin-left: 0 !important;
    margin-top: 0.5rem;
  }

  .btn-outline-custom, .btn-primary-custom {
    width: 100%;
    text-align: center;
  }

  .navbar-compact .navbar-collapse {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .navbar-compact .nav-primary,
  .navbar-compact .nav-secondary,
  .navbar-compact .nav-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .nav-more-panel {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    box-shadow: none;
  }

  .language-switch {
    justify-content: space-between;
  }
}

/* ============================================
   BUTTONS - Modern gradient & glow effects
   ============================================ */
.btn-primary-custom {
  background: linear-gradient(135deg, #3fcf9b 0%, #5fd5ba 52%, #9bdab8 100%);
  border: none;
  padding: 0.82rem 1.55rem;
  border-radius: 14px;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: all var(--transition-smooth);
  box-shadow: 0 10px 26px rgba(63, 207, 155, 0.22);
  color: #06110c;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.btn-primary-custom::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 50%);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.btn-primary-custom:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 200, 150, 0.45);
  color: white;
  text-decoration: none;
}

.btn-primary-custom:hover::before {
  opacity: 1;
}

.btn-primary-custom:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 12px rgba(0, 200, 150, 0.3);
}

.btn-outline-custom {
  border: 1px solid rgba(146, 177, 164, 0.28);
  color: rgba(200, 217, 209, 0.92);
  padding: 0.82rem 1.55rem;
  border-radius: 14px;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.02);
  transition: all var(--transition-smooth);
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

.btn-outline-custom:hover {
  background: rgba(63, 207, 155, 0.1);
  color: #dff8ec;
  border-color: rgba(141, 227, 187, 0.4);
  transform: translateY(-2px);
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(63, 207, 155, 0.1);
}

.btn-outline-custom:active {
  transform: translateY(0) scale(0.98);
}

/* Mouse and touch activation only. This rule exists to suppress the browser's
   default ring after a click — it must NOT reach :focus-visible, which is the
   keyboard case. It used to list :focus-visible for all five button classes with
   `outline: none !important`, which removed the focus indicator from every button
   on the site (WCAG 2.4.7 AA). The authored keyboard ring lives in
   css/eq-system.css § 3. */
.btn:focus:not(:focus-visible),
.btn-primary-custom:focus:not(:focus-visible),
.btn-outline-custom:focus:not(:focus-visible),
.btn-outline-success:focus:not(:focus-visible),
.btn-outline-danger:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* ============================================
   HERO SECTION - Bold & impactful
   ============================================ */
.hero-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  padding: 116px 0 72px;
}

.hero-section::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 160px;
  background: linear-gradient(180deg, transparent, rgba(5, 8, 13, 0.96));
  pointer-events: none;
}

.hero-title {
  font-family: "Space Grotesk", "IBM Plex Sans", "Inter", sans-serif;
  font-size: clamp(2.9rem, 5vw, 4.85rem);
  font-weight: 700;
  line-height: 0.98;
  margin-bottom: 1.35rem;
  max-width: 11ch;
  color: #edf3f8;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

.hero-subtitle {
  font-size: 0.76rem;
  color: rgba(176, 198, 187, 0.9);
  font-weight: 700;
  margin-bottom: 1rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  opacity: 0.96;
}

/* Raised from #9aa7b4: at 1.04rem on the near-black hero that sat at ~4.6:1,
   right at the AA floor and visibly muddy next to the display title. */
.hero-description {
  font-size: 1.06rem;
  color: #b6c3d0;
  line-height: 1.72;
  margin-bottom: 2rem;
  max-width: 37rem;
}

.hero-actions {
  align-items: center;
}

.hero-cta-note {
  margin: 0 0 1.5rem;
  font-size: 0.86rem;
  color: rgba(176, 198, 187, 0.72);
}

.trust-badges {
  margin-top: 2.3rem;
}

.trust-badges__title {
  margin-bottom: 0.85rem;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(164, 182, 173, 0.7);
}

.trust-badge-row {
  gap: 0.55rem 0.7rem;
}

/* Hero proof chips. Previously inline-styled in home.rs, which meant no hover
   state and no way to tune them without touching the page component. */
.trust-chip-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.44rem 0.8rem;
  border-radius: var(--eq-radius-chip, 999px);
  border: 1px solid rgba(211, 223, 236, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(206, 220, 229, 0.9);
  font-size: 0.82rem;
  font-weight: 600;
  transition: border-color var(--transition-fast), background var(--transition-fast),
    color var(--transition-fast), transform var(--transition-fast);
}

.trust-chip i {
  font-size: 0.9rem;
  color: var(--accent-green-light);
}

.trust-chip:hover {
  border-color: rgba(141, 227, 187, 0.32);
  background: rgba(63, 207, 155, 0.07);
  color: #dff8ec;
  transform: translateY(-1px);
}

.trust-badge {
  opacity: 1;
  transition: all 0.3s ease;
  filter: grayscale(100%);
  color: rgba(171, 186, 197, 0.78);
  border: 1px solid rgba(211, 223, 236, 0.08);
  background: rgba(255, 255, 255, 0.025);
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.trust-badge:hover {
  opacity: 1;
  filter: grayscale(0%);
  transform: translateY(-2px);
  color: var(--accent-green-light);
  border-color: rgba(141, 227, 187, 0.24);
}

.hero-signal-card {
  padding: clamp(1.2rem, 2vw, 1.45rem) !important;
  border-radius: 26px !important;
  background:
    linear-gradient(180deg, rgba(8, 13, 22, 0.96), rgba(7, 12, 20, 0.95)),
    radial-gradient(circle at top right, rgba(63, 207, 155, 0.12), transparent 38%);
  border: 1px solid rgba(211, 223, 236, 0.08);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255,255,255,0.04);
}

.hero-signal-header {
  gap: 0.85rem;
}

.hero-signal-copy {
  min-width: 0;
}

.hero-signal-kicker {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.72rem !important;
  color: rgba(164, 182, 173, 0.86) !important;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

.hero-signal-heading {
  font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
  font-size: clamp(1.3rem, 2vw, 1.72rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.hero-signal-change {
  flex-shrink: 0;
  white-space: nowrap;
  color: #cbf5e1 !important;
  background: rgba(63, 207, 155, 0.08) !important;
  border-color: rgba(141, 227, 187, 0.18) !important;
}

.hero-signal-chart {
  overflow: hidden;
  border-radius: 16px;
}

.hero-chart-empty {
  min-height: 260px;
  border-radius: 16px;
  border: 1px dashed rgba(211, 223, 236, 0.16);
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.2rem;
}

.hero-chart-empty-title {
  color: var(--text-light);
  font-weight: 700;
}

.hero-chart-empty-copy {
  margin: 0.6rem 0 0;
  color: var(--text-muted);
  line-height: 1.65;
}

.hero-signal-stats {
  row-gap: 0.4rem;
}

.hero-fact-card {
  min-height: 100%;
  padding: 0.9rem 0.95rem;
  border-radius: 16px;
  border: 1px solid rgba(211, 223, 236, 0.08);
  background: rgba(255, 255, 255, 0.025);
  text-align: left;
}

.hero-fact-title {
  color: rgba(170, 189, 179, 0.88);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

.hero-fact-detail {
  margin-top: 0.42rem;
  color: var(--text-light);
  font-size: 0.9rem;
  line-height: 1.55;
}

/* ============================================
   STATS SECTION
   ============================================ */
.stats-section {
  padding: 60px 0;
  background: linear-gradient(180deg, transparent 0%, rgba(15, 23, 34, 0.5) 100%);
}

.stat-card {
  text-align: center;
  padding: 1.5rem;
}

.stat-number {
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 900;
  /* A solid accent. This figure used to be painted by clipping a two-stop
     mint fill to the glyph shapes and making the text itself transparent.
     That fails in the wrong direction: forced-colors mode and print both
     discard the painted layer, the glyphs stay transparent, and the number
     disappears off the page. A headline metric that vanishes in high
     contrast is not a styling preference — and two-tone type at display
     size was the least legible thing a figure can be anyway. */
  color: var(--accent-green);
  font-variant-numeric: tabular-nums;
}

.stat-label {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
  font-weight: 500;
}

/* ============================================
   FEATURES SECTION
   ============================================ */
.features-section {
  padding: 80px 0;
  position: relative;
}

.section-title {
  font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  text-align: center;
  margin-bottom: 0.75rem;
  color: var(--text-light);
  letter-spacing: -0.04em;
}

.section-subtitle {
  text-align: center;
  color: var(--text-muted);
  font-size: 1.05rem;
  margin-bottom: 3rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

.feature-card {
  padding: 2rem;
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* The 3px mint stripe that used to fade in across the top edge on hover is
   gone. eq-system.css section 9 had already settled what hover means on a
   surface in this system — the boundary moves toward the accent — so the
   stripe was a second, contradictory answer to the same question. The
   border-color transition that replaces it is already on .feature-card. */

.feature-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--accent-green) 0%, var(--accent-green-light) 100%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 8px 25px rgba(0, 200, 150, 0.25);
  transition: transform 0.3s ease;
}

.feature-card:hover .feature-icon {
  transform: scale(1.1) rotate(-5deg);
}

.feature-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--text-light);
}

.feature-description {
  color: var(--text-muted);
  line-height: 1.7;
  font-size: 0.95rem;
}

.platform-capability-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
}

.platform-capability-card {
  min-height: 100%;
}

.platform-capability-callout {
  margin-top: 3rem;
}

.platform-capability-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  gap: 0.55rem;
}

.platform-capability-list li {
  position: relative;
  padding-left: 1rem;
  color: rgba(225, 234, 242, 0.82);
  font-size: 0.92rem;
  line-height: 1.55;
}

.platform-capability-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62rem;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 999px;
  background: var(--accent-green-light);
}

.market-pulse-section {
  max-width: 1100px;
}

.market-pulse-kicker {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  color: rgba(171, 217, 198, 0.9);
  margin-bottom: 0.65rem;
  font-weight: 600;
}

.market-pulse-title {
  margin-bottom: 0.6rem;
  font-family: "Space Grotesk", "Inter", "Segoe UI", sans-serif;
  letter-spacing: -0.01em;
}

.market-pulse-subtitle {
  margin-bottom: 1.2rem;
}

.market-pulse-intro-card {
  padding: 1.05rem 1.2rem;
  border-radius: 16px;
  margin-bottom: 1rem;
  background: linear-gradient(130deg, rgba(10, 24, 30, 0.88), rgba(15, 28, 40, 0.8));
  border: 1px solid rgba(0, 214, 156, 0.2);
}

.market-pulse-intro-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.market-pulse-caption {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.95rem;
}

.market-pulse-live-pill {
  font-size: 0.72rem;
  color: rgba(226, 255, 245, 0.86);
  border: 1px solid rgba(95, 250, 198, 0.28);
  border-radius: 999px;
  padding: 0.26rem 0.7rem;
  background: rgba(0, 200, 150, 0.12);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 600;
}

.market-pulse-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.75rem;
}

.market-pulse-empty {
  padding: 1.35rem;
  border-radius: 18px;
  border: 1px solid rgba(211, 223, 236, 0.08);
}

.market-pulse-empty-title {
  margin: 0;
  color: var(--text-light);
  font-weight: 700;
}

.market-pulse-empty-copy {
  margin: 0.55rem 0 0;
  color: var(--text-muted);
  line-height: 1.65;
}

/* A quote tile. The surface is deliberately neutral and only *tinted* by the
   direction accent — a wall of eighteen saturated red/green cards reads as an
   alarm board, not as a market. Direction is carried by the accent hairline,
   the caret and the number's colour, which is enough signal at this size. */
.market-mover-card {
  --mover-accent: #28e4a4;
  position: relative;
  overflow: hidden;
  padding: 0.85rem 0.9rem 0.75rem;
  border-radius: var(--eq-radius-tile, 14px);
  border: 1px solid var(--eq-hairline, rgba(211, 223, 236, 0.08));
  background: var(--eq-surface-inline, rgba(255, 255, 255, 0.025));
  min-height: 98px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
    border-color var(--transition-fast), background var(--transition-fast);
}

/* Tinting the neutral surface with the card's own accent. Declared after the
   flat background above so browsers without color-mix() simply keep that one. */
@supports (background: color-mix(in srgb, red 10%, transparent)) {
  .market-mover-card {
    background:
      linear-gradient(
        170deg,
        color-mix(in srgb, var(--mover-accent) 9%, transparent),
        transparent 62%
      ),
      var(--eq-surface-inline, rgba(255, 255, 255, 0.025));
  }
}

/* Left edge rather than a full-width top bar: it aligns with the symbol and
   change rows, so the eye reads down a column of movers instead of across. */
.market-mover-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--mover-accent), transparent);
  opacity: 0.9;
}

.market-mover-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.26);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}

.market-mover-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.market-mover-symbol {
  margin: 0;
  color: var(--text-light);
  font-weight: 700;
  font-size: 0.84rem;
  letter-spacing: 0.02em;
}

.market-mover-window {
  font-size: 0.64rem;
  color: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 0.14rem 0.42rem;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

/* tabular-nums matters here: these values refresh from a live feed, and
   proportional digits make the whole grid twitch on every tick. */
.market-mover-change {
  margin: 0.4rem 0 0;
  display: flex;
  align-items: baseline;
  gap: 0.28rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--mover-accent);
  font-family: "Space Grotesk", "Inter", "Segoe UI", sans-serif;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

.market-mover-change i {
  font-size: 0.8rem;
}

.market-mover-price {
  margin: 0.1rem 0 0;
  color: rgba(239, 246, 255, 0.62);
  font-size: 0.78rem;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
}

/* ============================================
   PRICING SECTION
   ============================================ */
/* Background is supplied by the `eq-band--plate` slab this section carries; a
   second gradient here would muddy it. The earlier top-hairline rule is gone
   too — the plate's own border-top and rounded corners mark the boundary, and
   `.eq-band::before` needs the pseudo-element for the dot pattern. */
.pricing-section {
  padding: 80px 0;
  position: relative;
}

/* The grid needs room to breathe once the featured card scales to 1.03 —
   without the inline padding its glow and badge clipped against neighbours. */
.pricing-grid {
  padding: 0.75rem 0.25rem 0;
}

/* Cards are left-aligned below the price block. Centring every feature row made
   the list ragged on both edges and much harder to compare card-to-card, which
   is the only thing a pricing grid exists to support. */
.pricing-card {
  padding: 2rem 1.5rem;
  position: relative;
  border-radius: var(--eq-radius-panel, 22px);
  transition: transform var(--transition-smooth), border-color var(--transition-smooth),
    box-shadow var(--transition-smooth), background var(--transition-smooth);
}

.pricing-card:hover {
  transform: translateY(-4px);
}

.pricing-card.featured {
  border: 1px solid var(--accent-green);
  transform: scale(1.03);
  box-shadow: 0 0 50px rgba(0, 200, 150, 0.13), 0 20px 40px rgba(0, 0, 0, 0.25);
  background:
    linear-gradient(180deg, rgba(63, 207, 155, 0.07), transparent 46%),
    var(--eq-surface-inline, rgba(255, 255, 255, 0.028));
}

.pricing-card.featured:hover {
  transform: scale(1.04) translateY(-2px);
  box-shadow: 0 0 60px rgba(0, 200, 150, 0.18), 0 24px 48px rgba(0, 0, 0, 0.3);
}

.pricing-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--accent-green) 0%, var(--accent-green-light) 100%);
  color: #06110c;
  padding: 0.34rem 1.1rem;
  border-radius: 999px;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(63, 207, 155, 0.28);
}

.pricing-tier {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--accent-green);
  margin-bottom: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.pricing-amount {
  font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
  font-size: clamp(2.3rem, 3.6vw, 2.85rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  margin-bottom: 0.25rem;
  color: var(--text-light);
  font-variant-numeric: tabular-nums;
}

/* The /mo · /yr suffix is set inline in home.rs at 1.5rem; pull it back so it
   reads as a unit on the number rather than a second number. */
.pricing-amount span {
  font-size: 1rem !important;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-muted);
  margin-left: 0.2rem;
}

.pricing-period {
  color: var(--text-muted);
  margin-bottom: 1.35rem;
  font-size: 0.86rem;
  line-height: 1.5;
}

.pricing-features {
  list-style: none;
  padding: 1.25rem 0 0;
  margin: 0.25rem 0 0;
  text-align: left;
  border-top: 1px solid var(--eq-hairline, rgba(211, 223, 236, 0.08));
}

.pricing-features li {
  padding: 0.42rem 0;
  color: var(--eq-body-ink, rgba(223, 232, 228, 0.82));
  font-size: 0.88rem;
  line-height: 1.45;
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

/* Check marks sit in their own small disc so the ragged left edge of the
   feature text stays perfectly aligned even when a row wraps to two lines. */
.pricing-features li i {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.16rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--eq-accent-wash, rgba(63, 207, 155, 0.08));
  color: var(--accent-green);
  font-size: 0.58rem;
}

/* ---- Pricing CTAs -------------------------------------------------------------
   One button per card, identical geometry on every card so the row reads as a set.
   Filled on the featured card, outlined elsewhere — the only difference is fill. */
.pricing-cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  padding-top: 1.25rem;
}

.pricing-cta {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.8rem 1.1rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* The trial: a quiet text link under Pro's button, not a second button. */
.pricing-cta-trial {
  display: inline-block;
  text-align: center;
  color: var(--accent-green);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0.1rem 0;
}

.pricing-cta-trial:hover {
  color: var(--accent-green-light);
  text-decoration: underline;
}

/* ---- Trade-volume plan --------------------------------------------------------
   A separate billing model shown below the flat grid: pay a % of volume instead of
   a monthly fee. Rate falls / capabilities rise as monthly volume grows. */
.pricing-volume-plan {
  text-align: left;
}

.pricing-volume-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.pricing-volume-pill {
  margin-bottom: 0.6rem;
}

.pricing-volume-title {
  margin: 0 0 0.4rem;
}

.pricing-volume-blurb {
  margin: 0;
  color: var(--eq-body-ink, var(--text-muted));
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 46rem;
}

.pricing-volume-soon {
  flex: 0 0 auto;
  align-self: flex-start;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(148, 163, 184, 0.1);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.pricing-volume-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
}

.pricing-volume-rung {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 0.9rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  background: rgba(148, 163, 184, 0.05);
}

.pricing-volume-rate {
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
  color: var(--accent-green-light);
}

.pricing-volume-rate--muted {
  font-size: 1.05rem;
  color: var(--text-light);
}

.pricing-volume-band {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-light);
}

.pricing-volume-per {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
}

.pricing-volume-equiv {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.pricing-volume-equiv strong {
  color: var(--text-light);
}

.pricing-volume-foot {
  margin: 1.1rem 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ============================================
   TESTIMONIALS SECTION
   ============================================ */
.testimonials-section {
  padding: 80px 0;
}

.testimonial-card {
  padding: 2rem;
  position: relative;
}

.testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: 0.75rem;
  left: 1.25rem;
  font-size: 3.5rem;
  line-height: 1;
  color: rgba(0, 200, 150, 0.15);
  font-family: Georgia, serif;
  pointer-events: none;
}

.testimonial-text {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  font-style: italic;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-green) 0%, var(--accent-green-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  color: white;
}

.author-info h5 {
  margin: 0;
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-light);
}

.author-info p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.testimonial-rating {
  color: #ffc107;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

/* ============================================
   SUCCESS SECTION
   ============================================ */
.success-section {
  padding: 80px 0;
  background: linear-gradient(180deg, rgba(15, 23, 34, 0.5) 0%, transparent 100%);
}

.success-metric {
  text-align: center;
  margin-bottom: 1.5rem;
}

.success-percentage {
  font-size: clamp(3rem, 5vw, 4rem);
  font-weight: 900;
  /* A solid accent. This figure used to be painted by clipping a two-stop
     mint fill to the glyph shapes and making the text itself transparent.
     That fails in the wrong direction: forced-colors mode and print both
     discard the painted layer, the glyphs stay transparent, and the number
     disappears off the page. A headline metric that vanishes in high
     contrast is not a styling preference — and two-tone type at display
     size was the least legible thing a figure can be anyway. */
  color: var(--accent-green);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.5rem;
}

.success-label {
  color: var(--text-muted);
  font-size: 1rem;
  font-weight: 500;
}

/* ============================================
   CTA SECTION
   ============================================ */
.cta-section {
  padding: 80px 0;
  text-align: center;
}

.cta-card {
  padding: 3rem 2rem;
  max-width: 800px;
  margin: 0 auto;
}

/* ================================================================
   OPENING — the coin scene section
   ----------------------------------------------------------------
   The landing page used to open on a split row: a claim on the left,
   the live desk squeezed into the right half. Neither won. The claim
   now owns the fold with the scene behind it, and the desk has a
   full-width section of its own immediately below (`.eq-desk`), which
   is where it can actually be read.

   The copy column is capped well short of half the section so the
   scene has somewhere to be. That asymmetry is the point: an even
   arrangement of objects around a centred headline is the layout that
   looks generated.
   ================================================================ */
.eq-open {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: min(92vh, 920px);
  padding: clamp(7rem, 14vh, 10.5rem) 0 clamp(4.5rem, 9vh, 7.5rem);
  /* Its own ground, a step darker than the page, with two cold blooms.
     Everything below this section steps UP in tone, so the page opens at
     its deepest point and lightens as it argues. */
  background:
    radial-gradient(90% 70% at 8% -10%, rgba(38, 74, 128, 0.20), transparent 62%),
    radial-gradient(70% 60% at 96% 18%, rgba(124, 92, 255, 0.12), transparent 60%),
    linear-gradient(180deg, #04070c 0%, #05080d 55%, #070c14 100%);
}

/* There was a tiled hairline grid here. It is gone.

   A two-axis line field drawn with hairline gradients on a fixed pixel
   cell is one of the most recognisable generated-UI signatures there is,
   and it belongs on surfaces that are actually a canvas, a map or a
   measurement plane — not behind a headline. It was also doing no work:
   the coins are real solids now and they carry the whole opening. What
   is left is the ground, which is enough. */
.eq-open::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* A rake of light, not a lamp.

     This was a radial bloom, and next to it the scene carried a visible
     glowing orb as its "light source". Both were the same mistake: a
     light rendered as a THING sitting on the background, which is what a
     lens flare is, not what a light is. A light is known by what it
     lands on. What is left is directional — one wide band running down
     and to the right along exactly the axis every gradient on the coins
     is built from (`KEY` in eq-fx.js) — so the section and the objects
     in it agree about where the source is, and nothing in the picture is
     the source. */
  background-image:
    linear-gradient(138deg,
      rgba(151, 187, 255, 0.075) 0%,
      rgba(151, 187, 255, 0.022) 26%,
      transparent 52%);
}

/* The container sits above the scene so the copy is never behind a coin.
   That also means its box — the full 1140px of it, most of which is
   empty — was intercepting every pointer event aimed at the coins to its
   right, so they could not be grabbed at all. Events fall through the
   empty part and are re-enabled on the column that actually has
   something in it. */
.eq-open__inner {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.eq-open__copy {
  max-width: 35rem;
  pointer-events: auto;
}

.eq-open__copy .hero-title {
  text-wrap: balance;
}

/* ================================================================
   PAIRS AND EXCHANGES — the orbit
   ----------------------------------------------------------------
   Copy on the left, and the orbit given the larger column and most of
   a viewport of height: the scene is the argument here (how much the
   engine reaches), so it gets the room to be seen as a system rather
   than as an ornament behind a headline. Stacks below 992px, copy first.
   ================================================================ */
.eq-venues {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(4.5rem, 10vh, 7rem) 0;
  background:
    radial-gradient(60% 55% at 68% 50%, rgba(0, 182, 133, 0.09), transparent 70%),
    radial-gradient(70% 60% at 96% 10%, rgba(124, 92, 255, 0.10), transparent 60%),
    linear-gradient(180deg, #070c14 0%, #05080d 50%, #070c14 100%);
}

.eq-venues__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  max-width: 1320px;
}

.eq-venues__copy .hero-title {
  font-size: clamp(2.3rem, 3.6vw, 3.5rem);
  max-width: 14ch;
}

.eq-venues__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.eq-venues__venue {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(141, 227, 187, 0.22);
  background: rgba(141, 227, 187, 0.05);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #dcebe4;
}

.eq-venues__note {
  margin: 0;
  font-size: 0.86rem;
  color: rgba(176, 198, 187, 0.72);
}

/* The mount is absolutely positioned inside this box (see
   `.eq-scene-mount`), so the box alone decides how much room the orbit
   has. */
.eq-venues__stage {
  position: relative;
  min-width: 0;
  height: clamp(480px, 70vh, 740px);
}

/* ================================================================
   OPENING — the live chart
   ----------------------------------------------------------------
   Copy on the left says what the chart is; the instrument takes the
   larger share on the right. Stacks below 992px, copy first.
   ================================================================ */
.eq-live-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(7rem, 14vh, 9.5rem) 0 clamp(3.5rem, 7vh, 5.5rem);
  background:
    radial-gradient(80% 60% at 92% 12%, rgba(0, 182, 133, 0.10), transparent 60%),
    radial-gradient(90% 70% at 8% -10%, rgba(38, 74, 128, 0.20), transparent 62%),
    linear-gradient(180deg, #04070c 0%, #05080d 60%, #070c14 100%);
}

.eq-live-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  max-width: 1320px;
}

.eq-live-hero__copy .hero-title {
  font-size: clamp(2.4rem, 3.8vw, 3.7rem);
  max-width: 13ch;
}

.eq-live-hero__copy .hero-description {
  margin-bottom: 1.6rem;
}

.eq-live-hero__rotate {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: rgba(176, 198, 187, 0.72);
}

.eq-live-hero__stage {
  min-width: 0;
}

.eq-live-hero__stage .hero-terminal {
  margin-top: 0;
}

@media (max-width: 991px) {
  .eq-open {
    min-height: 0;
    padding-top: clamp(6rem, 16vh, 8rem);
    /* Room under the copy for the scene, which drops to the foot of the
       section on narrow screens rather than sitting on the headline. */
    padding-bottom: clamp(15rem, 42vw, 21rem);
  }

  .eq-venues__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .eq-venues__copy .hero-title {
    max-width: none;
  }

  .eq-venues__stage {
    height: clamp(260px, 72vw, 400px);
    margin: 0 -16px;
  }

  .eq-open__copy {
    max-width: none;
  }

  .eq-live-hero {
    padding-top: clamp(6rem, 16vh, 8rem);
  }

  .eq-live-hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .eq-live-hero__copy .hero-title {
    max-width: none;
  }
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  padding: 50px 0 25px;
  background: linear-gradient(180deg, var(--secondary-dark), #080d14);
  border-top: 1px solid var(--glass-border);
  position: relative;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 200, 150, 0.3), transparent);
}

.footer-links {
  list-style: none;
  padding: 0;
}

.footer-links li {
  margin-bottom: 0.6rem;
}

.footer-links a {
  color: var(--text-muted);
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 0.9rem;
}

.footer-links a:hover {
  color: var(--accent-green);
}

.social-links a {
  color: var(--text-muted);
  font-size: 1.25rem;
  margin: 0 0.75rem;
  transition: all 0.3s ease;
}

.social-links a:hover {
  color: var(--accent-green);
  transform: translateY(-2px);
}

/* ============================================
   RESPONSIVE STYLES
   ============================================ */
@media (max-width: 768px) {
  .hero-section {
    padding: 76px 0 36px;
    min-height: auto;
  }

  .hero-title {
    font-size: 2.15rem;
    margin-bottom: 1rem;
  }

  .hero-description {
    font-size: 1rem;
    line-height: 1.65;
    margin-bottom: 1.5rem;
  }

  .section-title {
    font-size: 1.75rem;
  }

  .section-subtitle {
    font-size: 0.95rem;
    margin-bottom: 2rem;
  }

  .pricing-card.featured {
    transform: scale(1);
  }

  .glass-card {
    border-radius: 12px;
  }

  .feature-card {
    padding: 1.5rem;
  }

  .hero-actions {
    gap: 0.75rem !important;
  }

  .hero-actions .btn {
    margin-right: 0 !important;
  }

  .trust-badges {
    margin-top: 2rem;
  }

  .hero-signal-card {
    margin-top: 1.5rem !important;
  }

  .hero-signal-header {
    align-items: flex-start !important;
  }

  .hero-signal-heading {
    font-size: 1.25rem;
  }

  .pricing-grid {
    margin-top: 2rem !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .pricing-cycle-shell {
    padding: 0.95rem 1rem !important;
  }

  .pricing-selection-shell {
    padding: 1rem !important;
  }

  .pricing-selection-header {
    gap: 0.5rem 1rem;
  }

  .payment-method-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .cta-actions {
    gap: 0.75rem;
  }

  .market-pulse-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .stats-section,
  .features-section,
  .pricing-section,
  .testimonials-section,
  .success-section {
    padding: 50px 0;
  }
}

@media (max-width: 576px) {
  .hero-section {
    padding: 70px 0 30px;
  }

  .hero-title {
    font-size: 1.85rem;
    line-height: 1.08;
  }

  .hero-subtitle {
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    margin-bottom: 0.75rem;
  }

  .hero-description {
    font-size: 0.96rem;
    max-width: none;
  }

  .btn-primary-custom,
  .btn-outline-custom {
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn,
  .cta-actions .btn {
    width: 100%;
    margin-right: 0 !important;
  }

  .trust-badge-row {
    justify-content: space-between;
    gap: 0.65rem;
  }

  .trust-badge {
    margin-right: 0 !important;
  }

  .trust-badge i {
    font-size: 1.5rem !important;
  }

  .stat-number {
    font-size: 2rem;
  }

  .pricing-amount {
    font-size: 2.25rem;
  }

  .pricing-card {
    padding: 1.35rem 1rem;
  }

  .pricing-tier {
    font-size: 1rem;
  }

  .pricing-features li {
    font-size: 0.88rem;
    gap: 0.55rem;
    padding: 0.55rem 0.25rem;
  }

  .hero-signal-card {
    padding: 1rem !important;
  }

  .hero-signal-header {
    flex-direction: column;
    align-items: stretch !important;
    margin-bottom: 0.85rem !important;
  }

  .hero-signal-change {
    align-self: flex-start;
  }

  .hero-signal-heading {
    font-size: 1.15rem;
  }

  .hero-signal-chart {
    margin-bottom: 0.75rem !important;
  }

  .hero-signal-stats .stat-number {
    font-size: 1.9rem !important;
  }

  .market-pulse-section {
    padding-left: 0.15rem;
    padding-right: 0.15rem;
  }

  .market-pulse-intro-card {
    padding: 0.9rem 0.95rem;
  }

  .market-pulse-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
  }

  .market-mover-card {
    min-height: 92px;
    padding: 0.72rem 0.75rem;
  }

  .feature-card,
  .testimonial-card,
  .cta-card {
    padding: 1.25rem;
  }

  .success-section .glass-card {
    padding: 1.4rem 1rem !important;
  }

  .pricing-selection-header,
  .pricing-coupon-row {
    flex-direction: column;
    align-items: stretch !important;
  }

  .pricing-coupon-input {
    max-width: none !important;
  }

  .payment-method-grid {
    grid-template-columns: 1fr !important;
  }

  .footer {
    padding: 40px 0 20px;
  }
}

@media (max-width: 420px) {
  .hero-title {
    font-size: 1.65rem;
  }

  .section-title {
    font-size: 1.55rem;
  }

  .section-subtitle,
  .market-pulse-caption,
  .testimonial-text,
  .feature-description {
    font-size: 0.9rem;
  }

  .hero-signal-stats .col-6 {
    margin-bottom: 0.4rem !important;
  }

  .hero-signal-stats .stat-number {
    font-size: 1.65rem !important;
  }

  .market-pulse-grid {
    grid-template-columns: 1fr;
  }

  .market-mover-card {
    min-height: 84px;
  }

  .pricing-card {
    padding: 1.2rem 0.9rem;
  }

  .pricing-amount {
    font-size: 2rem;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.8s ease-out;
}

/* ============================================
   FREEBIES LANDING
   ============================================ */
.freebies-page {
  position: relative;
  min-height: 100vh;
}

.freebies-hero {
  padding: 7rem 0 4rem;
}

/* Asymmetric on purpose: the copy column carries the argument, the form is a
   sidecar. The old even auto-fit split gave a low-intent email box the same
   visual weight as the offer itself. */
.freebies-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: 3rem;
  align-items: start;
}

@media (max-width: 900px) {
  .freebies-hero-grid {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
}

.freebies-eyebrow {
  margin-bottom: 1rem;
}

.freebies-title {
  font-family: "Space Grotesk", "IBM Plex Sans", "Inter", sans-serif;
  font-size: clamp(2.4rem, 4.4vw, 3.9rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.045em;
  margin-bottom: 1.15rem;
  color: var(--text-light);
  text-wrap: balance;
}

/* The second half of the headline is the turn in the sentence, so it gets the
   accent. Gradient rather than the old gold text-shadow, which glowed against
   a dark background and hurt to read at display size. */
.freebies-title span {
  /* See the note on .stat-number: painting this half of the headline by
     clipping a fill to the glyphs left it invisible anywhere the clip was
     not honored. */
  color: var(--accent-green-light);
}

.freebies-subtitle {
  color: var(--eq-body-ink, rgba(223, 232, 228, 0.82));
  font-size: 1.04rem;
  line-height: 1.7;
  max-width: 56ch;
  margin-bottom: 1rem;
}

.freebies-subtitle--quiet {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 1.75rem;
}

.freebies-offer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}

.freebies-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.8rem;
  border-radius: var(--eq-radius-chip, 999px);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(206, 220, 229, 0.9);
  border: 1px solid var(--eq-hairline, rgba(211, 223, 236, 0.1));
  font-size: 0.82rem;
  font-weight: 600;
  transition: border-color var(--transition-fast), background var(--transition-fast),
    color var(--transition-fast), transform var(--transition-fast);
}

.freebies-pill i {
  font-size: 0.85rem;
  color: var(--accent-green-light);
}

.freebies-pill:hover {
  border-color: var(--eq-accent-edge, rgba(141, 227, 187, 0.22));
  background: var(--eq-accent-wash, rgba(63, 207, 155, 0.08));
  color: #dff8ec;
  transform: translateY(-1px);
}

.freebies-list {
  list-style: none;
  padding: 1.25rem 0 0;
  margin: 0;
  border-top: 1px solid var(--eq-hairline, rgba(211, 223, 236, 0.08));
  color: var(--eq-body-ink, rgba(223, 232, 228, 0.82));
  display: grid;
  gap: 0.6rem;
  font-size: 0.93rem;
}

.freebies-list li {
  position: relative;
  padding-left: 1.5rem;
  line-height: 1.5;
}

.freebies-list li::before {
  content: "\f00c"; /* fa-check, from the 4.7 webfont we actually ship */
  font: normal normal normal 14px/1 FontAwesome;
  position: absolute;
  left: 0;
  top: 0.22rem;
  font-size: 0.72rem;
  color: var(--accent-green);
}

/* Sticky so the form stays reachable while the reader scans a long copy column,
   which is the whole reason it is a sidecar rather than a section of its own. */
.freebies-hero-card {
  padding: clamp(1.4rem, 2.5vw, 1.85rem) !important;
  position: sticky;
  top: 6rem;
}

@media (max-width: 900px) {
  .freebies-hero-card {
    position: static;
  }
}

.freebies-card-header h3 {
  margin: 0 0 0.4rem;
  font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-light);
}

.freebies-card-header p {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.55;
  margin-bottom: 1.35rem;
}

.freebies-form {
  display: grid;
  gap: 0.9rem;
}

/* `.form-input` / `.form-label` were only ever styled under `.affiliate-page`
   and `.dashboard-page`, so this form rendered with default browser chrome —
   white boxes on a near-black panel. These give it the same treatment. */
.freebies-page .form-group {
  display: grid;
  gap: 0.35rem;
}

.freebies-page .form-label {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--eq-label-ink, rgba(170, 189, 179, 0.72));
}

.freebies-page .form-input {
  width: 100%;
  padding: 0.72rem 0.9rem;
  border: 1px solid var(--eq-hairline, rgba(211, 223, 236, 0.1));
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.28);
  color: var(--text-light);
  font-size: 0.94rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
    background var(--transition-fast);
}

.freebies-page .form-input::placeholder {
  color: rgba(138, 152, 168, 0.65);
}

.freebies-page .form-input:focus {
  outline: none;
  border-color: var(--accent-green);
  background: rgba(0, 0, 0, 0.38);
  box-shadow: 0 0 0 3px rgba(63, 207, 155, 0.16);
}

.consent-row {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--eq-body-ink, rgba(223, 232, 228, 0.82));
  cursor: pointer;
}

.consent-row input {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin-top: 0.2rem;
  accent-color: var(--accent-green);
  cursor: pointer;
}

/* Disabled submit needs to look disabled — it starts out unclickable until the
   email and the account box are filled in, and a full-strength button that
   silently does nothing reads as a broken page. */
.freebies-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.freebies-submit:disabled:hover {
  transform: none;
  box-shadow: none;
}

.form-hint {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0.25rem 0 0;
}

.form-hint.error {
  color: var(--warning-color);
}

.freebies-submit {
  width: 100%;
  margin-top: 0.5rem;
}

/* The downloadable offer is intentionally presented as a small, complete
   product. The path (capture → inspect → export) makes its narrow promise
   immediately legible and avoids a generic wall of platform features. */
.freebies-vision {
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}

.freebies-vision-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.freebies-vision-copy .eq-index {
  margin-bottom: 1.15rem;
}

.freebies-vision-copy h2 {
  margin-bottom: 1rem;
}

.freebies-vision-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.65rem;
}

.freebies-vision-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.freebies-vision-note {
  margin: 0.85rem 0 0;
  color: var(--text-muted);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.72rem;
  line-height: 1.5;
}

.freebies-vision-flow {
  padding: clamp(1.25rem, 2.5vw, 1.8rem) !important;
  display: grid;
  gap: 0;
}

.freebies-vision-step {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 0.9rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--eq-hairline, rgba(211, 223, 236, 0.1));
}

.freebies-vision-step:first-child {
  padding-top: 0;
}

.freebies-vision-step:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.freebies-vision-step__icon {
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  color: var(--accent-green-light);
  background: var(--eq-accent-wash, rgba(63, 207, 155, 0.08));
  border: 1px solid var(--eq-accent-edge, rgba(141, 227, 187, 0.22));
  border-radius: 0.7rem;
}

.freebies-vision-step__index {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--accent-green-light);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.freebies-vision-step h3 {
  margin: 0 0 0.25rem;
  color: var(--text-light);
  font-size: 1rem;
}

.freebies-vision-step p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

@media (max-width: 760px) {
  .freebies-vision-grid {
    grid-template-columns: 1fr;
  }

  .freebies-vision-actions .btn {
    width: 100%;
  }
}

/* The bypass. Deliberately a plain text button rather than a second outlined
   one — it is an alternative, not a competing call to action. */
.freebies-skip {
  width: 100%;
  padding: 0.2rem 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.freebies-skip:hover {
  color: var(--accent-green-light);
  text-decoration: underline;
}

.form-disclaimer {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0.5rem 0 0;
}

.form-disclaimer a {
  color: var(--accent-green);
  text-decoration: none;
}

.freebies-section {
  padding: 4rem 0;
}

.freebies-section-title {
  max-width: 720px;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.freebies-section-title p {
  color: var(--eq-body-ink, rgba(223, 232, 228, 0.82));
}

.freebies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 1.15rem;
}

/* The three guides are the payload of this page, so their cards get the
   full panel treatment; the "first week" steps below reuse the shell at a
   lower intensity so the two rows read as one family. */
.freebies-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.45rem;
  position: relative;
  border-radius: var(--eq-radius-panel, 22px);
  background: var(--eq-surface-inline, rgba(255, 255, 255, 0.025));
  border: 1px solid var(--eq-hairline, rgba(211, 223, 236, 0.08));
  box-shadow: var(--eq-shadow-inset, inset 0 1px 0 rgba(255, 255, 255, 0.04));
  transition: border-color var(--transition-smooth), transform var(--transition-smooth),
    background var(--transition-smooth), box-shadow var(--transition-smooth);
}

.freebies-card h3 {
  margin: 0 0 0.5rem;
  font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--text-light);
}

.freebies-card p {
  margin: 0;
  color: var(--eq-body-ink, rgba(223, 232, 228, 0.82));
  font-size: 0.9rem;
  line-height: 1.55;
}

.freebies-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.freebies-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--eq-accent-wash, rgba(63, 207, 155, 0.08));
  border: 1px solid var(--eq-accent-edge, rgba(141, 227, 187, 0.22));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-green-light);
  font-size: 1.1rem;
  margin: 0;
  transition: background var(--transition-smooth), color var(--transition-smooth);
}

.freebies-card-index {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(211, 223, 236, 0.12);
  letter-spacing: -0.02em;
}

/* Guide cards are whole-card links. Killing the inherited underline and
   colour here keeps them looking like cards rather than a wall of link text. */
.freebies-card--guide {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.freebies-card--guide:hover,
.freebies-card--guide:focus-visible {
  text-decoration: none;
  color: inherit;
  transform: translateY(-3px);
  border-color: var(--eq-accent-edge, rgba(141, 227, 187, 0.22));
  background: rgba(255, 255, 255, 0.042);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.26);
}

.freebies-card--guide:focus-visible {
  outline: 2px solid var(--accent-green);
  outline-offset: 3px;
}

.freebies-card--guide:hover .freebies-card-icon {
  background: rgba(63, 207, 155, 0.16);
  color: #dff8ec;
}

.freebies-card-read {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: auto;
  padding-top: 1.15rem;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-green);
}

.freebies-card-read i {
  font-size: 0.7rem;
  transition: transform var(--transition-fast);
}

.freebies-card--guide:hover .freebies-card-read i {
  transform: translateX(4px);
}

.freebies-tag {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-green-light);
}

.freebies-bonus {
  background: rgba(6, 10, 16, 0.6);
}

.freebies-bonus-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: center;
}

.freebies-bonus-copy p {
  color: var(--eq-body-ink, rgba(223, 232, 228, 0.82));
  margin: 1rem 0 1.5rem;
  line-height: 1.65;
}

.freebies-bonus-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.7rem;
  color: var(--text-light);
  font-size: 0.94rem;
}

.freebies-bonus-list li {
  position: relative;
  padding-left: 1.3rem;
  line-height: 1.5;
}

.freebies-bonus-list li::before {
  content: "›";
  position: absolute;
  left: 0;
  top: -1px;
  color: var(--accent-green-light);
  font-weight: 700;
}

.freebies-bonus-card {
  padding: clamp(1.5rem, 2.5vw, 1.9rem) !important;
}

.freebies-bonus-card h3 {
  margin-bottom: 1.4rem;
}

.freebies-steps {
  display: grid;
  gap: 1.15rem;
  margin: 0 0 1.6rem;
}

.freebies-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: start;
}

.freebies-step-number {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent-green);
  padding-top: 0.15rem;
}

.freebies-step h4 {
  margin: 0 0 0.25rem;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-light);
}

.freebies-step p {
  margin: 0;
  color: var(--eq-body-ink, rgba(223, 232, 228, 0.82));
  font-size: 0.88rem;
  line-height: 1.5;
}

.freebies-secondary {
  width: 100%;
  text-align: center;
}

.freebies-cta {
  margin-top: 2.25rem;
  text-align: center;
  display: grid;
  gap: 0.6rem;
  justify-items: center;
}

.freebies-cta-note {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.freebies-cta-note--ok {
  color: var(--accent-green-light);
  font-weight: 600;
}

.upsell-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(6, 10, 16, 0.82);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.upsell-modal {
  position: relative;
  width: min(520px, 100%);
  padding: 2rem;
}

.upsell-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(10, 15, 24, 0.6);
  color: var(--text-light);
  cursor: pointer;
}

.upsell-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.7rem;
  color: var(--accent-green-light);
  margin-bottom: 0.5rem;
}

.upsell-title {
  margin: 0 0 0.75rem;
  font-size: 1.6rem;
}

.upsell-copy {
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.upsell-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: grid;
  gap: 0.5rem;
  color: var(--text-light);
}

.upsell-list li::before {
  content: "+";
  color: var(--accent-gold);
  margin-right: 0.5rem;
}

.upsell-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@keyframes floatSoft {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.float-card {
  animation: floatSoft 6s ease-in-out infinite;
}

@media (max-width: 768px) {
  .freebies-hero {
    padding: 5.5rem 0 3rem;
  }

  .freebies-hero-card {
    padding: 1.35rem !important;
  }

  .freebies-offer {
    gap: 0.5rem;
  }

  .freebies-section {
    padding: 3rem 0;
  }
}

/* ============================================
   AFFILIATE PAGE
   ============================================ */
.affiliate-page {
  position: relative;
  padding-bottom: 4rem;
}

.affiliate-hero {
  padding: 7rem 0 4rem;
}

.affiliate-hero-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem;
  align-items: center;
}

.affiliate-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.affiliate-eyebrow {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.8rem;
  color: var(--accent-green);
}

.affiliate-title {
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 800;
  color: var(--text-light);
}

.affiliate-subtitle {
  color: var(--text-muted);
  max-width: 480px;
}

.affiliate-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.affiliate-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 200, 150, 0.25);
  background: rgba(0, 200, 150, 0.08);
  font-size: 0.85rem;
  color: var(--text-light);
}

.affiliate-hero-card {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.affiliate-hero-card h3 {
  margin: 0;
}

.affiliate-link-preview {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.affiliate-link-preview code {
  background: rgba(255, 255, 255, 0.06);
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  color: var(--text-light);
}

.affiliate-section {
  padding: 2.5rem 0;
}

.affiliate-section-alt {
  background: rgba(255, 255, 255, 0.02);
}

.affiliate-section-title h2 {
  margin-bottom: 0.4rem;
}

.affiliate-section-title p {
  color: var(--text-muted);
}

.affiliate-commission-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.affiliate-commission-card {
  padding: 1.5rem;
  text-align: center;
}

.affiliate-commission-card span {
  display: block;
  margin-top: 0.75rem;
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent-green);
}

.affiliate-earnings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.affiliate-earnings-card {
  padding: 1.5rem;
}

.affiliate-earnings-card span {
  display: block;
  margin-top: 0.75rem;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--accent-gold);
}

.affiliate-page .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.affiliate-page .form-label {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.affiliate-page .form-input {
  padding: 0.75rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.25);
  color: var(--text-light);
}

.affiliate-page .form-input:focus {
  outline: none;
  border-color: var(--accent-green);
  box-shadow: 0 0 0 2px rgba(0, 200, 150, 0.2);
}

.affiliate-page .form-hint {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.affiliate-card {
  background: linear-gradient(140deg, rgba(0, 200, 150, 0.18), rgba(6, 10, 16, 0.8));
  border: 1px solid rgba(0, 200, 150, 0.25);
}

.affiliate-card .card-title {
  color: var(--accent-green);
}

@media (max-width: 1024px) {
  .affiliate-hero-grid {
    grid-template-columns: 1fr;
  }

  .affiliate-commission-grid,
  .affiliate-earnings-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   DASHBOARD PAGE - Comprehensive styling
   ============================================ */
.dashboard-page {
  font-family: 'IBM Plex Sans', 'Inter', sans-serif;
  background:
    radial-gradient(circle at top left, rgba(63, 207, 155, 0.08), transparent 22%),
    radial-gradient(circle at top right, rgba(88, 137, 224, 0.08), transparent 20%),
    linear-gradient(180deg, #04070c 0%, #091119 42%, #06090f 100%);
  color: var(--text-light);
  line-height: 1.6;
  min-height: 100vh;
  position: relative;
}

.dashboard-page::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.014) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.42), transparent 90%);
}

.dashboard-page * {
  box-sizing: border-box;
}

.dashboard-page .container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.dashboard-page .header {
  background: rgba(6, 10, 16, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 1rem 0;
  border-bottom: 1px solid var(--glass-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.dashboard-page .nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.dashboard-page .nav-brand {
  display: flex;
  align-items: center;
}

.dashboard-page .nav-links {
  display: flex;
  list-style: none;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.dashboard-page .nav-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
}

.dashboard-page .nav-links a:hover,
.dashboard-page .nav-links a.active {
  color: var(--accent-green);
  background: rgba(0, 200, 150, 0.1);
}

.dashboard-page .btn {
  padding: 0.72rem 1.18rem;
  border-radius: 12px;
  border: none;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dashboard-page .btn-primary {
  background: linear-gradient(135deg, #3fcf9b 0%, #8de3bb 100%);
  color: #07110d;
  box-shadow: 0 10px 24px rgba(63, 207, 155, 0.2);
}

.dashboard-page .btn-primary:hover {
  box-shadow: 0 14px 26px rgba(63, 207, 155, 0.24);
  transform: translateY(-1px);
}

.dashboard-page .btn-secondary {
  background-color: rgba(255, 255, 255, 0.02);
  color: #bcc8d3;
  border: 1px solid rgba(211, 223, 236, 0.12);
}

.dashboard-page .btn-secondary:hover {
  border-color: var(--accent-green);
  color: var(--accent-green);
  background: rgba(0, 200, 150, 0.1);
}

.dashboard-page .btn-danger {
  background: linear-gradient(135deg, var(--danger-color) 0%, #ff6b7a 100%);
  color: white;
}

.dashboard-page .btn-success {
  background: linear-gradient(135deg, var(--success-color) 0%, var(--accent-green-light) 100%);
  color: white;
}

.dashboard-page .main-content {
  padding: 7.25rem 0 2.5rem;
}

.dashboard-page .dashboard-shell {
  position: relative;
  padding-bottom: 4rem;
}

.dashboard-page .dashboard-shell > * {
  position: relative;
  z-index: 1;
}

.dashboard-page .dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.dashboard-page .main-panel {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.dashboard-page .sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: fit-content;
}

.dashboard-page .card {
  background: linear-gradient(180deg, rgba(13, 20, 37, 0.95), rgba(8, 14, 28, 0.97));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 22px;
  padding: 1.15rem;
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.dashboard-page .card:hover {
  border-color: rgba(45, 212, 191, 0.22);
}

.dashboard-page .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--glass-border);
}

.dashboard-page .card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-light);
}

.dashboard-page .stats-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.dashboard-page .stat-card {
  background: linear-gradient(180deg, rgba(13, 20, 37, 0.95), rgba(8, 14, 28, 0.97));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 1.25rem;
  border-radius: 20px;
  text-align: center;
  border: 1px solid rgba(148, 163, 184, 0.14);
  transition: all var(--transition-smooth);
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.16);
}

.dashboard-page .stat-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 200, 150, 0.05), transparent 60%);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.dashboard-page .stat-card:hover {
  border-color: rgba(0, 200, 150, 0.2);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), 0 0 30px rgba(0, 200, 150, 0.06);
}

.dashboard-page .stat-card:hover::after {
  opacity: 1;
}

.dashboard-page .stat-number {
  font-size: 1.75rem;
  font-weight: 800;
  /* A solid accent. This figure used to be painted by clipping a two-stop
     mint fill to the glyph shapes and making the text itself transparent.
     That fails in the wrong direction: forced-colors mode and print both
     discard the painted layer, the glyphs stay transparent, and the number
     disappears off the page. A headline metric that vanishes in high
     contrast is not a styling preference — and two-tone type at display
     size was the least legible thing a figure can be anyway. */
  color: var(--accent-green);
  font-variant-numeric: tabular-nums;
  display: block;
}

.dashboard-page .stat-label {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  margin-top: 0.25rem;
}

.dashboard-page .bot-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.dashboard-page .bot-item {
  background: rgba(7, 14, 27, 0.72);
  padding: 1rem 1.25rem;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
  flex-wrap: wrap;
  gap: 1rem;
}

.dashboard-page .bot-item:hover {
  border-color: rgba(45, 212, 191, 0.28);
  background: rgba(45, 212, 191, 0.06);
}

.dashboard-page .bot-info {
  flex: 1;
  min-width: 150px;
}

.dashboard-page .bot-name {
  font-weight: 700;
  color: var(--text-light);
  margin-bottom: 0.25rem;
  font-size: 1rem;
}

.dashboard-page .bot-symbol {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.dashboard-page .bot-status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.dashboard-page .status-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 10px currentColor;
}

.dashboard-page .status-active {
  background-color: var(--success-color);
  box-shadow: 0 0 12px rgba(0, 200, 150, 0.5);
}

.dashboard-page .status-inactive {
  background-color: var(--text-muted);
  box-shadow: none;
}

.dashboard-page .bot-controls {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.dashboard-page .real-time-data {
  background: rgba(7, 14, 27, 0.72);
  padding: 1rem;
  border-radius: 16px;
  margin-bottom: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.12);
}

.dashboard-page .indicator-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.dashboard-page .indicator {
  text-align: center;
  padding: 0.85rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.1);
}

.dashboard-page .indicator-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dashboard-page .indicator-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent-green);
}

.dashboard-page .dashboard-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(10, 18, 34, 0.94), rgba(14, 24, 44, 0.9));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
}

.dashboard-page .dashboard-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top left, rgba(45, 212, 191, 0.18), transparent 34%),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.18), transparent 30%);
  pointer-events: none;
  z-index: -1;
}

.dashboard-page .dashboard-eyebrow {
  color: var(--accent-green);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dashboard-page .dashboard-hero-title {
  margin: 0.25rem 0 0.45rem;
  font-size: clamp(1.7rem, 2vw, 2.35rem);
  line-height: 1.12;
  color: var(--text-light);
}

.dashboard-page .dashboard-hero-copy {
  margin: 0;
  max-width: 48rem;
  color: var(--text-muted);
}

.dashboard-page .dashboard-hero-badges,
.dashboard-page .dashboard-jumpbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.dashboard-page .dashboard-jumpbar {
  position: sticky;
  top: 6rem;
  z-index: 5;
  margin-bottom: 1.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 18px;
  background: rgba(7, 12, 24, 0.82);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.dashboard-page .dashboard-jumpbar a {
  color: var(--text-light);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 0.48rem 0.8rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
}

.dashboard-page .dashboard-jumpbar a:hover {
  border-color: rgba(45, 212, 191, 0.36);
  background: rgba(45, 212, 191, 0.08);
}

.dashboard-page #dashboard-overview,
.dashboard-page #dashboard-bots,
.dashboard-page #dashboard-automation,
.dashboard-page #dashboard-operations,
.dashboard-page #dashboard-insights {
  scroll-margin-top: 8rem;
}

.dashboard-page .dashboard-side-card {
  padding-top: 1rem;
}

.dashboard-page .auth-form {
  max-width: 440px;
  margin: 3rem auto;
  background: linear-gradient(180deg, rgba(10, 16, 24, 0.98), rgba(8, 13, 20, 0.98));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 2.2rem;
  border-radius: 24px;
  border: 1px solid rgba(211, 223, 236, 0.1);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.34);
  position: relative;
  overflow: hidden;
}

.dashboard-page .auth-form.auth-form-register {
  max-width: min(1180px, calc(100vw - 2rem));
  padding: 2rem 2.1rem;
  border-radius: 26px;
  background:
    radial-gradient(circle at top right, rgba(63, 207, 155, 0.12), transparent 24%),
    radial-gradient(circle at bottom left, rgba(96, 165, 250, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(10, 16, 24, 0.96), rgba(8, 13, 20, 0.98));
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.42), 0 0 80px rgba(63, 207, 155, 0.04);
}

.dashboard-page .auth-form.auth-form-register::before {
  height: 3px;
}

.dashboard-page .auth-form.auth-form-register #register-form {
  width: 100%;
}

.dashboard-page .auth-form::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-green), transparent);
}

.dashboard-page .auth-form::after {
  content: '';
  position: absolute;
  inset: 14px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.035);
  pointer-events: none;
}

.dashboard-page .form-group {
  margin-bottom: 1.25rem;
}

.dashboard-page .form-label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text-light);
  font-weight: 600;
  font-size: 0.9rem;
}

.dashboard-page .form-input {
  width: 100%;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(211, 223, 236, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-light);
  font-size: 0.98rem;
  transition: all 0.3s ease;
}

.dashboard-page .form-input:focus {
  outline: none;
  border-color: rgba(141, 227, 187, 0.42);
  box-shadow: 0 0 0 3px rgba(63, 207, 155, 0.12);
  background: rgba(255, 255, 255, 0.04);
}

.dashboard-page .form-input::placeholder {
  color: var(--text-muted);
}

.dashboard-page .error-message {
  color: var(--danger-color);
  font-size: 0.85rem;
  margin-top: 0.75rem;
  padding: 0.75rem;
  background: rgba(255, 71, 87, 0.1);
  border-radius: 8px;
  border: 1px solid rgba(255, 71, 87, 0.2);
}

.dashboard-page .success-message {
  color: var(--success-color);
  font-size: 0.85rem;
  margin-top: 0.75rem;
  padding: 0.75rem;
  background: rgba(0, 200, 150, 0.1);
  border-radius: 8px;
  border: 1px solid rgba(0, 200, 150, 0.2);
}

.dashboard-page .hidden {
  display: none !important;
}

.dashboard-page .loading {
  text-align: center;
  color: var(--text-muted);
  padding: 2rem;
  font-size: 0.95rem;
}

/* Dashboard mobile responsive */
@media (max-width: 992px) {
  .dashboard-page .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-page .sidebar {
    order: -1;
  }
}

@media (max-width: 768px) {
  .platform-capability-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-page .nav {
    flex-direction: column;
    gap: 1rem;
  }

  .dashboard-page .nav-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
  }

  .dashboard-page .stats-overview {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard-page .bot-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .dashboard-page .bot-status {
    width: 100%;
    justify-content: space-between;
  }

  .dashboard-page .bot-controls {
    width: 100%;
    justify-content: flex-end;
  }

  .dashboard-page .auth-form {
    margin: 1.5rem;
    padding: 1.5rem;
  }

  .dashboard-page .auth-form.auth-form-register {
    max-width: calc(100vw - 1.5rem);
    padding: 1.35rem 1rem;
    margin: 0.75rem;
    border-radius: 20px;
  }

  .dashboard-page .dashboard-hero {
    flex-direction: column;
  }

  .dashboard-page .dashboard-jumpbar {
    top: 5.1rem;
  }
}

@media (max-width: 480px) {
  .hero-fact-detail {
    font-size: 0.84rem;
  }

  .dashboard-page .stats-overview {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }

  .dashboard-page .stat-card {
    padding: 1rem;
  }

  .dashboard-page .stat-number {
    font-size: 1.5rem;
  }

  .dashboard-page .indicator-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ================================================================
   BUSINESS

   This page used to run its own visual world: a warm #0b1014 ground,
   sand #f4f1ea text, and three accents — mint, coral and gold — with
   Space Grotesk set as the body face as well as the display face. Next
   to every other page it read as a different company's site, and the
   thing it was trying to sell was this company's product.

   It is now built on the eq tokens. One accent, mint, exactly as the
   rest of the product uses it; gold survives on a single axis, where it
   carries meaning rather than variety — mint marks what ships in every
   engagement, gold marks what is priced per contract. Coral is gone.
   Space Grotesk stays as the display face and hands the body back to
   IBM Plex Sans, which is what the reader reads everywhere else.

   The structural change is rhythm. Fourteen sections of near-identical
   rounded cards read as one long undifferentiated wall, so the page now
   has two card weights and three section densities:

     plate   an argued point that owns a surface  (signal, gain, capability)
     item    an entry in an enumeration, ruled rather than boxed
             (use cases, fund controls, deployment, tailored, drivers)

   An enumeration of seven things does not become more readable by being
   drawn as seven boxes. It becomes more readable by being drawn as a
   list.
   ================================================================ */

.biz-landing {
  /* Gold is a role here, not a colour choice: it means "priced per
     contract" and appears nowhere that does not mean that. */
  --biz-gold: #e7c078;
  --biz-gold-wash: rgba(231, 192, 120, 0.1);
  --biz-gold-edge: rgba(231, 192, 120, 0.32);

  /* Section rhythm. Every section used to be 4rem; an argument and an
     appendix now get different amounts of air. */
  --biz-rhythm: clamp(4.5rem, 7vw, 7rem);
  --biz-rhythm-tight: clamp(3rem, 4.5vw, 4.5rem);

  background: var(--primary-dark);
  color: var(--text-light);
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.biz-landing h1,
.biz-landing h2,
.biz-landing h3,
.biz-landing h4,
.biz-landing .biz-stat-value,
.biz-landing .biz-gain-metric {
  font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
}

/* -- Hero ---------------------------------------------------------------
   The three blurred blobs drifting on a 10s loop are gone. They were the
   category's default decoration, they animated forever with nothing to
   say, and on a page whose argument is "we are the boring, careful
   option" they were arguing the opposite. What is left is one wash that
   sits still. */
.biz-hero {
  position: relative;
  padding: clamp(5.5rem, 9vw, 8rem) 0 var(--biz-rhythm);
  overflow: hidden;
}

.biz-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(62% 78% at 18% 8%, rgba(63, 207, 155, 0.13), transparent 68%),
    radial-gradient(48% 60% at 88% 0%, rgba(231, 192, 120, 0.07), transparent 62%);
  pointer-events: none;
  z-index: 0;
}

.biz-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.biz-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--eq-space-2);
  padding: 0.4rem 0.85rem;
  border-radius: var(--eq-radius-chip);
  border: 1px solid var(--eq-edge-accent);
  background: var(--eq-accent-wash);
  color: var(--eq-accent-ink);
  font-size: var(--eq-text-2xs);
  font-weight: 700;
  letter-spacing: var(--eq-tracking-label);
  text-transform: uppercase;
}

.biz-hero-copy h1 {
  margin: var(--eq-space-6) 0 var(--eq-space-5);
  /* Not --eq-text-4xl: this headline is a full sentence, and at 3.5rem in a
     two-column hero it broke over five lines against a panel that filled
     three. The scale below fits it in three lines at every width. */
  font-size: clamp(2.2rem, 1.35rem + 2.6vw, 3.1rem);
  font-weight: 700;
  line-height: var(--eq-leading-display);
  letter-spacing: var(--eq-tracking-display);
  text-wrap: balance;
}

.biz-lede {
  margin: 0;
  max-width: 52ch;
  color: var(--eq-body-ink);
  font-size: var(--eq-text-lg);
  line-height: var(--eq-leading-body);
}

.biz-hero-actions {
  display: flex;
  gap: var(--eq-space-4);
  margin: var(--eq-space-8) 0;
  flex-wrap: wrap;
}

/* Three facts under the hero. They were three stacked cards; they are
   now one ruled row, because they are one thought split three ways. */
.biz-hero-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--eq-space-5);
  padding-top: var(--eq-space-6);
  border-top: 1px solid var(--eq-edge-strong);
}

.biz-meta-card {
  display: flex;
  flex-direction: column;
  gap: var(--eq-space-2);
  min-width: 0;
}

.biz-meta-label {
  font-size: var(--eq-text-2xs);
  font-weight: 600;
  letter-spacing: var(--eq-tracking-label);
  text-transform: uppercase;
  color: var(--eq-label-ink);
}

.biz-meta-value {
  color: var(--text-light);
  font-size: var(--eq-text-md);
  line-height: var(--eq-leading-ui);
  font-weight: 600;
}

/* -- Hero panel ----------------------------------------------------------
   The one place on the page that shows the product rather than
   describing it. It is a mock and it says so, so it is drawn as the
   product's own console surface rather than as a marketing illustration:
   the same panel, hairline and label language the dashboard uses. */
.biz-hero-panel {
  position: relative;
  border-radius: var(--eq-radius-panel);
  border: 1px solid var(--eq-edge-strong);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015) 44%),
    rgba(8, 14, 21, 0.92);
  box-shadow: var(--eq-elev-3);
  padding: var(--eq-space-5);
}

.biz-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--eq-space-4);
  padding-bottom: var(--eq-space-4);
  margin-bottom: var(--eq-space-4);
  border-bottom: 1px solid var(--eq-edge);
  font-size: var(--eq-text-2xs);
  font-weight: 700;
  letter-spacing: var(--eq-tracking-label);
  text-transform: uppercase;
  color: var(--eq-label-ink);
}

.biz-pill {
  padding: 0.24rem 0.6rem;
  border-radius: var(--eq-radius-chip);
  background: var(--eq-accent-wash);
  border: 1px solid var(--eq-edge-accent);
  color: var(--eq-accent-ink);
  font-size: var(--eq-text-2xs);
  letter-spacing: var(--eq-tracking-label);
  text-transform: uppercase;
}

.biz-panel-body {
  display: grid;
  gap: 1px;
  background: var(--eq-edge);
  border: 1px solid var(--eq-edge);
  border-radius: var(--eq-radius-tile);
  overflow: hidden;
}

/* Hairlines drawn by the grid gap rather than by a border on each row:
   no doubled edge at the joins, and the ends stay square. */
.biz-panel-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--eq-space-4);
  padding: 0.7rem 0.9rem;
  background: rgba(5, 10, 16, 0.86);
  font-size: var(--eq-text-md);
  color: var(--eq-body-ink);
}

.biz-panel-value {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-weight: 600;
  color: var(--eq-accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.biz-panel-footer {
  margin-top: var(--eq-space-4);
  color: var(--eq-body-ink);
  font-size: var(--eq-text-sm);
  line-height: var(--eq-leading-body);
}

.biz-panel-footer p {
  margin: 0;
}

.biz-panel-disclaimer {
  margin: var(--eq-space-3) 0 0;
  padding-top: var(--eq-space-3);
  border-top: 1px solid var(--eq-edge);
  /* 4.6:1 on this ground. The old value sat at 0.45 alpha, which is
     under 3:1 — a disclaimer nobody can read is not a disclaimer. */
  color: #93a2b0;
  font-size: var(--eq-text-xs);
  line-height: var(--eq-leading-ui);
}

/* -- Section frame -------------------------------------------------------- */
.biz-section {
  padding: var(--biz-rhythm) 0;
}

/* Sections that continue the one above rather than starting a new
   argument sit closer to it. */
.biz-section--tight {
  padding: var(--biz-rhythm-tight) 0;
}

/* A raised band, used to group the sections that belong to one act. It
   is the only thing separating them, so the boundary is a hairline and a
   1.5% lift rather than another border radius. */
.biz-band {
  background: rgba(255, 255, 255, 0.016);
  border-top: 1px solid var(--eq-edge);
  border-bottom: 1px solid var(--eq-edge);
}

.biz-section-title {
  margin: 0 0 var(--eq-space-4);
  max-width: 22ch;
  font-size: var(--eq-text-2xl);
  font-weight: 700;
  line-height: var(--eq-leading-heading);
  letter-spacing: var(--eq-tracking-heading);
  color: var(--text-light);
  text-wrap: balance;
}

.biz-section-lede {
  margin: 0;
  max-width: 62ch;
  color: var(--eq-body-ink);
  font-size: var(--eq-text-lg);
  line-height: var(--eq-leading-body);
}

/* -- Plate: a card that has earned a surface ------------------------------- */
.biz-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--eq-space-10);
}

.biz-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.biz-card {
  display: flex;
  flex-direction: column;
  gap: var(--eq-space-3);
  padding: clamp(1.25rem, 2.2vw, 1.6rem);
  border-radius: var(--eq-radius-panel);
  border: 1px solid var(--eq-edge);
  background: var(--eq-surface-inline);
  transition: border-color var(--eq-dur-base) var(--eq-ease-out),
    background-color var(--eq-dur-base) var(--eq-ease-out);
}

.biz-card:hover {
  border-color: var(--eq-edge-accent);
  background: rgba(255, 255, 255, 0.04);
}

.biz-card h3 {
  margin: 0;
  font-size: var(--eq-text-lg);
  font-weight: 700;
  line-height: var(--eq-leading-heading);
  letter-spacing: var(--eq-tracking-heading);
  color: var(--text-light);
}

.biz-card p {
  margin: 0;
  color: var(--eq-body-ink);
  font-size: var(--eq-text-md);
  line-height: var(--eq-leading-body);
}

/* -- Item: an entry in an enumeration --------------------------------------
   Use cases, fund controls, deployment modes, tailored capabilities and
   cost drivers are lists. Drawing each entry as a box turned five lists
   into twenty-four competing objects; a rule and the gap between
   entries does the same grouping for none of the noise. */
.biz-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 0 clamp(1.5rem, 3vw, 2.75rem);
  margin-top: var(--eq-space-8);
}

.biz-item {
  padding: var(--eq-space-5) 0;
  border-top: 1px solid var(--eq-edge);
}

.biz-item h3,
.biz-item h4 {
  margin: 0 0 var(--eq-space-2);
  font-size: var(--eq-text-base);
  font-weight: 700;
  line-height: var(--eq-leading-heading);
  letter-spacing: var(--eq-tracking-heading);
  color: var(--text-light);
}

.biz-item p {
  margin: 0;
  color: var(--eq-body-ink);
  font-size: var(--eq-text-md);
  line-height: var(--eq-leading-body);
}

/* The rule is the item's own top edge, so the first row of a grid needs
   the accent to mark where the list starts. */
.biz-items--accent .biz-item {
  border-top-color: var(--eq-edge-accent);
}

/* -- Stats strip -----------------------------------------------------------
   Four platform facts. A row of four values under one rule, not four
   more cards immediately under the hero's four more cards. */
.biz-stats {
  padding: 0 0 var(--biz-rhythm-tight);
}

.biz-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  padding-top: var(--eq-space-8);
  border-top: 1px solid var(--eq-edge-strong);
}

.biz-stat {
  display: flex;
  flex-direction: column;
  gap: var(--eq-space-2);
  min-width: 0;
}

.biz-stat-value {
  font-size: var(--eq-text-2xl);
  font-weight: 700;
  letter-spacing: var(--eq-tracking-heading);
  color: var(--text-light);
  font-variant-numeric: tabular-nums;
}

.biz-stat-label {
  font-size: var(--eq-text-2xs);
  font-weight: 600;
  letter-spacing: var(--eq-tracking-label);
  text-transform: uppercase;
  color: var(--eq-label-ink);
}

/* -- Gain ------------------------------------------------------------------
   The four projections. The number is the reading, so it leads at
   display scale and in gold — these are the only figures on the page
   that are estimates rather than facts, and the footnote says so. */
.biz-gain-card {
  gap: var(--eq-space-2);
}

.biz-gain-metric {
  font-size: var(--eq-text-2xl);
  font-weight: 700;
  letter-spacing: var(--eq-tracking-display);
  color: var(--biz-gold);
  font-variant-numeric: tabular-nums;
}

/* -- Stack ------------------------------------------------------------------ */
.biz-stack-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.biz-stack-copy h2 {
  margin: 0 0 var(--eq-space-4);
  font-size: var(--eq-text-2xl);
  font-weight: 700;
  line-height: var(--eq-leading-heading);
  letter-spacing: var(--eq-tracking-heading);
  text-wrap: balance;
}

.biz-stack-copy p {
  margin: 0;
  max-width: 58ch;
  color: var(--eq-body-ink);
  font-size: var(--eq-text-base);
  line-height: var(--eq-leading-body);
}

.biz-list {
  margin: var(--eq-space-6) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--eq-space-3);
}

.biz-list li {
  position: relative;
  padding-left: var(--eq-space-6);
  color: var(--eq-body-ink);
  font-size: var(--eq-text-md);
  line-height: var(--eq-leading-body);
}

/* A drawn tick rather than a coral bullet: the list is a list of things
   that are true, and a dot does not say that. */
.biz-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.6rem;
  height: 0.34rem;
  border-left: 1.5px solid var(--eq-accent);
  border-bottom: 1.5px solid var(--eq-accent);
  transform: rotate(-45deg);
}

.biz-stack-cards {
  display: grid;
  gap: 0;
}

.biz-tile {
  padding: var(--eq-space-5) 0;
  border-top: 1px solid var(--eq-edge);
}

.biz-tile:first-child {
  border-top-color: var(--eq-edge-accent);
}

.biz-tile-label {
  display: block;
  margin-bottom: var(--eq-space-2);
  font-size: var(--eq-text-2xs);
  font-weight: 600;
  letter-spacing: var(--eq-tracking-label);
  text-transform: uppercase;
  color: var(--eq-accent);
}

.biz-tile h4 {
  margin: 0 0 var(--eq-space-2);
  font-size: var(--eq-text-base);
  font-weight: 700;
  letter-spacing: var(--eq-tracking-heading);
  color: var(--text-light);
}

.biz-tile p {
  margin: 0;
  color: var(--eq-body-ink);
  font-size: var(--eq-text-md);
  line-height: var(--eq-leading-body);
}

/* The three deployment modes are their own group with no heading above them,
   so the grid does its own introducing: it starts on a rule and its plates
   are the only three-up row in this part of the page. */
.biz-deploy-grid {
  margin-top: 0;
  padding-top: var(--eq-space-8);
  border-top: 1px solid var(--eq-edge-strong);
}

/* -- Build vs buy ----------------------------------------------------------
   Three columns of prose. The comparison is the content, so the table
   keeps its structure at every width — see the responsive block, where
   the old sheet dropped the header row and left three unlabelled
   paragraphs stacked on a phone with no way to tell which column was
   which. */
.biz-compare-table {
  margin-top: var(--eq-space-10);
  border: 1px solid var(--eq-edge-strong);
  border-radius: var(--eq-radius-panel);
  overflow: hidden;
  background: rgba(5, 10, 16, 0.55);
}

.biz-compare-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1.35fr);
  border-bottom: 1px solid var(--eq-edge);
}

.biz-compare-row:last-child {
  border-bottom: none;
}

.biz-compare-head {
  background: rgba(63, 207, 155, 0.06);
}

.biz-compare-head .biz-compare-cell {
  font-size: var(--eq-text-2xs);
  font-weight: 700;
  letter-spacing: var(--eq-tracking-label);
  text-transform: uppercase;
  color: var(--eq-label-ink);
}

.biz-compare-head .biz-compare-buy {
  color: var(--eq-accent);
}

.biz-compare-cell {
  padding: var(--eq-space-4) var(--eq-space-5);
  border-right: 1px solid var(--eq-edge);
  color: var(--eq-body-ink);
  font-size: var(--eq-text-md);
  line-height: var(--eq-leading-body);
}

.biz-compare-cell:last-child {
  border-right: none;
}

.biz-compare-dimension {
  font-weight: 600;
  color: var(--text-light);
}

.biz-compare-buy {
  background: rgba(63, 207, 155, 0.045);
  color: var(--eq-accent-ink);
}

/* -- Integrations ----------------------------------------------------------- */
.biz-integrations-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

.biz-integrations-copy h2 {
  margin: 0 0 var(--eq-space-4);
  font-size: var(--eq-text-2xl);
  font-weight: 700;
  line-height: var(--eq-leading-heading);
  letter-spacing: var(--eq-tracking-heading);
  text-wrap: balance;
}

.biz-integrations-copy p {
  margin: 0;
  max-width: 56ch;
  color: var(--eq-body-ink);
  font-size: var(--eq-text-base);
  line-height: var(--eq-leading-body);
}

.biz-code {
  margin-top: var(--eq-space-6);
  padding: var(--eq-space-4) var(--eq-space-5);
  border-radius: var(--eq-radius-tile);
  border: 1px solid var(--eq-edge-strong);
  background: rgba(0, 0, 0, 0.42);
  color: var(--eq-accent-ink);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: var(--eq-text-sm);
  line-height: 1.65;
  white-space: pre-line;
  overflow-x: auto;
}


.biz-sdk-list {
  display: grid;
  gap: 0;
}

.biz-sdk-card {
  padding: var(--eq-space-5) 0;
  border-top: 1px solid var(--eq-edge);
}

.biz-sdk-card:first-child {
  border-top-color: var(--eq-edge-accent);
}

.biz-sdk-card > span {
  display: block;
  margin-bottom: var(--eq-space-2);
  font-size: var(--eq-text-2xs);
  font-weight: 600;
  letter-spacing: var(--eq-tracking-label);
  text-transform: uppercase;
  color: var(--eq-label-ink);
}

.biz-sdk-card h4 {
  margin: 0 0 var(--eq-space-2);
  font-size: var(--eq-text-base);
  font-weight: 700;
  letter-spacing: var(--eq-tracking-heading);
  color: var(--text-light);
}

.biz-sdk-card p {
  margin: 0;
  color: var(--eq-body-ink);
  font-size: var(--eq-text-md);
  line-height: var(--eq-leading-body);
}

/* -- Pricing ----------------------------------------------------------------
   Two blocks with one difference between them, and the whole section
   exists to make that difference legible: mint is what every engagement
   ships with, gold is what is priced per contract. Everything else about
   the two blocks is deliberately identical so the colour is the only
   variable the reader has to track. */
.biz-offer-block {
  margin-top: var(--eq-space-12);
}

.biz-offer-label {
  display: inline-flex;
  align-items: center;
  gap: var(--eq-space-2);
  margin-bottom: var(--eq-space-3);
  padding: 0.3rem 0.75rem;
  border-radius: var(--eq-radius-chip);
  border: 1px solid var(--eq-edge-accent);
  background: var(--eq-accent-wash);
  color: var(--eq-accent-ink);
  font-size: var(--eq-text-2xs);
  font-weight: 700;
  letter-spacing: var(--eq-tracking-label);
  text-transform: uppercase;
}

.biz-offer-label--gold {
  border-color: var(--biz-gold-edge);
  background: var(--biz-gold-wash);
  color: var(--biz-gold);
}

.biz-offer-note {
  margin: 0;
  max-width: 66ch;
  color: var(--eq-body-ink);
  font-size: var(--eq-text-base);
  line-height: var(--eq-leading-body);
}

.biz-cap-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: var(--eq-space-6);
}

/* Equal height, with the disclosure pushed to the foot of each card. Side by
   side with `align-items: start` the two "Full specification" toggles landed
   at different heights, which read as two different controls rather than the
   same one on two cards. */
.biz-cap-card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 2.2vw, 1.6rem);
  border-radius: var(--eq-radius-panel);
  border: 1px solid var(--eq-edge);
  background: var(--eq-surface-inline);
}

.biz-cap-title {
  margin: 0 0 var(--eq-space-4);
  font-size: var(--eq-text-lg);
  font-weight: 700;
  letter-spacing: var(--eq-tracking-heading);
  color: var(--text-light);
}

.biz-price-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--eq-space-3);
}

.biz-price-list li {
  position: relative;
  padding-left: var(--eq-space-6);
  color: var(--eq-body-ink);
  font-size: var(--eq-text-md);
  line-height: var(--eq-leading-body);
}

/* One tick, drawn once, shared with .biz-list. The old one built a
   rounded gradient square and then laid a second pseudo-element on top
   of it at an offset that left the check sitting high in its own box. */
.biz-price-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.6rem;
  height: 0.34rem;
  border-left: 1.5px solid var(--eq-accent);
  border-bottom: 1.5px solid var(--eq-accent);
  transform: rotate(-45deg);
}

/* Long-form spec, one click away: present for the technical buyer, out
   of the way for everyone else. */
.biz-cap-detail {
  margin-top: auto;
  padding-top: var(--eq-space-4);
  border-top: 1px solid var(--eq-edge);
}

.biz-price-list {
  margin-bottom: var(--eq-space-5);
}

.biz-cap-detail summary,
.biz-faq-item summary {
  cursor: pointer;
  list-style: none;
}

.biz-cap-detail summary::-webkit-details-marker,
.biz-faq-item summary::-webkit-details-marker {
  display: none;
}

.biz-cap-detail summary {
  display: inline-flex;
  align-items: center;
  gap: var(--eq-space-2);
  font-size: var(--eq-text-xs);
  font-weight: 700;
  letter-spacing: var(--eq-tracking-label);
  text-transform: uppercase;
  color: var(--eq-accent);
}

/* The chevron is drawn, not typed: a rotating "+" is a glyph doing an
   icon's job, and it renders at a different weight in every face. */
.biz-cap-detail summary::after,
.biz-faq-item summary::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform var(--eq-dur-fast) var(--eq-ease-out);
  flex: none;
}

.biz-cap-detail[open] summary::after,
.biz-faq-item[open] summary::after {
  transform: rotate(-135deg);
}

.biz-cap-detail p {
  margin: var(--eq-space-4) 0 0;
  color: var(--eq-body-ink);
  font-size: var(--eq-text-md);
  line-height: var(--eq-leading-body);
}

.biz-tailored-grid,
.biz-drivers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 0 clamp(1.5rem, 3vw, 2.75rem);
  margin-top: var(--eq-space-6);
}

.biz-tailored-card,
.biz-driver-card {
  padding: var(--eq-space-5) 0;
  border-top: 1px solid var(--eq-edge);
}

/* Gold marks the tailored axis, and only there. */
.biz-tailored-card {
  border-top-color: var(--biz-gold-edge);
}

.biz-tailored-card h4,
.biz-driver-card h4 {
  margin: 0 0 var(--eq-space-2);
  font-size: var(--eq-text-base);
  font-weight: 700;
  letter-spacing: var(--eq-tracking-heading);
  line-height: var(--eq-leading-heading);
  color: var(--text-light);
}

.biz-tailored-card p,
.biz-driver-card p {
  margin: 0;
  color: var(--eq-body-ink);
  font-size: var(--eq-text-md);
  line-height: var(--eq-leading-body);
}

.biz-drivers {
  margin-top: var(--eq-space-16);
  padding-top: var(--eq-space-10);
  border-top: 1px solid var(--eq-edge-strong);
}

.biz-pricing-final {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--eq-space-5);
  margin-top: var(--eq-space-12);
}

.biz-pricing-note {
  margin: 0;
  max-width: 66ch;
  color: var(--eq-body-ink);
  font-size: var(--eq-text-md);
  line-height: var(--eq-leading-body);
}

/* -- Timeline ---------------------------------------------------------------
   Four weeks in order. The sequence is the information here — unlike the
   cost drivers, which were numbered 01 to 04 for decoration and are not
   a sequence at all — so it is drawn as one: a rule running through the
   steps with a node on each. */
.biz-timeline-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: var(--eq-space-12);
}

.biz-timeline-step {
  position: relative;
  padding-top: var(--eq-space-8);
}

/* The connecting rule. Drawn per step and stopped at the last one, so it
   never runs off the end into empty space. */
.biz-timeline-step::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  right: calc(-1 * clamp(1rem, 2.5vw, 2rem));
  height: 1px;
  background: var(--eq-edge-strong);
}

.biz-timeline-step:last-child::before {
  right: 0;
}

.biz-timeline-step::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--eq-accent);
  background: var(--primary-dark);
}

.biz-timeline-week {
  display: block;
  margin-bottom: var(--eq-space-2);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: var(--eq-text-2xs);
  font-weight: 700;
  letter-spacing: var(--eq-tracking-label);
  text-transform: uppercase;
  color: var(--eq-accent);
}

.biz-timeline-step h4 {
  margin: 0 0 var(--eq-space-2);
  font-size: var(--eq-text-base);
  font-weight: 700;
  letter-spacing: var(--eq-tracking-heading);
  color: var(--text-light);
}

.biz-timeline-step p {
  margin: 0;
  color: var(--eq-body-ink);
  font-size: var(--eq-text-md);
  line-height: var(--eq-leading-body);
}

/* -- FAQ --------------------------------------------------------------------- */
.biz-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 3vw, 2.75rem);
  margin-top: var(--eq-space-10);
}

.biz-faq-item {
  border-top: 1px solid var(--eq-edge);
  padding: var(--eq-space-4) 0;
}

.biz-faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--eq-space-4);
  font-size: var(--eq-text-base);
  font-weight: 600;
  line-height: var(--eq-leading-heading);
  color: var(--text-light);
  transition: color var(--eq-dur-fast) var(--eq-ease-out);
}

.biz-faq-item summary:hover {
  color: var(--eq-accent-strong);
}

.biz-faq-item summary::after {
  color: var(--eq-accent);
}

.biz-faq-item p {
  margin: var(--eq-space-3) 0 0;
  max-width: 62ch;
  color: var(--eq-body-ink);
  font-size: var(--eq-text-md);
  line-height: var(--eq-leading-body);
}

/* -- Footnotes ---------------------------------------------------------------
   Every figure on this page that is an estimate rather than a measured
   fact carries one of these. They were set at 0.5 alpha — under 3:1, so
   the qualification was the least readable text on a page whose whole
   argument is that it does not overstate. They now read. */
.biz-footnote {
  margin: var(--eq-space-8) 0 0;
  max-width: 76ch;
  padding-left: var(--eq-space-4);
  border-left: 1px solid var(--eq-edge-strong);
  color: #93a2b0;
  font-size: var(--eq-text-sm);
  line-height: var(--eq-leading-body);
}

/* -- Closing CTA --------------------------------------------------------------- */
.biz-cta {
  padding: 0 0 var(--biz-rhythm);
}

.biz-cta-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: var(--eq-radius-panel);
  border: 1px solid var(--eq-edge-accent);
  background:
    linear-gradient(140deg, rgba(63, 207, 155, 0.12), transparent 60%),
    rgba(6, 12, 19, 0.9);
}

.biz-cta-copy h2 {
  margin: 0 0 var(--eq-space-3);
  font-size: var(--eq-text-2xl);
  font-weight: 700;
  line-height: var(--eq-leading-heading);
  letter-spacing: var(--eq-tracking-heading);
  text-wrap: balance;
}

.biz-cta-copy p {
  margin: 0;
  max-width: 52ch;
  color: var(--eq-body-ink);
  font-size: var(--eq-text-base);
  line-height: var(--eq-leading-body);
}

.biz-cta-actions {
  display: flex;
  gap: var(--eq-space-4);
  flex-wrap: wrap;
  flex: none;
}

/* -- Request form ------------------------------------------------------------- */
.biz-request .biz-hero {
  padding-bottom: var(--biz-rhythm);
}

.biz-request-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.biz-request-form {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--eq-radius-panel);
  border: 1px solid var(--eq-edge-strong);
  background: rgba(8, 14, 21, 0.9);
  box-shadow: var(--eq-elev-2);
}

/* Fieldsets carry the two sections. Browser defaults for the element are a
   border, padding and a legend that sits in a gap in that border; none of
   that is wanted, but the grouping it announces is. */
.biz-form-fieldset {
  margin: 0 0 var(--eq-space-8);
  padding: 0;
  border: 0;
  min-width: 0;
}

.biz-form-fieldset > .biz-form-section-label {
  padding: 0;
}

.biz-form-grid {
  display: grid;
  gap: var(--eq-space-4);
  margin: var(--eq-space-3) 0 0;
}

/* Label above field. Every control on this form used to carry its question
   in a placeholder — which disappears the moment the field has a value, is
   never announced as the control's name, and is what stops a browser
   offering to fill it. The four selects had no question anywhere. */
.biz-field {
  display: flex;
  flex-direction: column;
  gap: var(--eq-space-2);
  min-width: 0;
}

.biz-field label {
  margin: 0;
  color: var(--eq-body-ink);
  font-size: var(--eq-text-sm);
  font-weight: 600;
  line-height: var(--eq-leading-ui);
}

.biz-form-captcha {
  margin: var(--eq-space-5) 0;
}

.biz-form-grid input,
.biz-form-grid select,
.biz-form-textarea {
  width: 100%;
  padding: 0.75rem 0.95rem;
  border-radius: 12px;
  border: 1px solid var(--eq-edge-strong);
  background: rgba(0, 0, 0, 0.32);
  color: var(--text-light);
  font-size: var(--eq-text-base);
  transition: border-color var(--eq-dur-fast) var(--eq-ease-out);
}

.biz-form-textarea {
  min-height: 8rem;
  resize: vertical;
}

/* `:user-invalid`, not `:invalid`: an empty required field is invalid from
   first paint, so the plain pseudo-class painted the organization and email
   fields red before the visitor had typed a character — the form opened
   already accusing them of a mistake. `:user-invalid` waits until the field
   has been interacted with and left. Where it is unsupported nothing is
   drawn, which is the behaviour this form had before. */
.biz-field input:user-invalid,
.biz-field textarea:user-invalid {
  border-color: rgba(255, 138, 138, 0.55);
}

.biz-form-status {
  margin-bottom: var(--eq-space-3);
  color: var(--eq-accent);
}

.biz-form-error {
  margin-bottom: var(--eq-space-3);
  color: #ff8a8a;
}

.biz-form-helper {
  margin: calc(-1 * var(--eq-space-2)) 0 var(--eq-space-4);
  color: var(--eq-body-ink);
  font-size: var(--eq-text-md);
  line-height: var(--eq-leading-body);
}

.biz-form-section-label {
  margin: 0 0 var(--eq-space-2);
  font-size: var(--eq-text-2xs);
  font-weight: 700;
  letter-spacing: var(--eq-tracking-label);
  text-transform: uppercase;
  color: var(--eq-label-ink);
}

.biz-form-privacy {
  margin-top: var(--eq-space-4);
  color: #93a2b0;
  font-size: var(--eq-text-sm);
  line-height: var(--eq-leading-ui);
}

/* The two standing facts beside the form. Same ruled-entry treatment as
   the hero's three, so a visitor arriving here from the landing page
   recognises the pattern rather than meeting a new one. */
.biz-request-points {
  display: grid;
  gap: 0;
  margin-top: var(--eq-space-8);
}

.biz-request-points .biz-meta-card {
  padding: var(--eq-space-4) 0;
  border-top: 1px solid var(--eq-edge);
}

.biz-request-points .biz-meta-card:first-child {
  border-top-color: var(--eq-edge-accent);
}

.biz-request-form h3 {
  margin: 0 0 var(--eq-space-2);
  font-size: var(--eq-text-xl);
  font-weight: 700;
  letter-spacing: var(--eq-tracking-heading);
  color: var(--text-light);
}

.biz-request-copy h1 {
  margin: var(--eq-space-6) 0 var(--eq-space-5);
  font-size: var(--eq-text-4xl);
  font-weight: 700;
  line-height: var(--eq-leading-display);
  letter-spacing: var(--eq-tracking-display);
  text-wrap: balance;
}

/* -- Reveal ---------------------------------------------------------------------
   `.biz-reveal { opacity: 0 }` used to be unconditional. The class that
   clears it is added by an IntersectionObserver that only exists once the
   WASM bundle has booted, so between first paint and hydration — and
   permanently, if the bundle fails to load or scripting is off — the
   entire business page was a blank dark rectangle. The prerendered HTML
   the crawler receives was blank too.

   Gating on `.reveal-ready` is the same guard the rest of the landing
   motion system already uses (see LANDING MOTION SYSTEM below): the
   resting state is visible, and JS opts the page into animating only
   once it is in a position to animate it back. */
.reveal-ready .biz-reveal {
  opacity: 0;
  transform: translateY(14px);
}

.reveal-ready .reveal-on-scroll.is-visible .biz-reveal {
  animation: biz-fade-up var(--eq-dur-slow) var(--eq-ease-out) forwards;
}

@keyframes biz-fade-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-ready .biz-reveal {
    opacity: 1;
    transform: none;
  }
}

/* -- Responsive ------------------------------------------------------------------ */
@media (max-width: 1080px) {
  .biz-hero-grid,
  .biz-integrations-grid,
  .biz-stack-grid,
  .biz-request-grid {
    grid-template-columns: 1fr;
  }

  .biz-grid,
  .biz-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .biz-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--eq-space-6) clamp(1rem, 3vw, 2rem);
  }

  .biz-timeline-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--eq-space-8) clamp(1rem, 2.5vw, 2rem);
  }

  /* The connector only reads across a single row, so on a wrapped grid
     each step keeps its node and loses the line. */
  .biz-timeline-step::before {
    display: none;
  }

  .biz-cap-grid,
  .biz-faq-grid {
    grid-template-columns: 1fr;
  }

  .biz-cta-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Build vs buy on a narrow screen. Each row becomes its own block and
     every cell states which column it came from — the old sheet hid the
     header row here and left three unlabelled paragraphs stacked, so on
     a phone the entire comparison was unreadable: you could not tell
     which paragraph described building it yourself and which described
     buying it. */
  .biz-compare-table {
    background: none;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }

  .biz-compare-row {
    grid-template-columns: 1fr;
    margin-bottom: var(--eq-space-4);
    border: 1px solid var(--eq-edge-strong);
    border-radius: var(--eq-radius-tile);
    overflow: hidden;
    background: rgba(5, 10, 16, 0.55);
  }

  .biz-compare-cell {
    border-right: none;
    border-bottom: 1px solid var(--eq-edge);
  }

  .biz-compare-cell:last-child {
    border-bottom: none;
  }

  .biz-compare-cell[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--eq-space-2);
    font-size: var(--eq-text-2xs);
    font-weight: 700;
    letter-spacing: var(--eq-tracking-label);
    text-transform: uppercase;
    color: var(--eq-label-ink);
  }

  .biz-compare-buy[data-label]::before {
    color: var(--eq-accent);
  }

  /* The dimension is the block's heading now, so it does not need to
     repeat its own column name. */
  .biz-compare-dimension {
    background: rgba(63, 207, 155, 0.06);
    font-size: var(--eq-text-base);
  }

  .biz-compare-head {
    display: none;
  }
}

@media (max-width: 720px) {
  .biz-hero-grid {
    gap: var(--eq-space-10);
  }

  .biz-hero-meta {
    grid-template-columns: 1fr;
    gap: var(--eq-space-4);
  }

  .biz-grid,
  .biz-grid-4,
  .biz-stats-grid,
  .biz-timeline-grid {
    grid-template-columns: 1fr;
  }

  .biz-stats-grid {
    gap: var(--eq-space-5);
  }

  .biz-cta-actions {
    width: 100%;
  }

  .biz-cta-actions .btn {
    flex: 1 1 12rem;
    text-align: center;
  }
}

/* ============================================
   MODERN UI POLISH — Global Refinements
   ============================================ */

a {
  transition: color var(--transition-fast);
}

img {
  image-rendering: auto;
}

.pricing-features li {
  transition: background var(--transition-fast);
  border-radius: 6px;
  padding: 0.45rem 0.5rem;
}

.pricing-features li:hover {
  background: rgba(0, 200, 150, 0.04);
}

.feature-card {
  transition: all var(--transition-smooth);
}

.feature-icon {
  transition: transform var(--transition-smooth);
}

.author-avatar {
  box-shadow: 0 4px 12px rgba(0, 200, 150, 0.2);
}

.testimonial-rating {
  letter-spacing: 2px;
}

.cta-card {
  position: relative;
  overflow: hidden;
}

.cta-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(0, 200, 150, 0.15), transparent 40%, transparent 60%, rgba(0, 200, 150, 0.1));
  z-index: -1;
  pointer-events: none;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  margin: 0 0.35rem;
  transition: all var(--transition-smooth);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
}

.social-links a:hover {
  color: var(--accent-green);
  background: rgba(0, 200, 150, 0.1);
  border-color: rgba(0, 200, 150, 0.2);
  transform: translateY(-2px);
}

.dashboard-page .card {
  transition: all var(--transition-smooth);
}

.dashboard-page .card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.dashboard-page .bot-item {
  transition: all var(--transition-smooth);
}

.dashboard-page .bot-item:hover {
  transform: translateX(4px);
}

.dashboard-page .status-active {
  animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(0, 200, 150, 0.4); }
  50% { box-shadow: 0 0 16px rgba(0, 200, 150, 0.7); }
}

.dashboard-page .loading {
  position: relative;
}

.dashboard-page .loading::after {
  content: '';
  display: block;
  width: 28px;
  height: 28px;
  margin: 1rem auto 0;
  border: 2.5px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--accent-green);
  border-radius: 50%;
  animation: spinLoader 0.7s linear infinite;
}

@keyframes spinLoader {
  to { transform: rotate(360deg); }
}

.dashboard-page .form-input {
  transition: all var(--transition-smooth);
}

.dashboard-page .form-input:focus {
  background: rgba(6, 10, 16, 0.7);
}

.dashboard-page .error-message {
  animation: slideInMsg 0.3s ease;
}

.dashboard-page .success-message {
  animation: slideInMsg 0.3s ease;
}

@keyframes slideInMsg {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.alert {
  border-radius: 10px;
  padding: 0.85rem 1.1rem;
  font-size: 0.9rem;
  animation: slideInMsg 0.3s ease;
}

.alert-success {
  background: rgba(0, 200, 150, 0.1);
  border: 1px solid rgba(0, 200, 150, 0.25);
  color: var(--accent-green-light);
}

.alert-danger {
  background: rgba(255, 71, 87, 0.1);
  border: 1px solid rgba(255, 71, 87, 0.25);
  color: #ff6b7a;
}

.affiliate-commission-card {
  transition: all var(--transition-smooth);
}

.affiliate-commission-card:hover {
  transform: translateY(-4px);
}

.affiliate-commission-card span {
  transition: transform var(--transition-smooth);
}

.affiliate-commission-card:hover span {
  transform: scale(1.05);
}

.affiliate-earnings-card {
  transition: all var(--transition-smooth);
}

.affiliate-earnings-card:hover {
  transform: translateY(-3px);
}

.affiliate-hero-card {
  transition: all var(--transition-smooth);
}

.affiliate-pill {
  transition: all var(--transition-fast);
}

.affiliate-pill:hover {
  background: rgba(0, 200, 150, 0.14);
  border-color: rgba(0, 200, 150, 0.4);
  transform: translateY(-1px);
}

.affiliate-card {
  position: relative;
  overflow: hidden;
}

.affiliate-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-green), transparent);
}

.dashboard-page .indicator {
  transition: all var(--transition-fast);
}

.dashboard-page .indicator:hover {
  background: rgba(0, 200, 150, 0.08);
  transform: translateY(-2px);
}

.dashboard-page .sidebar {
  position: sticky;
  top: 80px;
}

.dashboard-page .btn {
  transition: all var(--transition-smooth);
}

.dashboard-page .btn:active {
  transform: scale(0.97);
}

.dashboard-page .btn-primary:hover {
  transform: translateY(-2px);
}

/* The `.blog-content` prose rules that used to sit here are gone. The class is
   only ever applied together with `.eq-blog-article` (see blog.rs), and the BLOG
   block further down styles every element they styled — from the eq tokens, and
   with a 1px quote rule rather than the 3px mint bar this pair carried. Keeping
   both meant two answers for every prose element and a cascade race between
   them, which is exactly the duplication the BLOG block was written to end. */

.stat-card {
  transition: all var(--transition-smooth);
}

.stat-card:hover {
  transform: translateY(-3px);
}

/* NOTE: the generic `.freebies-card:hover { transform }` that used to live here
   was removed. It lifted the non-interactive "first week" step cards as well as
   the guide cards, which promised a click that only the guides answer. Hover
   and transition now live on `.freebies-card--guide` in the FREEBIES block. */
.freebies-tag {
  transition: color var(--transition-fast);
}

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

input, button, select, textarea {
  font-family: inherit;
}

.language-select {
  transition: all var(--transition-fast);
  cursor: pointer;
}

.language-select:hover {
  border-color: rgba(0, 200, 150, 0.3);
}

.language-select:focus {
  outline: none;
  border-color: var(--accent-green);
  box-shadow: 0 0 0 2px rgba(0, 200, 150, 0.15);
}

.section-title {
  letter-spacing: -0.02em;
}

h1, h2, h3, h4, h5 {
  letter-spacing: -0.01em;
}

.container {
  transition: none;
}

/* ============================================
   LANDING MOTION SYSTEM
   ============================================ */
.reveal-on-scroll {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.reveal-item {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.95s ease,
    transform 0.95s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

/* Reveal animation only activates when JS marks the page as reveal-ready. */
.reveal-ready .reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px) scale(0.995);
  filter: blur(1.5px);
  transition:
    opacity 1.05s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 1.05s cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 1.05s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity, transform, filter;
}

.reveal-ready .reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.reveal-ready .reveal-item {
  opacity: 0;
  transform: translateY(22px);
}

.reveal-ready .reveal-on-scroll.is-visible .reveal-item {
  opacity: 1;
  transform: translateY(0);
}

.reveal-ready .reveal-on-scroll.is-visible .reveal-item:nth-child(2) { transition-delay: calc(var(--reveal-delay, 0ms) + 120ms); }
.reveal-ready .reveal-on-scroll.is-visible .reveal-item:nth-child(3) { transition-delay: calc(var(--reveal-delay, 0ms) + 240ms); }
.reveal-ready .reveal-on-scroll.is-visible .reveal-item:nth-child(4) { transition-delay: calc(var(--reveal-delay, 0ms) + 360ms); }
.reveal-ready .reveal-on-scroll.is-visible .reveal-item:nth-child(5) { transition-delay: calc(var(--reveal-delay, 0ms) + 480ms); }
.reveal-ready .reveal-on-scroll.is-visible .reveal-item:nth-child(6) { transition-delay: calc(var(--reveal-delay, 0ms) + 600ms); }

.lift-hover {
  transition:
    transform var(--transition-smooth),
    box-shadow var(--transition-smooth),
    border-color var(--transition-smooth);
  transform-style: preserve-3d;
}

.lift-hover:hover {
  transform: translateY(-7px) scale(1.01);
  box-shadow: 0 22px 55px rgba(2, 8, 12, 0.42), 0 0 0 1px rgba(0, 200, 150, 0.16) inset;
}

.feature-card.lift-hover:hover .feature-icon {
  transform: translateY(-2px) scale(1.12) rotate(-6deg);
}

.pricing-card.lift-hover:hover {
  transform: translateY(-9px);
}

.pricing-card.featured.lift-hover:hover {
  transform: scale(1.04) translateY(-4px);
}

.testimonial-card.lift-hover:hover {
  transform: translateY(-8px) rotateX(2deg);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll,
  .reveal-item {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  .lift-hover:hover {
    transform: none !important;
  }
}

/* ================================================================
   EQ DESIGN SYSTEM — extracted from the homepage hero.
   Reusable classes for anywhere below the hero, and across pages.
   Naming: eq-* prefix to avoid collision with existing/bootstrap.
   ================================================================ */

:root {
  /* Tokens derived from hero-signal-card + hero-fact-card. */
  --eq-surface-0: rgba(5, 9, 14, 0.72);
  --eq-surface-1: rgba(8, 13, 22, 0.96);
  --eq-surface-2: rgba(7, 12, 20, 0.95);
  --eq-surface-inline: rgba(255, 255, 255, 0.025);
  --eq-hairline: rgba(211, 223, 236, 0.08);
  --eq-hairline-strong: rgba(211, 223, 236, 0.18);
  --eq-kicker-ink: rgba(164, 182, 173, 0.82);
  --eq-label-ink: rgba(170, 189, 179, 0.72);
  --eq-body-ink: rgba(223, 232, 228, 0.82);
  --eq-accent-ink: #cbf5e1;
  --eq-accent-wash: rgba(63, 207, 155, 0.08);
  --eq-accent-edge: rgba(141, 227, 187, 0.22);
  --eq-shadow-panel: 0 24px 56px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --eq-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --eq-radius-panel: 22px;
  --eq-radius-tile: 14px;
  --eq-radius-chip: 999px;
}

/* -- Panel: the signature layered-gradient surface with hairline and inset glow. */
.eq-panel {
  position: relative;
  padding: clamp(1.2rem, 2vw, 1.5rem);
  border-radius: var(--eq-radius-panel);
  background:
    linear-gradient(180deg, var(--eq-surface-1), var(--eq-surface-2)),
    radial-gradient(circle at top right, rgba(63, 207, 155, 0.12), transparent 38%);
  border: 1px solid var(--eq-hairline);
  box-shadow: var(--eq-shadow-panel);
  color: var(--text-light);
}

.eq-panel--flat {
  background: var(--eq-surface-inline);
  box-shadow: var(--eq-shadow-inset);
}

.eq-panel--accent {
  background:
    linear-gradient(180deg, var(--eq-surface-1), var(--eq-surface-2)),
    radial-gradient(circle at 88% 8%, rgba(63, 207, 155, 0.28), transparent 38%),
    radial-gradient(circle at 10% 98%, rgba(106, 166, 255, 0.16), transparent 42%);
  border-color: var(--eq-accent-edge);
}

.eq-panel--tight {
  padding: 0.85rem;
  border-radius: var(--eq-radius-tile);
}

/* -- Corner crosshairs: unique brutalist-ish hairlines that say "trading terminal"
      without being gimmicky. Purely decorative; pointer-events off. */
.eq-panel::before,
.eq-panel::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: var(--eq-hairline-strong);
  border-style: solid;
  pointer-events: none;
  opacity: 0.65;
}

.eq-panel::before {
  top: 10px;
  left: 10px;
  border-width: 1px 0 0 1px;
}

.eq-panel::after {
  bottom: 10px;
  right: 10px;
  border-width: 0 1px 1px 0;
}

.eq-panel--no-crosshair::before,
.eq-panel--no-crosshair::after {
  display: none;
}

/* -- Kicker: the uppercase mono micro-label used above headings.
      "Copy-trading live desk" / "Live" / "24h" style. */
.eq-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--eq-kicker-ink);
}

.eq-kicker::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--eq-accent-edge);
}

.eq-kicker--center {
  justify-content: center;
}

.eq-kicker--center::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--eq-accent-edge);
}

/* -- Display heading: Space Grotesk with tight negative tracking.
      Pair with .eq-kicker above it. */
.eq-display {
  font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--text-light);
  margin: 0;
}

.eq-display--xl { font-size: clamp(2rem, 4.6vw, 3.2rem); }
.eq-display--lg { font-size: clamp(1.6rem, 3vw, 2.35rem); }
.eq-display--md { font-size: clamp(1.3rem, 2vw, 1.7rem); }

/* -- Body copy tuned for dark surfaces. */
.eq-lede {
  color: var(--eq-body-ink);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.65;
  max-width: 62ch;
  margin: 0.75rem auto 0;
}

.eq-lede--left {
  margin-left: 0;
  margin-right: auto;
}

/* -- Pill: small, translucent, rounded-full info chip.
      Matches the "Live" / "+2.41% 24h" pills in the hero. */
.eq-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.72rem;
  border-radius: var(--eq-radius-chip);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(245, 250, 252, 0.9);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.eq-pill--accent {
  background: var(--eq-accent-wash);
  border-color: var(--eq-accent-edge);
  color: var(--eq-accent-ink);
}

.eq-pill--gold {
  background: var(--accent-gold-glow);
  border-color: rgba(208, 176, 106, 0.28);
  color: #f0dca0;
}

.eq-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

/* -- Stat tile: label-above-value terminal cell. */
.eq-stat {
  min-width: 0;
  padding: 0.7rem 0.85rem;
  border-radius: var(--eq-radius-tile);
  background: var(--eq-surface-inline);
  border: 1px solid var(--eq-hairline);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.eq-stat:hover {
  border-color: var(--eq-accent-edge);
  background: rgba(255, 255, 255, 0.04);
}

.eq-stat__label {
  margin: 0 0 0.2rem;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--eq-label-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eq-stat__value {
  margin: 0;
  font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-light);
  line-height: 1.25;
}

.eq-stat__value--xl { font-size: 1.6rem; }

.eq-stat__hint {
  margin: 0.3rem 0 0;
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.eq-stat-grid {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

/* -- Divider label: section separator with a label in the middle,
      flanked by hairlines. Used between page sections instead of a big H2. */
.eq-divider-label {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  margin: 3.5rem auto 1.25rem;
  max-width: 900px;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--eq-kicker-ink);
}

.eq-divider-label::before,
.eq-divider-label::after {
  content: "";
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--eq-hairline-strong), transparent);
}

/* -- Section wrapper: consistent vertical rhythm below the hero. */
.eq-section {
  padding: 4.5rem 0 3rem;
  position: relative;
}

.eq-section--tight {
  padding: 2.75rem 0 2rem;
}

.eq-section__header {
  max-width: 720px;
  margin: 0 auto 2.25rem;
  text-align: center;
}

.eq-section__header--left {
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

/* -- Grid of panels with breathable gutter. */
.eq-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.eq-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.eq-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 960px) {
  .eq-grid--3 { grid-template-columns: 1fr; }
  .eq-grid--2 { grid-template-columns: 1fr; }
}

/* -- Feature block: icon on left, copy on right.
      Replaces the generic "icon above, three lines below" AI-template look. */
.eq-feature {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1.35rem 1.4rem;
  border-radius: var(--eq-radius-panel);
  background: var(--eq-surface-inline);
  border: 1px solid var(--eq-hairline);
  transition: border-color var(--transition-smooth), transform var(--transition-smooth),
    background var(--transition-smooth), box-shadow var(--transition-smooth);
}

/* Accent wash that only appears on hover, anchored to the icon corner so the
   highlight reads as lighting the card rather than repainting it. */
.eq-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 6% 0%, rgba(63, 207, 155, 0.14), transparent 46%);
  opacity: 0;
  transition: opacity var(--transition-smooth);
  pointer-events: none;
}

.eq-feature:hover {
  border-color: var(--eq-accent-edge);
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
}

.eq-feature:hover::before {
  opacity: 1;
}

.eq-feature > * {
  position: relative;
}

.eq-feature:hover .eq-feature__icon {
  background: rgba(63, 207, 155, 0.16);
  color: #dff8ec;
}

.eq-feature__icon {
  transition: background var(--transition-smooth), color var(--transition-smooth);
}

.eq-feature__icon {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid var(--eq-accent-edge);
  background: var(--eq-accent-wash);
  color: var(--accent-green-light);
  font-size: 1.15rem;
}

.eq-feature__title {
  margin: 0 0 0.35rem;
  font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-light);
}

.eq-feature__body {
  margin: 0;
  color: var(--eq-body-ink);
  font-size: 0.92rem;
  line-height: 1.55;
}

.eq-feature__list {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
}

.eq-feature__list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.85rem;
  color: var(--eq-body-ink);
  line-height: 1.5;
}

.eq-feature__list li::before {
  content: "›";
  position: absolute;
  left: 0;
  top: -1px;
  color: var(--accent-green-light);
  font-weight: 700;
}

/* -- Row divider: fine hairline with fade-out at edges. */
.eq-hairline {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--eq-hairline-strong), transparent);
  margin: 2.5rem 0;
}

/* -- CTA surface: accent-edged panel with subtle corner glow.
      Contrasts visually with regular panels so end-of-page CTAs
      read as a destination instead of another card. */
.eq-cta {
  position: relative;
  padding: clamp(2rem, 5vw, 3.5rem);
  border-radius: var(--eq-radius-panel);
  background:
    linear-gradient(160deg, rgba(6, 11, 18, 0.94), rgba(4, 9, 14, 0.94)),
    radial-gradient(circle at 15% 20%, rgba(63, 207, 155, 0.18), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(106, 166, 255, 0.12), transparent 42%);
  border: 1px solid var(--eq-accent-edge);
  overflow: hidden;
  text-align: center;
}

.eq-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.015) 0 1px, transparent 1px 80px);
  mask-image: radial-gradient(circle at center, black 40%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 75%);
  pointer-events: none;
}

.eq-cta > * { position: relative; }

/* -- Typed cursor for hero-style kickers that should feel "live".
      Opt-in only — add .eq-live to an .eq-pill. */
.eq-live::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent-green);
  box-shadow: 0 0 10px rgba(63, 207, 155, 0.6);
  animation: eqLivePulse 1.6s ease-in-out infinite;
}

@keyframes eqLivePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.85); }
}

@media (prefers-reduced-motion: reduce) {
  .eq-live::before { animation: none; }
}

/* ============================================
   DASHBOARD FORMS + PROFILE UI POLISH
   Scoped to .dashboard-page so the marketing
   landing is untouched. Overrides Bootstrap's
   light .form-control / .alert defaults that
   otherwise render white inputs on the dark
   theme, and adds a cohesive profile layout.
   ============================================ */
.dashboard-page .form-control,
.dashboard-page input[type="text"],
.dashboard-page input[type="email"],
.dashboard-page input[type="password"],
.dashboard-page input[type="number"],
.dashboard-page input[type="tel"],
.dashboard-page input[type="url"],
.dashboard-page input[type="search"],
.dashboard-page select,
.dashboard-page textarea {
  width: 100%;
  background: rgba(6, 11, 19, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  color: var(--text-light);
  padding: 0.7rem 0.9rem;
  font-size: 0.92rem;
  line-height: 1.4;
  height: auto;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  -webkit-appearance: none;
  appearance: none;
}

.dashboard-page textarea {
  min-height: 96px;
  resize: vertical;
}

.dashboard-page select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 13px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
  cursor: pointer;
}

.dashboard-page select option {
  background: #0b1118;
  color: var(--text-light);
}

.dashboard-page .form-control::placeholder,
.dashboard-page input::placeholder,
.dashboard-page textarea::placeholder {
  color: rgba(138, 152, 168, 0.65);
}

.dashboard-page .form-control:hover,
.dashboard-page input:hover,
.dashboard-page select:hover,
.dashboard-page textarea:hover {
  border-color: rgba(63, 207, 155, 0.35);
}

.dashboard-page .form-control:focus,
.dashboard-page input:focus,
.dashboard-page select:focus,
.dashboard-page textarea:focus {
  outline: none;
  border-color: var(--accent-green);
  background: rgba(8, 14, 24, 0.95);
  box-shadow: 0 0 0 3px rgba(63, 207, 155, 0.16);
}

.dashboard-page .form-control:disabled,
.dashboard-page input:disabled,
.dashboard-page select:disabled,
.dashboard-page textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.dashboard-page input[type="checkbox"],
.dashboard-page input[type="radio"] {
  width: auto;
  accent-color: var(--accent-green);
  width: 1.05rem;
  height: 1.05rem;
  cursor: pointer;
  flex-shrink: 0;
}

.dashboard-page label {
  cursor: default;
}

/* Dark alert variants Bootstrap doesn't theme */
.dashboard-page .alert-info {
  background: rgba(63, 207, 155, 0.1);
  border: 1px solid rgba(63, 207, 155, 0.28);
  color: var(--accent-green-light);
}

.dashboard-page .alert-warning {
  background: rgba(241, 178, 80, 0.1);
  border: 1px solid rgba(241, 178, 80, 0.32);
  color: #f1c277;
}

/* ----- Profile segmented tab nav ----- */
.profile-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.3rem;
  margin-bottom: 1.25rem;
  padding: 0.35rem;
  background: rgba(7, 12, 20, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 999px;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.profile-tabs::-webkit-scrollbar {
  display: none;
}

.profile-tab {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-muted);
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.profile-tab:hover {
  color: var(--text-light);
}

.profile-tab.active {
  color: #06110c;
  background: linear-gradient(135deg, #3fcf9b 0%, #5fd5ba 100%);
  box-shadow: 0 8px 20px rgba(63, 207, 155, 0.22);
}

.profile-tab:focus-visible {
  outline: 2px solid var(--accent-green);
  outline-offset: 2px;
}

/* ----- Profile section cards ----- */
.dashboard-page .profile-section {
  padding: 1.35rem 1.4rem;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: linear-gradient(180deg, rgba(13, 20, 37, 0.6), rgba(8, 14, 28, 0.72));
  border-radius: 18px;
}

.dashboard-page .profile-section:hover {
  border-color: rgba(63, 207, 155, 0.22);
}

.profile-section-title {
  margin: 0 0 0.3rem;
  color: var(--text-light);
  font-size: 1.05rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.profile-section-title::before {
  content: '';
  width: 3px;
  height: 1.05em;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-green), rgba(63, 207, 155, 0.25));
  flex-shrink: 0;
}

.profile-section-body {
  margin: 0 0 1rem;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* Notification / toggle rows pick up a subtle hover */
.dashboard-page .profile-toggle-row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  color: var(--text-light);
  padding: 0.55rem 0.7rem;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(255, 255, 255, 0.015);
  transition: border-color var(--transition-fast), background var(--transition-fast);
  cursor: pointer;
}

.dashboard-page .profile-toggle-row:hover {
  border-color: rgba(63, 207, 155, 0.3);
  background: rgba(63, 207, 155, 0.05);
}

@media (max-width: 560px) {
  .profile-tab {
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
  }
  .dashboard-page .profile-section {
    padding: 1.1rem;
  }
}

/* ----- One-time-code (2FA / OTP) inputs -----
   Shared treatment for every verification-code field: login email OTP,
   login TOTP, and the profile TOTP setup confirm step. Large, centered,
   monospaced with tabular figures so 6–8 digits read cleanly. */
.dashboard-page .otp-code-input {
  width: 100%;
  text-align: center;
  font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  /* nudge text right so trailing letter-spacing doesn't visually off-center it */
  text-indent: 0.3em;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  background: rgba(6, 11, 19, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: var(--text-light);
  caret-color: var(--accent-green);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.dashboard-page .otp-code-input::placeholder {
  color: rgba(138, 152, 168, 0.4);
  font-weight: 600;
}

.dashboard-page .otp-code-input:hover {
  border-color: rgba(63, 207, 155, 0.4);
}

.dashboard-page .otp-code-input:focus {
  outline: none;
  border-color: var(--accent-green);
  background: rgba(8, 14, 24, 0.95);
  box-shadow: 0 0 0 3px rgba(63, 207, 155, 0.18);
}

/* Numbered step badge for the TOTP setup flow */
.dashboard-page .mfa-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: rgba(63, 207, 155, 0.18);
  border: 1px solid rgba(63, 207, 155, 0.4);
  color: var(--accent-green);
  font-weight: 800;
  font-size: 0.8rem;
}

/* -- Founder contact ------------------------------------------------- */
.founder-contact {
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
}

.founder-contact__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.founder-contact__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  flex: 1 1 200px;
  max-width: 260px;
  padding: 1.5rem 1.25rem;
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-light);
  text-decoration: none;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.founder-contact__link:hover {
  transform: translateY(-4px);
  background: var(--glass-bg-hover);
  border-color: var(--accent-green);
  color: var(--text-light);
  text-decoration: none;
}

.founder-contact__link i {
  font-size: 2rem;
  color: var(--accent-green);
}

.founder-contact__label {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.founder-contact__value {
  font-weight: 700;
  font-size: 1rem;
}

/* ================================================================
   SECTION BANDS

   Every section below the hero used to sit on the same flat dark
   gradient, so the page read as one continuous scroll with no sense
   of chapters. A band gives a section its own ground: a surface
   treatment plus a pattern layer in `::before`, so sections are told
   apart by material rather than by spacing alone.

   Usage: add `eq-band eq-band--<variant>` to the <section>. The
   pattern sits at z-index 0 and direct children are lifted to 1, so
   nothing inside needs to know a band is there.
   ================================================================ */
.eq-band {
  position: relative;
  isolation: isolate;
}

.eq-band > * {
  position: relative;
  z-index: 1;
}

.eq-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* -- Tape: a recessed console well. Inset shadows on the top and
      bottom edges make it read as cut INTO the page, and the fine
      scanlines give the live market data a readout texture. */
.eq-band--tape {
  background: linear-gradient(180deg, rgba(3, 6, 10, 0.88), rgba(5, 9, 14, 0.7));
  border-top: 1px solid var(--eq-hairline);
  border-bottom: 1px solid var(--eq-hairline);
  box-shadow:
    inset 0 26px 46px -34px rgba(0, 0, 0, 0.95),
    inset 0 -26px 46px -34px rgba(0, 0, 0, 0.95);
}

.eq-band--tape::before {
  background-image: repeating-linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.022) 0 1px,
    transparent 1px 4px
  );
  opacity: 0.75;
}

/* -- Mesh: a raised plane with a shallow diagonal weave and one soft
      accent bloom. Masked top and bottom so the weave fades out
      instead of ending on a hard line. */
.eq-band--mesh::before {
  background-image:
    linear-gradient(115deg, rgba(255, 255, 255, 0.021) 1px, transparent 1px),
    linear-gradient(-115deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px),
    radial-gradient(ellipse 68% 54% at 80% 6%, rgba(63, 207, 155, 0.09), transparent 62%);
  background-size: 46px 46px, 46px 46px, auto;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
}

/* -- Plate: pricing gets a physically distinct slab, lighter than the
      page and with rounded top corners, so the commercial section is
      unmistakably its own surface. */
.eq-band--plate {
  margin-top: 2rem;
  border-top: 1px solid var(--eq-hairline-strong);
  border-radius: 28px 28px 0 0;
  background: linear-gradient(180deg, rgba(13, 20, 30, 0.94), rgba(7, 12, 19, 0.97));
}

.eq-band--plate::before {
  border-radius: inherit;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 74% 58% at 50% 0%, #000, transparent 72%);
  mask-image: radial-gradient(ellipse 74% 58% at 50% 0%, #000, transparent 72%);
  opacity: 0.65;
}

/* -- Glow: the closing call to action, lit from below so the eye is
      pulled down into the button rather than drifting past it. */
.eq-band--glow::before {
  background:
    radial-gradient(ellipse 62% 72% at 50% 112%, rgba(63, 207, 155, 0.17), transparent 62%),
    radial-gradient(ellipse 48% 58% at 10% -8%, rgba(106, 166, 255, 0.09), transparent 60%);
}

/* -- Quiet: deliberately the least decorated band on the page. It
      follows the CTA, and stacking another treatment there would
      compete with the thing we actually want clicked. */
.eq-band--quiet {
  border-top: 1px solid var(--eq-hairline);
  background: rgba(4, 8, 12, 0.55);
}

/* -- Section index: the small "01 / MARKET" marker that numbers the
      chapters. Sits above the heading and reuses the divider hairline
      so it reads as chrome, not content. */
.eq-index {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--eq-kicker-ink);
}

.eq-index__num {
  color: var(--accent-green);
}

.eq-index__rule {
  width: 30px;
  height: 1px;
  background: var(--eq-accent-edge);
}

/* ================================================================
   MARKET CONSOLE — the market-pulse component

   The movers used to be a bare grid under a floating caption strip.
   Framing them in a console with a legend bar turns eighteen loose
   tiles into one instrument: the bar states what the columns mean and
   that the feed is live, and the frame gives the grid an edge to sit
   against inside the tape band.
   ================================================================ */
.market-console {
  border: 1px solid var(--eq-hairline);
  border-radius: var(--eq-radius-panel);
  background: rgba(6, 11, 17, 0.62);
  box-shadow: var(--eq-shadow-inset);
  overflow: hidden;
}

.market-console__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--eq-hairline);
  background: rgba(255, 255, 255, 0.018);
}

.market-console__caption {
  margin: 0;
  color: var(--eq-body-ink);
  font-size: 0.88rem;
  line-height: 1.5;
  max-width: 62ch;
}

.market-console__body {
  padding: 1rem;
}

.market-console__empty {
  padding: 2.5rem 1.25rem;
  text-align: center;
}

/* -- Capability index watermark. Sits behind the copy in the corner of
      the card; large and very low contrast so it numbers the grid
      without competing with the title. */
.eq-feature__index {
  position: absolute;
  right: 0.9rem;
  bottom: 0.5rem;
  z-index: 0;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(211, 223, 236, 0.055);
  transition: color var(--transition-smooth);
  pointer-events: none;
}

.eq-feature:hover .eq-feature__index {
  color: rgba(141, 227, 187, 0.14);
}

/* The icon and copy columns are already lifted above the hover wash by
   `.eq-feature > *`; the watermark must stay under them. */
.eq-feature > .eq-feature__index {
  z-index: 0;
}

/* -- Founder cards. The generic glass card made three contact methods
      look like three more product features; a left accent rail and a
      tighter row reads as a contact strip instead. */
.founder-contact__link {
  position: relative;
  overflow: hidden;
  padding: 1.35rem 1.15rem;
  border-radius: var(--eq-radius-tile);
  background: var(--eq-surface-inline);
  border: 1px solid var(--eq-hairline);
}

.founder-contact__link::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--accent-green), transparent);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.founder-contact__link:hover::before {
  opacity: 1;
}

.founder-contact__link i {
  font-size: 1.6rem;
}

.founder-contact__value {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.92rem;
  letter-spacing: -0.01em;
}

/* Discord has no link target (there is no profile URL), so it renders as
   a div. Strip the affordances a hover state would otherwise imply. */
div.founder-contact__link {
  cursor: default;
}

div.founder-contact__link:hover {
  transform: none;
  border-color: var(--eq-hairline);
  background: var(--eq-surface-inline);
}

div.founder-contact__link:hover::before {
  opacity: 0;
}

/* ================================================================
   FREEBIES TRACK — the ordered "first week" timeline

   These three steps replaced three identical cards. They are strictly
   sequential, so they render as an <ol> with a rail running through
   the markers; the rail is drawn on the list (not per item) so it
   cannot end up misaligned when a step wraps to a different height.
   ================================================================ */
.freebies-track {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

/* Horizontal rail, threaded through the centre of the marker row.
   `left/right` inset by half a column keeps it from sticking out past
   the first and last markers. */
.freebies-track::before {
  content: "";
  position: absolute;
  top: 27px;
  left: calc(16.66% + 27px);
  right: calc(16.66% + 27px);
  height: 1px;
  background: linear-gradient(
    90deg,
    var(--eq-accent-edge),
    var(--eq-hairline-strong),
    var(--eq-accent-edge)
  );
  opacity: 0.7;
}

.freebies-track__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
}

.freebies-track__marker {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--eq-accent-edge);
  /* Opaque, so the rail passes behind the circle rather than through it. */
  background: linear-gradient(180deg, #0c141d, #080e15);
  box-shadow: 0 0 0 6px rgba(5, 9, 14, 0.9), 0 10px 24px rgba(0, 0, 0, 0.35);
  color: var(--accent-green-light);
  font-size: 1.2rem;
  transition: border-color var(--transition-smooth), color var(--transition-smooth),
    transform var(--transition-smooth);
}

.freebies-track__step:hover .freebies-track__marker {
  border-color: var(--accent-green);
  color: #dff8ec;
  transform: translateY(-3px);
}

.freebies-track__index {
  display: block;
  margin-bottom: 0.4rem;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent-green);
}

.freebies-track__title {
  margin: 0 0 0.45rem;
  font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text-light);
}

.freebies-track__copy {
  margin: 0 auto;
  max-width: 34ch;
  color: var(--eq-body-ink);
  font-size: 0.89rem;
  line-height: 1.55;
}

/* Below three columns the horizontal rail is meaningless, so the track
   becomes a vertical list with the rail running down the marker gutter. */
@media (max-width: 860px) {
  .freebies-track {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .freebies-track::before {
    top: 27px;
    bottom: 27px;
    left: 27px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(
      180deg,
      var(--eq-accent-edge),
      var(--eq-hairline-strong),
      var(--eq-accent-edge)
    );
  }

  .freebies-track__step {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 1.1rem;
  }

  .freebies-track__copy {
    margin: 0;
    max-width: none;
  }
}

/* ================================================================
   THE VALIDATION ENGINE

   Signature visual: candidate strategies entering noisy, being culled
   at each validation gate, one surviving to trade. Component lives in
   `components/validation_engine.rs`.

   Every animated property here is opacity / transform / stroke-dashoffset,
   so the compositor handles it and nothing triggers layout. There is no
   WebGL: the diagram is plain SVG, which means there is no context to
   lose and no fallback path to keep in sync.
   ================================================================ */
.validation-engine {
  width: 100%;
  container-type: inline-size;
}

.validation-engine__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* -- Depth grid ------------------------------------------------------ */
.validation-engine__grid line {
  stroke: rgba(211, 223, 236, 0.055);
  stroke-width: 1;
}

/* -- Gate rules: the vertical checkpoints ---------------------------- */
.validation-engine__gate-rule {
  stroke: var(--eq-hairline-strong);
  stroke-width: 1;
  stroke-dasharray: 3 7;
  opacity: 0.5;
  animation: eqGatePulse 4.5s ease-in-out infinite;
}

@keyframes eqGatePulse {
  0%, 100% { opacity: 0.32; }
  50% { opacity: 0.72; }
}

/* -- Rejected branches ----------------------------------------------
   Drawn once, then held. They read as "these were tried and did not
   make it", so they must stay visible rather than replay forever. */
.validation-engine__branch {
  fill: none;
  stroke: url(#eqRejected);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: eqDraw 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes eqDraw {
  to { stroke-dashoffset: 0; }
}

/* Cull markers appear only after their branch has finished drawing. */
.validation-engine__cull line {
  stroke: rgba(255, 122, 122, 0.62);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.validation-engine__cull {
  opacity: 0;
  animation: eqCullIn 0.5s ease-out forwards;
}

@keyframes eqCullIn {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; }
}

/* -- The survivor ---------------------------------------------------- */
.validation-engine__survivor {
  fill: none;
  stroke: url(#eqSurvivor);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: eqDraw 2.1s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;
  filter: drop-shadow(0 0 6px rgba(63, 207, 155, 0.35));
}

/* A short lit segment running the length of the survivor: the "signal"
   itself, travelling the pipeline on a slow loop. */
.validation-engine__pulse {
  fill: none;
  stroke: #d6fff0;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 26 974;
  stroke-dashoffset: 1000;
  opacity: 0.9;
  animation: eqPulseRun 5s linear 2.4s infinite;
}

@keyframes eqPulseRun {
  from { stroke-dashoffset: 1000; }
  to { stroke-dashoffset: 0; }
}

/* -- Gate nodes ------------------------------------------------------ */
.validation-engine__node {
  opacity: 0;
  animation: eqNodeIn 0.55s ease-out forwards;
}

@keyframes eqNodeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.validation-engine__node-ring {
  fill: rgba(8, 14, 21, 0.92);
  stroke: var(--eq-accent-edge);
  stroke-width: 1.2;
}

.validation-engine__node-dot {
  fill: var(--accent-green-light);
}

.validation-engine__label {
  fill: rgba(170, 189, 179, 0.78);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.validation-engine__label--live {
  fill: var(--accent-green-light);
}

/* -- LIVE outcome ---------------------------------------------------- */
.validation-engine__live-ring {
  fill: rgba(6, 17, 12, 0.95);
  stroke: var(--accent-green);
  stroke-width: 1.6;
  animation: eqLiveBreathe 3.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes eqLiveBreathe {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

.validation-engine__live-dot {
  fill: #d6fff0;
}

/* -- Compact variant, for the hero slot ------------------------------ */
.validation-engine--compact .validation-engine__svg {
  max-height: 260px;
}

/* -- Reduced motion --------------------------------------------------
   Not "slightly slower" — everything resolves to its finished state and
   stops. The diagram still tells the whole story standing still. */
@media (prefers-reduced-motion: reduce) {
  .validation-engine__branch,
  .validation-engine__survivor {
    stroke-dashoffset: 0;
    animation: none;
  }

  .validation-engine__pulse {
    display: none;
  }

  .validation-engine__cull,
  .validation-engine__node {
    opacity: 1;
    animation: none;
  }

  .validation-engine__gate-rule,
  .validation-engine__live-ring {
    animation: none;
    opacity: 0.6;
  }
}

/* -- Hero slot: the always-available state when no bot is streaming --- */
.hero-signal-chart__engine {
  height: 292px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem 0.75rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.022);
  border: 1px solid var(--eq-hairline);
}

.hero-signal-chart__engine-note {
  font-size: 0.68rem;
  line-height: 1.4;
  text-align: center;
  color: var(--text-muted);
}

/* ================================================================
   ENGINE SECTION — band, gate cards, verdict panel
   ================================================================ */

/* The engine band is the darkest ground on the page: the diagram is
   luminous, and it needs somewhere dark to be luminous against. */
.eq-band--engine {
  background: linear-gradient(180deg, rgba(4, 7, 11, 0.96), rgba(6, 11, 17, 0.9));
  border-top: 1px solid var(--eq-hairline);
  border-bottom: 1px solid var(--eq-hairline);
}

.eq-band--engine::before {
  background:
    radial-gradient(ellipse 55% 60% at 50% 42%, rgba(63, 207, 155, 0.075), transparent 66%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 72px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}

.engine-stage {
  margin: 0 auto 2.5rem;
  max-width: 1000px;
  padding: 1.25rem clamp(0.5rem, 2vw, 1.5rem) 1rem;
  border-radius: var(--eq-radius-panel);
  border: 1px solid var(--eq-hairline);
  background: rgba(6, 11, 17, 0.55);
  box-shadow: var(--eq-shadow-inset);
}

.engine-stage__caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin: 0.75rem 0 0;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* -- Gate cards: four columns, each a checkpoint that can end a run. */
.engine-gates {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

@media (max-width: 980px) {
  .engine-gates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .engine-gates { grid-template-columns: 1fr; }
}

.engine-gate {
  position: relative;
  padding: 1.2rem 1.15rem 1.25rem;
  border-radius: var(--eq-radius-tile);
  background: var(--eq-surface-inline);
  border: 1px solid var(--eq-hairline);
  /* Top rule doubles as the "gate" motif from the diagram above. */
  border-top: 2px solid var(--eq-accent-edge);
  transition: border-color var(--transition-smooth), transform var(--transition-smooth),
    background var(--transition-smooth);
}

.engine-gate:hover {
  transform: translateY(-2px);
  border-top-color: var(--accent-green);
  background: rgba(255, 255, 255, 0.04);
}

.engine-gate__step {
  display: block;
  margin-bottom: 0.5rem;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent-green);
}

.engine-gate__title {
  margin: 0 0 0.45rem;
  font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text-light);
}

.engine-gate__body {
  margin: 0;
  color: var(--eq-body-ink);
  font-size: 0.88rem;
  line-height: 1.55;
}

/* -- Verdict panel --------------------------------------------------- */
.engine-verdict {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr);
  gap: 1.75rem;
  align-items: center;
  padding: clamp(1.4rem, 3vw, 2rem);
  border-radius: var(--eq-radius-panel);
  border: 1px solid var(--eq-accent-edge);
  background:
    linear-gradient(160deg, rgba(8, 15, 22, 0.95), rgba(5, 10, 16, 0.95)),
    radial-gradient(circle at 88% 12%, rgba(63, 207, 155, 0.16), transparent 46%);
}

@media (max-width: 820px) {
  .engine-verdict { grid-template-columns: 1fr; gap: 1.25rem; }
}

.engine-verdict__body {
  margin: 0.7rem 0 0;
  color: var(--eq-body-ink);
  font-size: 0.95rem;
  line-height: 1.65;
}

.engine-verdict__chips {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Verdict chips carry a status LED each. All three outcomes are shown
   with equal weight on purpose — REJECTED is a real, common result and
   hiding it would undercut the whole section. */
.engine-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.9rem;
  border-radius: var(--eq-radius-tile);
  border: 1px solid currentColor;
  background: rgba(255, 255, 255, 0.02);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.engine-chip__led {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  animation: eqLedBlink 2.8s ease-in-out infinite;
}

@keyframes eqLedBlink {
  0%, 100% { opacity: 1; }
  55% { opacity: 0.35; }
}

.engine-chip--approved { color: #3fcf9b; }
.engine-chip--rejected { color: #ff7a7a; }
.engine-chip--insufficient { color: #d0b06a; }

/* Stagger the LEDs so the row reads as three independent indicators
   rather than one synchronised strobe. */
.engine-chip--rejected .engine-chip__led { animation-delay: 0.55s; }
.engine-chip--insufficient .engine-chip__led { animation-delay: 1.1s; }

/* ================================================================
   PRICING GRID — primary three, the rest on request

   The grid used to render six cards in one `auto-fit` row, which asked
   the visitor to compare six things before they knew what any of them
   were. Free / Pro / Advanced lead in a fixed three-column row; Basic,
   VIP and Enterprise expand underneath.
   ================================================================ */
.pricing-grid--primary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

.pricing-grid--secondary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1.25rem;
  animation: eqPlansExpand 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes eqPlansExpand {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 1024px) {
  .pricing-grid--primary,
  .pricing-grid--secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .pricing-grid--primary,
  .pricing-grid--secondary {
    grid-template-columns: 1fr;
  }
}

.pricing-toggle-row {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

/* A quiet disclosure control, not a third call to action competing with
   the plan buttons directly above it. */
.pricing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1.2rem;
  border-radius: var(--eq-radius-chip);
  border: 1px solid var(--eq-hairline);
  background: rgba(255, 255, 255, 0.025);
  color: var(--eq-body-ink);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast),
    color var(--transition-fast);
}

.pricing-toggle:hover {
  border-color: var(--eq-accent-edge);
  background: var(--eq-accent-wash);
  color: var(--eq-accent-ink);
}

.pricing-toggle:focus-visible {
  outline: 2px solid var(--accent-green);
  outline-offset: 3px;
}

/* -- Savings line + cycle note, previously inline-styled in home.rs --- */
.pricing-savings {
  margin-top: -0.3rem;
  margin-bottom: 0.7rem;
  color: rgba(63, 207, 155, 0.95);
  font-size: 0.88rem;
  font-weight: 600;
}

.pricing-savings__was {
  text-decoration: line-through;
  opacity: 0.85;
}

.pricing-cycle-note {
  margin-top: 0.2rem;
  margin-bottom: 0.7rem;
  color: rgba(148, 163, 184, 0.9);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* ================================================================
   LANDING INSTRUMENT SURFACES
   ================================================================

   Everything below dresses the sections that show the product
   working: the hero bezel, the five pipeline stage cards, the
   research console still, the architecture map, and the custody /
   risk pair.

   Two rules hold the whole block together:

   1. Anything that displays DATA is an inset screen — darker than
      the surface it sits in, with an inner shadow and a hairline.
      Anything that displays COPY is a raised surface. That one
      distinction does most of the work of making the page read as
      instrumentation rather than as a deck of marketing cards.

   2. The accent green is a signal, never a decoration. It marks the
      thing that survived, the live state, the confirmed control —
      so it stays scarce and keeps its meaning. Neutral hairlines
      and greys carry the structure.

   Motion is one-shot and compositor-only (opacity / transform /
   stroke-dashoffset). Everything collapses to a static diagram
   under prefers-reduced-motion at the end of the block.
   ================================================================ */

/* -- Figure caption. Every illustration on this page is schematic,
      and each one says so directly underneath rather than in a
      footnote nobody reads. */
.eq-figure-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.6rem 0 0;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(170, 189, 179, 0.6);
  text-align: center;
}

.eq-figure-note i {
  font-size: 0.78rem;
  color: rgba(63, 207, 155, 0.5);
}

.eq-figure-note--flush {
  justify-content: flex-start;
  margin-top: 0.9rem;
  text-align: left;
}

/* ================================================================
   BAND VARIANTS added for the new sections
   ================================================================ */

/* -- Rail: a faint vertical ruling that echoes the pipeline running
      through the section. Masked at both ends so the rules fade
      instead of colliding with the section borders. */
.eq-band--rail::before {
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 132px),
    radial-gradient(ellipse 60% 46% at 50% 0%, rgba(63, 207, 155, 0.07), transparent 64%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}

/* -- Vault: heavier and cooler than the rest of the page. The
      custody section should feel like a different, sturdier room. */
.eq-band--vault {
  border-top: 1px solid var(--eq-hairline);
  background: linear-gradient(180deg, rgba(6, 11, 17, 0.9), rgba(4, 8, 13, 0.96));
}

.eq-band--vault::before {
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    radial-gradient(ellipse 54% 40% at 82% 12%, rgba(106, 166, 255, 0.07), transparent 60%);
  background-size: 34px 34px, 34px 34px, auto;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}

/* ================================================================
   HERO TERMINAL BEZEL
   ================================================================ */

.hero-terminal {
  margin-top: 2rem;
  border-radius: var(--eq-radius-panel);
  border: 1px solid var(--eq-hairline);
  background: linear-gradient(180deg, rgba(14, 21, 30, 0.94), rgba(7, 12, 19, 0.9));
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.hero-terminal__chrome {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--eq-hairline);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008));
}

.hero-terminal__dots {
  display: inline-flex;
  gap: 0.32rem;
  flex: 0 0 auto;
}

.hero-terminal__dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}

/* Only the third light is live. Three identical grey dots are a
   macOS pastiche; one lit dot says the instrument is running. */
.hero-terminal__dots span:nth-child(3) {
  background: rgba(63, 207, 155, 0.55);
  box-shadow: 0 0 8px rgba(63, 207, 155, 0.45);
}

.hero-terminal__name {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(200, 216, 226, 0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-terminal__spacer {
  flex: 1 1 auto;
}

.hero-terminal__mode {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  padding: 0.2rem 0.55rem;
  border-radius: var(--eq-radius-chip);
  border: 1px solid var(--eq-hairline);
  background: rgba(255, 255, 255, 0.03);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--eq-label-ink);
  white-space: nowrap;
}

.hero-terminal__led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 8px var(--accent-green-glow);
  animation: eqLedBreathe 2.6s ease-in-out infinite;
}

@keyframes eqLedBreathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.34; }
}

/* The screen itself: recessed into the bezel above it. Replaces the
   inline gradient the card used to carry in home.rs. */
.hero-terminal .hero-signal-card {
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 0.9rem;
  background:
    radial-gradient(circle at 85% 4%, rgba(0, 182, 133, 0.16), transparent 38%),
    linear-gradient(160deg, rgba(4, 13, 20, 0.86), rgba(6, 11, 18, 0.72));
  box-shadow: inset 0 14px 26px -20px rgba(0, 0, 0, 0.9);
}

@media (max-width: 991.98px) {
  .hero-terminal {
    margin-top: 1.5rem;
  }
}

/* ================================================================
   STAGE MINI VISUALS
   ================================================================ */

.stage-viz {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.stage-viz__grid line {
  stroke: rgba(211, 223, 236, 0.05);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.stage-viz__line {
  fill: none;
  stroke: var(--accent-green-light);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: eqDraw 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.stage-viz__area {
  opacity: 0;
  animation: eqFadeIn 1.1s ease-out 0.5s forwards;
}

@keyframes eqFadeIn {
  to { opacity: 1; }
}

/* -- Monte Carlo fan */
.stage-viz__mc {
  fill: none;
  stroke-width: 1.1;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  animation: eqDraw 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.stage-viz__mc--median {
  stroke-width: 1.9;
}

/* -- Walk-forward windows. Train is structural, test is the part
      that actually produces evidence, so only test gets accent. */
.stage-viz__wf-train {
  fill: rgba(211, 223, 236, 0.1);
  stroke: rgba(211, 223, 236, 0.16);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.stage-viz__wf-test {
  fill: rgba(63, 207, 155, 0.24);
  stroke: rgba(141, 227, 187, 0.5);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.stage-viz__wf-row {
  opacity: 0;
  transform: translateX(-10px);
  animation: eqSlideIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes eqSlideIn {
  to { opacity: 1; transform: translateX(0); }
}

/* -- Paper log rows */
.stage-viz__log-cell {
  fill: rgba(211, 223, 236, 0.09);
}

.stage-viz__log-cell--result {
  fill: rgba(63, 207, 155, 0.2);
}

.stage-viz__log-row {
  opacity: 0;
  transform: translateY(-6px);
  animation: eqDropIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes eqDropIn {
  to { opacity: 1; transform: translateY(0); }
}

/* -- Live allocation ramp */
.stage-viz__alloc {
  fill: rgba(63, 207, 155, 0.22);
  stroke: rgba(141, 227, 187, 0.34);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transform-origin: center bottom;
  transform-box: fill-box;
  opacity: 0;
  animation: eqGrowUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes eqGrowUp {
  from { opacity: 0; transform: scaleY(0.1); }
  to { opacity: 1; transform: scaleY(1); }
}

/* ================================================================
   PIPELINE TRACK — "from idea to execution"
   ================================================================ */

.pipeline-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.9rem;
  margin: 2.4rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: pipeline;
}

.pipeline-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1rem 0.95rem 1.1rem;
  border-radius: var(--eq-radius-tile);
  border: 1px solid var(--eq-hairline);
  background: linear-gradient(180deg, rgba(12, 19, 28, 0.9), rgba(7, 12, 19, 0.86));
  box-shadow: var(--eq-shadow-inset);
  transition:
    transform var(--transition-smooth),
    border-color var(--transition-smooth),
    box-shadow var(--transition-smooth);
}

/* The connective tissue. A hairline runs out of the right edge of
   every card but the last, so the five read as one track rather
   than as five tiles that happen to be adjacent. */
.pipeline-card::after {
  content: "";
  position: absolute;
  top: 2.15rem;
  right: -0.9rem;
  width: 0.9rem;
  height: 1px;
  background: linear-gradient(90deg, var(--eq-accent-edge), transparent);
  pointer-events: none;
}

.pipeline-card:last-child::after {
  display: none;
}

.pipeline-card:hover {
  transform: translateY(-4px);
  border-color: var(--eq-accent-edge);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34), var(--eq-shadow-inset);
}

.pipeline-card__head {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
}

.pipeline-card__step {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid var(--eq-accent-edge);
  background: rgba(63, 207, 155, 0.09);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--eq-accent-ink);
}

.pipeline-card__heading {
  min-width: 0;
}

.pipeline-card__title {
  margin: 0;
  font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--text-light);
}

.pipeline-card__meta {
  display: block;
  margin-top: 0.15rem;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.63rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--eq-label-ink);
}

/* The inset screen. This is the rule from the top of the block: the
   only part of the card that shows data is recessed. */
.pipeline-card__viz {
  height: 74px;
  margin-bottom: 0.85rem;
  padding: 0.35rem 0.3rem;
  border-radius: 9px;
  border: 1px solid rgba(211, 223, 236, 0.06);
  background: rgba(2, 5, 9, 0.6);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.pipeline-card__body {
  margin: 0 0 0.8rem;
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--eq-body-ink);
}

.pipeline-card__points {
  margin: auto 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.34rem;
}

.pipeline-card__points li {
  position: relative;
  padding-left: 0.95rem;
  font-size: 0.76rem;
  line-height: 1.45;
  color: rgba(200, 216, 226, 0.72);
}

.pipeline-card__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(63, 207, 155, 0.5);
}

@media (max-width: 1199.98px) {
  .pipeline-track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* The connector only makes sense along an unbroken row. Once the
     track wraps it would point at a card on the next line. */
  .pipeline-card::after {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .pipeline-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

/* ================================================================
   RESEARCH SECTION — heading pair + full-width console
   ================================================================ */

.research-head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.4rem, 3vw, 3rem);
  align-items: start;
  margin-bottom: 2.2rem;
}

.research-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 1.1rem;
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
}

.research-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--eq-body-ink);
}

.research-checklist i {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin-top: 0.16rem;
  border-radius: 50%;
  background: rgba(63, 207, 155, 0.12);
  border: 1px solid var(--eq-accent-edge);
  font-size: 0.56rem;
  color: var(--accent-green-light);
}

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

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

/* ================================================================
   THE RESEARCH CONSOLE
   ================================================================ */

.console {
  border-radius: var(--eq-radius-panel);
  border: 1px solid var(--eq-hairline);
  background: linear-gradient(180deg, rgba(13, 20, 29, 0.95), rgba(6, 11, 18, 0.95));
  box-shadow:
    0 34px 80px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  overflow: hidden;
}

.console__chrome {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--eq-hairline);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.006));
}

.console__dots {
  display: inline-flex;
  gap: 0.32rem;
}

.console__dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.13);
}

.console__title {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(200, 216, 226, 0.72);
}

.console__chrome-spacer {
  flex: 1 1 auto;
}

.console__badge {
  padding: 0.2rem 0.6rem;
  border-radius: var(--eq-radius-chip);
  border: 1px solid var(--eq-accent-edge);
  background: rgba(63, 207, 155, 0.08);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--eq-accent-ink);
  white-space: nowrap;
}

/* Six panes on a 12-column field. The wide panes (simulation, log)
   carry the evidence; the narrow ones are inputs and verdicts. */
.console__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1px;
  background: var(--eq-hairline);
}

.console-pane {
  display: flex;
  flex-direction: column;
  padding: 0.85rem 0.9rem 0.95rem;
  background: rgba(6, 11, 18, 0.97);
  min-width: 0;
}

.console-pane--builder  { grid-column: span 3; }
.console-pane--sim      { grid-column: span 6; }
.console-pane--params   { grid-column: span 3; }
.console-pane--log      { grid-column: span 6; }
.console-pane--verdict  { grid-column: span 3; }
.console-pane--controls { grid-column: span 3; }

.console-pane__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
  min-height: 20px;
}

.console-pane__title {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--eq-label-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.console-pane__meta {
  margin-left: auto;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  color: rgba(170, 189, 179, 0.5);
  white-space: nowrap;
}

.console-pane__label {
  display: block;
  margin-bottom: 0.4rem;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(170, 189, 179, 0.55);
}

.console-pane__chart {
  flex: 1 1 auto;
  min-height: 118px;
  padding: 0.4rem;
  border-radius: 9px;
  border: 1px solid rgba(211, 223, 236, 0.06);
  background: rgba(2, 5, 9, 0.62);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* -- Strategy builder flow ------------------------------------------ */
.console-flow {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.1rem;
}

.console-flow__node {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--eq-hairline);
  background: rgba(255, 255, 255, 0.026);
  font-size: 0.74rem;
  line-height: 1.3;
  color: var(--eq-body-ink);
}

/* Vertical wire between nodes, drawn from each node down to the
   next one instead of as a separate element. */
.console-flow__node:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.05rem;
  bottom: -0.45rem;
  width: 1px;
  height: 0.45rem;
  background: var(--eq-hairline-strong);
}

.console-flow__dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(211, 223, 236, 0.3);
}

.console-flow__node--terminal {
  border-color: var(--eq-accent-edge);
  background: rgba(63, 207, 155, 0.08);
  color: var(--eq-accent-ink);
}

.console-flow__node--terminal .console-flow__dot {
  background: var(--accent-green);
  box-shadow: 0 0 7px var(--accent-green-glow);
}

/* -- Simulation tabs ------------------------------------------------- */
.console-tabs {
  display: flex;
  gap: 0.28rem;
  margin-left: auto;
  overflow: hidden;
}

.console-tab {
  padding: 0.16rem 0.45rem;
  border-radius: 6px;
  border: 1px solid transparent;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.57rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(170, 189, 179, 0.5);
  white-space: nowrap;
}

.console-tab--active {
  border-color: var(--eq-accent-edge);
  background: rgba(63, 207, 155, 0.1);
  color: var(--eq-accent-ink);
}

/* -- Tables (parameter sweep + execution log) ------------------------ */
.console-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.7rem;
}

.console-table th {
  padding: 0.3rem 0.35rem;
  border-bottom: 1px solid var(--eq-hairline);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: right;
  color: rgba(170, 189, 179, 0.5);
  white-space: nowrap;
}

.console-table th:first-child {
  text-align: left;
}

.console-table td {
  padding: 0.34rem 0.35rem;
  border-bottom: 1px solid rgba(211, 223, 236, 0.045);
  text-align: right;
  white-space: nowrap;
}

.console-table tr:last-child td {
  border-bottom: 0;
}

.console-table__name {
  text-align: left !important;
  color: var(--eq-body-ink);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* tabular-nums so the columns of figures line up on the decimal
   rather than shimmying against each other. */
.console-table__num {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.68rem;
  color: rgba(200, 216, 226, 0.72);
}

.console-table__num--live { color: var(--eq-accent-ink); }
.console-table__num--up   { color: #28e4a4; }
.console-table__num--down { color: #ff7a7a; }

.console-table--log td:nth-child(3) {
  text-align: center;
}

/* The timestamp column carries a figure, so it uses the mono/tabular
   treatment — but it is the row's label, so it aligns left with its
   header rather than right with the price and result columns. */
.console-table--log td:first-child {
  text-align: left;
}

.console-side {
  display: inline-block;
  min-width: 40px;
  padding: 0.1rem 0.36rem;
  border-radius: 5px;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-align: center;
}

.console-side--buy {
  background: rgba(40, 228, 164, 0.12);
  border: 1px solid rgba(40, 228, 164, 0.28);
  color: #6ff0c4;
}

.console-side--sell {
  background: rgba(255, 122, 122, 0.1);
  border: 1px solid rgba(255, 122, 122, 0.26);
  color: #ff9d9d;
}

/* -- Verdict pane ---------------------------------------------------- */
.console-verdict {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.7rem;
  border-radius: 10px;
  border: 1px solid var(--eq-accent-edge);
  background:
    linear-gradient(180deg, rgba(63, 207, 155, 0.12), rgba(63, 207, 155, 0.04));
}

.console-verdict__seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(141, 227, 187, 0.5);
  background: rgba(63, 207, 155, 0.16);
  font-size: 0.72rem;
  color: var(--accent-green-light);
}

.console-verdict__word {
  font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #b9f4d8;
}

.console-metrics {
  margin: 0.7rem 0 0.75rem;
  display: grid;
  gap: 0.3rem;
}

.console-metric {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.72rem;
}

.console-metric dt {
  color: rgba(170, 189, 179, 0.66);
  font-weight: 400;
}

.console-metric dd {
  margin: 0;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.68rem;
  color: var(--eq-accent-ink);
  white-space: nowrap;
}

/* Non-interactive on purpose — this is a picture of a button inside
   a picture of the app, so it must not look clickable on hover. */
.console-ghost-btn {
  margin-top: auto;
  display: block;
  padding: 0.42rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--eq-hairline-strong);
  background: rgba(255, 255, 255, 0.028);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(200, 216, 226, 0.62);
}

/* -- Execution controls ---------------------------------------------- */
.console-segment {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  padding: 2px;
  margin-bottom: 0.8rem;
  border-radius: 9px;
  border: 1px solid var(--eq-hairline);
  background: rgba(2, 5, 9, 0.55);
}

.console-segment__opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.34rem 0.3rem;
  border-radius: 7px;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(170, 189, 179, 0.55);
}

.console-segment__opt--on {
  background: rgba(63, 207, 155, 0.14);
  border: 1px solid var(--eq-accent-edge);
  color: var(--eq-accent-ink);
}

.console-segment__led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 7px var(--accent-green-glow);
  animation: eqLedBreathe 2.6s ease-in-out infinite;
}

.console-meter {
  margin-bottom: 0.65rem;
}

.console-meter__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.28rem;
  font-size: 0.7rem;
  color: rgba(170, 189, 179, 0.66);
}

.console-meter__row strong {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.72rem;
  color: var(--text-light);
}

.console-meter__track {
  height: 5px;
  border-radius: 99px;
  background: rgba(211, 223, 236, 0.08);
  overflow: hidden;
}

.console-meter__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(63, 207, 155, 0.55), var(--accent-green-light));
}

.console-status {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  margin-top: auto;
  padding-top: 0.6rem;
  border-top: 1px solid var(--eq-hairline);
  font-size: 0.7rem;
  color: rgba(170, 189, 179, 0.62);
}

.console-status strong {
  margin-left: auto;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.68rem;
  color: var(--accent-green-light);
}

.console-status__led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 7px var(--accent-green-glow);
}

/* The console is a dense instrument. Below ~1100px it stops being
   readable at six panes across, so it steps down to two columns and
   then to one rather than shrinking the type any further. */
@media (max-width: 1199.98px) {
  .console-pane--builder,
  .console-pane--params,
  .console-pane--verdict,
  .console-pane--controls { grid-column: span 6; }
  .console-pane--sim,
  .console-pane--log { grid-column: span 12; }
}

@media (max-width: 767.98px) {
  .console__grid > .console-pane { grid-column: span 12; }

  /* Single column at phone width leaves the sim pane too narrow for a
     title plus four tabs — the row clipped mid-word against
     `.console-tabs { overflow: hidden }`. Only the selected tab carries
     meaning in a still image, so the rest step aside. */
  .console-tab:not(.console-tab--active) {
    display: none;
  }

  /* Same problem in the log: five nowrap columns overflowed the pane and
     cut the result column in half. The pair is the one column the row can
     lose without changing what it demonstrates — a timestamped order with
     a side, a price and an outcome. */
  .console-table--log th:nth-child(2),
  .console-table--log td:nth-child(2) {
    display: none;
  }

  .console-table--log th,
  .console-table--log td {
    padding-left: 0.22rem;
    padding-right: 0.22rem;
  }
}

/* ================================================================
   ARCHITECTURE MAP
   ================================================================ */

.arch-map {
  margin: 2.2rem 0 2.6rem;
  padding: clamp(1.1rem, 2.2vw, 1.8rem);
  border-radius: var(--eq-radius-panel);
  border: 1px solid var(--eq-hairline);
  background: linear-gradient(180deg, rgba(10, 16, 24, 0.82), rgba(6, 11, 18, 0.8));
  box-shadow: var(--eq-shadow-inset);
  /* Belt and braces: even if the wire layer is ever mis-sized again, it
     cannot draw outside the panel and over the section below. */
  overflow: hidden;
}

/* The three columns plus the wire layer. The footnote is deliberately a
   sibling of this, not a child — the wires are positioned against the
   columns, and including the caption in their box aims them at it. */
.arch-map__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2.4rem);
  align-items: center;
}

/* Connector layer. Stretched with preserveAspectRatio="none" — the
   wires are decorative, so distortion is fine and it saves having to
   recompute coordinates against the grid at every breakpoint.

   `width`/`height` are explicit rather than left to the insets: an
   <svg> with a viewBox is a replaced element, and `responsive.css`
   sets `svg { height: auto }`, which makes it take its height from
   its intrinsic 1:1 ratio instead. That resolved to roughly the map's
   width and sent the wires down across the cards below. */
.arch-map__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Most of each inbound wire runs behind an opaque node card, so only the
   short span in the gutter before the hub is ever seen. At the hairline
   token's 0.18 alpha that span was invisible and the map read as one-way,
   hence the deliberately stronger neutral here. */
.arch-map__wire {
  fill: none;
  stroke: rgba(211, 223, 236, 0.34);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: eqDraw 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Outbound wires carry a result, so they get the accent; inbound
   wires carry a request and stay neutral. */
.arch-map__wire--out {
  stroke: rgba(63, 207, 155, 0.32);
}

.arch-map__col {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.6rem;
}

.arch-node {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  border: 1px solid var(--eq-hairline);
  background: rgba(9, 15, 23, 0.92);
  box-shadow: var(--eq-shadow-inset);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.arch-node:hover {
  border-color: var(--eq-accent-edge);
  transform: translateY(-2px);
}

.arch-node__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--eq-hairline);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.8rem;
  color: var(--accent-green-light);
}

.arch-node__text {
  display: grid;
  min-width: 0;
}

.arch-node__label {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-light);
}

.arch-node__detail {
  font-size: 0.68rem;
  line-height: 1.35;
  color: rgba(170, 189, 179, 0.62);
}

.arch-map__hub {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}

.arch-hub {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  width: 100%;
  max-width: 210px;
  padding: 1.15rem 0.9rem 1rem;
  border-radius: 16px;
  border: 1px solid var(--eq-accent-edge);
  background:
    radial-gradient(circle at 50% 12%, rgba(63, 207, 155, 0.16), transparent 62%),
    linear-gradient(180deg, rgba(12, 20, 29, 0.98), rgba(6, 11, 18, 0.98));
  box-shadow: 0 0 44px rgba(63, 207, 155, 0.12), var(--eq-shadow-inset);
  text-align: center;
}

/* A slow halo so the hub reads as the thing everything else is
   plugged into, without turning into a pulsing distraction. */
.arch-hub__ring {
  position: absolute;
  inset: -9px;
  border-radius: 22px;
  border: 1px solid rgba(63, 207, 155, 0.16);
  animation: eqHubBreathe 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes eqHubBreathe {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.95; transform: scale(1.018); }
}

.arch-hub__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 0.35rem;
  border-radius: 11px;
  border: 1px solid var(--eq-accent-edge);
  background: rgba(63, 207, 155, 0.1);
  font-size: 1.05rem;
  color: var(--accent-green-light);
}

.arch-hub__label {
  font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text-light);
}

.arch-hub__detail {
  font-size: 0.68rem;
  line-height: 1.4;
  color: rgba(170, 189, 179, 0.66);
}

.arch-map__foot {
  position: relative;
  z-index: 1;
  margin: 1.4rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--eq-hairline);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(170, 189, 179, 0.5);
}

/* Stacked, the wires would run through the cards rather than between
   them, so they are dropped and the columns simply sit in order. */
@media (max-width: 991.98px) {
  .arch-map__stage {
    grid-template-columns: minmax(0, 1fr);
  }
  .arch-map__wires {
    display: none;
  }
  .arch-map__hub {
    order: -1;
  }
  .arch-hub {
    max-width: none;
  }
}

/* ================================================================
   CUSTODY + RISK
   ================================================================ */

.safety-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: 2.2rem;
}

.safety-panel {
  display: flex;
  flex-direction: column;
}

.safety-panel__lede {
  margin: 0.6rem 0 1.2rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--eq-body-ink);
}

/* -- Custody --------------------------------------------------------- */
.safety-keys {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) auto minmax(0, 1fr);
  gap: clamp(0.8rem, 1.6vw, 1.4rem);
  align-items: center;
  flex: 1 1 auto;
}

.safety-venues {
  display: grid;
  gap: 0.42rem;
  align-content: center;
}

.safety-venues__label {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(170, 189, 179, 0.5);
}

.safety-venue {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.55rem;
  border-radius: 9px;
  border: 1px solid var(--eq-hairline);
  background: rgba(255, 255, 255, 0.024);
}

.safety-venue__mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 1px solid var(--eq-hairline-strong);
  background: rgba(255, 255, 255, 0.04);
  font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(220, 233, 240, 0.82);
}

.safety-venue__name {
  font-size: 0.78rem;
  color: var(--eq-body-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.safety-crest-slot {
  width: clamp(96px, 12vw, 132px);
}

.safety-facts {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  align-content: center;
}

.safety-facts li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--eq-body-ink);
}

.safety-facts i {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-top: 0.13rem;
  border-radius: 50%;
  background: rgba(63, 207, 155, 0.12);
  border: 1px solid var(--eq-accent-edge);
  font-size: 0.52rem;
  color: var(--accent-green-light);
}

.security-crest {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.security-crest__shell {
  fill: none;
  stroke: rgba(63, 207, 155, 0.45);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  animation: eqCrestPulse 4.5s ease-in-out infinite;
}

@keyframes eqCrestPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.012); }
}

.security-crest__lock {
  fill: rgba(63, 207, 155, 0.14);
  stroke: rgba(141, 227, 187, 0.55);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.security-crest__shackle {
  fill: none;
  stroke: rgba(141, 227, 187, 0.6);
  stroke-width: 2.2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.security-crest__keyhole {
  fill: rgba(141, 227, 187, 0.85);
}

/* -- Risk ------------------------------------------------------------ */
.risk-phases {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.8rem;
}

.risk-phase {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.22rem 0.6rem;
  border-radius: var(--eq-radius-chip);
  border: 1px solid var(--eq-hairline);
  background: rgba(255, 255, 255, 0.026);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--eq-label-ink);
}

.risk-phase__led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.risk-phase--loss .risk-phase__led { background: #ff7a7a; }
.risk-phase--trip .risk-phase__led { background: var(--accent-gold); }
.risk-phase--safe .risk-phase__led { background: var(--accent-green); }

.risk-phase--safe {
  border-color: var(--eq-accent-edge);
  color: var(--eq-accent-ink);
}

.risk-curve-slot {
  padding: 0.5rem;
  border-radius: 12px;
  border: 1px solid rgba(211, 223, 236, 0.06);
  background: rgba(2, 5, 9, 0.6);
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.5);
}

.risk-curve {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.risk-curve__grid line {
  stroke: rgba(211, 223, 236, 0.05);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* The protected half of the chart, tinted so the two outcomes are
   distinguishable before the legend is read. */
.risk-curve__zone {
  fill: rgba(63, 207, 155, 0.035);
}

.risk-curve__common {
  fill: none;
  stroke: rgba(211, 223, 236, 0.45);
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  animation: eqDraw 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.risk-curve__loss {
  fill: none;
  stroke: url(#eqRiskLoss);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 5 5;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  animation: eqFadeIn 0.8s ease-out 1.3s forwards;
}

.risk-curve__safe {
  fill: none;
  stroke: url(#eqRiskSafe);
  stroke-width: 2.6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: eqDraw 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1.3s forwards;
}

.risk-curve__break {
  stroke: var(--accent-gold);
  stroke-width: 1;
  stroke-dasharray: 3 5;
  opacity: 0.55;
  vector-effect: non-scaling-stroke;
}

.risk-curve__trip {
  fill: var(--accent-gold);
}

.risk-curve__trip-halo {
  fill: var(--accent-gold-glow);
  animation: eqTripPing 3.2s ease-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

@keyframes eqTripPing {
  0% { opacity: 0.6; transform: scale(0.6); }
  70%, 100% { opacity: 0; transform: scale(1.25); }
}

.risk-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 1rem;
}

.risk-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 0.4rem;
  border-radius: 10px;
  border: 1px solid var(--eq-hairline);
  background: rgba(255, 255, 255, 0.022);
  text-align: center;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.risk-control:hover {
  border-color: var(--eq-accent-edge);
  background: rgba(63, 207, 155, 0.05);
}

.risk-control__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--eq-hairline-strong);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.72rem;
  color: var(--accent-green-light);
}

.risk-control__label {
  font-size: 0.68rem;
  line-height: 1.3;
  color: rgba(200, 216, 226, 0.72);
}

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

/* The crest is the first thing to go: it is decoration, and the
   venue list and the guarantees are the content. */
@media (max-width: 575.98px) {
  .safety-keys {
    grid-template-columns: minmax(0, 1fr);
  }
  .safety-crest-slot {
    display: none;
  }
  .risk-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ================================================================
   REDUCED MOTION
   ================================================================
   Every animation in this block is ornamental — each diagram is
   fully legible in its final state. So they are not slowed down,
   they are skipped, with each element forced to that final state.
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  .stage-viz__line,
  .stage-viz__area,
  .stage-viz__mc,
  .stage-viz__wf-row,
  .stage-viz__log-row,
  .stage-viz__alloc,
  .arch-map__wire,
  .arch-hub__ring,
  .security-crest__shell,
  .risk-curve__common,
  .risk-curve__loss,
  .risk-curve__safe,
  .risk-curve__trip-halo,
  .hero-terminal__led,
  .console-segment__led {
    animation: none !important;
    opacity: 1;
    transform: none;
    stroke-dashoffset: 0;
  }

  /* The ping ring has no meaningful resting state — without the
     animation it is just a gold blob over the trip marker. */
  .risk-curve__trip-halo {
    opacity: 0;
  }

  .pipeline-card,
  .arch-node,
  .risk-control {
    transition: none;
  }
}

/* ================================================================
   CARD SURFACE UPGRADE

   The dark-on-dark cards were nearly invisible: a 0.025 white surface
   on an ~0.03 page, separated by a 0.08 hairline. Nothing read as
   raised, so the grids looked like text blocks with borders.

   The fix is ordinary physical lighting rather than more glow:
     * the surface is a top-down gradient, lighter than the page
     * a bright inset line along the top edge reads as a lit bevel
     * a real drop shadow underneath separates card from ground
     * hover adds lift + accent edge, not a colour wash

   Applied to every card family at once so they stay one system.
   ================================================================ */
.eq-feature,
.freebies-card,
.engine-gate {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.062), rgba(255, 255, 255, 0.022) 42%),
    rgba(10, 16, 23, 0.86);
  border: 1px solid rgba(211, 223, 236, 0.13);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 14px 30px -16px rgba(0, 0, 0, 0.85);
}

.eq-feature:hover,
.freebies-card--guide:hover,
.engine-gate:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.03) 42%),
    rgba(12, 19, 27, 0.9);
  border-color: rgba(141, 227, 187, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 22px 44px -18px rgba(0, 0, 0, 0.9),
    0 0 34px -8px rgba(63, 207, 155, 0.28);
}

/* -- Icon tiles: bigger, lit, and clearly the card's anchor ---------- */
.eq-feature__icon,
.freebies-card-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background:
    linear-gradient(160deg, rgba(63, 207, 155, 0.26), rgba(63, 207, 155, 0.07));
  border: 1px solid rgba(141, 227, 187, 0.38);
  color: #b9f2d8;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 6px 16px -6px rgba(63, 207, 155, 0.5);
}

.eq-feature:hover .eq-feature__icon,
.freebies-card--guide:hover .freebies-card-icon {
  background: linear-gradient(160deg, rgba(63, 207, 155, 0.42), rgba(63, 207, 155, 0.14));
  border-color: rgba(141, 227, 187, 0.6);
  color: #eafff6;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 8px 22px -6px rgba(63, 207, 155, 0.7);
}

/* -- Typography: the titles were competing with body copy ----------- */
.eq-feature__title,
.freebies-card h3,
.engine-gate__title {
  font-size: 1.1rem;
  color: #f2f7fa;
}

.eq-feature__body,
.freebies-card p,
.engine-gate__body {
  color: rgba(206, 219, 227, 0.9);
}

.eq-feature__list li {
  color: rgba(197, 211, 220, 0.88);
}

/* ================================================================
   CAPABILITIES GRID

   Five cards in an `auto-fit` grid resolved to four columns and left
   the fifth stranded alone on a second row. The layout is explicit
   now: three columns, with the validation card — the one capability
   competitors do not have — spanning two so row one reads 2+1 and row
   two reads 1+1+1. Five cards, no orphan, and the lead card earns its
   width.
   ================================================================ */
.eq-grid--capabilities {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}

.eq-feature--lead {
  grid-column: span 2;
}

/* The wide card gets room to breathe and puts its bullets beside the
   copy instead of stacking them into a narrow ribbon. */
.eq-feature--lead .eq-feature__list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.25rem;
}

@media (max-width: 1040px) {
  .eq-grid--capabilities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eq-feature--lead { grid-column: span 2; }
}

@media (max-width: 660px) {
  .eq-grid--capabilities { grid-template-columns: 1fr; }
  .eq-feature--lead { grid-column: auto; }
  .eq-feature--lead .eq-feature__list { grid-template-columns: 1fr; }
}

/* Watermark index sat almost invisible at 0.055 alpha; it is part of
   the card's character, so let it be seen. */
.eq-feature__index {
  right: 1.1rem;
  bottom: 0.7rem;
  font-size: 3rem;
  color: rgba(211, 223, 236, 0.085);
}

.eq-feature:hover .eq-feature__index {
  color: rgba(141, 227, 187, 0.2);
}

/* -- Same lit-surface treatment for the remaining card families, so the
      page reads as one material rather than three different ones. ---- */
.pricing-card,
.founder-contact__link,
.market-console {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.02) 42%),
    rgba(10, 16, 23, 0.86);
  border: 1px solid rgba(211, 223, 236, 0.13);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 14px 30px -16px rgba(0, 0, 0, 0.85);
}

.pricing-card:hover,
.founder-contact__link:hover {
  border-color: rgba(141, 227, 187, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 22px 44px -18px rgba(0, 0, 0, 0.9),
    0 0 34px -8px rgba(63, 207, 155, 0.26);
}

/* The featured plan keeps its accent identity but gains the same bevel
   and depth, so it looks promoted rather than merely outlined. */
.pricing-card.featured {
  background:
    linear-gradient(180deg, rgba(63, 207, 155, 0.13), rgba(255, 255, 255, 0.022) 46%),
    rgba(10, 17, 24, 0.9);
  border-color: rgba(63, 207, 155, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 20px 44px -18px rgba(0, 0, 0, 0.9),
    0 0 46px -10px rgba(63, 207, 155, 0.34);
}

/* Market tiles are small and numerous — they get the bevel but a much
   lighter shadow, or eighteen drop shadows turn the grid to mush. */
.market-mover-card {
  border-color: rgba(211, 223, 236, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 6px 14px -8px rgba(0, 0, 0, 0.7);
}

.market-mover-card:hover {
  border-color: rgba(211, 223, 236, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 16px 30px -12px rgba(0, 0, 0, 0.85);
}

/* Icon tiles inside the freebies track markers and founder cards pick up
   the same lit-glass treatment as the card icons. */
.founder-contact__link i,
.freebies-track__marker {
  color: #b9f2d8;
}

.freebies-track__marker {
  background:
    linear-gradient(160deg, rgba(63, 207, 155, 0.24), rgba(10, 16, 23, 0.96));
  border-color: rgba(141, 227, 187, 0.42);
  box-shadow:
    0 0 0 6px rgba(5, 9, 14, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 10px 24px -8px rgba(0, 0, 0, 0.8);
}

/* ================================================================
   SVG ICONS

   `components/icon.rs` renders inline SVG stroked in `currentColor`.
   These rules replace the sizing/colour that used to be set inline on
   each `<i>` element, so icon presentation now lives with the design
   system instead of scattered through the page components.
   ================================================================ */
.eq-icon {
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: -0.14em;
}

/* Icons that sit inside a lit tile fill the tile. */
.eq-feature__icon .eq-icon,
.freebies-card-icon .eq-icon,
.freebies-track__marker .eq-icon {
  width: 21px;
  height: 21px;
}

.freebies-track__marker .eq-icon {
  width: 23px;
  height: 23px;
}

/* Inline-with-text icons: chips, list markers, buttons, notes. */
.trust-chip .eq-icon,
.freebies-pill .eq-icon {
  width: 16px;
  height: 16px;
  color: var(--accent-green-light);
}

.market-mover-change .eq-icon {
  width: 15px;
  height: 15px;
}

.engine-stage__caption .eq-icon,
.pricing-volume-foot .eq-icon {
  width: 14px;
  height: 14px;
}

.freebies-card-read .eq-icon {
  width: 15px;
  height: 15px;
  transition: transform var(--transition-fast);
}

.freebies-card--guide:hover .freebies-card-read .eq-icon {
  transform: translateX(4px);
}

.pricing-features li .eq-icon {
  width: 11px;
  height: 11px;
  stroke-width: 2.6;
}

.founder-contact__link .eq-icon {
  width: 26px;
  height: 26px;
}

.footer .social-links .eq-icon,
.social-links .eq-icon {
  width: 17px;
  height: 17px;
}

.pricing-toggle .eq-icon {
  width: 14px;
  height: 14px;
}

/* Spinner, for the checkout button's pending state. */
.eq-icon.is-spinning {
  animation: eqIconSpin 0.9s linear infinite;
}

@keyframes eqIconSpin {
  to { transform: rotate(360deg); }
}

/* ================================================================
   NAVBAR — compact command bar

   Once the page scrolls, the bar tightens and its translucency and
   blur increase, so it reads as a fixed instrument frame over moving
   content rather than a block sitting on top of it. `.navbar-compact`
   is toggled by the existing scroll handler.
   ================================================================ */
.navbar {
  background: rgba(5, 9, 14, 0.62);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgba(211, 223, 236, 0.06);
  box-shadow: none;
  transition: background var(--transition-smooth), border-color var(--transition-smooth),
    box-shadow var(--transition-smooth), padding var(--transition-smooth);
}

.navbar-compact {
  padding: 0.6rem 0;
  background: rgba(5, 9, 14, 0.9);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-bottom: 1px solid rgba(211, 223, 236, 0.12);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.035) inset,
    0 12px 30px -14px rgba(0, 0, 0, 0.9);
}

/* Nav links get a proper hover/active affordance instead of a bare
   colour change — a low pill that lights up under the pointer. */
.navbar .nav-link {
  position: relative;
  border-radius: 9px;
  padding: 0.42rem 0.7rem;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.navbar .nav-link:hover {
  background: rgba(255, 255, 255, 0.055);
  color: var(--accent-green-light);
}

.navbar .nav-link:focus-visible {
  outline: 2px solid var(--accent-green);
  outline-offset: 2px;
}

/* The primary nav CTA is the only filled control in the bar, so it gets
   the accent treatment and a little lift. */
.navbar-compact .nav-cta {
  border-radius: 10px;
  box-shadow: 0 6px 18px -6px rgba(63, 207, 155, 0.55);
}

.navbar-compact .nav-cta:hover {
  box-shadow: 0 10px 26px -6px rgba(63, 207, 155, 0.75);
}

/* Icons inside the shell inherit link colour and align to the text. */
.navbar .eq-icon,
.nav-more-panel .eq-icon,
.account-menu .eq-icon {
  vertical-align: -0.18em;
  margin-right: 0.4rem;
}

.navbar-toggler .eq-icon {
  margin-right: 0;
  color: var(--accent-green);
}

/* ================================================================
   UPSELL MODAL — brought onto the eq surface

   It kept the old glass-card look and a gold "+" bullet that appears
   nowhere else on the site. Same lit panel, accent edge and check
   bullets as the rest of the system.
   ================================================================ */
.upsell-overlay {
  background: rgba(3, 6, 10, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: eqOverlayIn 0.22s ease-out;
}

@keyframes eqOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.upsell-modal {
  padding: clamp(1.5rem, 4vw, 2.1rem);
  border-radius: var(--eq-radius-panel);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.022) 42%),
    rgba(9, 15, 22, 0.97);
  border: 1px solid var(--eq-accent-edge);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 32px 70px -20px rgba(0, 0, 0, 0.95),
    0 0 60px -18px rgba(63, 207, 155, 0.32);
  animation: eqModalIn 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes eqModalIn {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.upsell-close {
  border-color: var(--eq-hairline);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  transition: color var(--transition-fast), border-color var(--transition-fast),
    background var(--transition-fast);
}

.upsell-close:hover {
  color: var(--text-light);
  border-color: var(--eq-accent-edge);
  background: var(--eq-accent-wash);
}

.upsell-eyebrow {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-weight: 600;
  letter-spacing: 0.2em;
}

.upsell-title {
  font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--text-light);
}

.upsell-copy {
  color: var(--eq-body-ink);
  line-height: 1.6;
}

/* Green check bullets, matching the freebies list — the gold "+" was
   the only gold accent left on this page. */
.upsell-list {
  color: var(--eq-body-ink);
  font-size: 0.93rem;
}

.upsell-list li {
  position: relative;
  padding-left: 1.5rem;
  line-height: 1.5;
}

.upsell-list li::before {
  content: "\f00c";
  font: normal normal normal 14px/1 FontAwesome;
  position: absolute;
  left: 0;
  top: 0.22rem;
  margin-right: 0;
  font-size: 0.72rem;
  color: var(--accent-green);
}

.upsell-actions .btn {
  flex: 1 1 auto;
  text-align: center;
}

/* ================================================================
   BLOG

   This replaces two stylesheets, not one. The blog shipped with a full
   `eq-blog-*` sheet inlined in a `<style>` tag inside blog.rs, and a
   second, later, token-based sheet here — written under the impression
   that the page had no styles at all. Both defined the same ~48 class
   names. The inline one rendered last and therefore won every conflict,
   so the token-based sheet below it was dead code, and the page ran on
   `--glass-border` (1.20:1 — invisible) while the rest of the product
   had already moved to `--eq-edge-*`.

   The inline sheet is gone. This is now the blog's only stylesheet, and
   it is built on the eq tokens, so the blog inherits system fixes with
   every other page instead of drifting away from them again.

   The page is Read mode: the visitor is here to understand something.
   Structure serves comprehension first — one measure for prose, one
   scale step between the lead story and the archive, and no panel
   around anything the reader has to read a thousand words of.
   ================================================================ */

/* -- Page shell -------------------------------------------------------
   The shell is the ground; `.container` inside it owns the measure. The
   old rule put a second max-width on the shell as well, which clamped
   the page twice and left the gradient stopping short of the viewport
   edge on wide screens. */
.eq-blog-shell {
  position: relative;
  overflow: hidden;
  padding: 6.5rem 0 5rem;
}

/* One quiet wash at the top of the page rather than the two overlapping
   radial blooms and the horizontal hairline sweep the inline sheet drew.
   Ambient decoration earns one gesture, not three. */
.eq-blog-shell::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 32rem;
  background: radial-gradient(70% 100% at 50% 0%, rgba(63, 207, 155, 0.1), transparent 70%);
  pointer-events: none;
}

.eq-blog-container {
  position: relative;
  z-index: 1;
}

/* Visually hidden but present for assistive technology. Used by the
   newsletter field's label. */
.eq-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* -- Masthead ---------------------------------------------------------
   Title and standing notes, split by a rule rather than boxed in two
   glass panels. Nothing here is a card, so the lead article below is the
   first object on the page and reads as one. */
.eq-blog-masthead {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  padding-bottom: var(--eq-space-12);
  margin-bottom: var(--eq-space-12);
  border-bottom: 1px solid var(--eq-edge-strong);
}

.eq-blog-title {
  margin: 0 0 var(--eq-space-5);
  font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
  font-size: var(--eq-text-4xl);
  font-weight: 700;
  line-height: var(--eq-leading-display);
  letter-spacing: var(--eq-tracking-display);
  color: var(--text-light);
  text-wrap: balance;
}

.eq-blog-copy {
  margin: 0;
  max-width: 46ch;
  color: var(--eq-body-ink);
  font-size: var(--eq-text-lg);
  line-height: var(--eq-leading-body);
}

/* Topics: what the archive covers. A list, because that is what it is —
   the bullets are suppressed, the semantics are not. */
.eq-blog-topics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--eq-space-2);
  margin: var(--eq-space-8) 0 0;
  padding: 0;
  list-style: none;
}

.eq-blog-topic {
  display: inline-flex;
  align-items: center;
  gap: var(--eq-space-2);
  padding: 0.45rem 0.85rem;
  border-radius: var(--eq-radius-chip);
  border: 1px solid var(--eq-edge);
  background: var(--eq-surface-inline);
  color: var(--eq-body-ink);
  font-size: var(--eq-text-sm);
  font-weight: 600;
  line-height: var(--eq-leading-ui);
}

.eq-blog-topic svg,
.eq-blog-topic i {
  color: var(--eq-accent);
  flex: none;
}

/* The desk column. Two standing notes and the archive's counts. */
.eq-blog-desk {
  display: grid;
  gap: var(--eq-space-6);
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
  border-left: 1px solid var(--eq-edge);
}

.eq-blog-desk-note + .eq-blog-desk-note {
  padding-top: var(--eq-space-6);
  border-top: 1px solid var(--eq-edge);
}

.eq-blog-desk-title {
  margin: 0 0 var(--eq-space-2);
  font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
  font-size: var(--eq-text-base);
  font-weight: 700;
  line-height: var(--eq-leading-heading);
  letter-spacing: var(--eq-tracking-heading);
  color: var(--text-light);
}

.eq-blog-desk-copy {
  margin: 0;
  color: var(--eq-body-ink);
  font-size: var(--eq-text-md);
  line-height: var(--eq-leading-body);
}

/* Counts read as metadata, not as a scoreboard: the number leads, the
   name of the number sits under it at label size. */
.eq-blog-counts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--eq-space-4);
  align-items: start;
  margin: 0;
  padding-top: var(--eq-space-6);
  border-top: 1px solid var(--eq-edge);
}

/* Flex, because `order` on the value only works if the pair is a flex or
   grid container — as a plain block the label rendered first and a label
   that wrapped to two lines pushed its own value out of line with the
   others. */
.eq-blog-count {
  display: flex;
  flex-direction: column;
}

.eq-blog-count dd {
  order: -1;
  margin: 0 0 0.1rem;
  font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
  font-size: var(--eq-text-xl);
  font-weight: 700;
  letter-spacing: var(--eq-tracking-heading);
  color: var(--text-light);
  font-variant-numeric: tabular-nums;
}

.eq-blog-count dt {
  margin: 0;
  font-size: var(--eq-text-2xs);
  font-weight: 600;
  letter-spacing: var(--eq-tracking-label);
  text-transform: uppercase;
  color: var(--eq-label-ink);
}

/* -- Cover art --------------------------------------------------------
   The well every post gets: a real image where one exists, otherwise the
   motif the post draws for itself (see `mod cover` in blog.rs). The box
   is 16:9 either way, so a mixed grid still lines up row to row. */
.eq-blog-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--eq-radius-tile);
  border: 1px solid var(--eq-edge);
  background: linear-gradient(168deg, rgba(63, 207, 155, 0.07), rgba(5, 10, 16, 0.9) 62%);
}

.eq-blog-cover img,
.eq-blog-cover svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The drawn covers are line work, so they carry a faint plotting grid
   underneath — the paper the series is drawn on rather than a texture. */
.eq-blog-cover--drawn::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(211, 223, 236, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(211, 223, 236, 0.05) 1px, transparent 1px);
  background-size: 11.11% 16.66%;
  pointer-events: none;
}

.eq-blog-cover-area { fill: rgba(63, 207, 155, 0.16); }

.eq-blog-cover-line {
  fill: none;
  stroke: var(--eq-accent);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* The stroke is drawn in a viewBox that is scaled non-uniformly to the
     card, so without this the line thins on one axis. */
  vector-effect: non-scaling-stroke;
}

.eq-blog-cover-mark {
  fill: var(--eq-accent-strong);
  stroke: #05131c;
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}

.eq-blog-cover-bar { fill: var(--eq-accent); }

.eq-blog-cover-cell { fill: var(--eq-accent); }

.eq-blog-cover-fit {
  fill: none;
  stroke: var(--eq-accent-strong);
  stroke-width: 1.6;
  stroke-dasharray: 4 3;
  opacity: 0.75;
  vector-effect: non-scaling-stroke;
}

.eq-blog-cover-rule {
  stroke: rgba(211, 223, 236, 0.28);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* -- Lead story -------------------------------------------------------
   Twice the cover area and a display-size title, which is what marks it
   as the lead. A "FEATURED" badge over the heading did the same job with
   a word, and the word had to be read before the hierarchy landed. */
.eq-blog-lead {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
  margin-bottom: var(--eq-space-20);
}

/* Size, not shape, is what separates the lead's cover from a card's: the
   motifs are drawn in a 16:9 box, and stretching that box to another ratio
   turns the end-of-series marker into an ellipse. */

.eq-blog-lead-title {
  margin: var(--eq-space-4) 0 var(--eq-space-4);
  font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
  font-size: var(--eq-text-3xl);
  font-weight: 700;
  line-height: var(--eq-leading-heading);
  letter-spacing: var(--eq-tracking-display);
  color: var(--text-light);
  text-wrap: balance;
}

.eq-blog-lead-copy {
  margin: 0 0 var(--eq-space-4);
  max-width: 54ch;
  color: var(--eq-body-ink);
  font-size: var(--eq-text-lg);
  line-height: var(--eq-leading-body);
}

.eq-blog-lead-note {
  margin: 0 0 var(--eq-space-5);
  max-width: 54ch;
  color: var(--eq-label-ink);
  font-size: var(--eq-text-md);
  line-height: var(--eq-leading-body);
}

/* -- Titles that stretch over their card ------------------------------
   The whole card is the click target, but only the title is a link. The
   overlay is the anchor's own ::after, so there is exactly one link in
   the accessibility tree and it is named by the post's title. */
.eq-blog-cover-link {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--eq-accent), var(--eq-accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1.5px;
  transition: background-size var(--eq-dur-base) var(--eq-ease-out),
    color var(--eq-dur-fast) var(--eq-ease-out);
}

.eq-blog-cover-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
}

.eq-blog-cover-link:hover,
.eq-blog-cover-link:focus-visible {
  color: var(--eq-accent-strong);
  text-decoration: none;
}

.eq-blog-cover-link:hover {
  background-size: 100% 1.5px;
}

/* The ring belongs to the card the link covers, not to the title alone —
   otherwise a keyboard user sees a ring around three words while the
   thing that will activate is the whole card. */
.eq-blog-post-card:focus-within,
.eq-blog-lead:focus-within {
  outline: var(--eq-focus-width) solid var(--eq-focus-color);
  outline-offset: 4px;
  border-radius: var(--eq-radius-panel);
}

.eq-blog-cover-link:focus-visible {
  outline: none !important;
}

/* -- Section heading --------------------------------------------------- */
.eq-blog-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--eq-space-8);
  flex-wrap: wrap;
  padding-bottom: var(--eq-space-4);
  margin-bottom: var(--eq-space-8);
  border-bottom: 1px solid var(--eq-edge-strong);
}

.eq-blog-section-title {
  margin: 0;
  font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
  font-size: var(--eq-text-2xl);
  font-weight: 700;
  letter-spacing: var(--eq-tracking-heading);
  line-height: var(--eq-leading-heading);
  color: var(--text-light);
}

.eq-blog-section-copy {
  margin: 0;
  max-width: 48ch;
  color: var(--eq-body-ink);
  font-size: var(--eq-text-md);
  line-height: var(--eq-leading-body);
}

/* -- Post grid ---------------------------------------------------------
   The card is a hairline and a ground, not a glass panel with an inset
   highlight and a 30px shadow. Twelve of those in a grid read as twelve
   objects competing; these read as an index. */
.eq-blog-post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: clamp(1.25rem, 2.4vw, 1.75rem);
}

.eq-blog-post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--eq-space-4);
  padding: var(--eq-space-4);
  border-radius: var(--eq-radius-panel);
  border: 1px solid var(--eq-edge);
  background: var(--eq-surface-inline);
  transition: border-color var(--eq-dur-base) var(--eq-ease-out),
    background-color var(--eq-dur-base) var(--eq-ease-out),
    transform var(--eq-dur-base) var(--eq-ease-out),
    box-shadow var(--eq-dur-base) var(--eq-ease-out);
}

.eq-blog-post-card:hover {
  transform: translateY(-3px);
  border-color: var(--eq-edge-accent);
  background: rgba(255, 255, 255, 0.045);
  box-shadow: var(--eq-elev-2);
}

.eq-blog-post-card:hover .eq-blog-cover {
  border-color: var(--eq-edge-accent);
}

.eq-blog-post-text {
  display: flex;
  flex-direction: column;
  gap: var(--eq-space-3);
  flex: 1;
}

.eq-blog-post-title {
  margin: 0;
  font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
  font-size: var(--eq-text-lg);
  font-weight: 700;
  line-height: var(--eq-leading-heading);
  letter-spacing: var(--eq-tracking-heading);
  color: var(--text-light);
  text-wrap: balance;
}

.eq-blog-post-copy {
  margin: 0;
  color: var(--eq-body-ink);
  font-size: var(--eq-text-md);
  line-height: var(--eq-leading-body);
}

.eq-blog-post-footer {
  padding-top: var(--eq-space-3);
  border-top: 1px solid var(--eq-edge);
}

/* -- Metadata rows ------------------------------------------------------
   Dates, read times and bylines. Monospace here is measurement, not
   costume: these are the values a reader compares between entries. */
.eq-blog-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--eq-space-4);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: var(--eq-text-xs);
  letter-spacing: 0.04em;
  color: var(--eq-label-ink);
  font-variant-numeric: tabular-nums;
}

.eq-blog-meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--eq-space-2);
}

/* A separating dot between items, drawn rather than typed, so the copy
   never has to carry a bullet character that a translator might drop. */
.eq-blog-meta-item + .eq-blog-meta-item::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
  margin-right: var(--eq-space-2);
}

.eq-blog-meta-item--accent {
  color: var(--eq-accent);
}

/* -- Tags ---------------------------------------------------------------- */
.eq-blog-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--eq-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.eq-blog-tag {
  padding: 0.2rem 0.55rem;
  border-radius: var(--eq-radius-chip);
  border: 1px solid var(--eq-edge-accent);
  background: var(--eq-accent-wash);
  font-size: var(--eq-text-2xs);
  font-weight: 600;
  letter-spacing: var(--eq-tracking-label);
  text-transform: uppercase;
  color: var(--eq-accent-ink);
}

/* -- Empty and missing states -------------------------------------------- */
.eq-blog-empty,
.eq-blog-missing {
  padding: var(--eq-space-16) 0 var(--eq-space-20);
  max-width: var(--eq-measure);
}

.eq-blog-missing .btn {
  margin-top: var(--eq-space-6);
}

/* -- Article ------------------------------------------------------------
   A reading surface, not a card. The measure is what does the work: at
   full container width the eye loses the line return, which is the one
   thing a 2,000-word research note cannot afford. */
.eq-blog-shell--read .eq-blog-container {
  max-width: 60rem;
}

.eq-blog-read-head {
  padding-bottom: var(--eq-space-8);
  margin-bottom: var(--eq-space-8);
  border-bottom: 1px solid var(--eq-edge-strong);
}

.eq-blog-back {
  display: inline-flex;
  align-items: center;
  gap: var(--eq-space-2);
  margin-bottom: var(--eq-space-8);
  color: var(--eq-label-ink);
  font-size: var(--eq-text-md);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--eq-dur-fast) var(--eq-ease-out);
}

.eq-blog-back:hover {
  color: var(--eq-accent);
  text-decoration: none;
}

.eq-blog-read-head .eq-blog-tag-row {
  margin-bottom: var(--eq-space-5);
}

.eq-blog-read-title {
  margin: 0 0 var(--eq-space-5);
  max-width: 22ch;
  font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
  font-size: var(--eq-text-4xl);
  font-weight: 700;
  line-height: var(--eq-leading-display);
  letter-spacing: var(--eq-tracking-display);
  color: var(--text-light);
  text-wrap: balance;
}

/* The standfirst is the excerpt promoted to a role: it is the sentence
   that decides whether the reader continues, so it is set larger and
   lighter than the body it introduces. */
.eq-blog-read-standfirst {
  margin: 0 0 var(--eq-space-6);
  max-width: 58ch;
  color: var(--eq-body-ink);
  font-size: var(--eq-text-xl);
  line-height: 1.5;
  font-weight: 400;
}

.eq-blog-read-media {
  max-width: var(--eq-measure);
  margin-bottom: var(--eq-space-12);
}



/* Prose. `.blog-content` and `.eq-blog-article` are both on the body
   element; the measure cap in eq-system.css targets the paragraphs. */
.eq-blog-article {
  color: var(--eq-body-ink);
  font-size: var(--eq-text-base);
  line-height: var(--eq-leading-body);
}

.eq-blog-article > * {
  max-width: var(--eq-measure);
}

.eq-blog-article h2,
.eq-blog-article h3 {
  font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
  font-weight: 700;
  letter-spacing: var(--eq-tracking-heading);
  line-height: var(--eq-leading-heading);
  color: var(--text-light);
  text-wrap: balance;
}

/* More space above a heading than below it: the gap belongs to the
   section starting, not to the paragraph that follows the heading. */
.eq-blog-article h2 {
  font-size: var(--eq-text-2xl);
  margin: var(--eq-space-12) 0 var(--eq-space-4);
}

.eq-blog-article h3 {
  font-size: var(--eq-text-xl);
  margin: var(--eq-space-10) 0 var(--eq-space-3);
}

.eq-blog-article h2:first-child,
.eq-blog-article h3:first-child {
  margin-top: 0;
}

.eq-blog-article p {
  margin: 0 0 var(--eq-space-5);
}

.eq-blog-article a {
  color: var(--eq-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(63, 207, 155, 0.4);
  transition: text-decoration-color var(--eq-dur-fast) var(--eq-ease-out);
}

.eq-blog-article a:hover {
  text-decoration-color: var(--eq-accent);
}

.eq-blog-article ul,
.eq-blog-article ol {
  margin: 0 0 var(--eq-space-5);
  padding-left: var(--eq-space-6);
}

.eq-blog-article li {
  margin-bottom: var(--eq-space-2);
  padding-left: var(--eq-space-1);
}

.eq-blog-article img {
  max-width: 100%;
  height: auto;
  border-radius: var(--eq-radius-tile);
  border: 1px solid var(--eq-edge);
  margin: var(--eq-space-8) 0;
}

/* A pull quote reads as a change of voice, so it changes size and colour
   rather than acquiring a coloured bar and a tinted box. */
.eq-blog-article blockquote {
  margin: var(--eq-space-10) 0;
  padding: 0 0 0 var(--eq-space-6);
  border-left: 1px solid var(--eq-edge-accent);
  color: var(--text-light);
  font-size: var(--eq-text-lg);
  line-height: 1.55;
  font-style: normal;
}

.eq-blog-article blockquote p:last-child {
  margin-bottom: 0;
}

/* Inline code takes the system treatment (eq-system.css section 17); only the
   face is a blog decision. */
.eq-blog-article code {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

.eq-blog-article pre {
  max-width: 100%;
  margin: 0 0 var(--eq-space-6);
  padding: var(--eq-space-4) var(--eq-space-5);
  border-radius: var(--eq-radius-tile);
  border: 1px solid var(--eq-edge);
  background: rgba(0, 0, 0, 0.42);
  overflow-x: auto;
}

.eq-blog-article table {
  width: 100%;
  max-width: 100%;
  margin: 0 0 var(--eq-space-6);
  border-collapse: collapse;
  font-size: var(--eq-text-md);
}

.eq-blog-article th,
.eq-blog-article td {
  padding: var(--eq-space-3) var(--eq-space-4);
  border-bottom: 1px solid var(--eq-edge);
  text-align: left;
}

.eq-blog-article th {
  color: var(--text-light);
  font-size: var(--eq-text-2xs);
  font-weight: 700;
  letter-spacing: var(--eq-tracking-label);
  text-transform: uppercase;
}

/* -- Related ------------------------------------------------------------- */
.eq-blog-related {
  padding-top: var(--eq-space-16);
  margin-top: var(--eq-space-16);
  border-top: 1px solid var(--eq-edge-strong);
}

.eq-blog-related .eq-blog-section-title {
  margin-bottom: var(--eq-space-8);
}

.eq-blog-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--eq-space-5);
}

/* -- Newsletter -----------------------------------------------------------
   The one accented surface on the page, which is what makes it read as
   the ask. If every block were tinted this would be another card. */
.eq-blog-newsletter {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(min(100%, 22rem), 0.85fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
  margin-top: var(--eq-space-20);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  border-radius: var(--eq-radius-panel);
  border: 1px solid var(--eq-edge-accent);
  background:
    linear-gradient(150deg, rgba(63, 207, 155, 0.1), transparent 58%),
    rgba(6, 12, 19, 0.9);
}

.eq-blog-newsletter-title {
  margin: 0 0 var(--eq-space-3);
  font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
  font-size: var(--eq-text-2xl);
  font-weight: 700;
  letter-spacing: var(--eq-tracking-heading);
  line-height: var(--eq-leading-heading);
  color: var(--text-light);
}

.eq-blog-newsletter-copy {
  margin: 0;
  max-width: 52ch;
  color: var(--eq-body-ink);
  font-size: var(--eq-text-md);
  line-height: var(--eq-leading-body);
}

.eq-blog-newsletter-form {
  display: flex;
  gap: var(--eq-space-3);
  flex-wrap: wrap;
}

.eq-blog-input {
  flex: 1 1 15rem;
  min-width: 0;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--eq-edge-strong);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text-light);
  font-size: var(--eq-text-base);
  transition: border-color var(--eq-dur-fast) var(--eq-ease-out);
}

.eq-blog-newsletter-submit {
  white-space: nowrap;
}

/* Reserved, so the arrival of a status message does not shift the button
   out from under the pointer that just clicked it. */
.eq-blog-newsletter-status {
  min-height: 1.4rem;
  margin-top: var(--eq-space-3);
}

.eq-blog-newsletter-message {
  margin: 0;
  color: var(--eq-body-ink);
  font-size: var(--eq-text-sm);
  line-height: var(--eq-leading-ui);
}

/* -- Responsive ------------------------------------------------------------ */
@media (max-width: 1080px) {
  .eq-blog-masthead {
    grid-template-columns: 1fr;
    gap: var(--eq-space-10);
  }

  .eq-blog-desk {
    padding-left: 0;
    padding-top: var(--eq-space-8);
    border-left: 0;
    border-top: 1px solid var(--eq-edge);
  }

  .eq-blog-lead {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .eq-blog-newsletter {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .eq-blog-shell {
    padding: 5rem 0 4rem;
  }

  .eq-blog-masthead {
    padding-bottom: var(--eq-space-8);
    margin-bottom: var(--eq-space-10);
  }

  .eq-blog-lead {
    margin-bottom: var(--eq-space-12);
  }

  /* The section heading and its note stop competing for one row and
     become a heading with a note under it. */
  .eq-blog-section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--eq-space-3);
  }
}

/* The lift is the only thing worth suppressing here; the underline draw
   and the colour change stay, because they are the hover state. */
@media (prefers-reduced-motion: reduce) {
  .eq-blog-post-card:hover {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   Free online tools (/tools/...)

   One layout for four tools that all have the same shape: a hero that states
   what the tool answers, a form, a result block, and cross-links. The result
   rows are a two-column grid rather than a table so a long label wraps under
   itself instead of squeezing the number it belongs to.
   --------------------------------------------------------------------------- */

.tools-page {
  min-height: 100vh;
  padding-bottom: 4rem;
}

.tools-hero,
.tool-hero {
  padding: 4.5rem 0 2rem;
}

.tools-title {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 800;
  color: #f8fafc;
  margin: 0.5rem 0 0.9rem;
  max-width: 22ch;
}

.tools-subtitle {
  color: rgba(148, 163, 184, 0.85);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 70ch;
  margin-bottom: 1rem;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.tool-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.4rem;
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.tool-card:hover {
  transform: translateY(-2px);
  text-decoration: none;
}

.tool-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.tool-card-icon {
  font-size: 1.3rem;
  color: #38bdf8;
}

.tool-card-name {
  font-size: 1.08rem;
  font-weight: 750;
  color: #f8fafc;
  margin: 0;
}

.tool-card-blurb {
  color: rgba(148, 163, 184, 0.8);
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0;
  flex: 1;
}

.tool-card-cta {
  color: #38bdf8;
  font-weight: 650;
  font-size: 0.85rem;
}

.tools-offline {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  color: rgba(148, 163, 184, 0.8);
  font-size: 0.9rem;
}

/* The daily allowance, stated where the tool is used rather than in a modal
   that appears once it is gone. */
.tool-quota-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, 0.35);
  background: rgba(56, 189, 248, 0.08);
  color: #7dd3fc;
  font-size: 0.76rem;
  font-weight: 650;
}

.tool-quota-badge--low {
  border-color: rgba(251, 191, 36, 0.45);
  background: rgba(251, 191, 36, 0.1);
  color: #fcd34d;
}

.tool-quota-badge--spent {
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(248, 113, 113, 0.1);
  color: #fca5a5;
}

.tool-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.2rem;
}

@media (min-width: 900px) {
  .tool-body {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: start;
  }
}

.tool-form,
.tool-results {
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.tool-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.tool-holding-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
}

.tool-weight {
  text-align: right;
}

.tool-row-remove,
.tool-row-add {
  background: none;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 8px;
  color: rgba(226, 232, 240, 0.85);
  font-size: 0.8rem;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
}

.tool-row-remove:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.tool-row-add {
  align-self: flex-start;
}

.tool-submit {
  margin-top: 0.4rem;
}

.tool-error {
  color: #fca5a5;
  font-size: 0.85rem;
  margin: 0;
}

.tool-file {
  color: rgba(148, 163, 184, 0.7);
  font-size: 0.78rem;
  margin: 0;
}

.tool-result {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.tool-result-label {
  color: rgba(148, 163, 184, 0.85);
  font-size: 0.87rem;
}

.tool-result-value {
  color: #e2e8f0;
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
}

.tool-result--strong .tool-result-value {
  color: #f8fafc;
  font-weight: 750;
  font-size: 1.05rem;
}

.tool-subhead {
  color: #f8fafc;
  font-size: 0.95rem;
  font-weight: 700;
  margin: 1rem 0 0.2rem;
}

.tool-note {
  color: rgba(148, 163, 184, 0.68);
  font-size: 0.78rem;
  line-height: 1.55;
  margin: 0.4rem 0 0;
}

.tool-note--warn {
  color: rgba(252, 211, 77, 0.82);
}

/* The wall. Deliberately the same weight as a result block: running out is a
   normal outcome of a free tool, not an error state. */
.tool-wall {
  padding: 2rem;
  text-align: center;
  grid-column: 1 / -1;
}

.tool-wall-title {
  color: #f8fafc;
  font-size: 1.25rem;
  font-weight: 780;
  margin: 0 0 0.6rem;
}

.tool-wall-body {
  color: rgba(148, 163, 184, 0.85);
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 58ch;
  margin: 0 auto 1.2rem;
}

.tool-wall-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
  align-items: center;
}

.tool-wall-login {
  color: #7dd3fc;
  font-size: 0.86rem;
}

.tool-wall-reset {
  color: rgba(148, 163, 184, 0.6);
  font-size: 0.78rem;
  margin: 1rem 0 0;
}

.tool-more {
  margin-top: 3rem;
}

.tool-more-title {
  color: rgba(148, 163, 184, 0.85);
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
}

.tool-more-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.8rem;
}

.tool-more-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 12px;
  text-decoration: none;
}

.tool-more-card:hover {
  border-color: rgba(56, 189, 248, 0.4);
  text-decoration: none;
}

.tool-more-name {
  color: #e2e8f0;
  font-weight: 700;
  font-size: 0.92rem;
}

.tool-more-blurb {
  color: rgba(148, 163, 184, 0.72);
  font-size: 0.8rem;
  line-height: 1.5;
}

/* ================================================================================
   SEO LANDING PAGES  (.eq-seo-*)

   These rules used to live in a `SEO_CSS` string constant rendered as an inline
   `<style>` by `frontend/src/pages/seo_landing.rs`. They had to move, because
   inline `<style>` and Dioxus server rendering do not survive each other: the
   SSR pass writes a hydration marker as the first child of every element,
   including `<style>`, so each prerendered page shipped

       <style data-node-hydration="82"><!--node-id83-->
           .eq-seo-shell { padding: 6.5rem 0 5rem; ... }

   and the CSS parser read `node-id83--`, `>` and `.eq-seo-shell` as one selector,
   swallowing the first rule's whole block. The visible cost was that every one of
   the several hundred prerendered /trade and /compare pages lost exactly the
   declarations in that first rule: the shell's top padding, so the eyebrow sat
   entirely behind the fixed navbar and the `<h1>` was sliced in half by it, and
   the shell's `overflow: hidden`, so the background orbs bled out of the section
   at the foot of the page. As an external sheet there is no marker to eat, and
   the ~3.5 KB stops being duplicated into every prerendered document.

   The pass that came with the move is a polish pass, not a redesign. The dark
   ground, the mint and gold accents and the type stay exactly as they are. What
   changed is that the page now has structure you can see: the hero is a hero
   rather than the first paragraph, each `<h2>` carries a chapter rule so the
   sections read as sections, and the cards, chips and rows are built on the
   `--eq-*` tokens from css/eq-system.css instead of on `--glass-border`, which
   that file measures at 1.20:1 and therefore invisible.
   ================================================================================ */

.eq-seo-shell {
  position: relative;
  overflow: hidden;
  /* Clears the fixed navbar, and tracks it if an announcement strip opens above
     it — the same pair of variables the anchor offsets in eq-system.css read. */
  padding:
    calc(var(--eq-header-h, 5.5rem) + var(--eq-banner-h, 0px) + var(--eq-space-10, 2.5rem))
    0
    var(--eq-space-20, 5rem);
}

.eq-seo-inner {
  position: relative;
  z-index: 1;
  max-width: 1080px;

  /* Two widths, used consistently: the grids (facts, chips, table, pillars) run
     the full column, and everything you actually read sits in one narrower
     measure. Card-shaped text adds its own padding back so its *text* lines up
     with the bare paragraphs rather than its border doing. */
  --eq-seo-read: var(--eq-measure, 68ch);
  --eq-seo-read-card: calc(var(--eq-measure, 68ch) + 2.75rem);
}

/* --- The hero -----------------------------------------------------------------
   Eyebrow, title and lede are one block with a closing hairline, so the page
   opens with a masthead instead of running straight from the title into the
   first body paragraph. */

.eq-seo-hero {
  padding-bottom: var(--eq-space-10, 2.5rem);
  border-bottom: 1px solid var(--eq-edge, rgba(211, 223, 236, 0.16));
}

.eq-seo-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--eq-accent-strong, #8de3bb);
  background: rgba(63, 207, 155, 0.1);
  border: 1px solid var(--eq-edge-accent, rgba(141, 227, 187, 0.34));
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: var(--eq-tracking-label, 0.08em);
  text-transform: uppercase;
  font-size: var(--eq-text-xs, 0.75rem);
}

.eq-seo-h1 {
  color: var(--text-light);
  font-weight: 800;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height: var(--eq-leading-display, 1.08);
  letter-spacing: var(--eq-tracking-display, -0.028em);
  text-wrap: balance;
  margin: var(--eq-space-5, 1.25rem) 0 var(--eq-space-4, 1rem);
  /* Held to a display measure rather than the 1080px column: at 3.4rem a full
     column is a 45-character line, which is too long to scan as a title. 24ch
     keeps the short asset titles to two lines and the longest hub title — "Every
     market and exchange Axiom Finance automates" — from stacking into four. */
  max-width: 24ch;
}

.eq-seo-lede {
  color: var(--text-muted);
  font-size: var(--eq-text-lg, 1.125rem);
  line-height: var(--eq-leading-body, 1.6);
  max-width: 60ch;
  margin: 0;
}

/* --- Chapters -----------------------------------------------------------------
   Every `<h2>` was the same size, the same weight and the same distance from the
   paragraph above it, so a page of eight sections scrolled as one column of text.
   The rule above each heading is the same device the home page uses for its
   numbered chapter marks, without the numbers: these pages are assembled from a
   variable set of blocks, so a fixed count would be a lie. */

.eq-seo-h2 {
  position: relative;
  color: var(--text-light);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  line-height: var(--eq-leading-heading, 1.2);
  letter-spacing: var(--eq-tracking-heading, -0.015em);
  text-wrap: balance;
  margin: var(--eq-space-16, 4rem) 0 var(--eq-space-4, 1rem);
  padding-top: var(--eq-space-5, 1.25rem);
}

.eq-seo-h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.5rem;
  height: 2px;
  border-radius: 2px;
  background: var(--eq-accent, #3fcf9b);
}

.eq-seo-p {
  color: var(--text-muted);
  line-height: 1.75;
  max-width: var(--eq-seo-read, 68ch);
}

/* --- Pillars ------------------------------------------------------------------
   Three bare text columns under the hero read as a ragged block rather than as
   three claims. They are cards now, on the same edge as the rest of the page. */

.eq-seo-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--eq-space-3, 0.75rem);
  margin-top: var(--eq-space-10, 2.5rem);
}

.eq-seo-pillar {
  background: rgba(255, 255, 255, 0.022);
  border: 1px solid var(--eq-edge, rgba(211, 223, 236, 0.16));
  border-radius: var(--radius-md, 14px);
  padding: var(--eq-space-5, 1.25rem);
}

.eq-seo-pillar h3 {
  color: var(--text-light);
  font-size: var(--eq-text-base, 1rem);
  font-weight: 700;
  line-height: var(--eq-leading-heading, 1.2);
  margin: 0 0 var(--eq-space-2, 0.5rem);
}

.eq-seo-pillar p {
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
  font-size: 0.95rem;
}

/* --- Facts --------------------------------------------------------------------
   Every facts list on these pages is exactly six items. `auto-fit` with a 190px
   floor laid them out five across at desk widths, which left one card stranded
   alone on a second row and squeezed the two longest values into three lines
   while their neighbours used one. Three fixed columns divide six evenly and
   give each value room to sit on one or two lines. */

.eq-seo-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--eq-space-3, 0.75rem);
  margin-top: var(--eq-space-6, 1.5rem);
}

.eq-seo-fact {
  background: rgba(255, 255, 255, 0.028);
  border: 1px solid var(--eq-edge, rgba(211, 223, 236, 0.16));
  border-radius: var(--radius-md, 14px);
  padding: var(--eq-space-4, 1rem) var(--eq-space-5, 1.25rem);
}

.eq-seo-fact dt {
  color: rgba(255, 255, 255, 0.58);
  font-size: var(--eq-text-2xs, 0.6875rem);
  text-transform: uppercase;
  letter-spacing: var(--eq-tracking-label, 0.08em);
  font-weight: 600;
  margin: 0;
}

.eq-seo-fact dd {
  color: var(--text-light);
  margin: var(--eq-space-2, 0.5rem) 0 0;
  font-weight: 600;
  line-height: 1.45;
  /* Tickers, dates and quote pairs are figures; align them like figures. */
  font-variant-numeric: tabular-nums;
}

.eq-seo-fact a {
  color: var(--eq-accent-strong, #8de3bb);
  text-decoration: none;
}

.eq-seo-fact a:hover {
  text-decoration: underline;
}

/* --- Chips --------------------------------------------------------------------
   Venue and related-market links. The hover was a border and text colour change
   only, which on a dark ground is almost no feedback at all; it now also lifts
   the fill. */

.eq-seo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--eq-space-2, 0.5rem);
  margin-top: var(--eq-space-5, 1.25rem);
}

.eq-seo-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-light);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--eq-edge, rgba(211, 223, 236, 0.16));
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  font-size: var(--eq-text-sm, 0.8125rem);
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color var(--eq-dur-fast, 160ms) var(--eq-ease-out, ease),
    border-color var(--eq-dur-fast, 160ms) var(--eq-ease-out, ease),
    color var(--eq-dur-fast, 160ms) var(--eq-ease-out, ease);
}

.eq-seo-chip:hover,
.eq-seo-chip:focus-visible {
  color: var(--eq-accent-strong, #8de3bb);
  background: rgba(63, 207, 155, 0.1);
  border-color: var(--eq-edge-accent, rgba(141, 227, 187, 0.34));
  text-decoration: none;
}

/* --- Steps --------------------------------------------------------------------
   A browser-default decimal list was the only numbered sequence on the site not
   using the mint counters the rest of the product does. */

.eq-seo-steps {
  list-style: none;
  counter-reset: eq-seo-step;
  color: var(--text-muted);
  line-height: 1.75;
  /* The counters hang in a 2.75rem gutter, so the text itself still lands on
     the shared measure. */
  max-width: calc(var(--eq-seo-read, 68ch) + 2.75rem);
  padding: 0;
  margin: var(--eq-space-5, 1.25rem) 0 0;
  display: grid;
  gap: var(--eq-space-4, 1rem);
}

.eq-seo-steps li {
  counter-increment: eq-seo-step;
  position: relative;
  padding-left: 2.75rem;
  margin: 0;
}

.eq-seo-steps li::before {
  content: counter(eq-seo-step);
  position: absolute;
  left: 0;
  top: 0.1em;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: rgba(63, 207, 155, 0.12);
  border: 1px solid var(--eq-edge-accent, rgba(141, 227, 187, 0.34));
  color: var(--eq-accent-strong, #8de3bb);
  font-size: var(--eq-text-xs, 0.75rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* --- Research verdicts --------------------------------------------------------- */

.eq-seo-verdicts {
  list-style: none;
  padding: 0;
  margin: var(--eq-space-5, 1.25rem) 0 0;
  max-width: var(--eq-seo-read-card, 68ch);
  display: grid;
  gap: var(--eq-space-3, 0.75rem);
}

.eq-seo-verdicts li {
  color: var(--text-muted);
  line-height: 1.7;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--eq-edge, rgba(211, 223, 236, 0.16));
  border-left: 3px solid var(--eq-accent, #3fcf9b);
  border-radius: var(--radius-sm, 8px);
  padding: var(--eq-space-4, 1rem) var(--eq-space-5, 1.25rem);
}

/* --- FAQ ----------------------------------------------------------------------
   `<details>` shipped with the UA's black disclosure triangle, which is the one
   piece of unstyled browser chrome on the page. It is replaced by a chevron that
   turns with the state, and the row now reacts to the pointer so it reads as
   something you can open. */

.eq-seo-faq {
  max-width: var(--eq-seo-read-card, 68ch);
  border: 1px solid var(--eq-edge, rgba(211, 223, 236, 0.16));
  border-radius: var(--radius-md, 14px);
  background: rgba(255, 255, 255, 0.022);
  margin-bottom: var(--eq-space-2, 0.5rem);
  transition:
    border-color var(--eq-dur-fast, 160ms) var(--eq-ease-out, ease),
    background-color var(--eq-dur-fast, 160ms) var(--eq-ease-out, ease);
}

.eq-seo-faq:hover {
  border-color: var(--eq-edge-strong, rgba(211, 223, 236, 0.26));
  background: rgba(255, 255, 255, 0.035);
}

.eq-seo-faq[open] {
  border-color: var(--eq-edge-accent, rgba(141, 227, 187, 0.34));
  background: rgba(63, 207, 155, 0.04);
}

.eq-seo-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--eq-space-4, 1rem);
  color: var(--text-light);
  font-weight: 700;
  cursor: pointer;
  padding: var(--eq-space-4, 1rem) var(--eq-space-5, 1.25rem);
  list-style: none;
}

.eq-seo-faq summary::-webkit-details-marker {
  display: none;
}

.eq-seo-faq summary::after {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.2rem;
  border-right: 2px solid var(--eq-accent, #3fcf9b);
  border-bottom: 2px solid var(--eq-accent, #3fcf9b);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--eq-dur-fast, 160ms) var(--eq-ease-out, ease);
}

.eq-seo-faq[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.eq-seo-faq p {
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0;
  padding: 0 var(--eq-space-5, 1.25rem) var(--eq-space-5, 1.25rem);
}

/* --- Closing actions ----------------------------------------------------------- */

.eq-seo-cta {
  display: flex;
  gap: var(--eq-space-3, 0.75rem);
  flex-wrap: wrap;
  align-items: center;
  margin: var(--eq-space-12, 3rem) 0 0;
  padding-top: var(--eq-space-8, 2rem);
  border-top: 1px solid var(--eq-edge, rgba(211, 223, 236, 0.16));
}

.eq-seo-note {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.86rem;
  line-height: 1.65;
  margin-top: var(--eq-space-8, 2rem);
  max-width: var(--eq-seo-read, 68ch);
}

/* --- Comparison table -----------------------------------------------------------
   Three columns with no widths declared let the browser size them off content,
   so the axis column came out narrow and the two answer columns came out uneven
   and different on every competitor page. They are declared here instead. The
   middle column is ours: a quiet mint wash marks which side of the comparison
   the reader is on, and does the job the bold-face alone was not doing. */

.eq-seo-table-wrap {
  margin-top: var(--eq-space-6, 1.5rem);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* A sideways swipe on the table should not walk the browser back a page. */
  overscroll-behavior-x: contain;

  /* Scroll shadows, so a phone reader can tell there is a third column off to
     the right. The two `local` layers are painted in the section ground and
     travel with the content; the two `scroll` layers are the shadows, pinned to
     the box. At either end the cover sits over the shadow and hides it, so each
     edge only darkens while there is actually something past it — and on a desk
     screen, where the table fits, neither ever shows. */
  background:
    linear-gradient(to right, var(--eq-ground-rise-1, #090f18) 28%, rgba(9, 15, 24, 0))
      left center / 34px 100% no-repeat local,
    linear-gradient(to left, var(--eq-ground-rise-1, #090f18) 28%, rgba(9, 15, 24, 0))
      right center / 34px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))
      left center / 16px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))
      right center / 16px 100% no-repeat scroll;
}

.eq-seo-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  table-layout: fixed;
}

.eq-seo-table th,
.eq-seo-table td {
  text-align: left;
  padding: var(--eq-space-4, 1rem) var(--eq-space-4, 1rem);
  border-bottom: 1px solid var(--eq-edge, rgba(211, 223, 236, 0.16));
  vertical-align: top;
  line-height: 1.6;
}

.eq-seo-table th {
  color: var(--text-light);
  font-weight: 700;
  font-size: var(--eq-text-2xs, 0.6875rem);
  text-transform: uppercase;
  letter-spacing: var(--eq-tracking-label, 0.08em);
  border-bottom-color: var(--eq-edge-strong, rgba(211, 223, 236, 0.26));
  white-space: nowrap;
}

.eq-seo-table td {
  color: var(--text-muted);
  font-size: 0.93rem;
}

.eq-seo-table th:first-child,
.eq-seo-table td:first-child {
  width: 26%;
  color: var(--text-light);
  font-weight: 600;
}

/* Column two is Axiom Finance on every comparison page. */
.eq-seo-table th:nth-child(2),
.eq-seo-table td:nth-child(2) {
  width: 37%;
  background: rgba(63, 207, 155, 0.05);
  box-shadow:
    inset 1px 0 0 var(--eq-edge-accent, rgba(141, 227, 187, 0.34)),
    inset -1px 0 0 var(--eq-edge-accent, rgba(141, 227, 187, 0.34));
}

.eq-seo-table th:nth-child(2) {
  color: var(--eq-accent-strong, #8de3bb);
}

.eq-seo-table th:nth-child(3),
.eq-seo-table td:nth-child(3) {
  width: 37%;
}

.eq-seo-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.022);
}

.eq-seo-table tbody tr:hover td:nth-child(2) {
  background: rgba(63, 207, 155, 0.08);
}

/* --- Narrow viewports ----------------------------------------------------------- */

@media (max-width: 720px) {
  .eq-seo-shell {
    padding-bottom: var(--eq-space-12, 3rem);
  }

  .eq-seo-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .eq-seo-h2 {
    margin-top: var(--eq-space-12, 3rem);
  }

  /* Both buttons full width beats two ragged half-rows of pill. */
  .eq-seo-cta .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

@media (max-width: 460px) {
  .eq-seo-facts {
    grid-template-columns: minmax(0, 1fr);
  }
}