/* =============================================================
   Medichive — homepage: body atlas hero + mobile trim
   Loaded ONLY by the homepage, after home.css + dark.css.

   The interactive 3D figure that opens the homepage. Uses the
   site's own tokens throughout (dark.css has already redefined
   them), so this file carries layout and atlas-specific
   components only — no second palette.

   THE LINE THIS DESIGN DOES NOT CROSS
   Futuristic, but this is a health company. No targeting
   reticles, no hologram flicker or glitch, no particle fields,
   no fake "SCANNING..." text, no wireframe body, no sound. One
   accent glow (green), one AI colour (blue), and pulses ONLY
   where the record actually carries a flag. The data always
   looks like a medical record set in good typography.
   ============================================================= */

/* Atlas surfaces follow the page theme: glass over light, glass over
   navy in dark. Previously these were hardcoded dark, which is what left
   dark cards floating on the light page. */
:root {
  --atlas-chip: rgba(255, 255, 255, 0.84);
  --atlas-panel: rgba(255, 255, 255, 0.88);
  --atlas-contact: rgba(8, 48, 31, 0.18);
  --atlas-stage-glow: rgba(54, 199, 129, 0.07);
}
.theme-dark {
  --atlas-chip: rgba(6, 23, 43, 0.72);
  --atlas-panel: rgba(10, 36, 64, 0.74);
  --atlas-contact: rgba(0, 0, 0, 0.55);
  --atlas-stage-glow: rgba(92, 219, 149, 0.07);
}

/* .hero sets overflow:hidden, which makes it a scroll container and stops
   the stage sticking — at BOTH breakpoints. clip clips without creating a
   scroll container. */
.hero-atlas { overflow: hidden; overflow: clip; }

.hero-atlas {
  padding-top: clamp(28px, 3.6vw, 52px);
  padding-bottom: clamp(36px, 5vw, 64px);
}
/* The copy column carries more than the old hero did (lead + eight region
   chips + actions + trust), so the headline runs smaller and the column
   wider than the site default — otherwise the hero doesn't fit a fold. */
.hero-atlas .hero-grid { grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); align-items: center; }
.hero-atlas .hero-grid > * { min-width: 0; }
.hero-atlas .hero-copy { max-width: 580px; }
.hero-atlas h1 { font-size: clamp(36px, 4.2vw, 60px); margin-top: 18px; letter-spacing: -0.032em; }
.hero-atlas .hero-actions { margin-top: 22px; }
/* Audience router: text links, deliberately ranked below the nav's
   primary button and below the region chips. Tap targets still clear
   44px via the vertical padding. */
.hero-alt {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 2px 12px; margin-top: 26px; font-size: 14px;
}
.hero-alt .ha-q { color: var(--muted); }
.hero-alt .ha-sep { color: var(--faint); }
.hero-alt a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 2px; font-weight: 600; color: var(--ink-soft);
  transition: color .2s var(--ease);
}
.hero-alt a svg {
  width: 13px; height: 13px; opacity: 0.65;
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.hero-alt a:hover { color: var(--accent); }
.hero-alt a:hover svg { transform: translateX(3px); opacity: 1; }
.hero-atlas .hero-trust { margin-top: 20px; }
.hero-atlas .legend { margin-top: 20px; }

/* a faint grid, dissolved toward the edges. Never animated. */
.hero-atlas::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(92, 219, 149, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(92, 219, 149, 0.045) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(760px 580px at 72% 48%, #000 8%, transparent 76%);
  mask-image: radial-gradient(760px 580px at 72% 48%, #000 8%, transparent 76%);
}

/* -------------------------------------------------------------
   Region legend — eight real buttons, and the accessible path
   ------------------------------------------------------------- */
.legend { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.legend-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 14px 8px 11px;
  border: 1px solid var(--border); border-radius: 100px;
  background: var(--surface);
  color: var(--body); font-size: 13.5px; font-weight: 500;
  transition: border-color .2s var(--ease), background .2s var(--ease),
              color .2s var(--ease), transform .2s var(--ease);
}
.legend-btn .dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--hue, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hue, var(--accent)) 18%, transparent);
}
.legend-btn:hover {
  border-color: color-mix(in srgb, var(--hue) 55%, transparent);
  color: var(--ink); transform: translateY(-1px);
}
.legend-btn[aria-pressed="true"] {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--hue) 70%, transparent);
  background: color-mix(in srgb, var(--hue) 14%, var(--surface));
}
.legend-btn .flagdot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--amber);
  flex: none; margin-left: 1px;
}
.legend-note {
  margin-top: 12px; font-family: var(--mono); font-size: 11.5px;
  color: var(--faint); letter-spacing: 0.02em;
}
.legend-note .note-short { display: none; }

