/* ==========================================================================
 * Fursan Health — public site stylesheet
 *
 * Brand alignment v2 (alpha.224 — re-skin pass)
 * ----------------------------------------------------------------------------
 * Codex shipped the original IA + copy + class structure for this site
 * (SHIP 087). The first cut used a warm sage/gold/clay literary palette
 * with Fraunces serif headlines.
 *
 * Per product direction 2026-05-03 ~PM: "I really need this website to be a
 * homerun right out of the gates, and be very classy and refined, and on
 * brand exactly with our iOS app look and feel".
 *
 * This file replaces the visual layer end-to-end. HTML class names are kept
 * intact so the existing markup (including the radar-scope hero, glass
 * panels, access tiles, segment grid, roadmap, etc.) renders without a
 * single HTML change.
 *
 * Brand DNA (matches FursanTheme.swift in the iOS app):
 *   - Pure black surface (#000) with subtle 48px dot grid + radial halos
 *   - Cyan #38bdf8 (information) + matrix-green #4ade80 (action) +
 *     deep-fast purple #b380fa (extended/professional) + warning amber
 *     #fbbf24 + danger rose #fb7185
 *   - SF Pro Display + SF Pro Text + SF Mono (system stack — no webfont
 *     download tax on first paint)
 *   - Sharp 6/8/10/12 px radii (no 26px softness)
 *   - Monospaced eyebrow labels with `//` separators and 0.16em kerning
 *   - Command-surface tactical panel chrome: 1px hairline borders, inset
 *     1px highlight, soft outer shadow
 *
 * Class catalog (all preserved from Codex's HTML):
 *   layout: .page-shell .nav-shell .container
 *   header: .site-header .brand-lockup .brand-lockup img .nav-links
 *           .nav-cta
 *   buttons: .button .button.primary .button.secondary .button.quiet
 *            .skip-link
 *   eyebrows: .eyebrow .panel-label
 *   hero: .hero .hero-home .hero-providers .hero-app .hero-reports
 *         .hero-support .hero-scene .radar-scope .scope-ring (.ring-one,
 *         .ring-two, .ring-three) .scope-cross (.x, .y) .scope-f
 *         .glass-panel .core-panel .pro-panel .internal-panel
 *         .mini-bars .roster-dots .hero-copy .hero-lead .hero-actions
 *         .center-actions
 *   sections: .access-band .access-grid .access-tile .story-section
 *             .story-grid .story-card .principle-list .principle
 *             .platform-section .split-section .sticky-copy .product-stack
 *             .product-row .pro-section .segment-grid .trust-section
 *             .trust-grid .truth-panel .truth-panel.warning .roadmap-section
 *             .roadmap article .portal-grid .portal-card .support-card
 *             .footer-grid
 *   utility: .section-heading .section-heading.compact
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * Tokens. Names mirror FursanTheme.swift one-to-one so a designer/dev
 * jumping between iOS code and this stylesheet sees the same vocabulary.
 * -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
 * Tokens — alpha.241 dual-theme rebuild
 *
 * Per product direction 2026-05-04:
 *   "true north start for building is light theme mobile web specifically
 *    chrome and safari ... lets build a light theme and dark theme option
 *    to click into on the website ... lets lean into making this thing
 *    really pop in the light theme"
 *
 * LIGHT THEME (default) — premium professional surface like Linear /
 * Vercel / Stripe with our specific tactical accent palette. Vivid
 * deeper accents (green-600 / cyan-600 / purple-600) for text-on-white
 * readability, while glow-grade hover/halo effects use the pastel
 * versions for visual punch.
 *
 * DARK THEME (opt-in) — the original alpha.224 black command surface,
 * preserved exactly for users who toggle it on. Kept intentionally —
 * matches the iOS app's dark UI, looks great as a "night" mode.
 *
 * Layout, type, and shadow vars stay theme-agnostic.
 * -------------------------------------------------------------------------- */

/* THEME-AGNOSTIC tokens — same values regardless of theme. */
:root {
  /* Layout */
  --max:             1180px;
  --gutter:          clamp(20px, 4vw, 44px);

  /* Radii */
  --radius-sm:       6px;
  --radius:          10px;
  --radius-lg:       12px;

  /* Type stack — system fonts only. SF Pro on Apple, Inter cascade
     elsewhere. No external @import — first paint stays fast. */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

/* LIGHT THEME — default. Implicit via [data-theme="light"] on <html>
   AND as the fallback for un-set theme. */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* Surfaces — soft cool-white. The page is a clean instrument panel,
     not a wall of pure white. Slight blue-cool tint reads "tech" not
     "medical". */
  --command-black:   #ffffff;     /* legacy alias name; renamed effect */
  --command-deep:    #f1f4fa;     /* slight darker section-divider band */
  --bg:              #f6f8fc;
  --bg-2:            #ffffff;
  --bg-3:            #fafbfe;
  --panel:           #ffffff;
  --panel-raised:    #fafbfe;
  --panel-soft:      #eef2f8;

  /* Hairlines — soft inky lines. */
  --hairline:        rgba(11, 18, 32, 0.08);
  --hairline-strong: rgba(11, 18, 32, 0.16);

  /* Text — rich black, never pure black, on slightly cool background. */
  --ink-strong:      #0a0e14;
  --ink:             #131a25;
  --soft:            rgba(10, 14, 20, 0.74);
  --muted:           rgba(10, 14, 20, 0.58);
  --faint:           rgba(10, 14, 20, 0.40);

  /* Accents — light-theme variants are deeper / more saturated for
     readability against white. */
  --matrix-green:    #15a445;     /* green-600 — text-on-white */
  --matrix-green-pop:#22c55e;     /* green-500 — backgrounds */
  --signal-green:    #16a34a;
  --cyan:            #0284c7;     /* sky-600 */
  --cyan-pop:        #0ea5e9;     /* sky-500 — backgrounds */
  --warning:         #b45309;     /* amber-700 */
  --warning-pop:     #f59e0b;     /* amber-500 — backgrounds */
  --danger:          #dc2626;
  --danger-pop:      #ef4444;
  --deep-fast:       #7c3aed;     /* violet-600 */
  --deep-fast-pop:   #9333ea;     /* violet-500 — backgrounds */

  /* Legacy aliases — preserved so existing var() refs don't 404. */
  --line:            var(--hairline);
  --line-strong:     var(--hairline-strong);
  --panel-strong:    var(--panel-raised);
  --panel-warm:      rgba(124, 58, 237, 0.08);
  --green:           var(--matrix-green);
  --green-2:         var(--signal-green);
  --sage:            var(--matrix-green);
  --aqua:            var(--cyan);
  --gold:            var(--warning);
  --clay:            var(--deep-fast);
  --blue:            var(--cyan);

  /* Shadow — softer + warmer for light theme. */
  --shadow:          0 22px 56px rgba(11, 18, 32, 0.10), 0 4px 12px rgba(11, 18, 32, 0.06);
  --shadow-soft:     0 8px 24px rgba(11, 18, 32, 0.08);
}

/* DARK THEME — opt-in via [data-theme="dark"]. Preserves original
   alpha.224 black command surface. */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces */
  --command-black:   #000000;
  --command-deep:    #050608;
  --bg:              var(--command-black);
  --bg-2:            #0d1014;
  --bg-3:            #131720;
  --panel:           #0d1014;
  --panel-raised:    #131720;
  --panel-soft:      #181c25;

  /* Hairlines */
  --hairline:        rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.16);

  /* Text */
  --ink-strong:      #ffffff;
  --ink:             #ffffff;
  --soft:            rgba(255, 255, 255, 0.86);
  --muted:           rgba(255, 255, 255, 0.66);
  --faint:           rgba(255, 255, 255, 0.42);

  /* Accents — dark-theme: pastel/light variants for glow-against-black. */
  --matrix-green:    #4ade80;
  --matrix-green-pop:#4ade80;
  --signal-green:    #86efac;
  --cyan:            #38bdf8;
  --cyan-pop:        #38bdf8;
  --warning:         #fbbf24;
  --warning-pop:     #fbbf24;
  --danger:          #fb7185;
  --danger-pop:      #fb7185;
  --deep-fast:       #b380fa;
  --deep-fast-pop:   #b380fa;

  /* Legacy aliases */
  --line:            var(--hairline);
  --line-strong:     var(--hairline-strong);
  --panel-strong:    var(--panel-raised);
  --panel-warm:      rgba(179, 128, 250, 0.10);
  --green:           var(--matrix-green);
  --green-2:         var(--signal-green);
  --sage:            var(--matrix-green);
  --aqua:            var(--cyan);
  --gold:            var(--warning);
  --clay:            var(--deep-fast);
  --blue:            var(--cyan);

  /* Shadow */
  --shadow:          0 24px 64px rgba(0, 0, 0, 0.6), 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-soft:     0 12px 32px rgba(0, 0, 0, 0.5);
}

/* --------------------------------------------------------------------------
 * Reset + base
 * -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

/* web.70 — scroll-margin-top on every targetable element so in-page
   anchor jumps (#apply, #who-title, #send-title, #contact-routes-title,
   etc.) don't land flush against the top edge with the sticky header
   covering the heading. 80px clears the typical site-header height +
   a bit of breathing room. Per second-pass audit: pre-fix every CTA
   like "Who we want first" jumped to its target with the heading
   half-covered by the nav. */
:target,
[id]:where(h1, h2, h3, h4, h5, h6, section, article, aside, .anchor-target) {
  scroll-margin-top: 80px;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: 0;
  overflow-x: hidden;
  transition: background-color 220ms ease, color 220ms ease;
}

/* Command surface backdrop — soft phase-tinted halos.
   Light theme: deep but very low-opacity radial color halos over the
   cool-white surface, gives the page a subtle gradient ambience without
   competing with content.
   Dark theme: same halo structure with the original brighter overlays
   (overridden in the [data-theme="dark"] block below). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 70% 55% at 50% -10%, rgba(2, 132, 199, 0.10), transparent 55%),
    radial-gradient(ellipse 65% 45% at 85% 92%, rgba(34, 197, 94, 0.07), transparent 55%),
    radial-gradient(ellipse 55% 45% at 8% 65%, rgba(124, 58, 237, 0.07), transparent 55%);
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(70, 80, 70, 0.052) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70, 80, 70, 0.052) 1px, transparent 1px),
    linear-gradient(rgba(70, 80, 70, 0.052) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70, 80, 70, 0.052) 1px, transparent 1px);
  background-size:
    44px 44px,
    44px 44px,
    11px 11px,
    11px 11px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.62), transparent 82%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.62), transparent 82%);
  pointer-events: none;
}

/* Dark-theme override of the body backdrop — original alpha.224 values. */
:root[data-theme="dark"] body::before {
  background:
    radial-gradient(ellipse 70% 50% at 50% -10%, rgba(56, 189, 248, 0.10), transparent 55%),
    radial-gradient(ellipse 65% 45% at 85% 92%, rgba(74, 222, 128, 0.06), transparent 55%),
    radial-gradient(ellipse 50% 40% at 12% 65%, rgba(179, 128, 250, 0.05), transparent 55%);
}
:root[data-theme="dark"] body::after {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.052) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.052) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.78), transparent 75%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.78), transparent 75%);
}

a { color: inherit; }
img, svg { max-width: 100%; }

h1, h2, h3, p { overflow-wrap: anywhere; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.018em;
  color: var(--ink-strong);
  margin: 0;
}

h1 {
  max-width: 920px;
  font-size: clamp(40px, 6.5vw, 78px);
  line-height: 1.02;
}

h2 {
  margin: 12px 0 0;
  font-size: clamp(30px, 4.4vw, 48px);
  line-height: 1.08;
}

h3 {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.22;
  letter-spacing: -0.005em;
  font-weight: 800;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 30;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--matrix-green);
  color: #04180a;
  font-weight: 900;
  text-decoration: none;
  transition: top 140ms ease;
}
.skip-link:focus { top: 16px; }

/* --------------------------------------------------------------------------
 * Layout primitives
 * -------------------------------------------------------------------------- */
.page-shell,
.nav-shell {
  width: min(var(--max), calc(100% - (var(--gutter) * 2)));
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
 * Header / navigation. Sticky, glass-blurred, matches the iOS Dynamic-Island-
 * adjacent feel: tight horizontal padding, brand on the left, nav in the
 * middle, command CTA on the right.
 * -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--hairline);
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
}

.nav-shell {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-strong);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 17px;
  letter-spacing: -0.005em;
}

.brand-lockup img {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 7px;
  box-shadow:
    0 0 24px rgba(56, 189, 248, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.005em;
}

.nav-links a {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: color 120ms ease, background 120ms ease;
}

.nav-links a:hover {
  color: var(--ink-strong);
  background: rgba(255, 255, 255, 0.06);
}

@media (max-width: 900px) {
  .nav-links { display: none; }
}

/* --------------------------------------------------------------------------
 * Buttons. Sharp, command-style. Three variants: primary (matrix-green),
 * secondary (cyan), quiet (ghost).
 * -------------------------------------------------------------------------- */
.nav-cta,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink-strong);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
  cursor: pointer;
}

.nav-cta {
  background: rgba(74, 222, 128, 0.12);
  border-color: rgba(74, 222, 128, 0.45);
  color: var(--matrix-green);
}
.nav-cta:hover {
  background: rgba(74, 222, 128, 0.20);
  border-color: rgba(74, 222, 128, 0.70);
  transform: translateY(-1px);
}

.button.primary {
  background: var(--matrix-green);
  color: #04180a;
  box-shadow: 0 0 32px rgba(74, 222, 128, 0.34);
}
.button.primary:hover {
  background: var(--signal-green);
  transform: translateY(-1px);
}

.button.secondary {
  background: rgba(56, 189, 248, 0.10);
  color: var(--cyan);
  border-color: rgba(56, 189, 248, 0.50);
}
.button.secondary:hover {
  background: rgba(56, 189, 248, 0.18);
  border-color: rgba(56, 189, 248, 0.78);
}

.button.quiet {
  color: var(--muted);
  border-color: var(--hairline-strong);
}
.button.quiet:hover {
  color: var(--ink-strong);
  border-color: var(--soft);
}

/* --------------------------------------------------------------------------
 * Eyebrow + panel-label. The signature monospaced kicker the iOS app uses
 * everywhere ("CORE_v1 // PRIVATE_ALPHA"). 11px caps, 0.14em
 * kerning, dot indicator.
 * -------------------------------------------------------------------------- */
.eyebrow,
.panel-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
  border-radius: 1px;
}

/* Panel labels live inside .glass-panel — no leading dot (the panel
   itself is the indicator). Render them as muted-cyan tags. */
.panel-label {
  margin: 0 0 10px;
  color: var(--cyan);
  letter-spacing: 0.14em;
}

/* --------------------------------------------------------------------------
 * Hero. The radar-scope visual is rebuilt as a phase-ring clock that
 * echoes our iOS fasting-hero. Three rings sweep around an `F` mark,
 * with crosshairs becoming reticle hairlines. Matrix-green + cyan +
 * deep-fast purple gradient.
 * -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(820px, 92vh);
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--hairline);
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(circle at 28% 32%, rgba(74, 222, 128, 0.10), transparent 48%),
    radial-gradient(circle at 78% 60%, rgba(56, 189, 248, 0.10), transparent 50%);
}

.hero-scene {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.hero-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.74) 42%, rgba(0, 0, 0, 0.18) 72%, rgba(0, 0, 0, 0.62) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.52));
}

.radar-scope {
  position: absolute;
  right: max(2.5vw, 22px);
  top: 96px;
  width: min(540px, 50vw);
  aspect-ratio: 1;
  border: 1px solid rgba(56, 189, 248, 0.38);
  border-radius: 50%;
  background:
    /* Phase ring sweep — matches the iOS fasting hero clock */
    conic-gradient(from -90deg,
      var(--matrix-green) 0deg 132deg,
      var(--warning) 132deg 220deg,
      var(--deep-fast) 220deg 360deg);
  -webkit-mask:
    radial-gradient(circle, transparent 38%, black 39% 78%, transparent 79%);
          mask:
    radial-gradient(circle, transparent 38%, black 39% 78%, transparent 79%);
  opacity: 0.92;
  box-shadow:
    inset 0 0 80px rgba(56, 189, 248, 0.18),
    0 0 120px rgba(74, 222, 128, 0.14);
  filter: drop-shadow(0 0 60px rgba(0, 0, 0, 0.45));
}

.scope-ring,
.scope-cross {
  position: absolute;
  inset: 50%;
  transform: translate(-50%, -50%);
}

.ring-one,
.ring-two,
.ring-three {
  border-radius: 50%;
  border-style: solid;
}

.ring-one {
  width: 78%;
  height: 78%;
  border-width: 1px;
  border-color: rgba(56, 189, 248, 0.42);
}

.ring-two {
  width: 52%;
  height: 52%;
  border-width: 1px;
  border-color: rgba(74, 222, 128, 0.38);
}

.ring-three {
  width: 24%;
  height: 24%;
  border-width: 1px;
  border-color: rgba(179, 128, 250, 0.50);
  background: rgba(179, 128, 250, 0.08);
  box-shadow: 0 0 28px rgba(179, 128, 250, 0.20);
}

.scope-cross.x {
  width: 88%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.55), transparent);
}

.scope-cross.y {
  width: 1px;
  height: 88%;
  background: linear-gradient(180deg, transparent, rgba(56, 189, 248, 0.55), transparent);
}

.scope-f {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  color: var(--ink-strong);
  font-size: clamp(80px, 13vw, 168px);
  font-weight: 900;
  letter-spacing: -0.03em;
  text-shadow:
    0 0 32px rgba(56, 189, 248, 0.50),
    0 0 64px rgba(74, 222, 128, 0.20);
}

/* Glass-panel cards floating around the radar-scope. Restyled as
   command-surface tactical cards: pure black, hairline border, sharp
   corners, monospaced headlines. */
.glass-panel {
  position: absolute;
  z-index: 0;
  width: min(326px, 30vw);
  min-height: 156px;
  padding: 14px 16px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(20, 28, 44, 0.94), rgba(8, 12, 18, 0.96)),
    radial-gradient(circle at top right, rgba(56, 189, 248, 0.14), transparent 56%);
  box-shadow:
    var(--shadow-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.glass-panel::after {
  /* Subtle tactical micro-grid inside the panel — echoes the iOS app's
     panel chrome. */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(255, 255, 255, 0.03) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(255, 255, 255, 0.03) 23px 24px);
  pointer-events: none;
}

.core-panel { right: 6vw; top: 156px; }
.core-panel  .panel-label { color: var(--matrix-green); }

.pro-panel { right: 4vw; bottom: 120px; }
.pro-panel  .panel-label { color: var(--deep-fast); }

.internal-panel { display: none; }

.glass-panel strong {
  display: block;
  margin-top: 10px;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.012em;
}

.glass-panel p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

/* Mini chart bars — switch to cyan/matrix-green/deep-fast tints. */
.mini-bars,
.roster-dots {
  display: flex;
  align-items: end;
  gap: 6px;
  margin-top: 16px;
}

.mini-bars span {
  flex: 1;
  height: 32px;
  border-radius: 2px 2px 1px 1px;
  background: linear-gradient(180deg, var(--matrix-green), rgba(74, 222, 128, 0.18));
}
.mini-bars span:nth-child(2) { height: 50px; }
.mini-bars span:nth-child(3) {
  height: 24px;
  background: linear-gradient(180deg, var(--cyan), rgba(56, 189, 248, 0.18));
}
.mini-bars span:nth-child(4) { height: 60px; }
.mini-bars span:nth-child(5) {
  height: 38px;
  background: linear-gradient(180deg, var(--deep-fast), rgba(179, 128, 250, 0.18));
}

.roster-dots span {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(56, 189, 248, 0.42);
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.12);
}
.roster-dots span:nth-child(2),
.roster-dots span:nth-child(5) {
  border-color: rgba(251, 191, 36, 0.55);
  background: rgba(251, 191, 36, 0.14);
}

.hero-copy {
  position: relative;
  padding: 116px 0 84px;
}

.hero-copy .eyebrow { margin-bottom: 18px; }

.hero-lead {
  max-width: 720px;
  margin: 18px 0 0;
  color: var(--soft);
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
}

.hero-actions,
.center-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.center-actions {
  justify-content: center;
  margin-top: 32px;
}

@media (max-width: 1080px) {
  .glass-panel { display: none; }
  .radar-scope { width: 64vw; right: -12vw; top: 60px; opacity: 0.55; }
}

/* --------------------------------------------------------------------------
 * alpha.227 hero-scene-stack — three SVG product mocks layered to tell
 * a phone × Watch × iPad story:
 *
 *   ┌─────────── PRO ROSTER (rear, large) ───────────┐
 *   │                                                │
 *   │  ┌──── PHONE (front, centerpiece) ──┐  ┌WATCH┐ │
 *   │  │ Faster Hero · extended fast      │  │ fast│ │
 *   │  └──────────────────────────────────┘  └─────┘ │
 *   └────────────────────────────────────────────────┘
 *
 * Replaces the abstract radar-scope + glass panels with high-fidelity
 * recreations of actual iOS surfaces. Per product direction 2026-05-04
 * "the fullsize website didnt look changed" — the previous CSS-only
 * re-skin preserved the radar-scope composition; this commit gives
 * desktop a visibly product-anchored hero.
 * -------------------------------------------------------------------------- */
.hero-scene-stack { pointer-events: none; }

/* alpha.229 — when the radar-scope coexists with product mocks
   (alpha.227 layered composition + alpha.229 restored rings),
   the radar sits BEHIND the mocks, dimmed so it reads as a
   tactical motif backdrop rather than competing with the real
   product visuals. */
.hero-scene-stack .radar-scope {
  opacity: 0.42;
  z-index: 0;
}

.hero-product-pro,
.hero-product-phone,
.hero-product-watch {
  position: absolute;
  filter: drop-shadow(0 28px 56px rgba(0, 0, 0, 0.62));
  transition: transform 240ms ease;
}

@media (min-width: 1080px) {
  .hero-scene-stack .radar-scope {
    /* Push the radar slightly off the right edge + drop in tonal
       weight so the product mocks own the right-side composition
       without losing the scope motif the team liked. */
    right: 10vw;
    top: 86px;
    width: min(440px, 36vw);
    opacity: 0.36;
  }
  .hero-product-pro {
    top: 92px;
    right: -2vw;
    width: min(620px, 48vw);
    transform: rotate(-3deg);
    opacity: 0.92;
    z-index: 1;
  }
  .hero-product-phone {
    top: 220px;
    right: 17vw;
    width: min(280px, 22vw);
    transform: rotate(2deg);
    z-index: 3;
  }
  .hero-product-watch {
    bottom: 84px;
    right: 4vw;
    width: min(180px, 14vw);
    transform: rotate(-4deg);
    z-index: 4;
  }
}

@media (min-width: 720px) and (max-width: 1079px) {
  .hero-scene-stack .radar-scope {
    width: 56vw;
    right: -8vw;
    top: 50px;
    opacity: 0.30;
  }
  .hero-product-pro {
    top: 60px;
    right: -18vw;
    width: 80vw;
    transform: rotate(-2deg);
    opacity: 0.45;
    z-index: 1;
  }
  .hero-product-phone {
    top: 184px;
    right: 4vw;
    width: 38vw;
    z-index: 3;
  }
  .hero-product-watch { display: none; }
}

@media (max-width: 719px) {
  /* On mobile, the upper layered composition (radar + 3 mocks
     overlapping) doesn't fit. Hide the upper layer entirely;
     the mobile-strip block below the copy carries the visuals
     instead. Keep a small radar-mark in the corner as a
     tactical accent so the hero doesn't read as plain copy. */
  .hero-scene-stack .radar-scope {
    display: block;
    width: 56vw;
    right: -16vw;
    top: 12px;
    opacity: 0.18;
  }
  .hero-product-pro,
  .hero-product-watch,
  .hero-product-phone { display: none; }
}

/* --------------------------------------------------------------------------
 * alpha.233 — hero stats ticker (pizazz strip)
 *
 * Sits above the eyebrow on every breakpoint. Reads as a live command-
 * console status line: green pulse dot + product version + 4 metric
 * cells (FAST clock, HRV, STREAK, STATUS) separated by `//` glyphs.
 *
 * On mobile the ticker scrolls horizontally if the cells overflow;
 * on desktop it sits in a single row. Per product direction 2026-05-04:
 * "very techy and very statistical and cool looking, we need some
 * pizazz here".
 * -------------------------------------------------------------------------- */
.hero-stats-ticker {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.4rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(180deg, rgba(56, 189, 248, 0.06), rgba(0, 0, 0, 0.5));
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  max-width: fit-content;
}
.hero-stats-ticker::-webkit-scrollbar { display: none; }

.hero-stats-ticker .stat-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  flex-shrink: 0;
}

.hero-stats-ticker .stat-dot {
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--matrix-green);
  box-shadow: 0 0 8px var(--matrix-green);
  animation: ticker-pulse 1.6s ease-in-out infinite;
}

@keyframes ticker-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}

.hero-stats-ticker .stat-key {
  color: rgba(255, 255, 255, 0.55);
}

.hero-stats-ticker .stat-val {
  color: var(--ink-strong);
}

.hero-stats-ticker .stat-val--green {
  color: var(--matrix-green);
  text-shadow: 0 0 10px rgba(74, 222, 128, 0.4);
}

.hero-stats-ticker .stat-sep {
  color: var(--faint);
  font-weight: 900;
}

/* --------------------------------------------------------------------------
 * alpha.233 — mobile-only product strip
 *
 * Sits below the hero copy on screens <= 719px. Renders the three
 * product mocks at FULL opacity with a large phone-format card up
 * top + a smaller side-stack of the iPad-format Pro Roster and the
 * Watch panel below it. Solves reported mobile issue that mobile was
 * "missing any graphics or anything".
 *
 * Hidden on desktop + tablet — those breakpoints already have the
 * layered radar+mocks composition above the copy.
 * -------------------------------------------------------------------------- */
.hero-mobile-strip {
  display: none;
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 1.5rem auto 0;
  padding-bottom: 1rem;
}

@media (max-width: 719px) {
  .hero-mobile-strip {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 0.6rem;
    align-items: stretch;
  }
  .strip-mock {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.55));
  }
  .strip-mock--phone {
    align-self: start;
  }
  .strip-side-stack {
    display: grid;
    gap: 0.5rem;
    align-content: start;
  }
  .strip-mock--pro {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top left;
  }
  .strip-mock--watch {
    width: 78%;
    margin-left: auto;
  }
}

/* On really narrow phones (<= 380px), drop to a single column so
   the cards have room to breathe. */
@media (max-width: 380px) {
  .hero-mobile-strip {
    grid-template-columns: 1fr;
  }
  .strip-side-stack {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  .strip-mock--watch {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
 * Sections. All non-hero sections share the same vertical rhythm and
 * bottom hairline. Headings + lede + grid below.
 * -------------------------------------------------------------------------- */
section:not(.hero) {
  padding: 84px 0;
  border-bottom: 1px solid var(--hairline);
}

.section-heading {
  max-width: 720px;
}

.section-heading.compact {
  max-width: 800px;
  margin: 0 auto 36px;
  text-align: center;
}

.section-heading.compact .eyebrow {
  justify-content: center;
}

.section-heading p:not(.eyebrow) {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
 * Access band ("One public front door"). Four-up grid of jump-point tiles.
 * -------------------------------------------------------------------------- */
.access-band {
  background: rgba(255, 255, 255, 0.012);
}

.access-grid,
.segment-grid,
.roadmap,
.trust-grid,
.portal-grid {
  display: grid;
  gap: 14px;
}

.access-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-top: 32px;
}

@media (max-width: 980px) { .access-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .access-grid { grid-template-columns: 1fr; } }

.access-tile,
.segment-grid article,
.roadmap article,
.truth-panel,
.product-row,
.portal-card,
.support-card,
.principle,
.story-card {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  transition: transform 140ms ease, border-color 140ms ease;
}

.access-tile {
  display: grid;
  gap: 8px;
  padding: 18px;
  text-decoration: none;
  color: inherit;
}

.access-tile:hover {
  transform: translateY(-2px);
  border-color: var(--hairline-strong);
}

.access-tile span {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: var(--cyan);
}

.access-tile strong {
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  color: var(--ink-strong);
  letter-spacing: -0.005em;
}

.access-tile p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
 * Story section. Single card on the left, principle list on the right.
 * -------------------------------------------------------------------------- */
.story-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  margin-top: 24px;
}

@media (min-width: 980px) {
  .story-grid { grid-template-columns: 1.1fr 1fr; align-items: start; }
}

.story-card { padding: 28px; }

.story-card h2 { margin: 0; }

.story-card p {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.6;
}

.principle-list {
  display: grid;
  gap: 12px;
}

.principle {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: start;
  padding: 18px;
}

.principle span {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 900;
  color: var(--matrix-green);
  letter-spacing: 0.12em;
  padding-top: 4px;
}

.principle h3 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 18px;
}

.principle p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
 * Platform section — the product stack.
 * -------------------------------------------------------------------------- */
.split-section {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}

@media (min-width: 980px) {
  .split-section {
    grid-template-columns: 0.9fr 1.1fr;
    align-items: start;
  }
  .sticky-copy { position: sticky; top: 96px; }
}

.product-stack {
  display: grid;
  gap: 12px;
}

.product-row {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 18px;
  padding: 20px;
  align-items: start;
}

.product-row > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  background: rgba(56, 189, 248, 0.14);
  border: 1px solid rgba(56, 189, 248, 0.42);
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.product-row h3 {
  margin: 2px 0 0;
  color: var(--ink-strong);
}

.product-row p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

/* Pro section's segment grid — six cards. */
.segment-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 28px;
}

@media (max-width: 980px) { .segment-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .segment-grid { grid-template-columns: 1fr; } }

.segment-grid article {
  padding: 20px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.segment-grid article b {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  color: var(--ink-strong);
  letter-spacing: -0.005em;
}

.segment-grid article p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
 * Trust section — two side-by-side panels.
 * -------------------------------------------------------------------------- */
.trust-grid {
  grid-template-columns: 1fr;
  margin-top: 28px;
}

@media (min-width: 980px) {
  .trust-grid { grid-template-columns: 0.9fr 1.1fr 1.1fr; align-items: start; }
}

.truth-panel {
  padding: 22px;
  display: grid;
  gap: 12px;
}

.truth-panel h3 {
  margin: 0;
  color: var(--matrix-green);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 900;
}

.truth-panel.warning h3 {
  color: var(--warning);
}

.truth-panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.truth-panel li {
  position: relative;
  padding-left: 18px;
  color: var(--soft);
  font-size: 14px;
  line-height: 1.55;
}

.truth-panel li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--matrix-green);
  box-shadow: 0 0 6px var(--matrix-green);
}

.truth-panel.warning li::before {
  background: var(--warning);
  box-shadow: 0 0 6px var(--warning);
}

/* --------------------------------------------------------------------------
 * Roadmap. Four-up across, label / heading / body per article.
 * -------------------------------------------------------------------------- */
.roadmap {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 24px;
}

@media (max-width: 980px) { .roadmap { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .roadmap { grid-template-columns: 1fr; } }

.roadmap article {
  padding: 20px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.roadmap article > span {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  background: rgba(179, 128, 250, 0.14);
  border: 1px solid rgba(179, 128, 250, 0.45);
  color: var(--deep-fast);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  width: fit-content;
}

.roadmap article h3 {
  margin: 4px 0 0;
  color: var(--ink-strong);
  font-size: 18px;
}

.roadmap article p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
 * Portal grid (used on /providers/, /reports/, /support/, /app/ subpages
 * for the secondary card grid below their hero).
 * -------------------------------------------------------------------------- */
.portal-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 28px;
}

@media (max-width: 980px) { .portal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .portal-grid { grid-template-columns: 1fr; } }

.portal-card,
.support-card {
  padding: 22px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.portal-card h3,
.support-card h3 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 18px;
}

.portal-card p,
.support-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.portal-card a,
.support-card a {
  color: var(--cyan);
  text-decoration: none;
  font-weight: 800;
  border-bottom: 1px dashed rgba(56, 189, 248, 0.42);
  align-self: start;
  font-size: 13px;
}

.portal-card a:hover,
.support-card a:hover {
  border-bottom-color: var(--cyan);
}

/* --------------------------------------------------------------------------
 * Expanded public-site storytelling, alpha intake, and product graphics.
 * These sections intentionally keep the iOS night-vision DNA while adding
 * enough warmth and plain-language detail for a public company site.
 * -------------------------------------------------------------------------- */
.problem-section,
.media-section,
.signup-section {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.012), transparent 42%),
    rgba(0, 0, 0, 0.24);
}

.narrative-grid,
.feature-matrix,
.legal-doc-grid,
.signing-timeline,
.media-wall {
  display: grid;
  gap: 14px;
}

.narrative-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 28px;
}

@media (max-width: 980px) { .narrative-grid { grid-template-columns: 1fr; } }

.narrative-card,
.feature-matrix article,
.legal-doc,
.signing-timeline article,
.device-frame,
.alpha-callout,
.alpha-note,
.alpha-form {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 28%),
    var(--panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), var(--shadow-soft);
}

.narrative-card {
  min-height: 260px;
  padding: 22px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.tag,
.legal-doc span,
.signing-timeline article > span,
.system-node span,
.feature-matrix article > span {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  background: rgba(74, 222, 128, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.36);
  color: var(--matrix-green);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.narrative-card h3,
.feature-matrix h3,
.legal-doc h3,
.signing-timeline h3,
.system-node h3,
.device-frame b {
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.005em;
}

.narrative-card p,
.feature-matrix p,
.legal-doc p,
.signing-timeline p,
.system-node p,
.device-frame p,
.alpha-form p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.58;
}

.system-map {
  position: relative;
  display: grid;
  gap: 14px;
}

.system-map::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 32px;
  bottom: 32px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(56, 189, 248, 0.55), rgba(74, 222, 128, 0.55), transparent);
}

.system-node {
  position: relative;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: rgba(13, 16, 20, 0.78);
}

.system-node.focus {
  border-color: rgba(56, 189, 248, 0.42);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.08), var(--shadow-soft);
}

.system-node span {
  justify-content: center;
  height: 28px;
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.38);
  color: var(--cyan);
}

.media-wall {
  grid-template-columns: minmax(220px, 0.9fr) minmax(260px, 1.3fr) minmax(180px, 0.7fr);
  align-items: stretch;
  margin-top: 30px;
}

@media (max-width: 980px) { .media-wall { grid-template-columns: 1fr; } }

/* alpha.236 — media-wall--rich variant. Used on the homepage's
   "Product moments" section to display 6 actual SVG product mocks
   in a curated montage layout (varied tile sizes, real images
   instead of empty placeholder cards). Phone tiles are tall, the
   iPad/Pro Roster tile spans wide, the Watch is square. */
