/* Tokens */
:root {
  --bg: #050606;
  --fg: #F2F4F3;
  --mut: #8D9593;
  --cap: #7C8583;
  --acc: #5FD4B8;
  --acc2: #B4F3E3;
  --warn: #F2A65A;
  --line: rgb(255 255 255 / 0.09);
  --line2: rgb(255 255 255 / 0.16);
  --sans: "Geist", "Geist Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  color-scheme: dark;
}

@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
/* Until Geist arrives, Windows sets the page in Segoe UI, which is narrower: lines break in
   other places, and the page jumps when Geist replaces it. These stand-ins are Segoe UI drawn
   as wide as Geist, with Geist's line metrics. They load nothing. */
@font-face {
  font-family: "Geist Fallback";
  src: local("Segoe UI");
  font-weight: 100 500;
  size-adjust: 103.5%;
  ascent-override: 97.1%;
  descent-override: 28.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Geist Fallback";
  src: local("Segoe UI Semibold");
  font-weight: 501 900;
  size-adjust: 104.6%;
  ascent-override: 96.1%;
  descent-override: 28.2%;
  line-gap-override: 0%;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  color: var(--fg);
  font: 400 1rem/1.5 var(--sans);
  background:
    radial-gradient(1100px 620px at 50% -100px, rgb(95 212 184 / 0.13), transparent 62%) 0 0 / 100% 1000px no-repeat,
    radial-gradient(900px 600px at 92% 360px, rgb(70 120 255 / 0.06), transparent 60%) 0 0 / 100% 1000px no-repeat,
    var(--bg);
  overflow-x: clip;
}
/* On a phone the second, blue light would tint the whole width: there is only the first. */
@media (max-width: 719px) {
  body { background: radial-gradient(1100px 620px at 50% -100px, rgb(95 212 184 / 0.13), transparent 62%) 0 0 / 100% 1000px no-repeat, var(--bg); }
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("/assets/img/grain.svg");
}
h1, h2, h3, p, figure, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
::selection { background: rgb(95 212 184 / 0.3); }
:focus-visible { outline: 2px solid var(--acc2); outline-offset: 3px; border-radius: 4px; }
.wrap, main { max-width: 1240px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 28px); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 60; padding: 10px 14px; border-radius: 8px; background: var(--fg); color: var(--bg); }
.skip:focus { top: 12px; }
.symbols { position: absolute; }
main { padding-block: 44px 0; min-height: 52vh; }
main:focus { outline: none; }
/* The plain pages (privacy, not found): a readable measure, a quieter title, and a back link
   set apart. On the landing page main holds only sections, so none of this applies there. */
main > h1 { font-size: clamp(34px, 4vw, 46px); }
main > p { max-width: 48ch; margin-top: 18px; }
main > h1 + p { margin-top: 28px; }
main > p:last-child { margin-top: 36px; }

/* Motion controls: the still version is the base style, so "none" shows the finished state. */
html:has(#pause-motion:checked) *, html:has(#pause-motion:checked) *::before, html:has(#pause-motion:checked) *::after,
html.motion-paused *, html.motion-paused *::before, html.motion-paused *::after { animation: none !important; }
[data-offscreen] *, [data-offscreen] *::before, [data-offscreen] *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  /* The button's grow on hover and press is declared further down, and would win without this. */
  .btn:hover, .btn:active { scale: none !important; }
}

/* Headings */
h1, h2 {
  font-weight: 600;
  text-wrap: balance;
  background: linear-gradient(180deg, #fff 30%, #A9B3B0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
h1 { font-size: clamp(34px, 5vw, 62px); line-height: 1.04; letter-spacing: -0.035em; max-width: 20ch; }
h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.08; letter-spacing: -0.03em; }
.sub { color: var(--mut); font-size: 18px; max-width: 52ch; text-wrap: balance; }
.lead { color: var(--mut); font-size: 17px; margin-top: 12px; max-width: 48ch; text-wrap: balance; }

/* Header */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; text-decoration: none; }
.brand svg { flex: none; width: 26px; height: 26px; color: var(--acc); }
.site-header nav { display: flex; align-items: center; gap: 26px; font-size: 14px; }
.link { color: var(--mut); text-decoration: none; transition: color 0.2s; }
.link:hover { color: var(--fg); }
/* A link that reads as text is underlined, so it is not told from the text by colour alone.
   The two that stand alone get 44 px to tap, by padding that a matching margin takes back. */
main p:not(.cta) > a:not(.btn), .site-footer .link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.site-footer .link, main > p:last-child > a { display: inline-block; padding: 14px 8px; margin: -14px -8px; }

/* Pause switch */
.pause {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding-inline: 4px;
  color: var(--mut);
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
}
.pause input {
  appearance: none;
  position: relative;
  flex: none;
  width: 28px;
  height: 16px;
  margin: 0;
  border: 1px solid var(--mut);
  border-radius: 99px;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
.pause input::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mut);
  transition: transform 0.2s, background-color 0.2s;
}
.pause input:checked { background: var(--acc); border-color: var(--acc); }
.pause input:checked::before { background: var(--bg); transform: translateX(12px); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 9px;
  background: var(--fg);
  color: var(--bg);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: scale 0.15s;
}
.btn:hover { scale: 1.03; }
.btn:active { scale: 0.98; }

/* Glass */
.glass {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.075), rgb(255 255 255 / 0.02));
  border: 1px solid var(--line);
  box-shadow:
    inset 0 1px 0 var(--line),
    0 calc(var(--u, 1px) * 24) calc(var(--u, 1px) * 44) calc(var(--u, 1px) * -22) #000;
}