/* -------------------------------------------------------------
   Stage
   ------------------------------------------------------------- */
.stage {
  position: relative; z-index: 1;
  height: min(72svh, 640px); min-height: 420px;
  border-radius: var(--r-xl);

}
/* In light mode the stage simply blends into the page — no dark card.
   The scene itself is re-lit and re-coloured in atlas.js to suit. */
html:not(.theme-dark) .stage {
  background-image: radial-gradient(560px 600px at 58% 44%, rgba(54, 199, 129, 0.07), transparent 72%);
}
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* CSS contact shadow — cheaper and softer than a shadow map */
.stage::after {
  content: ""; position: absolute; z-index: 0;
  left: 50%; bottom: 6%; transform: translateX(-50%);
  width: 30%; height: 26px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--atlas-contact), transparent);
  filter: blur(6px); pointer-events: none;
}

/* loading skeleton, and the no-WebGL figure */
.stage-fallback {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.stage-fallback img { height: 86%; width: auto; opacity: 0.13; }
.stage.ready .stage-fallback { opacity: 0; transition: opacity .5s var(--ease); }
.stage.nogl .stage-fallback { pointer-events: auto; opacity: 1; }
.stage.nogl .stage-fallback img { opacity: 0.32; }
/* No camera to pan on the fallback path, so the silhouette itself steps out
   from under the panel. No transition: the chips are positioned from this
   element's rect, and an animated rect would leave them lagging. */
@media (min-width: 941px) {
  .stage.nogl.sel .stage-fallback { padding-right: min(400px, 62%); }
}

/* projected label chips — real buttons riding on the canvas */
.labels { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.lbl {
  position: absolute; transform: translate(-50%, -50%); pointer-events: auto;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 8px; border-radius: 100px;
  font-size: 12.5px; font-weight: 500; color: var(--body);
  background: var(--atlas-chip);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border); white-space: nowrap;
  transition: color .2s var(--ease), border-color .2s var(--ease),
              background .2s var(--ease), opacity .2s var(--ease);
}
.lbl .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hue); flex: none; }
.lbl .cnt { font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
.lbl:hover, .lbl.hot {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--hue) 60%, transparent);
  background: color-mix(in srgb, var(--hue) 12%, var(--atlas-chip));
}
.lbl.on {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--hue) 75%, transparent);
  background: color-mix(in srgb, var(--hue) 18%, var(--atlas-chip));
}
.lbl.dim { opacity: 0.34; }

/* leader line from marker to panel */
.leader { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: visible; }
.leader path {
  fill: none; stroke: var(--hue, var(--accent)); stroke-width: 1.25; opacity: 0.55;
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
  transition: stroke-dashoffset .24s var(--ease);
}
.leader.draw path { stroke-dashoffset: 0; }

.persona {
  position: absolute; left: 14px; bottom: 12px; z-index: 4;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--faint); pointer-events: none;
}
.persona b { color: var(--body); font-weight: 500; }
.persona .demo-tag { color: var(--amber); }
/* while a region is open the panel owns the right side */
/* Keep the strip inside the gutter the panel leaves free, whatever the
   stage width — the panel is min(400px, 62%) wide on the right. */
