/* =========================================================
   Be Healthy - Presentation Website
   Design system: dark navy / deep blue with cyan-turquoise
   accents. Premium clinical-AI mood - calm, credible, no
   neon, no clutter.
   ========================================================= */

:root {
  /* Backgrounds */
  --bg-950: #04070d;
  --bg-900: #070f1f;
  --bg-850: #0a1526;
  --bg-800: #0b1a30;
  --bg-700: #10233f;
  --bg-600: #16294a;

  /* Text */
  --text: #f3f6fa;
  --text-muted: rgba(232, 238, 246, 0.74);
  --text-faint: rgba(232, 238, 246, 0.52);

  /* Lines / surfaces */
  --line: rgba(255, 255, 255, 0.10);
  --line-soft: rgba(255, 255, 255, 0.06);
  --glass: rgba(255, 255, 255, 0.045);
  --glass-strong: rgba(255, 255, 255, 0.07);

  /* Accent - cyan / turquoise (from the Be Healthy mark) */
  --accent: #2fd9c4;
  --accent-2: #14b8ac;
  --accent-soft: rgba(47, 217, 196, 0.14);
  --accent-line: rgba(47, 217, 196, 0.38);
  --accent-glow: rgba(47, 217, 196, 0.28);

  /* Layout */
  --container: 1180px;
  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-soft: 0 20px 50px rgba(2, 6, 14, 0.45);
  --shadow-lift: 0 28px 70px rgba(2, 6, 14, 0.55);
  --transition: 220ms ease;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

section[id], .hero {
  scroll-margin-top: 96px;
}

body {
  margin: 0;
  background: var(--bg-950);
  color: var(--text);
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, p { margin: 0; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

input, textarea {
  font: inherit;
  color: var(--text);
  background: var(--bg-700);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  width: 100%;
}

input::placeholder, textarea::placeholder { color: var(--text-faint); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--accent);
  color: #04141f;
  font-weight: 700;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 8px 0;
}

.skip-link:focus {
  left: 0;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms ease, transform 700ms ease;
}

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

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
  white-space: nowrap;
}

.btn--primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #04141a;
  box-shadow: 0 14px 30px rgba(20, 184, 172, 0.28);
}

.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(20, 184, 172, 0.38); }

.btn--outline {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
}

.btn--outline:hover {
  border-color: var(--accent-line);
  color: var(--accent);
  transform: translateY(-2px);
}

/* ---------- Navbar ---------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(4, 10, 20, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.navbar.is-scrolled {
  background: rgba(4, 10, 20, 0.88);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 12px 30px rgba(2, 6, 14, 0.35);
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 88px;
}

.navbar__brand { display: flex; align-items: center; }
.navbar__logo { height: 52px; width: auto; }

.navbar__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.navbar__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

.navbar__links {
  display: flex;
  align-items: center;
  gap: 1.9rem;
}

.navbar__links a {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color var(--transition);
  position: relative;
}

.navbar__links a:hover,
.navbar__links a.is-active { color: var(--text); }

.navbar__links a:not(.navbar__cta)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}

.navbar__links a:not(.navbar__cta):hover::after,
.navbar__links a.is-active::after { transform: scaleX(1); }

.navbar__cta {
  padding: 0.55rem 1.2rem;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent) !important;
  font-weight: 600;
}

.navbar__cta:hover { background: var(--accent); color: #04141a !important; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 6.5rem 0 6rem;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 15% 10%, rgba(47, 217, 196, 0.10), transparent 60%),
    linear-gradient(160deg, #050b16 0%, #081527 45%, #0b1e38 100%);
  z-index: 0;
}

.hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
}

.hero__glow--a {
  width: 420px; height: 420px;
  top: -120px; right: -80px;
  background: radial-gradient(circle, var(--accent-glow), transparent 70%);
}

.hero__glow--b {
  width: 320px; height: 320px;
  bottom: -100px; left: 5%;
  background: radial-gradient(circle, rgba(20, 184, 172, 0.18), transparent 70%);
}

.hero__grid-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 40%, transparent 85%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 3.5rem;
  align-items: center;
}

.hero__logo { height: 40px; width: auto; margin-bottom: 1.75rem; }

.hero__eyebrow {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.9rem;
}

.hero__title {
  font-size: clamp(2rem, 3.6vw, 2.85rem);
  line-height: 1.18;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1.25rem;
  max-width: 22ch;
}

.hero__lead {
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 44ch;
  margin-bottom: 2rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.hero__note {
  font-size: 0.78rem;
  color: var(--text-faint);
  letter-spacing: 0.02em;
}

/* Hero visual: dashboard mock + floating metric cards */
.hero__visual {
  position: relative;
  min-height: 380px;
}

.dashboard-card {
  position: relative;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 1.4rem 1.5rem 1.6rem;
  max-width: 460px;
  margin: 0 auto;
}

.dashboard-card__head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.1rem;
}

.dashboard-card__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.dashboard-card__label {
  margin-left: 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  text-transform: uppercase;
}

.dashboard-card__body {
  position: relative;
  height: 150px;
  border-radius: var(--radius-sm);
  background: rgba(4, 10, 20, 0.55);
  overflow: hidden;
}

.dashboard-card__grid {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 38px),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 30px);
  pointer-events: none;
}

.pulse-line {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.pulse-line__path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(47, 217, 196, 0.55));
  animation: pulseGlow 2.6s ease-in-out infinite;
}

.pulse-line__dot {
  fill: #ffffff;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.9));
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

.dashboard-card__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.1rem;
}

.status-chip {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
}

.status-chip--muted {
  background: var(--glass);
  border-color: var(--line);
  color: var(--text-muted);
}

/* Alert-level tiers - reused by the Hospital Command Center's alert chip.
   Same 4-tier scale as .risk-pill[data-tier] (styles.css ~1887), plus a
   4th "critical" tier that the 3-tier risk-pill scale doesn't need. */
.status-chip[data-tier="low"] { background: var(--shap-negative-soft); border-color: var(--accent-line); color: var(--accent); }
.status-chip[data-tier="moderate"] { background: rgba(245, 166, 35, 0.14); border-color: rgba(245, 166, 35, 0.4); color: #ffcf7d; }
.status-chip[data-tier="high"] { background: rgba(239, 68, 68, 0.14); border-color: rgba(239, 68, 68, 0.45); color: #fca5a5; }
.status-chip[data-tier="critical"] { background: rgba(185, 28, 28, 0.22); border-color: rgba(185, 28, 28, 0.55); color: #ffb3b3; }

/* Trust/safety strip in the demo module heroes (Heart Disease Demo) */
.status-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.25rem;
}

.metric-float {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: rgba(9, 18, 34, 0.85);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.65rem 1rem;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(8px);
  animation: floatY 5.5s ease-in-out infinite;
}

.metric-float__label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.metric-float__value {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent);
}

.metric-float--1 { top: -18px; left: -18px; animation-delay: 0s; }
.metric-float--2 { bottom: 30px; right: -22px; animation-delay: 1.2s; }
.metric-float--3 { bottom: -22px; left: 12%; animation-delay: 2.4s; }

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

/* ---------- Section shell ---------- */
.section {
  padding: 5.5rem 0;
  position: relative;
}

.section--alt { background: var(--bg-900); }

/* ---------- Reusable hero-style grid surface ----------
   Extracted 1:1 from the Hero background (.hero__bg / .hero__glow /
   .hero__grid-pattern, above at ~line 272) into a single class so the
   "lighter blue flat" .section--alt sections can share exactly the same
   base gradient + corner glows + masked grid mesh, instead of every
   section re-implementing its own variant. Placed after .section--alt
   (not grouped with the Hero rules above) purely so its `background`
   reliably wins the cascade over .section--alt's flat one when both
   classes are applied to the same section - same specificity, later
   wins.

   Layering (bottom to top), same three pieces as the Hero, using the
   codebase's usual ::before/::after + isolate + overflow:hidden section
   background convention (used by .two-layers-section etc. above) rather
   than the Hero's own wrapper-<div> markup, so it can be applied to any
   section via a class alone - no extra DOM required per section:
     1. the section's own `background` - base diagonal gradient, identical
        stops/colours to .hero__bg.
     2. ::before - the two corner glows, blurred exactly like .hero__glow
        (safe to blur full-bleed: this layer has no full-bleed opaque
        content, only two small no-repeat radial-gradient blobs that
        already fade to transparent well inside their own box, so the
        blur can't smear an opaque edge - unlike the base gradient, which
        is why that stays on its own unblurred layer above).
     3. ::after - the grid-line mesh, same 42px spacing/opacity and the
        same radial mask fading it out toward the edges as
        .hero__grid-pattern.
   Both pseudo-elements are z-index:0 and pointer-events:none; the
   section's .container is promoted to z-index:1, so content, cards and
   CTAs are always unaffected and always on top. */
.section-bg-grid {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 50% at 15% 10%, rgba(47, 217, 196, 0.10), transparent 60%),
    linear-gradient(160deg, #050b16 0%, #081527 45%, #0b1e38 100%);
}

.section-bg-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  filter: blur(70px);
  background:
    radial-gradient(circle, var(--accent-glow), transparent 70%) no-repeat,
    radial-gradient(circle, rgba(20, 184, 172, 0.18), transparent 70%) no-repeat;
  background-size: 420px 420px, 320px 320px;
  background-position: right -80px top -120px, left 5% bottom -100px;
}

.section-bg-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 40%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 40%, transparent 85%);
}

.section-bg-grid > .container {
  position: relative;
  z-index: 1;
}

.section__head { max-width: 760px; margin-bottom: 3rem; }

.section__kicker {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.7rem;
}

.section__title {
  font-size: clamp(1.6rem, 2.6vw, 2.15rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1.28;
}

.section__lead {
  margin-top: 0.9rem;
  color: var(--text-muted);
  font-size: 1.02rem;
  max-width: 62ch;
}

.section__foot { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; }

/* ---------- Home section background graphics ----------
   Visible-but-secondary background art for four Home sections. Layered
   via ::before (image) + ::after (gradient overlay, darker over the
   left/text column, lighter toward the right/outer edges where the
   art itself lives) so the section's own .container content sits above
   both on z-index:1. Cards get their own scoped, slightly darker
   background (below) so they stay crisply readable even as the section
   background underneath them is now clearly visible rather than a
   near-invisible tint. */
.two-layers-section,
.home-command-center-section,
.example-modules-section,
.key-benefits-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.two-layers-section::before,
.home-command-center-section::before,
.example-modules-section::before,
.key-benefits-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: cover;
}

.two-layers-section::after,
.home-command-center-section::after,
.example-modules-section::after,
.key-benefits-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 8, 16, 0.74) 0%, rgba(2, 8, 16, 0.5) 45%, rgba(2, 8, 16, 0.4) 100%),
    linear-gradient(180deg, rgba(2, 8, 16, 0.6), rgba(2, 8, 16, 0.66));
}

.two-layers-section > .container,
.home-command-center-section > .container,
.example-modules-section > .container,
.key-benefits-section > .container {
  position: relative;
  z-index: 1;
}

/* Cards get a slightly darker, more opaque backing than the site-wide
   --glass tint so they hold contrast against a now clearly-visible
   background image sitting directly behind them. (.key-benefits-section
   .benefit-col is no longer in this list - its own premium glass
   background, further below, already carries enough opacity for
   contrast and would otherwise be overridden by this rule's higher
   specificity regardless of source order.) */
.two-layers-section .module-card,
.home-command-center-section .forecast-card,
.example-modules-section .module-card,
.example-modules-section .preview-card {
  background: rgba(4, 10, 20, 0.62);
}

/* "Two complementary layers" - centered/slightly right, clearly present
   without overpowering the two-card layout. */
.two-layers-section::before {
  background-image: url("../img/backgrounds/Home_OlatgormBG_6.png");
  background-position: center right;
  opacity: 0.4;
}

/* "Hospital Command Center" - the richest of the four; visual activity
   sits to the right (matches the source image's own composition). A
   faint cyan glow echoes the brand accent over that same area. */
.home-command-center-section::before {
  background-image: url("../img/backgrounds/Home_HSCC_BG_7.png");
  background-position: right center;
  opacity: 0.5;
  filter: saturate(1.08) contrast(1.08);
}

.home-command-center-section::after {
  background:
    linear-gradient(90deg, rgba(2, 8, 16, 0.74) 0%, rgba(2, 8, 16, 0.46) 45%, rgba(2, 8, 16, 0.34) 100%),
    linear-gradient(180deg, rgba(2, 8, 16, 0.58), rgba(2, 8, 16, 0.64)),
    radial-gradient(circle at 78% 35%, rgba(20, 220, 210, 0.1), transparent 55%);
}

/* "Example Modules" - frames the module cards; center stays relatively
   clean, more detail visible at the far left/right edges. Its source
   art is thinner/dimmer line-work than the other three, so it gets the
   top of the opacity range plus a lighter overlay to actually read as
   present rather than washing back out under the standard overlay. */
.example-modules-section::before {
  background-image: url("../img/backgrounds/Home_Apps_BG_5.png");
  background-position: center;
  opacity: 0.5;
  filter: saturate(1.15) contrast(1.15) brightness(1.1);
}

.example-modules-section::after {
  background:
    linear-gradient(90deg, rgba(2, 8, 16, 0.62) 0%, rgba(2, 8, 16, 0.36) 45%, rgba(2, 8, 16, 0.28) 100%),
    linear-gradient(180deg, rgba(2, 8, 16, 0.46), rgba(2, 8, 16, 0.52));
}

/* "Key Benefits" - the calmest of the four; still clearly present, but
   kept toward the lower end of the range so the disclaimer section
   directly below stays highly readable. */
.key-benefits-section::before {
  background-image: url("../img/backgrounds/Home_KB_BG_1.png");
  background-position: center top;
  opacity: 0.32;
}

.key-benefits-section::after {
  background:
    linear-gradient(90deg, rgba(2, 8, 16, 0.76) 0%, rgba(2, 8, 16, 0.56) 45%, rgba(2, 8, 16, 0.48) 100%),
    linear-gradient(180deg, rgba(2, 8, 16, 0.64), rgba(2, 8, 16, 0.7));
}

@media (max-width: 760px) {
  .two-layers-section::before,
  .home-command-center-section::before,
  .example-modules-section::before,
  .key-benefits-section::before {
    background-position: center;
    opacity: 0.3;
  }

  .two-layers-section::after,
  .home-command-center-section::after,
  .example-modules-section::after,
  .key-benefits-section::after {
    background:
      linear-gradient(180deg, rgba(2, 8, 16, 0.66), rgba(2, 8, 16, 0.72));
  }
}

/* ---------- Two Layers: shared AI core showcase ----------
   The two Layer cards plus a small "shared AI core" node sitting between
   them, with thin connector lines suggesting both layers run on the same
   explainable AI foundation. .layer-card layers on top of the existing
   .module-card (base look/spacing untouched); .shared-ai-core and
   .layer-connector are new, self-contained elements with no effect on
   any other section. Card lift/glow and connector highlighting both key
   off :hover AND :focus-within, so keyboard users get the same feedback
   as mouse users. Every animation here (core pulse, connector signal,
   micro-visual draw-in) is also covered by the sitewide
   prefers-reduced-motion rule (line ~125), which forces near-instant,
   single-iteration animations; the block below additionally swaps them
   for a calm static glow so reduced-motion users see a deliberate state,
   not a truncated animation frame. */
.layer-showcase {
  --layer-gap: 2.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: var(--layer-gap);
}

/* Scoped as ".layer-showcase .layer-card" (not just ".layer-card") so
   these win over the later, more generic ".module-card" hover rule at
   equal specificity would otherwise contest on source order. */
.layer-showcase .layer-card {
  /* Glow uses filter:drop-shadow, not box-shadow: .module-card (and
     [data-spotlight-card], reused here for the cursor-glow) both rely on
     overflow:hidden, which would clip an outer box-shadow. drop-shadow
     renders after that clip and isn't affected by it. */
  position: relative;
  transition: transform 360ms cubic-bezier(0.22, 0.9, 0.35, 1), border-color 360ms ease, filter 360ms ease;
}

.layer-showcase .layer-card:hover,
.layer-showcase .layer-card:focus-within {
  transform: translateY(-6px);
  border-color: var(--accent-line);
  filter: drop-shadow(0 20px 40px rgba(2, 8, 16, 0.45)) drop-shadow(0 0 22px rgba(47, 217, 196, 0.28));
}

/* ---- Shared AI core node ---- */
.shared-ai-core {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  align-self: center;
}

.shared-ai-core__node {
  position: relative;
  z-index: 2;
  display: block;
  width: 16px;
  height: 16px;
}

.shared-ai-core__dot {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #eafffb, var(--accent) 55%, var(--accent-2) 100%);
  box-shadow: 0 0 0 1px rgba(47, 217, 196, 0.45), 0 0 16px 3px rgba(47, 217, 196, 0.32);
  transition: box-shadow 360ms ease, transform 360ms ease;
}

.shared-ai-core__ring {
  position: absolute;
  inset: -9px;
  z-index: 1;
  border-radius: 50%;
  border: 1px solid var(--accent-line);
  opacity: 0.65;
  animation: sharedCoreRing 3.6s ease-out infinite;
}

.layer-showcase:has(.layer-card:hover, .layer-card:focus-within) .shared-ai-core__dot {
  box-shadow: 0 0 0 1px rgba(47, 217, 196, 0.6), 0 0 24px 6px rgba(47, 217, 196, 0.45);
  transform: scale(1.15);
}

@keyframes sharedCoreRing {
  0% { transform: scale(0.6); opacity: 0.65; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ---- Connector lines: thin gradient bars filling the grid gap exactly,
   with a small traveling highlight suggesting signal flow between each
   card and the shared core. ---- */
.layer-connector {
  position: absolute;
  top: 50%;
  width: var(--layer-gap);
  height: 2px;
  transform: translateY(-50%);
  overflow: hidden;
  opacity: 0.4;
  transition: opacity 360ms ease;
}

.layer-connector--left {
  right: 100%;
  background: linear-gradient(90deg, transparent, rgba(47, 217, 196, 0.6));
}

.layer-connector--right {
  left: 100%;
  background: linear-gradient(270deg, transparent, rgba(47, 217, 196, 0.6));
}

.layer-connector::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 42%, #eafffb 50%, transparent 58%);
  background-size: 280% 100%;
  animation: layerConnectorSignal 4.2s linear infinite;
}

.layer-connector--right::after { animation-direction: reverse; }

@keyframes layerConnectorSignal {
  0% { background-position: 140% 0; }
  100% { background-position: -40% 0; }
}

.layer-showcase:has(.layer-card--hospital:hover, .layer-card--hospital:focus-within) .layer-connector--left,
.layer-showcase:has(.layer-card--doctor:hover, .layer-card--doctor:focus-within) .layer-connector--right {
  opacity: 1;
}

/* ---- Hospital card micro-visual: small forecast line + peak glow ---- */
.layer-forecast-mini {
  width: 108px;
  height: 38px;
  margin: 0.9rem 0 0.15rem;
}

.layer-forecast-mini__svg { width: 100%; height: 100%; overflow: visible; }

.layer-forecast-mini__line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
  stroke-dasharray: 170;
  stroke-dashoffset: 170;
  transition: stroke-dashoffset 1.3s cubic-bezier(0.22, 0.9, 0.35, 1);
}

.reveal.is-visible .layer-forecast-mini__line { stroke-dashoffset: 0; }

.layer-forecast-mini__peak {
  fill: #eafffb;
  filter: drop-shadow(0 0 4px rgba(47, 217, 196, 0.75));
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  transition: opacity 400ms ease 900ms;
}

.reveal.is-visible .layer-forecast-mini__peak { opacity: 0.85; }

.layer-card--hospital:hover .layer-forecast-mini__peak,
.layer-card--hospital:focus-within .layer-forecast-mini__peak {
  animation: layerForecastPeakPulse 2.1s ease-in-out infinite;
}

@keyframes layerForecastPeakPulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.35); }
}

/* ---- Doctor card micro-visual: small SHAP-style risk bars ---- */
.layer-shap-mini {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
  height: 38px;
  margin: 0.9rem 0 0.15rem;
}

.layer-shap-mini__bar {
  display: block;
  width: 10px;
  height: 100%;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.07);
  position: relative;
  overflow: hidden;
}

.layer-shap-mini__bar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0%;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 10px rgba(47, 217, 196, 0.35);
  transition: height 900ms cubic-bezier(0.22, 0.9, 0.35, 1);
}

.reveal.is-visible .layer-shap-mini__bar::after { height: var(--bar-w, 50%); }

.layer-card--doctor:hover .layer-shap-mini__bar::after,
.layer-card--doctor:focus-within .layer-shap-mini__bar::after {
  height: calc(var(--bar-w, 50%) + 10%);
}