.media-wall--rich {
  display: grid;
  gap: 14px;
  margin-top: 32px;
  grid-template-columns: 1fr;
  grid-auto-flow: dense;
}
@media (min-width: 720px) {
  .media-wall--rich {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1080px) {
  .media-wall--rich {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(0, auto);
  }
  /* Mosaic spans for desktop richness */
  .media-wall--rich > .device-frame:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .media-wall--rich > .device-frame:nth-child(2) { grid-column: span 2; }
  .media-wall--rich > .device-frame:nth-child(3) { grid-column: span 2; }
  .media-wall--rich > .device-frame:nth-child(4) { grid-column: span 2; grid-row: span 2; }
  .media-wall--rich > .device-frame:nth-child(5) { grid-column: span 2; }
  .media-wall--rich > .device-frame:nth-child(6) { grid-column: span 6; grid-row: span 1; }
}
.media-wall--rich .device-frame {
  display: grid;
  gap: 0.6rem;
  padding: 14px;
  min-height: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 70%),
    var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 140ms ease, border-color 140ms ease;
  align-content: start;
}
.media-wall--rich .device-frame:hover {
  transform: translateY(-2px);
  border-color: var(--hairline-strong);
  text-decoration: none;
}
.media-wall--rich .device-frame::after { display: none; }
.media-wall--rich .device-frame img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  display: block;
  background: rgba(0, 0, 0, 0.6);
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.45));
}
.media-wall--rich .device-frame .tag {
  align-self: flex-start;
}
.media-wall--rich .device-frame p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
/* On desktop, the iPad/Pro spans 6 cols — let it dominate visually */
.media-wall--rich .ipad-frame img {
  max-height: 320px;
  object-fit: cover;
  object-position: top left;
}

/* Tag color variants for the media-wall + general use */
.tag--green   { color: var(--matrix-green); border-color: rgba(74, 222, 128, 0.42); background: rgba(74, 222, 128, 0.10); }
.tag--cyan    { color: var(--cyan);         border-color: rgba(56, 189, 248, 0.42); background: rgba(56, 189, 248, 0.10); }
.tag--purple  { color: var(--deep-fast);    border-color: rgba(179, 128, 250, 0.42); background: rgba(179, 128, 250, 0.10); }
.tag--warning { color: var(--warning);      border-color: rgba(251, 191, 36, 0.42); background: rgba(251, 191, 36, 0.10); }

.device-frame {
  position: relative;
  min-height: 340px;
  padding: 18px;
  overflow: hidden;
}

.device-frame::after {
  content: "";
  position: absolute;
  inset: auto -20% -38% 12%;
  height: 58%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.16), transparent 58%);
  pointer-events: none;
}

.phone-frame {
  border-radius: 28px;
  padding: 18px 14px;
}

.video-frame {
  min-height: 300px;
}

.watch-frame {
  min-height: 280px;
  border-radius: 34px;
  align-self: center;
}

.mock-screen {
  position: relative;
  height: calc(100% - 34px);
  margin-top: 14px;
  display: grid;
  gap: 14px;
  align-content: center;
  padding: 22px;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 30% 24%, rgba(74, 222, 128, 0.18), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)),
    #050608;
  border: 1px solid var(--hairline-strong);
  z-index: 1;
}

.dashboard-mock::before,
.clip-mock::before,
.watch-mock::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(74, 222, 128, 0.18);
  border-radius: inherit;
  background-image:
    linear-gradient(rgba(74, 222, 128, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 222, 128, 0.09) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.55;
}

.mock-screen > * {
  position: relative;
  z-index: 1;
}

.mock-rings {
  display: flex;
  gap: 12px;
  align-items: center;
}

.mock-rings i {
  width: 48px;
  aspect-ratio: 1;
  border-radius: 999px;
  border: 5px solid rgba(56, 189, 248, 0.24);
  border-top-color: var(--matrix-green);
  border-right-color: var(--cyan);
  box-shadow: 0 0 18px rgba(74, 222, 128, 0.14);
}

.mock-rings i:nth-child(2) {
  width: 62px;
  border-top-color: var(--warning);
  border-right-color: var(--deep-fast);
}

.mock-rings i:nth-child(3) {
  width: 42px;
}

.play-glyph {
  display: grid;
  place-items: center;
  width: 64px;
  aspect-ratio: 1;
  border-radius: 999px;
  background: rgba(74, 222, 128, 0.14);
  border: 1px solid rgba(74, 222, 128, 0.45);
  color: var(--matrix-green);
  font-size: 24px;
  box-shadow: 0 0 28px rgba(74, 222, 128, 0.16);
}

.alpha-callout {
  display: grid;
  gap: 22px;
  padding: clamp(24px, 5vw, 44px);
  background:
    radial-gradient(circle at 12% 20%, rgba(74, 222, 128, 0.12), transparent 32%),
    linear-gradient(135deg, rgba(56, 189, 248, 0.09), rgba(179, 128, 250, 0.08)),
    var(--panel);
}

@media (min-width: 860px) {
  .alpha-callout {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

.alpha-callout h2,
.signup-copy h2 {
  margin: 0;
}

.alpha-callout p:not(.eyebrow),
.signup-copy > p {
  margin: 12px 0 0;
  color: var(--muted);
  max-width: 72ch;
}

.alpha-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start;
}

.provider-depth .feature-matrix,
.legal-doc-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 760px) {
  .provider-depth .feature-matrix,
  .legal-doc-grid {
    grid-template-columns: 1fr;
  }
}

.feature-matrix article,
.legal-doc,
.signing-timeline article {
  padding: 20px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.feature-matrix article > span {
  color: var(--deep-fast);
  background: rgba(179, 128, 250, 0.14);
  border-color: rgba(179, 128, 250, 0.42);
}

.legal-doc-grid {
  align-items: stretch;
}

.legal-doc span {
  color: var(--warning);
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.36);
}

.signing-timeline {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 28px;
}

@media (max-width: 980px) { .signing-timeline { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .signing-timeline { grid-template-columns: 1fr; } }

.signup-shell {
  display: grid;
  gap: 28px;
}

@media (min-width: 1060px) {
  .signup-shell {
    grid-template-columns: 0.78fr 1.22fr;
    align-items: start;
  }
}

.alpha-note {
  display: grid;
  gap: 4px;
  margin-top: 22px;
  padding: 16px;
}

.alpha-note strong {
  color: var(--matrix-green);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.alpha-note span {
  color: var(--soft);
  font-size: 14px;
}

.alpha-form {
  padding: clamp(18px, 3vw, 28px);
}

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

.signup-shell,
.alpha-form,
.form-grid,
.form-grid > *,
.field,
.check-grid,
.ack-list,
.signature-gate {
  min-width: 0;
}

@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }

.field,
.check-grid label,
.ack-list label {
  display: grid;
  gap: 7px;
  color: var(--soft);
  font-size: 13px;
  font-weight: 800;
}

.field.wide {
  grid-column: 1 / -1;
}

input,
select,
textarea {
  width: 100%;
  min-height: 44px;
  padding: 11px 12px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.34);
  color: var(--ink-strong);
  font: inherit;
  letter-spacing: 0;
}

textarea {
  resize: vertical;
  min-height: 120px;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid rgba(56, 189, 248, 0.62);
  outline-offset: 2px;
  border-color: rgba(56, 189, 248, 0.62);
}

.check-grid {
  margin: 20px 0 0;
  padding: 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 720px) { .check-grid { grid-template-columns: 1fr; } }

.check-grid legend {
  padding: 0 8px;
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.check-grid label,
.ack-list label {
  grid-template-columns: 18px 1fr;
  align-items: start;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.5;
}

.check-grid input,
.ack-list input {
  width: 16px;
  min-height: 16px;
  margin: 3px 0 0;
  accent-color: var(--matrix-green);
}

.ack-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.signature-gate {
  display: grid;
  gap: 16px;
  margin-top: 20px;
  padding: 18px;
  border: 1px solid rgba(251, 191, 36, 0.28);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 12% 22%, rgba(251, 191, 36, 0.10), transparent 38%),
    rgba(251, 191, 36, 0.045);
}

@media (min-width: 780px) {
  .signature-gate {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

.signature-gate h3 {
  margin: 10px 0 0;
  color: var(--ink-strong);
  font-size: 18px;
}

.signature-name-field {
  margin-top: 1rem;
}

.signature-gate p {
  margin-top: 8px !important;
}

.disabled-button,
.disabled-button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.form-submit {
  margin-top: 20px;
}

.form-status {
  margin-top: 12px !important;
  color: var(--matrix-green) !important;
  font-weight: 800;
}

.contact-list,
.legal-links {
  display: grid;
  gap: 8px;
}

.support-subhead {
  margin-top: 20px !important;
}

.support-layout {
  display: grid;
  gap: 24px;
}

@media (min-width: 1080px) {
  .support-layout {
    grid-template-columns: 1fr 340px;
    align-items: start;
  }
}

.workflow-table {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

.workflow-row {
  display: grid;
  gap: 12px;
  grid-template-columns: 180px minmax(0, 1fr) 132px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: rgba(13, 16, 20, 0.72);
}

.workflow-row strong {
  color: var(--ink-strong);
}

.workflow-row p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.workflow-row span {
  justify-self: end;
  color: var(--matrix-green);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.utility-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.utility-link-row a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--accent);
  font-weight: 850;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.72);
}

.report-preview-card {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(280px, 1fr);
  gap: 24px;
  margin: 28px 0;
  padding: 24px;
  border: 1px solid rgba(30, 43, 32, 0.14);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(8, 125, 61, 0.09), transparent 38%),
    rgba(255, 255, 255, 0.82);
  box-shadow: 0 24px 60px rgba(30, 43, 32, 0.10);
}

.report-preview-card > div > span {
  display: inline-flex;
  margin-bottom: 14px;
  color: var(--matrix-green);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.report-preview-card ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.report-preview-card li {
  padding: 14px;
  border: 1px solid rgba(30, 43, 32, 0.10);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
}

.report-preview-card li strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink-strong);
}

.mini-cta-section {
  padding: 18px 0;
}

.mini-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px;
  border: 1px solid rgba(30, 43, 32, 0.12);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 18px 44px rgba(30, 43, 32, 0.08);
}

.mini-cta p {
  max-width: 620px;
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 850;
  line-height: 1.08;
}

.mini-cta div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 860px) {
  .workflow-row {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .workflow-row span {
    justify-self: start;
  }

  .report-preview-card,
  .mini-cta {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: flex-start;
  }
}

.faq-section {
  background: rgba(255, 255, 255, 0.012);
}

.faq-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 28px;
}

@media (max-width: 980px) { .faq-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .faq-grid { grid-template-columns: 1fr; } }

.faq-grid article {
  padding: 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.faq-grid h3 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 18px;
}

.faq-grid p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
 * Footer
 * -------------------------------------------------------------------------- */
.site-footer {
  padding: 36px 0 52px;
  border-top: 1px solid var(--hairline);
  background: rgba(0, 0, 0, 0.6);
  color: var(--muted);
  font-size: 13px;
}

.footer-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 760px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr; }
}

.footer-brand {
  font-size: 16px;
}

.site-footer p {
  margin: 8px 0 0;
  color: var(--muted);
  max-width: 36ch;
  line-height: 1.6;
}

.site-footer nav {
  display: grid;
  gap: 6px;
  align-content: start;
}

.site-footer nav a {
  color: var(--soft);
  text-decoration: none;
  font-weight: 700;
}

.site-footer nav a:hover {
  color: var(--ink-strong);
}

/* --------------------------------------------------------------------------
 * Compliance footer note (every page should append this with a div or
 * paragraph carrying class=compliance-note for the conservative claim
 * boilerplate).
 * -------------------------------------------------------------------------- */
.compliance-note {
  margin-top: 28px;
  font-size: 11px;
  line-height: 1.55;
  color: var(--faint);
}

/* --------------------------------------------------------------------------
 * alpha.236 — flow-section: how-it-works five-stage flow
 *
 * Replaces the cramped split-section + vertical-timeline that had the
 * sticky heading on the left and 5 stacked nodes on the right. The new
 * layout is: full-width centered heading + horizontal 5-column flow-grid
 * with rich icon + kicker + body + tactical signal-row per card.
 *
 * Card variants tint accents per role:
 *   .flow-card--green   matrix-green   (CAPTURE / ACT — execution)
 *   .flow-card--cyan    cyan           (INTERPRET — intelligence)
 *   .flow-card--purple  deep-fast      (SHARE — consent / provider)
 *   .flow-card--warning warning amber  (OPERATE — trust)
 *
 * The icon column at top is an inline SVG sized 32×32. The flow-stat-row
 * at the bottom of each card is a compact monospaced bullet list with
 * tinted dots — gives every card a "real instrument" feel rather than a
 * plain prose box, mirroring the iOS app's tactical chrome.
 * -------------------------------------------------------------------------- */
.flow-grid {
  display: grid;
  gap: 14px;
  margin-top: 32px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .flow-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .flow-grid { grid-template-columns: repeat(5, 1fr); } }

.flow-card {
  position: relative;
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 60%),
    var(--panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: transform 140ms ease, border-color 140ms ease;
  overflow: hidden;
}
.flow-card::after {
  /* Tactical micro-grid inside each card — same pattern the iOS
     app's command-surface chrome uses. Adds subtle texture without
     screaming. */
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(255, 255, 255, 0.025) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(255, 255, 255, 0.025) 23px 24px);
  pointer-events: none;
}
.flow-card > * { position: relative; z-index: 1; }

.flow-card:hover {
  transform: translateY(-2px);
  border-color: var(--hairline-strong);
}

.flow-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
}
.flow-icon svg { width: 20px; height: 20px; }

.flow-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.flow-kicker .flow-num {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 18px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-strong);
}

.flow-card h3 {
  margin: 4px 0 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.flow-card .flow-body {
  margin: 0;
  color: var(--soft);
  font-size: 13px;
  line-height: 1.55;
}

.flow-stat-row {
  list-style: none;
  margin: 6px 0 0;
  padding: 8px 0 0;
  border-top: 1px dashed var(--hairline-strong);
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem 0.85rem;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
}
.flow-stat-row li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.flow-stat-row .dot {
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.75;
}

/* Per-card tints */
.flow-card--green {
  border-color: rgba(74, 222, 128, 0.32);
}
.flow-card--green .flow-icon {
  background: rgba(74, 222, 128, 0.12);
  color: var(--matrix-green);
  box-shadow: 0 0 22px rgba(74, 222, 128, 0.20);
}
.flow-card--green .flow-kicker { color: var(--matrix-green); }
.flow-card--green .flow-stat-row { color: var(--matrix-green); }

.flow-card--cyan {
  border-color: rgba(56, 189, 248, 0.32);
}
.flow-card--cyan .flow-icon {
  background: rgba(56, 189, 248, 0.12);
  color: var(--cyan);
  box-shadow: 0 0 22px rgba(56, 189, 248, 0.20);
}
.flow-card--cyan .flow-kicker { color: var(--cyan); }
.flow-card--cyan .flow-stat-row { color: var(--cyan); }

.flow-card--purple {
  border-color: rgba(179, 128, 250, 0.36);
}
.flow-card--purple .flow-icon {
  background: rgba(179, 128, 250, 0.14);
  color: var(--deep-fast);
  box-shadow: 0 0 22px rgba(179, 128, 250, 0.22);
}
.flow-card--purple .flow-kicker { color: var(--deep-fast); }
.flow-card--purple .flow-stat-row { color: var(--deep-fast); }

.flow-card--warning {
  border-color: rgba(251, 191, 36, 0.34);
}
.flow-card--warning .flow-icon {
  background: rgba(251, 191, 36, 0.12);
  color: var(--warning);
  box-shadow: 0 0 22px rgba(251, 191, 36, 0.22);
}
.flow-card--warning .flow-kicker { color: var(--warning); }
.flow-card--warning .flow-stat-row { color: var(--warning); }

/* Connector arrows on desktop — visual flow cue between cards.
   Only renders when the grid is in 5-column layout. */
@media (min-width: 1080px) {
  .flow-card {
    position: relative;
  }
  .flow-card + .flow-card::before {
    content: "→";
    position: absolute;
    left: -16px;
    top: 26px;
    color: var(--faint);
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
  }
}

/* --------------------------------------------------------------------------
 * alpha.235 — legal page chrome
 *
 * Used by /legal/* static pages: a centered single-column layout with
 * a tactical eyebrow + h1 + a long-form readable body. Designed for
 * legal-text density, not marketing energy. We make sure the line
 * length is comfortable (~70ch), section headings have clear
 * hierarchy, and there's a "back to /legal/" trail at the top.
 * -------------------------------------------------------------------------- */
.legal-doc-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) var(--gutter) clamp(3rem, 6vw, 5rem);
}
.legal-doc-shell .doc-id-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.6rem;
  border-radius: var(--radius-sm);
  background: rgba(56, 189, 248, 0.10);
  border: 1px solid rgba(56, 189, 248, 0.40);
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}
.legal-doc-shell h1 {
  font-size: clamp(28px, 4.4vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin-bottom: 1rem;
}
.legal-doc-shell .doc-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--muted);
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--hairline);
}
.legal-doc-shell .doc-meta span + span::before {
  content: "  //  ";
  color: var(--faint);
}
.legal-doc-shell .doc-body {
  font-size: 15px;
  line-height: 1.62;
  color: var(--soft);
}
.legal-doc-shell .doc-body h2 {
  font-size: clamp(20px, 2.4vw, 24px);
  line-height: 1.18;
  letter-spacing: -0.005em;
  margin: 2.4rem 0 0.8rem;
  color: var(--ink-strong);
  font-weight: 800;
}
.legal-doc-shell .doc-body h3 {
  font-size: 16px;
  font-weight: 800;
  margin: 1.6rem 0 0.6rem;
  color: var(--ink-strong);
}
.legal-doc-shell .doc-body p { margin: 0 0 1rem; }
.legal-doc-shell .doc-body ul,
.legal-doc-shell .doc-body ol { padding-left: 1.5rem; margin: 0 0 1.2rem; }
.legal-doc-shell .doc-body li { margin-bottom: 0.4rem; }
.legal-doc-shell .doc-body strong { color: var(--ink-strong); }
.legal-doc-shell .doc-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 14px;
}
.legal-doc-shell .doc-body th,
.legal-doc-shell .doc-body td {
  border: 1px solid var(--hairline);
  padding: 0.5rem 0.7rem;
  text-align: left;
  vertical-align: top;
}
.legal-doc-shell .doc-body th {
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--cyan);
}
.legal-doc-shell .doc-disclaimer {
  margin: 1.5rem 0;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(251, 191, 36, 0.4);
  background: rgba(251, 191, 36, 0.06);
  border-radius: var(--radius);
  color: var(--soft);
  font-size: 13px;
  line-height: 1.5;
}
.legal-doc-shell .doc-disclaimer strong {
  display: block;
  color: var(--warning);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.legal-doc-shell .doc-trail {
  margin-bottom: 1.4rem;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
}
.legal-doc-shell .doc-trail a { color: var(--cyan); text-decoration: none; }
.legal-doc-shell .doc-trail a:hover { color: var(--ink-strong); }
.legal-doc-shell .doc-footer-cta {
  margin-top: 2.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* /legal/ index landing page */
.legal-index-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
  margin-top: 2rem;
}
@media (min-width: 720px) { .legal-index-grid { grid-template-columns: repeat(2, 1fr); } }
.legal-index-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  padding: 1.1rem;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: transform 140ms ease, border-color 140ms ease;
}
.legal-index-card:hover {
  transform: translateY(-2px);
  border-color: var(--hairline-strong);
  text-decoration: none;
}
.legal-index-card .doc-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: var(--cyan);
  padding-top: 4px;
}
.legal-index-card h3 {
  margin: 0 0 0.3rem;
  color: var(--ink-strong);
  font-size: 15px;
}
.legal-index-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

/* alpha.235 — form-status visual feedback for the alpha-application
   form. Replaces the mailto:-based UX with proper async fetch states. */
.form-status {
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  min-height: 1.2em;
}
.form-status.is-pending { color: var(--cyan); }
.form-status.is-success { color: var(--matrix-green); }
.form-status.is-error   { color: var(--danger); }

/* ==========================================================================
 * alpha.240 — "Make the website feel more like the iOS app" pass
 *
 * Per product direction 2026-05-04 ("take some more passes at jazzing up
 * the website and making it feel more like our ios app"). Three coherent
 * visual upgrades, all CSS-only except the section-marker FIBO chips
 * which need 1-line HTML touches per section eyebrow:
 *
 *   PASS 1 — Live ambient surface: rotating radar sweep beam, soft
 *            scanline drift, pulsing accent on flow-card icons,
 *            instrument-grade hover states.
 *
 *   PASS 2 — Tactical section markers: every page-section eyebrow gets
 *            an upgraded `command-marker` shell with a left-pulsing dot
 *            + monospaced FIBO_NNN chip on the right. Mirrors the iOS
 *            app's CommandSectionLabel (NativeHomeView.swift) so the
 *            website's section headings read with the same instrument
 *            grammar as the in-app surfaces.
 *
 *   PASS 3 — Chip + frame polish: tag chips render as iOS StatusPill
 *            equivalents (panelSoft surface, 6px radius, monospaced
 *            label + value), media-wall device frames lift+glow on
 *            hover with accent-tinted shadows, and a horizontal
 *            milestone-ladder strip in the platform section echoes
 *            the iOS Faster hero's extended-fast ladder.
 *
 * Everything is gated behind prefers-reduced-motion at the top of
 * the file already — animations stop without code duplication.
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * PASS 1 — radar sweep beam
 *
 * The hero radar-scope was previously a static conic gradient. This adds
 * a rotating sweep blade (a 90deg conic alpha gradient) on a separate
 * sibling layer so the underlying phase-tinted ring stays put. 18s
 * rotation matches the iOS app's gentle ambient feel (not strobing).
 * -------------------------------------------------------------------------- */
.radar-scope::before {
  content: "";
  position: absolute;
  inset: -2%;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      transparent 0deg 280deg,
      rgba(56, 189, 248, 0.0)   280deg,
      rgba(56, 189, 248, 0.18)  330deg,
      rgba(74, 222, 128, 0.42)  355deg,
      rgba(74, 222, 128, 0.0)   360deg);
  -webkit-mask:
    radial-gradient(circle, transparent 38%, black 39% 78%, transparent 79%);
          mask:
    radial-gradient(circle, transparent 38%, black 39% 78%, transparent 79%);
  animation: radar-sweep 18s linear infinite;
  pointer-events: none;
  filter: blur(0.4px);
  mix-blend-mode: screen;
}

@keyframes radar-sweep {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
 * PASS 1 — scanline drift on the hero scene
 *
 * A very low-opacity horizontal-line texture that crawls down the hero
 * over 28s. Reads as "live instrument" without screaming "CRT effect".
 * Sits behind the products (z-index of hero-scene::after is on the dim
 * mask layer; this rides on top of the dim with tight opacity).
 * -------------------------------------------------------------------------- */
.hero-scene .radar-scope ~ .hero-scanlines,
.hero-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0 3px,
    rgba(255, 255, 255, 0.025) 3px 4px
  );
  mix-blend-mode: overlay;
  animation: scanline-drift 28s linear infinite;
  opacity: 0.55;
  z-index: -1;
}

@keyframes scanline-drift {
  from { background-position: 0 0; }
  to   { background-position: 0 220px; }
}

/* --------------------------------------------------------------------------
 * PASS 1 — flow-card glow pulse
 *
 * The icon glow (box-shadow) was static. Now it gently pulses on a 3.2s
 * cycle, per-color, so each step in the flow reads as "live". Subtle
 * enough that 5 cards pulsing in unison doesn't feel like a disco —
 * the opacity range is 0.16 → 0.28.
 * -------------------------------------------------------------------------- */
@keyframes flow-icon-pulse-green {
  0%, 100% { box-shadow: 0 0 18px rgba(74, 222, 128, 0.18); }
  50%      { box-shadow: 0 0 28px rgba(74, 222, 128, 0.30); }
}
@keyframes flow-icon-pulse-cyan {
  0%, 100% { box-shadow: 0 0 18px rgba(56, 189, 248, 0.18); }
  50%      { box-shadow: 0 0 28px rgba(56, 189, 248, 0.30); }
}
@keyframes flow-icon-pulse-purple {
  0%, 100% { box-shadow: 0 0 18px rgba(179, 128, 250, 0.20); }
  50%      { box-shadow: 0 0 28px rgba(179, 128, 250, 0.32); }
}
@keyframes flow-icon-pulse-warning {
  0%, 100% { box-shadow: 0 0 18px rgba(251, 191, 36, 0.18); }
  50%      { box-shadow: 0 0 28px rgba(251, 191, 36, 0.30); }
}
.flow-card--green   .flow-icon { animation: flow-icon-pulse-green   3.2s ease-in-out infinite; }
.flow-card--cyan    .flow-icon { animation: flow-icon-pulse-cyan    3.4s ease-in-out infinite; }
.flow-card--purple  .flow-icon { animation: flow-icon-pulse-purple  3.6s ease-in-out infinite; }
.flow-card--warning .flow-icon { animation: flow-icon-pulse-warning 3.8s ease-in-out infinite; }
/* Slightly different cycle lengths so the cards don't strobe in lockstep. */

/* PASS 1 — flow-card hover state upgrade.
   The previous hover only nudged y by 2px + brightened the border.
   New: also tint the card's background with the card's accent color
   (very subtle) and bump the icon glow to its peak. */
.flow-card {
  /* Wider transition surface so the new hover lands smoothly. */
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    background-color 220ms ease;
}
.flow-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55);
}
.flow-card--green:hover {
  border-color: rgba(74, 222, 128, 0.55);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(74, 222, 128, 0.10);
}
.flow-card--cyan:hover {
  border-color: rgba(56, 189, 248, 0.55);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(56, 189, 248, 0.10);
}
.flow-card--purple:hover {
  border-color: rgba(179, 128, 250, 0.55);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(179, 128, 250, 0.10);
}
.flow-card--warning:hover {
  border-color: rgba(251, 191, 36, 0.55);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(251, 191, 36, 0.10);
}

/* --------------------------------------------------------------------------
 * PASS 2 — tactical section markers
 *
 * The iOS app's CommandSectionLabel renders as:
 *   [•] EYEBROW                                FIBO_233
 *
 * The website's section eyebrows used to be just a left-aligned text
 * line with a leading dot. We upgrade them to a full marker row that
 * carries an FIBO chip on the right end. Pure additive — works
 * alongside existing `.eyebrow` styling because we wrap the eyebrow
 * inside `.command-marker` and add a sibling `.fibo-code` span.
 *
 * If a section heading doesn't include a `.command-marker` wrapper,
 * the existing eyebrow rendering is preserved as a fallback.
 * -------------------------------------------------------------------------- */
.command-marker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 6px 10px 6px 6px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(180deg, rgba(56, 189, 248, 0.05), transparent 60%),
    var(--panel-soft);
  max-width: fit-content;
  position: relative;
  overflow: hidden;
}
.command-marker::before {
  /* Pulsing tactical dot at the leftmost position. */
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: var(--matrix-green);
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.6);
  animation: ticker-pulse 1.6s ease-in-out infinite;
}
.command-marker .eyebrow {
  margin: 0;
  padding: 0;
  border: 0;
}
.command-marker .eyebrow::before {
  /* Suppress the eyebrow's built-in dot — the marker has its own. */
  display: none;
}
.command-marker .fibo-code {
  margin-left: auto;
  padding: 3px 6px;
  border-radius: 3px;
  background: rgba(56, 189, 248, 0.12);
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
}
.command-marker .marker-tag {
  /* Optional middle pill — used on a few sections to surface a
     status word like "ACTIVE" or "ROADMAP". */
  margin: 0;
  padding: 3px 7px;
  border-radius: 3px;
  background: rgba(74, 222, 128, 0.15);
  color: var(--matrix-green);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.command-marker--cyan::before    { background: var(--cyan);        box-shadow: 0 0 12px rgba(56, 189, 248, 0.7); }
.command-marker--purple::before  { background: var(--deep-fast);   box-shadow: 0 0 12px rgba(179, 128, 250, 0.7); }
.command-marker--warning::before { background: var(--warning);     box-shadow: 0 0 12px rgba(251, 191, 36, 0.7); }
.command-marker--green::before   { background: var(--matrix-green); box-shadow: 0 0 12px rgba(74, 222, 128, 0.7); }

/* --------------------------------------------------------------------------
 * PASS 3 — tag chip styling matches iOS StatusPill
 *
 * The narrative-card uses `<span class="tag">` for category labels.
 * Previously rendered as a generic capsule; now matches the iOS app's
 * monospaced StatusPill on panelSoft surface with sharp 4px corners.
 * Keeps the existing `tag--green / tag--cyan / tag--warning / tag--purple`
 * variants so any HTML using them keeps working with new colors.
 * -------------------------------------------------------------------------- */
.tag,
.narrative-card .tag,
.device-frame .tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--panel-soft);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--soft);
  border: 1px solid var(--hairline);
}
.tag--green   { color: var(--matrix-green); background: rgba(74, 222, 128, 0.14); border-color: rgba(74, 222, 128, 0.28); }
.tag--cyan    { color: var(--cyan);         background: rgba(56, 189, 248, 0.14); border-color: rgba(56, 189, 248, 0.28); }
.tag--purple  { color: var(--deep-fast);    background: rgba(179, 128, 250, 0.14); border-color: rgba(179, 128, 250, 0.32); }
.tag--warning { color: var(--warning);      background: rgba(251, 191, 36, 0.14); border-color: rgba(251, 191, 36, 0.30); }

/* --------------------------------------------------------------------------
 * PASS 3 — media-wall device frame hover lift
 *
 * Previously the frames were static. Now they:
 *   - Lift 4px on hover
 *   - Add an accent-tinted outer glow per tag color
 *   - Subtle scale-in on the SVG image
 * -------------------------------------------------------------------------- */
.media-wall--rich .device-frame {
  transition:
    transform 240ms ease,
    box-shadow 240ms ease,
    border-color 240ms ease;
}
.media-wall--rich .device-frame img {
  transition: transform 320ms ease;
}
.media-wall--rich .device-frame:hover {
  transform: translateY(-4px);
}
.media-wall--rich .device-frame:hover img {
  transform: scale(1.02);
}
/* Per-tag accent glow on hover. The :has() selector gates the glow on
   the tag class so the same hover rule colors itself contextually. */
.media-wall--rich .device-frame:has(.tag--green):hover {
  box-shadow: 0 26px 48px rgba(0, 0, 0, 0.65),
              0 0 0 1px rgba(74, 222, 128, 0.32);
  border-color: rgba(74, 222, 128, 0.42);
}
.media-wall--rich .device-frame:has(.tag--cyan):hover {
  box-shadow: 0 26px 48px rgba(0, 0, 0, 0.65),
              0 0 0 1px rgba(56, 189, 248, 0.32);
  border-color: rgba(56, 189, 248, 0.42);
}
.media-wall--rich .device-frame:has(.tag--purple):hover {
  box-shadow: 0 26px 48px rgba(0, 0, 0, 0.65),
              0 0 0 1px rgba(179, 128, 250, 0.36);
  border-color: rgba(179, 128, 250, 0.46);
}
.media-wall--rich .device-frame:has(.tag--warning):hover {
  box-shadow: 0 26px 48px rgba(0, 0, 0, 0.65),
              0 0 0 1px rgba(251, 191, 36, 0.32);
  border-color: rgba(251, 191, 36, 0.42);
}

/* --------------------------------------------------------------------------
 * PASS 3 — milestone ladder strip
 *
 * A horizontal echo of the iOS Faster hero's extended-fast ladder. Six
 * cells: 12h / 16h / 18h DONE / 24h ACTIVE / 36h NEXT / 48h. Lives in
 * `.milestone-ladder` and uses subdued purple for the future cells +
 * matrix-green for done + warning amber for active. Pure CSS — purely
 * decorative until/unless wired to a real fasting state.
 *
 * Drops in anywhere by adding:
 *
 *   <div class="milestone-ladder" aria-hidden="true">
 *     <span class="ladder-cell ladder-cell--done"><b>12h</b><i>FED</i></span>
 *     <span class="ladder-cell ladder-cell--done"><b>16h</b><i>SHIFT</i></span>
 *     <span class="ladder-cell ladder-cell--done"><b>18h</b><i>BURN</i></span>
 *     <span class="ladder-cell ladder-cell--active"><b>24h</b><i>DEEP</i></span>
 *     <span class="ladder-cell"><b>36h</b><i>HGH</i></span>
 *     <span class="ladder-cell"><b>48h</b><i>RESET</i></span>
 *   </div>
 * -------------------------------------------------------------------------- */
.milestone-ladder {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin: 18px 0 0;
  padding: 8px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(180deg, rgba(179, 128, 250, 0.04), transparent 60%),
    var(--panel);
  font-family: var(--font-mono);
}
.ladder-cell {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  padding: 8px 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hairline);
  text-align: center;
  color: var(--faint);
}
.ladder-cell b {
  font-size: 14px;
  font-weight: 900;
  font-style: normal;
  letter-spacing: -0.01em;
  color: var(--soft);
}
.ladder-cell i {
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
}
.ladder-cell--done {
  background: rgba(74, 222, 128, 0.10);
  border-color: rgba(74, 222, 128, 0.32);
}
.ladder-cell--done b { color: var(--matrix-green); }
.ladder-cell--done i { color: var(--matrix-green); opacity: 0.85; }
.ladder-cell--active {
  background: rgba(251, 191, 36, 0.14);
  border-color: rgba(251, 191, 36, 0.45);
  box-shadow: 0 0 18px rgba(251, 191, 36, 0.20);
  animation: ladder-pulse 2.6s ease-in-out infinite;
}
.ladder-cell--active b { color: var(--warning); }
.ladder-cell--active i { color: var(--warning); }
@keyframes ladder-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(251, 191, 36, 0.16); }
  50%      { box-shadow: 0 0 22px rgba(251, 191, 36, 0.32); }
}
@media (max-width: 640px) {
  .milestone-ladder {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================================================
 * alpha.241 — "go even harder, mobile-first" jazz pass
 *
 * Per product directions 2026-05-04:
 *   "jazz it all and go even harder than this, this is too soft on the
 *    jazz an pizazz"
 *   "most people will be viewing this on their phones... we really need
 *    to keep both the mobile and desktop web app in lock step with each
 *    other, but lets go much harder on the mobile phone experience"
 *
 * Eight live surfaces, all mobile-tuned first then desktop-extended:
 *
 *   A. Top system-status mini-bar (sticky on mobile only) — tactical
 *      ribbon above the nav with pulsing dot + monospaced live values.
 *   B. Sticky bottom command bar — rotating system-status lines, fixed
 *      to bottom. Respects safe-area-inset on iOS notched devices.
 *   C. Hero corner-bracket frame ([ ]) — animated tactical brackets
 *      drawn at the four corners of the hero. Mobile-prominent.
 *   D. Animated H1 gradient sweep — matrix-green → cyan → purple
 *      gradient ribbon sweeps across the headline text continuously.
 *   E. Conic-gradient rotating border-trace on flow cards — accent
 *      glow rotates around the card edge, gives each card a "live
 *      instrument" border. Bigger on mobile (more prominent).
 *   F. Section divider strips — animated horizontal scan strip between
 *      sections. Reads like a TV signal between channel frames.
 *   G. Per-section accent washes — subtle phase-tinted gradient stripe
 *      anchored to the top of every section so the page reads as
 *      multiple instrument panels stacked, not one wall of black.
 *   H. Mobile-only product carousel — converts the hero-mobile-strip
 *      into a horizontal snap-scroll panel with dot-indicator pagination.
 *
 * Plus polish:
 *   - Reveal-on-scroll classes (hooked from site.js)
 *   - Bigger, bolder hero ticker on mobile (wraps to 2 rows when crowded)
 *   - Touch-active pressed states on cards (tactile feedback)
 *   - Live counter chip under the milestone-ladder active cell
 *   - Bigger section markers on mobile
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * A. Top system-status mini-bar
 *
 * Mobile-only. Sticks to the top of the viewport above the nav with a
 * thin ribbon: [pulsing dot] CORE · LIVE · v1.1-alpha.241
 * Reads the way the iOS app's top status row reads — tactical, monospaced,
 * one line.
 * -------------------------------------------------------------------------- */
.command-top-bar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  padding: 4px 14px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.94), rgba(0, 0, 0, 0.78)),
    linear-gradient(90deg,
      rgba(74, 222, 128, 0.10) 0%,
      rgba(56, 189, 248, 0.10) 50%,
      rgba(179, 128, 250, 0.10) 100%);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--soft);
}
.command-top-bar .top-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  margin-right: 6px;
  background: var(--matrix-green);
  box-shadow: 0 0 10px var(--matrix-green);
  animation: ticker-pulse 1.2s ease-in-out infinite;
  vertical-align: 1px;
}
.command-top-bar .top-key {
  color: rgba(255, 255, 255, 0.55);
}
.command-top-bar .top-val {
  color: var(--matrix-green);
  text-shadow: 0 0 8px rgba(74, 222, 128, 0.42);
}
.command-top-bar .top-sep {
  color: var(--faint);
  margin: 0 0.4rem;
}
@media (max-width: 900px) {
  .command-top-bar {
    display: block;
  }
}