.stage.sel .persona {
  max-width: calc(38% - 30px); line-height: 1.5; top: 10px; bottom: auto;
}

.hint {
  position: absolute; right: 14px; bottom: 12px; z-index: 4;
  font-family: var(--mono); font-size: 11px; color: var(--faint);
  pointer-events: none; transition: opacity .4s var(--ease);
}
.hint.gone { opacity: 0; }

/* -------------------------------------------------------------
   Region panel — card over the stage; bottom sheet on mobile
   ------------------------------------------------------------- */
.panel {
  position: absolute; z-index: 20;
  top: 14px; right: 14px; bottom: 14px; width: min(400px, 62%);
  display: flex; flex-direction: column;
  background: var(--atlas-panel);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-float), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  opacity: 0; transform: translateX(24px); pointer-events: none;
  transition: opacity .42s var(--ease), transform .42s var(--ease);
}
.panel.open { opacity: 1; transform: none; pointer-events: auto; }

.panel-head {
  position: relative; flex: none;
  padding: 16px 46px 14px 18px;
  border-bottom: 1px solid var(--border);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: color-mix(in srgb, var(--hue) 10%, transparent);
}
.panel-head::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--hue), transparent 85%);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.panel-head h3 { font-size: 18px; letter-spacing: -0.02em; color: var(--ink); }
.panel-sub { margin-top: 4px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.panel-close {
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--muted); border: 1px solid var(--border);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.panel-close:hover { color: var(--ink); border-color: var(--border-strong); }
.panel-close svg { width: 14px; height: 14px; }

.panel-body { flex: 1; overflow-y: auto; padding: 4px 18px 18px; overscroll-behavior: contain; }
.panel-body::-webkit-scrollbar { width: 8px; }
.panel-body::-webkit-scrollbar-thumb { background: rgba(140, 190, 225, 0.16); border-radius: 8px; }

.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 100px;
}
.status-pill.flagged { color: var(--amber); background: var(--amber-wash); }
.status-pill.watch { color: var(--ai); background: var(--ai-wash); }
.status-pill.ok { color: var(--accent); background: var(--accent-wash); }

.panel .sec { padding-top: 16px; }
.panel .sec + .sec { border-top: 1px solid var(--border); margin-top: 16px; }
.panel .sec h4 {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 10px;
}

.cond { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; }
.cond + .cond { border-top: 1px dashed var(--border); }
.cond .cx { width: 7px; height: 7px; border-radius: 50%; margin-top: 7px; flex: none; }
.cond.active .cx { background: var(--amber); }
.cond.watch .cx { background: var(--ai); }
.cond.resolved .cx { background: var(--faint); }
.cond-n { color: var(--ink); font-weight: 500; font-size: 14.5px; }
.cond.resolved .cond-n { color: var(--muted); }
.cond-m { font-family: var(--mono); font-size: 11px; color: var(--faint); margin-top: 2px; }
.cond-note { font-size: 13px; color: var(--body); margin-top: 3px; }