.layer-shap-mini__bar:nth-child(2)::after { transition-delay: 90ms; }
.layer-shap-mini__bar:nth-child(3)::after { transition-delay: 180ms; }

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

  .shared-ai-core {
    width: auto;
    height: 34px;
    justify-self: center;
  }

  .layer-connector {
    top: 100%;
    left: 50%;
    width: 2px;
    height: var(--layer-gap);
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(47, 217, 196, 0.6), transparent);
  }

  .layer-connector--left {
    top: auto;
    bottom: 100%;
    right: auto;
    background: linear-gradient(180deg, transparent, rgba(47, 217, 196, 0.6));
  }

  .layer-connector::after {
    background: linear-gradient(180deg, transparent 42%, #eafffb 50%, transparent 58%);
    background-size: 100% 280%;
    animation-name: layerConnectorSignalVertical;
  }

  @keyframes layerConnectorSignalVertical {
    0% { background-position: 0 140%; }
    100% { background-position: 0 -40%; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .shared-ai-core__ring { animation: none; opacity: 0.35; }
  .layer-connector::after { animation: none; background: none; }
  .layer-forecast-mini__peak { animation: none; }
  .layer-showcase .layer-card,
  .shared-ai-core__dot,
  .layer-connector,
  .layer-forecast-mini__line,
  .layer-forecast-mini__peak,
  .layer-shap-mini__bar::after {
    transition: none;
  }
  .layer-forecast-mini__line { stroke-dashoffset: 0; }
  .layer-forecast-mini__peak { opacity: 0.85; }
  .layer-shap-mini__bar::after { height: var(--bar-w, 50%); }
}

/* ---------- Disease Forecasting page background graphics ----------
   Same system as the Home section backgrounds above (::before image +
   ::after gradient overlay + isolated stacking context), just pitched
   very slightly more visible per page brief - this page is the Layer 1
   deep-dive, so a touch more atmosphere is appropriate here than on
   the Home preview strip. */
.fc-executive-problem-section,
.fc-command-center-section,
.fc-see-in-action-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.fc-executive-problem-section::before,
.fc-command-center-section::before,
.fc-see-in-action-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: cover;
}

.fc-executive-problem-section::after,
.fc-command-center-section::after,
.fc-see-in-action-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.fc-executive-problem-section > .container,
.fc-command-center-section > .container,
.fc-see-in-action-section > .container {
  position: relative;
  z-index: 1;
}

/* Cards get the same slightly-darker, more opaque backing as the Home
   pattern so they hold contrast against a clearly-visible background -
   only the Executive Problem section has cards here (the other two are
   text + CTA buttons, which already sit on their own solid fills). */
.fc-executive-problem-section .problem-card {
  background: rgba(4, 10, 20, 0.62);
}

/* "Executive Problem" - moody, serious; a little richer than Home's
   "Key Benefits" background, keeps the problem-card grid readable. */
.fc-executive-problem-section::before {
  background-image: url("../img/backgrounds/Forecast_Executive_BG_1.png");
  background-position: center right;
  opacity: 0.41;
}

.fc-executive-problem-section::after {
  background:
    linear-gradient(90deg, rgba(2, 8, 16, 0.72) 0%, rgba(2, 8, 16, 0.48) 45%, rgba(2, 8, 16, 0.38) 100%),
    linear-gradient(180deg, rgba(2, 8, 16, 0.58), rgba(2, 8, 16, 0.64));
}

/* "Hospital Command Center" - the richest and most atmospheric of the
   three, similar to (slightly stronger than) Home's Command Center
   background; visual detail sits to the right with a faint cyan glow
   echoing the brand accent. */
.fc-command-center-section::before {
  background-image: url("../img/backgrounds/DF_CC_BG_4.png");
  background-position: right center;
  opacity: 0.53;
  filter: saturate(1.08) contrast(1.08);
}

.fc-command-center-section::after {
  background:
    linear-gradient(90deg, rgba(2, 8, 16, 0.7) 0%, rgba(2, 8, 16, 0.42) 45%, rgba(2, 8, 16, 0.3) 100%),
    linear-gradient(180deg, rgba(2, 8, 16, 0.54), rgba(2, 8, 16, 0.6)),
    radial-gradient(circle at 76% 40%, rgba(20, 220, 210, 0.11), transparent 55%);
}

/* "See in action" - a refined, slightly more dynamic CTA background;
   clearly visible without competing with the buttons/text above it. */
.fc-see-in-action-section::before {
  background-image: url("../img/backgrounds/DF_Action_BG_4.png");
  background-position: center right;
  opacity: 0.47;
  filter: saturate(1.1) contrast(1.1) brightness(1.05);
}

.fc-see-in-action-section::after {
  background:
    linear-gradient(90deg, rgba(2, 8, 16, 0.66) 0%, rgba(2, 8, 16, 0.4) 45%, rgba(2, 8, 16, 0.3) 100%),
    linear-gradient(180deg, rgba(2, 8, 16, 0.5), rgba(2, 8, 16, 0.56));
}

@media (max-width: 760px) {
  .fc-executive-problem-section::before,
  .fc-command-center-section::before,
  .fc-see-in-action-section::before {
    background-position: center;
    opacity: 0.32;
  }

  .fc-executive-problem-section::after,
  .fc-command-center-section::after,
  .fc-see-in-action-section::after {
    background:
      linear-gradient(180deg, rgba(2, 8, 16, 0.62), rgba(2, 8, 16, 0.68));
  }
}

/* ---------- Doctor Assistant page background graphics ----------
   Same system as Home / Disease Forecasting: ::before image + ::after
   gradient overlay under an isolated stacking context, visibility in
   line with Disease Forecasting but pitched slightly more clinical /
   patient-level than operational - cooler, quieter compositions rather
   than the Command Center's dense dashboard chrome. */
.da-problems-section,
.da-how-it-works-section,
.da-example-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.da-problems-section::before,
.da-how-it-works-section::before,
.da-example-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: cover;
}

.da-problems-section::after,
.da-how-it-works-section::after,
.da-example-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.da-problems-section > .container,
.da-how-it-works-section > .container,
.da-example-section > .container {
  position: relative;
  z-index: 1;
}

/* Cards get the same scoped darker backing as the other pages, so they
   hold contrast against a clearly-visible background. */
.da-problems-section .problem-card,
.da-how-it-works-section .timeline__step,
.da-example-section .module-card {
  background: rgba(4, 10, 20, 0.62);
}

/* "What problems do we solve?" - serious, moody, clinical; supports
   fragmented data / uncertainty / explainability framing. */
.da-problems-section::before {
  background-image: url("../img/backgrounds/DA_Problem_BG.png");
  background-position: center;
  opacity: 0.39;
}

.da-problems-section::after {
  background:
    linear-gradient(90deg, rgba(2, 8, 16, 0.7) 0%, rgba(2, 8, 16, 0.5) 45%, rgba(2, 8, 16, 0.42) 100%),
    linear-gradient(180deg, rgba(2, 8, 16, 0.58), rgba(2, 8, 16, 0.64));
}

/* "How does .be healthy work?" - slightly more structured/visible,
   echoing the step-by-step pipeline the timeline itself describes. */
.da-how-it-works-section::before {
  background-image: url("../img/backgrounds/DA_StepByStep_BG_2.png");
  background-position: center;
  opacity: 0.43;
  filter: saturate(1.05) contrast(1.05);
}

.da-how-it-works-section::after {
  background:
    linear-gradient(90deg, rgba(2, 8, 16, 0.68) 0%, rgba(2, 8, 16, 0.46) 45%, rgba(2, 8, 16, 0.36) 100%),
    linear-gradient(180deg, rgba(2, 8, 16, 0.54), rgba(2, 8, 16, 0.6));
}

/* "Example module" - the richest/most visible of the three, a premium
   clinical-AI preview; source art's own detail sits to the right, so
   the overlay stays darkest on the left where the heading/lead live and
   lightest behind the module-card's chart preview. */
.da-example-section::before {
  background-image: url("../img/backgrounds/DA_Example_BG_4.png");
  background-position: right center;
  opacity: 0.48;
  filter: saturate(1.08) contrast(1.08);
}

.da-example-section::after {
  background:
    linear-gradient(90deg, rgba(2, 8, 16, 0.72) 0%, rgba(2, 8, 16, 0.44) 45%, rgba(2, 8, 16, 0.3) 100%),
    linear-gradient(180deg, rgba(2, 8, 16, 0.52), rgba(2, 8, 16, 0.58));
}

@media (max-width: 760px) {
  .da-problems-section::before,
  .da-how-it-works-section::before,
  .da-example-section::before {
    background-position: center;
    opacity: 0.3;
  }

  .da-problems-section::after,
  .da-how-it-works-section::after,
  .da-example-section::after {
    background:
      linear-gradient(180deg, rgba(2, 8, 16, 0.62), rgba(2, 8, 16, 0.68));
  }
}

/* ---------- Example Modules gallery + Technology architecture
   backgrounds (with subtle parallax) ----------
   Same visual system as the rest of the site, but - like the Hospital
   Command Center dashboard - each of these two sections has only one
   background, so the image layer is a real element (not a ::before
   pseudo-element). The full-width `[data-parallax-bg]` OUTER SECTION
   (never `.container`, which would clip it to max-width) is what a
   single shared scroll handler in main.js (initParallaxBackgrounds)
   selects and reads the bounding rect of - it writes the `--parallax-y`
   custom property onto that same section, which the child `*-parallax-bg`
   layer's `transform` reads via `var(--parallax-y, 0px)`. One listener
   drives all three parallax layers on the site (this pair + the Command
   Center's) at once, rather than duplicating a scroll listener per
   section. */
.modules-gallery-section,
.tech-architecture-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.modules-parallax-bg,
.tech-parallax-bg {
  position: absolute;
  top: -40px;
  right: 0;
  bottom: -40px;
  left: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.06);
  will-change: transform;
}

.modules-gallery-section::after,
.tech-architecture-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.modules-gallery-section > .container,
.tech-architecture-section > .container {
  position: relative;
  z-index: 1;
}

/* Cards get the same scoped darker backing as the other pages. */
.modules-gallery-section .module-card,
.tech-architecture-section .arch-tier,
.tech-architecture-section .page-toc {
  background: rgba(4, 10, 20, 0.62);
}

/* Example Modules - a modular AI launchpad feel; the source art's own
   translucent card-outline grid echoes the module-card grid, so it can
   run fairly rich while the outer margins carry most of the detail. */
.modules-parallax-bg {
  background-image: url("../img/backgrounds/Examples_BG_2.png");
  opacity: 0.46;
  filter: saturate(1.06) contrast(1.06);
}

.modules-gallery-section::after {
  background:
    linear-gradient(90deg, rgba(2, 8, 16, 0.6) 0%, rgba(2, 8, 16, 0.4) 45%, rgba(2, 8, 16, 0.34) 100%),
    linear-gradient(180deg, rgba(2, 8, 16, 0.48), rgba(2, 8, 16, 0.54));
}

/* Technology - a trusted architecture-layer feel; kept a touch more
   restrained than Example Modules, with extra protection on the left
   where the pipeline/subsection copy lives (no card behind that text). */
.tech-parallax-bg {
  background-image: url("../img/backgrounds/Technology_BG_1.png");
  opacity: 0.42;
  filter: saturate(1.05) contrast(1.06);
}

.tech-architecture-section::after {
  background:
    linear-gradient(90deg, rgba(2, 8, 16, 0.72) 0%, rgba(2, 8, 16, 0.52) 45%, rgba(2, 8, 16, 0.42) 100%),
    linear-gradient(180deg, rgba(2, 8, 16, 0.56), rgba(2, 8, 16, 0.62));
}

@media (prefers-reduced-motion: reduce) {
  .modules-gallery-section,
  .tech-architecture-section {
    --parallax-y: 0px;
  }
}

@media (max-width: 768px) {
  .modules-gallery-section,
  .tech-architecture-section {
    --parallax-y: 0px;
  }

  .modules-parallax-bg,
  .tech-parallax-bg {
    opacity: 0.32;
  }
}

/* ---------- Problems ---------- */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

.problem-card {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem 1.6rem;
  transition: transform var(--transition), border-color var(--transition), background var(--transition);
}

.problem-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-line);
  background: var(--glass-strong);
}

.problem-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: 1.1rem;
}

.icon-svg { width: 24px; height: 24px; }

.problem-card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.problem-card p {
  color: var(--text-muted);
  font-size: 0.92rem;
}

/* ---------- Problems (Home): rising-pressure showcase ----------
   Scoped to ".problem-pressure-section" (Home page only - the "Hospitals
   often react…" intro) so the Disease Forecasting page's #fc-problem and
   the Doctor Assistant page's .da-problems-section, which reuse the same
   base .problem-grid/.problem-card, are unaffected. A background SVG
   pressure line runs behind the cards: jagged/irregular on the left
   (today's fragmented, reactive state), smoothing into a clean rising
   curve on the right whose gradient brightens toward the accent colour -
   a label-free cue that the next section (forecasting/command-center)
   resolves what these four cards describe. Every animated part
   (line draw-in, glint travel, breathing peak dot) is covered by the
   sitewide prefers-reduced-motion rule (~line 125) and is additionally
   frozen to a calm static state below, so reduced-motion users see the
   finished picture, not a cut-off animation. */
.problem-pressure-section {
  position: relative;
}

.pressure-flow-line {
  /* Explicit pixel height + a single offset (bottom), not a percentage
     height and not top+bottom together: .problem-pressure-section has no
     explicit height of its own (sized by its content), and letting an
     absolutely positioned replaced element (SVG has an intrinsic ratio
     from its viewBox) derive its height from that resolved inconsistently
     across the two dimensions. A fixed height sidesteps the ambiguity.
     Width is intentionally ~76% (not full-bleed): the line is meant to
     read as rising pressure across the first three cards and settle to a
     point around card 3, not stretch a tail under card 4. */
  position: absolute;
  left: 0;
  width: 76%;
  bottom: -20px;
  height: 340px;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

.pressure-flow-line__path,
.pressure-flow-line__glint {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Fades the last stretch of the line to nothing instead of letting it
     end on a hard cut - the terminus dot below (unmasked) stays the one
     crisp, deliberate stopping point. */
  mask-image: linear-gradient(90deg, black 0%, black 72%, transparent 96%);
  -webkit-mask-image: linear-gradient(90deg, black 0%, black 72%, transparent 96%);
}

.pressure-flow-line__path {
  stroke: url(#pressureFlowGradient);
  stroke-width: 1.5;
  stroke-dasharray: 1100;
  stroke-dashoffset: 1100;
  transition: stroke-dashoffset 1.8s cubic-bezier(0.22, 0.9, 0.35, 1);
}

.problem-pressure-section.is-visible .pressure-flow-line__path {
  stroke-dashoffset: 0;
}

.pressure-flow-line__glint {
  stroke: #eafffb;
  stroke-width: 1.8;
  stroke-dasharray: 30 1100;
  opacity: 0;
  transition: opacity 0.6s ease 1.6s;
}

.problem-pressure-section.is-visible .pressure-flow-line__glint {
  opacity: 0.3;
  animation: pressureFlowGlint 7s linear 2.2s infinite;
}

@keyframes pressureFlowGlint {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -1130; }
}

/* A small, deliberate stop for the line - "pressure settles here", at
   card 3 - rather than an abrupt cut or a tail running under card 4. */
.pressure-flow-line__terminus {
  fill: #eafffb;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(47, 217, 196, 0.75));
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.6s ease 1.4s;
}

.problem-pressure-section.is-visible .pressure-flow-line__terminus {
  opacity: 0.9;
  animation: pressureTerminusPulse 3.6s ease-in-out 2s infinite;
}

@keyframes pressureTerminusPulse {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

.problem-pressure-section .problem-grid {
  position: relative;
  z-index: 1;
}

/* Slightly more opaque backing than the plain --glass default, so the
   pressure line and its glint stay clearly behind the text rather than
   reducing its contrast - same technique already used for the Home
   background-art sections above. */
.problem-pressure-section .problem-card {
  /* Includes opacity explicitly: this rule's higher specificity than the
     sitewide .reveal rule would otherwise wholesale-replace its
     transition-property list (shorthand cascades don't merge per
     property) and silently drop the fade-in, leaving only transform
     animated and opacity jumping instantly. */
  position: relative;
  background: rgba(4, 10, 20, 0.62);
  overflow: visible;
  transition: opacity 700ms ease, transform 360ms cubic-bezier(0.22, 0.9, 0.35, 1), border-color 360ms ease, background 360ms ease, box-shadow 360ms ease;
}

.problem-pressure-section .problem-card:hover,
.problem-pressure-section .problem-card:focus-within,
.problem-pressure-section .problem-card:active {
  transform: translateY(-5px);
  border-color: var(--accent-line);
  background: rgba(6, 14, 26, 0.72);
  box-shadow: 0 18px 40px rgba(2, 8, 16, 0.45), 0 0 0 1px rgba(47, 217, 196, 0.14), 0 0 26px rgba(47, 217, 196, 0.14);
}

.problem-pressure-section .problem-card__icon {
  transition: color 360ms ease, background 360ms ease, box-shadow 360ms ease;
}

.problem-pressure-section .problem-card:hover .problem-card__icon,
.problem-pressure-section .problem-card:focus-within .problem-card__icon,
.problem-pressure-section .problem-card:active .problem-card__icon {
  color: #eafffb;
  background: rgba(47, 217, 196, 0.24);
  box-shadow: 0 0 16px rgba(47, 217, 196, 0.32);
}

/* Progressive reveal: a touch smaller travel distance than the sitewide
   .reveal (18px) and a slight stagger per card, per brief (10-16px). */
.problem-pressure-section .problem-card.reveal {
  transform: translateY(14px);
}

.problem-pressure-section .problem-card.reveal.is-visible {
  transform: translateY(0);
}

.problem-pressure-section .problem-card:nth-child(2) { transition-delay: 90ms; }
.problem-pressure-section .problem-card:nth-child(3) { transition-delay: 180ms; }
.problem-pressure-section .problem-card:nth-child(4) { transition-delay: 270ms; }

/* ---- Card 1 - procurement: a radial "still catching up" progress ring ---- */
.micro-procurement-delay {
  display: inline-block;
  width: 36px;
  height: 36px;
  margin-top: 1.1rem;
}

.micro-procurement-delay__svg { width: 100%; height: 100%; transform: rotate(-90deg); }

.micro-procurement-delay__track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.09);
  stroke-width: 2.4;
}

.micro-procurement-delay__progress {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: 0.85;
  stroke-dasharray: 88;
  stroke-dashoffset: 88;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.22, 0.9, 0.35, 1);
}

/* Draws in to a deliberately incomplete ring - "still catching up", not done. */
.problem-pressure-section.is-visible .micro-procurement-delay__progress { stroke-dashoffset: 30; }

.problem-card--procurement:hover .micro-procurement-delay__progress,
.problem-card--procurement:focus-within .micro-procurement-delay__progress,
.problem-card--procurement:active .micro-procurement-delay__progress {
  stroke-dashoffset: 14;
  transition-duration: 900ms;
}

/* ---- Card 2 - history vs. forecast: solid past line, faint missing future ---- */
.micro-history-forecast { display: inline-block; width: 84px; height: 26px; margin-top: 1.1rem; }
.micro-history-forecast__svg { width: 100%; height: 100%; overflow: visible; }

.micro-history-forecast__past {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  opacity: 0.85;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.22, 0.9, 0.35, 1);
}

.problem-pressure-section.is-visible .micro-history-forecast__past { stroke-dashoffset: 0; }

.micro-history-forecast__future {
  fill: none;
  stroke: rgba(47, 217, 196, 0.55);
  stroke-width: 1.4;
  stroke-dasharray: 3 4;
  opacity: 0.3;
  transition: opacity 360ms ease;
}

.problem-card--history:hover .micro-history-forecast__future,
.problem-card--history:focus-within .micro-history-forecast__future,
.problem-card--history:active .micro-history-forecast__future {
  opacity: 0.75;
}

/* ---- Card 3 - seasonal peaks: rising wave with one restrained amber peak ---- */
.micro-seasonal-peak { display: inline-block; width: 84px; height: 26px; margin-top: 1.1rem; }
.micro-seasonal-peak__svg { width: 100%; height: 100%; overflow: visible; }

.micro-seasonal-peak__line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  opacity: 0.75;
  stroke-dasharray: 96;
  stroke-dashoffset: 96;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.22, 0.9, 0.35, 1), opacity 360ms ease;
}

.problem-pressure-section.is-visible .micro-seasonal-peak__line { stroke-dashoffset: 0; }

.problem-card--peaks:hover .micro-seasonal-peak__line,
.problem-card--peaks:focus-within .micro-seasonal-peak__line,
.problem-card--peaks:active .micro-seasonal-peak__line {
  opacity: 1;
}

.micro-seasonal-peak__dot {
  fill: #f0a63d;
  filter: drop-shadow(0 0 4px rgba(240, 166, 61, 0.55));
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 400ms ease 900ms;
}

.problem-pressure-section.is-visible .micro-seasonal-peak__dot {
  opacity: 0.8;
  animation: seasonalPeakBreath 4.5s ease-in-out 1.3s infinite;
}

@keyframes seasonalPeakBreath {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.12); }
}

/* ---- Card 4 - dashboard: scattered nodes, faint missing links on hover ---- */
.micro-missing-dashboard { display: block; width: 70px; height: 34px; margin-top: 1.1rem; }
.micro-missing-dashboard__svg { width: 100%; height: 100%; overflow: visible; }

.micro-missing-dashboard__node {
  fill: var(--accent);
  opacity: 0.85;
}