/* --------------------------------------------------------------------------
 * B. Sticky bottom command bar
 *
 * Live-feel ribbon at the bottom. Rotates between 3 status lines on a
 * 4.2s loop (JS handles the active-class flip). On mobile, respects
 * safe-area-inset-bottom so it sits above the home-bar pill.
 * -------------------------------------------------------------------------- */
.command-bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0)) 16px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.96));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--hairline-strong);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
}
.command-bottom-bar .command-bar-track {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 22px;
  max-width: var(--max);
  margin: 0 auto;
}
.command-bottom-bar .command-bar-line {
  grid-column: 1 / 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 380ms ease, transform 380ms ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.command-bottom-bar .command-bar-line.is-active {
  opacity: 1;
  transform: translateY(0);
}
.command-bottom-bar .bar-dot {
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--matrix-green);
  box-shadow: 0 0 8px var(--matrix-green);
  animation: ticker-pulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
.command-bottom-bar .bar-dot--cyan    { background: var(--cyan);        box-shadow: 0 0 8px var(--cyan); }
.command-bottom-bar .bar-dot--purple  { background: var(--deep-fast);   box-shadow: 0 0 8px var(--deep-fast); }
.command-bottom-bar .bar-dot--warning { background: var(--warning);     box-shadow: 0 0 8px var(--warning); }
.command-bottom-bar .bar-key {
  color: rgba(255, 255, 255, 0.55);
}
.command-bottom-bar .bar-val {
  color: var(--ink-strong);
}
.command-bottom-bar .bar-sep {
  color: var(--faint);
}
/* Make space at the bottom of <body> so the fixed bar doesn't cover
   the footer / form action buttons. */
body {
  padding-bottom: calc(40px + env(safe-area-inset-bottom, 0));
}
@media (max-width: 480px) {
  .command-bottom-bar {
    font-size: 9.5px;
    padding-left: 12px;
    padding-right: 12px;
  }
  body {
    padding-bottom: calc(46px + env(safe-area-inset-bottom, 0));
  }
}

/* --------------------------------------------------------------------------
 * C. Hero corner-bracket frame
 *
 * Four animated tactical brackets at the corners of the hero. Each
 * bracket is built from two ::before/::after-style divs (top + side
 * lines per corner). Pure CSS, no SVG. Brackets fade-in on page load
 * and pulse subtly thereafter.
 *
 * Mobile-priority: brackets are 28px arms on mobile (visible without
 * being intrusive), 44px on desktop.
 * -------------------------------------------------------------------------- */
.hero-brackets {
  position: absolute;
  inset: 12px;
  pointer-events: none;
  z-index: 2;
}
.hero-brackets::before,
.hero-brackets::after,
.hero-brackets > .br-tr,
.hero-brackets > .br-br {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  border-color: rgba(56, 189, 248, 0.65);
  border-style: solid;
  animation: brackets-pulse 3.2s ease-in-out infinite;
}
.hero-brackets::before {
  top: 0;
  left: 0;
  border-width: 1.5px 0 0 1.5px;
}
.hero-brackets::after {
  bottom: 0;
  left: 0;
  border-width: 0 0 1.5px 1.5px;
}
.hero-brackets .br-tr {
  top: 0;
  right: 0;
  border-width: 1.5px 1.5px 0 0;
}
.hero-brackets .br-br {
  bottom: 0;
  right: 0;
  border-width: 0 1.5px 1.5px 0;
}
@keyframes brackets-pulse {
  0%, 100% {
    border-color: rgba(56, 189, 248, 0.42);
    filter: drop-shadow(0 0 2px rgba(56, 189, 248, 0.20));
  }
  50% {
    border-color: rgba(74, 222, 128, 0.85);
    filter: drop-shadow(0 0 8px rgba(74, 222, 128, 0.42));
  }
}
@media (min-width: 720px) {
  .hero-brackets::before,
  .hero-brackets::after,
  .hero-brackets > .br-tr,
  .hero-brackets > .br-br {
    width: 44px;
    height: 44px;
  }
}

/* --------------------------------------------------------------------------
 * D. Animated H1 gradient sweep
 *
 * The headline gets a moving multi-stop gradient sweep — matrix-green
 * to cyan to deep-fast purple — that drifts horizontally on a 6s loop.
 * Mask is `background-clip: text` so the gradient lives inside the
 * letter shapes only.
 * -------------------------------------------------------------------------- */
.hero h1,
h1#hero-title {
  background: linear-gradient(
    100deg,
    #ffffff 0%,
    #ffffff 32%,
    var(--matrix-green) 46%,
    var(--cyan) 56%,
    var(--deep-fast) 64%,
    #ffffff 76%,
    #ffffff 100%
  );
  background-size: 220% 100%;
  background-position: 0% 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  animation: h1-sweep 7s ease-in-out infinite;
}
@keyframes h1-sweep {
  0%   { background-position: 100% 0; }
  100% { background-position: -50% 0; }
}

/* --------------------------------------------------------------------------
 * E. Conic-gradient rotating border-trace on flow cards
 *
 * Each flow-card gets a rotating conic gradient on a pseudo-layer behind
 * the card's actual border. The rotating bright sliver passes around the
 * 4 edges making it read as a "live" border.
 *
 * On mobile the trace is more prominent (2px effective width) so users
 * actually see it on small screens.
 * -------------------------------------------------------------------------- */
.flow-card {
  position: relative;
  isolation: isolate;
}
.flow-card::before {
  /* The rotating gradient ring. Sits BEHIND the card's content
     (z-index -1 on the pseudo so the .flow-card::after grid still
     overlays correctly), inset by -1px so its edge bleeds out as
     the visible trace. */
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--radius) + 1px);
  background: conic-gradient(
    from 0deg,
    rgba(74, 222, 128, 0.0) 0deg,
    rgba(74, 222, 128, 0.0) 270deg,
    rgba(74, 222, 128, 0.95) 340deg,
    rgba(56, 189, 248, 0.0) 360deg
  );
  z-index: -1;
  animation: flow-trace-spin 5.6s linear infinite;
  opacity: 0.6;
  filter: blur(0.5px);
}
.flow-card--green::before {
  background: conic-gradient(
    from 0deg,
    rgba(74, 222, 128, 0.0) 270deg,
    rgba(74, 222, 128, 0.95) 340deg,
    rgba(74, 222, 128, 0.0) 360deg
  );
}
.flow-card--cyan::before {
  background: conic-gradient(
    from 0deg,
    rgba(56, 189, 248, 0.0) 270deg,
    rgba(56, 189, 248, 0.95) 340deg,
    rgba(56, 189, 248, 0.0) 360deg
  );
}
.flow-card--purple::before {
  background: conic-gradient(
    from 0deg,
    rgba(179, 128, 250, 0.0) 270deg,
    rgba(179, 128, 250, 0.98) 340deg,
    rgba(179, 128, 250, 0.0) 360deg
  );
}
.flow-card--warning::before {
  background: conic-gradient(
    from 0deg,
    rgba(251, 191, 36, 0.0) 270deg,
    rgba(251, 191, 36, 0.95) 340deg,
    rgba(251, 191, 36, 0.0) 360deg
  );
}
@keyframes flow-trace-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (max-width: 720px) {
  .flow-card::before { opacity: 0.85; filter: blur(0.2px); }
}

/* --------------------------------------------------------------------------
 * F. Section divider strips
 *
 * A thin animated horizontal scan-strip rendered between sections. Three
 * variants (green / cyan / purple) so different transitions read
 * differently.
 *
 * Drop-in markup:
 *   <div class="section-divider section-divider--cyan"></div>
 * -------------------------------------------------------------------------- */
.section-divider {
  height: 22px;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 60%),
    var(--command-deep);
}
.section-divider::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 22px,
    rgba(56, 189, 248, 0.10) 22px 23px
  );
  animation: divider-scan 3.4s linear infinite;
}
.section-divider::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(74, 222, 128, 0.0) 20%,
    rgba(74, 222, 128, 0.42) 50%,
    rgba(74, 222, 128, 0.0) 80%,
    transparent 100%
  );
  animation: divider-pulse 3.4s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes divider-scan {
  from { background-position: 0 0; }
  to   { background-position: 200px 0; }
}
@keyframes divider-pulse {
  0%, 100% { opacity: 0.32; }
  50%      { opacity: 0.78; }
}
.section-divider--cyan::after {
  background: linear-gradient(90deg, transparent 0%, rgba(56, 189, 248, 0.0) 20%, rgba(56, 189, 248, 0.55) 50%, rgba(56, 189, 248, 0.0) 80%, transparent 100%);
}
.section-divider--purple::after {
  background: linear-gradient(90deg, transparent 0%, rgba(179, 128, 250, 0.0) 20%, rgba(179, 128, 250, 0.55) 50%, rgba(179, 128, 250, 0.0) 80%, transparent 100%);
}
.section-divider--warning::after {
  background: linear-gradient(90deg, transparent 0%, rgba(251, 191, 36, 0.0) 20%, rgba(251, 191, 36, 0.55) 50%, rgba(251, 191, 36, 0.0) 80%, transparent 100%);
}

/* --------------------------------------------------------------------------
 * G. Per-section accent washes
 *
 * Each top-level <section> gets a 1px-tall accent bar at top + a soft
 * gradient halo so reading the page feels like flipping between
 * instrument panels rather than scrolling one infinite black wall.
 * -------------------------------------------------------------------------- */
.access-band,
.story-section,
.problem-section,
.system-section,
.flow-section,
.media-section,
.platform-section,
.pro-section,
.alpha-section,
.trust-section,
.roadmap-section {
  position: relative;
}
.access-band::before,
.story-section::before,
.problem-section::before,
.system-section::before,
.flow-section::before,
.media-section::before,
.platform-section::before,
.pro-section::before,
.alpha-section::before,
.trust-section::before,
.roadmap-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--matrix-green) 22%,
    var(--cyan) 50%,
    var(--deep-fast) 78%,
    transparent 100%);
  opacity: 0.42;
}
.story-section::before     { background: linear-gradient(90deg, transparent, rgba(74, 222, 128, 0.55), transparent); }
.problem-section::before   { background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.55), transparent); }
.system-section::before,
.flow-section::before      { background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.55), transparent); }
.media-section::before     { background: linear-gradient(90deg, transparent, rgba(179, 128, 250, 0.55), transparent); }
.platform-section::before  { background: linear-gradient(90deg, transparent, rgba(74, 222, 128, 0.55), transparent); }
.pro-section::before       { background: linear-gradient(90deg, transparent, rgba(179, 128, 250, 0.55), transparent); }
.alpha-section::before     { background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.55), transparent); }
.trust-section::before     { background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.55), transparent); }
.roadmap-section::before   { background: linear-gradient(90deg, transparent, rgba(74, 222, 128, 0.55), transparent); }

/* Faint wash halo above each section's headline area. */
.access-band,
.story-section,
.problem-section,
.system-section,
.flow-section,
.media-section,
.platform-section,
.pro-section,
.alpha-section,
.trust-section,
.roadmap-section {
  background-image: radial-gradient(
    ellipse 60% 32% at 50% 0%,
    rgba(56, 189, 248, 0.05),
    transparent 60%
  );
}
.story-section     { background-image: radial-gradient(ellipse 60% 32% at 50% 0%, rgba(74, 222, 128, 0.05), transparent 60%); }
.problem-section   { background-image: radial-gradient(ellipse 60% 32% at 50% 0%, rgba(251, 191, 36, 0.05), transparent 60%); }
.media-section     { background-image: radial-gradient(ellipse 60% 32% at 50% 0%, rgba(179, 128, 250, 0.06), transparent 60%); }
.pro-section       { background-image: radial-gradient(ellipse 60% 32% at 50% 0%, rgba(179, 128, 250, 0.06), transparent 60%); }
.alpha-section     { background-image: radial-gradient(ellipse 60% 32% at 50% 0%, rgba(251, 191, 36, 0.06), transparent 60%); }

/* --------------------------------------------------------------------------
 * H. Mobile-only product carousel
 *
 * Convert the existing .hero-mobile-strip into a horizontal snap-scroll
 * panel on phones. Six cells (the 6 SVG mocks) instead of three, so
 * users can swipe through the full product story while their thumb is
 * already on the screen.
 *
 * The .hero-mobile-strip currently renders 3 mocks in a 2-up grid
 * (alpha.233). We KEEP that as the default and add a new carousel
 * variant `.hero-mobile-carousel` that pages can opt into. Default
 * homepage gets the carousel.
 * -------------------------------------------------------------------------- */
.hero-mobile-carousel {
  display: none;
  position: relative;
  width: 100%;
  margin-top: 18px;
  padding-bottom: 8px;
}
@media (max-width: 719px) {
  .hero-mobile-carousel {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding: 16px;
    padding: 0 16px 12px;
    /* Hide scrollbar — it's a swipe surface */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .hero-mobile-carousel::-webkit-scrollbar { display: none; }

  .hero-mobile-carousel .carousel-card {
    flex: 0 0 78%;
    scroll-snap-align: center;
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius);
    background:
      linear-gradient(180deg, rgba(56, 189, 248, 0.06), transparent 60%),
      var(--panel);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.55);
    color: var(--soft);
    text-decoration: none;
  }
  .hero-mobile-carousel .carousel-card img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    background: var(--command-deep);
  }
  .hero-mobile-carousel .carousel-tag {
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--matrix-green);
    padding: 3px 6px;
    border: 1px solid rgba(74, 222, 128, 0.32);
    background: rgba(74, 222, 128, 0.10);
    border-radius: 3px;
  }
  .hero-mobile-carousel .carousel-card p {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--muted);
  }
  /* Per-card tag color variants (matches media wall) */
  .hero-mobile-carousel .carousel-tag--cyan    { color: var(--cyan);      border-color: rgba(56, 189, 248, 0.32); background: rgba(56, 189, 248, 0.10); }
  .hero-mobile-carousel .carousel-tag--purple  { color: var(--deep-fast); border-color: rgba(179, 128, 250, 0.36); background: rgba(179, 128, 250, 0.10); }
  .hero-mobile-carousel .carousel-tag--warning { color: var(--warning);   border-color: rgba(251, 191, 36, 0.34); background: rgba(251, 191, 36, 0.10); }

  /* Hide the OLD 3-card grid strip when the new carousel is present, so
     mobile only renders one product showcase. */
  .hero-home .hero-mobile-strip { display: none; }
}

/* --------------------------------------------------------------------------
 * Mobile-only section-marker upgrade — bigger, more prominent
 * -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .command-marker {
    padding: 8px 12px 8px 8px;
    gap: 10px;
    margin-bottom: 14px;
    background:
      linear-gradient(180deg, rgba(56, 189, 248, 0.08), rgba(0, 0, 0, 0.5));
    border-color: var(--hairline-strong);
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.06), 0 6px 16px rgba(0, 0, 0, 0.45);
  }
  .command-marker::before {
    width: 9px;
    height: 9px;
  }
  .command-marker .eyebrow {
    font-size: 11px;
    letter-spacing: 0.14em;
  }
  .command-marker .fibo-code {
    font-size: 9.5px;
  }
  .hero-stats-ticker {
    /* Bigger, more prominent on mobile */
    margin-bottom: 1.6rem;
    padding: 0.65rem 0.85rem;
    font-size: 11.5px;
    background:
      linear-gradient(180deg, rgba(74, 222, 128, 0.08), rgba(0, 0, 0, 0.55));
    border-color: rgba(74, 222, 128, 0.18);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
  }
  .milestone-ladder {
    padding: 10px;
    gap: 8px;
  }
  .ladder-cell {
    padding: 10px 4px;
  }
  .ladder-cell b { font-size: 16px; }
  .ladder-cell i { font-size: 9.5px; }
}

/* --------------------------------------------------------------------------
 * Live counter chip under milestone-ladder active cell
 * -------------------------------------------------------------------------- */
.ladder-cell .ladder-live {
  display: block;
  margin-top: 6px;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.06em;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(251, 191, 36, 0.45);
  color: var(--warning);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}

/* --------------------------------------------------------------------------
 * Touch-active pressed states — tactile feedback on tap
 * -------------------------------------------------------------------------- */
.access-tile,
.flow-card,
.principle,
.product-row,
.narrative-card,
.device-frame,
.button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.access-tile:active,
.flow-card:active,
.principle:active,
.narrative-card:active,
.device-frame:active {
  transform: scale(0.985);
  transition: transform 80ms ease-out;
}

/* --------------------------------------------------------------------------
 * Reveal-on-scroll — fade-and-rise transitions
 *
 * Default: opacity 0, translateY 24px. JS adds .is-revealed when the
 * element scrolls into view. CSS handles the actual transition and
 * stagger delay, keeping the site compatible with a strict CSP.
 *
 * Gracefully degrades: if JS doesn't load (or reduced motion), a quick
 * timeout in JS adds the class anyway and the element appears.
 * -------------------------------------------------------------------------- */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 620ms ease, transform 620ms ease;
  will-change: opacity, transform;
}
.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 540ms ease, transform 540ms ease;
}
.reveal-stagger > :nth-child(2) {
  transition-delay: 90ms;
}
.reveal-stagger > :nth-child(3) {
  transition-delay: 180ms;
}
.reveal-stagger > :nth-child(4) {
  transition-delay: 270ms;
}
.reveal-stagger > :nth-child(5) {
  transition-delay: 360ms;
}
.reveal-stagger > :nth-child(6) {
  transition-delay: 450ms;
}
.reveal-stagger > :nth-child(7) {
  transition-delay: 540ms;
}
.reveal-stagger > :nth-child(8) {
  transition-delay: 630ms;
}
.reveal-stagger > *.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
 * alpha.241 — LIGHT THEME OVERRIDES
 *
 * The variable swap at :root takes care of every var()-driven surface
 * automatically — panels go white, text goes dark, hairlines flip. This
 * block handles selectors that hardcode rgba() values for legacy reasons
 * (most are pre-alpha.224 base CSS that pre-dated the token system).
 *
 * Light theme is the DEFAULT, so these rules use the bare selector. The
 * dark-theme overrides ride in `[data-theme="dark"]` in the dedicated
 * block farther down.
 *
 * Mobile-first focus: every override rule gets eyeballed at 375px wide
 * before being scaled up. Investors on Mac/PC see the same vocabulary,
 * just with more breathing room.
 * ========================================================================== */

/* --- Hero scene + radar scope ---------------------------------------------
 * In dark theme the hero scene used a heavy 92%-black gradient mask to
 * dim the radar enough that the white headline sat readably on top.
 * In light theme the dim mask becomes a SOFT white wash so the radar's
 * vivid colors stay vibrant but don't compete with body copy.
 * ------------------------------------------------------------------------ */
.hero {
  border-bottom: 1px solid var(--hairline);
}
.hero::before {
  background:
    radial-gradient(circle at 28% 32%, rgba(34, 197, 94, 0.18), transparent 48%),
    radial-gradient(circle at 78% 60%, rgba(14, 165, 233, 0.20), transparent 50%);
}
/* alpha.243 — radar wheel "pop" pass for light mode.
   Per product direction ("on the light mode the color wheel is too
   washed out"). Three changes:
   1. Reduce the heavy white wash on the right side of .hero-scene::after
      so the wheel reads at full saturation. The 94%-opacity left edge
      stays so headline text is readable.
   2. Re-paint the radar conic gradient with the vivid `*-pop` palette
      variants instead of the deeper `*` text-on-white variants. The
      wheel is decoration, so it should sing — not pull text-grade
      contrast duty.
   3. Beef up the colored drop-shadow + outer glow so the wheel
      visibly floats off the white surface. */
.hero-scene::after {
  background:
    linear-gradient(90deg,
      rgba(246, 248, 252, 0.94) 0%,
      rgba(246, 248, 252, 0.74) 36%,
      rgba(246, 248, 252, 0.06) 64%,
      rgba(246, 248, 252, 0.20) 100%),
    linear-gradient(180deg, rgba(246, 248, 252, 0.04), rgba(246, 248, 252, 0.20));
}
.radar-scope {
  background:
    conic-gradient(from -90deg,
      var(--matrix-green-pop) 0deg 132deg,
      var(--warning-pop)      132deg 220deg,
      var(--deep-fast-pop)    220deg 360deg);
  opacity: 1;
  filter:
    saturate(1.18)
    drop-shadow(0 12px 28px rgba(34, 197, 94, 0.32))
    drop-shadow(0 0 64px rgba(124, 58, 237, 0.22))
    drop-shadow(0 0 110px rgba(14, 165, 233, 0.18));
  border-color: rgba(2, 132, 199, 0.55);
  box-shadow:
    inset 0 0 80px rgba(2, 132, 199, 0.18),
    0 0 90px rgba(34, 197, 94, 0.22);
}
/* Stronger ring borders in light mode so the structure reads
   against the saturated wheel. */
.ring-one   { border-color: rgba(2, 132, 199, 0.62); }
.ring-two   { border-color: rgba(34, 197, 94, 0.58); }
.ring-three {
  border-color: rgba(124, 58, 237, 0.72);
  background: rgba(124, 58, 237, 0.16);
  box-shadow: 0 0 32px rgba(124, 58, 237, 0.36);
}
.scope-cross.x {
  background: linear-gradient(90deg, transparent, rgba(2, 132, 199, 0.78), transparent);
}
.scope-cross.y {
  background: linear-gradient(180deg, transparent, rgba(2, 132, 199, 0.78), transparent);
}
.scope-f {
  color: #ffffff;
  text-shadow:
    0 0 6px  rgba(0, 0, 0, 0.32),
    0 0 32px rgba(2, 132, 199, 0.45),
    0 0 64px rgba(34, 197, 94, 0.22);
}

/* --- Glass panels --------------------------------------------------------- */
.glass-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(250, 251, 254, 0.92)),
    radial-gradient(circle at top right, rgba(2, 132, 199, 0.10), transparent 56%);
  border-color: var(--hairline-strong);
  box-shadow: var(--shadow);
}
.glass-panel::after {
  background:
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(11, 18, 32, 0.04) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(11, 18, 32, 0.04) 23px 24px);
}

/* --- Hero stats ticker ---------------------------------------------------- */
.hero-stats-ticker {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(250, 251, 254, 0.95));
  border-color: var(--hairline-strong);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
}
.hero-stats-ticker .stat-key { color: var(--muted); }
.hero-stats-ticker .stat-val { color: var(--ink-strong); }
.hero-stats-ticker .stat-val--green {
  color: var(--matrix-green);
  text-shadow: 0 0 8px rgba(34, 197, 94, 0.28);
}
.hero-stats-ticker .stat-sep { color: var(--faint); }

/* --- Buttons -------------------------------------------------------------- */
.button.primary {
  background: var(--matrix-green-pop);
  color: #ffffff;
  box-shadow: 0 8px 22px rgba(34, 197, 94, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.button.primary:hover {
  background: var(--matrix-green);
  box-shadow: 0 10px 28px rgba(34, 197, 94, 0.42);
}
.button.secondary {
  background: var(--panel);
  color: var(--ink-strong);
  border: 1px solid var(--hairline-strong);
}
.button.secondary:hover {
  background: var(--panel-soft);
  border-color: var(--matrix-green-pop);
}
.button.quiet {
  background: transparent;
  color: var(--soft);
  border: 1px solid var(--hairline);
}
.button.quiet:hover {
  background: var(--panel-soft);
  color: var(--ink-strong);
}
.nav-cta {
  background: var(--matrix-green-pop);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(34, 197, 94, 0.30);
}
.nav-cta:hover {
  background: var(--matrix-green);
}

/* --- Eyebrow + panel-label ----------------------------------------------- */
.eyebrow,
.panel-label {
  color: var(--cyan);
}
.eyebrow::before {
  background: var(--cyan-pop);
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.5);
}

/* --- Command marker ------------------------------------------------------ */
.command-marker {
  background:
    linear-gradient(180deg, rgba(2, 132, 199, 0.06), rgba(255, 255, 255, 0.92)),
    var(--panel);
  border-color: rgba(11, 18, 32, 0.10);
  box-shadow: 0 4px 14px rgba(11, 18, 32, 0.06);
}
.command-marker .fibo-code {
  background: rgba(2, 132, 199, 0.10);
  color: var(--cyan);
}
.command-marker .marker-tag {
  background: rgba(34, 197, 94, 0.14);
  color: var(--matrix-green);
}

/* --- Flow cards ---------------------------------------------------------- */
.flow-card {
  background:
    linear-gradient(180deg, rgba(11, 18, 32, 0.012), transparent 60%),
    var(--panel);
  border-color: rgba(11, 18, 32, 0.08);
  box-shadow: 0 4px 14px rgba(11, 18, 32, 0.06);
}
.flow-card::after {
  /* Light-theme micro-grid: dark hairline lines on white instead of
     white lines on black. */
  background:
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(11, 18, 32, 0.025) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(11, 18, 32, 0.025) 23px 24px);
}
.flow-card:hover {
  box-shadow: 0 16px 36px rgba(11, 18, 32, 0.12);
}
.flow-card--green:hover {
  border-color: rgba(34, 197, 94, 0.55);
  box-shadow: 0 16px 36px rgba(34, 197, 94, 0.16), 0 0 0 1px rgba(34, 197, 94, 0.18);
}
.flow-card--cyan:hover {
  border-color: rgba(14, 165, 233, 0.55);
  box-shadow: 0 16px 36px rgba(14, 165, 233, 0.16), 0 0 0 1px rgba(14, 165, 233, 0.18);
}
.flow-card--purple:hover {
  border-color: rgba(124, 58, 237, 0.55);
  box-shadow: 0 16px 36px rgba(124, 58, 237, 0.18), 0 0 0 1px rgba(124, 58, 237, 0.22);
}
.flow-card--warning:hover {
  border-color: rgba(245, 158, 11, 0.55);
  box-shadow: 0 16px 36px rgba(245, 158, 11, 0.18), 0 0 0 1px rgba(245, 158, 11, 0.22);
}
.flow-card .flow-body { color: var(--soft); }
.flow-card .flow-stat-row {
  border-top-color: rgba(11, 18, 32, 0.10);
}
.flow-kicker .flow-num {
  background: rgba(11, 18, 32, 0.06);
  color: var(--ink-strong);
}
/* Per-card colored borders kept — but use deeper tones */
.flow-card--green   { border-color: rgba(34, 197, 94, 0.30); }
.flow-card--cyan    { border-color: rgba(14, 165, 233, 0.30); }
.flow-card--purple  { border-color: rgba(124, 58, 237, 0.36); }
.flow-card--warning { border-color: rgba(245, 158, 11, 0.32); }
.flow-card--green   .flow-icon { background: rgba(34, 197, 94, 0.14);  color: var(--matrix-green); box-shadow: 0 0 22px rgba(34, 197, 94, 0.18); }
.flow-card--cyan    .flow-icon { background: rgba(14, 165, 233, 0.14); color: var(--cyan);         box-shadow: 0 0 22px rgba(14, 165, 233, 0.18); }
.flow-card--purple  .flow-icon { background: rgba(124, 58, 237, 0.14); color: var(--deep-fast);    box-shadow: 0 0 22px rgba(124, 58, 237, 0.20); }
.flow-card--warning .flow-icon { background: rgba(245, 158, 11, 0.14); color: var(--warning);      box-shadow: 0 0 22px rgba(245, 158, 11, 0.20); }
/* Flow-icon pulse keyframes need light-theme variants because the
   originals encode rgba directly. */
.flow-card--green   .flow-icon { animation: flow-icon-pulse-green-l   3.2s ease-in-out infinite; }
.flow-card--cyan    .flow-icon { animation: flow-icon-pulse-cyan-l    3.4s ease-in-out infinite; }
.flow-card--purple  .flow-icon { animation: flow-icon-pulse-purple-l  3.6s ease-in-out infinite; }
.flow-card--warning .flow-icon { animation: flow-icon-pulse-warning-l 3.8s ease-in-out infinite; }
@keyframes flow-icon-pulse-green-l {
  0%, 100% { box-shadow: 0 0 14px rgba(34, 197, 94, 0.14); }
  50%      { box-shadow: 0 0 24px rgba(34, 197, 94, 0.26); }
}
@keyframes flow-icon-pulse-cyan-l {
  0%, 100% { box-shadow: 0 0 14px rgba(14, 165, 233, 0.14); }
  50%      { box-shadow: 0 0 24px rgba(14, 165, 233, 0.26); }
}
@keyframes flow-icon-pulse-purple-l {
  0%, 100% { box-shadow: 0 0 14px rgba(124, 58, 237, 0.16); }
  50%      { box-shadow: 0 0 24px rgba(124, 58, 237, 0.30); }
}
@keyframes flow-icon-pulse-warning-l {
  0%, 100% { box-shadow: 0 0 14px rgba(245, 158, 11, 0.16); }
  50%      { box-shadow: 0 0 24px rgba(245, 158, 11, 0.30); }
}
/* Flow-trace (rotating conic glow on card edge) — use deeper colors. */
.flow-card--green::before {
  background: conic-gradient(from 0deg,
    rgba(34, 197, 94, 0.0) 270deg,
    rgba(34, 197, 94, 0.95) 340deg,
    rgba(34, 197, 94, 0.0) 360deg);
}
.flow-card--cyan::before {
  background: conic-gradient(from 0deg,
    rgba(14, 165, 233, 0.0) 270deg,
    rgba(14, 165, 233, 0.95) 340deg,
    rgba(14, 165, 233, 0.0) 360deg);
}
.flow-card--purple::before {
  background: conic-gradient(from 0deg,
    rgba(124, 58, 237, 0.0) 270deg,
    rgba(124, 58, 237, 0.98) 340deg,
    rgba(124, 58, 237, 0.0) 360deg);
}
.flow-card--warning::before {
  background: conic-gradient(from 0deg,
    rgba(245, 158, 11, 0.0) 270deg,
    rgba(245, 158, 11, 0.95) 340deg,
    rgba(245, 158, 11, 0.0) 360deg);
}

/* --- Tag chips ----------------------------------------------------------- */
.tag,
.narrative-card .tag,
.device-frame .tag {
  background: var(--panel-soft);
  color: var(--ink);
  border: 1px solid var(--hairline);
}
.tag--green   { color: var(--matrix-green); background: rgba(34, 197, 94, 0.14);  border-color: rgba(34, 197, 94, 0.30); }
.tag--cyan    { color: var(--cyan);         background: rgba(14, 165, 233, 0.14); border-color: rgba(14, 165, 233, 0.30); }
.tag--purple  { color: var(--deep-fast);    background: rgba(124, 58, 237, 0.14); border-color: rgba(124, 58, 237, 0.34); }
.tag--warning { color: var(--warning);      background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.32); }

/* --- Hero h1 gradient sweep — light theme: darker stops -------------- */
.hero h1,
h1#hero-title {
  background: linear-gradient(
    100deg,
    var(--ink-strong) 0%,
    var(--ink-strong) 28%,
    var(--matrix-green-pop) 44%,
    var(--cyan-pop) 56%,
    var(--deep-fast-pop) 64%,
    var(--ink-strong) 76%,
    var(--ink-strong) 100%
  );
  background-size: 220% 100%;
  background-position: 0% 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  animation: h1-sweep 7s ease-in-out infinite;
}
.hero-lead { color: var(--soft); }

/* --- Section divider ----------------------------------------------------- */
.section-divider {
  background:
    linear-gradient(180deg, rgba(11, 18, 32, 0.02), transparent 60%),
    var(--command-deep);
}
.section-divider::before {
  background: repeating-linear-gradient(
    90deg, transparent 0 22px, rgba(14, 165, 233, 0.10) 22px 23px);
}

/* --- Hero corner brackets — light theme: deeper accent colors ----------- */
.hero-brackets::before,
.hero-brackets::after,
.hero-brackets > .br-tr,
.hero-brackets > .br-br {
  border-color: rgba(2, 132, 199, 0.65);
}
@keyframes brackets-pulse {
  0%, 100% {
    border-color: rgba(2, 132, 199, 0.42);
    filter: drop-shadow(0 0 2px rgba(2, 132, 199, 0.20));
  }
  50% {
    border-color: rgba(34, 197, 94, 0.92);
    filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.42));
  }
}

/* --- Top + bottom command bars ------------------------------------------ */
.command-top-bar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(250, 251, 254, 0.86)),
    linear-gradient(90deg,
      rgba(34, 197, 94, 0.10) 0%,
      rgba(14, 165, 233, 0.10) 50%,
      rgba(124, 58, 237, 0.10) 100%);
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
}
.command-top-bar .top-key { color: var(--muted); }
.command-top-bar .top-val {
  color: var(--matrix-green);
  text-shadow: 0 0 8px rgba(34, 197, 94, 0.28);
}
.command-top-bar .top-sep { color: var(--faint); }

.command-bottom-bar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.96));
  border-top: 1px solid var(--hairline-strong);
  color: var(--ink);
}
.command-bottom-bar .bar-key { color: var(--muted); }
.command-bottom-bar .bar-val { color: var(--ink-strong); }
.command-bottom-bar .bar-sep { color: var(--faint); }

/* --- Milestone ladder ---------------------------------------------------- */
.milestone-ladder {
  background:
    linear-gradient(180deg, rgba(124, 58, 237, 0.05), transparent 60%),
    var(--panel);
  border-color: var(--hairline);
}
.ladder-cell {
  background: rgba(11, 18, 32, 0.02);
  border-color: var(--hairline);
}
.ladder-cell b { color: var(--ink); }
.ladder-cell i { color: var(--muted); }
.ladder-cell--done {
  background: rgba(34, 197, 94, 0.10);
  border-color: rgba(34, 197, 94, 0.30);
}
.ladder-cell--active {
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(245, 158, 11, 0.42);
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.20);
}
.ladder-cell .ladder-live {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(245, 158, 11, 0.50);
  color: var(--warning);
}