/* Hero */
main .wrap { padding-inline: 0; }
.hero { text-align: center; }
.hero .status { display: inline-flex; padding: 5px 13px; border: 1px solid var(--line2); border-radius: 99px; background: rgb(255 255 255 / 0.03); color: var(--mut); font-size: 13px; }
.hero h1 { margin: 20px auto 16px; }
.hero .sub { margin-inline: auto; }
.cta { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 26px; }
.cta .link { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border: 1px solid var(--line2); border-radius: 9px; background: rgb(255 255 255 / 0.04); color: var(--fg); font-size: 14px; font-weight: 500; }
.cta .link:hover { border-color: rgb(255 255 255 / 0.32); }
/* On phones every button is 44 px high, enough to tap. */
@media (max-width: 719px) {
  .btn, .cta .link { height: 44px; }
}
figcaption[data-concept-label] { color: var(--cap); font-size: 13px; }

/* Hero flow: a stage of fixed shape; everything in it is sized in stage units (--u), and
   every animated element's base style is its finished, still state. */
.flow { margin-top: 8px; text-align: left; }
.flow figcaption { margin-top: -16px; }
.flow-stage { --u: calc(100cqw / 1200); container-type: inline-size; position: relative; aspect-ratio: 1200 / 540; }
.wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; }
.wires-narrow { display: none; }
.wire-narrow { stroke: rgb(95 212 184 / 0.3); }
.comet { stroke: var(--acc2); stroke-linecap: round; }
.comet use { stroke-dashoffset: calc(var(--l) + 4px); animation: fly 3.4s cubic-bezier(0.45, 0, 0.7, 1) var(--d, 0s) infinite; }
.flow-stage :is(.c7, .c8, .c9) use { animation-timing-function: cubic-bezier(0.2, 0.4, 0.4, 1); }
.comet .tail { --l: 16px; stroke-dasharray: 16 108; stroke-width: 1.5; opacity: 0.22; }
.comet .mid { --l: 7px; stroke-dasharray: 7 117; stroke-width: 2; opacity: 0.55; }
.comet .head { --l: 2px; stroke-dasharray: 2 122; stroke-width: 3.2; }

