/* ==========================================================================
 * 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 Scott directive 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 .ops-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.
 * -------------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Surfaces */
  --command-black:   #000000;
  --command-deep:    #050608;
  --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 — match FursanTheme */
  --matrix-green:    #4ade80;
  --signal-green:    #86efac;
  --cyan:            #38bdf8;
  --warning:         #fbbf24;
  --danger:          #fb7185;
  --deep-fast:       #b380fa;

  /* Legacy aliases — kept so any leftover var() reference doesn't 404
     while we migrate. Will be removed once we re-audit every page. */
  --bg:              var(--command-black);
  --bg-2:            var(--panel);
  --bg-3:            var(--panel-raised);
  --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 + radius */
  --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);
  --radius-sm:       6px;
  --radius:          10px;
  --radius-lg:       12px;

  /* Layout */
  --max:             1180px;
  --gutter:          clamp(20px, 4vw, 44px);

  /* 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;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--command-black);
  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;
}

/* Command surface backdrop — subtle dot grid + soft radial halos.
   Mirrors FursanCommandBackdrop in the iOS app. Uses ::before so we
   don't pollute body's normal flow. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  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%);
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 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%);
  pointer-events: none;
}

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 ("FURSAN_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); }

.ops-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 Scott directive 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 Scott 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 Scott directive 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 Scott's complaint 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/Ops 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-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;
}

@media (max-width: 860px) {
  .workflow-row {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .workflow-row span {
    justify-self: 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 — Ops / 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.08em;
  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); }

/* --------------------------------------------------------------------------
 * Reduced motion safeguard
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}