/* ============================================================
   Home v2 — paper well hero + flat everywhere else
   The brand mark EMERGES from the wheel — flat, white,
   intimate, slightly menacing. Slashed zero reads numeric.
   ============================================================ */

:root {
  --paper-canvas: #0A2E22;
  --paper-mid:    #134A38;
  --paper-deep:   #0B3328;
  --paper-void:   #02080A;
  --paper-edge:   rgba(0,15,8,0.65);
  --paper-fiber: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.7 0.22' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>");
  --paper-fiber-fine: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='2.4 2.4' numOctaves='1' seed='11'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>");
}

html, body { margin: 0; background: var(--bg); color: var(--fg-1); }
::selection { background: var(--accent); color: #052D1E; }

body {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>");
  background-blend-mode: overlay;
}

.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
section.flat       { padding: 128px 0; }
section.flat.dense { padding: 80px 0; }

/* Sharp drop-shadow under hero — "landed onto the flat" */
.lands-flat {
  position: relative;
  isolation: isolate;
}
.lands-flat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 28px;
  background: linear-gradient(180deg, rgba(0, 8, 4, 0.85) 0%, rgba(0, 8, 4, 0.0) 100%);
  border-top: 1px solid rgba(0, 6, 3, 0.7);
  pointer-events: none;
  z-index: 2;
}

/* ============================================================
   HERO
   ============================================================ */
.hero-paper-section {
  position: relative;
  isolation: isolate;
  padding: 24px 0 96px;
  min-height: 88vh;
  display: flex; align-items: center;
  background: var(--paper-canvas);
  color: #E8F3EC;
  overflow: hidden;
}
.hero-paper-section::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(ellipse 90% 70% at 25% 20%, rgba(60,140,100,0.32) 0%, transparent 55%),
    var(--paper-fiber),
    var(--paper-fiber-fine);
  background-blend-mode: multiply, multiply, screen;
  pointer-events: none;
  z-index: 0;
}
.hero-paper-section > * { position: relative; z-index: 1; }