.micro-missing-dashboard__node--center { fill: #eafffb; }

.micro-missing-dashboard__link {
  stroke: rgba(47, 217, 196, 0.55);
  stroke-width: 1.2;
}

.micro-missing-dashboard__link--missing {
  stroke: rgba(47, 217, 196, 0.45);
  stroke-dasharray: 2 3;
  opacity: 0.12;
  transition: opacity 500ms ease;
}

.problem-card--dashboard:hover .micro-missing-dashboard__link--missing,
.problem-card--dashboard:focus-within .micro-missing-dashboard__link--missing,
.problem-card--dashboard:active .micro-missing-dashboard__link--missing {
  opacity: 0.6;
}

@media (max-width: 1040px) {
  /* Cards stack/wrap well before this (auto-fit, minmax(220px,1fr)) -
     below this width the .problem-grid may no longer be a single row,
     and the line is tuned for exactly one row, so it hides rather than
     risk crossing a wrapped second row's text at an unpredictable height. */
  .pressure-flow-line { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pressure-flow-line__path { transition: none; stroke-dashoffset: 0; }
  .pressure-flow-line__glint { animation: none; opacity: 0.22; transition: none; }
  .pressure-flow-line__terminus { animation: none; opacity: 0.75; transition: none; }
  .micro-seasonal-peak__dot { animation: none; opacity: 0.8; }
  .problem-pressure-section .problem-card,
  .problem-pressure-section .problem-card__icon,
  .micro-procurement-delay__progress,
  .micro-history-forecast__past,
  .micro-history-forecast__future,
  .micro-seasonal-peak__line,
  .micro-missing-dashboard__link--missing {
    transition: none;
  }
  .micro-procurement-delay__progress { stroke-dashoffset: 30; }
  .micro-history-forecast__past { stroke-dashoffset: 0; }
  .micro-seasonal-peak__line { stroke-dashoffset: 0; }
}

/* ---------- Disease Forecasting: "Executive Problem" ecosystem ----------
   Restructures the plain 5-card .problem-grid into 4 peer problem cards
   plus one "systemic effect" capstone card below, joined by thin
   converging connector lines - reading as "these four issues compound
   into one systemic failure mode: reactive, siloed management", which is
   the section's actual narrative. The four top cards reuse the Home
   page's micro-visual components verbatim (.micro-procurement-delay,
   .micro-history-forecast, .micro-seasonal-peak, .micro-missing-
   dashboard - same classes, same base CSS, same .problem-card--x
   modifiers) rather than inventing new ones; only .micro-silos (the
   capstone's "broken silos" motif) is new. Everything here is scoped to
   ".fc-executive-problem-section .fc-problem-ecosystem" so none of it
   touches the Home page's own reuse of these same base classes. */
.fc-problem-ecosystem {
  position: relative;
}

.fc-problem-grid-top {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}

/* ---- Premium shell, all five cards ---- */
.fc-executive-problem-section .fc-problem-ecosystem .problem-card {
  position: relative;
  background: linear-gradient(165deg, rgba(18, 30, 48, 0.55), rgba(6, 12, 22, 0.48));
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 14px 30px rgba(2, 8, 16, 0.28);
  /* Explicit opacity: this rule's specificity beats the sitewide .reveal
     rule (also applied to each card) and would otherwise wholesale-
     replace its transition-property list and drop the fade-in. */
  transition: opacity 700ms ease, transform 340ms cubic-bezier(0.22, 0.9, 0.35, 1), border-color 340ms ease, box-shadow 340ms ease, background 340ms ease;
}

.fc-executive-problem-section .fc-problem-ecosystem .problem-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(150px circle at 85% -12%, rgba(255, 255, 255, 0.07), transparent 70%);
}

.fc-executive-problem-section .fc-problem-ecosystem .problem-card > * {
  position: relative;
  z-index: 1;
}

.fc-executive-problem-section .fc-problem-ecosystem .problem-card h3 { line-height: 1.35; }
.fc-executive-problem-section .fc-problem-ecosystem .problem-card p { line-height: 1.55; }

.fc-executive-problem-section .fc-problem-ecosystem .problem-card:hover,
.fc-executive-problem-section .fc-problem-ecosystem .problem-card:focus-within,
.fc-executive-problem-section .fc-problem-ecosystem .problem-card:active {
  transform: translateY(-5px);
  border-color: var(--accent-line);
  background: linear-gradient(165deg, rgba(22, 36, 56, 0.62), rgba(8, 16, 28, 0.55));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 20px 40px rgba(2, 8, 16, 0.38), 0 0 24px rgba(47, 217, 196, 0.14);
}

.fc-executive-problem-section .fc-problem-ecosystem .problem-card__icon {
  transition: box-shadow 340ms ease;
}

.fc-executive-problem-section .fc-problem-ecosystem .problem-card:hover .problem-card__icon,
.fc-executive-problem-section .fc-problem-ecosystem .problem-card:focus-within .problem-card__icon,
.fc-executive-problem-section .fc-problem-ecosystem .problem-card:active .problem-card__icon {
  box-shadow: 0 0 14px rgba(47, 217, 196, 0.3);
}

/* Stagger the top row's entrance; capstone follows last. */
.fc-problem-grid-top .problem-card:nth-child(2) { transition-delay: 90ms; }
.fc-problem-grid-top .problem-card:nth-child(3) { transition-delay: 180ms; }
.fc-problem-grid-top .problem-card:nth-child(4) { transition-delay: 270ms; }
.problem-card--capstone { transition-delay: 360ms; }

/* Reveal triggers for the reused micro-visuals, keyed off each card's
   own .reveal.is-visible state (not a shared wrapper) - a touch more
   granular than the Home page version, giving each card's signal its
   own moment as it individually scrolls into view. */
.fc-problem-card.is-visible .micro-procurement-delay__progress { stroke-dashoffset: 30; }
.fc-problem-card.is-visible .micro-history-forecast__past { stroke-dashoffset: 0; }
.fc-problem-card.is-visible .micro-seasonal-peak__line { stroke-dashoffset: 0; }
.fc-problem-card.is-visible .micro-seasonal-peak__dot {
  opacity: 0.8;
  animation: seasonalPeakBreath 4.5s ease-in-out 1.3s infinite;
}

/* ---- Connector seam: four smooth curves converging from the cards
   above onto one shared anchor node, plus a short stub into the
   capstone card below.
   viewBox is sized close to the container's own max-width (1180) and
   the seam's real CSS height (100px) at roughly the same ratio as the
   viewBox (1180:112), so preserveAspectRatio="none" doesn't stretch
   the curves unevenly enough to visibly distort their shape.
   stroke-dasharray is a single generous overestimate (550) shared by
   all four paths - NOT sized to any one path's actual length. The
   previous version used 140, shorter than the ~400-476 unit length of
   the two outer curves, so at rest (dashoffset:0) the dash/gap pattern
   repeated partway along them, rendering as a visibly broken, offset
   second segment - that was the "random, disconnected" look. A
   generous shared value avoids needing a different number per path. */
.fc-problem-seam {
  position: relative;
  height: 100px;
  margin-top: 0.25rem;
}

.fc-problem-connectors {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.fc-problem-connectors__path {
  fill: none;
  stroke: rgba(47, 217, 196, 0.24);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 550;
  stroke-dashoffset: 550;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.22, 0.9, 0.35, 1), stroke 340ms ease, stroke-width 340ms ease;
}

/* Each curve draws in with a small stagger, left to right, instead of
   all four snapping in at once. */
.fc-problem-connectors__path--procurement { transition-delay: 0ms; }
.fc-problem-connectors__path--history { transition-delay: 90ms; }
.fc-problem-connectors__path--peaks { transition-delay: 180ms; }
.fc-problem-connectors__path--dashboard { transition-delay: 270ms; }

.fc-problem-ecosystem.is-visible .fc-problem-connectors__path {
  stroke-dashoffset: 0;
}

.fc-problem-connectors__stub {
  stroke: rgba(47, 217, 196, 0.35);
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 0.6s ease 1.1s;
}

.fc-problem-ecosystem.is-visible .fc-problem-connectors__stub {
  opacity: 1;
}

/* Hovering a top card brightens the one line that actually leads from
   it to the capstone - the same ":has()" highlight technique as the
   Home page's "shared AI core" connectors. */
.fc-problem-ecosystem:has(.problem-card--procurement:hover, .problem-card--procurement:focus-within) .fc-problem-connectors__path--procurement,
.fc-problem-ecosystem:has(.problem-card--history:hover, .problem-card--history:focus-within) .fc-problem-connectors__path--history,
.fc-problem-ecosystem:has(.problem-card--peaks:hover, .problem-card--peaks:focus-within) .fc-problem-connectors__path--peaks,
.fc-problem-ecosystem:has(.problem-card--dashboard:hover, .problem-card--dashboard:focus-within) .fc-problem-connectors__path--dashboard {
  stroke: rgba(47, 217, 196, 0.65);
  stroke-width: 2;
}

.fc-problem-connectors__node {
  fill: #eafffb;
  filter: drop-shadow(0 0 6px rgba(47, 217, 196, 0.6));
  opacity: 0.85;
  transform-box: fill-box;
  transform-origin: center;
}

.fc-problem-ecosystem.is-visible .fc-problem-connectors__node {
  animation: fcConnectorPulse 3.6s ease-in-out 1.3s infinite;
}

@keyframes fcConnectorPulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.25); }
}

/* ---- Capstone card: warm-amber "systemic effect" treatment, distinct
   in kind (not just degree) from the four cyan peer cards above ---- */
.problem-card--capstone {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}

.problem-card--capstone .problem-card__icon { margin: 0; }

.problem-card--capstone__body { flex: 1; min-width: 0; }

.problem-card--capstone__tag {
  display: inline-block;
  margin-bottom: 0.7rem;
  font-size: 0.62rem;
  padding: 0.28rem 0.6rem;
  background: rgba(245, 166, 35, 0.12);
  border-color: rgba(245, 166, 35, 0.32);
  color: #f0a63d;
}

.problem-card--capstone h3 { margin-bottom: 0.5rem; }

.fc-executive-problem-section .fc-problem-ecosystem .problem-card--capstone {
  border-color: rgba(245, 166, 35, 0.24);
  background: linear-gradient(165deg, rgba(40, 30, 14, 0.5), rgba(10, 8, 4, 0.42));
  box-shadow: inset 0 1px 0 rgba(255, 220, 150, 0.06), 0 16px 34px rgba(2, 8, 16, 0.3);
}

.fc-executive-problem-section .fc-problem-ecosystem .problem-card--capstone::before {
  background: radial-gradient(220px circle at 12% -14%, rgba(255, 200, 120, 0.08), transparent 70%);
}

.fc-executive-problem-section .fc-problem-ecosystem .problem-card--capstone:hover,
.fc-executive-problem-section .fc-problem-ecosystem .problem-card--capstone:focus-within,
.fc-executive-problem-section .fc-problem-ecosystem .problem-card--capstone:active {
  border-color: rgba(245, 166, 35, 0.42);
  background: linear-gradient(165deg, rgba(48, 36, 16, 0.58), rgba(12, 9, 4, 0.5));
  box-shadow: inset 0 1px 0 rgba(255, 220, 150, 0.09), 0 20px 40px rgba(2, 8, 16, 0.38), 0 0 24px rgba(245, 166, 35, 0.16);
}

.fc-executive-problem-section .fc-problem-ecosystem .problem-card--capstone .problem-card__icon {
  background: rgba(245, 166, 35, 0.14);
  border-color: rgba(245, 166, 35, 0.35);
  color: #f0a63d;
}

.fc-executive-problem-section .fc-problem-ecosystem .problem-card--capstone:hover .problem-card__icon,
.fc-executive-problem-section .fc-problem-ecosystem .problem-card--capstone:focus-within .problem-card__icon,
.fc-executive-problem-section .fc-problem-ecosystem .problem-card--capstone:active .problem-card__icon {
  box-shadow: 0 0 14px rgba(245, 166, 35, 0.3);
}

/* ---- Capstone micro-visual: three isolated "silo" boxes, dashed
   attempted-connection gaps between them ---- */
.micro-silos {
  display: block;
  width: 120px;
  height: 34px;
  flex: none;
  align-self: center;
}

.micro-silos__svg { width: 100%; height: 100%; overflow: visible; }

.micro-silos__box {
  fill: rgba(255, 255, 255, 0.05);
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 1.2;
  opacity: 0;
  transition: opacity 500ms ease, fill 340ms ease, stroke 340ms ease;
}

.micro-silos__gap {
  fill: none;
  stroke: rgba(245, 166, 35, 0.4);
  stroke-width: 1.2;
  stroke-dasharray: 2 3;
  opacity: 0;
  transition: opacity 500ms ease;
}

.fc-problem-card.is-visible .micro-silos__box,
.fc-problem-card.is-visible .micro-silos__gap {
  opacity: 1;
}

.problem-card--capstone:hover .micro-silos__box,
.problem-card--capstone:focus-within .micro-silos__box,
.problem-card--capstone:active .micro-silos__box {
  fill: rgba(245, 166, 35, 0.1);
  stroke: rgba(245, 166, 35, 0.45);
}

.problem-card--capstone:hover .micro-silos__gap,
.problem-card--capstone:focus-within .micro-silos__gap,
.problem-card--capstone:active .micro-silos__gap {
  opacity: 0.85;
}

@media (max-width: 900px) {
  .fc-problem-grid-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The seam's four converging lines are tuned for exactly four columns
     in one row; below that they'd point at the wrong cards, so it hides
     rather than mislead. */
  .fc-problem-seam { display: none; }
}

@media (max-width: 640px) {
  .fc-problem-grid-top { grid-template-columns: 1fr; }
  .problem-card--capstone { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .fc-problem-connectors__path { transition: none; stroke-dashoffset: 0; }
  .fc-problem-connectors__stub { transition: none; opacity: 1; }
  .fc-problem-connectors__node { animation: none; opacity: 0.85; }
  .fc-executive-problem-section .fc-problem-ecosystem .problem-card,
  .fc-executive-problem-section .fc-problem-ecosystem .problem-card__icon,
  .micro-silos__box,
  .micro-silos__gap {
    transition: none;
  }
}

/* ---------- Solution ---------- */
.solution__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 3.5rem;
  align-items: center;
}

.check-list { margin-top: 1.6rem; display: flex; flex-direction: column; gap: 1rem; }

.check-list li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--text-muted);
  font-size: 0.98rem;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.35rem;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}

.check-list li::after {
  content: "";
  position: absolute;
  left: 5px; top: 0.62rem;
  width: 8px; height: 4px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

.check-list strong { color: var(--text); }

/* ---------- Disease Forecasting: Management Solution - premium feature block ---------- */
.fc-solution-panel {
  position: relative;
  background: linear-gradient(165deg, rgba(18, 30, 48, 0.42), rgba(6, 12, 22, 0.34));
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-lg);
  padding: 2.75rem;
  backdrop-filter: blur(12px) saturate(1.08);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.fc-solution-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(340px circle at 88% -8%, rgba(47, 217, 196, 0.07), transparent 70%);
}

.fc-solution-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 2.5rem;
  align-items: center;
}

.fc-solution-content .section__head { margin-bottom: 1.75rem; }

.fc-check-list {
  position: relative;
}

.fc-check-list::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--accent-line) 12%, var(--accent-line) 88%, transparent);
  opacity: 0.55;
}

.fc-check-list li {
  z-index: 1;
  border-radius: 10px;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  padding-right: 0.75rem;
  margin-right: -0.75rem;
  transition: background 260ms ease, opacity 700ms ease, transform 500ms cubic-bezier(0.22, 0.9, 0.35, 1);
}

.fc-check-list li::before { top: 0.55rem; transition: box-shadow 260ms ease; }
.fc-check-list li::after { top: 0.82rem; }

.fc-check-list li:hover,
.fc-check-list li:focus-within {
  background: rgba(255, 255, 255, 0.035);
}

.fc-check-list li:hover::before,
.fc-check-list li:focus-within::before {
  box-shadow: 0 0 10px rgba(47, 217, 196, 0.4);
}

.fc-check-list li.reveal {
  opacity: 0;
  transform: translateY(10px);
}

.fc-check-list li.reveal.is-visible { opacity: 1; transform: translateY(0); }

.fc-check-list li:nth-child(2) { transition-delay: 60ms; }
.fc-check-list li:nth-child(3) { transition-delay: 120ms; }
.fc-check-list li:nth-child(4) { transition-delay: 180ms; }
.fc-check-list li:nth-child(5) { transition-delay: 240ms; }
.fc-check-list li:nth-child(6) { transition-delay: 300ms; }
.fc-check-list li:nth-child(7) { transition-delay: 360ms; }

.fc-solution-preview {
  position: relative;
  background: linear-gradient(165deg, rgba(10, 18, 30, 0.55), rgba(5, 10, 18, 0.5));
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 1.5rem 1.5rem 1.35rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color 320ms ease, box-shadow 320ms ease;
}

.fc-solution-preview:hover {
  border-color: rgba(47, 217, 196, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 26px rgba(47, 217, 196, 0.1);
}

.fc-solution-preview__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
}

.fc-solution-preview__head::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(47, 217, 196, 0.7);
}

.fc-solution-preview__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.fc-solution-preview__chart {
  position: relative;
  height: 96px;
  margin-bottom: 1.25rem;
}

.fc-solution-preview__chart-svg { width: 100%; height: 100%; overflow: visible; }

.fc-solution-preview__gridline { stroke: rgba(255, 255, 255, 0.05); stroke-width: 1; }

.fc-solution-preview__area { fill: rgba(47, 217, 196, 0.07); stroke: none; }

.fc-solution-preview__line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.22, 0.9, 0.35, 1);
}

.fc-solution-panel.is-visible .fc-solution-preview__line { stroke-dashoffset: 0; }

.fc-solution-preview__peak {
  fill: #eafffb;
  filter: drop-shadow(0 0 6px rgba(47, 217, 196, 0.65));
  opacity: 0;
  transition: opacity 0.5s ease 0.9s;
}

.fc-solution-panel.is-visible .fc-solution-preview__peak { opacity: 1; }

.fc-solution-preview__peak-tag {
  position: absolute;
  left: 68%;
  top: 14%;
  transform: translate(-50%, -135%);
  white-space: nowrap;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent);
  background: rgba(47, 217, 196, 0.1);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  padding: 0.22rem 0.55rem;
  opacity: 0;
  transition: opacity 0.5s ease 1.1s;
}

.fc-solution-panel.is-visible .fc-solution-preview__peak-tag { opacity: 1; }

.fc-solution-preview__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
}

.fc-solution-preview__chip {
  font-size: 0.74rem;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  padding: 0.32rem 0.7rem;
  transition: filter 260ms ease;
}

.fc-solution-preview__chip strong { color: var(--text); font-weight: 600; }

.fc-solution-preview__chip--warn {
  background: rgba(245, 166, 35, 0.1);
  border-color: rgba(245, 166, 35, 0.3);
}

.fc-solution-preview__chip--warn strong { color: #ffcf7d; }

.fc-solution-preview__chip--alert {
  background: rgba(245, 166, 35, 0.16);
  border-color: rgba(245, 166, 35, 0.42);
}

.fc-solution-preview__chip--alert strong { color: #ffcf7d; }

.fc-solution-preview:hover .fc-solution-preview__chip { filter: brightness(1.1); }

.fc-solution-preview__foot {
  font-size: 0.78rem;
  color: var(--text-faint);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 0.85rem;
  margin: 0;
}

@media (max-width: 900px) {
  .fc-solution-panel { padding: 2rem 1.5rem; }
  .fc-solution-grid { grid-template-columns: 1fr; }
  .fc-solution-preview { margin-top: 0.5rem; }
}

@media (max-width: 640px) {
  .fc-check-list::before { display: none; }
  .fc-check-list li { margin: 0; padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fc-check-list li { transition-delay: 0ms; }
  .fc-solution-preview__line { stroke-dashoffset: 0; transition: none; }
  .fc-solution-preview__peak,
  .fc-solution-preview__peak-tag { opacity: 1; transition: none; }
}

/* ---------- Disease Forecasting: Operational Benefits - premium feature block ---------- */
.fc-benefits-panel {
  position: relative;
  background: linear-gradient(165deg, rgba(18, 30, 48, 0.42), rgba(6, 12, 22, 0.34));
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-lg);
  padding: 2.75rem;
  backdrop-filter: blur(12px) saturate(1.08);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.fc-benefits-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(340px circle at 88% -8%, rgba(47, 217, 196, 0.07), transparent 70%);
}

.fc-benefits-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 2.5rem;
  align-items: center;
}

.fc-benefits-content .section__head { margin-bottom: 1.75rem; }

.fc-benefits-preview {
  position: relative;
  background: linear-gradient(165deg, rgba(10, 18, 30, 0.55), rgba(5, 10, 18, 0.5));
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 1.5rem 1.5rem 1.35rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color 320ms ease, box-shadow 320ms ease;
}

.fc-benefits-preview:hover {
  border-color: rgba(47, 217, 196, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 26px rgba(47, 217, 196, 0.1);
}

.fc-benefits-preview__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.15rem;
}

.fc-benefits-preview__head::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(47, 217, 196, 0.7);
}

.fc-benefits-preview__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.fc-benefits-preview__flow {
  position: relative;
  margin: 0 0 1.15rem;
  padding: 0;
  list-style: none;
}

