/*
 * dynergia.ch — one stylesheet, no JavaScript, no third-party requests.
 *
 * Tokens transcribed from the Claude Design export (tokens/*.css) so the
 * static build matches the SPA's rendered design. Palette ROLES are fixed:
 *
 *   navy  #1A4A73  headings, footer ground
 *   mid   #2E6DA4  links, channel numerals, eyebrows
 *   cyan  #2FB8E8  DATA ACCENTS ONLY — the hero sparkline and its arrow.
 *                  Never a background, never a button. A brand colour used
 *                  as decoration stops reading as data.
 *   ice   #DFF0F5  the canonical band and the "negative"/limits boxes
 *   ink   #1F2933  body text on a white ground
 */

:root {
  --navy: #1A4A73;
  --mid: #2E6DA4;
  --cyan: #2FB8E8;
  --ice: #DFF0F5;
  --ice-deep: #C6E4EC;
  --ink: #1F2933;
  --ground: #FFFFFF;
  --muted: #52616B;
  --faint: #7B8794;
  --line: #DCE3E8;
  --line-strong: #CBD2D9;

  --font-sans: "IBM Plex Sans", "Source Sans 3", "Helvetica Neue", Arial, sans-serif;

  --fs-display: 44px; --fs-h1: 34px; --fs-h2: 22px; --fs-h3: 17px;
  --fs-body: 16.5px; --fs-body-sm: 15px; --fs-small: 14px;
  --fs-meta: 12.5px; --fs-fine: 11.5px;
  --lh-tight: 1.12; --lh-heading: 1.22; --lh-snug: 1.4; --lh-body: 1.62;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  --pad-x: 32px;
  --measure: 64ch;
  --measure-narrow: 46ch;
  --width-page: 1080px;
  --width-doc: 760px;
}

/* Self-hosted, per the design system's own note that production must not use
   a font CDN. Upstream IBM release (OFL-1.1), not the Google-hosted subset. */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-400.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-600.woff2) format("woff2");
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

h1, h2, h3 { color: var(--navy); margin: 0; letter-spacing: -0.01em; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); font-weight: 600; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); font-weight: 600; }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); font-weight: 600; }
p { margin: 0; }

a { color: var(--mid); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover, a:focus { color: var(--navy); }

img { max-width: 100%; height: auto; }

/* --- layout ------------------------------------------------------------- */

.wrap { max-width: var(--width-doc); margin: 0 auto; padding: var(--sp-16) var(--pad-x) var(--sp-20); }
.wrap-wide { max-width: var(--width-page); margin: 0 auto; padding: var(--sp-16) var(--pad-x) var(--sp-20); }
.stack { display: flex; flex-direction: column; gap: var(--sp-6); }
.stack-sm { display: flex; flex-direction: column; gap: var(--sp-4); }
.stack-lg { display: flex; flex-direction: column; gap: var(--sp-16); }
.narrow { max-width: var(--measure); }

.prose { color: var(--ink); max-width: var(--measure); }
.muted { color: var(--muted); max-width: var(--measure); }
.muted-sm { color: var(--muted); font-size: var(--fs-body-sm); max-width: var(--measure); }
.fine { color: var(--faint); font-size: var(--fs-fine); line-height: var(--lh-snug); }
.lines { display: flex; flex-direction: column; gap: var(--sp-1); }

.heading { display: flex; flex-direction: column; gap: var(--sp-3); }
.heading .lead { color: var(--muted); max-width: var(--measure); }
.eyebrow {
  font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--mid);
}

/* --- nav ---------------------------------------------------------------- */

.nav {
  display: flex; align-items: center; gap: var(--sp-8);
  padding: var(--sp-4) var(--pad-x);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; text-decoration: none; }
.brand img { height: 54px; width: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: var(--sp-6); margin-left: auto; flex-wrap: wrap; }
.nav-links a {
  font-size: var(--fs-body-sm); line-height: 1.3; color: var(--muted);
  text-decoration: none; padding-bottom: 2px; border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--navy); }