.hero-bg-circles { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.bg-circle {
  position: absolute;
  border-radius: 50%;
  background: var(--paper-mid);
  box-shadow:
    0 0 40px -10px rgba(0,15,8,0.55),
    inset 1px 1px 0 rgba(255,255,255,0.05);
}
.bg-circle::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background-image: var(--paper-fiber);
  mix-blend-mode: multiply;
  opacity: 0.45;
}
.bg-circle.deep   { background: var(--paper-deep); }
.bg-circle.darker { background: #08251C; }

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

/* ----- THE WHEEL ----- */
.paper-well-stage {
  position: relative;
  width: 100%;
  max-width: 580px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
.well {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.well-outer {
  background: var(--paper-mid);
  box-shadow:
    0 0 60px -10px rgba(0,15,8,0.55),
    inset 0 28px 48px rgba(0,5,2,0.65),
    inset 0 6px 12px rgba(0,5,2,0.85),
    inset 0 -6px 16px rgba(120,230,180,0.10);
}
.well-outer::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background-image: var(--paper-fiber);
  mix-blend-mode: multiply;
  opacity: 0.55;
  pointer-events: none;
}
.well-mid {
  width: 76%; height: 76%; inset: 12%;
  background: var(--paper-deep);
  box-shadow:
    inset 0 30px 48px rgba(0,3,1,0.92),
    inset 0 8px 14px rgba(0,3,1,0.96),
    inset 0 -4px 12px rgba(120,230,180,0.06);
}
.well-mid::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background-image: var(--paper-fiber);
  mix-blend-mode: multiply;
  opacity: 0.5;
}
.well-inner {
  width: 56%; height: 56%; inset: 22%;
  /* True void — fades to near-black with the faintest top-light hint */
  background: radial-gradient(circle at 50% 30%, #08160F 0%, #010403 75%);
  box-shadow:
    inset 0 26px 42px rgba(0,0,0,1),
    inset 0 8px 14px rgba(0,0,0,1),
    inset 0 -8px 18px rgba(120,230,180,0.04);
}

/* ----- THE CENTERPIECE — tagline floats inside the well ----- */
/* The brand mark moved to the nav/footer. The visual centerpiece is the
   philosophy itself: Infinite connectivity, zero friction. Quiet, elegant.
   Rendered as green monospace to lean into the digital nature. */
.emerging-mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* raised slightly above the dead-center — sits higher in the well */
  padding-bottom: 6%;
  z-index: 10;
  pointer-events: none;
}
.center-text {
  font-family: var(--font-mono);
  /* Sized so "Infinite connectivity," (the longest line) ALWAYS fits inside
     the orb across viewports. Capped well below the orb width. */
  font-size: clamp(20px, 2.3vw, 30px);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.25;
  color: var(--accent);
  text-align: center;
  margin: 0;
  /* `pre` (not `pre-line`) — honour explicit \n only, NEVER wrap mid-line.
     Combined with width:max-content this guarantees the tagline renders
     in two clean lines and never truncates to "zero fricti". */
  white-space: pre;
  width: max-content;
  max-width: 86%;
  filter:
    drop-shadow(0 2px 0 rgba(0, 5, 2, 0.5))
    drop-shadow(0 10px 22px rgba(0, 5, 2, 0.7));
}
.center-text .tm {
  font-size: 0.42em;
  vertical-align: super;
  color: rgba(16, 200, 128, 0.7);
  margin-left: 3px;
}
.center-text .reg {
  font-family: var(--font-mono);
  font-size: 0.38em;
  vertical-align: super;
  color: rgba(255,255,255,0.55);
  margin-left: 3px;
}

/* Typewriter cursor — blocky, blinks, sits inline. */
.type-cursor {
  display: inline-block;
  margin-left: 2px;
  color: currentColor;
  opacity: 0.9;
  animation: type-blink 0.95s steps(2, end) infinite;
  transform: translateY(-1px);
}
@keyframes type-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* The ring text — concentric bands of tiny 8s forming the "0"s of the well */
.well-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
}
.ring-text {
  font-family: var(--font-mono);
  font-weight: 500;
}
.well-svg .move { animation: ring-rotate 240s linear infinite; transform-origin: center; transform-box: fill-box; }
@keyframes ring-rotate { to { transform: rotate(360deg); } }

/* Inline brand reference — mono with slashed zero native */
.bn {
  font-family: var(--font-mark);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: inherit;
  white-space: nowrap;
}

/* ----- Flat eyebrow chip ----- */
.eyebrow-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(232, 243, 236, 0.85);
  padding: 4px 12px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  background: transparent;
  white-space: nowrap;
}
.eyebrow-chip.green { color: var(--accent); border-color: rgba(16,200,128,0.35); }

/* ----- Quiet buttons. CTA is here-if-you-need-us. ----- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: background 120ms var(--ease-out), border-color 120ms var(--ease-out), color 120ms var(--ease-out);
  white-space: nowrap;
  letter-spacing: -0.005em;
  text-decoration: none;
}

/* ============================================================
   SIDEWAYS-8 HERO
   Two paper wells laid horizontally — figure-8 on its side.
   Each "0" of the 8 is a well, composed of concentric 0s.
   The right orb sits in the original well's position.
   The left orb spans under the copy on the left.
   ============================================================ */
.hero-paper-section.hero-sideways {
  position: relative;
  padding: 0 0 64px;
  min-height: calc(100vh - 72px);
  display: flex;
  align-items: center;
  overflow: hidden;
}
/* Directional darken — heaviest under the left-side headlines,
   fading to nothing past the centerline so the right orb keeps
   its full paper-canvas value. */