.fc-benefits-preview__flow::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 13px;
  bottom: 13px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--accent-line) 12%, var(--accent-line) 88%, transparent);
  opacity: 0.55;
}

.fc-benefits-preview__tile {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0.5rem;
  border-radius: 8px;
  transition: background 260ms ease, transform 260ms ease;
}

.fc-benefits-preview__tile + .fc-benefits-preview__tile { margin-top: 0.15rem; }

.fc-benefits-preview__tile:hover {
  background: rgba(255, 255, 255, 0.035);
}

.fc-benefits-preview__tile-index {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: box-shadow 260ms ease;
}

.fc-benefits-preview__tile:hover .fc-benefits-preview__tile-index {
  box-shadow: 0 0 10px rgba(47, 217, 196, 0.4);
}

.fc-benefits-preview__tile--final .fc-benefits-preview__tile-index {
  background: var(--accent);
  border-color: var(--accent);
  color: #06231f;
}

.fc-benefits-preview__tile-label {
  font-size: 0.86rem;
  color: var(--text-muted);
}

.fc-benefits-preview__tile--final .fc-benefits-preview__tile-label { color: var(--text); font-weight: 600; }

.fc-benefits-preview__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
}

.fc-benefits-preview__chip {
  font-size: 0.74rem;
  color: var(--text-muted);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  padding: 0.32rem 0.7rem;
  transition: filter 260ms ease;
}

.fc-benefits-preview__chip strong { color: var(--accent); font-weight: 600; }

.fc-benefits-preview:hover .fc-benefits-preview__chip { filter: brightness(1.1); }

.fc-benefits-preview__foot {
  font-size: 0.78rem;
  color: var(--text-faint);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 0.85rem;
  margin: 0;
}

@media (max-width: 900px) {
  .fc-benefits-panel { padding: 2rem 1.5rem; }
  .fc-benefits-grid { grid-template-columns: 1fr; }
  .fc-benefits-preview { margin-top: 0.5rem; }
}

.glass-panel {
  background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-soft);
}

.glass-panel__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.glass-panel__tag {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--line);
  color: var(--text-muted);
}

.glass-panel__tag--accent {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}

.glass-panel__diagram {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.node {
  background: rgba(4, 10, 20, 0.55);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.1rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  text-align: center;
}

.node--engine {
  border-color: var(--accent-line);
  color: var(--accent);
  box-shadow: 0 0 0 1px rgba(47,217,196,0.15), 0 0 30px rgba(47,217,196,0.12);
}

.node-line {
  width: 2px;
  height: 26px;
  margin: 0 auto;
  background: linear-gradient(var(--accent-line), transparent);
}

.glass-panel__caption {
  margin-top: 1.4rem;
  font-size: 0.82rem;
  color: var(--text-faint);
  text-align: center;
}

/* ---------- Timeline (how it works) ---------- */
.timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  counter-reset: step;
}

.timeline__step {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.4rem 1.5rem;
}

.timeline__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #04141a;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.timeline__step h3 {
  font-size: 0.98rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.timeline__step p {
  font-size: 0.86rem;
  color: var(--text-muted);
}

.lang-note {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line-soft);
}

.lang-note__label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.9rem;
}

.lang-chip-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.lang-chip {
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--line);
  color: var(--text);
}

.lang-chip--muted { color: var(--text-faint); font-weight: 500; }

/* ---------- AI & explainability ---------- */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.5rem;
  max-width: 640px;
  margin-bottom: 1rem;
}

.stat-tile {
  text-align: center;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1rem;
}

.stat-tile__value {
  display: block;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--accent);
}

.stat-tile__label {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.benchmark-note {
  font-size: 0.85rem;
  color: var(--text-faint);
  max-width: 62ch;
  margin-bottom: 2.5rem;
  font-style: italic;
}

.explain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.75rem;
  margin-bottom: 2.5rem;
}

.chart-card {
  background: #f5f8fb;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.chart-card img {
  width: 100%;
  background: #ffffff;
  padding: 0.75rem;
}

.chart-card__body {
  padding: 1.3rem 1.4rem 1.5rem;
  background: var(--bg-800);
}

.chart-card__body h3 {
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.45rem;
}

.chart-card__body p {
  color: var(--text-muted);
  font-size: 0.86rem;
}

.ai-points {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  max-width: 62ch;
}

.ai-points li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.ai-points li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5rem;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.ai-points strong { color: var(--text); }

/* ---------- Accessibility utility ---------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Contextual metric cards (Doctor Assistant validation intro) ---------- */
.metric-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1rem;
}

.metric-card {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.3rem;
}

.metric-card__value { display: block; font-size: 1.7rem; font-weight: 700; color: var(--accent); }
.metric-card__label {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text);
}
.metric-card__note { margin-top: 0.5rem; font-size: 0.82rem; color: var(--text-muted); }

.metric-card--warn { border-color: rgba(245, 166, 35, 0.35); }
.metric-card--warn .metric-card__value { color: var(--risk-medium); }

/* ---------- Interactive Validation Lab ----------
   Self-contained illustrative demo: three preset validation "modes" (see
   assets/js/validation-lab.js) drive a 2x2 confusion matrix, four derived
   metrics and a short clinical-meaning note. Pure CSS/SVG - no charting
   library, no canvas, no backend. */
.validation-lab {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2rem;
  margin: 2rem 0 2.5rem;
}

.validation-lab__head h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.validation-lab__head p {
  color: var(--text-muted);
  font-size: 0.92rem;
  max-width: 62ch;
  margin-bottom: 1rem;
}

.validation-lab__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 1.75rem;
}

/* Tiny glowing status chips - same status-chip component as the rest of
   the site, with a slow, subtle glow pulse layered on top. */
.validation-lab__chips .status-chip {
  animation: validationChipGlow 3.6s ease-in-out infinite;
}
.validation-lab__chips .status-chip:nth-child(2) { animation-delay: 0.6s; }
.validation-lab__chips .status-chip:nth-child(3) { animation-delay: 1.2s; }

@keyframes validationChipGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(47, 217, 196, 0); }
  50% { box-shadow: 0 0 10px rgba(47, 217, 196, 0.35); }
}

.validation-lab__modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.9rem;
  margin-bottom: 2rem;
}

.validation-mode-btn {
  text-align: left;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}

.validation-mode-btn strong { display: block; color: var(--text); font-size: 0.94rem; margin-bottom: 0.35rem; }
.validation-mode-btn span { display: block; color: var(--text-muted); font-size: 0.8rem; line-height: 1.4; }

.validation-mode-btn:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.validation-mode-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.validation-mode-btn.is-active {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  box-shadow: 0 0 0 1px var(--accent-line);
}
.validation-mode-btn.is-active strong { color: var(--accent); }

.validation-lab__body {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

/* Decorative "model threshold" connector - a thin flowing dashed line
   above the matrix. Subtle and purely decorative (aria-hidden); the CSS
   animation is neutralized by the site-wide prefers-reduced-motion rule. */
.validation-threshold {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.validation-threshold__svg { width: 100%; max-width: 160px; height: 12px; flex: 1; }

.validation-threshold__path {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 6 7;
  opacity: 0.6;
  animation: validationThresholdFlow 2.4s linear infinite;
}

@keyframes validationThresholdFlow { to { stroke-dashoffset: -26; } }

.validation-matrix {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0.6rem;
  margin: -0.6rem;
}

.validation-matrix thead th {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-bottom: 0.4rem;
  text-align: center;
}

.validation-matrix__corner { background: none; }

.validation-matrix tbody th {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: right;
  padding-right: 0.6rem;
  white-space: nowrap;
}

.validation-cell {
  position: relative;
  text-align: center;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  padding: 1rem 0.75rem;
  cursor: default;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}

.validation-cell strong { display: block; font-size: 1.6rem; font-weight: 700; }
.validation-cell span { display: block; margin-top: 0.25rem; font-size: 0.72rem; color: var(--text-muted); }

.validation-cell:hover,
.validation-cell:focus-visible {
  transform: translateY(-2px);
  outline: none;
}

.validation-cell--tp { background: var(--shap-negative-soft); border-color: var(--accent-line); }
.validation-cell--tp strong { color: var(--accent); }

.validation-cell--tn { background: rgba(255, 255, 255, 0.035); }
.validation-cell--tn strong { color: var(--text); }

.validation-cell--fp { background: rgba(255, 255, 255, 0.025); }
.validation-cell--fp strong { color: var(--text-muted); }

/* False negative - emphasized as clinically significant without being
   alarmist: amber (the same tier color used for "moderate" elsewhere on
   the site), not red. */
.validation-cell--fn {
  background: rgba(245, 166, 35, 0.1);
  border-color: rgba(245, 166, 35, 0.4);
}
.validation-cell--fn strong { color: var(--risk-medium); }

.validation-cell__tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 200px;
  background: rgba(4, 10, 20, 0.96);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem;
  font-size: 0.74rem;
  color: var(--text);
  text-align: left;
  line-height: 1.4;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
  z-index: 2;
}

.validation-cell:hover .validation-cell__tooltip,
.validation-cell:focus .validation-cell__tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.validation-fn-note {
  margin-top: 1.25rem;
  padding: 0.9rem 1.1rem;
  background: rgba(245, 166, 35, 0.08);
  border-left: 3px solid var(--risk-medium);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.55;
}
.validation-fn-note strong { color: #ffcf7d; }

.validation-lab__side {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.validation-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.validation-metric {
  background: rgba(4, 10, 20, 0.4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
}

.validation-metric span {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.25rem;
}

.validation-metric strong { font-size: 1.15rem; color: var(--accent); }

.validation-meaning {
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
}

.validation-meaning__kicker {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.4rem;
}

.validation-meaning p:last-child { color: var(--text); font-size: 0.88rem; line-height: 1.5; margin: 0; }

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

@media (max-width: 560px) {
  .validation-lab { padding: 1.4rem; }
  .validation-matrix strong { font-size: 1.3rem; }
  .validation-metrics { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .validation-threshold__path,
  .validation-lab__chips .status-chip {
    animation: none;
  }
}

/* ---------- Patient risk preview (Doctor Assistant "Example module") ---------- */
.patient-preview {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
}

.patient-preview__card {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
}

.patient-preview__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

/* .preview-card__badge is normally an absolute-positioned overlay (it sits
   on top of the carousel's SVG/KPI preview area on the Example Modules
   page); here it's a sibling in a flex row instead, so it needs to
   actually participate in that layout rather than float over whatever's
   next to it. */
.patient-preview__head .preview-card__badge { position: static; }

.patient-preview__score { display: flex; align-items: center; gap: 0.6rem; }
.patient-preview__score span:first-child { font-size: 0.78rem; color: var(--text-faint); }

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

.patient-preview__drivers h3,
.patient-preview__action h3 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.7rem;
}

.patient-preview__drivers ul { display: flex; flex-direction: column; gap: 0.55rem; }

.patient-preview__drivers li {
  position: relative;
  padding-left: 1.3rem;
  font-size: 0.92rem;
  color: var(--text);
}

.patient-preview__drivers li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5rem;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.patient-preview__action p { color: var(--text-muted); font-size: 0.92rem; line-height: 1.55; }

.patient-preview__why {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  height: 100%;
}

.patient-preview__why h3 { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 0.7rem; }
.patient-preview__why p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; }

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

/* =========================================================
   Doctor Assistant - "Challenges" + "Step by step" redesign

   Two new, deliberately separate component families rather than a
   restructure of the existing .problem-grid/.problem-card (still used
   as-is by Home's and Disease Forecasting's own problem sections - a
   shared-component rework here would have changed those pages too) and
   .timeline (safe to fully replace: this Doctor Assistant section is its
   only user in the whole site).

   Shared "wow" mechanics used by both:
   - Staggered entrance: plain CSS `transition-delay` per nth-child,
     layered on top of the site's existing generic .reveal/.is-visible
     IntersectionObserver fade - no new JS for this part.
   - Spotlight hover: a cursor-tracked radial-gradient glow. The only new
     JS in this whole redesign (assets/js/interactive-cards.js) - one
     delegated pointermove listener per grid that writes --spot-x/--spot-y,
     consumed by the ::before below. Gated on (hover: hover) and
     prefers-reduced-motion in JS, so touch devices and reduced-motion
     users never pay for a listener that would do nothing useful for them.
   - Hover/focus-reveal helper lines ("Why it matters" / "This step
     ensures…"): plain CSS max-height + opacity transitions on
     :hover/:focus-within - reachable by keyboard, no JS needed.
   ========================================================= */

[data-spotlight-card] {
  position: relative;
  overflow: hidden;
}

[data-spotlight-card]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(240px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(47, 217, 196, 0.12), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

[data-spotlight-card]:hover::before,
[data-spotlight-card]:focus-within::before {
  opacity: 1;
}

[data-spotlight-card] > * {
  position: relative;
  z-index: 1;
}

/* ---------- Challenge cards ---------- */
.challenge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.challenge-card {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem 1.6rem;
  transition: transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.challenge-card:hover,
.challenge-card:focus-within {
  transform: translateY(-4px);
  border-color: var(--accent-line);
  background: var(--glass-strong);
  box-shadow: var(--shadow-soft);
}

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

/* Featured card: same component, slightly more visual weight - spans two
   grid tracks where there's room, a touch more padding, a brighter icon. */
.challenge-card--featured {
  grid-column: span 2;
  background: linear-gradient(160deg, var(--glass-strong), var(--glass));
  border-color: var(--accent-line);
}

.challenge-card__tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.challenge-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: 1.1rem;
  box-shadow: 0 0 0 1px var(--accent-line);
  transition: box-shadow var(--transition), transform var(--transition);
}

.challenge-card:hover .challenge-card__icon,
.challenge-card:focus-within .challenge-card__icon {
  box-shadow: 0 0 0 1px var(--accent-line), 0 0 18px rgba(47, 217, 196, 0.4);
  transform: scale(1.06);
}

.challenge-card--featured .challenge-card__icon { width: 52px; height: 52px; }

.challenge-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--text); margin-bottom: 0.55rem; }
.challenge-card__desc { color: var(--text-muted); font-size: 0.9rem; line-height: 1.55; }

.challenge-card__footer {
  margin-top: 1.25rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line-soft);
}

.challenge-card__footer span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Collapsed by default; expands open on hover/focus via max-height so the
   transition can be smooth (display:none/block can't animate). */
.challenge-card__why {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  color: var(--accent);
  font-size: 0.82rem;
  line-height: 1.5;
  transition: max-height 0.35s ease, opacity 0.3s ease, margin-top 0.35s ease;
}

.challenge-card:hover .challenge-card__why,
.challenge-card:focus-within .challenge-card__why {
  max-height: 4.5rem;
  opacity: 1;
  margin-top: 0.7rem;
}

/* Staggered entrance - small incremental delay per card position. */
.challenge-grid .challenge-card:nth-child(1) { transition-delay: 0ms; }
.challenge-grid .challenge-card:nth-child(2) { transition-delay: 70ms; }
.challenge-grid .challenge-card:nth-child(3) { transition-delay: 140ms; }
.challenge-grid .challenge-card:nth-child(4) { transition-delay: 210ms; }
.challenge-grid .challenge-card:nth-child(5) { transition-delay: 280ms; }

@media (max-width: 640px) {
  .challenge-card--featured { grid-column: span 1; }
}

/* ---------- Process flow ("Step by step") ---------- */
.process-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem 1.25rem;
  counter-reset: step;
}

.process-step {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.4rem 1.5rem;
  transition: transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.process-step:hover,
.process-step:focus-within {
  transform: translateY(-4px);
  border-color: var(--accent-line);
  background: var(--glass-strong);
  box-shadow: var(--shadow-soft);
}

.process-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.process-step__node {
  display: inline-flex;
  margin-bottom: 0.85rem;
}

.process-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #04141a;
  font-weight: 700;
  font-size: 0.95rem;
  transition: box-shadow var(--transition), transform var(--transition);
}

.process-step:hover .process-step__num,
.process-step:focus-within .process-step__num {
  box-shadow: 0 0 0 4px rgba(47, 217, 196, 0.18), 0 0 16px rgba(47, 217, 196, 0.5);
  transform: scale(1.08);
}

.process-step__badge {
  display: inline-block;
  margin: 0 0 0.6rem 0.75rem;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--line);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  vertical-align: middle;
}

.process-step h3 { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 0.5rem; }
.process-step > p:not(.process-step__output):not(.process-step__ensures) { color: var(--text-muted); font-size: 0.88rem; line-height: 1.5; }

.process-step__output {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.8rem;
  color: var(--text);
}

.process-step__output span { color: var(--text-faint); font-weight: 700; margin-right: 0.3rem; }

.process-step__ensures {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  color: var(--accent);
  font-size: 0.8rem;
  line-height: 1.5;
  transition: max-height 0.35s ease, opacity 0.3s ease, margin-top 0.35s ease;
}

.process-step:hover .process-step__ensures,
.process-step:focus-within .process-step__ensures {
  max-height: 4.5rem;
  opacity: 1;
  margin-top: 0.6rem;
}

/* Connector lines - a thin horizontal line from the right edge of a card
   to the start of the next one WITHIN THE SAME ROW only (deliberately not
   attempting a literal line across the row wrap; the numbered nodes
   already carry the sequence across rows without needing fragile
   geometry tied to a specific column count). Brightens on hover of the
   card it originates from. Desktop = 3 columns, so the line is hidden on
   every 3rd card (end of row); tablet = 2 columns, hidden on every 2nd. */
.process-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1.9rem;
  left: 100%;
  width: 1.25rem;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-line), transparent);
  opacity: 0.45;
  transition: opacity var(--transition);
  z-index: 2;
}

.process-step:hover::after,
.process-step:focus-within::after {
  opacity: 1;
}

.process-flow .process-step:nth-child(3n)::after { display: none; }

/* Staggered entrance. */
.process-flow .process-step:nth-child(1) { transition-delay: 0ms; }
.process-flow .process-step:nth-child(2) { transition-delay: 60ms; }
.process-flow .process-step:nth-child(3) { transition-delay: 120ms; }
.process-flow .process-step:nth-child(4) { transition-delay: 180ms; }
.process-flow .process-step:nth-child(5) { transition-delay: 240ms; }
.process-flow .process-step:nth-child(6) { transition-delay: 300ms; }

@media (max-width: 980px) {
  .process-flow { grid-template-columns: repeat(2, 1fr); }
  .process-flow .process-step:nth-child(3n)::after { display: block; }
  .process-flow .process-step:nth-child(2n)::after { display: none; }
}

@media (max-width: 640px) {
  .process-flow { grid-template-columns: 1fr; gap: 1.1rem; }

  /* Stacked timeline: connectors become a short vertical drop below each
     card instead of a horizontal line to a card that's no longer beside
     it. */
  .process-step:not(:last-child)::after {
    top: 100%;
    left: 2.65rem;
    width: 2px;
    height: 1.1rem;
    background: linear-gradient(180deg, var(--accent-line), transparent);
  }

  .process-flow .process-step:nth-child(2n)::after,
  .process-flow .process-step:nth-child(3n)::after {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-spotlight-card]::before { transition: none; }
}

/* ---------- Modules ---------- */
.modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.75rem;
}

.module-card {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--transition), border-color var(--transition);
  display: flex;
  flex-direction: column;
}

.module-card:hover { transform: translateY(-4px); border-color: var(--accent-line); }

.module-card--chart img {
  width: 100%;
  background: #ffffff;
  padding: 0.6rem;
}

.module-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  margin: 1.6rem 0 0 1.6rem;
}

.module-card__body { padding: 1.4rem 1.6rem 1.7rem; }