/* --- Scanline overlay (hero) — invisible-ish on light bg ---------------- */
.hero-scanlines {
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0 3px,
    rgba(11, 18, 32, 0.025) 3px 4px
  );
  mix-blend-mode: multiply;
  opacity: 0.55;
}

/* --- Mobile carousel (light theme) -------------------------------------- */
.hero-mobile-carousel .carousel-card {
  background:
    linear-gradient(180deg, rgba(14, 165, 233, 0.05), transparent 60%),
    var(--panel);
  border-color: var(--hairline-strong);
  box-shadow: 0 18px 36px rgba(11, 18, 32, 0.10);
  color: var(--ink);
}
.hero-mobile-carousel .carousel-card img {
  background: var(--command-deep);
}
.hero-mobile-carousel .carousel-card p { color: var(--soft); }

/* ==========================================================================
 * alpha.241 — DARK THEME OVERRIDES
 *
 * Restore original alpha.224 dark-theme styling for selectors that
 * hardcoded rgba values. Mirror image of the light-theme overrides
 * above — one block per surface.
 * ========================================================================== */

:root[data-theme="dark"] .hero::before {
  background:
    radial-gradient(circle at 28% 32%, rgba(74, 222, 128, 0.10), transparent 48%),
    radial-gradient(circle at 78% 60%, rgba(56, 189, 248, 0.10), transparent 50%);
}
:root[data-theme="dark"] .hero-scene::after {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.74) 42%, rgba(0, 0, 0, 0.18) 72%, rgba(0, 0, 0, 0.62) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.52));
}
:root[data-theme="dark"] .radar-scope {
  filter: drop-shadow(0 0 60px rgba(0, 0, 0, 0.45));
  border-color: rgba(56, 189, 248, 0.38);
  box-shadow:
    inset 0 0 80px rgba(56, 189, 248, 0.18),
    0 0 120px rgba(74, 222, 128, 0.14);
}
:root[data-theme="dark"] .scope-f {
  color: #ffffff;
  text-shadow:
    0 0 32px rgba(56, 189, 248, 0.50),
    0 0 64px rgba(74, 222, 128, 0.20);
}
:root[data-theme="dark"] .glass-panel {
  background:
    linear-gradient(180deg, rgba(20, 28, 44, 0.94), rgba(8, 12, 18, 0.96)),
    radial-gradient(circle at top right, rgba(56, 189, 248, 0.14), transparent 56%);
}
:root[data-theme="dark"] .glass-panel::after {
  background:
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(255, 255, 255, 0.03) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(255, 255, 255, 0.03) 23px 24px);
}
:root[data-theme="dark"] .hero-stats-ticker {
  background:
    linear-gradient(180deg, rgba(56, 189, 248, 0.06), rgba(0, 0, 0, 0.5));
  border-color: var(--hairline-strong);
  color: var(--ink);
}
:root[data-theme="dark"] .hero-stats-ticker .stat-val--green {
  color: var(--matrix-green);
  text-shadow: 0 0 10px rgba(74, 222, 128, 0.4);
}
:root[data-theme="dark"] .button.primary {
  background: var(--matrix-green);
  color: #050608;
  box-shadow: 0 8px 22px rgba(74, 222, 128, 0.32);
}
:root[data-theme="dark"] .nav-cta {
  background: var(--matrix-green);
  color: #050608;
}
:root[data-theme="dark"] .button.secondary {
  background: var(--panel);
  color: var(--ink-strong);
}
:root[data-theme="dark"] .eyebrow,
:root[data-theme="dark"] .panel-label {
  color: var(--cyan);
}
:root[data-theme="dark"] .eyebrow::before {
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
}
:root[data-theme="dark"] .command-marker {
  background:
    linear-gradient(180deg, rgba(56, 189, 248, 0.05), transparent 60%),
    var(--panel-soft);
  border-color: var(--hairline);
  box-shadow: none;
}
:root[data-theme="dark"] .command-marker .fibo-code {
  background: rgba(56, 189, 248, 0.12);
  color: var(--cyan);
}
:root[data-theme="dark"] .command-marker .marker-tag {
  background: rgba(74, 222, 128, 0.15);
  color: var(--matrix-green);
}
:root[data-theme="dark"] .flow-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 60%),
    var(--panel);
  border-color: var(--hairline);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
:root[data-theme="dark"] .flow-card::after {
  background:
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(255, 255, 255, 0.025) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(255, 255, 255, 0.025) 23px 24px);
}
:root[data-theme="dark"] .flow-card--green   { border-color: rgba(74, 222, 128, 0.32); }
:root[data-theme="dark"] .flow-card--cyan    { border-color: rgba(56, 189, 248, 0.32); }
:root[data-theme="dark"] .flow-card--purple  { border-color: rgba(179, 128, 250, 0.36); }
:root[data-theme="dark"] .flow-card--warning { border-color: rgba(251, 191, 36, 0.34); }
:root[data-theme="dark"] .flow-card--green   .flow-icon { background: rgba(74, 222, 128, 0.12); box-shadow: 0 0 22px rgba(74, 222, 128, 0.20); animation: flow-icon-pulse-green   3.2s ease-in-out infinite; }
:root[data-theme="dark"] .flow-card--cyan    .flow-icon { background: rgba(56, 189, 248, 0.12); box-shadow: 0 0 22px rgba(56, 189, 248, 0.20); animation: flow-icon-pulse-cyan    3.4s ease-in-out infinite; }
:root[data-theme="dark"] .flow-card--purple  .flow-icon { background: rgba(179, 128, 250, 0.14); box-shadow: 0 0 22px rgba(179, 128, 250, 0.22); animation: flow-icon-pulse-purple  3.6s ease-in-out infinite; }
:root[data-theme="dark"] .flow-card--warning .flow-icon { background: rgba(251, 191, 36, 0.12); box-shadow: 0 0 22px rgba(251, 191, 36, 0.20); animation: flow-icon-pulse-warning 3.8s ease-in-out infinite; }
:root[data-theme="dark"] .flow-card--green::before   { background: conic-gradient(from 0deg, rgba(74, 222, 128, 0.0) 270deg, rgba(74, 222, 128, 0.95) 340deg, rgba(74, 222, 128, 0.0) 360deg); }
:root[data-theme="dark"] .flow-card--cyan::before    { background: conic-gradient(from 0deg, rgba(56, 189, 248, 0.0) 270deg, rgba(56, 189, 248, 0.95) 340deg, rgba(56, 189, 248, 0.0) 360deg); }
:root[data-theme="dark"] .flow-card--purple::before  { background: conic-gradient(from 0deg, rgba(179, 128, 250, 0.0) 270deg, rgba(179, 128, 250, 0.98) 340deg, rgba(179, 128, 250, 0.0) 360deg); }
:root[data-theme="dark"] .flow-card--warning::before { background: conic-gradient(from 0deg, rgba(251, 191, 36, 0.0) 270deg, rgba(251, 191, 36, 0.95) 340deg, rgba(251, 191, 36, 0.0) 360deg); }
:root[data-theme="dark"] .tag--green   { color: var(--matrix-green); background: rgba(74, 222, 128, 0.14);  border-color: rgba(74, 222, 128, 0.28); }
:root[data-theme="dark"] .tag--cyan    { color: var(--cyan);         background: rgba(56, 189, 248, 0.14); border-color: rgba(56, 189, 248, 0.28); }
:root[data-theme="dark"] .tag--purple  { color: var(--deep-fast);    background: rgba(179, 128, 250, 0.14); border-color: rgba(179, 128, 250, 0.32); }
:root[data-theme="dark"] .tag--warning { color: var(--warning);      background: rgba(251, 191, 36, 0.14); border-color: rgba(251, 191, 36, 0.30); }
:root[data-theme="dark"] .hero h1,
:root[data-theme="dark"] h1#hero-title {
  background: linear-gradient(
    100deg,
    #ffffff 0%, #ffffff 32%,
    var(--matrix-green) 46%,
    var(--cyan) 56%,
    var(--deep-fast) 64%,
    #ffffff 76%, #ffffff 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  animation: h1-sweep 7s ease-in-out infinite;
}
:root[data-theme="dark"] .section-divider {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 60%),
    var(--command-deep);
}
:root[data-theme="dark"] .section-divider::before {
  background: repeating-linear-gradient(
    90deg, transparent 0 22px, rgba(56, 189, 248, 0.10) 22px 23px);
}
:root[data-theme="dark"] .hero-brackets::before,
:root[data-theme="dark"] .hero-brackets::after,
:root[data-theme="dark"] .hero-brackets > .br-tr,
:root[data-theme="dark"] .hero-brackets > .br-br {
  border-color: rgba(56, 189, 248, 0.65);
}
:root[data-theme="dark"] .command-top-bar {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.94), rgba(0, 0, 0, 0.78)),
    linear-gradient(90deg,
      rgba(74, 222, 128, 0.10) 0%,
      rgba(56, 189, 248, 0.10) 50%,
      rgba(179, 128, 250, 0.10) 100%);
  color: var(--soft);
}
:root[data-theme="dark"] .command-bottom-bar {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.96));
  color: var(--muted);
}
:root[data-theme="dark"] .milestone-ladder {
  background:
    linear-gradient(180deg, rgba(179, 128, 250, 0.04), transparent 60%),
    var(--panel);
}
:root[data-theme="dark"] .ladder-cell--done {
  background: rgba(74, 222, 128, 0.10);
  border-color: rgba(74, 222, 128, 0.32);
}
:root[data-theme="dark"] .ladder-cell--active {
  background: rgba(251, 191, 36, 0.14);
  border-color: rgba(251, 191, 36, 0.45);
  box-shadow: 0 0 18px rgba(251, 191, 36, 0.20);
}
:root[data-theme="dark"] .ladder-cell .ladder-live {
  background: rgba(0, 0, 0, 0.55);
  border-color: rgba(251, 191, 36, 0.45);
}
:root[data-theme="dark"] .hero-scanlines {
  mix-blend-mode: overlay;
  background-image: repeating-linear-gradient(
    180deg, transparent 0 3px, rgba(255, 255, 255, 0.025) 3px 4px);
}
:root[data-theme="dark"] .hero-mobile-carousel .carousel-card {
  background:
    linear-gradient(180deg, rgba(56, 189, 248, 0.06), transparent 60%),
    var(--panel);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.55);
}

/* ==========================================================================
 * alpha.241 — THEME TOGGLE BUTTON
 *
 * Lives in the nav-shell as a 36px square button between nav-links and
 * nav-cta. Sun icon shows when in light mode (clicking switches to
 * dark). Moon icon shows when in dark mode. Hover pops the accent.
 * ========================================================================== */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink-strong);
  cursor: pointer;
  padding: 0;
  margin-right: 8px;
  flex-shrink: 0;
  transition:
    background-color 200ms ease,
    border-color 200ms ease,
    transform 120ms ease,
    box-shadow 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover {
  background: var(--panel-soft);
  border-color: var(--matrix-green-pop);
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12);
}
.theme-toggle:active {
  transform: scale(0.94);
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
  display: block;
  color: var(--ink-strong);
  transition: transform 280ms ease;
}
.theme-toggle .icon-sun  { display: block; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; color: #fbbf24; }
:root[data-theme="dark"] .theme-toggle:hover {
  border-color: var(--matrix-green);
  box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.16);
}
@media (max-width: 720px) {
  .theme-toggle {
    width: 38px;
    height: 38px;
    margin-right: 6px;
  }
}

/* --------------------------------------------------------------------------
 * Reduced motion safeguard
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  /* Make sure reveal-on-scroll content is still visible without JS-class
     when motion is disabled. */
  .reveal-on-scroll,
  .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
 * alpha.242 — trust bar
 *
 * Per v6 synthesis (CHATGPT_V6_COLLAB_RESPONSE_2026-05-04.md §6,
 * Claude lane). Addition to the hero:
 *
 *   1. Trust bar — 5 proof-point chips under the live ticker. Each
 *      chip carries a 14×14 SVG icon + label. Per-color variants
 *      (green/cyan/purple/warning) so the chips read as a tactical
 *      ribbon, not a pile of identical pills.
 *
 * Rides the existing var()-driven theme tokens so light + dark modes
 * get appropriate styling automatically.
 * ========================================================================== */

/* --- Trust bar ----------------------------------------------------------- */
.hero-trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 1.4rem;
  align-items: center;
}
.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px 5px 7px;
  border: 1px solid var(--hairline-strong);
  border-radius: 6px;
  background: var(--panel);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}
.trust-chip:hover {
  transform: translateY(-1px);
}
.trust-chip svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
/* Light-theme color variants (defaults). */
.trust-chip--green {
  background: rgba(34, 197, 94, 0.10);
  border-color: rgba(34, 197, 94, 0.30);
  color: var(--matrix-green);
}
.trust-chip--green:hover {
  border-color: rgba(34, 197, 94, 0.55);
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.18);
}
.trust-chip--cyan {
  background: rgba(14, 165, 233, 0.10);
  border-color: rgba(14, 165, 233, 0.30);
  color: var(--cyan);
}
.trust-chip--cyan:hover {
  border-color: rgba(14, 165, 233, 0.55);
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.18);
}
.trust-chip--purple {
  background: rgba(124, 58, 237, 0.10);
  border-color: rgba(124, 58, 237, 0.34);
  color: var(--deep-fast);
}
.trust-chip--purple:hover {
  border-color: rgba(124, 58, 237, 0.60);
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.20);
}
.trust-chip--warning {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.32);
  color: var(--warning);
}
.trust-chip--warning:hover {
  border-color: rgba(245, 158, 11, 0.58);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.22);
}

/* Dark-theme color variants. */
:root[data-theme="dark"] .trust-chip--green {
  background: rgba(74, 222, 128, 0.12);
  border-color: rgba(74, 222, 128, 0.30);
  color: var(--matrix-green);
}
:root[data-theme="dark"] .trust-chip--cyan {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.30);
  color: var(--cyan);
}
:root[data-theme="dark"] .trust-chip--purple {
  background: rgba(179, 128, 250, 0.12);
  border-color: rgba(179, 128, 250, 0.34);
  color: var(--deep-fast);
}
:root[data-theme="dark"] .trust-chip--warning {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.32);
  color: var(--warning);
}

/* Mobile trust-bar — chips stay readable, labels can compress. */
@media (max-width: 480px) {
  .hero-trust-bar {
    gap: 5px;
  }
  .trust-chip {
    font-size: 9.5px;
    padding: 4px 7px 4px 5px;
  }
  .trust-chip svg {
    width: 11px;
    height: 11px;
  }
}

@media (max-width: 520px) {
  .command-marker {
    flex-wrap: wrap;
  }
  .command-marker .fibo-code {
    margin-left: 0;
  }
}

/* ==========================================================================
 * alpha.243 — TIGHTENING PASS
 *
 * Per product direction 2026-05-04:
 *   "we have to keep a lot of this stuff here, but we need to make
 *    sure we make this tighter and more professional for the website
 *    right now"
 *
 * Goal: same visual vocabulary, less visual chaos. Reduce the
 * "tactical roleplay" loudness, push toward "premium SaaS." The
 * jazz survives — it just stops shouting.
 *
 * Six tone-down knobs:
 *   1. Conic border-trace on flow cards: opacity 0.6 → 0.32, more blur,
 *      slower rotation (5.6s → 9s). It still reads as "live edge,"
 *      it just doesn't strobe at you.
 *   2. Hero h1 gradient sweep: narrower color band, slower (7s → 11s),
 *      so the headline reads first and the sweep is a subtle pass.
 *   3. Section divider strips: half height, lower opacity. Cleaner
 *      transitions between panels.
 *   4. Hero corner brackets: subtler pulse, less aggressive color jump.
 *   5. Bottom command bar: lower z-index for non-interactive feel,
 *      slightly more transparent backdrop.
 *   6. Trust chip: reduce vertical padding for a tighter ribbon.
 *
 * Mobile + desktop both inherit. Reduced-motion users already opt out
 * of all animation via the existing media-query block.
 * ========================================================================== */

/* 1. Flow-card conic border-trace — softer, slower */
.flow-card::before {
  opacity: 0.32;
  filter: blur(1.4px);
  animation-duration: 9s;
}
@media (max-width: 720px) {
  .flow-card::before {
    opacity: 0.42;
    filter: blur(0.8px);
  }
}

/* 2. Hero h1 gradient sweep — narrower color band, slower drift */
.hero h1,
h1#hero-title {
  /* Override the alpha.241 light-theme gradient with a tighter
     color band — text stays readable as ink-strong for most of the
     sweep, color band passes through the middle 20%. */
  background: linear-gradient(
    100deg,
    var(--ink-strong) 0%,
    var(--ink-strong) 38%,
    var(--matrix-green-pop) 48%,
    var(--cyan-pop) 54%,
    var(--deep-fast-pop) 60%,
    var(--ink-strong) 70%,
    var(--ink-strong) 100%
  );
  background-size: 220% 100%;
  animation-duration: 11s;
}
:root[data-theme="dark"] .hero h1,
:root[data-theme="dark"] h1#hero-title {
  background: linear-gradient(
    100deg,
    #ffffff 0%, #ffffff 38%,
    var(--matrix-green) 48%,
    var(--cyan) 54%,
    var(--deep-fast) 60%,
    #ffffff 70%, #ffffff 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  animation: h1-sweep 11s ease-in-out infinite;
}

/* 3. Section divider strips — half height, lower opacity. They
   should feel like a register-shift, not a TV signal. Or removed
   entirely from the homepage — none are wired today. CSS stays
   for any future sections that want them. */
.section-divider {
  height: 14px;
  opacity: 0.62;
}
.section-divider::before {
  opacity: 0.5;
}

/* 4. Hero corner brackets — subtler pulse */
@keyframes brackets-pulse {
  0%, 100% {
    border-color: rgba(2, 132, 199, 0.36);
    filter: drop-shadow(0 0 1px rgba(2, 132, 199, 0.14));
  }
  50% {
    border-color: rgba(2, 132, 199, 0.62);
    filter: drop-shadow(0 0 4px rgba(2, 132, 199, 0.28));
  }
}
:root[data-theme="dark"] .hero-brackets {
  /* keep the original alpha.241 dark-theme pulse — different keyframes
     are scoped via [data-theme="dark"] in the existing block; nothing
     to change here */
}
.hero-brackets::before,
.hero-brackets::after,
.hero-brackets > .br-tr,
.hero-brackets > .br-br {
  border-color: rgba(2, 132, 199, 0.45);
}

/* 5. Bottom command bar — slightly more transparent + lower z so it
   doesn't compete with content. Still always-on, still rotating, just
   recedes. */
.command-bottom-bar {
  z-index: 30;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.92));
}
:root[data-theme="dark"] .command-bottom-bar {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.94));
}

/* 6. Trust chip — tighter vertical padding for a leaner ribbon */
.trust-chip {
  padding: 4px 8px 4px 6px;
  font-size: 10px;
  letter-spacing: 0.05em;
}
.trust-chip svg {
  width: 12px;
  height: 12px;
}

/* 7. Command-marker — tighten across the board so each section
   header feels like a single neat instrument label, not a pill stack. */
.command-marker {
  padding: 5px 10px 5px 6px;
  gap: 8px;
}
.command-marker::before {
  width: 7px;
  height: 7px;
}
.command-marker .marker-tag,
.command-marker .fibo-code {
  font-size: 8.5px;
  padding: 2px 5px;
}

/* 8. Flow card hover — softer lift, less shadow magnitude. The
   alpha.240 hover went too loud; the alpha.241 jazz layered in
   conic glow on top of it. Pulling it down. */
.flow-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(11, 18, 32, 0.10);
}
:root[data-theme="dark"] .flow-card:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.50);
}

/* 9. Top status mini-bar (mobile) — slightly less prominent. The
   ribbon is a stamp, not a ticker — should sit calmly above the nav
   without competing with the brand lockup. */
.command-top-bar {
  font-size: 9.5px;
  letter-spacing: 0.08em;
  padding: 3px 14px;
}

/* 10. Body :: after dot grid — less prominent in light theme. The
   default dot grid we ship at 7% black on light bg reads as too
   busy at small viewport sizes. Tone to 4%. */
body::after {
  background-image:
    radial-gradient(circle, rgba(11, 18, 32, 0.045) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ==========================================================================
 * alpha.249 — STRIP TO LANDING-PAGE BASELINE
 *
 * Per product direction 2026-05-04:
 *   "the whole website is looking like crap, I cant view the text on the
 *    light theme its just a black box for one ... and the formatting in
 *    general is still clunky ... I need more richness to it sure, but
 *    first and foremost I just need it to look decent and be a landing
 *    page"
 *
 * This block is the LAST cascade override in the file. It runs after the
 * alpha.241 dual-theme system, the alpha.243 tightening pass, and the
 * alpha.244+ trust bar / identity tag rules. Goal: kill every animated
 * jazz layer that's competing with readability, and fix the H1 "black
 * box" bug definitively.
 *
 * Specifically:
 *   1. H1 "BLACK BOX" FIX — kill the gradient sweep entirely on light
 *      theme. The gradient with `color: transparent` + background-clip:
 *      text fails on some Safari iOS paint paths and renders as a
 *      mostly-black rectangle (gradient is mostly --ink-strong) with
 *      no readable text. Plain ink-strong color is bulletproof. Dark
 *      theme keeps a SUBTLER sweep with a fallback color so even if
 *      the clip fails the text reads as white.
 *   2. KILL animations on: .radar-scope::before (rotating sweep beam),
 *      .hero-scanlines (drift overlay), .flow-card::before (rotating
 *      conic border-trace), section-divider::before/after, brackets-
 *      pulse, ladder-pulse, flow-icon-pulse-*. These are the loudest
 *      offenders. Static decoration stays.
 *   3. Hide elements that aren't pulling weight on a basic landing
 *      surface: .hero-brackets, .hero-scanlines, .section-divider,
 *      .command-top-bar, .command-bottom-bar.
 *   4. Calmer flow-card icon — solid background, no pulse, no
 *      rotating ring.
 *   5. Tighter, more conventional section spacing so the page reads
 *      like a SaaS landing page first, instrument panel second.
 *   6. Clearer hero-actions button stack.
 *
 * If/when we want to re-introduce richness, do it in named layers
 * gated behind a class on body so we can A/B launch-grade taste before
 * shipping.
 * ========================================================================== */

/* === 1. H1 black-box fix ================================================ */
.hero h1,
h1#hero-title {
  /* Force plain ink-strong color, kill the gradient sweep entirely.
     Multiple !important because three earlier rules set the gradient
     across the cascade. Cleanest path is to nuke them all here. */
  background: none !important;
  background-image: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  -webkit-text-fill-color: var(--ink-strong) !important;
  color: var(--ink-strong) !important;
  animation: none !important;
}
:root[data-theme="dark"] .hero h1,
:root[data-theme="dark"] h1#hero-title {
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
}

/* === 2. Kill the loud animations + hide jazz overlays =================== */

/* Radar sweep beam → static */
.radar-scope::before {
  animation: none !important;
  display: none !important;
}

/* Scanline drift overlay → off */
.hero-scanlines {
  display: none !important;
}

/* Hero corner brackets → off (they were animated AND visually distracting) */
.hero-brackets {
  display: none !important;
}

/* Flow-card conic border-trace → off */
.flow-card::before {
  display: none !important;
}

/* Flow-card icon pulse → off, just static glow */
.flow-card--green   .flow-icon,
.flow-card--cyan    .flow-icon,
.flow-card--purple  .flow-icon,
.flow-card--warning .flow-icon {
  animation: none !important;
}

/* Section divider strips → off entirely (they were 14px high decoration) */
.section-divider {
  display: none !important;
}

/* Top mobile-only status mini-bar → off (was ≤900px sticky, distracting) */
.command-top-bar {
  display: none !important;
}

/* Bottom command bar → off (was always-on rotating, eating screen real estate) */
.command-bottom-bar {
  display: none !important;
}
/* Body bottom-padding is no longer needed once the bar is hidden. */
body {
  padding-bottom: 0 !important;
}

/* Milestone-ladder active-cell pulse → off, keep the static appearance */
.ladder-cell--active {
  animation: none !important;
}

/* Per-section accent washes (top hairline + radial halo) → off
   These were nice but compounded with everything else made the page
   feel chaotic. */
.access-band::before,
.story-section::before,
.problem-section::before,
.system-section::before,
.flow-section::before,
.media-section::before,
.platform-section::before,
.pro-section::before,
.alpha-section::before,
.trust-section::before,
.roadmap-section::before {
  display: none !important;
}
.access-band,
.story-section,
.problem-section,
.system-section,
.flow-section,
.media-section,
.platform-section,
.pro-section,
.alpha-section,
.trust-section,
.roadmap-section {
  background-image: none !important;
}

/* === 3. Make sure stat ticker pulse is calmer (keep one live cue) ====== */
.hero-stats-ticker .stat-dot {
  /* Slow the pulse so the hero feels calm */
  animation-duration: 3s !important;
}

/* === 4. Trust chip hover lift → off (just static) ====================== */
.trust-chip:hover {
  transform: none !important;
}

/* === 5. Tighten section spacing for landing-page rhythm ================ */
.access-band,
.story-section,
.problem-section,
.system-section,
.flow-section,
.media-section,
.platform-section,
.pro-section,
.alpha-section,
.trust-section,
.roadmap-section {
  padding-top: 64px;
  padding-bottom: 64px;
}
@media (max-width: 720px) {
  .access-band,
  .story-section,
  .problem-section,
  .system-section,
  .flow-section,
  .media-section,
  .platform-section,
  .pro-section,
  .alpha-section,
  .trust-section,
  .roadmap-section {
    padding-top: 44px;
    padding-bottom: 44px;
  }
}

/* === 6. Section heading: more obvious hierarchy ======================== */
.section-heading h2,
.section-heading.compact h2 {
  /* Make sure h2 is dark on light theme + readable */
  color: var(--ink-strong);
}
.section-heading p:not(.eyebrow) {
  color: var(--soft);
}

/* === 7. Command-marker — tighter, less prominent ======================= */
.command-marker {
  margin-bottom: 14px;
  /* If a section heading carries the marker, the section's own h2
     is the focal point, not the marker. Marker recedes. */
  opacity: 0.92;
}
.command-marker:hover {
  opacity: 1;
}

/* === 8. Hero copy stack — clean spacing ================================ */
.hero-copy {
  /* Make sure hero copy block has reasonable space above + below */
  padding-top: 40px;
  padding-bottom: 40px;
}
.hero-copy h1 {
  /* Add proper margin so headline doesn't crash into trust-bar above
     or hero-lead below */
  margin-top: 4px;
  margin-bottom: 18px;
}
.hero-copy .hero-lead {
  margin-bottom: 26px;
  max-width: 640px;
}

/* === 9. Hero actions — readable button row ============================= */
.hero-actions {
  gap: 10px;
  flex-wrap: wrap;
}
.hero-actions .button {
  font-weight: 800;
}

/* === 10. Make sure hero reads on light theme without the radar competing
   The radar wheel was very saturated in alpha.243. On light mode that's
   beautiful in isolation but it dominates. Reduce its z-index priority
   so the hero copy is unambiguously the focal point. */
.hero-scene {
  pointer-events: none;
  z-index: -2;
}
.radar-scope {
  /* Slightly reduce saturation so the wheel reads as decoration not
     subject */
  filter:
    saturate(1.0)
    drop-shadow(0 12px 28px rgba(34, 197, 94, 0.20))
    drop-shadow(0 0 60px rgba(124, 58, 237, 0.14)) !important;
}

/* === 11. Mobile carousel cards — make sure tap target is clean ========= */
.hero-mobile-carousel .carousel-card {
  /* Subtle border, no glowy chaos */
  box-shadow: 0 6px 18px rgba(11, 18, 32, 0.08) !important;
}

/* === 12. Footer minor improvements ===================================== */
.site-footer {
  margin-top: 24px;
}

/* ==========================================================================
 * alpha.252 — REBUILT LANDING-PAGE SURFACES
 *
 * Per product direction 2026-05-04 ~late: "push a lot of changes to
 * the website / Im really not happy with it / remember light theme
 * and mobile first is our goal and focus / and this needs to look
 * rich and elegant and professional".
 *
 * Premium SaaS feel — restraint, white space, single focal point per
 * section, bigger type, fewer competing visual elements. Mobile-first
 * so iPhone Safari / Chrome reads first.
 *
 * New section classes shipped in this alpha:
 *   .hero-v2 — clean hero with H1+lead+CTA on left, single phone
 *              product image on right. Mobile stack: H1, image, CTA.
 *   .trust-band — thin section under hero with 5 proof-point chips.
 *   .why-section — replaces alpha.232 story + problem sections.
 *                  Single tight problem statement + 3 cards.
 *   .final-cta — strong final CTA section before the trust posture.
 *
 * Old section classes that remain in CSS but are no longer used in
 * HTML (kept so other pages or future iterations can reuse): .hero,
 * .access-band, .story-section, .problem-section, .alpha-section
 * etc. Don't worry about cleaning up the unused CSS now — that's a
 * later sweep.
 * ========================================================================== */

/* ===== HERO V2 =========================================================== */

.hero-v2 {
  position: relative;
  padding: 88px 0 56px;
  border-bottom: 1px solid var(--hairline);
  background:
    radial-gradient(ellipse 120% 60% at 50% 0%,
      rgba(34, 197, 94, 0.06) 0%,
      transparent 60%),
    var(--bg);
  overflow: hidden;
}

.hero-v2-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
}

.hero-v2-copy {
  max-width: 600px;
}

.hero-v2-eyebrow {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero-v2-eyebrow::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--cyan-pop);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.16);
  flex-shrink: 0;
}

.hero-v2-h1 {
  margin: 0 0 22px;
  /* Override the alpha.249 strip-block !important rules so this h1
     reads with the proper hero-v2 size + line-height. */
  font-family: var(--font-display) !important;
  font-size: clamp(36px, 5.6vw, 64px) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.022em !important;
  color: var(--ink-strong) !important;
  background: none !important;
  -webkit-text-fill-color: var(--ink-strong) !important;
  animation: none !important;
}
.hero-v2-h1 em {
  font-style: normal;
  /* Subtle gradient on the second line — text-color-only, no
     background-clip:text trick (that was the alpha.249 black-box
     bug). Use color instead. */
  color: var(--matrix-green) !important;
  -webkit-text-fill-color: var(--matrix-green) !important;
}
.hero-v2-h1 br {
  display: block;
  content: "";
  margin-top: 4px;
}

.hero-v2-lead {
  margin: 0 0 28px;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.55;
  color: var(--soft);
  max-width: 540px;
}

.hero-v2-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.hero-v2-cta-primary {
  /* Bigger, more confident CTA button than the default .button.primary */
  font-size: 15px !important;
  padding: 14px 28px !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
}

.hero-v2-cta-link {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--cyan);
  text-decoration: none;
  transition: color 140ms ease;
}
.hero-v2-cta-link:hover {
  color: var(--cyan-pop);
}

.hero-v2-note {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  max-width: 460px;
}

.hero-v2-product {
  /* Legacy class kept for fallback. Real composition uses .hero-v2-scene. */
  position: relative;
  display: grid;
  place-items: center;
}
.hero-v2-product img {
  width: 100%;
  max-width: 360px;
  height: auto;
  filter:
    drop-shadow(0 32px 64px rgba(11, 18, 32, 0.18))
    drop-shadow(0 4px 8px rgba(11, 18, 32, 0.06));
}

/* ===== web.2 — HERO V2 SCENE (wheel + phone + watch) ==================== */

/* Ambient layer behind everything else: 3 phase-tinted halos in
   different corners. Soft, blurred, low opacity — sets a "rich"
   color floor without competing with content. */
.hero-v2-ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-v2-halo {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
}
.hero-v2-halo--green {
  background: radial-gradient(circle, rgba(34, 197, 94, 0.42) 0%, transparent 70%);
  top: -180px;
  left: -120px;
}
.hero-v2-halo--cyan {
  background: radial-gradient(circle, rgba(14, 165, 233, 0.36) 0%, transparent 70%);
  top: 40%;
  right: -200px;
}
.hero-v2-halo--purple {
  background: radial-gradient(circle, rgba(124, 58, 237, 0.32) 0%, transparent 70%);
  bottom: -160px;
  left: 30%;
}
:root[data-theme="dark"] .hero-v2-halo {
  opacity: 0.42;
  filter: blur(90px);
}

/* Hero scene container — relative so wheel + phone + watch can
   absolute-stack inside it. */
.hero-v2-scene {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 480px;
  z-index: 1;
}

/* Color wheel — phase-ring backdrop. Conic gradient with the
   *-pop palette (vivid green / amber / purple sweep). Sits behind
   the phone, scaled down so the phone is the focal point. */
.hero-v2-wheel {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 0;
  pointer-events: none;
}
.hero-v2-wheel::before {
  /* The wheel itself — conic-gradient ring. */
  content: "";
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: conic-gradient(
    from -90deg,
    var(--matrix-green-pop) 0deg 132deg,
    var(--warning-pop)      132deg 220deg,
    var(--deep-fast-pop)    220deg 360deg
  );
  -webkit-mask: radial-gradient(circle, transparent 38%, black 39% 78%, transparent 79%);
          mask: radial-gradient(circle, transparent 38%, black 39% 78%, transparent 79%);
  filter:
    saturate(1.10)
    drop-shadow(0 20px 36px rgba(34, 197, 94, 0.20))
    drop-shadow(0 0 60px rgba(124, 58, 237, 0.16));
  opacity: 0.78;
}
.hero-v2-ring,
.hero-v2-cross {
  position: absolute;
  inset: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.hero-v2-ring--outer {
  width: 360px;
  height: 360px;
  border: 1px solid rgba(2, 132, 199, 0.34);
  border-radius: 50%;
}
.hero-v2-ring--mid {
  width: 240px;
  height: 240px;
  border: 1px solid rgba(34, 197, 94, 0.32);
  border-radius: 50%;
}
.hero-v2-ring--inner {
  width: 110px;
  height: 110px;
  border: 1px solid rgba(124, 58, 237, 0.45);
  background: rgba(124, 58, 237, 0.10);
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(124, 58, 237, 0.18);
}
.hero-v2-cross--x {
  width: 320px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(2, 132, 199, 0.45), transparent);
}
.hero-v2-cross--y {
  width: 1px;
  height: 320px;
  background: linear-gradient(180deg, transparent, rgba(2, 132, 199, 0.45), transparent);
}
.hero-v2-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: 90px;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: rgba(11, 18, 32, 0.18);
  pointer-events: none;
}

/* Phone product image — focal point of the hero scene */
.hero-v2-product-phone {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 320px;
  height: auto;
  filter:
    drop-shadow(0 32px 64px rgba(11, 18, 32, 0.22))
    drop-shadow(0 4px 8px rgba(11, 18, 32, 0.06));
  transform: rotate(-2deg);
  transition: transform 320ms ease;
}
.hero-v2-product-phone:hover {
  transform: rotate(0deg);
}