.hero-paper-section.hero-sideways::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 12, 6, 0.62) 0%,
    rgba(0, 12, 6, 0.42) 22%,
    rgba(0, 12, 6, 0.20) 42%,
    rgba(0, 12, 6, 0.00) 65%
  );
  pointer-events: none;
  z-index: 0;
}
.sideways-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.sideways-stage-inner {
  position: relative;
  width: 100%;
  max-width: 1280px;
  height: 700px;
}
.sideways-stage .orb {
  position: absolute;
  width: 626px;
  height: 626px;
  top: 50%;
  transform: translateY(-50%);
}
.sideways-stage .orb-left  {
  left: 50px;
  z-index: 1;
  /* Fade the right edge so it dissolves into the right orb. */
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 82%, rgba(0,0,0,0.5) 94%, transparent 100%);
          mask-image: linear-gradient(to right, #000 0%, #000 82%, rgba(0,0,0,0.5) 94%, transparent 100%);
}
.sideways-stage .orb-right {
  right: 50px;
  z-index: 2;
  /* Fade the left edge so it dissolves into the left orb.
     Together with the left orb's mask, the two paper surfaces fuse
     in the middle rather than stacking like two plates. */
  -webkit-mask-image: linear-gradient(to left, #000 0%, #000 82%, rgba(0,0,0,0.5) 94%, transparent 100%);
          mask-image: linear-gradient(to left, #000 0%, #000 82%, rgba(0,0,0,0.5) 94%, transparent 100%);
}

/* ============================================================
   Paper texture utilities — for tying lower sections to the hero
   ============================================================ */

/* Paper canvas — full emerald + fiber backdrop. Used on the closing CTA
   so the page bookends in paper. High-contrast spotlight + corner vignette. */
.paper-canvas {
  position: relative;
  isolation: isolate;
  background: #061F15;
  color: #E8F3EC;
}
.paper-canvas::before {
  content: '';
  position: absolute; inset: 0;
  background:
    /* spotlight from center */
    radial-gradient(ellipse 79% 79% at 50% 50%, rgba(110, 210, 160, 0.42) 0%, transparent 65%),
    /* deep corner vignette */
    radial-gradient(ellipse 130% 110% at 50% 50%, transparent 25%, rgba(0, 0, 0, 0.75) 100%);
  pointer-events: none;
  z-index: 0;
}
.paper-canvas::after {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--paper-fiber), var(--paper-fiber-fine);
  background-blend-mode: multiply, screen;
  mix-blend-mode: overlay;
  opacity: 0.65;
  pointer-events: none;
  z-index: 0;
}
.paper-canvas > * { position: relative; z-index: 1; }

/* Full-section paper fiber on the existing section color — no green tint.
   Used behind the architecture diagram (whole section), fading at the
   bottom edge into the next section. */
.fiber-bg {
  position: relative;
  isolation: isolate;
}
.fiber-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--paper-fiber);
  mix-blend-mode: overlay;
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}

/* Card with fiber texture — for Who 8/0 serves audience boxes.
   Picks up the elev-1 color and adds fiber for tactile detail. */
.fiber-card {
  background-color: var(--bg-elev-1);
  background-image: var(--paper-fiber);
  background-blend-mode: overlay;
  background-size: auto, auto;
}

/* Paper tile — small textured slab, no color tint. Picks up the
   section's own background; fiber adds tactile detail behind metric numerals. */