.an { padding: 9px 0; }
.an + .an { border-top: 1px dashed var(--border); }
.an-top { display: flex; align-items: baseline; gap: 10px; }
.an-name { color: var(--ink); font-weight: 500; font-size: 14.5px; flex: 1; min-width: 0; }
.an-val { font-family: var(--mono); font-size: 15px; color: var(--ink); font-weight: 500; }
.an-unit { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.flag { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.08em; padding: 2px 6px; border-radius: 4px; }
.flag.HIGH { color: var(--amber); background: var(--amber-wash); }
.flag.LOW { color: var(--rose); background: var(--rose-wash); }
.an-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 4px; font-family: var(--mono); font-size: 10.5px; color: var(--faint);
}
.an-row { display: flex; align-items: center; gap: 12px; margin-top: 7px; }
.spark { flex: none; }
.spark .band { fill: var(--accent-wash); }
.spark .ln { fill: none; stroke: var(--hue); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.spark .pt { fill: var(--hue); }
.an-src {
  font-family: var(--mono); font-size: 10.5px; color: var(--muted);
  border-bottom: 1px dotted var(--border); cursor: pointer; text-align: left;
  transition: color .2s var(--ease);
}
.an-src:hover { color: var(--accent); }
.an-note { font-size: 12.5px; color: var(--muted); margin-top: 5px; font-style: italic; }

.kv { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 0; }
.kv + .kv { border-top: 1px dashed var(--border); }
.kv-n { color: var(--body); font-size: 14px; }
.kv-v { font-family: var(--mono); font-size: 14px; color: var(--ink); white-space: nowrap; }
.kv-s { font-family: var(--mono); font-size: 10.5px; color: var(--faint); }

.med { padding: 7px 0; }
.med + .med { border-top: 1px dashed var(--border); }
.med-n { color: var(--ink); font-weight: 500; font-size: 14.5px; }
.med-d { font-family: var(--mono); font-size: 11.5px; color: var(--body); margin-top: 2px; }
.med-p { font-family: var(--mono); font-size: 10.5px; color: var(--faint); margin-top: 2px; }

.doc {
  display: flex; align-items: center; gap: 10px; padding: 7px 0;
  border-radius: var(--r-xs); transition: background .3s var(--ease);
}
.doc + .doc { border-top: 1px dashed var(--border); }
.doc.hit { background: color-mix(in srgb, var(--hue) 16%, transparent); }
.doc-ic {
  width: 26px; height: 26px; border-radius: var(--r-xs); flex: none;
  display: grid; place-items: center;
  background: rgba(140, 190, 225, 0.08); color: var(--muted);
}
.doc-ic svg { width: 13px; height: 13px; }
.doc-t { flex: 1; min-width: 0; color: var(--body); font-size: 13.5px; }
.doc-m { font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
.tag-demo {
  font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.09em;
  color: var(--amber); background: var(--amber-wash);
  padding: 2px 5px; border-radius: 4px; flex: none;
}

/* AI-marked line — blue, always visually marked, always advisory */
.ai-note {
  margin-top: 16px; padding: 11px 13px; border-radius: var(--r-sm);
  background: var(--ai-wash); border: 1px solid rgba(91, 150, 245, 0.24);
}
.ai-note .ai-h {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ai);
  margin-bottom: 5px;
}
.ai-note .ai-h::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ai); }
.ai-note p { font-size: 13.5px; color: var(--body); }

.panel-foot {
  flex: none; padding: 10px 18px; border-top: 1px solid var(--border);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: var(--faint);
}
.panel .empty { font-size: 13.5px; color: var(--muted); font-style: italic; padding: 4px 0 8px; }

/* -------------------------------------------------------------
   Responsive
   ------------------------------------------------------------- */
