/* =====================================================================
   /health — "Cellular" theme override (this page only)
   Scoped under .cellular so the rest of the site is untouched.
   Electric blue→indigo gradient + a full-page connected-cell network
   (canvas.cellnet, driven by initCellNet in js/main.js).

   Restored 2026-08-12 from the pre-b4ddaef fountain-of-proof.css.
   Rules for sections this page no longer has (stats, ticks, cta-banner)
   were dropped rather than carried forward.
   ===================================================================== */

.cellular {
  --cell-bg-1:   #050a1f;
  --cell-bg-2:   #0a1640;
  --cell-bg-3:   #161a5c;
  --cell-bg-4:   #221766;
  --cell-blue:   #5BA8FF;   /* electric accent */
  --cell-cyan:   #7FE0FF;   /* bright highlight */
  --cell-ink:    #EAF1FF;   /* near-white text */
  --cell-muted:  #9DB2DC;   /* muted body text */
  --cell-glass:  rgba(18, 28, 70, 0.42);
  --cell-line:   rgba(120, 165, 255, 0.18);
  --cell-line-2: rgba(120, 165, 255, 0.10);

  background: linear-gradient(155deg,
    var(--cell-bg-1) 0%, var(--cell-bg-2) 38%, var(--cell-bg-3) 70%, var(--cell-bg-4) 100%) fixed;
  color: var(--cell-ink);
}

/* --- the cell-network canvas: pinned behind all content --- */
.cellular .cellnet {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  z-index: 0; pointer-events: none;
}
/* lift every content layer above the canvas */
.cellular .nav,
.cellular .hero,
.cellular .section,
.cellular .section--tight,
.cellular .footer { position: relative; z-index: 1; }

/* --- strip the section fills so the gradient shows through.
       .section has no fill of its own; only these two paint over it. --- */
.cellular .hero,
.cellular .threshold,
.cellular .section.threshold { background: transparent; color: var(--cell-ink); }

/* recolor the hero glow from silver to electric blue */
.cellular .hero__glow {
  background: radial-gradient(circle, rgba(91,168,255,.22), rgba(91,168,255,0) 62%);
}

/* --- typography → light (both on .threshold and the plain light sections) --- */
.cellular .display-xxl,
.cellular .display-xl,
.cellular .display-lg,
.cellular .display-md,
.cellular .threshold .display-xxl,
.cellular .threshold .display-xl,
.cellular .threshold .display-lg,
.cellular .threshold .display-md,
.cellular .hero .display-xl { color: var(--cell-ink); }

.cellular .subhead,
.cellular .body-lg,
.cellular .body,
.cellular .body-sm,
.cellular .hero .subhead,
.cellular .threshold .subhead,
.cellular .threshold .body-lg,
.cellular .threshold .body,
.cellular .threshold .body-sm { color: var(--cell-muted); }

.cellular .eyebrow,
.cellular .threshold .eyebrow { color: var(--cell-cyan); }
.cellular .eyebrow::before { background: var(--cell-blue); opacity: .8; }

/* a touch of glow on the hero headline so it reads against the cells */
.cellular .hero .display-xl { text-shadow: 0 2px 40px rgba(8,16,46,.6); }

/* --- nav --- */
.cellular .nav { color: var(--cell-ink); }
.cellular .nav__brand span { color: var(--cell-cyan); }
.cellular .nav.scrolled {
  background: rgba(8, 14, 40, 0.78);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 var(--cell-line); color: var(--cell-ink);
}
.cellular .nav.scrolled .nav__brand span { color: var(--cell-cyan); }
.cellular .nav.scrolled .nav__links a { text-shadow: none; }

/* --- cards → glass --- */
.cellular .card,
.cellular .threshold .card {
  background: var(--cell-glass);
  border: 1px solid var(--cell-line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.cellular .card:hover,
.cellular .threshold .card:hover {
  border-color: rgba(127, 224, 255, 0.55);
  box-shadow: 0 0 50px rgba(91,168,255,.22);
}
.cellular .prompt:hover { transform: none; }
.cellular .card h3,
.cellular .threshold .card h3 { color: var(--cell-ink); }
.cellular .card__num,
.cellular .threshold .card__num { color: var(--cell-blue); }

/* --- the prompt blocks: darker well inside the glass card --- */
.cellular .prompt__body {
  background: rgba(4, 9, 30, .55);
  border-color: var(--cell-line-2);
  color: var(--cell-muted);
}

/* --- buttons. The sitewide forest-green CTA goes muddy on navy, so on
       this page it becomes the luminous blue from the original theme. --- */
.cellular .btn-cta,
.cellular .nav__cta.btn-cta,
.cellular .nav:not(.scrolled) .nav__cta.btn-cta {
  background: linear-gradient(135deg, #7FE0FF 0%, #4D9DFF 52%, #3b6dff 100%);
  color: #04132e;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 6px 24px rgba(77,157,255,.4);
}
.cellular .btn-cta:hover,
.cellular .nav__cta.btn-cta:hover {
  filter: brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 8px 34px rgba(127,224,255,.55);
  transform: translateY(-1px);
}

.cellular .btn-secondary {
  color: var(--cell-ink);
  box-shadow: inset 0 0 0 1px var(--cell-line);
}
.cellular .btn-secondary:hover { box-shadow: inset 0 0 0 1px var(--cell-cyan); }

/* the only other green on the page: the focus ring */
.cellular :focus-visible { outline-color: var(--cell-cyan); }

/* --- founder image --- */
.cellular .media {
  background: linear-gradient(135deg, rgba(20,30,72,.6), rgba(10,16,44,.6));
  border: 1px dashed var(--cell-line);
  color: var(--cell-muted);
}
.cellular .media--filled { border: none; box-shadow: 0 26px 60px rgba(4,9,30,.55); }

/* --- footer --- */
.cellular .footer { border-top: 1px solid var(--cell-line); }
.cellular .footer__brand span { color: var(--cell-cyan); }
.cellular .footer h4 { color: var(--cell-muted); }
.cellular .footer a { color: var(--cell-muted); }
.cellular .footer a:hover { color: var(--cell-ink); }
.cellular .footer__bottom { border-top: 1px solid var(--cell-line-2); color: var(--cell-muted); }

/* scroll cue + selection */
.cellular .scroll-cue { color: var(--cell-muted); }
.cellular .scroll-cue::after { background: linear-gradient(var(--cell-cyan), transparent); }
.cellular ::selection { background: var(--cell-blue); color: #04132e; }