.paper-tile {
  position: absolute;
  background-color: transparent;
  background-image: var(--paper-fiber), var(--paper-fiber-fine);
  background-blend-mode: multiply, screen;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 6px 14px -6px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
.hero-content-overlay {
  position: relative;
  z-index: 3;
  width: 100%;
}
.hero-copy {
  max-width: 540px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.btn-soft {
  background: transparent;
  color: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.24);
}
.btn-soft:hover { border-color: rgba(255,255,255,0.55); color: #FFFFFF; }
.btn-link {
  background: transparent;
  color: rgba(232,243,236,0.7);
  border: none;
  padding: 0 4px;
  height: auto;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  border-radius: 0;
}
.btn-link:hover { color: #FFFFFF; border-bottom-color: rgba(255,255,255,0.5); }

/* All animations stripped */
.gear-rot, .gear-rot-rev, .gear-rot-fast { animation: none !important; }

/* ============================================================
   MOBILE — phone-first overrides.
   Phone:    max-width 767px
   Tablet:   768–1099px  (mostly treated as desktop, minor tweaks)
   Desktop:  1100px+      (default styles above)
   ============================================================ */

/* Show/hide helpers */
.mobile-only  { display: none !important; }
.desktop-only { display: inline-flex !important; }

/* Tablet — minor tightening */
@media (max-width: 1099px) {
  .container { padding: 0 24px; }
  section.flat       { padding: 96px 0; }
  section.flat.dense { padding: 64px 0; }
}

/* Phone — the main mobile experience */
@media (max-width: 767px) {

  /* Visibility flips */
  .mobile-only  { display: inline-flex !important; }
  .desktop-only { display: none !important; }
  .nav-links    { display: none !important; }

  /* Container + section rhythm */
  .container { padding: 0 20px; }
  section.flat       { padding: 64px 0; }
  section.flat.dense { padding: 48px 0; }

  /* Body type defaults */
  body { font-size: 15px; }

  /* HERO — vertical figure-8 with copy overlaid on top */
  .hero-paper-section.hero-sideways {
    position: relative;
    flex-direction: column;
    min-height: calc(100svh - 64px - env(safe-area-inset-bottom, 0px));
    padding: 0 0 96px;
    overflow: hidden;
  }
  /* Top-down darken so copy is readable over the orbs */
  .hero-paper-section.hero-sideways::after {
    display: block;
    background: linear-gradient(
      180deg,
      rgba(0, 12, 6, 0.72) 0%,
      rgba(0, 12, 6, 0.45) 28%,
      rgba(0, 12, 6, 0.10) 55%,
      rgba(0, 12, 6, 0.0) 80%
    );
    pointer-events: none;
  }

  /* Copy sits on TOP of the orbs, z-index 5 */
  .hero-content-overlay {
    order: 1;
    position: relative;
    z-index: 5;
    /* L/R gutter — was missing on phones */
    padding: calc(env(safe-area-inset-top, 0px) + 32px) 20px 12px;
    width: 100%;
  }
  .hero-copy {
    text-align: left;
    max-width: 100%;
    gap: 18px;
  }
  .hero-copy h1 {
    font-size: clamp(28px, 8vw, 40px) !important;
    max-width: 100% !important;
  }
  .hero-copy > p {
    font-size: 15px !important;
    max-width: 100% !important;
  }

  /* Orb stage — absolute behind the copy, fills the hero */
  .sideways-stage {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin-top: 0;
  }
  .sideways-stage-inner {
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 100%;
    display: block;
    position: relative;
  }
  .sideways-stage .orb {
    position: absolute;
    width: min(76vw, 340px);
    height: min(76vw, 340px);
    left: 50%;
    transform: translateX(-50%);
    top: auto;
  }
  /* Top orb — sits BEHIND the copy, near the top of the hero */
  .sideways-stage .orb-left  {
    top: 6%;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 64%, rgba(0,0,0,0.6) 80%, rgba(0,0,0,0.2) 94%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 64%, rgba(0,0,0,0.6) 80%, rgba(0,0,0,0.2) 94%, transparent 100%);
  }
  /* Bottom orb — lower portion of hero, partially below fold */
  .sideways-stage .orb-right {
    top: calc(6% + min(76vw, 340px) * 0.86);
    -webkit-mask-image: linear-gradient(to top, #000 0%, #000 64%, rgba(0,0,0,0.6) 80%, rgba(0,0,0,0.2) 94%, transparent 100%);
            mask-image: linear-gradient(to top, #000 0%, #000 64%, rgba(0,0,0,0.6) 80%, rgba(0,0,0,0.2) 94%, transparent 100%);
  }
  /* Centerpiece text inside right orb — smaller on phones.
     Capped so the 22-char first line always fits in min(76vw,340px) orb. */
  .center-text {
    font-size: clamp(13px, 4.2vw, 19px);
    max-width: 92%;
  }

  /* Section heading sizes scale down */
  section h2 { font-size: clamp(26px, 6.5vw, 36px) !important; }
  section h3 { font-size: 18px !important; }

  /* Common 3-col grids → 1-col */
  section.flat .container > div[style*="repeat(3, 1fr)"],
  section.flat .container > div[style*="repeat(2, 1fr)"],
  .audiences,
  .arch-section .container > div[style*="repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Boost / WhoServes / Metric stacks */
  .lands-flat .container > div[style*="repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* MetricRow grid → vertical, kill column borders */
  .metrics-grid,
  section > .container > div[style*="repeat(3, 1fr)"][style*="borderTop"] {
    grid-template-columns: 1fr !important;
  }

  /* HowItWorks split-grid → stack */
  .how-split { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* Architecture diagram — hide for now (Phase 2 will rebuild vertical) */
  .arch-diagram { display: none !important; }
  .arch-section::before { display: none !important; }
  /* Replace with a quiet text fallback rendered via JSX in Phase 2 */

  /* Connector signup grid → stack */
  section[class*="watery"] .container > div[style*="1.4fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Footer grid → 2-col */
  footer .container > div[style*="1.4fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }

  /* Gradient darken on hero — pull right-side fade since orbs stack now */
}

/* ============================================================
   MOBILE NAV — sticky bottom bar
   Hidden on desktop, shown on phone.
   ============================================================ */
.mobile-bottom-bar {
  display: none;
}
@media (max-width: 767px) {
  /* Slim the desktop top nav on phones — keep just the brand mark.
     nav-links are hidden separately above. */
  .site-nav-desktop {
    height: 56px !important;
    padding: 0 20px !important;
  }

  /* Mobile bottom-bar also respects safe-area-inset-bottom on iOS */
  .mobile-bottom-bar {
    display: grid;
    grid-template-columns: 64px 1fr 1fr;
    gap: 0;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(40,40,40,0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--border-2);
    z-index: 50;
    box-shadow: 0 -8px 24px -6px rgba(0,0,0,0.55);
  }
  .mobile-bottom-bar > button,
  .mobile-bottom-bar > a {
    background: transparent;
    color: var(--fg-1);
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 180ms var(--ease-out);
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-bottom-bar > .mb-menu {
    border-right: 1px solid var(--border-1);
  }
  .mobile-bottom-bar > .mb-ask {
    color: var(--accent);
    gap: 8px;
    border-right: 1px solid var(--border-1);
  }
  .mobile-bottom-bar > .mb-ask::before {
    content: '';
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent);
  }
  .mobile-bottom-bar > .mb-book {
    /* primary CTA */
  }
  .mobile-bottom-bar > button:active,
  .mobile-bottom-bar > a:active {
    background: rgba(255,255,255,0.06);
  }

  /* Hamburger icon — drawn in CSS */
  .mb-menu-icon {
    width: 22px; height: 14px;
    position: relative;
  }
  .mb-menu-icon::before,
  .mb-menu-icon::after,
  .mb-menu-icon > span {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 1.5px;
    background: var(--fg-1);
    border-radius: 1px;
  }
  .mb-menu-icon::before { top: 0; }
  .mb-menu-icon > span  { top: 50%; transform: translateY(-50%); }
  .mb-menu-icon::after  { bottom: 0; }
}

/* ============================================================
   NAV DRAWER — slides in from right on mobile.
   ============================================================ */
.nav-drawer-scrim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(3px);
  z-index: 998;
  opacity: 0; pointer-events: none;
  transition: opacity 220ms var(--ease-out);
}
.nav-drawer-scrim.open { opacity: 1; pointer-events: auto; }
.nav-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(380px, 86vw);
  background: var(--ebz-ink-700);
  border-left: 1px solid var(--border-2);
  box-shadow: -24px 0 48px -8px rgba(0,0,0,0.55);
  z-index: 999;
  transform: translateX(105%);
  transition: transform 260ms var(--ease-out);
  display: flex; flex-direction: column;
}
.nav-drawer.open { transform: translateX(0); }
.nav-drawer-head {
  padding: 20px 22px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border-1);
  background: rgba(0,0,0,0.18);
}
.nav-drawer-close {
  background: transparent; border: none; color: var(--fg-3);
  font-size: 22px; line-height: 1; padding: 4px; cursor: pointer;
  font-family: var(--font-mono);
}
.nav-drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 24px 22px;
  display: flex; flex-direction: column; gap: 28px;
}
.nav-drawer-section {
  display: flex; flex-direction: column; gap: 4px;
}
.nav-drawer-section .label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 8px;
}
.nav-drawer-link {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-1);
  transition: color 180ms;
}
.nav-drawer-link:active { color: var(--accent); }
.nav-drawer-foot {
  padding: 20px 22px;
  border-top: 1px solid var(--border-1);
  background: rgba(0,0,0,0.18);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--fg-4);
}

/* ============================================================
   BOTTOM-SHEET CHROME — used by AskAgent + SignInModal on phones.
   The agent component still positions itself as a right-drawer
   at desktop sizes; these overrides target phones only.
   ============================================================ */
@media (max-width: 767px) {
  /* AskAgent panel: right-drawer → bottom-sheet */
  aside[style*="width: min(440px, 92vw)"] {
    width: 100% !important;
    height: 88vh !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    border-left: none !important;
    border-top: 1px solid var(--border-2) !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -24px 48px -8px rgba(0,0,0,0.65) !important;
  }
}

/* ============================================================
   Global nav — link + CTA styles
   ============================================================ */
.nav-links {
  display: flex; align-items: center; gap: 24px;
}
.nav-link {
  font-size: 13.5px; font-weight: 500;
  color: rgba(232, 243, 236, 0.78);
  text-decoration: none;
  letter-spacing: -0.005em;
  white-space: nowrap;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
.nav-link:hover { color: #FFFFFF; }
.nav-cta {
  font-size: 13.5px; font-weight: 600;
  color: var(--accent);
  background: transparent;
  border: none;
  padding: 8px 0;
  text-decoration: none;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: color 180ms var(--ease-out);
}
.nav-cta:hover { color: var(--accent-hover); }

/* ============================================================
   WATERY DEPTH
   Subtle top highlight + bottom shadow inside each main section.
   Gives the page a rhythm of "shallow pools" between hero and CTA.
   ============================================================ */
.watery {
  position: relative;
  isolation: isolate;
}
.watery::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    /* overhead spotlight — soft, low-contrast */
    radial-gradient(ellipse 64% 16% at 50% 0%, rgba(255,255,255,0.055) 0%, transparent 70%),
    /* depth — peaks inside the section, tapers back to clean bg
       at the very bottom so section boundaries stay crisp */
    linear-gradient(180deg, transparent 0%, transparent 50%, rgba(0,0,0,0.26) 86%, transparent 100%);
  z-index: 0;
}
.watery > * { position: relative; z-index: 1; }

/* Deeper variant — for the darker bg-sunken sections so they still
   read as a depth-step below the bg-elev sections around them. */
.watery.deep::after {
  background:
    radial-gradient(ellipse 60% 14% at 50% 0%, rgba(255,255,255,0.04) 0%, transparent 70%),
    linear-gradient(180deg, transparent 0%, transparent 46%, rgba(0,0,0,0.34) 84%, transparent 100%);
}

/* Flat-bottom variant — top spotlight only, clean bottom edge.
   Use when the section below is a hard color step (e.g. into bg-sunken)
   so the boundary reads as a definitive break, not a smudge.
   Top spotlight is intentionally wide + soft so it merges with a
   .smooth-down section above without showing a seam. */
.watery.flat-bottom::after {
  background:
    radial-gradient(ellipse 80% 32% at 50% 0%, rgba(255,255,255,0.045) 0%, transparent 80%);
}

/* Smooth handoff — bottom-edge highlight that mirrors a watery section's
   top spotlight, so an interlude section visually feathers into the
   section below it instead of ending on a hard line. */
.smooth-down {
  position: relative;
  isolation: isolate;
}
.smooth-down::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 80%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 100% at 50% 100%, rgba(255,255,255,0.065) 0%, transparent 78%);
  z-index: 0;
}
.smooth-down > * { position: relative; z-index: 1; }

/* ============================================================
   HOW IT WORKS — split layout
   Left: vertical stack of 01/02/03 stages.
   Right: live agent console + grounding copy.
   ============================================================ */
.how-split {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 64px;
  align-items: stretch;
}
.how-stages {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--border-1);
}
.how-stage {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  padding: 28px 0;
  border-bottom: 1px solid var(--border-1);
}
.how-stage .num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--accent);
  padding-top: 4px;
}
.how-stage h3 {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.18;
  margin: 0 0 10px 0;
  color: var(--fg-1);
}
.how-stage p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0 0 12px 0;
}
.how-stage .meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--fg-3);
}
.how-stage .meta b { color: var(--accent); font-weight: 600; }