/* Watch — floats in the bottom-right quadrant, overlaps the phone
   slightly. Smaller scale. Tilted opposite the phone so it reads
   as a duo. */
.hero-v2-product-watch {
  position: absolute;
  z-index: 3;
  right: -8%;
  bottom: 6%;
  width: 32%;
  max-width: 160px;
  filter:
    drop-shadow(0 20px 40px rgba(11, 18, 32, 0.28))
    drop-shadow(0 4px 8px rgba(11, 18, 32, 0.08));
  transform: rotate(8deg);
  transition: transform 320ms ease;
}
.hero-v2-product-watch:hover {
  transform: rotate(0deg);
}

/* Dark-theme adjustments: drop the rgba black drop-shadow values
   that don't render well against black, use colored glow instead. */
:root[data-theme="dark"] .hero-v2-product-phone {
  filter:
    drop-shadow(0 32px 64px rgba(0, 0, 0, 0.6))
    drop-shadow(0 0 80px rgba(74, 222, 128, 0.12));
}
:root[data-theme="dark"] .hero-v2-product-watch {
  filter:
    drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6))
    drop-shadow(0 0 60px rgba(56, 189, 248, 0.16));
}
:root[data-theme="dark"] .hero-v2-mark {
  color: rgba(255, 255, 255, 0.18);
}
:root[data-theme="dark"] .hero-v2-wheel::before {
  background: conic-gradient(
    from -90deg,
    var(--matrix-green) 0deg 132deg,
    var(--warning)      132deg 220deg,
    var(--deep-fast)    220deg 360deg
  );
  opacity: 0.9;
}
:root[data-theme="dark"] .hero-v2-ring--outer {
  border-color: rgba(56, 189, 248, 0.42);
}
:root[data-theme="dark"] .hero-v2-ring--mid {
  border-color: rgba(74, 222, 128, 0.36);
}
:root[data-theme="dark"] .hero-v2-ring--inner {
  border-color: rgba(179, 128, 250, 0.50);
  background: rgba(179, 128, 250, 0.12);
}

/* Mobile — show wheel + phone + watch but smaller, centered */
@media (max-width: 800px) {
  .hero-v2-scene {
    min-height: 380px;
    margin-top: 12px;
  }
  .hero-v2-wheel::before {
    width: 300px;
    height: 300px;
  }
  .hero-v2-ring--outer {
    width: 280px;
    height: 280px;
  }
  .hero-v2-ring--mid {
    width: 190px;
    height: 190px;
  }
  .hero-v2-ring--inner {
    width: 90px;
    height: 90px;
  }
  .hero-v2-cross--x { width: 250px; }
  .hero-v2-cross--y { height: 250px; }
  .hero-v2-mark {
    font-size: 70px;
  }
  .hero-v2-product-phone {
    max-width: 240px;
  }
  .hero-v2-product-watch {
    max-width: 110px;
    right: -4%;
    bottom: 8%;
  }
  .hero-v2-halo {
    width: 380px;
    height: 380px;
    filter: blur(60px);
  }
  .hero-v2-halo--green  { top: -120px; left: -80px; }
  .hero-v2-halo--cyan   { top: 50%; right: -160px; }
  .hero-v2-halo--purple { bottom: -120px; left: 30%; }
}
@media (max-width: 480px) {
  .hero-v2-scene {
    min-height: 320px;
  }
  .hero-v2-wheel::before {
    width: 240px;
    height: 240px;
  }
  .hero-v2-product-phone {
    max-width: 200px;
  }
  .hero-v2-product-watch {
    max-width: 90px;
  }
  .hero-v2-mark {
    font-size: 56px;
  }
}

/* Dark theme — flip the radial halo + tone shadow */
:root[data-theme="dark"] .hero-v2 {
  background:
    radial-gradient(ellipse 120% 60% at 50% 0%,
      rgba(74, 222, 128, 0.08) 0%,
      transparent 60%),
    var(--bg);
}
:root[data-theme="dark"] .hero-v2-h1 em {
  color: var(--matrix-green) !important;
  -webkit-text-fill-color: var(--matrix-green) !important;
}

/* Mobile stack — H1 first, image second, CTA third */
@media (max-width: 800px) {
  .hero-v2 {
    padding: 56px 0 36px;
  }
  .hero-v2-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .hero-v2-product {
    order: 2;
  }
  .hero-v2-product img {
    max-width: 280px;
  }
  .hero-v2-h1 {
    font-size: clamp(32px, 8vw, 44px) !important;
  }
  .hero-v2-lead {
    font-size: 16px;
  }
  .hero-v2-actions {
    gap: 12px;
  }
  .hero-v2-cta-primary {
    width: 100%;
    text-align: center;
  }
}

/* ===== TRUST BAND ======================================================== */

.trust-band {
  padding: 28px 0;
  background: var(--panel);
  border-bottom: 1px solid var(--hairline);
}
.trust-band-shell {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  align-items: center;
  justify-content: center;
}
.trust-band .trust-chip {
  /* Slightly more confident on the dedicated band */
  padding: 7px 14px 7px 11px;
  font-size: 11px;
  letter-spacing: 0.08em;
}
:root[data-theme="dark"] .trust-band {
  background: var(--panel-raised);
}
@media (max-width: 720px) {
  .trust-band {
    padding: 22px 0;
  }
  .trust-band-shell {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding: 0 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .trust-band-shell::-webkit-scrollbar { display: none; }
  .trust-band .trust-chip {
    flex-shrink: 0;
  }
}

/* ===== WHY SECTION ======================================================= */

.why-section {
  padding: 88px 0;
  background: var(--bg);
  /* Override alpha.249 strip block's section-padding 64/44 */
  padding-top: 88px !important;
  padding-bottom: 88px !important;
}
.why-shell {
  max-width: 1080px;
  text-align: left;
}
.why-eyebrow {
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--warning);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.why-eyebrow::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--warning-pop);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.16);
}
.why-title {
  margin: 0 0 24px !important;
  font-size: clamp(30px, 4.4vw, 50px) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.018em !important;
  color: var(--ink-strong) !important;
  max-width: 900px;
}
.why-lead {
  margin: 0 0 48px;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.6;
  color: var(--soft);
  max-width: 720px;
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.why-card {
  padding: 28px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 4px 14px rgba(11, 18, 32, 0.04);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.why-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(11, 18, 32, 0.08);
}
.why-card h3 {
  margin: 0 0 12px;
  font-size: 19px;
  font-weight: 800;
  color: var(--ink-strong);
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.why-card p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--soft);
}
:root[data-theme="dark"] .why-card {
  background: var(--panel-raised);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
}
@media (max-width: 800px) {
  .why-section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  .why-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .why-card {
    padding: 22px;
  }
  .why-lead {
    margin-bottom: 32px;
  }
}

/* ===== FINAL CTA SECTION ================================================= */

.final-cta {
  padding: 96px 0 !important;
  background:
    radial-gradient(ellipse 80% 80% at 50% 50%,
      rgba(34, 197, 94, 0.08) 0%,
      transparent 70%),
    var(--bg);
  text-align: center;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.final-cta-shell {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: 0 16px;
}
.final-cta-eyebrow {
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--matrix-green);
}
.final-cta-h2 {
  margin: 0 0 18px !important;
  font-size: clamp(34px, 5vw, 56px) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.022em !important;
  color: var(--ink-strong) !important;
}
.final-cta-lead {
  margin: 0 auto 36px;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6;
  color: var(--soft);
  max-width: 560px;
}
.final-cta-actions {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}
.final-cta-primary {
  font-size: 15px !important;
  padding: 14px 32px !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
}
.final-cta-link {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--cyan);
  text-decoration: none;
}
.final-cta-link:hover {
  color: var(--cyan-pop);
}
:root[data-theme="dark"] .final-cta {
  background:
    radial-gradient(ellipse 80% 80% at 50% 50%,
      rgba(74, 222, 128, 0.10) 0%,
      transparent 70%),
    var(--bg);
}
@media (max-width: 720px) {
  .final-cta {
    padding: 64px 0 !important;
  }
  .final-cta-primary {
    width: 100%;
    text-align: center;
  }
}

/* ===== POLISH PASSES ===================================================== */

/* Tighter, more confident section eyebrows on the leftover sections
   that still use .eyebrow (flow-section, media-section, platform,
   pro, trust, roadmap). These were overstated in earlier alphas;
   the new pattern is monospace + cyan + small. */
.section-heading .eyebrow,
.section-heading.compact .eyebrow {
  margin: 0 0 12px !important;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
  border: 0 !important;
  padding: 0 !important;
  background: none !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.section-heading .eyebrow::before,
.section-heading.compact .eyebrow::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--cyan-pop);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.16);
}

/* Drop the trust-band .trust-chip animations (alpha.249 strip
   already handled hover lift, but make sure the chips look calm
   at rest too) */
.trust-band .trust-chip {
  transition: none;
}

/* Bigger H2 across all sections for premium feel */
.section-heading h2,
.section-heading.compact h2 {
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.018em;
  color: var(--ink-strong);
  max-width: 760px;
}
.section-heading p:not(.eyebrow) {
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6;
  color: var(--soft);
  max-width: 720px;
}
@media (max-width: 720px) {
  .section-heading h2,
  .section-heading.compact h2 {
    font-size: clamp(24px, 6vw, 32px);
  }
}

/* ==========================================================================
 * web.3 — RICH SECTION REBUILDS
 *
 * Per product direction 2026-05-04 ~9:38 PM ("lets start cooking on this
 * website ASAP"). Render auto-deploy is now killed (alpha.254
 * autoDeploy:false on all 5 services), so every commit from here flies
 * to Cloudflare Pages without consuming pipeline minutes.
 *
 * Section rebuilds: Platform / Pro / Trust posture / Roadmap / Footer.
 * Each gets a richer visual treatment — SVG icons, clearer hierarchy,
 * better card patterns, premium SaaS feel.
 * ========================================================================== */

/* ===== PLATFORM V3 — 4 product cards ==================================== */

.platform-v3 {
  padding: 80px 0;
  background: var(--bg);
}
.platform-v3-heading {
  text-align: center;
  margin: 0 auto 48px;
  max-width: 760px;
}
.platform-v3-heading .eyebrow {
  margin-left: auto;
  margin-right: auto;
}
.platform-v3-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  max-width: 1080px;
  margin: 0 auto;
}
.platform-v3-card {
  position: relative;
  padding: 32px 28px 28px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 4px 14px rgba(11, 18, 32, 0.05);
  transition:
    transform 200ms ease,
    box-shadow 200ms ease,
    border-color 200ms ease;
}
.platform-v3-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(11, 18, 32, 0.10);
}
.platform-v3-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  margin-bottom: 18px;
}
.platform-v3-icon svg {
  width: 26px;
  height: 26px;
}
.platform-v3-card--green .platform-v3-icon {
  background: rgba(34, 197, 94, 0.12);
  color: var(--matrix-green);
}
.platform-v3-card--cyan .platform-v3-icon {
  background: rgba(14, 165, 233, 0.12);
  color: var(--cyan);
}
.platform-v3-card--purple .platform-v3-icon {
  background: rgba(124, 58, 237, 0.12);
  color: var(--deep-fast);
}
.platform-v3-card--warning .platform-v3-icon {
  background: rgba(245, 158, 11, 0.12);
  color: var(--warning);
}
.platform-v3-card--green:hover   { border-color: rgba(34, 197, 94, 0.42); }
.platform-v3-card--cyan:hover    { border-color: rgba(14, 165, 233, 0.42); }
.platform-v3-card--purple:hover  { border-color: rgba(124, 58, 237, 0.46); }
.platform-v3-card--warning:hover { border-color: rgba(245, 158, 11, 0.46); }

.platform-v3-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.platform-v3-tag--live {
  background: rgba(34, 197, 94, 0.14);
  color: var(--matrix-green);
}
.platform-v3-tag--live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--matrix-green-pop);
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.20);
}
.platform-v3-tag--next {
  background: rgba(14, 165, 233, 0.14);
  color: var(--cyan);
}
.platform-v3-tag--later {
  background: rgba(124, 58, 237, 0.12);
  color: var(--deep-fast);
}
.platform-v3-card h3 {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.018em;
  color: var(--ink-strong);
  margin: 0 0 4px;
  line-height: 1.2;
}
.platform-v3-sub {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 14px;
  letter-spacing: 0.005em;
}
.platform-v3-body {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--soft);
  margin: 0;
}
:root[data-theme="dark"] .platform-v3-card {
  background: var(--panel-raised);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
@media (max-width: 720px) {
  .platform-v3 { padding: 56px 0; }
  .platform-v3-grid { grid-template-columns: 1fr; gap: 14px; }
  .platform-v3-card { padding: 24px 22px; }
  .platform-v3-heading { margin-bottom: 32px; }
}

/* ===== PRO V3 — 6 specialty cards ======================================= */

.pro-v3 {
  padding: 80px 0;
  background: var(--bg-3);
}
.pro-v3-heading {
  text-align: center;
  margin: 0 auto 48px;
  max-width: 800px;
}
.pro-v3-heading .eyebrow {
  margin-left: auto;
  margin-right: auto;
}
.pro-v3-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1080px;
  margin: 0 auto 40px;
}
.pro-v3-card {
  padding: 26px 22px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 2px 8px rgba(11, 18, 32, 0.04);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.pro-v3-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(11, 18, 32, 0.10);
  border-color: var(--hairline-strong);
}
.pro-v3-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  margin-bottom: 14px;
}
.pro-v3-icon svg {
  width: 22px;
  height: 22px;
}
.pro-v3-icon--green   { background: rgba(34, 197, 94, 0.12);  color: var(--matrix-green); }
.pro-v3-icon--cyan    { background: rgba(14, 165, 233, 0.12); color: var(--cyan); }
.pro-v3-icon--purple  { background: rgba(124, 58, 237, 0.12); color: var(--deep-fast); }
.pro-v3-icon--warning { background: rgba(245, 158, 11, 0.12); color: var(--warning); }
.pro-v3-card h3 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
  margin: 0 0 8px;
  line-height: 1.25;
}
.pro-v3-card p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--soft);
  margin: 0;
}
.pro-v3-actions {
  text-align: center;
  margin-top: 12px;
}
:root[data-theme="dark"] .pro-v3 {
  background: var(--bg);
}
:root[data-theme="dark"] .pro-v3-card {
  background: var(--panel-raised);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
@media (max-width: 1000px) {
  .pro-v3-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .pro-v3 { padding: 56px 0; }
  .pro-v3-grid { grid-template-columns: 1fr; gap: 12px; }
  .pro-v3-heading { margin-bottom: 32px; }
}

/* ===== TRUST V3 — check/X icon rows ===================================== */

.trust-v3 {
  padding: 80px 0;
  background: var(--bg);
}
.trust-v3-heading {
  text-align: center;
  margin: 0 auto 48px;
  max-width: 800px;
}
.trust-v3-heading .eyebrow {
  margin-left: auto;
  margin-right: auto;
}
.trust-v3-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  max-width: 1080px;
  margin: 0 auto;
}
.trust-v3-panel {
  padding: 32px 28px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 4px 14px rgba(11, 18, 32, 0.04);
}
.trust-v3-panel--building {
  border-color: rgba(34, 197, 94, 0.30);
  background:
    linear-gradient(180deg, rgba(34, 197, 94, 0.04), transparent 60%),
    var(--panel);
}
.trust-v3-panel--not-claiming {
  border-color: rgba(245, 158, 11, 0.30);
  background:
    linear-gradient(180deg, rgba(245, 158, 11, 0.05), transparent 60%),
    var(--panel);
}
.trust-v3-panel-head {
  margin-bottom: 18px;
}
.trust-v3-panel-tag {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(34, 197, 94, 0.14);
  color: var(--matrix-green);
  margin-bottom: 10px;
}
.trust-v3-panel-tag--warn {
  background: rgba(245, 158, 11, 0.14);
  color: var(--warning);
}
.trust-v3-panel h3 {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.014em;
  color: var(--ink-strong);
  margin: 0;
  line-height: 1.25;
}
.trust-v3-panel h3 em {
  font-style: italic;
  color: var(--warning);
}
.trust-v3-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.trust-v3-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
}
.trust-v3-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  padding: 3px;
}
.trust-v3-icon--check {
  background: rgba(34, 197, 94, 0.14);
  color: var(--matrix-green);
}
.trust-v3-icon--x {
  background: rgba(245, 158, 11, 0.14);
  color: var(--warning);
}
:root[data-theme="dark"] .trust-v3-panel {
  background: var(--panel-raised);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
@media (max-width: 800px) {
  .trust-v3 { padding: 56px 0; }
  .trust-v3-grid { grid-template-columns: 1fr; gap: 14px; }
  .trust-v3-panel { padding: 24px 22px; }
  .trust-v3-heading { margin-bottom: 32px; }
}

/* ===== ROADMAP V3 — horizontal timeline ================================== */

.roadmap-v3 {
  padding: 80px 0;
  background: var(--bg-3);
}
.roadmap-v3-heading {
  text-align: center;
  margin: 0 auto 56px;
  max-width: 760px;
}
.roadmap-v3-heading .eyebrow {
  margin-left: auto;
  margin-right: auto;
}
.roadmap-v3-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
}
.roadmap-v3-timeline::before {
  /* Connecting horizontal line on desktop */
  content: "";
  position: absolute;
  top: 22px;
  left: 8%;
  right: 8%;
  height: 2px;
  background:
    linear-gradient(
      90deg,
      var(--matrix-green-pop) 0%,
      var(--cyan-pop) 35%,
      var(--deep-fast-pop) 70%,
      var(--hairline-strong) 100%
    );
  border-radius: 2px;
  z-index: 0;
}
.roadmap-v3-node {
  position: relative;
  text-align: center;
  z-index: 1;
}
.roadmap-v3-dot {
  display: block;
  width: 18px;
  height: 18px;
  margin: 14px auto 24px;
  border-radius: 50%;
  background: var(--bg-3);
  border: 2px solid var(--hairline-strong);
  position: relative;
}
.roadmap-v3-node--now .roadmap-v3-dot {
  border-color: var(--matrix-green-pop);
  background: var(--matrix-green-pop);
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18);
}
.roadmap-v3-node:nth-child(2) .roadmap-v3-dot {
  border-color: var(--cyan-pop);
}
.roadmap-v3-node:nth-child(3) .roadmap-v3-dot {
  border-color: var(--deep-fast-pop);
}
.roadmap-v3-phase {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 4px;
  background: rgba(11, 18, 32, 0.06);
  color: var(--ink-strong);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.roadmap-v3-node--now .roadmap-v3-phase {
  background: rgba(34, 197, 94, 0.16);
  color: var(--matrix-green);
}
.roadmap-v3-node h3 {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--ink-strong);
  margin: 0 0 10px;
  line-height: 1.25;
}
.roadmap-v3-node p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--soft);
  margin: 0;
}
:root[data-theme="dark"] .roadmap-v3 {
  background: var(--bg);
}
:root[data-theme="dark"] .roadmap-v3-dot {
  background: var(--bg);
}
:root[data-theme="dark"] .roadmap-v3-phase {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink-strong);
}
@media (max-width: 800px) {
  .roadmap-v3 { padding: 56px 0; }
  .roadmap-v3-timeline {
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: 480px;
    padding-left: 24px;
  }
  .roadmap-v3-timeline::before {
    /* Vertical connecting line on mobile */
    top: 0;
    bottom: 0;
    left: 8px;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(
      180deg,
      var(--matrix-green-pop) 0%,
      var(--cyan-pop) 35%,
      var(--deep-fast-pop) 70%,
      var(--hairline-strong) 100%
    );
  }
  .roadmap-v3-node {
    text-align: left;
    padding-left: 16px;
  }
  .roadmap-v3-dot {
    position: absolute;
    left: -34px;
    top: 0;
    margin: 0;
  }
  .roadmap-v3-heading {
    margin-bottom: 36px;
  }
}

/* ===== FOOTER V3 — organized columns ==================================== */

.footer-v3 {
  padding: 56px 0 28px;
  background: var(--panel);
  border-top: 1px solid var(--hairline);
}
.footer-v3-shell {
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  gap: 56px;
  align-items: start;
  margin-bottom: 36px;
}
.footer-v3-brand .footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  text-decoration: none;
}
.footer-v3-brand .footer-brand span {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  color: var(--ink-strong);
  letter-spacing: -0.005em;
}
.footer-v3-brand p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--soft);
  margin: 0 0 14px;
  max-width: 360px;
}
.footer-v3-status {
  font-family: var(--font-mono);
  font-size: 11px !important;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--matrix-green) !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
}
.footer-v3-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--matrix-green-pop);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}
.footer-v3-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.footer-v3-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-v3-col h4 {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.footer-v3-col a {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: color 140ms ease;
}
.footer-v3-col a:hover {
  color: var(--cyan);
}
.footer-v3-base {
  border-top: 1px solid var(--hairline);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-v3-base p {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
}

.footer-disclaimer {
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

:root[data-theme="dark"] .footer-v3 {
  background: var(--panel-raised);
}
@media (max-width: 800px) {
  .footer-v3 { padding: 40px 0 20px; }
  .footer-v3-shell { grid-template-columns: 1fr; gap: 32px; margin-bottom: 28px; }
  .footer-v3-cols { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .footer-v3-base { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .footer-v3-cols { grid-template-columns: 1fr; gap: 20px; }
}

/* ==========================================================================
 * web.4 — MOBILE FIXES
 *
 * Per operator QA report 2026-05-04 ~9:50 PM:
 *   "questions marks on the center F in the color wheel thing and then
 *    to the bottom right hand side of it there is another floating
 *    question mark and then overall the layout looks like a 5 year
 *    old made it"
 *
 * Diagnosis:
 *   - "Question marks" on iPhone Safari = Safari's broken-image glyph.
 *     Both spots QA described correspond to elements that either
 *     overflow viewport or render badly on small screens.
 *   - The watch image was positioned `right: -8%` which clips outside
 *     viewport on narrow phones → Safari shows "?" placeholder.
 *   - The F mark at 18% opacity barely renders, can read as broken.
 *
 * Fixes:
 *   1. F mark removed entirely (HTML).
 *   2. Watch image hidden on ≤720px (only the phone shows on mobile).
 *   3. Wheel rings + crosshairs hidden on ≤720px (just the conic
 *      gradient fill remains as soft backdrop).
 *   4. Phone rotation removed on mobile (no clipping).
 *   5. Section padding tightened on mobile.
 *   6. Trust v3 panels less padded on mobile.
 *   7. Roadmap mobile dot positioning corrected.
 * ========================================================================== */

/* Hide watch on mobile — the bottom-right "?" QA saw */
@media (max-width: 720px) {
  .hero-v2-product-watch {
    display: none !important;
  }
  /* Hide the wheel rings + crosshairs on mobile too — keeping just
     the conic-gradient wheel itself as colorful backdrop. Cleaner. */
  .hero-v2-ring,
  .hero-v2-cross {
    display: none !important;
  }
  .hero-v2-mark {
    display: none !important;
  }
  /* Phone gets full focus, no rotation */
  .hero-v2-product-phone {
    transform: none !important;
    max-width: 240px;
  }
  /* Tighter scene height since watch is gone */
  .hero-v2-scene {
    min-height: 320px;
  }
}

/* Even on desktop, hide the F mark — product feedback rejected it */
.hero-v2-mark {
  display: none !important;
}

/* Reduce the watch's overhang on tablet+ so it doesn't push outside
   the viewport even on borderline screen sizes. */
@media (min-width: 721px) and (max-width: 1000px) {
  .hero-v2-product-watch {
    right: 0;
    width: 28%;
    max-width: 130px;
  }
}

/* === Tighten section mobile padding ===================================== */

@media (max-width: 720px) {
  /* Smaller, calmer mobile section padding across the v3 sections */
  .platform-v3,
  .pro-v3,
  .trust-v3,
  .roadmap-v3 {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .platform-v3-heading,
  .pro-v3-heading,
  .trust-v3-heading,
  .roadmap-v3-heading {
    margin-bottom: 28px;
  }
  /* Trust panels less padded on mobile */
  .trust-v3-panel {
    padding: 22px 18px;
  }
  .trust-v3-panel h3 {
    font-size: 19px;
  }
  /* Why section tighter */
  .why-section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .why-card {
    padding: 20px 18px;
  }
  /* Final CTA tighter */
  .final-cta {
    padding: 56px 0 !important;
  }
}

/* === Roadmap mobile fix ================================================= */

@media (max-width: 800px) {
  /* Pull the roadmap timeline back into a comfortable left margin so
     dots aren't crowding the screen edge. */
  .roadmap-v3-timeline {
    padding-left: 36px;
    padding-right: 0;
  }
  .roadmap-v3-timeline::before {
    left: 16px;
  }
  .roadmap-v3-node {
    padding-left: 8px;
  }
  .roadmap-v3-dot {
    left: -28px;
  }
}

/* === Fix horizontal overflow risk =====================================
   Make sure no element forces horizontal scroll on mobile. */
@media (max-width: 720px) {
  body {
    overflow-x: hidden;
  }
  .page-shell {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* === Safer trust band on mobile ======================================= */

@media (max-width: 720px) {
  .trust-band {
    padding: 18px 0;
  }
  .trust-band .trust-chip {
    font-size: 10.5px;
    padding: 6px 11px 6px 9px;
  }
}

/* === Hero copy tightening on mobile ==================================== */

@media (max-width: 720px) {
  .hero-v2 {
    padding: 40px 0 32px;
  }
  .hero-v2-eyebrow {
    margin-bottom: 14px;
    font-size: 10.5px;
  }
  .hero-v2-h1 {
    font-size: clamp(28px, 7.5vw, 38px) !important;
    margin-bottom: 16px;
  }
  .hero-v2-lead {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 20px;
  }
  .hero-v2-cta-primary {
    font-size: 14.5px !important;
    padding: 12px 22px !important;
  }
  .hero-v2-note {
    font-size: 11.5px;
    line-height: 1.4;
  }
}

/* ==========================================================================
 * web.5 — Codex premium reset
 *
 * Product direction moved the public website visual lane to Codex after web.4. This
 * layer quiets the tactical gimmicks and makes the public site feel like a
 * polished product company: light-theme first, mobile-first, real product
 * visuals, warmer copy rhythm, and less chrome.
 * ========================================================================== */

body::before,
body::after {
  display: none;
}

html,
body {
  background: #f7f8f4;
}

:root,
:root[data-theme="light"] {
  --bg: #f7f8f4;
  --bg-2: #ffffff;
  --bg-3: #eef4ef;
  --panel: #ffffff;
  --panel-raised: #fbfcf8;
  --panel-soft: #eff4ee;
  --ink-strong: #111611;
  --ink: #1c241d;
  --soft: rgba(28, 36, 29, 0.76);
  --muted: rgba(28, 36, 29, 0.62);
  --faint: rgba(28, 36, 29, 0.42);
  --matrix-green: #087d3d;
  --matrix-green-pop: #18b75c;
  --signal-green: #0a8f48;
  --cyan: #0b7897;
  --cyan-pop: #169fc4;
  --deep-fast: #6048b8;
  --deep-fast-pop: #7a61d1;
  --warning: #a96813;
  --warning-pop: #d79022;
  --hairline: rgba(30, 43, 32, 0.10);
  --hairline-strong: rgba(30, 43, 32, 0.18);
  --shadow: 0 24px 80px rgba(28, 36, 29, 0.12), 0 8px 24px rgba(28, 36, 29, 0.07);
  --shadow-soft: 0 16px 42px rgba(28, 36, 29, 0.10);
}

h1,
h2,
h3 {
  letter-spacing: 0;
}

.command-top-bar,
.command-bottom-bar {
  display: none;
}

.site-header {
  background: rgba(247, 248, 244, 0.86);
  border-bottom: 1px solid rgba(30, 43, 32, 0.10);
  box-shadow: 0 10px 34px rgba(30, 43, 32, 0.06);
}

:root[data-theme="dark"] .site-header {
  background: rgba(5, 6, 8, 0.82);
}

.nav-shell {
  min-height: 70px;
}

.brand-lockup img {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(8, 125, 61, 0.18);
}

.brand-lockup span {
  letter-spacing: 0;
}

.nav-links {
  gap: 2px;
  font-size: 13px;
}

.nav-links a:hover {
  background: rgba(8, 125, 61, 0.08);
}

.theme-toggle {
  border-color: rgba(30, 43, 32, 0.12);
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
}

.nav-cta,
.button {
  min-height: 46px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: none;
}

.button.primary,
.nav-cta {
  background: #111611;
  border-color: #111611;
  color: #ffffff;
  box-shadow: 0 12px 34px rgba(17, 22, 17, 0.18);
}

.button.primary:hover,
.nav-cta:hover {
  background: #253327;
  border-color: #253327;
}

.button.secondary {
  background: #ffffff;
  border-color: rgba(30, 43, 32, 0.16);
  color: var(--ink);
  box-shadow: 0 8px 26px rgba(30, 43, 32, 0.08);
}

.button.secondary:hover {
  background: #f1f5ef;
  border-color: rgba(8, 125, 61, 0.30);
}

.site-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  color: var(--matrix-green);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 0 0 12px rgba(8, 125, 61, 0.32);
}

.moonshot-hero {
  position: relative;
  overflow: hidden;
  padding: 88px 0 76px;
  border-bottom: 1px solid var(--hairline);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(237, 244, 235, 0.66)),
    linear-gradient(180deg, #f7f8f4 0%, #eff4ee 100%);
}

.moonshot-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(67, 78, 67, 0.072) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67, 78, 67, 0.072) 1px, transparent 1px),
    linear-gradient(rgba(67, 78, 67, 0.072) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67, 78, 67, 0.072) 1px, transparent 1px);
  background-size: 42px 42px, 42px 42px, 10.5px 10.5px, 10.5px 10.5px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.34), transparent 82%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.34), transparent 82%);
  pointer-events: none;
}

.moonshot-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
  gap: 52px;
  align-items: center;
}

.moonshot-copy,
.story-copy,
.section-heading,
.provider-band-grid > div,
.trust-copy,
.alpha-cta-card,
.portal-hero .hero-copy,
.alpha-hero .hero-copy {
  min-width: 0;
  max-width: 100%;
}

.moonshot-copy h1 {
  max-width: 770px;
  font-size: 72px;
  line-height: 1.02;
  color: var(--ink-strong);
  overflow-wrap: anywhere;
}

.hero-subcopy {
  max-width: 650px;
  margin: 24px 0 0;
  color: var(--soft);
  font-size: 19px;
  line-height: 1.62;
}

.hero-proof-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 0;
}

.hero-proof-row span,
.provider-lanes span,
.proof-strip article,
.surface-grid article,
.trust-list article,
.story-points article,
.showcase-card,
.stage-card,
.alpha-cta-card {
  border: 1px solid rgba(30, 43, 32, 0.10);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 34px rgba(30, 43, 32, 0.07);
}

.hero-proof-row span {
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--soft);
  font-size: 13px;
  font-weight: 780;
}

.alpha-scarcity-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 650px;
  margin: 24px 0 0;
}

.alpha-scarcity-grid span {
  position: relative;
  overflow: hidden;
  min-height: 96px;
  border: 1px solid rgba(30, 43, 32, 0.12);
  border-radius: 18px;
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.92), rgba(244, 250, 240, 0.80)),
    rgba(255, 255, 255, 0.84);
  box-shadow: 0 14px 38px rgba(30, 43, 32, 0.08);
  padding: 16px;
}

.alpha-scarcity-grid span::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(24, 183, 92, 0.18), transparent 42%),
    radial-gradient(circle at 94% 12%, rgba(19, 171, 113, 0.18), transparent 34%);
  opacity: 0.9;
  pointer-events: none;
}

.alpha-scarcity-grid strong,
.alpha-scarcity-grid em {
  position: relative;
  display: block;
}

.alpha-scarcity-grid strong {
  color: var(--ink-strong);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.alpha-scarcity-grid em {
  margin-top: 8px;
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
  line-height: 1.42;
}

.alpha-scarcity-grid-hero {
  max-width: 760px;
}

.moonshot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.moonshot-note {
  max-width: 560px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.product-stage {
  position: relative;
  min-height: 610px;
}

.stage-card {
  position: absolute;
  border-radius: 28px;
  overflow: hidden;
}

.stage-card img {
  display: block;
  width: 100%;
  height: auto;
}

.stage-label {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(30, 43, 32, 0.12);
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
}

.stage-card-main {
  left: 15%;
  top: 18px;
  width: min(360px, 52%);
  z-index: 3;
  box-shadow: 0 36px 96px rgba(30, 43, 32, 0.20);
}

.stage-card-brief {
  right: 0;
  top: 88px;
  width: min(360px, 55%);
  z-index: 2;
  transform: rotate(2deg);
}

.stage-card-watch {
  left: 2%;
  bottom: 22px;
  width: min(250px, 38%);
  z-index: 4;
  transform: rotate(-3deg);
}

.stage-annotation {
  position: absolute;
  right: 0;
  z-index: 5;
  width: min(250px, 42%);
  padding: 15px 16px;
  border: 1px solid rgba(30, 43, 32, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 44px rgba(30, 43, 32, 0.12);
}

.stage-annotation strong,
.report-preview-card h3 {
  display: block;
  margin: 0 0 6px;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.08;
}

.stage-annotation span,
.report-preview-card p,
.report-preview-card em {
  display: block;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.stage-annotation-top {
  top: 50px;
}

.stage-annotation-mid {
  top: 225px;
}

.stage-annotation-low {
  bottom: 70px;
}

.proof-strip {
  padding: 22px 0;
  background: #111611;
  color: #ffffff;
}

.proof-strip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.proof-strip article {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  box-shadow: none;
  padding: 18px;
}

.proof-strip strong {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
}

.proof-strip span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1.5;
}

.audience-hook-section {
  padding: 86px 0;
  background:
    radial-gradient(circle at 12% 8%, rgba(24, 183, 92, 0.13), transparent 30%),
    radial-gradient(circle at 88% 70%, rgba(22, 159, 196, 0.12), transparent 34%),
    #fbfcf8;
}

.audience-hook-grid,
.clip-grid,
.investor-thesis-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
  gap: 44px;
  align-items: start;
}

.hook-cards,
.clip-stack,
.thesis-points {
  display: grid;
  gap: 14px;
}

.hook-cards article,
.clip-stack article,
.thesis-points article {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(30, 43, 32, 0.10);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 16px 44px rgba(30, 43, 32, 0.07);
}

.hook-cards article {
  min-height: 210px;
  padding: 24px;
}

.hook-cards article::after,
.thesis-points article::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 18px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(24, 183, 92, 0.72), rgba(22, 159, 196, 0.46), transparent);
}

.hook-cards span,
.clip-stack strong,
.thesis-points span {
  display: inline-flex;
  color: var(--matrix-green);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hook-cards h3,
.clip-stack h3,
.thesis-points strong {
  display: block;
  margin-top: 12px;
  color: var(--ink-strong);
  font-size: 21px;
  line-height: 1.2;
}

.hook-cards p,
.clip-stack p,
.thesis-points p {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.58;
}

.hook-cards a {
  display: inline-flex;
  margin-top: 20px;
  color: var(--matrix-green);
  font-weight: 850;
  text-decoration: none;
}

.story-band,
.platform-moonshot,
.trust-moonshot {
  background: #fbfcf8;
}

.story-band-grid,
.provider-band-grid,
.trust-moonshot-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 44px;
  align-items: start;
}