.nav-links a.is-active { color: var(--navy); font-weight: 600; border-bottom-color: var(--navy); }

.lang { display: flex; gap: var(--sp-2); font-size: var(--fs-small); color: var(--faint); margin: 0; }
.lang span[aria-current] { color: var(--navy); font-weight: 600; }

/* --- hero --------------------------------------------------------------- */

.hero {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: var(--sp-16); align-items: center;
  padding-top: var(--sp-20); padding-bottom: var(--sp-16);
}
.hero-copy { display: flex; flex-direction: column; gap: var(--sp-6); }
.hero h1 { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: -0.02em; max-width: 20ch; }
.hero-sub { font-size: var(--fs-h3); line-height: var(--lh-body); color: var(--ink); max-width: 56ch; }
.hero-fig { margin: 0; display: flex; flex-direction: column; gap: var(--sp-4); align-items: flex-start; }
.hero-fig figcaption {
  font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--mid); white-space: nowrap;
}

/* Cyan lives here and nowhere else. */
.spark { display: block; overflow: visible; }
.spark-line { fill: none; stroke: var(--cyan); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.spark-dots circle { fill: var(--ground); stroke: var(--cyan); stroke-width: 2; }
.spark-arrow { fill: var(--cyan); }
.spark-weeks {
  display: flex; justify-content: space-between; width: 420px; max-width: 100%;
  font-size: var(--fs-fine); color: var(--faint); font-variant-numeric: tabular-nums;
}

/* --- canonical band ----------------------------------------------------- */

.band { background: var(--ice); padding: var(--sp-8) var(--pad-x); }
.band p {
  max-width: var(--width-doc); margin: 0 auto;
  font-size: var(--fs-h2); line-height: 1.5; letter-spacing: -0.01em;
  color: var(--navy);
}

/* --- content blocks ----------------------------------------------------- */

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); }

.channels { display: flex; flex-direction: column; gap: var(--sp-5); }
.channel { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: start; }
.channel-n { font-size: var(--fs-h2); font-weight: 600; color: var(--mid); font-variant-numeric: tabular-nums; line-height: 1.2; }
.channel p { font-size: var(--fs-body-sm); color: var(--ink); max-width: var(--measure-narrow); margin-top: var(--sp-2); }

.persp { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); }
.persp-col { display: flex; flex-direction: column; gap: var(--sp-3); border-top: 1px solid var(--line-strong); padding-top: var(--sp-4); }
.persp-col p { font-size: var(--fs-body-sm); }