@media (max-width: 940px) {
  /* Flatten the copy block so the figure sits between the lead and the
     region chips. align-items must be stretch — inherited centring would
     size .stage to its content, and its children are all absolutely
     positioned, which means zero width and an invisible canvas. */
  .hero-atlas .hero-grid {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 0; grid-template-columns: none;
  }
  /* The sticky-column wrappers only exist for the desktop scrollytelling
     layout. On a phone they must dissolve, or the ordering below applies
     inside the wrong box and the figure lands underneath the buttons. */
  .hero-atlas .hero-left,
  .hero-atlas .stage-wrap { display: contents; }
  .hero-atlas .hero-copy { display: contents; max-width: none; }
  .hero-atlas .hero-copy > .eyebrow { order: 1; align-self: flex-start; }
  .hero-atlas h1 { order: 2; margin-top: 14px; line-height: 1.08; }
  .hero-atlas .lead { order: 3; max-width: none; }
  /* The figure takes the space the deleted buttons freed, and its chips
     and hint tighten around it so they read as its controls rather than
     as three more rows. The router then gets a clear breath of its own. */
  /* One column, same behaviour: the figure sticks under the nav while the
     steps scroll beneath it, and lets go when the steps run out — which is
     what .stage-wrap is for, since sticky stops at its containing block. */
  .hero-atlas .stage-wrap { order: 4; display: block; }
  .hero-atlas .stage {
    position: sticky; top: calc(var(--nav-h, 64px) + 8px);
    height: 46svh; min-height: 300px; margin-top: 20px; z-index: 3;
    /* Opaque in one column: the steps scroll THROUGH this space, and over a
       transparent stage the text runs straight across the figure's legs.
       Same colour as the page, so it still reads as blended. */
    background-color: var(--bg);
    background-image:
      radial-gradient(460px 480px at 52% 46%, var(--atlas-stage-glow), transparent 72%);
  }
  /* soften the line where a step emerges from under the figure */
  .hero-atlas .stage::before {
    content: ""; position: absolute; z-index: 4;
    left: 0; right: 0; bottom: -26px; height: 26px;
    background: linear-gradient(var(--bg), transparent);
    pointer-events: none;
  }
  .hero-atlas .scrolly { display: block; margin-top: 4px; }
  /* The figure occupies the top ~46svh once stuck, so a step's text has to
     live in the band beneath it — centring it in the box puts it behind
     the figure's legs. Anchored to the bottom of each step instead. */
  .hero-atlas .scrolly .step {
    min-height: 56svh;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding-bottom: 7svh;
    opacity: 0.32; transition: opacity .45s var(--ease);
  }
  .hero-atlas .scrolly { padding-bottom: 6svh; }
  .hero-atlas .scrolly .step.on { opacity: 1; }
  .hero-atlas .scrolly .step h3 { font-size: clamp(21px, 6vw, 27px); margin-top: 12px; }
  .hero-atlas .scrolly .step p { margin-top: 10px; font-size: 15.5px; max-width: 40ch; }
  /* .hero-atlas .legend sets 20px for desktop and outranks a bare .legend,
     so the mobile override has to match that specificity. */
  .hero-atlas .legend {
    order: 5; margin-top: 8px; flex-wrap: nowrap; overflow-x: auto;
    padding-bottom: 6px; scrollbar-width: none;
  }
  .legend::-webkit-scrollbar { display: none; }
  .legend-btn { flex: none; }
  .hero-atlas .legend-note { order: 6; margin-top: 6px; }
  .hero-atlas .hero-alt { order: 7; margin-top: 28px; justify-content: center; }
  .hero-atlas .hero-trust { order: 9; }

  .panel {
    position: fixed; inset: auto 0 0 0; top: auto; width: auto;
    height: 88svh; max-height: 88svh;
    border-radius: var(--r-xl) var(--r-xl) 0 0; border-bottom: none;
    transform: translateY(100%);
    transition: transform .42s var(--ease), opacity .3s var(--ease);
  }
  .panel.open { transform: translateY(42%); }
  .panel.open.tall { transform: translateY(0); }
  .panel-head { padding-top: 22px; cursor: grab; touch-action: none; }
  .panel-head::after {
    content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
    width: 38px; height: 4px; border-radius: 100px; background: var(--border-strong);
  }
  .leader, .hint { display: none; }
  .persona, .stage.sel .persona { top: 8px; bottom: auto; max-width: 62%; line-height: 1.5; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-atlas .hero-copy > *, .stage { animation: none !important; }
}


/* =============================================================
   Homepage mobile trim
   On a phone the landing page is meant to be something you play
   with, not something you read. The interactive cards stay; the
   prose around them does not. Anyone who wants the detail has
   the audience pages in the nav.

   Hidden here, never deleted — desktop still gets all of it, and
   the copy stays in the document for crawlers.
   ============================================================= */
@media (max-width: 940px) {
  .home .section { padding: clamp(44px, 8vw, 72px) 0; }
  .home .section h2 { margin-bottom: 18px; }

  /* hero furniture: the eyebrow and the trust line are both text the
     phone doesn't need — the trust strip right below repeats it, and
     "Esc to close" means nothing without a keyboard */
  .home .hero-atlas > .wrap > .hero-copy > .eyebrow,
  .home .hero-atlas .eyebrow,
  .home .hero-atlas .hero-trust { display: none; }
  .legend-note .note-long { display: none; }
  .legend-note .note-short { display: inline; }
}


/* =============================================================
   Collapsed section prose
   The landing page leads with the figure. Each section keeps its
   heading and its interactive card; the writing sits behind a
   disclosure, closed by default. <details> rather than a JS
   accordion so the text stays in the document, findable by
   in-page search and by crawlers.
   ============================================================= */
.sec-more { margin-top: 10px; }
.sec-more > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--accent);
  padding: 6px 0;
}
.sec-more > summary::-webkit-details-marker { display: none; }
.sec-more > summary::after {
  content: ""; width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s var(--ease);
}
.sec-more[open] > summary::after { transform: rotate(-135deg) translateY(1px); }
.sec-more > summary:hover { color: var(--accent-bright); }
.sec-more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.sec-more .lead { margin-top: 14px; }
.sec-more .feat-list { margin-top: 18px; }