.story-copy h2,
.section-heading h2,
.provider-band h2,
.trust-copy h2,
.alpha-cta h2 {
  font-size: 48px;
  line-height: 1.08;
}

.story-copy p:not(.site-kicker),
.provider-band p,
.trust-copy p,
.alpha-cta p,
.section-heading p:not(.site-kicker):not(.eyebrow) {
  color: var(--soft);
  font-size: 18px;
  line-height: 1.65;
}

.story-points {
  display: grid;
  gap: 14px;
}

.story-points article {
  border-radius: 22px;
  padding: 22px;
}

.story-points span {
  display: inline-flex;
  margin-bottom: 18px;
  color: var(--matrix-green);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 900;
}

.story-points h3,
.surface-grid h3,
.trust-list strong {
  font-size: 20px;
  line-height: 1.2;
}

.story-points p,
.surface-grid p,
.trust-list span {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.58;
}

.showcase-section {
  background: #f2f5ee;
}

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.showcase-card {
  display: grid;
  align-content: space-between;
  position: relative;
  min-height: 420px;
  border-radius: 28px;
  overflow: hidden;
  padding: 18px;
}

.showcase-card.wide {
  grid-column: span 2;
}

.showcase-card img {
  display: block;
  width: 100%;
  max-height: 330px;
  object-fit: contain;
  object-position: center top;
  margin: 0 auto 16px;
}

.showcase-card.wide img {
  max-height: 280px;
}

.showcase-card-training {
  gap: 12px;
}

.training-copy-lockup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(62px, 6vw, 92px);
  gap: 12px;
  align-items: end;
}

.axo-training-cameo {
  position: relative;
  z-index: 0;
  width: clamp(62px, 6vw, 92px);
  margin: 0 0 -2px auto;
  pointer-events: none;
  opacity: 0.92;
  filter: drop-shadow(0 18px 30px rgba(20, 34, 25, 0.18));
  transform: rotate(-1deg);
}

.axo-training-cameo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  object-fit: contain;
}

.showcase-card span {
  display: inline-flex;
  margin-bottom: 8px;
  color: var(--matrix-green);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.showcase-card h3 {
  font-size: 20px;
}

.showcase-card p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

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

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

.surface-grid article {
  border-radius: 24px;
  padding: 24px;
}

.surface-icon {
  display: inline-flex;
  margin-bottom: 34px;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(8, 125, 61, 0.10);
  color: var(--matrix-green);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 900;
}

.surface-grid strong {
  display: inline-flex;
  margin-top: 18px;
  color: var(--ink);
  font-size: 13px;
}

.provider-band {
  background: #111611;
  color: #ffffff;
}

.provider-band h2,
.provider-band p,
.provider-band .site-kicker {
  color: #ffffff;
}

.provider-band p {
  color: rgba(255, 255, 255, 0.74);
}

.text-link {
  display: inline-flex;
  margin-top: 22px;
  color: #bdf6ce;
  font-weight: 850;
  text-decoration: none;
}

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

.provider-lanes span {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
  color: rgba(255, 255, 255, 0.86);
  padding: 18px;
  font-weight: 780;
}

.investor-thesis-section {
  padding: 92px 0;
  background:
    radial-gradient(circle at 16% 10%, rgba(96, 72, 184, 0.13), transparent 28%),
    radial-gradient(circle at 86% 78%, rgba(24, 183, 92, 0.13), transparent 34%),
    #f7f8f4;
}

.investor-thesis-grid > div:first-child h2 {
  max-width: 650px;
  font-size: 52px;
  line-height: 1.06;
}

.investor-thesis-grid > div:first-child p:not(.site-kicker) {
  max-width: 620px;
  color: var(--soft);
  font-size: 18px;
  line-height: 1.68;
}

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

.thesis-points article {
  min-height: 220px;
  padding: 24px;
}

.trust-moonshot-grid {
  align-items: center;
}

.trust-list {
  display: grid;
  gap: 14px;
}

.trust-list article {
  border-radius: 20px;
  padding: 20px;
}

.trust-list strong {
  display: block;
}

.alpha-cta {
  background: #eef4ef;
}

.alpha-cta-card {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  padding: 44px;
}

.alpha-cta-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(24, 183, 92, 0.16), transparent 34%),
    radial-gradient(circle at 86% 18%, rgba(22, 159, 196, 0.16), transparent 28%);
  opacity: 0.95;
  pointer-events: none;
}

.alpha-cta-card > * {
  position: relative;
}

.alpha-cta-card h2 {
  max-width: 800px;
}

.alpha-cta-card p {
  max-width: 680px;
}

.site-footer.footer-v3 {
  background: #111611;
  color: #ffffff;
}

.footer-v3-brand p,
.footer-v3-col a,
.footer-v3-base p {
  color: rgba(255, 255, 255, 0.68);
}

.footer-v3-brand .footer-brand span,
.footer-v3-col h4 {
  color: #ffffff;
}

.footer-v3-base {
  border-top-color: rgba(255, 255, 255, 0.10);
}

.portal-hero,
.alpha-hero {
  min-height: auto;
  padding: 86px 0;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(237, 244, 235, 0.72)),
    #f7f8f4;
}

.portal-hero .hero-scene,
.alpha-hero .hero-scene {
  display: none;
}

.portal-hero .hero-copy,
.alpha-hero .hero-copy {
  padding: 0;
}

.portal-hero h1,
.alpha-hero h1 {
  max-width: 820px;
  font-size: 58px;
  line-height: 1.05;
}

.portal-hero .hero-lead,
.alpha-hero .hero-lead {
  color: var(--soft);
}

.portal-card,
.feature-matrix article,
.workflow-row,
.faq-grid article,
.roadmap article,
.legal-doc,
.signing-timeline article,
.alpha-form,
.alpha-note,
.signature-gate {
  border-radius: 20px;
  border-color: rgba(30, 43, 32, 0.10);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 34px rgba(30, 43, 32, 0.07);
}

.portal-card h2,
.portal-card h3,
.feature-matrix h3,
.workflow-row strong,
.faq-grid h3,
.roadmap h3 {
  letter-spacing: 0;
}

@media (max-width: 1080px) {
  .moonshot-hero-grid,
  .audience-hook-grid,
  .clip-grid,
  .investor-thesis-grid,
  .story-band-grid,
  .provider-band-grid,
  .trust-moonshot-grid {
    grid-template-columns: 1fr;
  }

  .product-stage {
    min-height: 560px;
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
  }

  .surface-grid,
  .showcase-grid,
  .thesis-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .showcase-card.wide {
    grid-column: span 2;
  }
}

@media (max-width: 720px) {
  .site-header {
    position: sticky;
  }

  .nav-shell {
    width: min(calc(100% - 28px), var(--max));
    min-height: 64px;
    gap: 10px;
  }

  .brand-lockup span {
    font-size: 15px;
  }

  .nav-cta {
    display: none;
  }

  .theme-toggle {
    width: 42px;
    height: 42px;
  }

  .moonshot-hero {
    padding: 58px 0 42px;
  }

  .moonshot-copy h1 {
    font-size: 36px;
    line-height: 1.08;
  }

  .hero-subcopy,
  .clip-copy p:not(.site-kicker),
  .investor-thesis-grid > div:first-child p:not(.site-kicker),
  .story-copy p:not(.site-kicker),
  .provider-band p,
  .trust-copy p,
  .alpha-cta p,
  .section-heading p:not(.site-kicker):not(.eyebrow) {
    font-size: 16px;
  }

  .story-copy h2,
  .clip-copy h2,
  .investor-thesis-grid > div:first-child h2,
  .section-heading h2,
  .provider-band h2,
  .trust-copy h2,
  .alpha-cta h2,
  .portal-hero h1,
  .alpha-hero h1 {
    font-size: 34px;
    line-height: 1.1;
    overflow-wrap: anywhere;
  }

  .moonshot-actions,
  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .moonshot-actions .button,
  .hero-actions .button {
    width: 100%;
  }

  .product-stage {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    min-height: 0;
  }

  .stage-card {
    position: relative;
    inset: auto;
    width: 100%;
    transform: none;
  }

  .stage-annotation {
    position: relative;
    inset: auto;
    width: 100%;
  }

  .stage-card-main {
    left: auto;
    top: auto;
    width: 100%;
  }

  .stage-card-brief {
    right: auto;
    top: auto;
    width: 100%;
  }

  .stage-card-watch {
    left: auto;
    bottom: auto;
    width: min(100%, 280px);
    margin: 0 auto;
  }

  .proof-strip-grid,
  .surface-grid,
  .showcase-grid,
  .thesis-points,
  .provider-lanes,
  .alpha-scarcity-grid {
    grid-template-columns: 1fr;
  }

  .alpha-scarcity-grid {
    max-width: none;
  }

  .alpha-scarcity-grid span {
    min-height: auto;
    padding: 14px 16px;
  }

  .audience-hook-section,
  .clip-section,
  .investor-thesis-section {
    padding: 62px 0;
  }

  .hook-cards article,
  .clip-stack article,
  .thesis-points article {
    min-height: auto;
  }

  .clip-stack article {
    grid-template-columns: 46px 1fr;
    gap: 14px;
  }

  .clip-play {
    width: 44px;
    height: 44px;
  }

  .clip-play::before {
    left: 18px;
    top: 14px;
    border-top-width: 8px;
    border-bottom-width: 8px;
    border-left-width: 12px;
  }

  .showcase-card,
  .showcase-card.wide {
    grid-column: span 1;
    min-height: auto;
  }

  .showcase-card img {
    max-height: 360px;
  }

  .story-points article,
  .surface-grid article,
  .trust-list article,
  .alpha-cta-card {
    padding: 20px;
  }

  .portal-hero,
  .alpha-hero {
    padding: 56px 0;
  }
}

@media (max-width: 420px) {
  .moonshot-copy h1 {
    font-size: 34px;
  }

  .product-stage {
    min-height: 0;
  }

  .stage-label {
    top: 10px;
    left: 10px;
    font-size: 11px;
  }

  .stage-card {
    border-radius: 20px;
  }
}

:root[data-theme="dark"] html,
:root[data-theme="dark"] body {
  background: #050608;
}

:root[data-theme="dark"] .moonshot-hero,
:root[data-theme="dark"] .portal-hero,
:root[data-theme="dark"] .alpha-hero,
:root[data-theme="dark"] .story-band,
:root[data-theme="dark"] .audience-hook-section,
:root[data-theme="dark"] .signal-flow-section,
:root[data-theme="dark"] .platform-moonshot,
:root[data-theme="dark"] .investor-thesis-section,
:root[data-theme="dark"] .trust-moonshot,
:root[data-theme="dark"] .showcase-section,
:root[data-theme="dark"] .alpha-cta {
  background: #050608;
}

:root[data-theme="dark"] .hero-proof-row span,
:root[data-theme="dark"] .alpha-scarcity-grid span,
:root[data-theme="dark"] .stage-card,
:root[data-theme="dark"] .hook-cards article,
:root[data-theme="dark"] .story-points article,
:root[data-theme="dark"] .showcase-card,
:root[data-theme="dark"] .surface-grid article,
:root[data-theme="dark"] .thesis-points article,
:root[data-theme="dark"] .trust-list article,
:root[data-theme="dark"] .alpha-cta-card,
:root[data-theme="dark"] .portal-card,
:root[data-theme="dark"] .feature-matrix article,
:root[data-theme="dark"] .workflow-row,
:root[data-theme="dark"] .faq-grid article,
:root[data-theme="dark"] .roadmap article,
:root[data-theme="dark"] .legal-doc,
:root[data-theme="dark"] .signing-timeline article,
:root[data-theme="dark"] .alpha-form,
:root[data-theme="dark"] .alpha-note,
:root[data-theme="dark"] .signature-gate {
  background: rgba(18, 22, 20, 0.84);
  border-color: rgba(255, 255, 255, 0.10);
}

:root[data-theme="dark"] .axo-training-cameo {
  filter: drop-shadow(0 20px 34px rgba(0, 0, 0, 0.32));
}

@media (max-width: 720px) {
  .training-copy-lockup {
    grid-template-columns: minmax(0, 1fr) 58px;
  }

  .axo-training-cameo {
    width: 58px;
    margin-bottom: 0;
    opacity: 0.84;
  }
}

:root[data-theme="dark"] .alpha-scarcity-grid span::before {
  background:
    linear-gradient(90deg, rgba(24, 183, 92, 0.18), transparent 46%),
    radial-gradient(circle at 94% 12%, rgba(22, 159, 196, 0.18), transparent 34%);
}

/* ==========================================================================
 * web.6 — more pulse, same premium direction
 * ========================================================================== */

.site-kicker,
.showcase-card span,
.surface-icon,
.stage-label,
.terminal-top,
.terminal-row span,
.signal-flow-steps span {
  letter-spacing: 0;
}

.moonshot-hero {
  background:
    radial-gradient(circle at 78% 22%, rgba(22, 159, 196, 0.18), transparent 28%),
    radial-gradient(circle at 66% 78%, rgba(24, 183, 92, 0.18), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(237, 244, 235, 0.70)),
    linear-gradient(180deg, #f7f8f4 0%, #eff4ee 100%);
}

.moonshot-hero-grid {
  gap: 60px;
}

.signal-ribbon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: 640px;
  margin-top: 24px;
}

.signal-ribbon span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid rgba(8, 125, 61, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.70);
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(30, 43, 32, 0.06);
  font-size: 12px;
  font-weight: 850;
}

.product-stage {
  isolation: isolate;
}

.product-stage::before {
  content: "";
  position: absolute;
  inset: 8% -4% 4%;
  z-index: -1;
  border-radius: 48px;
  background:
    linear-gradient(135deg, rgba(8, 125, 61, 0.08), transparent 34%),
    radial-gradient(circle at 60% 35%, rgba(22, 159, 196, 0.18), transparent 34%),
    radial-gradient(circle at 38% 72%, rgba(96, 72, 184, 0.14), transparent 32%);
  filter: blur(4px);
}

.stage-ambient {
  position: absolute;
  z-index: 1;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  opacity: 0.72;
  filter: blur(28px);
  pointer-events: none;
}

.stage-ambient-green {
  right: 10%;
  top: 12%;
  background: rgba(24, 183, 92, 0.34);
}

.stage-ambient-cyan {
  left: 6%;
  bottom: 14%;
  background: rgba(22, 159, 196, 0.28);
}

.stage-card {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.stage-card-main {
  animation: stage-float-main 8s ease-in-out infinite;
}

.stage-card-brief {
  animation: stage-float-brief 9.5s ease-in-out infinite;
}

.stage-card-watch {
  animation: stage-float-watch 7.5s ease-in-out infinite;
}

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

@keyframes stage-float-brief {
  0%, 100% { transform: rotate(2deg) translateY(0); }
  50% { transform: rotate(1deg) translateY(10px); }
}

@keyframes stage-float-watch {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50% { transform: rotate(-2deg) translateY(-10px); }
}

.signal-flow-section {
  padding: 96px 0;
  background:
    radial-gradient(circle at 12% 10%, rgba(24, 183, 92, 0.12), transparent 28%),
    radial-gradient(circle at 88% 76%, rgba(22, 159, 196, 0.13), transparent 30%),
    #f7f8f4;
}

.signal-flow-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.86fr);
  gap: 46px;
  align-items: center;
}

.signal-flow-copy h2 {
  max-width: 820px;
  font-size: 54px;
  line-height: 1.06;
}

.signal-flow-copy > p:not(.site-kicker) {
  max-width: 720px;
  color: var(--soft);
  font-size: 18px;
  line-height: 1.7;
}

.signal-flow-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}

.signal-flow-steps article {
  min-height: 170px;
  padding: 20px;
  border: 1px solid rgba(30, 43, 32, 0.10);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 16px 42px rgba(30, 43, 32, 0.07);
}

.signal-flow-steps span {
  display: inline-flex;
  margin-bottom: 22px;
  color: var(--matrix-green);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 900;
}

.signal-flow-steps strong,
.terminal-card strong {
  display: block;
  color: var(--ink-strong);
  font-size: 17px;
  line-height: 1.25;
}

.signal-flow-steps em {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-style: normal;
  line-height: 1.55;
}

.signal-terminal {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(20, 26, 22, 0.96), rgba(7, 10, 8, 0.98)),
    #111611;
  box-shadow: 0 30px 90px rgba(17, 22, 17, 0.28);
  color: #ffffff;
  padding: 18px;
}

.signal-terminal::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.8), transparent);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.8), transparent);
  pointer-events: none;
}

.terminal-top,
.terminal-row,
.terminal-card {
  position: relative;
  z-index: 1;
}

.terminal-top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 900;
}

.terminal-top span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 18px rgba(74, 222, 128, 0.85);
}

.terminal-row {
  display: grid;
  grid-template-columns: 78px 1fr auto;
  gap: 12px;
  align-items: center;
  min-height: 64px;
  margin-top: 10px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.055);
}

.terminal-row-hot {
  border-color: rgba(74, 222, 128, 0.32);
  background: rgba(74, 222, 128, 0.09);
}

.terminal-row span {
  color: #4ade80;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 900;
}

.terminal-row strong {
  color: rgba(255, 255, 255, 0.90);
  font-size: 14px;
}

.terminal-row em {
  color: rgba(255, 255, 255, 0.66);
  font-style: normal;
  font-weight: 850;
}

.terminal-card {
  margin-top: 14px;
  padding: 20px;
  border-radius: 22px;
  background: #ffffff;
  color: var(--ink);
}

.terminal-card p {
  margin: 0 0 8px;
  color: var(--matrix-green);
  font-size: 12px;
  font-weight: 900;
}

.terminal-axo-callout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(74, 222, 128, 0.24);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(74, 222, 128, 0.12), rgba(56, 189, 248, 0.07)),
    rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
}

.terminal-axo-callout img {
  width: 62px;
  height: 68px;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(74, 222, 128, 0.18));
}

.terminal-axo-callout span {
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.25;
}

.terminal-axo-callout:focus-visible {
  outline: 3px solid rgba(74, 222, 128, 0.62);
  outline-offset: 3px;
}

:root[data-theme="dark"] .signal-flow-section {
  background:
    radial-gradient(circle at 12% 10%, rgba(74, 222, 128, 0.14), transparent 30%),
    radial-gradient(circle at 88% 76%, rgba(56, 189, 248, 0.12), transparent 32%),
    linear-gradient(180deg, rgba(5, 6, 8, 0.98), rgba(9, 12, 10, 0.98)),
    #050608;
}

:root[data-theme="dark"] .signal-flow-steps article {
  background: rgba(18, 22, 20, 0.84);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.28);
}

:root[data-theme="dark"] .terminal-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.92);
}

:root[data-theme="dark"] .terminal-card strong {
  color: rgba(255, 255, 255, 0.94);
}

.clip-section {
  padding: 92px 0;
  background:
    linear-gradient(145deg, rgba(17, 22, 17, 0.96), rgba(6, 9, 7, 0.98)),
    #111611;
  color: #ffffff;
}

.clip-copy h2,
.clip-copy .site-kicker {
  color: #ffffff;
}

.clip-copy h2 {
  max-width: 560px;
  font-size: 52px;
  line-height: 1.06;
}

.clip-copy p:not(.site-kicker) {
  max-width: 560px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 18px;
  line-height: 1.65;
}

.clip-stack article {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 18px;
  align-items: start;
  padding: 22px;
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.clip-stack strong {
  color: #4ade80;
}

.clip-stack h3 {
  color: #ffffff;
}

.clip-stack p {
  color: rgba(255, 255, 255, 0.68);
}

.clip-play {
  position: relative;
  display: inline-flex;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(74, 222, 128, 0.34);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(74, 222, 128, 0.20), transparent 56%),
    rgba(255, 255, 255, 0.06);
}

.clip-play::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 17px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #ffffff;
}

.moonshot-manifest {
  padding: 92px 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(74, 222, 128, 0.18), transparent 30%),
    radial-gradient(circle at 82% 72%, rgba(56, 189, 248, 0.14), transparent 32%),
    #111611;
  color: #ffffff;
}

.manifest-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
  gap: 48px;
  align-items: center;
}

.moonshot-manifest h2,
.moonshot-manifest .site-kicker {
  color: #ffffff;
}

.moonshot-manifest h2 {
  font-size: 52px;
  line-height: 1.06;
}

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

.manifest-cards article {
  min-height: 158px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.manifest-cards strong {
  display: block;
  color: #ffffff;
  font-size: 20px;
}

.manifest-cards span {
  display: block;
  margin-top: 42px;
  color: rgba(255, 255, 255, 0.70);
}

@media (max-width: 1080px) {
  .signal-flow-grid,
  .manifest-grid {
    grid-template-columns: 1fr;
  }

  .signal-terminal {
    max-width: 720px;
  }
}

@media (max-width: 720px) {
  .signal-ribbon {
    gap: 7px;
  }

  .signal-ribbon span {
    min-height: 32px;
    padding: 7px 10px;
  }

  .stage-ambient,
  .product-stage::before {
    display: none;
  }

  .stage-card-main,
  .stage-card-brief,
  .stage-card-watch {
    animation: none;
  }

  .signal-flow-section,
  .moonshot-manifest {
    padding: 62px 0;
  }

  .signal-flow-copy h2,
  .moonshot-manifest h2 {
    font-size: 34px;
    line-height: 1.1;
  }

  .signal-flow-copy > p:not(.site-kicker) {
    font-size: 16px;
  }

  .signal-flow-steps,
  .manifest-cards {
    grid-template-columns: 1fr;
  }

  .signal-flow-steps article,
  .manifest-cards article {
    min-height: auto;
  }

  .terminal-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .terminal-axo-callout {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .terminal-axo-callout img {
    width: 54px;
    height: 58px;
  }

  .manifest-cards span {
    margin-top: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage-card-main,
  .stage-card-brief,
  .stage-card-watch {
    animation: none;
  }
}

/* ==========================================================================
 * web.7 — added warmth, kinetic detail, and sharper Watch mockup staging
 * ========================================================================== */

.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(24, 183, 92, 0.55), rgba(22, 159, 196, 0.48), transparent);
  opacity: 0.72;
  pointer-events: none;
}

.moonshot-hero {
  min-height: calc(100svh - 70px);
}

.moonshot-hero::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 34px;
  width: min(760px, calc(100% - 56px));
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(8, 125, 61, 0.40), rgba(22, 159, 196, 0.34), transparent);
  opacity: 0.65;
}

.stage-card {
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.stage-micro-card {
  position: absolute;
  z-index: 5;
  display: grid;
  gap: 4px;
  min-width: 144px;
  padding: 12px 14px;
  border: 1px solid rgba(30, 43, 32, 0.10);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 44px rgba(30, 43, 32, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.stage-micro-card span {
  color: var(--matrix-green);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 900;
}

.stage-micro-card strong {
  color: var(--ink-strong);
  font-size: 16px;
  line-height: 1.12;
}

.stage-micro-card-top {
  right: 7%;
  top: 28px;
}

.stage-micro-card-bottom {
  left: 13%;
  bottom: 0;
  min-width: 176px;
}

.stage-card-watch {
  width: min(282px, 43%);
}

.stage-card-watch .stage-label {
  background: rgba(17, 22, 17, 0.86);
  border-color: rgba(255, 255, 255, 0.10);
  color: #ffffff;
}

.proof-strip {
  position: relative;
  overflow: hidden;
}

.proof-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 0%, rgba(74, 222, 128, 0.18), transparent 30%),
    radial-gradient(circle at 78% 100%, rgba(56, 189, 248, 0.16), transparent 34%);
  pointer-events: none;
}

.proof-strip .page-shell {
  position: relative;
}

.proof-strip article,
.story-points article,
.surface-grid article,
.showcase-card,
.trust-list article,
.signal-flow-steps article,
.manifest-cards article {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.surface-grid article:nth-child(1) .surface-icon,
.manifest-cards article:nth-child(1) strong { color: #4ade80; }
.surface-grid article:nth-child(2) .surface-icon,
.manifest-cards article:nth-child(2) strong { color: #38bdf8; }
.surface-grid article:nth-child(3) .surface-icon,
.manifest-cards article:nth-child(3) strong { color: #b380fa; }

.showcase-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.78)),
    radial-gradient(circle at 50% 4%, rgba(24, 183, 92, 0.12), transparent 36%);
}

.showcase-card.wide {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.78)),
    radial-gradient(circle at 56% 10%, rgba(96, 72, 184, 0.13), transparent 38%);
}

.provider-lanes span {
  position: relative;
  overflow: hidden;
}

.provider-lanes span::after {
  content: "";
  position: absolute;
  inset: auto 14px 12px 14px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #4ade80, #38bdf8);
  opacity: 0.34;
}

.citation-link {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.72em;
  font-weight: 850;
  text-decoration: none;
  padding-inline: 0.08em;
}

.citation-link:hover,
.citation-link:focus-visible {
  color: var(--matrix-green);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.research-grid .portal-card {
  min-height: 100%;
}

.research-axo-note {
  display: grid;
  grid-template-columns: clamp(116px, 13vw, 168px) minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  width: min(100%, 640px);
  margin-top: 26px;
  padding: 12px 20px 12px 8px;
  border: 1px solid rgba(35, 64, 45, 0.16);
  border-radius: 24px;
  background:
    radial-gradient(circle at 10% 45%, rgba(74, 222, 128, 0.16), transparent 32%),
    rgba(255, 255, 255, 0.74);
  box-shadow: 0 20px 48px rgba(25, 48, 39, 0.10);
  color: var(--ink);
  text-decoration: none;
}

.research-axo-note img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(25, 48, 39, 0.18));
}

.research-axo-note span {
  display: block;
  color: var(--matrix-green);
  font: 900 0.72rem/1 var(--font-mono);
  letter-spacing: 0;
  text-transform: uppercase;
}

.research-axo-note strong {
  display: block;
  margin-top: 0.45rem;
  color: var(--ink-strong);
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.25;
}

.research-lab-panel {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: center;
  margin-top: clamp(1.2rem, 3vw, 2rem);
  padding: clamp(1.15rem, 3vw, 1.85rem);
  border: 1px solid rgba(35, 64, 45, 0.14);
  border-radius: 28px;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0.88) 0%, rgba(244, 250, 246, 0.78) 48%, rgba(226, 244, 237, 0.34) 100%),
    radial-gradient(circle at 86% 22%, rgba(125, 211, 252, 0.22), transparent 34%),
    radial-gradient(circle at 80% 78%, rgba(74, 222, 128, 0.14), transparent 35%);
  box-shadow: 0 24px 58px rgba(25, 48, 39, 0.09);
  overflow: hidden;
}

.research-lab-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.46) 48%, transparent 76%),
    radial-gradient(circle at 76% 52%, rgba(105, 221, 164, 0.20), transparent 33%);
  pointer-events: none;
}

.research-lab-panel h3 {
  max-width: 720px;
  margin: 0;
  color: var(--ink-strong);
  font-size: clamp(1.45rem, 3vw, 2.3rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.research-lab-panel p:not(.eyebrow) {
  max-width: 650px;
  margin: 0.8rem 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.6vw, 1.08rem);
  line-height: 1.65;
}

.research-lab-visual {
  position: relative;
  align-self: stretch;
  min-height: clamp(260px, 30vw, 420px);
  margin: calc(clamp(1.15rem, 3vw, 1.85rem) * -1);
  margin-left: 0;
}

.research-lab-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(247, 248, 244, 0.88) 0%, rgba(247, 248, 244, 0.30) 20%, transparent 42%),
    radial-gradient(circle at 42% 54%, rgba(141, 238, 183, 0.18), transparent 40%);
  pointer-events: none;
}

.research-lab-visual img {
  display: block;
  width: min(118%, 460px);
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: 57% 50%;
  margin-left: auto;
  transform: translateX(18px) scale(1.04);
  filter:
    saturate(1.04)
    contrast(0.98)
    drop-shadow(0 20px 38px rgba(20, 45, 34, 0.16));
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.72) 16%, #000 34%, #000 72%, rgba(0, 0, 0, 0.68) 88%, transparent 100%),
    radial-gradient(ellipse at 58% 52%, #000 0%, #000 56%, rgba(0, 0, 0, 0.72) 72%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.72) 16%, #000 34%, #000 72%, rgba(0, 0, 0, 0.68) 88%, transparent 100%),
    radial-gradient(ellipse at 58% 52%, #000 0%, #000 56%, rgba(0, 0, 0, 0.72) 72%, transparent 100%);
  mask-composite: intersect;
}

.source-grid article {
  scroll-margin-top: 110px;
}

.source-grid .text-link {
  margin-top: 0.85rem;
}

.research-fineprint-section {
  padding-block: clamp(1.8rem, 5vw, 3.5rem);
}

.research-fineprint-card {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.6rem);
  padding: clamp(1.2rem, 3vw, 1.8rem);
  border: 1px solid rgba(35, 64, 45, 0.16);
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 18px 40px rgba(25, 48, 39, 0.08);
}

.research-fineprint-card h2 {
  margin: 0;
  font-size: clamp(1.25rem, 2.4vw, 1.85rem);
}

.research-fineprint-card p,
.research-fineprint-grid span {
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.65;
}

.research-fineprint-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
}

.research-fineprint-grid article {
  display: grid;
  gap: 0.35rem;
}

.research-fineprint-grid strong {
  color: var(--ink);
  font-size: 0.9rem;
}

:root[data-theme="dark"] .research-fineprint-card {
  border-color: rgba(141, 238, 183, 0.16);
  background: rgba(8, 13, 17, 0.7);
  box-shadow: none;
}

:root[data-theme="dark"] .research-axo-note {
  border-color: rgba(141, 238, 183, 0.18);
  background:
    radial-gradient(circle at 10% 45%, rgba(74, 222, 128, 0.10), transparent 32%),
    rgba(8, 13, 17, 0.78);
  box-shadow: none;
}

:root[data-theme="dark"] .research-axo-note strong {
  color: rgba(255, 255, 255, 0.94);
}

:root[data-theme="dark"] .research-lab-panel {
  border-color: rgba(141, 238, 183, 0.16);
  background:
    linear-gradient(100deg, rgba(8, 13, 17, 0.92) 0%, rgba(11, 23, 19, 0.84) 52%, rgba(15, 32, 27, 0.48) 100%),
    radial-gradient(circle at 86% 22%, rgba(125, 211, 252, 0.12), transparent 34%),
    radial-gradient(circle at 80% 78%, rgba(74, 222, 128, 0.10), transparent 35%);
  box-shadow: none;
}

:root[data-theme="dark"] .research-lab-panel::before {
  background:
    linear-gradient(90deg, rgba(8, 13, 17, 0.90) 0%, rgba(8, 13, 17, 0.54) 48%, transparent 76%),
    radial-gradient(circle at 76% 52%, rgba(105, 221, 164, 0.12), transparent 33%);
}

:root[data-theme="dark"] .research-lab-panel h3 {
  color: rgba(255, 255, 255, 0.94);
}

:root[data-theme="dark"] .research-lab-visual::before {
  background:
    linear-gradient(90deg, rgba(8, 13, 17, 0.92) 0%, rgba(8, 13, 17, 0.38) 24%, transparent 48%),
    radial-gradient(circle at 42% 54%, rgba(141, 238, 183, 0.10), transparent 40%);
}

@media (max-width: 860px) {
  .research-fineprint-grid {
    grid-template-columns: 1fr 1fr;
  }

  .research-lab-panel {
    grid-template-columns: 1fr;
  }

  .research-lab-visual {
    min-height: 340px;
    margin: 0;
  }

  .research-lab-visual img {
    max-width: 420px;
    width: 100%;
    transform: none;
  }
}

@media (max-width: 560px) {
  .research-fineprint-grid {
    grid-template-columns: 1fr;
  }

  .research-axo-note {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 12px;
    padding: 10px 14px 10px 6px;
  }

  .research-lab-visual {
    min-height: 280px;
  }

  .research-lab-visual img {
    max-width: 100%;
  }
}

.site-version-badge {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 80;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  min-height: 30px;
  padding: 0.36rem 0.58rem;
  border: 1px solid rgba(35, 64, 45, 0.22);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(245, 248, 241, 0.72)),
    radial-gradient(circle at 20% 20%, rgba(183, 255, 88, 0.24), transparent 42%);
  box-shadow: 0 12px 30px rgba(20, 35, 24, 0.14);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.08em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

[data-theme="dark"] .site-version-badge {
  border-color: rgba(183, 255, 88, 0.20);
  background:
    linear-gradient(180deg, rgba(10, 18, 14, 0.86), rgba(5, 7, 6, 0.78)),
    radial-gradient(circle at 20% 20%, rgba(183, 255, 88, 0.22), transparent 42%);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
  color: #dfffaa;
}

@media (hover: hover) and (pointer: fine) {
  .site-version-badge:hover {
    transform: translateY(-1px);
    border-color: rgba(8, 125, 61, 0.30);
    box-shadow: 0 18px 40px rgba(20, 35, 24, 0.18);
  }

  .proof-strip article:hover,
  .hook-cards article:hover,
  .story-points article:hover,
  .surface-grid article:hover,
  .showcase-card:hover,
  .trust-list article:hover,
  .signal-flow-steps article:hover,
  .clip-stack article:hover,
  .thesis-points article:hover,
  .manifest-cards article:hover {
    transform: translateY(-4px);
    border-color: rgba(8, 125, 61, 0.22);
    box-shadow: 0 22px 60px rgba(30, 43, 32, 0.12);
  }

  .stage-card-main:hover,
  .stage-card-brief:hover,
  .stage-card-watch:hover {
    border-color: rgba(24, 183, 92, 0.22);
    box-shadow: 0 42px 110px rgba(30, 43, 32, 0.24);
  }
}

@media (max-width: 1080px) {
  .stage-micro-card-top {
    right: 2%;
  }

  .stage-micro-card-bottom {
    display: none;
    left: 2%;
  }
}

@media (max-width: 720px) {
  .moonshot-hero {
    min-height: auto;
  }

  .moonshot-hero::after,
  .stage-micro-card {
    display: none;
  }

  .stage-card-watch {
    width: min(100%, 292px);
  }
}

/* ==========================================================================
 * web.20 — added visual rhythm without replacing existing sections
 * ========================================================================== */

.motion-rail-section {
  overflow: hidden;
  padding: 14px 0;
  border-bottom: 1px solid rgba(30, 43, 32, 0.08);
  background:
    linear-gradient(90deg, rgba(17, 22, 17, 0.96), rgba(10, 16, 13, 0.98)),
    #111611;
}