.terms { display: grid; grid-template-columns: 1fr; gap: var(--sp-5) var(--sp-8); }
.terms-2 { grid-template-columns: 1fr 1fr; }
.term { display: flex; flex-direction: column; gap: var(--sp-2); border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.term-t { font-size: var(--fs-h3); font-weight: 600; color: var(--navy); }
.term-d { font-size: var(--fs-body-sm); color: var(--ink); }

/* The "negative" boxes: what this is not / what insurers do not receive.
   With this audience the boundaries are the point, so they carry the
   strongest weight after the hero — ice fill, 2px navy top rule. */
.notice, .limits {
  background: var(--ice);
  border-top: 2px solid var(--navy);
  border-radius: 0 0 4px 4px;
  padding: var(--sp-6);
}
.notice h2 { margin-bottom: var(--sp-4); }
.notice ul, .limits ul { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0; padding-left: 1.1em; }
.notice li, .limits li { margin: 0; }
.notice p { max-width: var(--measure); }

/* --- footer ------------------------------------------------------------- */

.foot { background: var(--navy); color: var(--ice); padding: var(--sp-10) var(--pad-x); }
.foot-in { max-width: var(--width-page); margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-5); }
.foot-purpose { font-size: var(--fs-body-sm); color: var(--ice); max-width: var(--measure); }
.foot-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-small); color: var(--ice-deep);
  border-top: 1px solid rgba(223, 240, 245, .22); padding-top: var(--sp-4);
}
.foot-meta a { color: var(--ice); }
.foot-meta a:hover { color: #FFFFFF; }
.foot-meta span[aria-hidden] { opacity: .5; }

/* --- narrow screens ----------------------------------------------------- */

@media (max-width: 860px) {
  :root { --pad-x: 20px; --fs-display: 32px; --fs-h1: 27px; --fs-h2: 20px; }
  .hero, .two-col { grid-template-columns: 1fr; gap: var(--sp-8); }
  .persp, .terms-2 { grid-template-columns: 1fr; }
  .wrap, .wrap-wide { padding-top: var(--sp-12); padding-bottom: var(--sp-16); }
  .nav { flex-wrap: wrap; gap: var(--sp-4); }
  .nav-links { gap: var(--sp-4); margin-left: 0; order: 3; width: 100%; }
  .lang { margin-left: auto; }
  .band p { font-size: var(--fs-h3); }
  .spark { width: 100%; height: auto; }
  .spark-weeks { width: 100%; }
}

/* --- engagement timeline ("Wann Dynergia beginnt") ---------------------- */

/* Two zones with a threshold between them. Wide: side by side, the glyph in
   the middle column. Narrow: stacked, the glyph between the two cards, where
   a vertical stem still reads correctly - which is why the glyph carries no
   arrowhead.

   Hierarchy is deliberately the other way round from the reading order: the
   passive phase is the recessive card and the active one carries the ice
   fill and the 2px navy rule, the same weight .notice uses. The phase that
   asks something of the person is the one worth looking at.

   No cyan. The rule at the top of this file reserves it for data marks; a
   phase diagram is not data. */
.tl {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--sp-5);
  align-items: start;
}
.tl-zone {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5);
  border-top: 2px solid var(--line-strong);
  border-radius: 0 0 4px 4px;
}
.tl-zone--post {
  background: var(--ice);
  border-top-color: var(--navy);
}
.tl-zone p { font-size: var(--fs-body-sm); margin: 0; }
.tl-zone--pre, .tl-zone--pre h3 { color: var(--muted); }
.tl-label {
  font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--mid); line-height: var(--lh-snug);
}
/* --faint (#7B8794) is 3.66:1 on white - below AA for 12.5px bold, which
   does not reach the large-text exception. --muted is 6.4:1. */
.tl-zone--pre .tl-label { color: var(--muted); }

.tl-mark {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding-top: var(--sp-2); max-width: 22ch; text-align: center;
}
.tl-glyph { display: block; flex: none; }
.tl-stem { stroke: var(--navy); stroke-width: 2; opacity: .3; }
.tl-diamond { fill: var(--navy); }
.tl-mark-t {
  font-size: var(--fs-small); line-height: var(--lh-snug); color: var(--navy);
  font-weight: 600;
}

@media (max-width: 860px) {
  .tl { grid-template-columns: 1fr; gap: var(--sp-4); justify-items: stretch; }
  .tl-mark { max-width: none; padding: 0; }
  /* A 120px stem between two stacked cards is dead space on a phone. */
  .tl-glyph { width: 30px; height: 56px; }
}

/* --- Methode figures ---------------------------------------------------- */

/* Five inline-SVG schematics. Shared rules first, so the palette is decided
   once: navy line work, mid for secondary marks, ice for fills and bands, and
   cyan for exactly one element per figure. That last rule is the palette note
   at the top of this file applied literally - cyan marks data, and in a
   schematic it marks the one thing the figure is about. */