.how-right {
  display: flex; flex-direction: column; gap: 18px;
}
.how-right .lede {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg-3);
  margin: 0;
  max-width: 460px;
}
.how-right .lede b { color: var(--fg-1); font-weight: 600; }

/* ----- Live agent console ----- */
.console {
  position: relative;
  border: 1px solid var(--border-1);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0)),
    var(--ebz-ink-700);
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.55), 0 4px 14px rgba(0,0,0,0.25);
  flex: 1;
}
.console-head {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-1);
  background: rgba(0,0,0,0.18);
}
.console-head .title {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em;
  color: var(--fg-2);
}
.console-head .pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(16,200,128,0.6);
  animation: console-pulse 1.6s var(--ease-out) infinite;
}
@keyframes console-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(16,200,128,0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(16,200,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,200,128,0); }
}
.console-head .right {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  color: var(--fg-3); text-transform: uppercase;
}
.console-body {
  flex: 1 1 auto;
  padding: 8px 0;
  position: relative;
  min-height: 380px;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.5;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.console-row {
  display: grid;
  grid-template-columns: 64px 70px 1fr auto;
  gap: 12px;
  padding: 5px 16px;
  align-items: baseline;
  border-bottom: 1px dashed rgba(255,255,255,0.045);
  white-space: nowrap;
}
.console-row .ts { color: var(--fg-4); letter-spacing: 0.04em; font-size: 11px; }
.console-row .lvl {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 2px;
  display: inline-block;
  text-align: center;
}
.console-row .lvl.ok     { color: var(--accent);     border: 1px solid rgba(16,200,128,0.30); }
.console-row .lvl.info   { color: var(--fg-2);       border: 1px solid var(--border-2); }
.console-row .lvl.warn   { color: var(--attention);  border: 1px solid rgba(248,120,120,0.30); }
.console-row .lvl.heal   { color: var(--accent);     background: rgba(16,200,128,0.10); border: 1px solid rgba(16,200,128,0.35); }
.console-row .msg { color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; }
.console-row .msg .tag { color: var(--fg-3); }
.console-row .msg b { color: var(--fg-1); font-weight: 600; }
.console-row .msg .accent { color: var(--accent); }
.console-row .ms { color: var(--fg-4); font-size: 11px; }
.console-foot {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--border-1);
  background: rgba(0,0,0,0.18);
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-3);
}
.console-foot .stat {
  display: inline-flex; align-items: center; gap: 6px;
}
.console-foot .stat b {
  color: var(--fg-1);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.console-foot .stat.green b { color: var(--accent); }

@media (max-width: 960px) {
  .how-split { grid-template-columns: 1fr; gap: 40px; }
}