.motion-rail {
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.motion-rail-track {
  display: flex;
  width: max-content;
  gap: 10px;
  padding-inline: 10px;
  animation: motion-rail-drift 34s linear infinite;
}

.motion-rail-track span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.motion-rail-track span:nth-child(3n + 1) {
  border-color: rgba(74, 222, 128, 0.26);
  color: #bdf6ce;
}

.motion-rail-track span:nth-child(3n + 2) {
  border-color: rgba(56, 189, 248, 0.24);
  color: #c4efff;
}

.motion-rail-track span:nth-child(3n + 3) {
  border-color: rgba(179, 128, 250, 0.24);
  color: #eadbff;
}

@keyframes motion-rail-drift {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.clip-preview-reel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 34px;
}

.clip-preview-reel article {
  position: relative;
  overflow: hidden;
  min-height: 260px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 18%, rgba(74, 222, 128, 0.12), transparent 36%),
    rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.clip-preview-reel article::after {
  content: "";
  position: absolute;
  inset: auto 16px 16px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #4ade80, #38bdf8, transparent);
  opacity: 0.62;
}

.clip-preview-reel article > span {
  display: inline-flex;
  color: #4ade80;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 900;
}

.clip-preview-reel article > strong {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 30px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.22;
}

.reel-phone,
.reel-watch,
.reel-brief,
.reel-pro {
  position: relative;
  display: grid;
  margin: 26px auto 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(2, 6, 5, 0.58);
}

.reel-phone {
  width: 118px;
  height: 166px;
  padding: 16px 14px;
  border-radius: 26px;
  gap: 10px;
}

.reel-phone i,
.reel-brief i,
.reel-pro i,
.mini-brief-lines i,
.mini-roster i,
.mini-consent i {
  display: block;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.reel-phone i:nth-child(1) { height: 46px; background: linear-gradient(90deg, rgba(74, 222, 128, 0.84), rgba(56, 189, 248, 0.66)); }
.reel-phone i:nth-child(2) { height: 14px; width: 80%; }
.reel-phone i:nth-child(3) { height: 14px; width: 62%; }

.reel-watch {
  width: 122px;
  height: 154px;
  place-items: center;
  border-radius: 40px;
}

.reel-watch::before,
.mini-watch-face::before {
  content: "";
  position: absolute;
  inset: 20px;
  border: 2px solid rgba(74, 222, 128, 0.78);
  border-radius: 50%;
  box-shadow: 0 0 22px rgba(74, 222, 128, 0.20);
}

.reel-watch i {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74, 222, 128, 0.96), rgba(56, 189, 248, 0.35));
}

.reel-brief {
  width: 150px;
  height: 142px;
  align-content: center;
  padding: 18px;
  border-radius: 22px;
  gap: 12px;
}

.reel-brief i:nth-child(1) { height: 16px; width: 88%; background: rgba(74, 222, 128, 0.80); }
.reel-brief i:nth-child(2) { height: 12px; width: 72%; }
.reel-brief i:nth-child(3) { height: 12px; width: 58%; }

.reel-pro {
  width: 158px;
  height: 146px;
  align-content: center;
  padding: 16px;
  border-radius: 22px;
  gap: 10px;
}

.reel-pro i {
  height: 16px;
}

.reel-pro i:nth-child(1) { width: 94%; background: rgba(251, 191, 36, 0.62); }
.reel-pro i:nth-child(2) { width: 82%; background: rgba(74, 222, 128, 0.62); }
.reel-pro i:nth-child(3) { width: 72%; background: rgba(56, 189, 248, 0.56); }
.reel-pro i:nth-child(4) { width: 62%; }

.experience-canvas-section {
  position: relative;
  overflow: hidden;
  padding: 96px 0;
  background:
    radial-gradient(circle at 12% 0%, rgba(56, 189, 248, 0.12), transparent 30%),
    radial-gradient(circle at 86% 84%, rgba(74, 222, 128, 0.12), transparent 32%),
    #fbfcf8;
}

.experience-canvas-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(30, 43, 32, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 43, 32, 0.04) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.72) 18%, rgba(0, 0, 0, 0.72) 78%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.72) 18%, rgba(0, 0, 0, 0.72) 78%, transparent);
  pointer-events: none;
}

.experience-canvas-section .page-shell {
  position: relative;
}

.experience-canvas-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin-top: 34px;
}

.experience-tile {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: space-between;
  min-height: 280px;
  padding: 20px;
  border: 1px solid rgba(30, 43, 32, 0.10);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 16px 44px rgba(30, 43, 32, 0.07);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.experience-tile:nth-child(1),
.experience-tile:nth-child(5) {
  grid-column: span 2;
}

.experience-tile:nth-child(2),
.experience-tile:nth-child(3),
.experience-tile:nth-child(4),
.experience-tile:nth-child(6) {
  grid-column: span 1;
}

.experience-tile::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(24, 183, 92, 0.72), rgba(22, 159, 196, 0.50), transparent);
  opacity: 0.64;
}

.experience-tile > span {
  display: inline-flex;
  color: var(--matrix-green);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.experience-tile h3 {
  position: relative;
  z-index: 1;
  margin: 22px 0 16px;
  color: var(--ink-strong);
  font-size: 19px;
  line-height: 1.18;
}

.mini-rings,
.mini-photo-stack,
.mini-watch-face,
.mini-brief-lines,
.mini-roster,
.mini-consent {
  position: relative;
  z-index: 1;
  min-height: 138px;
  margin-top: 18px;
}

.mini-rings {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mini-rings i {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #ffffff 42%, transparent 44%),
    conic-gradient(#4ade80 0 72%, rgba(30, 43, 32, 0.10) 72% 100%);
  box-shadow: 0 14px 34px rgba(30, 43, 32, 0.10);
}

.mini-rings i:nth-child(2) {
  width: 58px;
  height: 58px;
  background:
    radial-gradient(circle, #ffffff 42%, transparent 44%),
    conic-gradient(#38bdf8 0 58%, rgba(30, 43, 32, 0.10) 58% 100%);
}

.mini-rings i:nth-child(3) {
  width: 46px;
  height: 46px;
  background:
    radial-gradient(circle, #ffffff 42%, transparent 44%),
    conic-gradient(#b380fa 0 44%, rgba(30, 43, 32, 0.10) 44% 100%);
}

.mini-photo-stack i {
  position: absolute;
  inset: auto;
  width: 84px;
  height: 108px;
  border: 1px solid rgba(30, 43, 32, 0.10);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent),
    linear-gradient(145deg, rgba(74, 222, 128, 0.36), rgba(56, 189, 248, 0.22));
  box-shadow: 0 14px 34px rgba(30, 43, 32, 0.10);
}

.mini-photo-stack i:nth-child(1) { left: 0; top: 20px; transform: rotate(-7deg); }
.mini-photo-stack i:nth-child(2) { left: 38px; top: 8px; transform: rotate(2deg); }
.mini-photo-stack i:nth-child(3) { left: 72px; top: 28px; transform: rotate(8deg); }

.mini-watch-face {
  width: 132px;
  margin-inline: auto;
  border: 1px solid rgba(30, 43, 32, 0.10);
  border-radius: 44px;
  background: #111611;
  box-shadow: 0 18px 42px rgba(30, 43, 32, 0.16);
}

.mini-watch-face i:nth-child(1) {
  position: absolute;
  left: 42px;
  top: 42px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74, 222, 128, 0.94), rgba(56, 189, 248, 0.30));
}

.mini-watch-face i:nth-child(2) {
  position: absolute;
  left: 48px;
  bottom: 24px;
  width: 36px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.54);
}

.mini-brief-lines,
.mini-roster,
.mini-consent {
  display: grid;
  align-content: center;
  gap: 12px;
}

.mini-brief-lines i {
  height: 14px;
  background: rgba(30, 43, 32, 0.10);
}

.mini-brief-lines i:nth-child(1) { width: 92%; background: rgba(74, 222, 128, 0.72); }
.mini-brief-lines i:nth-child(2) { width: 78%; }
.mini-brief-lines i:nth-child(3) { width: 66%; }
.mini-brief-lines i:nth-child(4) { width: 54%; }

.mini-roster i {
  height: 18px;
  background: rgba(30, 43, 32, 0.10);
}

.mini-roster i:nth-child(1) { width: 96%; background: rgba(251, 191, 36, 0.46); }
.mini-roster i:nth-child(2) { width: 88%; background: rgba(74, 222, 128, 0.46); }
.mini-roster i:nth-child(3) { width: 78%; background: rgba(56, 189, 248, 0.42); }
.mini-roster i:nth-child(4) { width: 68%; }

.mini-consent {
  grid-template-columns: 1fr;
}

.mini-consent i {
  height: 34px;
  border: 1px solid rgba(30, 43, 32, 0.08);
  background: rgba(255, 255, 255, 0.74);
}

.mini-consent i::before {
  content: "";
  display: block;
  width: 42%;
  height: 8px;
  margin: 12px;
  border-radius: 999px;
  background: rgba(24, 183, 92, 0.62);
}

:root[data-theme="dark"] .motion-rail-section,
:root[data-theme="dark"] .experience-canvas-section {
  background: #050608;
}

:root[data-theme="dark"] .experience-tile {
  background: rgba(18, 22, 20, 0.84);
  border-color: rgba(255, 255, 255, 0.10);
}

:root[data-theme="dark"] .mini-brief-lines i,
:root[data-theme="dark"] .mini-roster i,
:root[data-theme="dark"] .mini-consent i {
  background: rgba(255, 255, 255, 0.12);
}

:root[data-theme="dark"] .mini-rings i {
  background:
    radial-gradient(circle, #111611 42%, transparent 44%),
    conic-gradient(#4ade80 0 72%, rgba(255, 255, 255, 0.10) 72% 100%);
}

:root[data-theme="dark"] .mini-rings i:nth-child(2) {
  background:
    radial-gradient(circle, #111611 42%, transparent 44%),
    conic-gradient(#38bdf8 0 58%, rgba(255, 255, 255, 0.10) 58% 100%);
}

:root[data-theme="dark"] .mini-rings i:nth-child(3) {
  background:
    radial-gradient(circle, #111611 42%, transparent 44%),
    conic-gradient(#b380fa 0 44%, rgba(255, 255, 255, 0.10) 44% 100%);
}

@media (hover: hover) and (pointer: fine) {
  .experience-tile:hover,
  .clip-preview-reel article:hover {
    transform: translateY(-4px);
    border-color: rgba(8, 125, 61, 0.22);
    box-shadow: 0 22px 60px rgba(30, 43, 32, 0.12);
  }
}

@media (max-width: 1080px) {
  .clip-preview-reel,
  .experience-canvas-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .experience-tile,
  .experience-tile:nth-child(1),
  .experience-tile:nth-child(2),
  .experience-tile:nth-child(3),
  .experience-tile:nth-child(4),
  .experience-tile:nth-child(5),
  .experience-tile:nth-child(6) {
    grid-column: span 1;
  }
}

@media (max-width: 720px) {
  .motion-rail-section {
    padding: 10px 0;
  }

  .motion-rail-track {
    animation-duration: 42s;
  }

  .clip-preview-reel,
  .experience-canvas-grid {
    grid-template-columns: 1fr;
  }

  .clip-preview-reel article,
  .experience-tile {
    min-height: 230px;
  }

  .experience-canvas-section {
    padding: 62px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-rail-track {
    animation: none;
    transform: none;
  }
}

/* ==========================================================================
 * web.24 — calmer site-wide Core grid texture with gradient falloff
 * ========================================================================== */

:root {
  --core-grid-major: rgba(84, 92, 84, 0.082);
  --core-grid-minor: rgba(84, 92, 84, 0.082);
}

:root[data-theme="dark"] {
  --core-grid-major: rgba(255, 255, 255, 0.046);
  --core-grid-minor: rgba(255, 255, 255, 0.046);
}

main {
  position: relative;
  isolation: isolate;
}

main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(var(--core-grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--core-grid-major) 1px, transparent 1px),
    linear-gradient(var(--core-grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--core-grid-minor) 1px, transparent 1px);
  background-size:
    48px 48px,
    48px 48px,
    12px 12px,
    12px 12px;
  opacity: 0.74;
  mask-image:
    radial-gradient(ellipse 92% 70% at 50% 18%, rgba(0, 0, 0, 0.90), rgba(0, 0, 0, 0.62) 48%, rgba(0, 0, 0, 0.34) 78%, rgba(0, 0, 0, 0.16) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.44) 76%, rgba(0, 0, 0, 0.22));
  -webkit-mask-image:
    radial-gradient(ellipse 92% 70% at 50% 18%, rgba(0, 0, 0, 0.90), rgba(0, 0, 0, 0.62) 48%, rgba(0, 0, 0, 0.34) 78%, rgba(0, 0, 0, 0.16) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.44) 76%, rgba(0, 0, 0, 0.22));
  pointer-events: none;
}

main > section {
  position: relative;
}

main > section .page-shell,
main > section .nav-shell {
  position: relative;
  z-index: 2;
}

.site-footer.footer-v3 {
  position: relative;
  overflow: hidden;
}

.site-footer.footer-v3::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.044) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.044) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.044) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.044) 1px, transparent 1px);
  background-size:
    48px 48px,
    48px 48px,
    12px 12px,
    12px 12px;
  opacity: 0.70;
  pointer-events: none;
}

.footer-v3-shell,
.footer-v3-base {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
 * web.22 — more visible Core gridlines across major public surfaces
 * ========================================================================== */

.audience-hook-section,
.story-band,
.showcase-section,
.signal-flow-section,
.investor-thesis-section,
.platform-moonshot,
.trust-moonshot,
.alpha-cta,
.portal-hero,
.alpha-hero,
.provider-depth,
.legal-section,
.roadmap-section {
  position: relative;
  overflow: hidden;
}

.audience-hook-section::before,
.story-band::before,
.showcase-section::before,
.signal-flow-section::before,
.investor-thesis-section::before,
.platform-moonshot::before,
.trust-moonshot::before,
.alpha-cta::before,
.portal-hero::before,
.alpha-hero::before,
.provider-depth::before,
.legal-section::before,
.roadmap-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(67, 78, 67, 0.050) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67, 78, 67, 0.050) 1px, transparent 1px),
    linear-gradient(rgba(67, 78, 67, 0.050) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67, 78, 67, 0.050) 1px, transparent 1px);
  background-size:
    42px 42px,
    42px 42px,
    10.5px 10.5px,
    10.5px 10.5px;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.70) 14%, rgba(0, 0, 0, 0.70) 86%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.70) 14%, rgba(0, 0, 0, 0.70) 86%, transparent 100%);
  opacity: 0.38;
  pointer-events: none;
}

.audience-hook-section > .page-shell,
.story-band > .page-shell,
.showcase-section > .page-shell,
.signal-flow-section > .page-shell,
.investor-thesis-section > .page-shell,
.platform-moonshot > .page-shell,
.trust-moonshot > .page-shell,
.alpha-cta > .page-shell,
.portal-hero > .page-shell,
.alpha-hero > .page-shell,
.provider-depth > .page-shell,
.legal-section > .page-shell,
.roadmap-section > .page-shell {
  position: relative;
  z-index: 2;
}

.motion-rail-section {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] .audience-hook-section::before,
:root[data-theme="dark"] .story-band::before,
:root[data-theme="dark"] .showcase-section::before,
:root[data-theme="dark"] .signal-flow-section::before,
:root[data-theme="dark"] .investor-thesis-section::before,
:root[data-theme="dark"] .platform-moonshot::before,
:root[data-theme="dark"] .trust-moonshot::before,
:root[data-theme="dark"] .alpha-cta::before,
:root[data-theme="dark"] .portal-hero::before,
:root[data-theme="dark"] .alpha-hero::before,
:root[data-theme="dark"] .provider-depth::before,
:root[data-theme="dark"] .legal-section::before,
:root[data-theme="dark"] .roadmap-section::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.070) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.070) 1px, transparent 1px);
}

/* ==========================================================================
 * web.32 — Axo Hero brand presence
 * ========================================================================== */

.axo-hero-card {
  position: absolute;
  right: 7%;
  bottom: 44px;
  z-index: 6;
  width: min(176px, 28%);
  min-width: 136px;
  aspect-ratio: 1 / 1;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(30, 43, 32, 0.14);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.42)),
    rgba(244, 250, 240, 0.62);
  box-shadow: 0 28px 76px rgba(17, 22, 17, 0.22);
  isolation: isolate;
  animation: axo-card-float 7.4s ease-in-out infinite;
}

.axo-hero-card::before,
.axo-hero-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.axo-hero-card::before {
  inset: -34%;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(74, 222, 128, 0.32), transparent 34%),
    conic-gradient(from 120deg, transparent, rgba(22, 159, 196, 0.22), transparent, rgba(24, 183, 92, 0.24), transparent);
  animation: axo-orbit-turn 18s linear infinite;
}

.axo-hero-card::after {
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(180deg, transparent 0%, transparent 48%, rgba(8, 11, 9, 0.24) 70%, rgba(8, 11, 9, 0.68) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.20), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.10));
}

.axo-hero-card img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  color: transparent;
  font-size: 0;
  filter: saturate(1.08) contrast(1.02);
  mask-image: radial-gradient(circle at 50% 42%, #000 0%, #000 58%, rgba(0, 0, 0, 0.86) 74%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 0%, #000 58%, rgba(0, 0, 0, 0.86) 74%, transparent 100%);
}

.axo-hero-card figcaption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 4;
  color: #ffffff;
}

.axo-hero-card figcaption span {
  display: block;
  color: rgba(157, 255, 195, 0.92);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.axo-hero-card figcaption strong {
  display: block;
  margin-top: 5px;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.18;
}

.axo-hero-orbit {
  position: absolute;
  inset: 15%;
  z-index: 2;
  pointer-events: none;
}

.axo-hero-orbit i {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 18px rgba(74, 222, 128, 0.92);
  animation: axo-blip 2.8s ease-in-out infinite;
}

.axo-hero-orbit i:nth-child(1) {
  left: 9%;
  top: 28%;
}

.axo-hero-orbit i:nth-child(2) {
  right: 5%;
  top: 44%;
  animation-delay: 0.72s;
}

.axo-hero-orbit i:nth-child(3) {
  left: 52%;
  bottom: 8%;
  animation-delay: 1.34s;
}

.axo-intro-section {
  position: relative;
  overflow: hidden;
  padding: 88px 0 96px;
  background:
    radial-gradient(circle at 18% 22%, rgba(24, 183, 92, 0.14), transparent 30%),
    radial-gradient(circle at 82% 72%, rgba(22, 159, 196, 0.12), transparent 34%),
    linear-gradient(180deg, #fbfcf8 0%, #f1f6ef 100%);
}

.axo-intro-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(67, 78, 67, 0.050) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67, 78, 67, 0.050) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse 86% 72% at 50% 48%, rgba(0, 0, 0, 0.80), transparent 82%);
  -webkit-mask-image: radial-gradient(ellipse 86% 72% at 50% 48%, rgba(0, 0, 0, 0.80), transparent 82%);
  opacity: 0.54;
  pointer-events: none;
}

.axo-intro-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
  gap: 54px;
  align-items: center;
}

.axo-portrait-card {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  margin: 0;
  border: 1px solid rgba(30, 43, 32, 0.13);
  border-radius: 36px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(244, 250, 240, 0.58)),
    rgba(255, 255, 255, 0.72);
  box-shadow: 0 30px 90px rgba(30, 43, 32, 0.15);
  isolation: isolate;
}

.axo-portrait-card::before,
.axo-portrait-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.axo-portrait-card::before {
  inset: 22px;
  z-index: 3;
  border: 1px solid rgba(74, 222, 128, 0.20);
  border-radius: 26px;
}

.axo-portrait-card::after {
  left: 28px;
  right: 28px;
  bottom: 28px;
  z-index: 4;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(74, 222, 128, 0.88), rgba(56, 189, 248, 0.62), transparent);
  box-shadow: 0 0 24px rgba(74, 222, 128, 0.42);
}

.axo-portrait-card img {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.08) contrast(1.03);
  mask-image: linear-gradient(180deg, #000 0%, #000 76%, rgba(0, 0, 0, 0.78) 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 76%, rgba(0, 0, 0, 0.78) 88%, transparent 100%);
}

.axo-portrait-halo {
  position: absolute;
  inset: 8%;
  z-index: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 48% 38%, rgba(74, 222, 128, 0.36), transparent 36%),
    radial-gradient(circle at 64% 58%, rgba(56, 189, 248, 0.26), transparent 38%);
  filter: blur(8px);
  animation: axo-halo-pulse 5.2s ease-in-out infinite;
}

.axo-portrait-scan {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 18%;
  z-index: 5;
  height: 1px;
  border-radius: 999px;
  background: rgba(157, 255, 195, 0.72);
  box-shadow: 0 0 22px rgba(74, 222, 128, 0.52);
  animation: axo-scan-drift 6.8s ease-in-out infinite;
}

.axo-intro-copy h2 {
  max-width: 760px;
  color: var(--ink-strong);
  font-size: 50px;
  line-height: 1.07;
}

.axo-intro-copy > p:not(.site-kicker),
.axo-lede-lockup p {
  max-width: 730px;
  color: var(--soft);
  font-size: 18px;
  line-height: 1.7;
}

.axo-lede-lockup {
  display: grid;
  grid-template-columns: 78px minmax(0, 730px);
  gap: 20px;
  align-items: start;
  max-width: 840px;
  margin-top: 22px;
}

.axo-lede-lockup p {
  margin: 0;
}

.axo-lede-guide {
  position: relative;
  width: 74px;
  margin: 4px 0 0;
  pointer-events: none;
}

.axo-lede-guide::after {
  content: "";
  position: absolute;
  top: 43%;
  left: calc(100% + 5px);
  width: 34px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(24, 183, 92, 0.62), rgba(22, 159, 196, 0.22), transparent);
}

.axo-lede-guide img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 14px 24px rgba(30, 43, 32, 0.14)) saturate(1.06) contrast(1.02);
}

.axo-principle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 30px;
}

.axo-principle-grid article {
  position: relative;
  overflow: hidden;
  min-height: 210px;
  padding: 22px;
  border: 1px solid rgba(30, 43, 32, 0.10);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 16px 42px rgba(30, 43, 32, 0.07);
}

.axo-principle-grid article::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 18px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(24, 183, 92, 0.74), rgba(22, 159, 196, 0.50), transparent);
}

.axo-principle-grid span {
  display: inline-flex;
  color: var(--matrix-green);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.axo-principle-grid strong {
  display: block;
  margin-top: 22px;
  color: var(--ink-strong);
  font-size: 18px;
  line-height: 1.22;
}

.axo-principle-grid p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.axo-pose-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.axo-pose-strip figure {
  position: relative;
  overflow: hidden;
  min-height: 170px;
  margin: 0;
  border: 1px solid rgba(30, 43, 32, 0.10);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 22%, rgba(74, 222, 128, 0.16), transparent 42%),
    rgba(255, 255, 255, 0.72);
  box-shadow: 0 12px 34px rgba(30, 43, 32, 0.06);
}

.axo-pose-strip figure::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 42px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(24, 183, 92, 0.54), transparent);
}

.axo-pose-strip img {
  position: absolute;
  left: 50%;
  bottom: 26px;
  width: 150px;
  max-width: 92%;
  transform: translateX(-50%);
  filter: saturate(1.08) contrast(1.02);
  mask-image: radial-gradient(circle at 50% 42%, #000 0%, #000 66%, rgba(0, 0, 0, 0.78) 82%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 0%, #000 66%, rgba(0, 0, 0, 0.78) 82%, transparent 100%);
  animation: axo-pose-breathe 4.8s ease-in-out infinite;
}

.axo-pose-strip figure:nth-child(2) img {
  animation-delay: 0.52s;
}

.axo-pose-strip figure:nth-child(3) img {
  animation-delay: 1.04s;
}

.axo-pose-strip figcaption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  color: var(--ink-strong);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
}

:root[data-theme="dark"] .axo-hero-card {
  border-color: rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(18, 22, 20, 0.78), rgba(8, 11, 9, 0.52)),
    rgba(8, 11, 9, 0.72);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.38);
}

:root[data-theme="dark"] .axo-intro-section {
  background:
    radial-gradient(circle at 18% 22%, rgba(74, 222, 128, 0.13), transparent 32%),
    radial-gradient(circle at 82% 72%, rgba(56, 189, 248, 0.11), transparent 34%),
    linear-gradient(180deg, rgba(5, 6, 8, 0.98), rgba(9, 12, 10, 0.98)),
    #050608;
}

:root[data-theme="dark"] .axo-intro-section::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.062) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.062) 1px, transparent 1px);
}

:root[data-theme="dark"] .axo-portrait-card,
:root[data-theme="dark"] .axo-principle-grid article,
:root[data-theme="dark"] .axo-pose-strip figure {
  border-color: rgba(255, 255, 255, 0.10);
  background: rgba(18, 22, 20, 0.84);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.30);
}

:root[data-theme="dark"] .axo-intro-copy h2,
:root[data-theme="dark"] .axo-principle-grid strong,
:root[data-theme="dark"] .axo-pose-strip figcaption {
  color: rgba(255, 255, 255, 0.94);
}

:root[data-theme="dark"] .axo-intro-copy > p:not(.site-kicker),
:root[data-theme="dark"] .axo-lede-lockup p,
:root[data-theme="dark"] .axo-principle-grid p {
  color: rgba(255, 255, 255, 0.70);
}

@keyframes axo-card-float {
  0%, 100% { transform: rotate(-1deg) translate3d(0, 0, 0); }
  50% { transform: rotate(1deg) translate3d(0, -10px, 0); }
}

@keyframes axo-orbit-turn {
  to { transform: rotate(360deg); }
}

@keyframes axo-blip {
  0%, 100% { opacity: 0.32; transform: scale(0.82); }
  48% { opacity: 1; transform: scale(1.22); }
}

@keyframes axo-halo-pulse {
  0%, 100% { opacity: 0.70; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1.03); }
}

@keyframes axo-scan-drift {
  0%, 100% { opacity: 0.18; transform: translateY(0); }
  18% { opacity: 0.92; }
  52% { opacity: 0.78; transform: translateY(285px); }
  74% { opacity: 0.18; transform: translateY(285px); }
}

@keyframes axo-pose-breathe {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
  50% { transform: translateX(-50%) translateY(-6px) scale(1.015); }
}

@media (max-width: 1080px) {
  .axo-hero-card {
    right: 4%;
    bottom: 42px;
    width: min(228px, 36%);
  }

  .axo-intro-grid {
    grid-template-columns: 1fr;
  }

  .axo-portrait-card {
    max-width: 560px;
    width: 100%;
  }
}

@media (max-width: 720px) {
  .axo-hero-card {
    position: relative;
    inset: auto;
    width: min(100%, 280px);
    min-width: 0;
    margin: 0 auto;
    transform: none;
    animation: none;
  }

  .axo-hero-card::before {
    animation: none;
  }

  .axo-intro-section {
    padding: 62px 0;
  }

  .axo-portrait-card {
    min-height: 360px;
    border-radius: 28px;
  }

  .axo-intro-copy h2 {
    font-size: 34px;
    line-height: 1.1;
  }

  .axo-intro-copy > p:not(.site-kicker),
  .axo-lede-lockup p {
    font-size: 16px;
  }

  .axo-principle-grid {
    grid-template-columns: 1fr;
  }

  .axo-pose-strip {
    grid-template-columns: repeat(4, minmax(108px, 1fr));
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .axo-principle-grid article {
    min-height: auto;
  }

  .axo-portrait-scan {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .axo-hero-card,
  .axo-hero-card::before,
  .axo-hero-orbit i,
  .axo-portrait-halo,
  .axo-portrait-scan,
  .axo-pose-strip img {
    animation: none;
  }
}

/* ==========================================================================
 * web.32 — subtle Axo brand nudges across public pages
 * ========================================================================== */

.axo-brand-nudge {
  position: relative;
  display: inline-grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  max-width: 420px;
  min-height: 70px;
  margin-top: 18px;
  padding: 8px 14px 8px 8px;
  border: 1px solid rgba(30, 43, 32, 0.12);
  border-radius: 22px;
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.82), rgba(244, 250, 240, 0.66)),
    rgba(255, 255, 255, 0.72);
  box-shadow: 0 14px 38px rgba(30, 43, 32, 0.08);
  color: var(--ink-strong);
  overflow: hidden;
  vertical-align: top;
}

.axo-brand-nudge::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 50%, rgba(74, 222, 128, 0.18), transparent 34%),
    linear-gradient(90deg, rgba(24, 183, 92, 0.12), transparent 42%);
  pointer-events: none;
}

.axo-brand-nudge img,
.axo-brand-nudge div {
  position: relative;
  z-index: 1;
}

.axo-brand-nudge img {
  width: 54px;
  height: 54px;
  border: 1px solid rgba(30, 43, 32, 0.10);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.70);
  box-shadow: 0 8px 22px rgba(30, 43, 32, 0.10);
  object-fit: cover;
  object-position: center;
  filter: saturate(1.08) contrast(1.02);
  mask-image: radial-gradient(circle at 50% 44%, #000 0%, #000 70%, rgba(0, 0, 0, 0.80) 84%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle at 50% 44%, #000 0%, #000 70%, rgba(0, 0, 0, 0.80) 84%, transparent 100%);
}

.axo-brand-nudge span,
.axo-brand-nudge strong {
  display: block;
}

.axo-brand-nudge span {
  color: var(--matrix-green);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.axo-brand-nudge strong {
  margin-top: 4px;
  color: inherit;
  font-size: 13px;
  line-height: 1.25;
}

.axo-nudge-terminal {
  display: grid;
  max-width: none;
  margin-top: 14px;
  border-color: rgba(74, 222, 128, 0.20);
  background:
    linear-gradient(135deg, rgba(74, 222, 128, 0.11), rgba(255, 255, 255, 0.06)),
    rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.92);
  box-shadow: none;
}

.axo-nudge-terminal img {
  border-color: rgba(74, 222, 128, 0.22);
  background: rgba(255, 255, 255, 0.10);
}

.axo-nudge-terminal span {
  color: #4ade80;
}

.axo-nudge-cta {
  max-width: 430px;
}

.hero-copy .axo-nudge-hero {
  margin-top: 22px;
}

a.axo-brand-nudge {
  text-decoration: none;
}

:root[data-theme="dark"] .axo-brand-nudge {
  border-color: rgba(255, 255, 255, 0.10);
  background:
    linear-gradient(140deg, rgba(18, 22, 20, 0.86), rgba(8, 11, 9, 0.68)),
    rgba(18, 22, 20, 0.78);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.26);
  color: rgba(255, 255, 255, 0.92);
}

:root[data-theme="dark"] .axo-brand-nudge::before {
  background:
    radial-gradient(circle at 22% 50%, rgba(74, 222, 128, 0.16), transparent 34%),
    linear-gradient(90deg, rgba(74, 222, 128, 0.10), transparent 42%);
}

:root[data-theme="dark"] .axo-brand-nudge img {
  border-color: rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.08);
}

a.axo-brand-nudge:focus-visible {
  outline: 3px solid rgba(24, 183, 92, 0.45);
  outline-offset: 4px;
}

@media (max-width: 720px) {
  .axo-brand-nudge {
    grid-template-columns: 48px minmax(0, 1fr);
    width: 100%;
    max-width: none;
    min-height: 64px;
    border-radius: 20px;
  }

  .axo-brand-nudge img {
    width: 48px;
    height: 48px;
    border-radius: 16px;
  }
}

/* ==========================================================================
 * web.36 — Axo as a small margin guide, not a hero object
 * ========================================================================== */

.axo-copy-anchor {
  position: relative;
}

.axo-pointer {
  position: absolute;
  z-index: 6;
  display: block;
  width: 58px;
  height: 58px;
  pointer-events: none;
  filter: drop-shadow(0 14px 26px rgba(30, 43, 32, 0.16));
}

.axo-pointer img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.08) contrast(1.02);
}

.axo-pointer::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 38px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(24, 183, 92, 0.02), rgba(24, 183, 92, 0.42), rgba(22, 159, 196, 0.22));
}

.axo-pointer-right {
  top: 50%;
  right: -78px;
  transform: translateY(-50%);
}

.axo-pointer-right::after {
  right: 100%;
}

.axo-pointer-left {
  top: 50%;
  left: -78px;
  transform: translateY(-50%);
}

.axo-pointer-left::after {
  left: 100%;
  transform: scaleX(-1);
}

.axo-pointer-hero {
  top: 34px;
  right: -82px;
}

.axo-pointer-intro,
.axo-pointer-film {
  top: 28px;
}

.axo-pointer-trust,
.axo-pointer-alpha {
  top: 32px;
}

.axo-pointer-terminal {
  top: 16px;
  right: -76px;
}

.axo-pointer-card {
  top: 18px;
  width: 46px;
  height: 46px;
  transform: none;
}

.axo-pointer-card::after {
  width: 26px;
}

.axo-pointer-card-right {
  right: 18px;
}

.axo-pointer-card-left {
  left: 18px;
}

.axo-pointer-figure {
  width: 82px;
  height: 92px;
  filter: drop-shadow(0 16px 28px rgba(30, 43, 32, 0.18));
}

.axo-pointer-figure img {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  object-fit: contain;
  filter: saturate(1.08) contrast(1.02);
  mask-image: none;
  -webkit-mask-image: none;
}

.axo-pointer-figure.axo-pointer-right {
  right: -104px;
}

.axo-pointer-figure.axo-pointer-left {
  left: -104px;
}

.axo-pointer-core {
  width: 74px;
  height: 90px;
}

.axo-pointer-figure::after {
  top: 46%;
  width: 34px;
}

.axo-pointer-card.axo-pointer-figure {
  top: 12px;
  width: 58px;
  height: 66px;
}

.axo-pointer-card.axo-pointer-figure::after {
  top: 42%;
}

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

.axo-intro-copy {
  position: relative;
  max-width: 1040px;
}

.axo-intro-copy > p:not(.site-kicker),
.axo-lede-lockup p {
  max-width: 760px;
}

.axo-principle-grid article {
  overflow: hidden;
  padding-right: 22px;
  isolation: isolate;
}

:root[data-theme="dark"] .axo-pointer {
  filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.32));
}

:root[data-theme="dark"] .axo-pointer img {
  border: 0;
  background: transparent;
  box-shadow: none;
}

:root[data-theme="dark"] .axo-pointer::after {
  background: linear-gradient(90deg, rgba(74, 222, 128, 0.02), rgba(74, 222, 128, 0.44), rgba(56, 189, 248, 0.24));
}

:root[data-theme="dark"] .axo-pointer-figure {
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.34));
}

:root[data-theme="dark"] .axo-pointer-figure img {
  border: 0;
  background: transparent;
  box-shadow: none;
}

:root[data-theme="dark"] .axo-lede-guide img {
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.32)) saturate(1.08) contrast(1.03);
}

:root[data-theme="dark"] .axo-lede-guide::after {
  background: linear-gradient(90deg, rgba(74, 222, 128, 0.58), rgba(56, 189, 248, 0.24), transparent);
}

@media (max-width: 1200px) {
  .axo-pointer-right {
    right: -58px;
  }

  .axo-pointer-left {
    left: -58px;
  }

  .axo-pointer-card-right {
    right: 14px;
  }

  .axo-pointer-card-left {
    left: 14px;
  }

  .axo-pointer-figure.axo-pointer-right {
    right: -78px;
  }

  .axo-pointer-figure.axo-pointer-left {
    left: -78px;
  }
}

@media (max-width: 980px) {
  .axo-lede-lockup {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 16px;
    max-width: 100%;
  }

  .axo-lede-guide {
    width: 54px;
    margin-top: 5px;
  }

  .axo-lede-guide::after {
    width: 22px;
  }

  .axo-pointer {
    display: none;
  }

  .axo-pointer::after {
    display: none;
  }
}