.module-card__body h3 {
  font-size: 1.02rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.module-card__body p {
  color: var(--text-muted);
  font-size: 0.88rem;
}

/* ---------- Example Modules showcase carousel ----------
   Native CSS scroll-snap track (no drag/swipe library needed - the browser
   supplies momentum touch/trackpad scrolling for free) + a small JS layer
   (assets/js/modules-carousel.js) that: reads each slide's distance from
   the track's center and writes it to --dist (consumed below for the
   continuous scale/opacity/blur "centered" effect), toggles .is-active on
   the nearest-center slide (which the three preview components' own CSS
   transitions key off), and drives the prev/next buttons, dots, keyboard
   arrows and a pausable auto-advance. Everything here is transform/
   opacity/filter - compositor-friendly, no layout thrashing. */
.modules-carousel { margin-bottom: 1rem; }

.modules-carousel__viewport {
  overflow: visible;
}

.modules-carousel__track {
  /* Fixed breakout bleed (how far the track extends past .container's
     edges) - deliberately NOT the same variable as --carousel-pad-x below.
     Tying both to one variable would make the track's own width depend on
     the padding computed FROM that width, an unstable feedback loop where
     each recompute invalidates the last. Bleed stays constant so
     track.clientWidth is stable, and padding can be solved from it once. */
  --carousel-bleed: 6vw;
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* --carousel-pad-x is computed by modules-carousel.js from the track's
     actual measured width, not guessed as a fixed value: side padding must
     be at least (viewport width - slide width) / 2, or the browser's
     scroll range physically can't reach far enough to ever center the
     first/last slide - it silently clamps to its max scroll instead. The
     fallback here only matters for a first paint before JS runs. */
  padding: 1rem var(--carousel-pad-x, var(--carousel-bleed)) 2rem;
  margin: 0 calc(-1 * var(--carousel-bleed));
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.modules-carousel__track::-webkit-scrollbar { display: none; }

.modules-carousel__track:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.carousel-slide {
  flex: 0 0 min(560px, 84vw);
  scroll-snap-align: center;
  transform: scale(calc(1 - min(var(--dist, 0), 1) * 0.1));
  opacity: calc(1 - min(var(--dist, 0), 1) * 0.6);
  filter: blur(calc(min(var(--dist, 0), 1) * 2px));
  transition: transform 0.35s ease, opacity 0.35s ease, filter 0.35s ease;
}

/* Home page preview: narrower slides so 3 sit side by side (center
   emphasised, the two neighbours still fully visible) inside the
   standard 1180px container, instead of the full "Example Modules" page
   carousel's wider, one-or-two-at-a-time cards. Same --dist-driven
   scale/opacity/blur falloff above still applies unchanged. */
.modules-carousel--compact .carousel-slide {
  flex-basis: min(340px, 78vw);
}

/* Preview card shell - shared by all three slide types */
.preview-card {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: border-color var(--transition), background var(--transition);
}

.carousel-slide.is-active .preview-card {
  border-color: var(--accent-line);
  background: var(--glass-strong);
}

/* Floating "system tag" style: dark glass + near-invisible border + a
   faint inset highlight, rather than the previous solid accent-coloured
   outline - reads as a quiet overlay chip, not a competing shape. */
.preview-card__badge {
  position: absolute;
  top: 1.1rem;
  left: 1.1rem;
  z-index: 1;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.36rem 0.8rem;
  border-radius: 999px;
  background: rgba(6, 14, 26, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 14px rgba(2, 8, 16, 0.35);
  color: var(--accent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Pre-existing gap, fixed here rather than worked around: .preview-card__body
   had no padding at all, so its h3/p/link sat flush against the card's
   edges (only unnoticeable before because the forecast/risk/KPI preview
   above it already had its own inset). Benefits every .preview-card use,
   not just the new Home carousel slides below. */
.preview-card__body { padding: 0.25rem 1.75rem 1.75rem; }

.preview-card .module-card__link { margin-top: 0.9rem; display: inline-flex; }

/* Nav controls */
.modules-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 0.5rem;
}

.carousel-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--glass);
  border: 1px solid var(--line);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), transform var(--transition);
}

.carousel-arrow svg { width: 18px; height: 18px; }

.carousel-arrow:hover { border-color: var(--accent-line); color: var(--accent); transform: translateY(-1px); }
.carousel-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.modules-carousel__dots { display: flex; align-items: center; gap: 0.55rem; }

.carousel-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--line);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background var(--transition), transform var(--transition);
}

.carousel-dot:hover { background: var(--accent-line); }
.carousel-dot.is-active { background: var(--accent); transform: scale(1.3); }
.carousel-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- Preview 1: Disease Incidence Forecasting - mini line chart ---------- */
/* Top padding cleared to sit below .preview-card__badge (absolute, top:1.1rem,
   ~1.5rem tall) with room to breathe, not right under it; height bumped by
   the same amount added to the top padding so the chart's own plotted area
   doesn't shrink. */
.preview-chart {
  padding: 3.25rem 1.75rem 0.5rem;
  height: 192px;
}

.preview-chart__svg { width: 100%; height: 100%; overflow: visible; }

.preview-chart__grid { stroke: var(--line-soft); stroke-width: 1; }

.preview-chart__path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(47, 217, 196, 0.5));
  stroke-dasharray: var(--path-length, none);
  stroke-dashoffset: var(--path-length, 0);
  transition: stroke-dashoffset 1.3s cubic-bezier(0.22, 0.9, 0.35, 1);
}

.carousel-slide.is-active .preview-chart__path { stroke-dashoffset: 0; }

.preview-chart__path--compact { stroke-width: 2; }

.preview-chart__peak {
  fill: #ffffff;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.85));
  transform-box: fill-box;
  transform-origin: center;
  animation: previewPeakPulse 2.4s ease-in-out infinite;
}

@keyframes previewPeakPulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.25); }
}

.preview-chart__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0 1.75rem 1rem;
}

/* ---------- Preview 2: Heart Disease Risk Assistant - ring + mini SHAP bars ---------- */
/* Top padding cleared to sit below .preview-card__badge - same reasoning
   as .preview-chart above. */
.preview-risk { padding: 3.25rem 1.75rem 0.25rem; }

.preview-risk__top {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.4rem;
}

.preview-risk__ring { position: relative; width: 100px; height: 100px; flex: none; }
.preview-risk__ring svg { width: 100%; height: 100%; }

.preview-risk__ring-track {
  fill: none;
  stroke: var(--line);
  stroke-width: 8;
}

.preview-risk__ring-fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 314.16;
  stroke-dashoffset: 314.16;
  transform: rotate(-90deg);
  transform-origin: 60px 60px;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.22, 0.9, 0.35, 1);
}

.carousel-slide.is-active .preview-risk__ring-fill {
  stroke-dashoffset: var(--ring-offset, 0px);
}

.preview-risk__ring-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--text);
}

.preview-risk__ring-value strong { font-size: 1.5rem; }
.preview-risk__ring-value span { font-size: 0.85rem; color: var(--text-muted); margin-left: 1px; }

.preview-risk__status { display: flex; flex-direction: column; gap: 0.5rem; }
.preview-risk__caption { font-size: 0.76rem; color: var(--text-faint); }

.mini-shap-bars { display: flex; flex-direction: column; gap: 0.55rem; }

.mini-shap-bar {
  display: grid;
  grid-template-columns: 108px 1fr;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
}

.mini-shap-bar__label { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mini-shap-bar__track {
  position: relative;
  display: block;
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  overflow: hidden;
}

.mini-shap-bar__fill {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 0%;
  border-radius: 4px;
  transition: width 1s cubic-bezier(0.22, 0.9, 0.35, 1), filter 300ms ease;
}

.carousel-slide.is-active .mini-shap-bar__fill { width: var(--fill); }

.mini-shap-bar__fill--positive { background: var(--shap-positive); }
.mini-shap-bar__fill--negative { background: var(--shap-negative); }

.preview-risk__signals {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.1rem;
}

/* ---------- Home: "Doctor Assistant" teaser - 2-column value section ----------
   Reuses existing components rather than inventing new ones: .risk-pill,
   .status-chip, .preview-card__badge, .mini-shap-bars/.mini-shap-bar (both
   defined just above) and .metric-float (Hero, ~line 483) all get a second
   home here. The only genuinely new pieces are the 2-column grid, the
   trust-chip row and the .da-preview-card shell around the reused bars.
   The SHAP bars normally only fill inside ".carousel-slide.is-active"; this
   adds the same fill, gated on this section's own reveal state instead, so
   both contexts keep working independently. */
.da-teaser-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 3rem;
  align-items: center;
}

.da-teaser-content .section__head { margin-bottom: 1.75rem; }
.da-teaser-content .section__foot { margin-top: 0; margin-bottom: 1.75rem; }

.da-teaser-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.trust-chip {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.5rem 0.95rem;
  transition: border-color 260ms ease, color 260ms ease, background 260ms ease;
}

.trust-chip:hover {
  border-color: var(--accent-line);
  color: var(--text);
  background: var(--glass-strong);
}

/* ---- Right column: preview panel + floating PoC metric cards ---- */
.da-teaser-preview {
  /* .da-preview-card is much taller than the Hero's own dashboard-card
     (head + model label + 4 SHAP bars + recommendation + footer), so the
     Hero's exact metric-float offsets - tuned for a short card - would
     land mid-body instead of near an edge. This padding carves out a
     dedicated clear band above/below the card; the floats below are
     positioned to sit entirely inside that band, never over the card's
     own content, regardless of exactly how tall the card ends up being. */
  position: relative;
  padding: 58px 8px 54px;
}

/* Override the shared .metric-float--1/2/3 corner positions (tuned for
   the Hero's shorter dashboard-card) with ones that stay inside the
   clear padding band above/below .da-preview-card instead. */
.da-teaser-preview .metric-float--1 { top: 6px; left: 4%; bottom: auto; right: auto; }
.da-teaser-preview .metric-float--2 { top: 6px; right: 4%; bottom: auto; left: auto; animation-delay: 1.2s; }
.da-teaser-preview .metric-float--3 { bottom: 4px; left: 14%; top: auto; right: auto; animation-delay: 2.4s; }

.da-preview-card {
  position: relative;
  background: var(--glass-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  transition: transform 340ms cubic-bezier(0.22, 0.9, 0.35, 1), border-color 340ms ease, box-shadow 340ms ease;
}

.da-preview-card:hover,
.da-preview-card:focus-within {
  transform: translateY(-4px);
  border-color: var(--accent-line);
  box-shadow: var(--shadow-soft), 0 0 26px rgba(47, 217, 196, 0.14);
}

.da-preview-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}

.da-teaser-preview .preview-card__badge { position: static; }

.da-preview-card__model {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.76rem;
  color: var(--text-faint);
  margin-bottom: 1.4rem;
}

.da-preview-card__model-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(47, 217, 196, 0.7);
  flex: none;
}

.da-preview-card__bars { margin-bottom: 1.5rem; }

.da-preview-card__recommendation {
  border-top: 1px solid var(--line-soft);
  padding-top: 1.1rem;
  margin-bottom: 1.1rem;
}

.da-preview-card__recommendation h3 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.5rem;
}

.da-preview-card__recommendation p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.da-preview-card__foot { display: flex; }

/* This section's own SHAP-bar fill trigger - additive to, not a
   replacement for, ".carousel-slide.is-active" above. */
.da-teaser-preview.is-visible .mini-shap-bar__fill { width: var(--fill); }

.da-preview-card:hover .mini-shap-bar__fill,
.da-preview-card:focus-within .mini-shap-bar__fill {
  filter: brightness(1.15);
}

@media (max-width: 860px) {
  .da-teaser-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .da-teaser-preview { max-width: 420px; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .da-preview-card,
  .trust-chip {
    transition: none;
  }
}

/* ---------- Preview 3: Hospital Command Center - KPI tiles ---------- */
/* Top padding cleared to sit below .preview-card__badge - same reasoning
   as .preview-chart above. */
.preview-kpi { padding: 3.25rem 1.75rem 0.25rem; }

.preview-kpi__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.preview-kpi__trend { width: 140px; height: 46px; flex: none; }

.preview-kpi__tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.preview-kpi__tile {
  position: relative;
  background: rgba(4, 10, 20, 0.55);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.8rem;
  overflow: hidden;
}

.preview-kpi__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(47, 217, 196, 0.12) 50%, transparent 60%);
  background-size: 240% 100%;
  animation: previewShimmer 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes previewShimmer {
  0% { background-position: 120% 0; }
  50% { background-position: -20% 0; }
  100% { background-position: 120% 0; }
}

.preview-kpi__tile span {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.2rem;
}

.preview-kpi__tile strong { font-size: 1.05rem; color: var(--accent); }

/* ---------- Home: Example Modules carousel - supporting info panel ----------
   Text is swapped by modules-carousel.js (data-info-what/why/who on each
   [data-carousel-slide], synced to [data-info-what/why/who] here) whenever
   the active slide changes. Kept deliberately quiet - a fade on the text
   itself, not a layout shift - so it reads as "the same panel updating",
   not three panels swapping in and out. */
.modules-info-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  margin-bottom: 2rem;
}

.modules-info-panel__item + .modules-info-panel__item {
  border-left: 1px solid var(--line-soft);
  padding-left: 1.5rem;
}

.modules-info-panel__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.45rem;
}

.modules-info-panel__item p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.5;
  transition: opacity 220ms ease;
}

@media (max-width: 760px) {
  .modules-info-panel {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }
  .modules-info-panel__item + .modules-info-panel__item {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--line-soft);
    padding-top: 1.1rem;
  }
}

/* ---------- Secondary resources row ---------- */
.modules-secondary { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line-soft); }

.modules-secondary__label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 1.25rem;
}

.modules-secondary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

@media (max-width: 900px) {
  .carousel-slide { flex-basis: min(480px, 88vw); }
}

@media (max-width: 640px) {
  .modules-carousel__track {
    padding-top: 0.5rem;
    padding-bottom: 1.5rem;
    gap: 1rem;
  }
  .carousel-slide { flex-basis: 92vw; }
  .preview-risk__top { flex-direction: column; align-items: flex-start; }
  .preview-kpi__tiles { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .preview-chart__peak,
  .preview-kpi__tile::after {
    animation: none;
  }
}

/* ---------- Differentiation: premium glass comparison cards ----------
   Three tiers of the same visual language: Traditional/Point-AI are quiet
   glass panels (muted text + a light opacity recede, not a heavy dim, so
   contrast stays safe), .be healthy is the same panel with a brighter
   border/glow/background and full-contrast text - hierarchy communicated
   by degree, not by hiding anything. Bullets are small circular badges
   (muted dash for the two limited columns, glowing accent check for
   .be healthy) instead of plain characters. No autoplay animation
   anywhere - only hover/focus-triggered, near-instant under reduced
   motion via the sitewide rule (~line 125). */
.compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.compare-col {
  position: relative;
  background: linear-gradient(165deg, rgba(18, 30, 48, 0.5), rgba(6, 12, 22, 0.45));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 14px 30px rgba(2, 8, 16, 0.3);
  overflow: hidden;
  opacity: 0.92;
  transition: transform 340ms cubic-bezier(0.22, 0.9, 0.35, 1), border-color 340ms ease, box-shadow 340ms ease, background 340ms ease, opacity 340ms ease;
}

/* Soft top-corner light - the "light in the corner" glass cue, kept to a
   small radius so it reads as a highlight, not a spotlight. */
.compare-col::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(160px circle at 88% -12%, rgba(255, 255, 255, 0.07), transparent 70%);
}

.compare-col > * {
  position: relative;
  z-index: 1;
}

.compare-col:hover,
.compare-col:focus-within,
.compare-col:active {
  transform: translateY(-4px);
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.16);
  background: linear-gradient(165deg, rgba(22, 36, 56, 0.58), rgba(8, 16, 28, 0.52));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 20px 40px rgba(2, 8, 16, 0.4), 0 0 22px rgba(47, 217, 196, 0.08);
}

.compare-col:hover li,
.compare-col:focus-within li,
.compare-col:active li {
  color: var(--text);
}

.compare-col__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}

.compare-col__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-faint);
  transition: color 340ms ease, border-color 340ms ease, background 340ms ease;
}

.compare-col__icon svg { width: 21px; height: 21px; }

.compare-col:hover .compare-col__icon,
.compare-col:focus-within .compare-col__icon,
.compare-col:active .compare-col__icon {
  color: var(--text-muted);
  border-color: rgba(255, 255, 255, 0.14);
}

.compare-col h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 1.2rem;
  color: var(--text-muted);
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.compare-col ul { display: flex; flex-direction: column; gap: 0.85rem; }

.compare-col li {
  font-size: 0.9rem;
  color: var(--text-faint);
  padding-left: 1.8rem;
  position: relative;
  line-height: 1.5;
  transition: color 340ms ease;
}

.compare-col li::before {
  content: "-";
  position: absolute;
  left: 0;
  top: 0.05em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-faint);
  font-size: 0.68rem;
  line-height: 1;
}

/* ---- .be healthy: same shell, brighter throughout ---- */
.compare-col--highlight {
  background: linear-gradient(165deg, rgba(47, 217, 196, 0.12), rgba(10, 20, 34, 0.5));
  border-color: var(--accent-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 40px rgba(2, 8, 16, 0.35), 0 0 30px rgba(47, 217, 196, 0.12);
  opacity: 1;
}

.compare-col--highlight::before {
  background: radial-gradient(180px circle at 88% -12%, rgba(47, 217, 196, 0.14), transparent 70%);
}

.compare-col--highlight:hover,
.compare-col--highlight:focus-within,
.compare-col--highlight:active {
  border-color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 24px 48px rgba(2, 8, 16, 0.45), 0 0 38px rgba(47, 217, 196, 0.22);
}

.compare-col--highlight h3 { color: var(--accent); border-bottom-color: rgba(47, 217, 196, 0.18); }

.compare-col--highlight .compare-col__icon {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

.compare-col--highlight li { color: var(--text); }

.compare-col--highlight li::before {
  content: "✓";
  background: rgba(47, 217, 196, 0.18);
  color: var(--accent);
  box-shadow: 0 0 8px rgba(47, 217, 196, 0.3);
}

.compare-col__badge {
  font-size: 0.62rem;
  padding: 0.3rem 0.65rem;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .compare-col,
  .compare-col__icon,
  .compare-col li {
    transition: none;
  }
}

/* ---------- Benefits: premium glass "value pillar" cards ----------
   Same glass-panel language as the Differentiation cards above (~line
   3414) - dark gradient glass, near-invisible border, corner light,
   inset highlight - but all three cards read as equally strong (these
   are three pillars, not a hierarchy to win). Character per card comes
   from icon + top tag + a large, near-invisible watermark of that same
   icon, not from hue: each icon is reused verbatim from elsewhere on the
   page (heart = Layer 2 · Doctor Assistant, layers = the platform/
   differentiation icon, bars = Layer 1 · Hospital Intelligence), so the
   section visually echoes the platform story already told earlier on
   the page instead of introducing new iconography. Bullets are small
   glowing checkmarks (an "outcome achieved" cue) instead of plain dots. */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.75rem;
}

.benefit-col {
  position: relative;
  background: linear-gradient(165deg, rgba(18, 30, 48, 0.5), rgba(6, 12, 22, 0.45));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  padding: 2rem 1.85rem;
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
  /* A quiet resting depth (separate from the stronger hover version below)
     so cards read as sitting slightly above the background image rather
     than pasted flat onto it - filter, not box-shadow: overflow:hidden
     above (needed to crop the watermark to the card's rounded corners)
     would otherwise clip an outer box-shadow on this same element. */
  filter: drop-shadow(0 14px 30px rgba(2, 8, 16, 0.26)) drop-shadow(0 0 10px rgba(47, 217, 196, 0.04));
  /* Explicit opacity here: this rule's specificity beats the sitewide
     .reveal rule (also applied to each card, for the stagger below) and
     would otherwise wholesale-replace its transition-property list and
     drop the fade-in - same fix as the other premium-card sections. */
  transition: opacity 700ms ease, transform 340ms cubic-bezier(0.22, 0.9, 0.35, 1), border-color 340ms ease, background 340ms ease, filter 340ms ease;
}

/* Ambient top glow - same soft white light on all three cards, but each
   sourced from a different point along the top edge (left / centre /
   right) so the three don't read as identical copies while staying in
   the same monochrome family, not different hues. */
.benefit-col::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(160px circle at 88% -12%, rgba(255, 255, 255, 0.07), transparent 70%);
}

.benefit-col:nth-child(1)::before {
  background: radial-gradient(170px circle at 14% -12%, rgba(255, 255, 255, 0.08), transparent 70%);
}

.benefit-col:nth-child(2)::before {
  background: radial-gradient(180px circle at 50% -16%, rgba(255, 255, 255, 0.07), transparent 70%);
}

.benefit-col > * {
  position: relative;
  z-index: 1;
}

/* Thin "viewfinder" corner marks - a quiet technical-UI cue framing the
   card's content area (14px inset so they read as a detail, not a
   border). Neutral top-left, accent-tinted bottom-right: a small
   asymmetry echoing the list's own neutral → confirmed (check) reading
   direction, top-to-bottom. */
.benefit-col__frame {
  position: absolute;
  inset: 14px;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16)),
    linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16)),
    linear-gradient(rgba(47, 217, 196, 0.28), rgba(47, 217, 196, 0.28)),
    linear-gradient(rgba(47, 217, 196, 0.28), rgba(47, 217, 196, 0.28));
  background-size: 14px 1px, 1px 14px, 14px 1px, 1px 14px;
  background-position: top left, top left, bottom right, bottom right;
}

/* Softened, better-integrated watermark: a radial mask fades its own
   edges out (a quiet glow of the icon rather than a hard-edged shape
   sitting in the corner), and it now sits a little larger/further off
   the corner so more of it reads as ambient rather than a discrete mark. */
.benefit-col__watermark {
  position: absolute;
  right: -26px;
  bottom: -26px;
  z-index: 0;
  width: 156px;
  height: 156px;
  color: var(--accent);
  opacity: 0.05;
  mask-image: radial-gradient(circle at 65% 35%, black 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 65% 35%, black 35%, transparent 78%);
  pointer-events: none;
}

.benefit-col__watermark svg { width: 100%; height: 100%; }

.benefit-col.reveal { transform: translateY(14px); }
.benefit-col.reveal.is-visible { transform: translateY(0); }
.benefit-col:nth-child(2) { transition-delay: 100ms; }
.benefit-col:nth-child(3) { transition-delay: 200ms; }

/* filter:drop-shadow, not box-shadow: overflow:hidden above (needed to
   crop the watermark icon to the card's rounded corners) would otherwise
   clip an outer box-shadow on this same element. */