.tok {
  --i: max(22px, calc(var(--u) * 30));
  --p: calc(var(--u) * 7);
  position: absolute;
  translate: -100% -50%;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  padding: var(--p) calc(var(--u) * 16) var(--p) var(--p);
  border-radius: 99px;
  font-size: max(12px, calc(var(--u) * 15));
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: default;
  animation: bob 7s ease-in-out var(--d, 0s) infinite;
}
.tok:hover { border-color: rgb(95 212 184 / 0.55); background-image: linear-gradient(180deg, rgb(95 212 184 / 0.16), rgb(95 212 184 / 0.04)); }
.tok::before {
  content: "";
  position: absolute;
  left: var(--p);
  top: calc(50% - var(--i) / 2);
  width: var(--i);
  height: var(--i);
  border: 1.5px solid var(--acc);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: ping 3.4s ease-out var(--d, 0s) infinite;
}
.ico {
  flex: none;
  width: var(--i);
  height: var(--i);
  padding: calc(var(--i) * 0.2);
  border: 1px solid rgb(95 212 184 / 0.28);
  border-radius: 50%;
  background: rgb(95 212 184 / 0.1);
  color: var(--acc);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.flow-stage .t1 { left: 25%; top: 12.96%; }
.flow-stage .t2 { left: 20.83%; top: 27.78%; }
.flow-stage .t3 { left: 18.75%; top: 42.59%; }
.flow-stage .t4 { left: 18.75%; top: 57.41%; }
.flow-stage .t5 { left: 20.83%; top: 72.22%; }
.flow-stage .t6 { left: 25%; top: 87.04%; }
.flow-stage :is(.t2, .c2) { --d: -2.2s; }
.flow-stage :is(.t3, .c3) { --d: -1.1s; }
.flow-stage :is(.t4, .c4) { --d: -2.8s; }
.flow-stage :is(.t5, .c5) { --d: -0.6s; }
.flow-stage :is(.t6, .c6) { --d: -1.7s; }
.flow-stage .c7 { --d: -0.4s; }
.flow-stage .c8 { --d: -1.6s; }
.flow-stage .c9 { --d: -2.7s; }
.flow-stage:has(.t1:hover) .w1, .flow-stage:has(.t2:hover) .w2, .flow-stage:has(.t3:hover) .w3,
.flow-stage:has(.t4:hover) .w4, .flow-stage:has(.t5:hover) .w5, .flow-stage:has(.t6:hover) .w6 { stroke: var(--acc2); stroke-width: 1.8; }

.flow-stage .core { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: calc(var(--u) * 132); height: calc(var(--u) * 132); }
.flow-stage .core i { position: absolute; border-radius: 50%; }
.flow-stage .core-glow {
  width: calc(var(--u) * 420);
  height: calc(var(--u) * 420);
  background: radial-gradient(closest-side, rgb(95 212 184 / 0.26), rgb(95 212 184 / 0.06) 55%, transparent);
  pointer-events: none;
  animation: breathe 5s ease-in-out infinite;
}
.flow-stage .core-edge { inset: 0; border: 1px solid rgb(255 255 255 / 0.07); }
.flow-stage .core-sweep {
  inset: 0;
  background: conic-gradient(transparent 62%, rgb(95 212 184 / 0.95));
  mask: radial-gradient(farthest-side, transparent calc(100% - 1.6px), #000 calc(100% - 1.6px));
  animation: spin 5s linear infinite;
}
.flow-stage .core-dash { inset: calc(var(--u) * 14); border: 1px dashed var(--line2); animation: spin 40s linear infinite reverse; }
.flow-stage .core-disc {
  position: relative;
  display: grid;
  place-items: center;
  width: 57.6%;
  height: 57.6%;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 18%, #1E2A28, #0A0E0D 62%);
  box-shadow: inset 0 1px 0 var(--line2), 0 0 calc(var(--u) * 46) rgb(95 212 184 / 0.3);
  color: var(--acc2);
}
.flow-stage .core-disc svg { width: 56%; height: 56%; }

.flow-stage .out {
  position: absolute;
  translate: 0 -50%;
  display: grid;
  gap: calc(var(--u) * 12);
  width: calc(var(--u) * 250);
  padding: calc(var(--u) * 16) calc(var(--u) * 18);
  border-radius: calc(var(--u) * 14);
  transition: scale 0.35s var(--ease-out);
}
.flow-stage .out:hover { border-color: rgb(95 212 184 / 0.45); }
@media (prefers-reduced-motion: no-preference) {
  .flow-stage .out:hover { scale: 1.04; }
}
.flow-stage .out b { font-size: max(13px, calc(var(--u) * 16)); font-weight: 600; letter-spacing: -0.015em; }
.flow-stage .out-e8 { left: 72.5%; top: 22.22%; }
.flow-stage .out-smb { left: 75%; top: 50%; }
.flow-stage .out-insurer { left: 72.5%; top: 77.78%; }
.cells { display: grid; grid-template-columns: repeat(8, 1fr); gap: calc(var(--u) * 5); }
.cells-6 { grid-template-columns: repeat(6, 1fr); }
.cells i { height: calc(var(--u) * 22); border-radius: calc(var(--u) * 4); }
.flow-stage :is(.scope, .legend) { color: var(--mut); font-size: max(12px, calc(var(--u) * 12)); }
.flow-stage .scope { margin-top: calc(var(--u) * -4); }
.rows { display: grid; gap: calc(var(--u) * 7); }
.rows span { display: grid; grid-template-columns: calc(var(--u) * 14) 1fr; align-items: center; gap: calc(var(--u) * 9); }
.rows i { height: calc(var(--u) * 14); border-radius: 50%; }
.bar { height: calc(var(--u) * 5); border-radius: 9px; background: rgb(255 255 255 / 0.12); }
.b1 { width: 82%; }
.b2 { width: 64%; }
.b3 { width: 74%; }

/* The three kinds of cell differ by fill, dashed outline and hatching, never by colour alone.
   They apply to empty <i> cells only. The hatch lines are at least 3:1 against every surface used. */
i[data-state="evidence"], .k-evidence::before { background: var(--acc); }
i[data-state="person"], .k-person::before { background: none; border: 1.5px dashed var(--acc2); }
i[data-state="outside"], .k-outside::before { background: repeating-linear-gradient(135deg, rgb(255 255 255 / 0.4) 0 1.5px, transparent 1.5px 5px); }
.flow-stage i[data-state="evidence"] { animation: lit 9s ease-in-out backwards infinite; }
.cells i:nth-child(2), .rows span:first-child i { animation-delay: 0.38s; }
.cells i:nth-child(3) { animation-delay: 0.76s; }
.cells i:nth-child(4), .rows span:nth-child(2) i { animation-delay: 1.14s; }
.cells i:nth-child(6) { animation-delay: 1.9s; }
.flow-stage .legend { position: absolute; right: 0; top: 92.04%; display: flex; gap: calc(var(--u) * 16); white-space: nowrap; }
.flow-stage .legend span { display: flex; align-items: center; gap: 0.5em; }
.flow-stage .legend span::before { content: ""; width: 0.92em; height: 0.92em; border-radius: 0.25em; }

@keyframes fly { to { stroke-dashoffset: calc(var(--l) - 120px); } }
@keyframes bob { 0%, 100% { transform: translateY(calc(var(--u) * -3)); } 50% { transform: translateY(calc(var(--u) * 3)); } }
@keyframes ping { 0% { opacity: 0.5; } 30%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 0%, 100% { opacity: 0.7; transform: scale(0.96); } 50% { transform: scale(1.04); } }
@keyframes lit { 0%, 8%, 100% { opacity: 0.16; } 16%, 88% { opacity: 1; } }

/* Between phone and full width the lines are heavier. */
@media (min-width: 720px) and (max-width: 999px) {
  .wire { stroke-width: 1.6; }
}

/* Phones: pills in two columns above the ring, lines running down, cards stacked beneath.
   Pills and cards are opaque here so the lines pass behind them; fewer things move. A pill's
   label and the key may wrap, which they do only when a visitor sets wider text spacing. */
@media (max-width: 719px) {
  .wires-wide, .comet .mid { display: none; }
  .wires-narrow { display: block; }
  .flow { margin-top: 28px; }
  .flow figcaption { margin-top: 10px; text-align: center; }
  .flow-stage { --u: calc(100cqw / 360); aspect-ratio: 360 / 640; max-width: 420px; margin-inline: auto; }
  .tok, .flow-stage .out { translate: -50% -50%; background-color: #0A0D0C; }
  .tok {
    --i: calc(var(--u) * 26);
    --p: calc(var(--u) * 8);
    gap: calc(var(--u) * 7);
    width: calc(var(--u) * 168);
    min-height: calc(var(--u) * 44);
    padding-block: 0;
    padding-right: 0;
    font-size: max(12px, calc(var(--u) * 13));
    white-space: normal;
    animation: none;
  }
  .flow-stage :is(.t1, .t3, .t5) { left: 25.56%; }
  .flow-stage :is(.t2, .t4, .t6) { left: 74.44%; }
  .flow-stage :is(.t1, .t2) { top: 6.25%; }
  .flow-stage :is(.t3, .t4) { top: 15%; }
  .flow-stage :is(.t5, .t6) { top: 23.75%; }
  .flow-stage .core { top: 46.875%; width: calc(var(--u) * 76); height: calc(var(--u) * 76); }
  .flow-stage .core-glow { width: calc(var(--u) * 250); height: calc(var(--u) * 250); }
  .flow-stage .core-dash { inset: calc(var(--u) * 8); }
  .flow-stage .out {
    left: 50%;
    grid-template: 1fr 1fr / calc(var(--u) * 122) 1fr;
    align-items: center;
    gap: 0 calc(var(--u) * 12);
    width: calc(var(--u) * 320);
    height: calc(var(--u) * 66);
    padding-block: 0;
    padding-inline: calc(var(--u) * 16);
  }
  .flow-stage .out b, .flow-stage :is(.cells, .rows) { grid-row: 1 / 3; }
  .flow-stage :is(.cells, .rows) { grid-column: 2; }
  .flow-stage .out b { font-size: max(13px, calc(var(--u) * 14)); }
  .flow-stage .out-smb b { grid-row: 1; align-self: end; }
  .flow-stage .scope { grid-row: 2; align-self: start; margin: 0; }
  .flow-stage .out-e8 { top: 63.59%; }
  .flow-stage .out-smb { top: 76.41%; }
  .flow-stage .out-insurer { top: 89.22%; }
  .flow-stage .cells { gap: calc(var(--u) * 4); }
  .flow-stage .cells i { height: calc(var(--u) * 20); }
  .flow-stage .rows { gap: calc(var(--u) * 6); }
  .flow-stage .rows span { grid-template-columns: calc(var(--u) * 12) 1fr; }
  .flow-stage .rows i { height: calc(var(--u) * 12); }
  .flow-stage .legend { left: 50%; right: auto; top: 97.5%; translate: -50% -50%; flex-wrap: wrap; justify-content: center; gap: 0 calc(var(--u) * 12); width: max-content; max-width: 100vw; }
}
@media (max-width: 339px) {
  .tok { --i: calc(var(--u) * 20); --p: calc(var(--u) * 6); gap: calc(var(--u) * 5); width: calc(var(--u) * 172); }
  .flow-stage .out { grid-template-columns: calc(var(--u) * 142) 1fr; }
}

/* Trail: from 720 px a stage shaped like its chart, with the list laid over it as floating
   labels; on phones, three rows. Every animated element's base style is its finished state. */
#trail, #frameworks, #attestations, #how, #care, #pilot { padding-top: clamp(72px, 11vw, 120px); }
.trail {
  --u: calc(100cqw / 1200);
  container-type: inline-size;
  position: relative;
  margin-top: 36px;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(70% 120% at 80% 0%, rgb(95 212 184 / 0.09), transparent 60%),
    linear-gradient(180deg, rgb(255 255 255 / 0.04), rgb(255 255 255 / 0.012));
}
.trail-client { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 15px; }
.trail b { font-weight: 600; }
.trail .tag, .att .tag { padding: 1px 10px; border: 1px solid var(--line2); border-radius: 99px; color: var(--mut); font-size: 12px; }
.trail li { color: var(--mut); }
.trail .now { color: var(--acc2); font-weight: 600; }
.trail .now-open { color: var(--warn); }

/* Chart text grows in chart units as the chart shrinks, staying 12 px or more on screen.
   A line is one long dash, a break its dashes then a long gap, so an offset can draw it on. */
.trail-chart { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke-linecap: round; }
.trail-draw * { transform-box: fill-box; transform-origin: center; }
.trail .grid { stroke: rgb(255 255 255 / 0.05); }
.trail .base { stroke: rgb(255 255 255 / 0.07); }
.trail .ax { fill: var(--cap); font-size: max(12.2px, calc(34px - 1.84cqw)); }
.trail .lane-name { fill: var(--fg); font-size: max(14.5px, calc(30.7px - 1.36cqw)); font-weight: 500; }
.trail .ok { stroke: var(--acc); stroke-width: 2.2; stroke-dasharray: 950; filter: drop-shadow(0 0 6px rgb(95 212 184 / 0.55)); }
.trail .ok[data-lane="mfa"] { --o: 350px; }
.trail .ok[data-lane="legacy"] { --o: 680px; }
.trail :is(.brk, .chg, .open-pulse) { stroke: var(--warn); stroke-width: 1.8; }
.trail .brk { stroke-width: 1.6; stroke-dasharray: 3 6 3 6 3 6 3 6 3 6 3 6 3 6 3 6 3 6 3 6 3 6 3 6 3 6 3 6 3 6 3 6 3 6 3 6 3 6 3 6 3 999; }
.trail .chg { fill: var(--bg); }
.trail .mend { --from: scale(0.4); }
.trail .mend circle { fill: #0C1211; stroke: var(--acc); stroke-width: 1.5; }
.trail .mend path { stroke: var(--acc2); stroke-width: 1.8; }
.trail-head {
  position: absolute;
  top: 18.26%;
  bottom: 11.3%;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--acc2), transparent);
  box-shadow: 0 0 14px 1px rgb(95 212 184 / 0.6);
  opacity: 0;
}

@media (min-width: 720px) {
  .trail { aspect-ratio: 1200 / 460; }
  .trail-client { position: absolute; left: 3.33%; top: 6.5%; gap: calc(var(--u) * 12); font-size: max(13px, calc(var(--u) * 15)); }
  /* Here the caption sits on the card's teal light, where the caption grey is too dim. */
  .trail figcaption { position: absolute; right: 3.33%; top: 7%; color: var(--mut); }
  .trail-list { position: absolute; inset: 0; z-index: 1; }
  .trail li {
    --from: translateY(8px);
    position: absolute;
    translate: -50% -100%;
    display: grid;
    padding: max(5px, calc(var(--u) * 8)) max(9px, calc(var(--u) * 13));
    border: 1px solid var(--line);
    border-radius: max(8px, calc(var(--u) * 11));
    background: linear-gradient(180deg, rgb(255 255 255 / 0.075), rgb(255 255 255 / 0.02)), rgb(9 13 12 / 0.72);
    box-shadow: inset 0 1px 0 var(--line), 0 12px 22px -12px #000;
    font-size: 12px;
    line-height: 1.3;
    white-space: nowrap;
  }
  .trail li :is(b, .was) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .trail .now { font-size: max(12px, calc(var(--u) * 14)); }
  .trail li[data-lane="mfa"] { left: 50%; top: 28.26%; }
  .trail li[data-lane="legacy"] { left: 77.5%; top: 50%; }
  .trail li[data-lane="dns"] { right: 3%; top: 73.48%; translate: 0 -100%; }

  /* One 11 s loop: a sweep crosses from 0% to 60%, drawing each line and bringing in each
     marker and label as it passes; then everything fades before the next pass. */
  .trail * { animation: 11s linear infinite; }
  .trail :is(.trail-draw, .trail-list) { animation-name: trail-fade; }
  .trail .trail-head { animation-name: trail-head; }
  .trail .ok { animation-name: trail-draw; }
  .trail :is(.brk, .chg)[data-lane="mfa"] { animation-name: brk-1; }
  .trail :is(.brk, .chg)[data-lane="legacy"] { animation-name: brk-2; }
  .trail :is(.brk, .chg)[data-lane="dns"] { animation-name: brk-3; }
  .trail :is(.mend, li)[data-lane="mfa"] { animation-name: pop-1; }
  .trail :is(.mend, li)[data-lane="legacy"] { animation-name: pop-2; }
  .trail li[data-lane="dns"] { animation-name: pop-3; }
  .trail .open { animation-name: open-in; }
  .trail .open-pulse { animation: pulse 2s ease-out infinite; }
  .trail :is(.mend, li) { animation-timing-function: ease-out; }
}
/* Up to 899 px the chart is small: one-line labels and heavier marks. */
@media (min-width: 720px) and (max-width: 899px) {
  .trail li { display: flex; gap: 6px; }
  .trail :is(.chg, .mend) { scale: 1.3; }
  .trail .ok { stroke-width: 2.8; }
  .trail .brk { stroke-width: 2.2; }
}
@keyframes trail-draw { 0% { stroke-dashoffset: calc(var(--o, 0px) + 951px); } 60%, 100% { stroke-dashoffset: var(--o, 0px); } }
@keyframes trail-head { 0% { opacity: 0; transform: translateX(calc(var(--u) * 250)); } 3%, 56% { opacity: 1; } 60%, 100% { opacity: 0; transform: translateX(calc(var(--u) * 1200)); } }
@keyframes trail-fade { 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes brk-1 { 0%, 20.2% { opacity: 0; stroke-dashoffset: 185px; } 21.4% { opacity: 1; } 22.1%, 100% { stroke-dashoffset: 146px; } }
@keyframes brk-2 { 0%, 31.6% { opacity: 0; stroke-dashoffset: 185px; } 32.8% { opacity: 1; } 43%, 100% { stroke-dashoffset: 0; } }
@keyframes brk-3 { 0%, 48.6% { opacity: 0; stroke-dashoffset: 185px; } 49.8% { opacity: 1; } 56.2%, 100% { stroke-dashoffset: 61px; } }
@keyframes pop-1 { 0%, 22% { opacity: 0; transform: var(--from); } 26% { opacity: 1; transform: none; } }
@keyframes pop-2 { 0%, 43% { opacity: 0; transform: var(--from); } 47% { opacity: 1; transform: none; } }
@keyframes pop-3 { 0%, 52% { opacity: 0; transform: var(--from); } 56% { opacity: 1; transform: none; } }
@keyframes open-in { 0%, 56.2% { opacity: 0; } 57.6% { opacity: 1; } }
@keyframes pulse { 0% { opacity: 1; transform: scale(0.6); } 100% { opacity: 0; transform: scale(2.2); } }

/* Phones: under each row a steady line, a dashed break as long as it lasted, then a stitch
   and a steady line again, or a ring where it is still open. */
@media (max-width: 719px) {
  .trail { padding: 18px 16px 14px; }
  .trail-chart, .trail-head { display: none; }
  .trail-list { margin-top: 14px; }
  .trail li { --g: 16px; position: relative; padding-block: 12px 18px; border-top: 1px solid var(--line); font-size: 14px; }
  .trail li[data-lane="legacy"] { --g: 56px; }
  .trail li[data-lane="dns"] { --g: 40px; }
  .trail li :is(b, .was) { display: block; }
  .trail li b { color: var(--fg); font-size: 15px; }
  .trail li::after {
    content: "";
    display: block;
    height: 2px;
    margin-top: 13px;
    background:
      linear-gradient(var(--acc) 0 0) 0 / 56px 100% no-repeat,
      repeating-linear-gradient(90deg, var(--warn) 0 4px, transparent 0 8px) 62px 0 / var(--g) 100% no-repeat,
      linear-gradient(90deg, transparent calc(84px + var(--g)), var(--acc) 0);
  }
  .trail li::before {
    content: "";
    position: absolute;
    left: calc(65px + var(--g));
    bottom: 12px;
    width: 14px;
    height: 14px;
    rotate: 45deg;
    background: linear-gradient(var(--acc2) 0 0) 50% / 2px 100% no-repeat, linear-gradient(var(--acc2) 0 0) 50% / 100% 2px no-repeat;
  }
  .trail li:not([data-fixed-days-ago])::after { width: calc(62px + var(--g)); }
  .trail li:not([data-fixed-days-ago])::before { border: 2px solid var(--warn); border-radius: 50%; background: none; }
  .trail figcaption { padding-top: 12px; border-top: 1px solid var(--line); }
}

/* Chooser: a native radio group. The chosen setting lights the cells it is evidence for; a
   cell that needs a person or is outside view never lights. Every rule is scoped to it. */
.chooser { display: grid; gap: 18px; margin-top: 36px; }
.chooser .settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
/* Floated, a legend is laid out as an ordinary child: here a grid item across the top. It
   is still the group's name. */
.chooser legend { float: left; grid-column: 1 / -1; padding: 0; color: var(--mut); font-size: 13px; }
.chooser .setting {
  --i: 26px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 6px 10px 6px 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgb(255 255 255 / 0.02);
  color: var(--mut);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-wrap: balance;
}
.chooser .setting input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chooser .setting:hover { color: var(--fg); }
.chooser .setting:has(:checked) { border-color: rgb(95 212 184 / 0.5); background: linear-gradient(90deg, rgb(95 212 184 / 0.14), rgb(95 212 184 / 0.02)); color: var(--fg); }
.chooser .setting:has(:checked) .ico { background: var(--acc); color: var(--bg); }
.chooser .setting:has(:focus-visible) { outline: 2px solid var(--acc2); outline-offset: 2px; }
@supports not selector(:has(*)) {
  .chooser .setting:focus-within { outline: 2px solid var(--acc2); outline-offset: 2px; }
}

.chooser .fws { display: grid; gap: 14px; }
.chooser .fw { display: grid; align-content: start; gap: 16px; padding: 20px; border-color: rgb(95 212 184 / 0.32); border-radius: 18px; }
/* The card measures itself, so its note and its list can use the room it has. */
.chooser .fw-e8 { container-type: inline-size; grid-template-columns: 1fr auto; }
.chooser .fw-e8 > * { grid-column: 1 / -1; }
.chooser h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.chooser :is(.fw-outside, .fw-scope) { margin-top: -10px; color: var(--mut); font-size: 13px; }
.chooser .e8 { display: grid; gap: 7px; }
.chooser .e8 li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: start;
  gap: 2px 7px;
  padding: 7px 9px;
  border: 1px solid var(--line2);
  border-radius: 8px;
  color: var(--mut);
  font-size: 13px;
  line-height: 1.35;
}
/* A hollow dot before each name; filled when the cell is lit, so lit is not colour alone. */
.chooser .e8 li::before { content: ""; width: 7px; height: 7px; margin-top: 5px; border: 1.5px solid; border-radius: 50%; background: rgb(180 243 227 / var(--lit, 0)); }
.chooser .e8 small { grid-column: 2; font-size: 12px; }
.chooser .grid10 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.chooser .grid10 i { height: 22px; border-radius: 6px; }
.chooser .rows { gap: 11px; }
.chooser .rows span { grid-template-columns: 16px 1fr; gap: 10px; }
.chooser .rows i { height: 16px; }
.chooser .bar { height: 6px; }
.chooser .b4 { width: 58%; }
.chooser .b5 { width: 70%; }

/* The three kinds, as in the hero, plus one more: an evidence cell not lit yet is an empty
   outline. Needs a person is dashed here, to tell it from that outline without colour. */
.chooser i[data-state="evidence"] { border: 1px solid rgb(255 255 255 / 0.38); background: none; }
.chooser :is(i, li)[data-state="person"], .chooser .k-person::before { border: 1.5px dashed rgb(180 243 227 / 0.7); }
.chooser li[data-state="outside"] { background: repeating-linear-gradient(135deg, rgb(255 255 255 / 0.08) 0 1.5px, transparent 1.5px 5px); }
.chooser [data-evidence] { transition: color 0.2s, background-color 0.2s, border-color 0.2s; }
.chooser:has([value="mfa"]:checked) [data-evidence~="mfa"],
.chooser:has([value="admin"]:checked) [data-evidence~="admin"],
.chooser:has([value="legacy"]:checked) [data-evidence~="legacy"],
.chooser:has([value="patch"]:checked) [data-evidence~="patch"],
.chooser:has([value="macro"]:checked) [data-evidence~="macro"],
.chooser:has([value="dns"]:checked) [data-evidence~="dns"] {
  --lit: 1;
  color: var(--acc2);
  border-color: var(--acc);
  background: rgb(95 212 184 / 0.14);
  box-shadow: 0 0 20px -6px rgb(95 212 184 / 0.7);
}
.chooser:has([value="mfa"]:checked) i[data-evidence~="mfa"],
.chooser:has([value="admin"]:checked) i[data-evidence~="admin"],
.chooser:has([value="legacy"]:checked) i[data-evidence~="legacy"],
.chooser:has([value="patch"]:checked) i[data-evidence~="patch"],
.chooser:has([value="macro"]:checked) i[data-evidence~="macro"],
.chooser:has([value="dns"]:checked) i[data-evidence~="dns"] { background: var(--acc); }
.chooser:has([value="mfa"]:checked) i[data-evidence~="mfa"] + .bar,
.chooser:has([value="admin"]:checked) i[data-evidence~="admin"] + .bar,
.chooser:has([value="legacy"]:checked) i[data-evidence~="legacy"] + .bar,
.chooser:has([value="patch"]:checked) i[data-evidence~="patch"] + .bar,
.chooser:has([value="macro"]:checked) i[data-evidence~="macro"] + .bar,
.chooser:has([value="dns"]:checked) i[data-evidence~="dns"] + .bar { background: rgb(180 243 227 / 0.5); }

.chooser .fw-outside { visibility: hidden; }
.chooser:has([value="dns"]:checked) .fw-outside { visibility: visible; }
.chooser:has([value="dns"]:checked) .fw-e8 { border-color: var(--line); }

/* One sentence per setting for screen readers: the lit cells are a visual effect only. */
.chooser .sum { display: none; }
.chooser:has([value="mfa"]:checked) .sum-mfa, .chooser:has([value="admin"]:checked) .sum-admin,
.chooser:has([value="legacy"]:checked) .sum-legacy, .chooser:has([value="patch"]:checked) .sum-patch,
.chooser:has([value="macro"]:checked) .sum-macro, .chooser:has([value="dns"]:checked) .sum-dns { display: block; }

.chooser .key { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--mut); font-size: 13px; }
.chooser .key span { display: flex; align-items: center; gap: 7px; }
.chooser .key span::before { content: ""; width: 12px; height: 12px; border-radius: 3px; }
.chooser figcaption { margin-top: -6px; }

/* The Essential Eight list takes as many columns as its card has room for, and from 280 px
   the note that is hidden until nothing lights shares the title's row, at the right. */
@container (min-width: 270px) {
  .chooser .e8 { grid-template-columns: 1fr 1fr; }
}
@container (min-width: 280px) {
  .chooser .fw-e8 > h3 { grid-column: 1; }
  .chooser .fw-e8 > .fw-outside { grid-area: 1 / 2; align-self: center; margin: 0; }
}
@container (min-width: 560px) {
  .chooser .e8 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 600px) and (max-width: 899px) {
  .chooser .settings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chooser .fws { grid-template-columns: 1fr 1fr; }
  .chooser .fw-e8 { grid-column: 1 / -1; }
}
/* From 900 px the settings stand beside the cards and share their height: Essential Eight
   two rows high, with the other two cards stacked on its right. */
@media (min-width: 900px) {
  .chooser { grid-template-columns: minmax(0, clamp(210px, 24%, 300px)) minmax(0, 1fr); }
  .chooser .settings { grid-template: auto repeat(6, 1fr) / none; }
  .chooser .setting { --i: 30px; gap: 12px; min-height: 50px; padding: 9px 14px 9px 9px; font-size: 15px; }
  .chooser .fws { grid-template-columns: 1.5fr 1fr; }
  .chooser .fw-e8 { grid-row: span 2; }
  .chooser :is(.key, figcaption) { grid-column: 1 / -1; }
}

/* Attestation: a sample card. The signature and the ring are drawn in the base style; the
   animation only draws them on again. Its tag shares the trail's rule. */
.att {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
  max-width: 860px;
  margin-top: 36px;
  padding: 40px 48px;
  border-radius: 22px;
  background: radial-gradient(var(--glow, 60% 140% at 100% 50%), rgb(95 212 184 / 0.12), transparent 65%), linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.012));
}
.att h3 { margin-top: 10px; font-size: 26px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; }
.att .who { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.att .av { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgb(95 212 184 / 0.35); border-radius: 50%; background: rgb(95 212 184 / 0.12); color: var(--acc2); font-size: 14px; font-weight: 600; }
.att .who b { display: block; font-size: 15px; font-weight: 600; }
.att :is(small, .ring-text, .ring-date) { color: var(--mut); font-size: 13px; }
.att svg { display: block; fill: none; stroke: var(--acc2); stroke-linecap: round; }
.att .sig { --start: 100; width: 220px; max-width: 100%; margin-top: 14px; stroke-width: 1.6; stroke-dasharray: 100; }
.att .att-ring { position: relative; display: grid; justify-items: center; gap: 12px; }
.att .ring { width: 170px; overflow: visible; rotate: -90deg; stroke-width: 6; }
.att .ring-track { stroke: rgb(255 255 255 / 0.08); }
.att .ring-value { --start: 80; stroke: var(--acc); filter: drop-shadow(0 0 6px rgb(95 212 184 / 0.7)); }
.att .ring-text { position: absolute; inset: 0 0 auto; display: grid; place-content: center; height: 170px; text-align: center; }
.att .ring-text b { color: var(--fg); font-size: 44px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.att .sig path { animation: sign 8s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.att .ring-value { animation: sign 8s var(--ease-out) infinite; }
@keyframes sign { 0%, 5% { opacity: 0; stroke-dashoffset: var(--start); } 7% { opacity: 1; } 38%, 92% { opacity: 1; stroke-dashoffset: 0; } 100% { opacity: 0; stroke-dashoffset: 0; } }
/* Stacked, the ring is at the bottom, so the light behind it moves there from the right. */
@media (max-width: 699px) {
  .att { --glow: 110% 55% at 50% 100%; grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 28px 24px 30px; }
}

/* Steps: three boxes, each a small illustration over a title and a sentence. Art text grows
   in art units as a box narrows, staying 12 px or more on screen. The boxes are not
   focusable: nothing is revealed on hover. Every animated element's base style is its
   finished state. */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.steps + figcaption { margin-top: 14px; }
.att, .step { position: relative; transition: translate 0.35s var(--ease-out); }
.step { container-type: inline-size; border-radius: 18px; }
/* Two layers that fade in on hover: a glow at the pointer (--mx and --my are set by the
   script; top centre without it) and a lit edge. */
:is(.att, .step)::after, .step::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.step::before { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgb(95 212 184 / 0.16), transparent 70%); }
:is(.att, .step)::after { border: 1px solid rgb(95 212 184 / 0.4); box-shadow: 0 24px 50px -30px rgb(95 212 184 / 0.35); }
.step .step-art {
  display: block;
  width: 100%;
  max-height: 210px;
  background: radial-gradient(60% 90% at 50% 0, rgb(95 212 184 / 0.1), transparent 70%);
  fill: none;
  pointer-events: none;
  transition: scale 0.5s var(--ease-out);
}
.step h3 { padding: 20px 22px 0; border-top: 1px solid var(--line); font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.step p { padding: 4px 22px 24px; color: var(--mut); font-size: 15px; }
.step text { fill: var(--mut); font-size: max(12px, calc(27.8px - 4.92cqw)); }
.step .chip-text { fill: var(--fg); }
.step :is(.chip, .line, .lock-ring, .sheet-page) { stroke: rgb(255 255 255 / 0.14); }
.step :is(.chip, .sheet-page) { fill: rgb(255 255 255 / 0.05); }
.step :is(.lock-ring, .mark-ring) { fill: #0C1211; }
.step .mark-ring { stroke: rgb(95 212 184 / 0.6); }
.step .mark-ico { color: var(--acc); }
.step .lock-ico { stroke: var(--acc); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.step .days circle { fill: var(--acc); }
.step .day-was { fill: var(--warn); opacity: 0; }
.step .day-stitch { stroke: #06100E; stroke-width: 1.8; stroke-linecap: round; }
.step-daily :is(circle, path), .step :is(.sheet, .sk) { transform-box: fill-box; transform-origin: center; }
.step-daily :is(circle, path) { transition: scale 0.35s cubic-bezier(0.3, 1.6, 0.5, 1) calc((var(--n, 0) + var(--r, 0)) * 22ms); }
.step .sheet { transition: transform 0.5s var(--ease-out); }
.step .sk { fill: rgb(255 255 255 / 0.13); transform-origin: left; }
.step .sk-hl { fill: var(--acc); opacity: 0.85; }

/* Connect: light runs one way, from the tenant to the mark. Check: fourteen days light in
   turn; one turns amber, then is mended. Report: the lines draw on. --n and --r count each
   dot and line along its row, for the stagger. */
.step-connect .comet use { animation-duration: 2.6s; animation-timing-function: linear; }
.step-connect .mid { display: inline; }
.step :is(.days, .sheet) :nth-child(7n+2) { --n: 1; }
.step :is(.days, .sheet) :nth-child(7n+3) { --n: 2; }
.step :is(.days, .sheet) :nth-child(7n+4) { --n: 3; }
.step :is(.days, .sheet) :nth-child(7n+5) { --n: 4; }
.step :is(.days, .sheet) :nth-child(7n+6) { --n: 5; }
.step :is(.days, .sheet) :nth-child(7n+7) { --n: 6; }
.step .days :nth-child(n+8) { --r: 7; }
.step .days circle { animation: lit 7s ease-in-out calc((var(--n, 0) + var(--r, 0)) * 0.28s) backwards infinite; }
.step .day-was { animation: day-was 7s ease-in-out 2.52s backwards infinite; }
.step .day-stitch { animation: day-stitch 7s ease-in-out 2.52s backwards infinite; }
.step .sk { animation: draw 6s var(--ease-out) calc((var(--n) - 1) * 0.35s) backwards infinite; }
@keyframes day-was { 0%, 8%, 50%, 100% { opacity: 0; } 16%, 40% { opacity: 1; } }
@keyframes day-stitch { 0%, 42% { opacity: 0; transform: scale(0.4); } 50%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes draw { 0%, 6%, 100% { transform: scaleX(0); } 18%, 90% { transform: none; } }

@media (hover: hover) {
  :is(.att, .step):hover::after, .step:hover::before { opacity: 1; }
  .step:hover :is(h3, .art-note) { color: var(--acc2); fill: var(--acc2); }
  .step:hover .lock-ring { stroke: var(--acc); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .att:hover { translate: 0 -4px; }
  .step:hover { translate: 0 -5px; }
  .step:hover .step-art { scale: 1.05; }
  .step:hover .comet use { animation-duration: 1.1s; }
  .step-daily:hover :is(circle, path) { scale: 1.22; }
  .step:hover .sheet { transform: translateY(-7px) rotate(-2.5deg); }
}
@media (max-width: 819px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
}
/* In a narrow box the tenant's pill grows to the left, to hold its larger text. Both moves come
   from one number, --grow (art units), and both are transforms: the pill (106 wide) is stretched
   about its right edge, and its label shifts half the growth to stay in the middle. */
@container (max-width: 290px) {
  .step .step-art { --grow: 10; }
  .step .chip { transform-box: fill-box; transform-origin: 100% 50%; scale: calc(1 + var(--grow) / 106) 1; }
  .step .chip-text { translate: calc(var(--grow) * -0.5px); }
}

/* Care: four facts in one bordered block; the hairlines between them are the gaps. */
.care { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 36px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--line); }
.care li { --i: 30px; display: grid; align-content: start; gap: 8px; padding: 24px 22px 26px; background: #090B0B; }
.care h3 { margin-top: 8px; font-size: 16px; font-weight: 600; letter-spacing: -0.015em; }
.care p { color: var(--mut); font-size: 14px; line-height: 1.45; }
@media (max-width: 899px) {
  .care { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* One column: each icon sits beside its title, with the sentence under the title. */
@media (max-width: 479px) {
  .care { grid-template-columns: minmax(0, 1fr); }
  .care li { grid-template-columns: auto 1fr; gap: 6px 12px; padding: 20px 20px 22px; }
  .care .ico { grid-row: span 2; }
  .care h3 { align-self: center; margin: 0; }
  .care p { grid-column: 2; }
}

/* Pilot */
.close {
  padding: clamp(48px, 8vw, 72px) 24px clamp(42px, 7.3vw, 66px);
  border-color: var(--line2);
  border-radius: 22px;
  background: radial-gradient(60% 120% at 50% 110%, rgb(95 212 184 / 0.26), transparent 62%), linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.01));
  text-align: center;
}
.close h2 { max-width: 12ch; margin-inline: auto; }
.close p { max-width: 40ch; margin: 14px auto 0; color: var(--mut); font-size: 17px; text-wrap: balance; }
.close h2 + p + p { margin-top: 26px; }
.close .mail { margin-top: 6px; font-size: 14px; }
.close .mail a { display: inline-block; padding: 10px 12px; }

/* Footer */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  margin-block: 110px 60px;
  color: var(--mut);
  font-size: 13px;
}
.site-footer::before { content: ""; flex-basis: 100%; border-top: 1px solid var(--line); }
.site-footer p { flex: 0 0 100%; padding-right: max(0px, calc(100% - 90ch)); }
.site-footer .footer-brand { display: flex; align-items: center; gap: 9px; margin-right: auto; color: var(--fg); font-size: 15px; font-weight: 600; }
.footer-brand svg { width: 20px; height: 20px; color: var(--acc); }
.site-footer p:nth-child(-n+3) { flex: none; padding-right: 0; }

@media (max-width: 820px) {
  .site-header .link { display: none; }
}

/* Narrow screens: the switch reads "Pause" (the full name stays for assistive technology) so the header fits on one line. */
@media (max-width: 560px) {
  .site-header { gap: 8px; }
  .site-header nav { gap: 6px; }
  .pause-more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* The narrowest phones (320 px): the header tightens so nothing scrolls sideways. */
@media (max-width: 349px) {
  .brand { gap: 8px; font-size: 16px; }
  .pause { gap: 7px; }
  .site-header .btn { padding-inline: 10px; }
}

/* Windows contrast themes replace the page's colours with the visitor's own. What the page
   drew in its own colours where the browser does not look (words inside pictures, the cells'
   fill and hatching, the lit look) is drawn again here in the theme's colours. */
@media (forced-colors: active) {
  svg text { fill: CanvasText !important; }
  .flow-stage i[data-state="evidence"], .k-evidence::before { background: Highlight; }
  i[data-state="outside"], .k-outside::before { forced-color-adjust: none; background: repeating-linear-gradient(135deg, CanvasText 0 1.5px, transparent 1.5px 5px); }
  .chooser [data-evidence] { outline: calc(var(--lit, 0) * 2px) solid Highlight; }
}