@media (max-width: 720px) {
  .axo-lede-lockup {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 14px;
  }

  .axo-lede-guide {
    width: 44px;
  }

  .axo-lede-guide::after {
    left: calc(100% + 3px);
    width: 16px;
  }

  .axo-principle-grid article {
    overflow: hidden;
  }
}

/* ==========================================================================
 * web.56 — AxoAI marketing page
 * ========================================================================== */

.ai-hero {
  position: relative;
  overflow: hidden;
  padding: 138px 0 96px;
  background:
    radial-gradient(circle at 78% 18%, rgba(24, 183, 92, 0.18), transparent 30%),
    radial-gradient(circle at 22% 72%, rgba(56, 189, 248, 0.12), transparent 32%),
    linear-gradient(180deg, rgba(248, 252, 244, 0.96), rgba(240, 248, 237, 0.86));
}

.ai-hero::before,
.ai-loop-section::before,
.ai-tips-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(67, 78, 67, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67, 78, 67, 0.045) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(ellipse 84% 70% at 50% 46%, rgba(0, 0, 0, 0.76), transparent 84%);
  -webkit-mask-image: radial-gradient(ellipse 84% 70% at 50% 46%, rgba(0, 0, 0, 0.76), transparent 84%);
  pointer-events: none;
}

.ai-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.78fr);
  gap: 64px;
  align-items: center;
}

.ai-hero-copy {
  max-width: 820px;
}

.ai-hero-copy h1 {
  max-width: 880px;
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: clamp(54px, 8vw, 116px);
  line-height: 0.92;
  letter-spacing: 0;
}

.ai-hero-visual {
  position: relative;
  min-height: 600px;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.ai-hero-visual::before {
  content: "";
  position: absolute;
  inset: 44px 0 18px;
  border: 1px solid rgba(30, 43, 32, 0.12);
  border-radius: 44px;
  background:
    radial-gradient(circle at 50% 40%, rgba(74, 222, 128, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(244, 250, 240, 0.56));
  box-shadow: 0 30px 90px rgba(30, 43, 32, 0.14);
  z-index: -2;
}

.ai-hero-axo {
  width: min(92%, 470px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 24px 48px rgba(30, 43, 32, 0.20));
  animation: ai-axo-breathe 5.4s ease-in-out infinite;
}

.ai-console-rail {
  position: absolute;
  top: 26px;
  left: 50%;
  display: flex;
  gap: 8px;
  width: min(86%, 430px);
  padding: 8px;
  border: 1px solid rgba(30, 43, 32, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 12px 34px rgba(30, 43, 32, 0.08);
  transform: translateX(-50%);
}

.ai-console-rail span {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(24, 183, 92, 0.09);
  color: var(--matrix-green);
  font: 900 11px/1 var(--font-mono);
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
}

.ai-orbit {
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(24, 183, 92, 0.24);
  border-radius: 999px;
  transform: rotate(-12deg);
}

.ai-orbit-one {
  width: 78%;
  height: 52%;
}

.ai-orbit-two {
  width: 58%;
  height: 78%;
  border-color: rgba(56, 189, 248, 0.20);
  transform: rotate(22deg);
}

.ai-hero-chip {
  position: absolute;
  max-width: 260px;
  padding: 14px 16px;
  border: 1px solid rgba(30, 43, 32, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 16px 44px rgba(30, 43, 32, 0.12);
}

.ai-hero-chip span,
.ai-loop-node span,
.ai-depth-grid span,
.axo-tip-demo span {
  display: block;
  color: var(--matrix-green);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.ai-hero-chip strong {
  display: block;
  margin-top: 6px;
  color: var(--ink-strong);
  line-height: 1.18;
}

.ai-hero-chip-top {
  top: 60px;
  left: 0;
}

.ai-hero-chip-bottom {
  right: 0;
  bottom: 72px;
}

.ai-hero-brief {
  position: absolute;
  left: 8px;
  bottom: 42px;
  width: min(300px, 48%);
  padding: 16px 18px;
  border: 1px solid rgba(24, 183, 92, 0.26);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(237, 250, 237, 0.78)),
    rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 48px rgba(30, 43, 32, 0.14);
}

.ai-hero-brief span,
.ai-freeform-panel span,
.axoai-role-grid span {
  display: block;
  color: var(--matrix-green);
  font: 900 11px/1 var(--font-mono);
  letter-spacing: 0;
  text-transform: uppercase;
}

.ai-hero-brief strong {
  display: block;
  margin-top: 7px;
  color: var(--ink-strong);
  font-size: 18px;
  line-height: 1.12;
}

.ai-hero-brief p {
  margin: 7px 0 0;
  color: var(--soft);
  font-size: 14px;
  line-height: 1.35;
}

.axoai-roles-section {
  position: relative;
  overflow: hidden;
}

.axoai-roles-section::before {
  content: "";
  position: absolute;
  inset: 12% 0 auto;
  height: 58%;
  background:
    radial-gradient(circle at 18% 50%, rgba(74, 222, 128, 0.12), transparent 30%),
    radial-gradient(circle at 84% 60%, rgba(56, 189, 248, 0.10), transparent 28%);
  pointer-events: none;
}

.axoai-role-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.axoai-role-grid article {
  position: relative;
  min-height: 330px;
  padding: 28px;
  overflow: hidden;
  border: 1px solid rgba(30, 43, 32, 0.12);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(247, 252, 244, 0.74)),
    rgba(255, 255, 255, 0.78);
  box-shadow: var(--shadow-soft);
}

.axoai-role-grid article::after {
  content: "";
  position: absolute;
  right: 26px;
  bottom: 26px;
  left: 28px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(24, 183, 92, 0.72), rgba(56, 189, 248, 0.12));
}

.axoai-role-grid img {
  position: absolute;
  right: 12px;
  top: 10px;
  width: min(42%, 170px);
  height: 170px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 18px 30px rgba(30, 43, 32, 0.16));
  transform: rotate(2deg);
}

.axoai-role-grid article:nth-child(2) img {
  top: 0;
  right: -2px;
  width: min(52%, 210px);
  transform: rotate(-2deg);
}

.axoai-role-grid article:nth-child(3) img {
  top: 20px;
  right: -8px;
  width: min(56%, 230px);
  transform: rotate(-5deg);
}

.axoai-role-grid h3 {
  max-width: 260px;
  margin: 94px 0 12px;
  color: var(--ink-strong);
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: 0;
}

.axoai-role-grid p {
  position: relative;
  z-index: 1;
  max-width: 360px;
  color: var(--soft);
  line-height: 1.55;
}

.ai-loop-section,
.ai-tips-section {
  position: relative;
  overflow: hidden;
}

.ai-loop-diagram {
  position: relative;
  display: grid;
  gap: 16px;
  padding: 24px;
  border: 1px solid rgba(30, 43, 32, 0.12);
  border-radius: 30px;
  background:
    radial-gradient(circle at 90% 10%, rgba(74, 222, 128, 0.12), transparent 28%),
    rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow-soft);
}

.ai-loop-axo {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-height: 138px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid rgba(24, 183, 92, 0.22);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(24, 183, 92, 0.12), rgba(56, 189, 248, 0.08)),
    rgba(255, 255, 255, 0.74);
}

.ai-loop-axo img {
  width: 132px;
  height: 112px;
  object-fit: contain;
  filter: drop-shadow(0 14px 24px rgba(30, 43, 32, 0.16));
}

.ai-loop-axo figcaption {
  color: var(--ink-strong);
  font-size: 22px;
  font-weight: 900;
  line-height: 1.12;
}

.ai-loop-node {
  position: relative;
  padding: 18px 20px;
  border: 1px solid rgba(30, 43, 32, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
}

.ai-loop-node:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -17px;
  width: 2px;
  height: 17px;
  background: linear-gradient(var(--matrix-green), rgba(56, 189, 248, 0.36));
}

.ai-loop-node strong {
  display: block;
  margin-top: 4px;
  color: var(--ink-strong);
  font-size: 22px;
}

.ai-loop-node em {
  display: block;
  margin-top: 6px;
  color: var(--soft);
  font-style: normal;
  line-height: 1.45;
}

.ai-loop-source {
  background: linear-gradient(135deg, rgba(24, 183, 92, 0.12), rgba(255, 255, 255, 0.82));
}

.ai-loop-final {
  border-color: rgba(24, 183, 92, 0.32);
  background:
    linear-gradient(135deg, rgba(24, 183, 92, 0.16), rgba(56, 189, 248, 0.10)),
    rgba(255, 255, 255, 0.84);
}

.ai-depth-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.ai-depth-grid article {
  min-height: 260px;
  padding: 28px;
  border: 1px solid rgba(30, 43, 32, 0.12);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: var(--shadow-soft);
}

.ai-depth-grid h3 {
  margin: 14px 0 10px;
  color: var(--ink-strong);
  font-size: 26px;
  letter-spacing: 0;
}

.ai-depth-grid p {
  color: var(--soft);
  line-height: 1.55;
}

.ai-depth-grid strong {
  display: block;
  margin-top: 20px;
  color: var(--ink-strong);
}

.ai-freeform-panel {
  display: grid;
  grid-template-columns: 170px minmax(0, 0.92fr) minmax(260px, 0.72fr);
  gap: 26px;
  align-items: center;
  margin-top: 22px;
  padding: 22px 24px;
  border: 1px solid rgba(30, 43, 32, 0.12);
  border-radius: 30px;
  background:
    radial-gradient(circle at 10% 50%, rgba(74, 222, 128, 0.14), transparent 26%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(244, 250, 240, 0.72));
  box-shadow: var(--shadow-soft);
}

.ai-freeform-panel img {
  width: 170px;
  height: 124px;
  object-fit: contain;
  filter: drop-shadow(0 16px 30px rgba(30, 43, 32, 0.16));
}

.ai-freeform-panel h3 {
  margin: 9px 0 8px;
  color: var(--ink-strong);
  font-size: 28px;
  letter-spacing: 0;
}

.ai-freeform-panel p {
  margin: 0;
  color: var(--soft);
  line-height: 1.5;
}

.ai-chat-lines {
  display: grid;
  gap: 8px;
}

.ai-chat-lines p {
  padding: 10px 12px;
  border: 1px solid rgba(24, 183, 92, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.68);
  color: var(--ink-strong);
  font-size: 14px;
}

.ai-tips-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.72fr);
  gap: 48px;
  align-items: center;
}

.axo-tip-demo {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  padding: 22px;
  border: 1px solid rgba(30, 43, 32, 0.12);
  border-radius: 30px;
  background:
    radial-gradient(circle at 18% 50%, rgba(74, 222, 128, 0.16), transparent 34%),
    rgba(255, 255, 255, 0.78);
  box-shadow: var(--shadow-soft);
}

.axo-tip-demo img {
  width: 132px;
  height: 150px;
  object-fit: contain;
  filter: drop-shadow(0 16px 28px rgba(30, 43, 32, 0.18));
}

.axo-tip-demo p {
  min-height: 72px;
  margin: 10px 0 16px;
  color: var(--ink-strong);
  font-size: 24px;
  line-height: 1.2;
}

.axo-tip-demo button {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(24, 183, 92, 0.28);
  border-radius: 999px;
  background: rgba(24, 183, 92, 0.10);
  color: var(--matrix-green);
  font: 900 12px/1 var(--font-mono);
  letter-spacing: 0;
  text-transform: uppercase;
  cursor: pointer;
}

.ai-guardrails-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 28px;
  align-items: end;
}

.ai-guardrails-heading img {
  width: 180px;
  height: 160px;
  object-fit: contain;
  filter: drop-shadow(0 18px 30px rgba(30, 43, 32, 0.15));
}

.axo-ai-home-card {
  display: grid;
  gap: 10px;
  align-self: stretch;
  place-items: center;
  min-height: 260px;
  padding: 22px;
  border: 1px solid rgba(30, 43, 32, 0.12);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 42%, rgba(74, 222, 128, 0.16), transparent 38%),
    rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow-soft);
  color: var(--ink-strong);
  text-align: center;
  text-decoration: none;
}

.ai-home-section .text-link {
  color: #0f7a43;
  text-decoration-color: rgba(15, 122, 67, 0.34);
}

.axo-ai-home-card img {
  width: min(220px, 80%);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 30px rgba(30, 43, 32, 0.20));
}

.axo-ai-home-card span {
  color: var(--matrix-green);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.axo-ai-home-card strong {
  max-width: 320px;
  line-height: 1.25;
}

.ai-story-points {
  grid-column: 1 / -1;
}

@keyframes ai-axo-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.015); }
}

:root[data-theme="dark"] .ai-hero {
  background:
    radial-gradient(circle at 78% 18%, rgba(74, 222, 128, 0.14), transparent 30%),
    radial-gradient(circle at 22% 72%, rgba(56, 189, 248, 0.12), transparent 32%),
    linear-gradient(180deg, #050608, #0d1014);
}

:root[data-theme="dark"] .ai-hero::before,
:root[data-theme="dark"] .ai-loop-section::before,
:root[data-theme="dark"] .ai-tips-section::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
}

:root[data-theme="dark"] .ai-hero-visual::before,
:root[data-theme="dark"] .ai-console-rail,
:root[data-theme="dark"] .ai-hero-chip,
:root[data-theme="dark"] .ai-hero-brief,
:root[data-theme="dark"] .axoai-role-grid article,
:root[data-theme="dark"] .ai-loop-diagram,
:root[data-theme="dark"] .ai-loop-axo,
:root[data-theme="dark"] .ai-loop-node,
:root[data-theme="dark"] .ai-depth-grid article,
:root[data-theme="dark"] .ai-freeform-panel,
:root[data-theme="dark"] .ai-chat-lines p,
:root[data-theme="dark"] .axo-tip-demo,
:root[data-theme="dark"] .axo-ai-home-card {
  border-color: rgba(255, 255, 255, 0.10);
  background:
    linear-gradient(135deg, rgba(74, 222, 128, 0.08), rgba(56, 189, 248, 0.04)),
    rgba(13, 16, 20, 0.82);
  box-shadow: var(--shadow-soft);
}

:root[data-theme="dark"] .ai-hero-chip strong,
:root[data-theme="dark"] .ai-hero-brief strong,
:root[data-theme="dark"] .axoai-role-grid h3,
:root[data-theme="dark"] .ai-loop-axo figcaption,
:root[data-theme="dark"] .ai-loop-node strong,
:root[data-theme="dark"] .ai-depth-grid h3,
:root[data-theme="dark"] .ai-depth-grid strong,
:root[data-theme="dark"] .ai-freeform-panel h3,
:root[data-theme="dark"] .ai-chat-lines p,
:root[data-theme="dark"] .axo-tip-demo p,
:root[data-theme="dark"] .axo-ai-home-card {
  color: rgba(255, 255, 255, 0.94);
}

:root[data-theme="dark"] .ai-hero-brief p,
:root[data-theme="dark"] .axoai-role-grid p,
:root[data-theme="dark"] .ai-loop-node em,
:root[data-theme="dark"] .ai-depth-grid p,
:root[data-theme="dark"] .ai-freeform-panel p {
  color: rgba(255, 255, 255, 0.72);
}

:root[data-theme="dark"] .ai-home-section .text-link {
  color: #7ee59f;
  text-decoration-color: rgba(126, 229, 159, 0.42);
}

@media (max-width: 980px) {
  .ai-hero {
    padding: 112px 0 72px;
  }

  .ai-hero-grid,
  .ai-tips-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ai-hero-visual {
    min-height: 460px;
  }

  .axoai-role-grid,
  .ai-freeform-panel {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .ai-freeform-panel img {
    justify-self: center;
  }
}

@media (max-width: 640px) {
  .ai-hero-copy h1 {
    font-size: clamp(44px, 14vw, 64px);
    line-height: 0.94;
  }

  .ai-hero-visual {
    min-height: 390px;
  }

  .ai-hero-chip {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: none;
    margin-top: 10px;
  }

  .ai-hero-axo {
    width: min(82%, 320px);
  }

  .ai-console-rail,
  .ai-hero-brief {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: none;
    transform: none;
  }

  .ai-console-rail {
    order: -1;
    flex-wrap: wrap;
  }

  .ai-console-rail span {
    flex-basis: 30%;
  }

  .ai-loop-diagram {
    padding: 16px;
    border-radius: 22px;
  }

  .axoai-role-grid article {
    min-height: 300px;
  }

  .axoai-role-grid img {
    width: min(38%, 132px);
    height: 132px;
  }

  .axoai-role-grid article:nth-child(2) img,
  .axoai-role-grid article:nth-child(3) img {
    top: 12px;
    right: 10px;
    width: min(42%, 140px);
    height: 132px;
    transform: rotate(-2deg);
  }

  .axoai-role-grid h3 {
    margin-top: 78px;
    font-size: 24px;
  }

  .ai-loop-axo {
    grid-template-columns: 92px minmax(0, 1fr);
    min-height: 104px;
    padding: 12px;
  }

  .ai-loop-axo img {
    width: 92px;
    height: 82px;
  }

  .ai-loop-axo figcaption {
    font-size: 17px;
  }

  .ai-freeform-panel {
    padding: 18px;
    border-radius: 22px;
  }

  .ai-freeform-panel img {
    width: 142px;
    height: 104px;
  }

  .ai-guardrails-heading {
    grid-template-columns: minmax(0, 1fr);
  }

  .ai-guardrails-heading img {
    width: 132px;
    height: 118px;
  }

  .axo-tip-demo {
    grid-template-columns: 86px minmax(0, 1fr);
    padding: 16px;
    border-radius: 22px;
  }

  .axo-tip-demo img {
    width: 86px;
    height: 104px;
  }

  .axo-tip-demo p {
    min-height: 84px;
    font-size: 18px;
  }

  .axo-ai-home-card {
    min-height: 220px;
  }
}

/* web.56 — keep CTA text readable after the later homepage button refresh */
:root[data-theme="dark"] .button.primary,
:root[data-theme="dark"] .nav-cta {
  background: #1f8a4d !important;
  background-color: #1f8a4d !important;
  background-image: none !important;
  border-color: #43d47c !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 12px 34px rgba(74, 222, 128, 0.22);
  transition-property: transform, border-color, box-shadow !important;
}

:root[data-theme="dark"] .button.secondary,
:root[data-theme="dark"] .button.quiet {
  background: #0b0f0d !important;
  background-color: #0b0f0d !important;
  background-image: none !important;
  border-color: rgba(74, 222, 128, 0.42) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  transition-property: transform, border-color, box-shadow !important;
}

:root[data-theme="dark"] .stage-annotation,
:root[data-theme="dark"] .utility-link-row a,
:root[data-theme="dark"] .report-preview-card,
:root[data-theme="dark"] .report-preview-card li,
:root[data-theme="dark"] .mini-cta {
  background: rgba(18, 22, 20, 0.86);
  border-color: rgba(74, 222, 128, 0.24);
}

/* web.68 - contained layered hero product scene */
.moonshot-hero {
  overflow: hidden;
}

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

.moonshot-hero-grid {
  width: min(var(--max), calc(100vw - (var(--gutter) * 2)));
  grid-template-columns: minmax(0, 560px) minmax(420px, 1fr);
  gap: clamp(32px, 4vw, 56px);
}

.moonshot-copy h1 {
  max-width: 640px;
  font-size: clamp(48px, 4.25vw, 64px);
  line-height: 1.04;
}

.hero-subcopy {
  max-width: 580px;
}

.product-stage {
  width: 100%;
  max-width: 590px;
  min-height: 540px;
  margin-inline: auto;
  overflow: hidden;
  border-radius: 34px;
}

.stage-card-main {
  left: 5%;
  top: 74px;
  width: min(335px, 56%);
  z-index: 4;
}

.stage-card-brief {
  right: 5%;
  top: 124px;
  width: min(310px, 49%);
  z-index: 2;
  filter: saturate(0.92) brightness(0.88);
  opacity: 0.96;
}

.stage-card-watch {
  left: 5%;
  bottom: 64px;
  width: min(168px, 29%);
  z-index: 5;
}

.stage-annotation {
  width: min(238px, 42%);
  padding: 13px 15px;
  border-radius: 18px;
}

.stage-annotation-top {
  top: 84px;
  right: 4%;
}

.stage-annotation-mid {
  display: none;
}

.stage-annotation-low {
  right: 4%;
  bottom: 66px;
}

.stage-micro-card-top {
  right: 17%;
  top: 26px;
}

.stage-micro-card-bottom {
  display: none;
}

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

  .moonshot-copy h1,
  .hero-subcopy,
  .alpha-scarcity-grid,
  .moonshot-note {
    max-width: 760px;
  }

  .product-stage {
    max-width: 680px;
    min-height: 610px;
    overflow: hidden;
  }

  .stage-micro-card-bottom {
    display: none;
  }
}

@media (max-width: 720px) {
  .moonshot-hero {
    padding: 46px 0 48px;
  }

  .moonshot-hero-grid {
    width: min(calc(100vw - 40px), var(--max));
    gap: 30px;
  }

  .moonshot-copy,
  .hero-subcopy,
  .moonshot-note {
    width: 100%;
    max-width: min(100%, 330px);
  }

  .moonshot-copy h1 {
    max-width: 330px;
    font-size: clamp(31px, 8.2vw, 36px);
    line-height: 1.02;
  }

  .moonshot-hero .site-kicker {
    display: block;
    max-width: 100%;
    font-size: 10px;
    line-height: 1.35;
  }

  .moonshot-hero .site-kicker::before {
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
  }

  .hero-proof-row,
  .alpha-scarcity-grid,
  .moonshot-actions {
    max-width: min(100%, 330px);
  }

  .product-stage {
    display: block;
    width: min(100%, 410px);
    min-height: 545px;
    max-width: none;
    margin-top: 4px;
  }

  .stage-card {
    position: absolute;
    inset: auto;
    margin: 0;
  }

  .stage-card-main {
    left: 0;
    top: 42px;
    width: 82%;
  }

  .stage-card-brief {
    right: 0;
    top: 142px;
    width: 74%;
    transform: rotate(2deg);
  }

  .stage-card-watch {
    left: 2%;
    bottom: 42px;
    width: 40%;
    transform: rotate(-3deg);
  }

  .stage-annotation {
    position: absolute;
    width: min(222px, 58%);
    padding: 12px 13px;
    border-radius: 18px;
  }

  .stage-annotation strong {
    margin-bottom: 5px;
    font-size: 16px;
  }

  .stage-annotation span {
    font-size: 12px;
    line-height: 1.35;
  }

  .stage-annotation-top {
    top: 82px;
    right: 0;
  }

  .stage-annotation-mid {
    left: auto;
    right: 0;
    width: min(222px, 58%);
    top: auto;
    bottom: 16px;
  }

  .stage-annotation-low {
    display: none;
  }

  .stage-micro-card {
    display: grid;
    min-width: 118px;
    padding: 9px 11px;
    border-radius: 15px;
  }

  .stage-micro-card strong {
    font-size: 14px;
  }

  .stage-micro-card-top {
    right: 0;
    top: 0;
  }

  .stage-micro-card-bottom {
    display: none;
  }
}

@media (min-width: 1081px) {
  .stage-annotation strong {
    font-size: 16px;
  }

  .stage-annotation span {
    font-size: 12px;
    line-height: 1.35;
  }
}

/* web.70 - calmer homepage hero billboard */
.moonshot-hero {
  min-height: auto;
  padding: clamp(66px, 8vw, 104px) 0 clamp(58px, 7vw, 86px);
}

.moonshot-hero-grid {
  width: min(1240px, calc(100vw - clamp(36px, 6vw, 88px)));
  grid-template-columns: minmax(0, 0.92fr) minmax(500px, 0.98fr);
  gap: clamp(44px, 5vw, 76px);
  align-items: center;
}

.moonshot-copy h1 {
  max-width: 660px;
  font-size: clamp(56px, 4.9vw, 80px);
  line-height: 0.99;
}

.hero-subcopy {
  max-width: 610px;
}

.product-stage {
  position: relative;
  width: 100%;
  max-width: 640px;
  min-height: 620px;
  margin-inline: auto;
  overflow: visible;
  border-radius: 0;
}

.product-stage::before {
  content: "";
  position: absolute;
  inset: 44px 8px 42px;
  z-index: 0;
  border: 1px solid rgba(30, 43, 32, 0.10);
  border-radius: 34px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(224, 243, 232, 0.40)),
    radial-gradient(circle at 66% 32%, rgba(22, 159, 196, 0.18), transparent 34%),
    radial-gradient(circle at 34% 78%, rgba(24, 183, 92, 0.20), transparent 40%);
  box-shadow: 0 34px 100px rgba(30, 43, 32, 0.12);
  filter: none;
}

.stage-card {
  border-radius: 24px;
}

.stage-card-main {
  left: 8%;
  top: 102px;
  width: min(392px, 62%);
  z-index: 4;
  box-shadow: 0 34px 90px rgba(9, 18, 14, 0.24);
}

.stage-card-brief {
  right: 5%;
  top: 170px;
  width: min(334px, 52%);
  z-index: 2;
  opacity: 0.90;
  filter: saturate(0.88) brightness(0.78);
}

.stage-card-watch {
  left: 4%;
  bottom: 88px;
  width: min(190px, 30%);
  z-index: 5;
  box-shadow: 0 22px 54px rgba(9, 18, 14, 0.18);
}

.stage-micro-card-top {
  top: 28px;
  right: auto;
  left: 58%;
  min-width: 130px;
  z-index: 8;
}

.stage-micro-card-bottom {
  display: none !important;
}

.stage-annotation {
  z-index: 8;
  width: min(228px, 36%);
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
}

.stage-annotation-top {
  top: 130px;
  right: 0;
}

.stage-annotation-mid {
  display: none !important;
}

.stage-annotation-low {
  right: 2%;
  bottom: 96px;
}

.stage-annotation strong {
  font-size: 16px;
}

.stage-annotation span {
  font-size: 12px;
  line-height: 1.36;
}

@media (max-width: 1180px) {
  .moonshot-hero-grid {
    width: min(calc(100vw - 48px), var(--max));
    grid-template-columns: 1fr;
  }

  .moonshot-copy h1,
  .hero-subcopy,
  .alpha-scarcity-grid,
  .moonshot-note {
    max-width: 760px;
  }
}

@media (max-width: 720px) {
  .moonshot-hero {
    padding: 44px 0 54px;
  }

  .moonshot-hero-grid {
    width: min(calc(100vw - 40px), var(--max));
    gap: 32px;
  }

  .moonshot-copy,
  .hero-subcopy,
  .moonshot-note,
  .hero-proof-row,
  .alpha-scarcity-grid,
  .moonshot-actions {
    max-width: 100%;
  }

  .moonshot-copy h1 {
    max-width: 350px;
    font-size: clamp(36px, 9.3vw, 44px);
    line-height: 1.02;
  }

  .product-stage {
    width: 100%;
    min-height: 520px;
    max-width: 430px;
    margin-top: 8px;
    overflow: visible;
  }

  .product-stage::before {
    inset: 28px 0 34px;
    border-radius: 26px;
  }

  .stage-card-main {
    left: 0;
    top: 58px;
    width: 78%;
  }

  .stage-card-brief {
    right: 0;
    top: 150px;
    width: 66%;
  }

  .stage-card-watch {
    left: 5%;
    bottom: 62px;
    width: 34%;
  }

  .stage-micro-card-top {
    top: 6px;
    right: 0;
    left: auto;
  }

  .stage-annotation {
    width: min(214px, 54%);
    padding: 12px 13px;
    border-radius: 17px;
  }

  .stage-annotation-top {
    top: 108px;
    right: 0;
  }

  .stage-annotation-low {
    right: 0;
    bottom: 46px;
  }

  .stage-annotation strong {
    font-size: 15px;
  }

  .stage-annotation span {
    font-size: 11.5px;
    line-height: 1.34;
  }
}

@media (max-width: 430px) {
  .moonshot-copy h1 {
    max-width: 330px;
    font-size: clamp(34px, 8.9vw, 39px);
  }

  .product-stage {
    min-height: 500px;
  }

  .stage-card-main {
    top: 62px;
    width: 78%;
  }

  .stage-card-brief {
    top: 148px;
    width: 64%;
  }

  .stage-card-watch {
    bottom: 72px;
    width: 35%;
  }

  .stage-annotation-low {
    bottom: 54px;
  }
}

@media (max-width: 430px) {
  .product-stage {
    min-height: 510px;
  }

  .stage-card-main {
    width: 84%;
  }

  .stage-card-brief {
    top: 136px;
    width: 72%;
  }

  .stage-card-watch {
    width: 42%;
    bottom: 56px;
  }

}

/* web.73 - final owned homepage hero composition */
.moonshot-hero {
  min-height: auto;
  padding: clamp(64px, 7vw, 96px) 0 clamp(66px, 8vw, 108px);
}

.moonshot-hero-grid {
  width: min(1180px, calc(100vw - clamp(36px, 6vw, 96px)));
  display: grid;
  grid-template-columns: minmax(0, 540px) minmax(0, 560px);
  grid-template-areas:
    "copy stage"
    "access stage";
  column-gap: clamp(44px, 5vw, 72px);
  row-gap: 26px;
  align-items: center;
}

.moonshot-copy {
  grid-area: copy;
}

.product-stage {
  grid-area: stage;
}

.moonshot-access {
  grid-area: access;
  max-width: 640px;
}

.moonshot-copy h1 {
  max-width: 610px;
  font-size: clamp(54px, 4.45vw, 74px);
  line-height: 1;
}

.hero-subcopy {
  max-width: 595px;
  font-size: clamp(18px, 1.15vw, 20px);
  line-height: 1.55;
}

.hero-proof-row {
  margin-top: 22px;
}

.alpha-scarcity-grid {
  gap: 12px;
}

.alpha-scarcity-grid span {
  min-height: 106px;
  padding: 18px;
}

.product-stage {
  position: relative;
  width: 100%;
  max-width: 560px;
  min-height: 560px;
  margin-inline: auto;
  overflow: hidden;
  isolation: isolate;
  border-radius: 34px;
}

.product-stage::before {
  content: "";
  position: absolute;
  inset: 14px 0 18px;
  z-index: 0;
  border: 1px solid rgba(30, 43, 32, 0.10);
  border-radius: 34px;
  background:
    radial-gradient(circle at 72% 28%, rgba(22, 159, 196, 0.18), transparent 31%),
    radial-gradient(circle at 34% 76%, rgba(24, 183, 92, 0.20), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.66), rgba(229, 244, 236, 0.48));
  box-shadow: 0 34px 92px rgba(30, 43, 32, 0.13);
  filter: none;
}

.stage-ambient {
  display: none;
}

.stage-card {
  border-radius: 24px;
}

.stage-card-main {
  left: 40px;
  top: 96px;
  width: min(348px, 62%);
  z-index: 4;
  box-shadow: 0 32px 84px rgba(9, 18, 14, 0.24);
}

.stage-card-brief {
  right: 24px;
  top: 138px;
  width: min(286px, 51%);
  z-index: 2;
  opacity: 0.78;
  filter: saturate(0.86) brightness(0.72);
  transform: rotate(2deg);
}

.stage-card-watch {
  left: 38px;
  bottom: 76px;
  width: min(156px, 28%);
  z-index: 5;
  transform: rotate(-3deg);
  box-shadow: 0 20px 48px rgba(9, 18, 14, 0.18);
}

.stage-micro-card-top {
  top: 54px;
  right: 52px;
  left: auto;
  min-width: 128px;
  z-index: 8;
}

.stage-micro-card-bottom {
  right: 42px;
  bottom: 54px;
  left: auto;
  min-width: 178px;
  z-index: 8;
}

.stage-annotation {
  z-index: 8;
  width: min(208px, 38%);
  padding: 13px 15px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.90);
}

.stage-annotation-top {
  top: 246px;
  right: 30px;
}

.stage-annotation-mid,
.stage-annotation-low {
  display: none !important;
}

.stage-annotation strong {
  font-size: 16px;
}

.stage-annotation span {
  font-size: 12px;
  line-height: 1.36;
}

@media (max-width: 1180px) {
  .moonshot-hero-grid {
    width: min(calc(100vw - 48px), 760px);
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "stage"
      "access";
    justify-items: start;
  }

  .moonshot-copy h1,
  .hero-subcopy,
  .alpha-scarcity-grid,
  .moonshot-note {
    max-width: 720px;
  }

  .product-stage {
    justify-self: center;
    max-width: 620px;
    min-height: 570px;
  }
}

@media (max-width: 720px) {
  .moonshot-hero {
    padding: 44px 0 56px;
  }

  .moonshot-hero-grid {
    width: min(calc(100vw - 32px), 390px);
    row-gap: 28px;
  }

  .moonshot-copy,
  .hero-subcopy,
  .hero-proof-row,
  .moonshot-access,
  .moonshot-note {
    width: 100%;
    max-width: 100%;
  }

  .moonshot-copy h1 {
    max-width: 100%;
    font-size: clamp(38px, 10.2vw, 46px);
    line-height: 0.99;
  }

  .hero-subcopy {
    font-size: 17px;
    line-height: 1.52;
  }

  .hero-proof-row {
    gap: 9px;
  }

  .product-stage {
    width: 100%;
    max-width: 358px;
    min-height: 438px;
    margin-top: 2px;
    overflow: hidden;
    border-radius: 28px;
  }

  .product-stage::before {
    inset: 0;
    border-radius: 28px;
  }

  .stage-card-main {
    left: 22px;
    top: 66px;
    width: 72%;
  }

  .stage-card-brief {
    right: -20px;
    top: 118px;
    width: 56%;
    opacity: 0.54;
    filter: saturate(0.82) brightness(0.62);
  }

  .stage-card-watch {
    left: 24px;
    bottom: 36px;
    width: 32%;
  }

  .stage-micro-card-top {
    top: 20px;
    right: 20px;
    min-width: 110px;
    padding: 9px 11px;
    border-radius: 15px;
  }

  .stage-micro-card-bottom {
    display: grid !important;
    right: 18px;
    bottom: 24px;
    min-width: 152px;
    padding: 10px 12px;
    border-radius: 16px;
  }

  .stage-micro-card strong {
    font-size: 14px;
  }

  .stage-annotation {
    width: 154px;
    padding: 10px 11px;
    border-radius: 16px;
  }

  .stage-annotation-top {
    top: 240px;
    right: 18px;
  }

  .stage-annotation strong {
    margin: 0;
    font-size: 13px;
    line-height: 1.15;
  }

  .stage-annotation span {
    display: none;
  }

  .moonshot-access .alpha-scarcity-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 0;
  }

  .alpha-scarcity-grid span {
    min-height: auto;
    padding: 16px;
  }

  .moonshot-access .moonshot-actions {
    gap: 10px;
  }

  .moonshot-actions .button {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 420px) {
  .product-stage {
    max-width: 100%;
    min-height: 422px;
  }

  .stage-card-main {
    left: 18px;
    top: 66px;
    width: 74%;
  }

  .stage-card-brief {
    right: -24px;
    top: 122px;
    width: 57%;
  }

  .stage-card-watch {
    left: 20px;
    bottom: 32px;
    width: 33%;
  }

  .stage-annotation-top {
    top: 230px;
    right: 14px;
  }
}