.benefit-col:hover,
.benefit-col:focus-within,
.benefit-col:active {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.16);
  background: linear-gradient(165deg, rgba(22, 36, 56, 0.58), rgba(8, 16, 28, 0.52));
  filter: drop-shadow(0 20px 40px rgba(2, 8, 16, 0.35)) drop-shadow(0 0 20px rgba(47, 217, 196, 0.12));
}

.benefit-col:hover li,
.benefit-col:focus-within li,
.benefit-col:active li {
  color: var(--text);
}

.benefit-col__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}

.benefit-col__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  transition: box-shadow 340ms ease;
}

.benefit-col__icon svg { width: 21px; height: 21px; }

.benefit-col:hover .benefit-col__icon,
.benefit-col:focus-within .benefit-col__icon,
.benefit-col:active .benefit-col__icon {
  box-shadow: 0 0 14px rgba(47, 217, 196, 0.32);
}

.benefit-col__tag {
  font-size: 0.62rem;
  padding: 0.3rem 0.65rem;
  white-space: nowrap;
}

.benefit-col h3 {
  position: relative;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 1.2rem;
  padding-bottom: 1rem;
}

/* Gradient fade instead of a flat border-bottom - a slightly more
   "designed" divider, echoing the fade-to-edge line treatment used
   elsewhere on the page (the pressure line, the shared-AI-core
   connectors) rather than a plain rule. */
.benefit-col h3::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.16), transparent 75%);
}

.benefit-col ul { display: flex; flex-direction: column; gap: 0.85rem; }

.benefit-col li {
  position: relative;
  padding-left: 1.9rem;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.55;
  transition: color 340ms ease;
}

/* The opening claim of each list reads slightly stronger at rest - a
   very small emphasis, not a second colour, so it doesn't compete with
   the checkmarks or the section's overall restraint. */
.benefit-col li:first-child {
  color: var(--text-muted);
  font-weight: 600;
}

.benefit-col:hover li:first-child,
.benefit-col:focus-within li:first-child,
.benefit-col:active li:first-child {
  color: var(--text);
}

.benefit-col li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.05em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(47, 217, 196, 0.16);
  color: var(--accent);
  font-size: 0.66rem;
  line-height: 1;
  box-shadow: 0 0 4px rgba(47, 217, 196, 0.12);
  transition: box-shadow 340ms ease, transform 340ms ease;
}

.benefit-col:hover li::before,
.benefit-col:focus-within li::before,
.benefit-col:active li::before {
  box-shadow: 0 0 8px rgba(47, 217, 196, 0.35);
  transform: scale(1.1);
}

/* Per-bullet hover - an extra layer on top of the whole-card hover
   above: the one item the cursor is actually over gets a touch more
   emphasis than its siblings. */
.benefit-col li:hover {
  color: var(--text);
}

.benefit-col li:hover::before {
  box-shadow: 0 0 10px rgba(47, 217, 196, 0.45);
  transform: scale(1.15);
}

@media (prefers-reduced-motion: reduce) {
  .benefit-col,
  .benefit-col__icon,
  .benefit-col li,
  .benefit-col li::before {
    transition: none;
  }
}

/* ---------- Disclaimer: premium compliance notice panel ----------
   Same glass-panel language as the rest of the page (dark gradient
   glass, near-invisible-until-hover border, corner light) but in the
   site's muted-gold accent instead of cyan - a deliberate, restrained
   colour break signalling "this is a different kind of message"
   (regulatory/compliance) rather than another feature callout. No
   overflow:hidden needed (nothing here bleeds past the box), so the
   hover glow can use a plain box-shadow - no drop-shadow workaround
   required, unlike the cyan cards elsewhere on the page. */
.disclaimer { padding: 4rem 0; }

.disclaimer__box {
  position: relative;
  background: linear-gradient(165deg, rgba(46, 34, 14, 0.5), rgba(12, 9, 4, 0.42));
  border: 1px solid rgba(255, 176, 32, 0.22);
  border-radius: var(--radius-lg);
  padding: 2.25rem 2.4rem;
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: inset 0 1px 0 rgba(255, 220, 150, 0.06);
  /* Explicit opacity here: equal specificity with the sitewide .reveal
     rule (both single classes) and later in the cascade means this list
     otherwise wins outright and drops .reveal's fade-in transition -
     same fix as the other premium-card sections on this page. */
  transition: opacity 700ms ease, transform 340ms cubic-bezier(0.22, 0.9, 0.35, 1), border-color 340ms ease, box-shadow 340ms ease, background 340ms ease;
}

.disclaimer__box::before,
.disclaimer__box::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
}

.disclaimer__box::before {
  background: radial-gradient(220px circle at 8% -16%, rgba(255, 200, 120, 0.09), transparent 70%);
}

/* A very faint compliance/med-tech mesh, echoing the grid used in the
   Hero and the light-blue sections elsewhere on the page - here at a
   fraction of the opacity and masked to the top-left, since this panel
   is meant to stay quiet rather than declare itself a "themed" section. */
.disclaimer__box::after {
  background-image:
    linear-gradient(rgba(255, 200, 120, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 200, 120, 0.035) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse 80% 70% at 15% 20%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 15% 20%, black 30%, transparent 80%);
}

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

.disclaimer__box:hover,
.disclaimer__box:focus-within,
.disclaimer__box:active {
  transform: translateY(-3px);
  border-color: rgba(255, 176, 32, 0.4);
  background: linear-gradient(165deg, rgba(54, 40, 16, 0.56), rgba(14, 10, 4, 0.48));
  box-shadow: inset 0 1px 0 rgba(255, 220, 150, 0.09), 0 18px 36px rgba(10, 8, 4, 0.35), 0 0 22px rgba(245, 166, 35, 0.12);
}

.disclaimer__head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.disclaimer__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(245, 166, 35, 0.14);
  border: 1px solid rgba(245, 166, 35, 0.35);
  color: #f0a63d;
  flex: none;
}

.disclaimer__icon svg { width: 22px; height: 22px; }

.disclaimer__eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f0a63d;
  margin-bottom: 0.3rem;
}

.disclaimer__title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #ffcf7d;
  margin: 0;
}

.disclaimer__lead {
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 1.4rem;
  max-width: 70ch;
  line-height: 1.6;
}

.disclaimer__divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 176, 32, 0.24), transparent 80%);
  margin-bottom: 1.4rem;
}

.disclaimer__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.6rem;
}

.disclaimer__list li {
  position: relative;
  padding-left: 1.9rem;
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.disclaimer__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.05em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(245, 166, 35, 0.14);
  color: #f0a63d;
  font-size: 0.62rem;
  line-height: 1;
}

.disclaimer__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.disclaimer__tag {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  background: rgba(245, 166, 35, 0.1);
  border: 1px solid rgba(245, 166, 35, 0.28);
  color: #ffcf7d;
}

@media (max-width: 640px) {
  .disclaimer__box { padding: 1.85rem 1.5rem; }
  .disclaimer__head { gap: 0.85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .disclaimer__box { transition: none; }
}

/* ---------- Contact/Team hero: 2-column copy + carousel composition ----------
   The section head, "Our Team" intro and the team carousel used to just
   stack full-width, one after another - copy left-aligned, carousel
   dropping low and centered, reading as two unrelated blocks with a dead
   gap between them.

   .contact-team-grid pairs them into one 2-column/2-row grid instead:
   the headline alone occupies row 1 (left column only), and "Our Team" +
   the carousel are explicitly placed side by side in row 2 - so the
   carousel's top edge always lines up with the "Our Team" line exactly,
   *regardless* of how many lines the headline wraps to at a given width.
   (A simpler `align-items: center` on the whole row was tried first, but
   the carousel - ambient SVG + photo + name/role + dot controls - is
   actually the taller of the two columns, so centering the row left it
   flush with the headline's top instead of dropping to "Our Team"; only
   explicit row placement gets the alignment the brief asked for.)
   Collapses to a single stacked column on tablet/mobile (below, next to
   the carousel's own existing responsive rules), where the explicit
   column/row assignments are reset so the three pieces fall back to
   plain DOM-order stacking (headline → intro → carousel). */
.contact-team-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  column-gap: 2.5rem;
  align-items: start;
  margin-bottom: 3rem;
}

.contact-team-grid > .section__head { grid-column: 1; grid-row: 1; max-width: 560px; margin-bottom: 2rem; }
.contact-team-copy { grid-column: 1; grid-row: 2; max-width: 560px; }
.contact-team-carousel-wrap { grid-column: 2; grid-row: 2; min-width: 0; }
.contact-team-carousel-wrap .modules-carousel { margin-bottom: 0; }

/* Narrower bleed than the base carousel's 6vw: that value assumes a
   full-width .container track, and would badly overshoot a track that's
   now confined to roughly half of it (bleeding into the copy column /
   past the viewport edge). The team slides top out at 240px (see
   .modules-carousel--team .carousel-slide below), so a small fixed peek
   is enough to still hint at the neighbouring cards. */
.contact-team-carousel-wrap .modules-carousel__track { --carousel-bleed: 1.5rem; }

/* Short text bridge between the section head and the team carousel -
   reuses .section__kicker/.section__lead/.trust-chip as-is rather than
   introducing new type styles, just adds the spacing/width to make it
   read as a small intro rather than a second section head. */
.team-intro { max-width: 640px; margin-bottom: 0; }
.team-intro .section__kicker { margin-bottom: 0.5rem; }
.team-intro .section__lead { margin-top: 0; }

.team-intro__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

@media (max-width: 900px) {
  .contact-team-grid {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 2rem;
  }

  .contact-team-grid > .section__head,
  .contact-team-copy,
  .contact-team-carousel-wrap {
    grid-column: 1;
    grid-row: auto;
  }

  .contact-team-grid > .section__head,
  .contact-team-copy { max-width: 560px; }
  .contact-team-copy .section__lead { margin-left: auto; margin-right: auto; }
  .team-intro__chips { justify-content: center; }

  .contact-team-carousel-wrap { width: 100%; }
}

/* ---------- Team / Contact ----------
   Reuses the Example Modules showcase carousel engine as-is (same
   [data-carousel]/[data-carousel-track]/[data-carousel-slide] markup,
   same assets/js/modules-carousel.js, same .modules-carousel__viewport/
   .carousel-arrow/.carousel-dot chrome - see styles.css ~3532 for the
   shared scroll-snap + --dist mechanics). Only two things are new here:
   a narrower slide width (.modules-carousel--team) so portrait photo
   cards get a tighter "coverflow of people" feel instead of the wide
   dashboard-preview cards, and the .team-card visual design itself. The
   stronger scale/opacity/blur falloff on .modules-carousel--team
   .carousel-slide (vs. the base .carousel-slide rule) is deliberately
   more pronounced than the modules carousel's gentle dim, so neighbour
   cards read as clearly "receded" per the brief. */
.modules-carousel--team .carousel-slide {
  flex-basis: min(240px, 62vw);
  transform: scale(calc(1 - min(var(--dist, 0), 1) * 0.22));
  opacity: calc(1 - min(var(--dist, 0), 1) * 0.72);
  filter:
    blur(calc(min(var(--dist, 0), 1) * 1.5px))
    saturate(calc(1 - min(var(--dist, 0), 1) * 0.45))
    brightness(calc(1 - min(var(--dist, 0), 1) * 0.3));
}

/* Ambient halo + a handful of static micro-nodes behind the team carousel -
   pure atmosphere, not information (unlike the fc-solution decorative SVG
   earlier in the site, which had to visually explain a data flow, this one
   only needs to read as quiet blueprint/medtech texture, so it stays static
   with no connecting lines to avoid looking like an unfinished diagram). */
.modules-carousel--team { position: relative; }

.modules-carousel--team::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -50px -6% -10px -6%;
  pointer-events: none;
  background: radial-gradient(ellipse 58% 62% at 50% 40%, rgba(47, 217, 196, 0.12), transparent 72%);
}

.team-carousel-ambient {
  position: absolute;
  z-index: -1;
  inset: -50px -6% -10px -6%;
  width: auto;
  height: auto;
  pointer-events: none;
  overflow: visible;
}

.team-carousel-ambient__node {
  fill: rgba(185, 240, 235, 0.55);
  filter: drop-shadow(0 0 3px rgba(47, 217, 196, 0.55));
}

@media (max-width: 640px) {
  .team-carousel-ambient { display: none; }
}

.team-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: linear-gradient(165deg, rgba(18, 30, 48, 0.55), rgba(6, 12, 22, 0.5));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 340ms ease, box-shadow 340ms ease, transform 340ms ease;
}

.carousel-slide:hover .team-card,
.carousel-slide:focus-within .team-card {
  transform: translateY(-4px);
}

.team-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 420ms ease;
  background: radial-gradient(120% 55% at 50% 0%, rgba(47, 217, 196, 0.16), transparent 70%);
}

.carousel-slide.is-active .team-card {
  border-color: var(--accent-line);
  box-shadow: 0 20px 50px rgba(2, 6, 14, 0.5), 0 0 34px rgba(47, 217, 196, 0.12);
}

.carousel-slide.is-active .team-card::before { opacity: 1; }

.team-card__photo-frame {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  transition: box-shadow 420ms ease;
}

.carousel-slide.is-active .team-card__photo-frame {
  box-shadow: inset 0 0 0 1px rgba(47, 217, 196, 0.3);
}

.team-card__photo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 18%;
  filter: saturate(0.92);
}

.team-card__photo-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 58%, rgba(6, 12, 22, 0.88) 100%);
}

.team-card__body {
  position: relative;
  z-index: 1;
  padding: 1.1rem 1.3rem 1.4rem;
  text-align: center;
}

.team-card__name {
  display: block;
  font-size: 1.05rem;
  color: var(--text);
  margin-bottom: 0.55rem;
}

.team-card__role.status-chip { font-size: 0.7rem; }

@media (max-width: 900px) {
  .modules-carousel--team .carousel-slide { flex-basis: min(220px, 68vw); }
}

@media (max-width: 640px) {
  .modules-carousel--team .carousel-slide { flex-basis: 78vw; }
  .team-card__body { padding: 1rem 1.1rem 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .team-card { transition: none; }
  .carousel-slide:hover .team-card,
  .carousel-slide:focus-within .team-card { transform: none; }
}

.contact__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.4rem;
  margin-bottom: 3rem;
}

.contact-card {
  position: relative;
  background: linear-gradient(165deg, rgba(18, 30, 48, 0.5), rgba(6, 12, 22, 0.42));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem;
  overflow: hidden;
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}

.contact-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(140px circle at 12% 0%, rgba(47, 217, 196, 0.1), transparent 70%);
  opacity: 0;
  transition: opacity 300ms ease;
}

.contact-card:hover,
.contact-card:focus-within {
  border-color: var(--accent-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 24px rgba(47, 217, 196, 0.1);
  transform: translateY(-3px);
}

.contact-card:hover::before,
.contact-card:focus-within::before { opacity: 1; }

.contact-card h3 {
  position: relative;
  z-index: 1;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.6rem;
}

.contact-card a {
  position: relative;
  z-index: 1;
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent);
  transition: color var(--transition), text-shadow 300ms ease;
}

.contact-card a:hover,
.contact-card a:focus-visible { color: var(--text); text-shadow: 0 0 14px rgba(47, 217, 196, 0.5); }

@media (prefers-reduced-motion: reduce) {
  .contact-card { transition: none; }
  .contact-card:hover, .contact-card:focus-within { transform: none; }
}

.contact-form {
  position: relative;
  background: linear-gradient(165deg, rgba(18, 30, 48, 0.48), rgba(6, 12, 22, 0.4));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  padding: 2rem;
  max-width: 700px;
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}

.form-group { margin-bottom: 1.2rem; }

.contact-form input,
.contact-form textarea {
  background: rgba(6, 12, 22, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: border-color 240ms ease, box-shadow 240ms ease, background 240ms ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--accent-line);
  background: rgba(6, 12, 22, 0.65);
  box-shadow: 0 0 0 3px rgba(47, 217, 196, 0.12), 0 0 18px rgba(47, 217, 196, 0.14);
}

.form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.45rem;
}

.contact-form textarea { resize: vertical; }

.contact-form__note {
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--text-faint);
}

/* ---------- Footer ---------- */
.footer {
  background: var(--bg-900);
  border-top: 1px solid var(--line-soft);
  padding: 3.5rem 0 1.5rem;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--line-soft);
}

.footer__logo { height: 30px; width: auto; margin-bottom: 1rem; }

.footer__brand p {
  font-size: 0.86rem;
  color: var(--text-faint);
  max-width: 34ch;
}

.footer__nav, .footer__contact {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.footer__nav a, .footer__contact a {
  font-size: 0.88rem;
  color: var(--text-muted);
  transition: color var(--transition);
}

.footer__nav a:hover, .footer__contact a:hover { color: var(--accent); }

.footer__disclaimer {
  margin-top: 2rem;
  padding: 1rem 1.2rem;
  background: rgba(245, 166, 35, 0.06);
  border: 1px solid rgba(245, 166, 35, 0.22);
  border-left: 3px solid #f5a623;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 90ch;
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 1.5rem;
  font-size: 0.78rem;
  color: var(--text-faint);
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { margin-top: 2rem; }
  .solution__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .navbar__toggle { display: flex; }

  .navbar__inner { height: 72px; }
  .navbar__logo { height: 42px; }

  .navbar__nav {
    position: absolute;
    top: 72px; left: 0; right: 0;
    background: rgba(4, 10, 20, 0.97);
    border-bottom: 1px solid var(--line);
    max-height: 0;
    overflow: hidden;
    transition: max-height 260ms ease;
  }

  .navbar__nav.is-open { max-height: 480px; }

  .navbar__links {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0.5rem 1.5rem 1.5rem;
  }

  .navbar__links li { width: 100%; padding: 0.7rem 0; border-bottom: 1px solid var(--line-soft); }
  .navbar__links li:last-child { border-bottom: none; }
  .navbar__cta { display: inline-block; margin-top: 0.6rem; }

  .hero { padding: 3.5rem 0 3.5rem; }
  .hero__visual { min-height: 320px; }
  .dashboard-card { max-width: 100%; }
  .metric-float { position: static; margin-top: 0.75rem; animation: none; }
  .metric-float--1, .metric-float--2, .metric-float--3 { display: inline-flex; margin-right: 0.6rem; }

  .section { padding: 3.5rem 0; }
  .form-row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer__legal { flex-direction: column; }
}

@media (max-width: 420px) {
  .hero__title { max-width: none; }
  .stats-row { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   SPA PAGE ROUTER - Home / Heart Demo / Influenza Demo /
   Architecture / Knowledge Base / Contact. Ported from the
   /stronka page-section + subsection pattern, restyled dark.
   ========================================================= */
.page-block { display: none; }
.page-block.is-active-page { display: block; }

/* Secondary in-page navigation (Home only) */
.subnav {
  display: none;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(4, 10, 20, 0.45);
}

.subnav.is-visible { display: block; }

.subnav__inner { overflow-x: auto; scrollbar-width: thin; }

.subnav__links {
  display: flex;
  gap: 0.4rem;
  padding: 0.65rem 0;
  white-space: nowrap;
}

.subnav__links a {
  display: inline-block;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-faint);
  transition: color var(--transition), background var(--transition);
}

.subnav__links a:hover { color: var(--text); background: var(--glass); }
.subnav__links a.is-active { color: var(--accent); background: var(--accent-soft); }

/* Module hero band - used by Heart/Influenza/Architecture/Knowledge pages */
.module-hero {
  padding: 3.5rem 0 2.5rem;
  background:
    radial-gradient(ellipse 60% 60% at 10% 0%, rgba(47, 217, 196, 0.10), transparent 60%),
    linear-gradient(160deg, #050b16 0%, #081527 100%);
  border-bottom: 1px solid var(--line-soft);
}

.module-hero__title {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
  color: var(--text);
  margin: 0.6rem 0 0.9rem;
}

.module-hero__lead {
  color: var(--text-muted);
  font-size: 1.02rem;
  max-width: 68ch;
}

/* ---------- Knowledge & Technology: tab switcher ----------
   Glass pill switcher sitting inside the shared module-hero, toggling
   between the Technology and Knowledge Base .kt-panel sections below.
   Visual language reuses the site's existing glass/accent tokens rather
   than introducing a new one (compare .page-toc .toc-item / .subnav__links a). */
.kt-tabbar {
  display: inline-flex;
  gap: 0.3rem;
  margin-top: 1.75rem;
  padding: 0.3rem;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.kt-tab {
  padding: 0.6rem 1.3rem;
  border-radius: 999px;
  border: none;
  background: transparent;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-faint);
  cursor: pointer;
  transition: color var(--transition), background var(--transition), box-shadow var(--transition);
}

.kt-tab:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }

.kt-tab.is-active {
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 -2px 0 var(--accent), 0 0 18px rgba(47, 217, 196, 0.18);
}

@media (max-width: 560px) {
  .kt-tabbar { display: flex; width: 100%; }
  .kt-tab { flex: 1 1 0; text-align: center; padding: 0.6rem 0.8rem; }
}

/* Per-panel intro (kicker + title + lead) - the original Technology and
   Knowledge Base page heroes, kept verbatim but demoted from their own
   full module-hero band (now shared above the tabs) to a compact intro
   inside each panel, so neither page's original copy is lost. */
.kt-panel-intro { max-width: 760px; padding: 2.5rem 0; }

/* Panel visibility: JS-driven only (see app.js initKnowledgeTechTabs).
   Deliberately not "display:none by default" - without JS, .kt-panel
   elements stay in normal flow so both Technology and Knowledge Base
   remain readable stacked one below the other. */
.kt-panel--hidden { display: none; }
.kt-panel.is-active { animation: subsectionFade 320ms ease; }

/* Page layout: main content + sticky on-page TOC (module/reference pages) */
.page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 2.5rem;
  padding: 3rem 0 4.5rem;
  align-items: start;
}

.page-content { min-width: 0; }

.page-toc {
  position: sticky;
  top: 96px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.1rem;
}

.page-toc h4 {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.8rem;
}

.page-toc ul { display: flex; flex-direction: column; gap: 0.2rem; }

.page-toc .toc-item {
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--text-faint);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}