/* The FAQ lives in the footer now, immediately above the legal divider.
   A full-width band for one collapsed disclosure was almost entirely
   empty space; here it costs a single line until someone opens it. */
.footer-faq { margin: 4px 0 26px; }
.footer-faq > summary { font-size: 14.5px; }
.footer-faq .faq { margin: 16px 0 0; max-width: 820px; }  /* .faq centres itself in its old section */


/* =============================================================
   Scrollytelling hero
   One side stays and changes, the other side goes down: the stage
   sticks to the viewport while the copy column scrolls past it,
   and each step takes the figure over as it crosses the middle —
   turning to its region, lighting it, opening its record.

   Desktop only. On a phone there is no room for two columns, and
   the landing page there is deliberately short.
   ============================================================= */
@media (min-width: 941px) {
  /* stage-wrap only exists to bound the sticky range on mobile; on desktop
     it dissolves so the stage and the steps can sit in different columns */
  .hero-atlas .stage-wrap { display: contents; }
  .hero-atlas .hero-grid { align-items: start; }
  .hero-atlas .hero-copy { grid-column: 1; grid-row: 1; }
  .hero-atlas .scrolly { grid-column: 1; grid-row: 2; margin-top: 30px; }
  .hero-atlas .stage {
    grid-column: 2; grid-row: 1 / span 2; align-self: start;
    position: sticky;
    top: calc(var(--nav-h, 64px) + 10px);
    height: calc(100svh - var(--nav-h, 64px) - 40px);
  }
  .scrolly .step {
    min-height: 76svh;
    display: flex; flex-direction: column; justify-content: center;
    opacity: 0.34;
    transition: opacity .45s var(--ease);
  }
  .scrolly .step.on { opacity: 1; }
  .scrolly .step-tag {
    display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--muted);
  }
  .scrolly .step-tag::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--hue, var(--accent));
  }
  .scrolly .step h3 {
    font-family: var(--serif); font-weight: 500; letter-spacing: -0.028em;
    font-size: clamp(24px, 2.5vw, 36px); margin-top: 14px; color: var(--ink);
  }
  .scrolly .step p {
    margin-top: 12px; font-size: 16.5px; line-height: 1.6;
    color: var(--body); max-width: 44ch;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* must match .hero-atlas .scrolly .step, or the dimming wins and the
     inactive steps stay unreadable */
  .hero-atlas .scrolly .step, .scrolly .step { opacity: 1; }
}