.fig { margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.fig-svg { display: block; width: 100%; height: auto; }

.fig-line       { stroke: var(--navy); stroke-width: 2; fill: none; }
.fig-line-soft  { stroke: var(--line-strong); stroke-width: 1.5; }
.fig-fill-ice   { fill: var(--ice); }
.fig-fill-mid   { fill: var(--mid); }
.fig-fill-navy  { fill: var(--navy); }
.fig-fill-grey  { fill: var(--line); }
.fig-dot-mid    { fill: var(--mid); }
.fig-dot-navy   { fill: var(--navy); }
.fig-num {
  fill: var(--mid); font-family: var(--font-sans); font-weight: 600;
  font-size: 15px; font-variant-numeric: tabular-nums;
}

/* The single accent, per figure. */
.fig-accent-fill { fill: var(--cyan); }
/* Fill counterpart to .fig-line-soft, which sets a stroke only - a <rect>
   carrying it fell back to the SVG default fill, i.e. black. */
.fig-fill-soft   { fill: var(--line-strong); }
.fig-accent-line { stroke: var(--cyan); stroke-width: 2.5; fill: none; }
.fig-spark {
  fill: none; stroke: var(--cyan); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.fig-spark-dot { fill: var(--ground); stroke: var(--cyan); stroke-width: 2; }

/* Figure sizes. Capped so a schematic does not become the loudest thing on a
   wide screen; full width on a phone, where legibility is the constraint. */
.fig-channels  { max-width: 520px; }
.fig-week      { max-width: 520px; }
.fig-baseline  { max-width: 460px; }
.fig-report    { max-width: 260px; }

/* Week strip: the day letters are real HTML text on a 7-column grid that
   matches the SVG's spacing, so they stay legible at 320px instead of
   shrinking with the viewBox. */
.fig-days {
  display: grid; grid-template-columns: repeat(7, 1fr);
  font-size: var(--fs-fine); color: var(--muted); text-align: center;
}
.fig-legend {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  font-size: var(--fs-fine); color: var(--muted);
}
.lg-item { display: inline-flex; align-items: center; gap: var(--sp-2); }
.lg-daily, .lg-session, .lg-upload { display: inline-block; flex: none; }
.lg-daily   { width: 6px;  height: 11px; border-radius: 2px; background: var(--mid); }
.lg-session { width: 15px; height: 11px; border-radius: 3px; background: var(--navy); }
.lg-upload  { width: 10px; height: 11px; background: var(--cyan);
              clip-path: polygon(50% 0, 100% 55%, 72% 55%, 72% 100%, 28% 100%, 28% 55%, 0 55%); }

/* Two standing conditions. Side by side, equal weight, no arrow between them:
   a flowchart would say the data produces the decision, and it does not. */
.cond-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--sp-4);
  align-items: center;
}

/* The conjunction chip. Quiet navy on ice, no arrow and no direction - it
   states that the two cards are one gate, which the layout alone stops saying
   the moment they stack or the figure is cropped out of the page. */
.cond-and {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  min-width: 2.4em; padding: var(--sp-1) var(--sp-3);
  background: var(--ice-deep); color: var(--navy);
  border-radius: 999px;
  font-size: var(--fs-small); font-weight: 600; line-height: 1.4;
}
.cond {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2);
  background: var(--ice); border-top: 2px solid var(--navy);
  border-radius: 0 0 4px 4px; padding: var(--sp-4);
}
/* Hollow ring: a condition to be met, not a box already ticked. */
.cond-tick { width: 22px; height: 22px; flex: none; }
.cond-ring { stroke: var(--navy); stroke-width: 2; }
.cond-label { font-size: var(--fs-body-sm); color: var(--navy); font-weight: 600; }
.cond-req {
  font-size: var(--fs-meta); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
}
.fig-brace { width: 100%; height: 12px; display: block; }
.fig-authority { max-width: 460px; }

@media (max-width: 860px) {
  .fig-channels, .fig-week, .fig-baseline, .fig-authority { max-width: none; }
  /* Conditions stack rather than squeeze: two 140px columns at 320px would
     wrap "ärztliche Freigabe" to three lines. The horizontal brace becomes a
     vertical one on the left - a brace under a stacked column would span
     nothing. Same single cyan element, turned through ninety degrees. */
  .cond-row {
    grid-template-columns: 1fr;
    border-left: 2.5px solid var(--cyan);
    padding-left: var(--sp-4);
  }
  /* Cards stretch to the column; only the chip hugs its text, or the two
     cards size to their labels and come out visibly different widths. */
  .cond-and { justify-self: start; }
  .fig-brace { display: none; }
}