.page-toc .toc-item:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }

.page-toc .toc-item.is-active {
  color: var(--accent);
  font-weight: 600;
  background: var(--accent-soft);
  border-left-color: var(--accent);
}

/* Subsections (slide-style content within a module page) */
.subsection { display: none; }
.subsection.is-active { display: block; animation: subsectionFade 320ms ease; }

@keyframes subsectionFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.subsection h2 {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line-soft);
}

.subsection h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  margin: 1.6rem 0 0.7rem;
}

.subsection p {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.subsection ul, .subsection ol {
  margin: 0 0 1.1rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.subsection li { color: var(--text-muted); font-size: 0.92rem; }
.subsection strong { color: var(--text); }
.subsection em { color: var(--accent); font-style: normal; }

/* Data tables (variables, model benchmark, patient list) */
.table-scroll { overflow-x: auto; margin-bottom: 1.25rem; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  min-width: 480px;
}

.data-table th, .data-table td {
  padding: 0.65rem 0.8rem;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text-muted);
  white-space: nowrap;
}

.data-table th {
  color: var(--text-faint);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.03);
}

.data-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }

.data-table--benchmark .is-best td:first-child { color: var(--accent); font-weight: 700; }
.data-table--benchmark .is-weak td { color: var(--text-faint); }

/* Chart figures inside subsections (light tile on dark page, same idea as .chart-card) */
.chart-figure {
  margin: 1.5rem 0;
  background: #f5f8fb;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.chart-figure img { width: 100%; background: #fff; padding: 0.75rem; }

.chart-figure figcaption {
  padding: 0.9rem 1.2rem 1.1rem;
  background: var(--bg-800);
  color: var(--text-faint);
  font-size: 0.8rem;
  line-height: 1.5;
}

.benchmark-note { font-size: 0.85rem; color: var(--text-faint); font-style: italic; }

.stats-row-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.25rem 0;
}

.stat-tile--sm {
  flex: 1 1 140px;
  text-align: center;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1rem 0.75rem;
}

.stat-tile--sm strong { display: block; font-size: 1.4rem; color: var(--accent); }
.stat-tile--sm span { display: block; margin-top: 0.25rem; font-size: 0.72rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.03em; }

/* Module card CTA link (home page module teasers) */
.module-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.9rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
}

.module-card__link:hover { color: var(--text); }

/* Demo disclaimer banner (Heart / Influenza interactive demos) */
.demo-disclaimer {
  background: rgba(245, 166, 35, 0.08);
  border: 1px solid rgba(245, 166, 35, 0.3);
  border-left: 3px solid #f5a623;
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.1rem;
  margin: 1rem 0 1.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.demo-disclaimer strong { color: #ffcf7d; }

/* ---------- Shared form primitives (Heart Disease demo) ---------- */
.data-form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin: 1.25rem 0;
}

.data-form .form-group label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-faint);
  margin-bottom: 0.4rem;
}

.data-form select {
  font: inherit;
  color: var(--text);
  background: var(--bg-700);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.8rem;
  width: 100%;
}

.btn--full { width: 100%; margin-top: 1rem; }

.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }

/* ---------- Influenza demo: controls + canvas + forecast ---------- */
.influenza-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin: 1.25rem 0 1.5rem;
}

.control-group { display: flex; flex-direction: column; gap: 0.4rem; }
.control-group label { font-size: 0.78rem; font-weight: 600; color: var(--text-faint); }
.control-group--checkbox { justify-content: center; }

.data-select {
  font: inherit;
  color: var(--text);
  background: var(--bg-700);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
  cursor: pointer;
}

.range-slider { width: 100%; accent-color: var(--accent); cursor: pointer; }

.chart-container {
  background: linear-gradient(180deg, rgba(11, 31, 58, 0.4), rgba(4, 10, 20, 0.6));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  overflow-x: auto;
}

#influenza-chart { display: block; width: 100%; height: auto; max-width: 100%; }

.chart-empty-state {
  margin: 0;
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--text-faint);
  font-size: 0.88rem;
  line-height: 1.6;
}

.demo-disclaimer--controls { margin: 0.9rem 0 1.1rem; }

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 0.9rem;
  font-size: 0.78rem;
  color: var(--text-faint);
}

.legend-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  margin-right: 0.4rem;
}

.legend-dot--main { background: var(--accent); }
.legend-dot--compare { background: #f5a623; }
.legend-dot--forecast { background: rgba(255, 255, 255, 0.7); }
.legend-dot--peak { background: #fff; box-shadow: 0 0 0 2px var(--risk-high); }

.forecast-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin: 1rem 0 1.75rem;
}

.forecast-card {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1rem;
}

.forecast-card span { display: block; font-size: 0.72rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.3rem; }
.forecast-card strong { font-size: 1.4rem; color: var(--accent); }
.forecast-card--wide { grid-column: 1 / -1; }

/* ---------- Hospital Command Center (Home preview): glass KPI cards ----------
   Scoped to ".home-command-center-section" so the other two reuses of
   .forecast-panel/.forecast-card (the Disease Forecasting page's own
   command-center preview and the full Command Center page) are
   untouched. The section already has a background image + gradient
   overlay (rule above, ~line 629); backdrop-filter here picks that up
   through the cards for a genuine frosted-glass read rather than flat
   opaque boxes sitting on top of it. */
.home-command-center-section .forecast-card {
  /* Explicit opacity in the transition list: this scoped rule has higher
     specificity than the sitewide .reveal rule (now also applied per
     card, for the staggered entrance below), and a shorthand transition
     here would otherwise silently replace .reveal's transition-property
     list wholesale and drop the fade-in. */
  position: relative;
  background: linear-gradient(160deg, rgba(16, 28, 46, 0.55), rgba(6, 12, 22, 0.62));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 14px 30px rgba(2, 8, 16, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
  transition: opacity 700ms ease, transform 340ms cubic-bezier(0.22, 0.9, 0.35, 1), border-color 340ms ease, background 340ms ease, box-shadow 340ms ease;
}

.home-command-center-section .forecast-card:hover,
.home-command-center-section .forecast-card:focus-within,
.home-command-center-section .forecast-card:active {
  transform: translateY(-4px);
  border-color: rgba(47, 217, 196, 0.4);
  background: linear-gradient(160deg, rgba(20, 34, 54, 0.62), rgba(8, 16, 28, 0.7));
  box-shadow: 0 20px 40px rgba(2, 8, 16, 0.42), 0 0 22px rgba(47, 217, 196, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

/* Progressive reveal, per card, with a small stagger - see the delay
   ladder below alongside the header/disclaimer/CTA steps. */
.home-command-center-section .forecast-card.reveal {
  transform: translateY(14px);
}

.home-command-center-section .forecast-card.reveal.is-visible {
  transform: translateY(0);
}

.home-command-center-section .forecast-card:nth-child(1) { transition-delay: 140ms; }
.home-command-center-section .forecast-card:nth-child(2) { transition-delay: 200ms; }
.home-command-center-section .forecast-card:nth-child(3) { transition-delay: 260ms; }
.home-command-center-section .forecast-card:nth-child(4) { transition-delay: 320ms; }
.home-command-center-section .forecast-card:nth-child(5) { transition-delay: 380ms; }
.home-command-center-section .forecast-card:nth-child(6) { transition-delay: 440ms; }

.home-command-center-section .benchmark-note.reveal { transition-delay: 520ms; }
.home-command-center-section .section__foot.reveal { transition-delay: 600ms; }

/* KPI values: a restrained baseline glow that strengthens on card
   hover/focus, plus two very quiet "alive dashboard" signals - a slow
   shimmer sweep for "Elevated" and a slow amber breathing glow for
   "High" (the section's one deliberate warning accent, same restrained
   amber used elsewhere on the page - never a red alarm look). */
.forecast-card__value {
  display: inline-block;
  transition: text-shadow 340ms ease, color 340ms ease;
}

.home-command-center-section .forecast-card:hover .forecast-card__value,
.home-command-center-section .forecast-card:focus-within .forecast-card__value,
.home-command-center-section .forecast-card:active .forecast-card__value {
  color: #eafffb;
  text-shadow: 0 0 14px rgba(47, 217, 196, 0.45);
}

/* Compound selector (.forecast-card__value + modifier), not the modifier
   class alone: ".forecast-card strong" (base rule, above) carries an
   element selector on top of its class, giving it specificity (0,1,1) -
   higher than a single modifier class (0,1,0) would be, which silently
   lost the color override here. Two classes (0,2,0) reliably wins. */
.forecast-card__value.forecast-card__value--elevated {
  background-image: linear-gradient(100deg, var(--accent) 30%, #eafffb 50%, var(--accent) 70%);
  background-size: 220% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: kpiValueShimmer 5.5s ease-in-out infinite;
}

@keyframes kpiValueShimmer {
  0% { background-position: 140% 0; }
  100% { background-position: -40% 0; }
}

.forecast-card__value.forecast-card__value--high {
  color: #f0a63d;
  animation: kpiValuePulse 3.6s ease-in-out infinite;
}

@keyframes kpiValuePulse {
  0%, 100% { text-shadow: 0 0 6px rgba(240, 166, 61, 0.35); opacity: 0.92; }
  50% { text-shadow: 0 0 14px rgba(240, 166, 61, 0.6); opacity: 1; }
}

/* Higher specificity than the generic hover-brighten rule above: "High"
   should intensify its own amber on hover, not switch to cyan - losing
   the warning colour on interaction would be confusing. */
.home-command-center-section .forecast-card:hover .forecast-card__value--high,
.home-command-center-section .forecast-card:focus-within .forecast-card__value--high,
.home-command-center-section .forecast-card:active .forecast-card__value--high {
  color: #f6b656;
  text-shadow: 0 0 16px rgba(240, 166, 61, 0.65);
}

/* CTA polish: scoped to this section's button only (sitewide .btn--primary
   is used elsewhere and is left alone). filter:drop-shadow, not
   box-shadow, because overflow:hidden below (needed to clip the sheen
   sweep to the pill shape) would otherwise clip an outer box-shadow. */
.home-command-center-section .btn--primary {
  position: relative;
  overflow: hidden;
  transition: transform 340ms cubic-bezier(0.22, 0.9, 0.35, 1), filter 340ms ease, box-shadow var(--transition), background var(--transition);
}

.home-command-center-section .btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 32%, rgba(255, 255, 255, 0.4) 48%, transparent 64%);
  background-size: 220% 100%;
  background-position: 140% 0;
  transition: background-position 900ms ease;
  pointer-events: none;
}

.home-command-center-section .btn--primary:hover,
.home-command-center-section .btn--primary:focus-visible {
  transform: translateY(-3px);
  filter: drop-shadow(0 18px 34px rgba(20, 184, 172, 0.35)) drop-shadow(0 0 18px rgba(47, 217, 196, 0.26));
}

.home-command-center-section .btn--primary:hover::after,
.home-command-center-section .btn--primary:focus-visible::after {
  background-position: -40% 0;
}

@media (prefers-reduced-motion: reduce) {
  .home-command-center-section .forecast-card:nth-child(n),
  .home-command-center-section .benchmark-note.reveal,
  .home-command-center-section .section__foot.reveal {
    transition-delay: 0ms;
  }
  .forecast-card__value--elevated,
  .forecast-card__value--high {
    animation: none;
  }
  .forecast-card__value.forecast-card__value--elevated {
    background: none;
    -webkit-text-fill-color: unset;
    color: var(--accent);
  }
  .forecast-card__value--high { text-shadow: none; opacity: 1; }
  .home-command-center-section .btn--primary::after { transition: none; }
}

.forecast-weeks { display: flex; gap: 1rem; justify-content: space-around; }
.forecast-weeks span { font-size: 1.1rem; font-weight: 700; color: var(--text); }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin: 1rem 0 1.5rem;
}

.stat-item {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
}

.stat-item span { display: block; font-size: 0.72rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.3rem; }
.stat-item strong { font-size: 1.15rem; color: var(--text); }

/* ---------- Architecture & Roadmap ---------- */
.pipeline-steps { counter-reset: step; }

.pipeline-steps li {
  position: relative;
  padding-left: 2.6rem;
}

.pipeline-steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0; top: -0.1rem;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #04141a;
  font-weight: 700;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arch-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
  margin: 1.25rem 0 1.5rem;
}

.arch-tier {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
}

.arch-tier h3 { margin-top: 0; color: var(--accent); }
.arch-tier ul { margin-left: 1.1rem; }

/* ---------- Knowledge Base: formula / highlight / poc-note boxes ---------- */
.formula-box {
  background: rgba(255, 255, 255, 0.035);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 1.1rem 1.3rem;
  margin: 1.25rem 0;
  color: var(--text-muted);
}

.formula-box h4 { color: var(--accent); font-size: 0.95rem; margin: 0 0 0.5rem; }
.formula-box p { font-size: 0.85rem; color: var(--text-faint); margin-top: 0.5rem; }
.formula-box mjx-container { color: var(--text); }

.highlight-box {
  background: linear-gradient(135deg, rgba(47, 217, 196, 0.10), rgba(20, 184, 172, 0.04));
  border-left: 3px solid var(--accent-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 1.1rem 1.3rem;
  margin: 1.25rem 0;
}

.highlight-box h3, .highlight-box h4 { color: var(--text); margin-top: 0; }
.highlight-box p { color: var(--text-muted); }

.inline-link { color: var(--accent); text-decoration: underline; }

.poc-note {
  background: rgba(111, 143, 170, 0.10);
  border-left: 3px solid #6f8faa;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 1.1rem 1.3rem;
  margin: 1.25rem 0;
}

.poc-note h4 { color: #a9c2d6; margin-top: 0; }
.poc-note p { color: var(--text-muted); }

/* MathJax formulas need to inherit readable color on the dark background */
mjx-container { color: var(--text); }

/* =========================================================
   Responsive - SPA pages, demos, knowledge base
   ========================================================= */
@media (max-width: 980px) {
  .page-layout { grid-template-columns: 1fr; }
  .page-toc { position: static; order: -1; }
}

@media (max-width: 760px) {
  .module-hero { padding: 2.5rem 0 2rem; }
  .data-form__grid { grid-template-columns: 1fr; }
  .influenza-controls { grid-template-columns: 1fr; }
  .data-table { min-width: 420px; }
}

/* =========================================================
   CLINICAL AI APP DASHBOARD - Heart Disease Demo &
   Influenza Demo. Deliberately NOT the page-toc / subsection
   documentation pattern used by Architecture & Knowledge Base:
   these two module pages read as product screens, not articles.
   ========================================================= */

:root {
  --shap-positive: #f87171;
  --shap-positive-soft: rgba(248, 113, 113, 0.14);
  --shap-negative: var(--accent);
  --shap-negative-soft: var(--accent-soft);
  --risk-high: #ef4444;
  --risk-medium: #f5a623;
  --risk-low: var(--accent);
  --risk-critical: #b91c1c;
}

.module-hero--app { padding: 2.75rem 0 2.25rem; }

.app-dashboard { padding: 2.5rem 0 3rem; }

/* ---------- Model info strip ---------- */
.model-info-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1.75rem;
}

.model-info-item {
  background: var(--bg-800);
  padding: 0.9rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.model-info-item span {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.model-info-item strong { font-size: 0.86rem; color: var(--accent); font-weight: 600; }

/* ---------- App grid: form + result stack ---------- */
.app-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 1.5rem;
  align-items: start;
  margin-bottom: 1.75rem;
}

.app-grid__results {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.app-panel {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem 1.7rem;
}

.app-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}

.app-panel__head h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.app-panel--form .data-form__grid { margin-top: 0; }

.app-panel__actions { margin-top: 1.4rem; }

.app-panel__preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.9rem;
}

.btn--sm { padding: 0.5rem 1rem; font-size: 0.8rem; }

.btn--ghost {
  background: transparent;
  color: var(--text-faint);
  border: 1px dashed var(--line);
}

.btn--ghost:hover { color: var(--text); border-color: var(--text-faint); }

/* ---------- Risk Assessment panel ---------- */
.risk-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.85rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--glass);
  border: 1px solid var(--line);
  color: var(--text-faint);
}

.risk-pill[data-tier="low"] { background: var(--shap-negative-soft); border-color: var(--accent-line); color: var(--accent); }
.risk-pill[data-tier="medium"] { background: rgba(245, 166, 35, 0.14); border-color: rgba(245, 166, 35, 0.4); color: #ffcf7d; }
.risk-pill[data-tier="high"] { background: rgba(239, 68, 68, 0.14); border-color: rgba(239, 68, 68, 0.45); color: #fca5a5; }

.risk-readout {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin-bottom: 1.1rem;
}

.risk-readout strong { font-size: 2.6rem; font-weight: 700; color: var(--text); line-height: 1; }
.risk-readout span { font-size: 0.8rem; color: var(--text-faint); }

.risk-meter {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: visible;
}

.risk-meter__fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--risk-medium) 60%, var(--risk-high) 100%);
  transition: width 500ms ease;
}

.risk-meter__marker {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 16px;
  background: rgba(255, 255, 255, 0.3);
}

.risk-meter__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  font-size: 0.68rem;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ---------- Recommended Action panel ---------- */
.recommendation-text {
  font-size: 0.98rem;
  color: var(--text);
  line-height: 1.6;
  padding: 0.9rem 1.05rem;
  background: rgba(255, 255, 255, 0.04);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: 0.9rem;
}

.recommendation-note { font-size: 0.78rem; color: var(--text-faint); line-height: 1.55; }

/* ---------- SHAP-style feature impact panel ---------- */
.shap-baseline {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.8rem;
  color: var(--text-faint);
  margin-bottom: 1.1rem;
}

.shap-baseline strong { color: var(--text); font-size: 0.95rem; }
.shap-baseline__arrow { color: var(--accent); }

.shap-bars {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 1rem;
}

.shap-bar {
  display: grid;
  grid-template-columns: 120px 1fr 48px;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.76rem;
}

.shap-bar__label {
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shap-bar__track {
  position: relative;
  height: 16px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  overflow: hidden;
}

.shap-bar__track::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.18);
}

.shap-bar__fill {
  position: absolute;
  top: 1px;
  bottom: 1px;
  border-radius: 3px;
}

.shap-bar__fill--positive { left: 50%; background: var(--shap-positive); }
.shap-bar__fill--negative { right: 50%; background: var(--shap-negative); }

.shap-bar__value { text-align: right; font-weight: 700; color: var(--text); }
.shap-bar--positive .shap-bar__value { color: var(--shap-positive); }
.shap-bar--negative .shap-bar__value { color: var(--shap-negative); }

.shap-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  font-size: 0.76rem;
  color: var(--text-faint);
  margin-bottom: 0.9rem;
}

.legend-dot--positive { background: var(--shap-positive); }
.legend-dot--negative { background: var(--shap-negative); }

.demo-disclaimer--inline { margin: 0; font-size: 0.76rem; padding: 0.7rem 0.9rem; }

/* ---------- Module reference (collapsible, no TOC) ---------- */
.module-reference {
  padding: 3rem 0 4rem;
  border-top: 1px solid var(--line-soft);
  margin-top: 1rem;
}

.module-reference h2 { font-size: 1.3rem; font-weight: 700; color: var(--text); margin-bottom: 0.5rem; }
.module-reference__lead { color: var(--text-faint); font-size: 0.88rem; margin-bottom: 1.5rem; max-width: 70ch; }

.reference-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.reference-details {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 1rem;
  overflow: hidden;
}