/* --- Datenfluss (Für Versicherer) ---------------------------------------
   Reuses the existing tokens and stroke classes; no new colours, no new
   stroke weights. Steps 2 and 3 take the timeline's ice ground because that
   is where control over the report sits. */
.fig-datenfluss { margin: var(--sp-4) 0 var(--sp-5); }
.df-flow {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4);
}
.df-step {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3);
  padding: var(--sp-4);
  border-top: 2px solid var(--line-strong);
  border-radius: 0 0 4px 4px;
}
.df-step--own { background: var(--ice); border-top-color: var(--navy); }
.df-n {
  font-size: var(--fs-h2); font-weight: 600; color: var(--mid);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.df-step h3 { font-size: var(--fs-body); margin: var(--sp-1) 0 var(--sp-2); }
/* German compounds - Unterdrückungsschwellen, Aufmerksamkeitstest - are
   longer than a quarter-width column, and a word that cannot break overflows
   its track however the track is sized. minmax(0,1fr) fixed the grid; this
   fixes the text. */
.df-step p, .df-step h3 { overflow-wrap: break-word; hyphens: auto; }
.df-step p { font-size: var(--fs-body-sm); margin: 0; }
.df-neg {
  margin-top: var(--sp-2) !important;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line);
  color: var(--muted);
}
@media (max-width: 860px) {
  .df-flow { grid-template-columns: 1fr; }
}
/* Below 560px the four glyphs render about 70px wide each - the height of a
   line of text - and the card outline, the browser-and-watch, the choice fork
   and the bars become indistinguishable. It stops being a diagram and becomes
   a smudge.
   Nothing is lost by removing it: every element it encodes is restated in the
   four cards immediately below, including the negative line. display:none also
   takes it out of the accessibility tree, which is correct here - its
   aria-label describes a picture that is no longer on the page. */
@media (max-width: 560px) {
  .fig-datenfluss { display: none; }
}

/* --------------------------------------------------------------- weg ----
   «Ihr Weg zurück» — three parallel tracks, the insured person in the middle.

   Three equal columns on a wide screen, one column at the existing 860px
   breakpoint. The lanes stack in SOURCE ORDER, so nothing is reordered and
   the reading order a screen reader gets is the reading order on the page.

   Palette is navy / ice / grey only. No cyan: site.css reserves cyan for data
   accents, and this is a process diagram, not data. */