.reference-details summary {
  cursor: pointer;
  padding: 1rem 1.3rem;
  font-weight: 600;
  color: var(--text);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.reference-details summary::-webkit-details-marker { display: none; }

.reference-details summary::after {
  content: "+";
  font-size: 1.1rem;
  color: var(--accent);
  transition: transform 200ms ease;
}

.reference-details[open] summary::after { transform: rotate(45deg); }

.reference-details__body {
  padding: 0 1.3rem 1.4rem;
  border-top: 1px solid var(--line-soft);
}

.reference-details__body h4 { color: var(--text); font-size: 0.92rem; margin: 1.1rem 0 0.5rem; }
.reference-details__body p { color: var(--text-muted); font-size: 0.88rem; margin: 0.8rem 0; }
.reference-details__body ul { margin: 0.6rem 0 0.6rem 1.2rem; display: flex; flex-direction: column; gap: 0.4rem; }
.reference-details__body li { color: var(--text-muted); font-size: 0.86rem; }

/* ---------- Hospital Command Center: dashboard background + parallax ----------
   Same visual system as the Home / Disease Forecasting section backgrounds
   (::before-style image layer + ::after gradient overlay under an isolated
   stacking context), except the image layer here is a real element
   (.hcc-parallax-bg) rather than a pseudo-element, because it needs its
   `transform` driven by scroll. The `[data-parallax-bg]` hook lives on this
   outer, full-width .hcc-dashboard-section (not on the image layer, and
   never on a `.container`) - main.js's initParallaxBackgrounds reads this
   section's bounding rect and writes `--parallax-y` onto it, which
   .hcc-parallax-bg's transform reads via var(). Wraps the metadata strip,
   Scenario/Alert Level panels, Departmental Pressure grid and the "About
   this module" accordion - not the hero above it. */
.hcc-dashboard-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hcc-parallax-bg {
  position: absolute;
  top: -40px;
  right: 0;
  bottom: -40px;
  left: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("../img/backgrounds/HCC_BG_1.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0.44;
  filter: saturate(1.05) contrast(1.05);
  transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.06);
  will-change: transform;
}

.hcc-dashboard-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 15%, rgba(2, 8, 16, 0.3), transparent 60%),
    linear-gradient(180deg, rgba(2, 8, 16, 0.62), rgba(2, 8, 16, 0.7));
}

.hcc-dashboard-section > .container {
  position: relative;
  z-index: 1;
}

/* Cards get the same slightly-darker, more opaque backing used on the
   Home/Disease Forecasting backgrounds, so the Scenario and Alert Level
   panels especially stay crisply readable. (.model-info-item already has
   an opaque --bg-800 fill and needs no change.) */
.hcc-dashboard-section .app-panel,
.hcc-dashboard-section .forecast-card,
.hcc-dashboard-section .region-status-card,
.hcc-dashboard-section .insight-card,
.hcc-dashboard-section .reference-details {
  background: rgba(4, 10, 20, 0.62);
}

@media (prefers-reduced-motion: reduce) {
  .hcc-dashboard-section { --parallax-y: 0px; }
}

@media (max-width: 768px) {
  .hcc-dashboard-section { --parallax-y: 0px; }
  .hcc-parallax-bg { opacity: 0.3; }
}

/* ---------- Hospital Command Center: interactive planning dashboard ----------
   Scenario presets now only load a starting point; the sliders below let a
   visitor fine-tune each input, and every KPI/chart/panel on the page
   recomputes from those inputs live (assets/js/command-center.js). Reuses
   the site's existing dashboard vocabulary throughout - .app-grid /
   .app-panel / .forecast-panel / .forecast-card / .insight-card /
   .region-status-card / .status-chip[data-tier] / .range-slider - rather
   than inventing a parallel set of components; only the pieces with no
   existing equivalent (the slider stack, the SVG chart, the procurement
   timing readout and the two-card readiness panel) are new. */
.app-grid--hcc {
  grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.35fr) minmax(240px, 0.95fr);
  gap: 1.25rem;
}

/* Explicit placement for all four direct children - with the chart and
   cost panel as separate siblings (so the cost panel can sit directly
   under the chart rather than nested inside one shared panel), the grid
   has 4 items for 3 columns, and default row-by-row auto-placement would
   put the 3rd item (the cost panel) in column 3 instead of stacking it
   under the chart, then wrap the 4th (Operational Summary) onto its own
   new row. Naming every slot removes the ambiguity. */
.app-grid--hcc > .app-panel--controls { grid-column: 1; grid-row: 1 / 3; }
.app-grid--hcc > .app-panel--chart { grid-column: 2; grid-row: 1; }
.app-grid--hcc > .app-panel--cost { grid-column: 2; grid-row: 2; }
.app-grid--hcc > .app-panel--summary { grid-column: 3; grid-row: 1 / 3; }

/* ---------- Compact mode: this dashboard reads as a presentation
   cockpit, not a form-heavy application - every panel here is tightened
   (padding/gaps/type scale) below the sitewide .app-panel/.forecast-*
   defaults used by the Influenza Demo, so the whole section needs
   noticeably less scrolling to take in. Scoped to .hcc-dashboard-section
   so the Influenza Demo's own dashboard is untouched. */
.hcc-dashboard-section .app-panel { padding: 1.15rem 1.25rem 1.3rem; }
.hcc-dashboard-section .app-panel__head { margin-bottom: 0.75rem; }
.hcc-dashboard-section .forecast-panel { gap: 0.6rem; margin: 0.6rem 0 0.9rem; }
.hcc-dashboard-section .forecast-card { padding: 0.65rem 0.75rem; }
.hcc-dashboard-section .forecast-card span { font-size: 0.64rem; margin-bottom: 0.2rem; }
.hcc-dashboard-section .forecast-card strong { font-size: 1.15rem; }

/* The right column is narrower here than the default 2-col .app-grid, so
   the KPI grid's usual minmax(160px, 1fr) only ever fits one column,
   stacking all 5 cards tall. A smaller minmax keeps two columns (still
   comfortably readable at this width) instead. */
.app-grid--hcc .app-panel--summary .forecast-panel {
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
}

/* Primary controls (always visible) get the divider that used to live on
   .hcc-sliders itself; the Advanced parameters <details> below is
   already visually separated by its own card, so it doesn't repeat it. */
.hcc-primary-controls {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line-soft);
}

.hcc-sliders {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.hcc-sliders .control-group { gap: 0.15rem; }
.hcc-sliders .control-group label { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.76rem; }
.hcc-sliders .control-group label span { color: var(--accent); font-weight: 700; }

/* Advanced parameters - reuses .reference-details/.reference-details__body
   (the "About this module" accordion look) as-is, just noticeably more
   compact: smaller summary/body padding and type, since this sits inside
   an already-tight control panel rather than a full-width reference
   section. Collapsed by default (no [open] attribute in the markup). */
.hcc-advanced-controls { margin: 0.85rem 0 0; }
.hcc-advanced-controls summary { padding: 0.6rem 0.8rem; font-size: 0.82rem; }
.hcc-advanced-controls .reference-details__body { padding: 0.15rem 0.8rem 0.8rem; }

/* Small muted single-line note, replacing the boxed .demo-disclaimer
   inside these already-compact panels (a bordered/tinted box per note
   read as too heavy once everything else around it was tightened). The
   sitewide boxed .demo-disclaimer is kept as-is at the foot of the whole
   dashboard, where it plays its usual "closing" role. */
.hcc-inline-note {
  font-size: 0.72rem;
  color: var(--text-faint);
  margin: 0.7rem 0 0;
}

/* ---------- Forecast chart (SVG) ----------
   Plain line + shaded-rect SVG, redrawn on every slider `input` event
   (assets/js/command-center.js `renderChart`) rather than CSS/JS-animated
   - the redraw-per-input already reads as a live, continuous update while
   dragging, with no separate animation to gate behind
   prefers-reduced-motion. */
.hcc-chart-container { padding: 1rem 1.1rem 0.5rem; }

.hcc-chart { display: block; width: 100%; height: auto; max-width: 100%; overflow: visible; }

.hcc-chart__grid line {
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 1;
}

.hcc-chart__axis-labels text {
  fill: var(--text-faint);
  font-size: 9px;
  font-family: inherit;
}

.hcc-chart__window {
  fill: rgba(47, 217, 196, 0.10);
  stroke: rgba(47, 217, 196, 0.28);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.hcc-chart__curve {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hcc-chart__peak-line {
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1.25;
  stroke-dasharray: 4 3;
}

.hcc-chart__peak-dot {
  fill: #fff;
  stroke: var(--risk-high);
  stroke-width: 2;
}

.hcc-chart__peak-label {
  fill: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.hcc-legend-dot--window {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 2px;
  margin-right: 0.4rem;
  background: rgba(47, 217, 196, 0.18);
  border: 1px dashed rgba(47, 217, 196, 0.6);
}

/* ---------- KPI tier colour cue (text + colour, never colour alone) ----------
   Scoped with the .hcc-dashboard-section ancestor (specificity (0,2,1))
   rather than a bare class, so it reliably beats both ".forecast-card
   strong" and ".insight-card strong" (each (0,1,1)) regardless of which
   one is later in the stylesheet - a plain ".hcc-tier-high strong" /
   "strong.hcc-tier-high" (0,1,1) would tie with those and silently lose
   to whichever rule happens to come after it in source order. */
.hcc-dashboard-section strong.hcc-tier-low { color: var(--accent); }
.hcc-dashboard-section strong.hcc-tier-moderate { color: var(--risk-medium); }
.hcc-dashboard-section strong.hcc-tier-high { color: var(--risk-high); }
.hcc-dashboard-section strong.hcc-tier-critical { color: #ff8a8a; }

/* ---------- Operational Summary: KPI grid + recommendation, one panel ----------
   Alert Level and Recommended Management Action used to be two full
   .app-panel cards stacked in the right column - reliably the thing that
   needed the deepest scroll to reach. Merged into one compact panel: the
   KPI grid (with the alert chip in the panel head) followed by a small
   labeled recommendation block, not a second card with its own head. */
.hcc-summary-recommendation {
  padding-top: 0.85rem;
  border-top: 1px solid var(--line-soft);
}

.hcc-summary-recommendation__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.hcc-summary-recommendation__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.hcc-recommendation-text {
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text);
  margin: 0;
}

/* ---------- Procurement Cost Outlook (below the forecast chart) ----------
   A fixed 2-column tile grid (not the KPI panel's auto-fit) so all four
   figures read as one compact 2x2 block rather than stacking tall - the
   "Avoidance" tile keeps its accent tint (formerly a full-width
   highlighted callout row) but sized like its siblings. */
.hcc-cost-metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin: 0.6rem 0 0.8rem;
}

.hcc-cost-metrics-grid .forecast-card { padding: 0.65rem 0.75rem; }

.forecast-card--accent {
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

.forecast-card--accent strong { color: var(--accent); }

.hcc-cost-insight { font-size: 0.82rem; color: var(--text-muted); margin: 0; }

/* ---------- Secondary row: Procurement Timing + Bed/Staff Readiness ---------- */
.hcc-secondary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.75rem;
}

.hcc-procurement-stats { margin-bottom: 1.1rem; }

.hcc-procurement-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 0.9rem;
}

.hcc-procurement-action__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.hcc-procurement-insight { font-size: 0.85rem; color: var(--text-muted); margin: 0; }

.hcc-readiness-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}

@media (max-width: 1080px) {
  .app-grid--hcc { grid-template-columns: 1fr 1fr; }
  .app-grid--hcc > .app-panel--controls { grid-column: 1; grid-row: 1 / 3; }
  .app-grid--hcc > .app-panel--chart { grid-column: 2; grid-row: 1; }
  .app-grid--hcc > .app-panel--cost { grid-column: 2; grid-row: 2; }
  .app-grid--hcc > .app-panel--summary { grid-column: 1 / -1; grid-row: 3; }
  .app-grid--hcc .app-panel--summary .forecast-panel { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

@media (max-width: 900px) {
  .app-grid--hcc { grid-template-columns: 1fr; }
  .app-grid--hcc > .app-panel--controls,
  .app-grid--hcc > .app-panel--chart,
  .app-grid--hcc > .app-panel--cost,
  .app-grid--hcc > .app-panel--summary {
    grid-column: auto;
    grid-row: auto;
  }
  .hcc-secondary-grid { grid-template-columns: 1fr; }
  .hcc-readiness-cards { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .hcc-readiness-cards { grid-template-columns: 1fr; }
  .hcc-procurement-action { flex-direction: column; align-items: flex-start; }
}

/* ---------- Influenza dashboard: 3-column app grid ---------- */
.app-grid--influenza {
  grid-template-columns: minmax(220px, 0.85fr) minmax(0, 1.5fr) minmax(220px, 0.95fr);
}

.app-panel--controls { display: flex; flex-direction: column; }

.influenza-controls--stacked {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 1.25rem;
}

.app-panel--chart { min-width: 0; }

.app-grid__insights {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.insight-card {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.insight-card span { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); }
.insight-card strong { font-size: 1.1rem; color: var(--accent); }
.insight-card small { font-size: 0.72rem; color: var(--text-faint); }

/* ---------- Regional status grid ---------- */
.regional-status { margin-bottom: 1.75rem; }
.regional-status .app-panel__head { margin-bottom: 1rem; }

.regional-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}

.region-status-card {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.region-status-card__name {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.region-status-card__value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.region-status-card__trend { font-size: 0.78rem; }
.region-status-card__trend--up { color: var(--risk-high); }
.region-status-card__trend--down { color: var(--accent); }
.region-status-card__trend--flat { color: var(--text-faint); }

.region-status-card[data-status="elevated"] { border-color: rgba(239, 68, 68, 0.4); }
.region-status-card.is-selected { border-color: var(--accent-line); box-shadow: 0 0 0 1px rgba(47, 217, 196, 0.15); }

/* Extra tiers reused by the Hospital Command Center's department grid
   (alongside the Influenza demo's normal/elevated pair above). */
.region-status-card[data-status="moderate"] { border-color: rgba(245, 166, 35, 0.4); }
.region-status-card[data-status="high"] { border-color: rgba(239, 68, 68, 0.4); }
.region-status-card[data-status="critical"] { border-color: rgba(185, 28, 28, 0.6); box-shadow: 0 0 0 1px rgba(185, 28, 28, 0.18); }

/* ---------- Responsive: app dashboards ---------- */
@media (max-width: 1080px) {
  .app-grid--influenza { grid-template-columns: 1fr 1fr; }
  .app-grid--influenza .app-grid__insights { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .app-grid--influenza .app-grid__insights .insight-card { flex: 1 1 200px; }
}

@media (max-width: 900px) {
  .app-grid { grid-template-columns: 1fr; }
  .app-grid--influenza { grid-template-columns: 1fr; }
  .shap-bar { grid-template-columns: 96px 1fr 40px; }
}

@media (max-width: 640px) {
  .model-info-bar { grid-template-columns: 1fr 1fr; }
  .risk-readout strong { font-size: 2.1rem; }
  .regional-status-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* ---------- Footer: cookie settings link ---------- */
.footer__legal-link {
  color: var(--text-faint);
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition);
}

.footer__legal-link:hover { color: var(--accent); }

/* ---------- Cookie consent banner ----------
   Sits above everything else on the site (highest z-index in the
   stylesheet is the skip-link's 1000), fixed to the viewport, shown/
   hidden purely by toggling the `hidden` attribute from cookies.js -
   the entrance transition below only plays because the element goes
   from `hidden` (display:none, so no transition) to visible with
   .is-visible added a frame later. */
.cookie-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  display: flex;
  justify-content: center;
  padding: 1.25rem;
  pointer-events: none;
}

.cookie-consent[hidden] { display: none; }

.cookie-consent__panel {
  pointer-events: auto;
  width: 100%;
  max-width: 720px;
  background: linear-gradient(160deg, rgba(10, 21, 38, 0.92), rgba(7, 15, 31, 0.92));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift), 0 0 40px rgba(47, 217, 196, 0.10);
  padding: 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 320ms ease, transform 320ms ease;
}

.cookie-consent.is-visible .cookie-consent__panel {
  opacity: 1;
  transform: translateY(0);
}

.cookie-consent__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.cookie-consent__text {
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.cookie-consent__note {
  font-size: 0.76rem;
  color: var(--text-faint);
  margin-top: 0.6rem;
}

.cookie-consent__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
}

.cookie-consent__btn {
  padding: 0.65rem 1.3rem;
  font-size: 0.86rem;
}

/* "Learn more" reads as a quieter text link rather than a third button,
   and sits flush left (margin-right: auto) while Customize/Reject/
   Accept stay grouped on the right via the container's justify-end. */
.cookie-consent__link {
  margin-right: auto;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition);
}

.cookie-consent__link:hover { color: var(--text); }

/* ---------- Privacy & Cookie Center ----------
   Same fixed-overlay/backdrop/panel pattern as the old single-purpose
   cookie modal it replaces, just wider (room for a tab bar) and with
   the toggle content demoted into its own "Cookie settings" tab
   alongside Overview / Privacy policy / Your rights / Contact. */
.privacy-center {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.privacy-center[hidden] { display: none; }

.privacy-center__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 14, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 240ms ease;
}

.privacy-center.is-visible .privacy-center__backdrop { opacity: 1; }

.privacy-center__panel {
  position: relative;
  width: 100%;
  max-width: 880px;
  max-height: min(720px, 90vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(160deg, var(--bg-850), var(--bg-900));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity 240ms ease, transform 240ms ease;
}

.privacy-center.is-visible .privacy-center__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.privacy-center__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.75rem 2rem 1.25rem;
  border-bottom: 1px solid var(--line-soft);
}

.privacy-center__title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.4rem;
}

.privacy-center__subtitle {
  font-size: 0.84rem;
  color: var(--text-faint);
  max-width: 52ch;
}

.privacy-center__close {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--text-faint);
  transition: color var(--transition), background var(--transition);
}

.privacy-center__close:hover { color: var(--text); background: var(--glass-strong); }

.privacy-center__tabbar {
  display: flex;
  gap: 0.3rem;
  padding: 0.85rem 2rem 0;
  overflow-x: auto;
  flex-shrink: 0;
}

.privacy-tab {
  padding: 0.6rem 1.05rem;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border: none;
  background: transparent;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-faint);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}

.privacy-tab:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }

.privacy-tab.is-active {
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.privacy-center__body {
  padding: 1.75rem 2rem 2rem;
  overflow-y: auto;
}

.privacy-panel[hidden] { display: none; }
.privacy-panel.is-active { animation: subsectionFade 280ms ease; }

.privacy-panel__lead {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 1.25rem;
}

.privacy-panel__heading {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  margin: 1.5rem 0 0.6rem;
}

.privacy-panel__heading:first-child { margin-top: 0; }

.privacy-panel__text {
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.privacy-panel__note {
  margin-top: 1.25rem;
  padding: 0.85rem 1rem;
  background: rgba(245, 166, 35, 0.06);
  border: 1px solid rgba(245, 166, 35, 0.22);
  border-left: 3px solid #f5a623;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.privacy-panel__link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.privacy-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.privacy-list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.privacy-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.privacy-list li strong { color: var(--text); }

.privacy-contact-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-top: 1.25rem;
}

.privacy-contact-list li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: var(--glass);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  font-size: 0.88rem;
}

.privacy-contact-list li span {
  min-width: 70px;
  color: var(--text-faint);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.privacy-panel__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.cookie-category {
  padding: 1rem 1.1rem;
  background: var(--glass);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  margin-bottom: 0.9rem;
}

.cookie-category:last-of-type { margin-bottom: 1.75rem; }

.cookie-category__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.cookie-category__title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
}

.cookie-category__desc {
  font-size: 0.8rem;
  color: var(--text-faint);
  line-height: 1.55;
  margin-top: 0.5rem;
}

/* Toggle switch: a visually-hidden checkbox drives an inert track/thumb
   pair via :checked, so it stays natively keyboard- and screen-reader-
   operable without any JS beyond reading .checked on save. */
.cookie-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
}

.cookie-toggle input {
  position: absolute;
  opacity: 0;
  width: 44px;
  height: 24px;
  margin: 0;
  cursor: pointer;
}

.cookie-toggle__track {
  display: block;
  width: 44px;
  height: 24px;
  background: var(--bg-700);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: background var(--transition), border-color var(--transition);
}

.cookie-toggle__thumb {
  display: block;
  width: 18px;
  height: 18px;
  margin: 2px;
  background: var(--text-faint);
  border-radius: 50%;
  transition: transform var(--transition), background var(--transition);
}

.cookie-toggle input:checked ~ .cookie-toggle__track {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  border-color: var(--accent-line);
}

.cookie-toggle input:checked ~ .cookie-toggle__track .cookie-toggle__thumb {
  transform: translateX(20px);
  background: #04141a;
}

.cookie-toggle input:focus-visible ~ .cookie-toggle__track {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.cookie-toggle--disabled { cursor: not-allowed; opacity: 0.65; }
.cookie-toggle--disabled input { cursor: not-allowed; }

/* ---------- Footer: legal links row ---------- */
.footer__legal-links {
  display: flex;
  gap: 1.25rem;
}

@media (max-width: 640px) {
  .cookie-consent { padding: 0.85rem; }

  .cookie-consent__panel { padding: 1.25rem 1.35rem; border-radius: var(--radius); }

  .cookie-consent__actions { flex-direction: column-reverse; align-items: stretch; }
  .cookie-consent__actions .cookie-consent__btn { width: 100%; }
  .cookie-consent__actions .cookie-consent__link { text-align: center; padding: 0.4rem 0; }

  .privacy-center { padding: 0; }

  .privacy-center__panel {
    max-width: none;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
  }

  .privacy-center__header { padding: 1.5rem 1.25rem 1rem; }
  .privacy-center__tabbar { padding: 0.75rem 1.25rem 0; }
  .privacy-center__body { padding: 1.5rem 1.25rem 2rem; }

  .privacy-panel__actions { flex-direction: column-reverse; align-items: stretch; }
  .privacy-panel__actions .cookie-consent__btn { width: 100%; }

  .privacy-contact-list li { flex-direction: column; gap: 0.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-consent__panel, .privacy-center__backdrop, .privacy-center__panel {
    transform: none;
  }
}