.weg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  align-items: start;
}
.weg-lane {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5);
  border-top: 2px solid var(--navy);
  border-radius: 0 0 4px 4px;
  background: var(--ice);
  min-width: 0;                 /* long words must wrap, not widen the grid */
}
.weg-label {
  font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); line-height: var(--lh-snug);
}
.weg-note { font-size: var(--fs-meta); color: var(--muted); margin: 0; }
.weg-steps {
  margin: 0; padding-left: 1.4em;
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.weg-steps li {
  font-size: var(--fs-body-sm); line-height: var(--lh-normal); color: var(--ink);
}
.weg-foot {
  margin: 0; padding-top: var(--sp-3);
  border-top: 1px solid var(--line-strong);
  font-size: var(--fs-small); color: var(--muted);
}

/* The shared document. Direction-neutral by design — the ties fan out with no
   arrowheads, because the lanes run left-to-right on a wide screen and
   top-to-bottom on a narrow one. */
.weg-doc {
  margin: 0 0 var(--sp-2) 0; display: flex; flex-direction: column;
  align-items: center; gap: var(--sp-2); text-align: center;
}
.weg-doc-glyph { display: block; flex: none; }
.weg-doc-sheet { stroke: var(--navy); stroke-width: 2; }
.weg-doc-rule  { stroke: var(--navy); stroke-width: 1.5; opacity: .45; }
.weg-doc-tie   { stroke: var(--navy); stroke-width: 1.5; opacity: .35; }
.weg-doc figcaption {
  font-size: var(--fs-small); color: var(--navy); font-weight: 600;
  max-width: 44ch; line-height: var(--lh-snug);
}

.weg-roles {
  margin: 0; display: grid; gap: var(--sp-3);
  /* 5 items: minmax(210px) gave 4 across and one orphan on a second row.
     170px fits all five on a wide screen and still wraps cleanly below. */
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.weg-role { min-width: 0; }
.weg-role dt { font-weight: 600; color: var(--navy); font-size: var(--fs-small); }
.weg-role dd {
  margin: 0; font-size: var(--fs-small); color: var(--ink);
  line-height: var(--lh-snug);
}

/* Native <details>: collapsible and keyboard-operable with zero JavaScript,
   which this site ships none of. */
.weg-faq { display: flex; flex-direction: column; }
.weg-faq-item { border-bottom: 1px solid var(--line); }
.weg-faq-item summary {
  cursor: pointer; padding: var(--sp-3) 0;
  font-weight: 600; color: var(--navy); font-size: var(--fs-body-sm);
  line-height: var(--lh-snug);
}
.weg-faq-item summary:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.weg-faq-item p {
  margin: 0; padding: 0 0 var(--sp-4) 0;
  font-size: var(--fs-body-sm); color: var(--ink); max-width: var(--measure);
}

/* Access-code entry and the one Dynergia sentence in the section. Outside
   .weg on purpose: it is not a fourth track and must not read as one. */
.weg-entry {
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding-top: var(--sp-5); border-top: 1px solid var(--line-strong);
}
/* How a code is obtained, stated and not offered. The page has no field and
   no form: entry is code-by-care-management only. */
.weg-close {
  margin: 0; font-size: var(--fs-body-sm); color: var(--ink);
  max-width: var(--measure);
}
.weg-code { display: flex; flex-direction: column; gap: var(--sp-2); }
.weg-code label { font-weight: 600; color: var(--navy); font-size: var(--fs-small); }
.weg-code input {
  padding: var(--sp-3); border: 1px solid var(--line-strong); border-radius: 4px;
  font: inherit; font-size: var(--fs-body-sm); color: var(--ink); min-width: 0;
}
.weg-code input:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.weg-code button {
  align-self: start; padding: var(--sp-3) var(--sp-5);
  background: var(--navy); color: #fff; border: 0; border-radius: 4px;
  font: inherit; font-weight: 600; cursor: pointer;
}
.weg-code p { margin: 0; }
.weg-box {
  padding: var(--sp-5); border: 1px solid var(--line-strong); border-radius: 4px;
  background: #fff;
}
.weg-box p {
  margin: 0; font-size: var(--fs-body-sm); color: var(--ink);
  line-height: var(--lh-normal);
}
.weg-advice { margin: 0; font-size: var(--fs-small); color: var(--ink); }

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


/* ------------------------------------------------------- crisis block ----
   Standing signposting on a participant surface. Rendered as static HTML from
   battery/js/crisis.js at build time - one definition, and this site cannot
   execute it.

   Emergency numbers come FIRST and the doctrine sentence follows: the number
   someone needs when minutes matter must not sit behind a paragraph. Muted,
   not alarming - it is always present, and a red box on every visit trains
   people to stop seeing it. */
.crisis {
  margin-top: var(--sp-6, 24px);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-strong);
}
.crisis-nums {
  margin: 0 0 var(--sp-2) 0;
  font-size: var(--fs-small); color: var(--ink);
}
.crisis-num strong { color: var(--navy); }
.crisis-lead {
  margin: 0; font-size: var(--fs-small); color: var(--muted);
  max-width: var(--measure); line-height: var(--lh-normal);
}