/* ==========================================================================
   Bits & Algorithms design system
   Plain CSS, no build step, opens from disk.

   Reliability note
   Colours are hex rather than oklch, and layout is flexbox and grid only.
   Modern features are used strictly as progressive enhancement, each behind
   @supports, so a browser that does not know them shows a correct static page
   rather than a broken one. Nothing here depends on JavaScript to be readable.

   Palette logic
   Deep ink base, because this is sold to compliance and security committees in
   financial services and it has to feel institutional. One electric blue for
   action and emphasis. One cyan reserved for data and diagrams so charts never
   compete with buttons. Warm paper rather than pure white, so long pages of
   text do not glare.
   ========================================================================== */

:root {
  /* Base */
  --ink-950: #04070e;
  --ink-900: #080d1a;
  --ink-850: #0c1426;
  --ink-800: #111c33;
  --ink-700: #1a2b4a;
  --ink-600: #26405f;
  --ink-500: #3c5a7d;
  --ink-400: #5a7595;   /* muted text on dark */
  --ink-300: #8fa4bf;
  --ink-200: #c3d0e0;
  --ink-100: #dde5ef;
  --ink-50:  #eef2f8;

  /* Slate text for light backgrounds */
  --slate-700: #3f4e63;   /* 7.3:1 on paper, body text */
  --slate-500: #5b6b83;   /* 4.9:1 on paper, muted text */

  /* Action */
  --blue-300: #8ab4ff;
  --blue-400: #5b9bff;    /* on dark only */
  --blue-500: #3d7bff;
  --blue-600: #2a5fd9;    /* 4.9:1 with white text */
  --blue-700: #1f489f;

  /* Data and diagrams, never buttons */
  --cyan-400: #2dd4d4;
  --cyan-600: #0e8f96;

  /* Rare, for risk and cost figures */
  --amber-400: #ffb84d;
  --rose-500: #e8546b;

  --paper: #f7f9fc;
  --white: #ffffff;

  --max: 1200px;
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --pill: 999px;

  --shadow-sm: 0 1px 3px rgb(4 7 14 / 0.06), 0 6px 16px -8px rgb(4 7 14 / 0.12);
  --shadow-md: 0 18px 40px -22px rgb(4 7 14 / 0.3);
  --shadow-lg: 0 34px 70px -30px rgb(4 7 14 / 0.42);
  --glow: 0 14px 40px -14px rgb(61 123 255 / 0.55);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Sideways overflow is clipped on the root, not on body.
   This matters more than it looks. Putting overflow on body turns body into a
   scroll container, and the scroll driven reveal animations further down measure
   themselves against the nearest scroll container. Body never scrolls, so those
   animations could sit at their starting state, which is opacity zero. That is
   the exact failure this stylesheet is built to avoid. On the root element the
   value is handed to the page viewport instead and nothing is trapped.
   clip is used where available because, unlike hidden, it creates no scroll
   container at all. hidden is the fallback for older browsers. */
html { overflow-x: hidden; }
@supports (overflow-x: clip) { html { overflow-x: clip; } }

body {
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink-900);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:target { scroll-margin-top: 96px; }
:focus-visible { outline: 3px solid var(--blue-500); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgb(61 123 255 / 0.22); }

/* ---------- Page transitions ----------
   Cross document view transitions. Supported browsers cross fade between
   pages, which makes a multi page static site feel like an application.
   Everywhere else this rule is simply ignored. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---------- Layout ---------- */
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: 24px; }
.wrap-narrow { max-width: 800px; margin-inline: auto; padding-inline: 24px; }
.section { padding-block: clamp(64px, 9vw, 128px); }
.section-sm { padding-block: clamp(40px, 5vw, 72px); }
.dark { background: var(--ink-900); color: var(--white); }
.darker { background: var(--ink-950); color: var(--white); }
.on-white { background: var(--white); }
.grid { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.split-wide { grid-template-columns: 1.15fr 1fr; }
.center { text-align: center; }
.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.mt-20{margin-top:20px}.mt-32{margin-top:32px}.mt-40{margin-top:40px}.mt-56{margin-top:56px}
.hide { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Type ---------- */
h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }
.eyebrow {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--blue-600);
}
.dark .eyebrow, .darker .eyebrow, .eyebrow.on-dark { color: var(--blue-400); }
h1, .h1 { font-size: clamp(2.2rem, 5.6vw, 4.2rem); line-height: 1.03; letter-spacing: -0.038em; font-weight: 800; }
h2, .h2 { font-size: clamp(1.7rem, 3.9vw, 2.85rem); line-height: 1.1; letter-spacing: -0.03em; font-weight: 800; }
h3, .h3 { font-size: 1.16rem; font-weight: 750; letter-spacing: -0.012em; line-height: 1.35; }
.lead { font-size: clamp(1.02rem, 1.4vw, 1.2rem); color: var(--slate-500); max-width: 62ch; }
.dark .lead, .darker .lead { color: var(--ink-200); }
.muted { color: var(--slate-500); }
.dark .muted, .darker .muted { color: var(--ink-200); }
.small { font-size: 0.9rem; }
.tiny { font-size: 0.79rem; }
.strong { font-weight: 700; }
.mono { font-family: var(--mono); font-size: 0.86em; letter-spacing: -0.01em; }
.num { font-variant-numeric: tabular-nums; }
.measure { max-width: 68ch; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  border: 0; cursor: pointer; border-radius: var(--pill);
  /* Without these the header button gets squeezed by the nav flex row and the
     last character sits outside its own pill. Found by screenshot. */
  white-space: nowrap; flex: 0 0 auto;
  padding: 14px 30px; font-weight: 700; font-size: 0.97rem; letter-spacing: -0.01em;
  transition: transform 0.25s var(--ease), background 0.25s, box-shadow 0.25s, color 0.25s, border-color 0.25s;
}
.btn-primary { background: var(--blue-600); color: var(--white); box-shadow: var(--glow); }
.btn-primary:hover { background: var(--blue-700); transform: translateY(-2px); }
.btn-outline { background: transparent; border: 1.5px solid var(--ink-100); color: var(--ink-900); }
.btn-outline:hover { border-color: var(--blue-600); color: var(--blue-600); transform: translateY(-2px); }
.btn-ghost { background: rgb(255 255 255 / 0.06); border: 1.5px solid rgb(255 255 255 / 0.28); color: var(--white); }
.btn-ghost:hover { background: rgb(255 255 255 / 0.14); transform: translateY(-2px); }
.btn-sm { padding: 9px 20px; font-size: 0.86rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 13px; align-items: center; }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 80;
  background: rgb(8 13 26 / 0.86);
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
  color: var(--white);
}
@supports (backdrop-filter: blur(14px)) {
  .header { backdrop-filter: blur(14px) saturate(140%); background: rgb(8 13 26 / 0.7); }
}
.header-in { display: flex; align-items: center; gap: 16px; padding-block: 13px; }
.brand { display: flex; align-items: center; margin-right: auto; }

/* The logo is one SVG with the letters already outlined, so width and height are
   fixed by its own aspect ratio and it cannot reflow. width and height are set on
   the img tag as well, so the header does not jump while it loads. */
.brand-logo { height: 44px; width: auto; }
.footer .brand-logo { height: 52px; }
@media (max-width: 420px) { .brand-logo { height: 36px; } }
.nav ul { list-style: none; display: flex; gap: 22px; align-items: center; }
.nav li { flex: 0 0 auto; }
.nav a {
  font-size: 0.885rem; color: var(--ink-200); padding: 6px 0;
  border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s;
}
.nav a:hover { color: var(--white); }
.nav a[aria-current="page"] { color: var(--white); font-weight: 650; border-bottom-color: var(--blue-400); }
.nav-toggle {
  display: none; background: rgb(255 255 255 / 0.07); border: 1px solid rgb(255 255 255 / 0.2);
  color: var(--white); border-radius: var(--pill); padding: 9px 17px;
  font-size: 0.84rem; font-weight: 700; cursor: pointer;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--blue-600); color: var(--white); padding: 13px 22px; border-radius: 0 0 8px 0; font-weight: 700;
}
.skip:focus { left: 0; }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--ink-950); color: var(--white); }
.hero-glow {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(62% 52% at 14% 4%, rgb(61 123 255 / 0.3), transparent 62%),
    radial-gradient(48% 46% at 92% 88%, rgb(45 212 212 / 0.18), transparent 60%);
}
.hero-mesh {
  position: absolute; inset: 0; z-index: -1; opacity: 0.55;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(72% 62% at 50% 32%, #000 38%, transparent 100%);
  -webkit-mask-image: radial-gradient(72% 62% at 50% 32%, #000 38%, transparent 100%);
}
.hero-in { padding-block: clamp(76px, 11vw, 142px); position: relative; }
.hero h1 { max-width: 20ch; margin-top: 20px; }
.hero .lead { margin-top: 22px; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 9px; margin-top: 34px; }
.chip {
  border: 1px solid rgb(255 255 255 / 0.16); background: rgb(255 255 255 / 0.05);
  border-radius: var(--pill); padding: 8px 16px; font-size: 0.76rem; font-weight: 600; color: var(--ink-100);
}
@supports (backdrop-filter: blur(8px)) { .chip { backdrop-filter: blur(8px); } }

/* ---------- Cards ---------- */
.card {
  background: var(--white); border: 1px solid var(--ink-100);
  border-radius: var(--r); padding: 28px; box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s, border-color 0.3s;
}
.card-hover:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--blue-300); }
.dark .card, .darker .card {
  background: rgb(255 255 255 / 0.045); border-color: rgb(255 255 255 / 0.11); color: var(--white);
}
@supports (backdrop-filter: blur(10px)) {
  .dark .card, .darker .card { backdrop-filter: blur(10px); }
}
.dark .card-hover:hover, .darker .card-hover:hover { border-color: rgb(91 155 255 / 0.55); background: rgb(255 255 255 / 0.07); }
.card-accent { border-top: 3px solid var(--blue-500); }
.card-cyan { border-top: 3px solid var(--cyan-600); }

/* Numbered card, the number sits in the corner as a watermark */
.card-num { position: relative; overflow: hidden; }
.card-num .n {
  position: absolute; top: -10px; right: 10px; font-size: 4.6rem; font-weight: 800;
  letter-spacing: -0.05em; color: var(--ink-50); line-height: 1; pointer-events: none;
}
.dark .card-num .n, .darker .card-num .n { color: rgb(255 255 255 / 0.05); }
.card-num > * { position: relative; }

/* ---------- Stats ---------- */
.stat-value { font-size: clamp(1.9rem, 4.2vw, 3rem); font-weight: 800; letter-spacing: -0.042em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-blue { color: var(--blue-600); }
.dark .stat-blue, .darker .stat-blue { color: var(--blue-400); }
.stat-cyan { color: var(--cyan-600); }
.dark .stat-cyan, .darker .stat-cyan { color: var(--cyan-400); }
.stat-amber { color: #8a5a00; }
.dark .stat-amber, .darker .stat-amber { color: var(--amber-400); }
.stat-label { margin-top: 9px; font-size: 0.9rem; font-weight: 600; }
.stat-note { margin-top: 5px; font-size: 0.78rem; color: var(--slate-500); }
.dark .stat-note, .darker .stat-note { color: var(--ink-300); }

/* ---------- Ticker ---------- */
.ticker { overflow: hidden; white-space: nowrap; border-block: 1px solid rgb(255 255 255 / 0.1); background: var(--ink-950); padding-block: 15px; }
.ticker-track { display: inline-flex; }
@media (prefers-reduced-motion: no-preference) {
  .ticker-track { animation: ticker 46s linear infinite; will-change: transform; }
}
.ticker-track span { font-size: 0.86rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-300); padding-right: 40px; }
.ticker-track span b { color: var(--blue-400); font-weight: 700; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- Process flow diagram ---------- */
.flow { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); align-items: stretch; }
.flow-step {
  border: 1px solid var(--ink-100); border-radius: var(--r-sm); padding: 18px; background: var(--white);
  position: relative;
}
.dark .flow-step, .darker .flow-step { background: rgb(255 255 255 / 0.04); border-color: rgb(255 255 255 / 0.12); }
.flow-step .k { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue-600); }
.dark .flow-step .k, .darker .flow-step .k { color: var(--blue-400); }
.flow-step.is-manual { border-style: dashed; border-color: var(--ink-200); }
.flow-step.is-human { border-color: var(--cyan-600); box-shadow: inset 0 0 0 1px rgb(14 143 150 / 0.2); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--ink-100); border-radius: var(--r); background: var(--white); }
table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
th, td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--ink-50); vertical-align: top; }
thead th { background: var(--ink-900); color: var(--white); font-weight: 700; font-size: 0.84rem; }
thead th small { display: block; font-weight: 600; font-size: 0.68rem; letter-spacing: 0.13em; color: var(--ink-300); margin-top: 3px; }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody tr:nth-child(even) { background: #fbfcfe; }
tbody th[scope="row"] { font-weight: 650; }
td.yes { color: var(--blue-600); font-weight: 700; }
td.no { color: var(--slate-500); }
.row-mark { background: rgb(61 123 255 / 0.07) !important; }

/* ---------- Forms and calculator ---------- */
.field {
  width: 100%; border: 1px solid var(--ink-100); background: var(--white);
  border-radius: var(--r-sm); padding: 12px 14px; box-shadow: var(--shadow-sm);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field:focus { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgb(61 123 255 / 0.14); outline: none; }
.label { display: block; font-weight: 700; font-size: 0.89rem; margin-bottom: 6px; }
.hint { font-size: 0.8rem; color: var(--slate-500); margin-top: 6px; }
fieldset { border: 0; }
legend { font-weight: 800; font-size: 1.04rem; margin-bottom: 14px; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
.req { color: var(--rose-500); }
.error-msg { color: #b3243c; font-weight: 650; font-size: 0.9rem; }
.notice { border: 1px solid var(--blue-300); background: rgb(61 123 255 / 0.06); border-radius: var(--r-sm); padding: 15px 17px; font-size: 0.9rem; }
.notice-warn { border-color: var(--amber-400); background: rgb(255 184 77 / 0.1); }
.notice-todo { border-color: #d9b45a; background: #fff8e8; }
input[type="range"] { width: 100%; accent-color: var(--blue-600); height: 30px; }
.radio-row { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; padding: 11px 13px; border: 1px solid var(--ink-100); border-radius: var(--r-sm); transition: border-color 0.2s, background 0.2s; }
.radio-row:hover { border-color: var(--blue-300); background: #fbfcff; }
.radio-row input { margin-top: 5px; flex: 0 0 auto; accent-color: var(--blue-600); }
/* Highlight the chosen option. Needs :has(), and simply does nothing without it. */
.radio-row:has(input:checked) { border-color: var(--blue-500); background: rgb(61 123 255 / 0.05); }

.result { border: 1px solid var(--ink-100); border-top: 4px solid var(--ink-200); background: var(--white); border-radius: var(--r); padding: 28px; box-shadow: var(--shadow-sm); transition: border-color 0.3s; }
.result.is-live { border-top-color: var(--blue-500); }
.result-figure { font-size: clamp(1.9rem, 4.4vw, 3rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.04; font-variant-numeric: tabular-nums; }

/* ---------- Chart ---------- */
.chart { display: flex; align-items: flex-end; gap: clamp(8px, 2.6vw, 26px); height: 250px; padding-top: 18px; }
.bar-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.bar { width: 100%; max-width: 72px; min-height: 5px; border-radius: 7px 7px 0 0; background: linear-gradient(180deg, var(--blue-400), var(--blue-700)); }
.bar-label { margin-top: 10px; font-size: 0.77rem; font-weight: 700; }
.bar-value { font-size: 0.8rem; font-weight: 800; margin-bottom: 7px; }

/* ---------- Timeline ---------- */
.timeline { position: relative; padding-left: 34px; }
.timeline::before { content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px; background: var(--ink-100); }
.dark .timeline::before, .darker .timeline::before { background: rgb(255 255 255 / 0.14); }
.tl-item { position: relative; padding-bottom: 32px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before { content: ""; position: absolute; left: -30px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--blue-500); border: 3px solid var(--paper); }
.dark .tl-item::before, .darker .tl-item::before { border-color: var(--ink-900); }
.tl-item.pending::before { background: var(--ink-200); }
.tl-window { font-size: 0.73rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; color: var(--blue-600); }
.dark .tl-window, .darker .tl-window { color: var(--blue-400); }

/* ---------- FAQ ---------- */
details.faq { border: 1px solid var(--ink-100); background: var(--white); border-radius: var(--r-sm); padding: 18px 20px; box-shadow: var(--shadow-sm); }
details.faq + details.faq { margin-top: 10px; }
details.faq summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; color: var(--blue-600); font-size: 1.4rem; line-height: 1; flex: 0 0 auto; transition: transform 0.25s var(--ease); }
details.faq[open] summary::after { transform: rotate(45deg); }
details.faq p { margin-top: 12px; color: var(--slate-500); }

/* ---------- Pills ---------- */
.pill { display: inline-block; border-radius: var(--pill); padding: 5px 13px; font-size: 0.71rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.pill-blue { background: rgb(61 123 255 / 0.12); color: var(--blue-700); }
.pill-cyan { background: rgb(14 143 150 / 0.12); color: #0a6f75; }
.pill-todo { background: #fff3d4; color: #7a5600; }
.dark .pill-blue, .darker .pill-blue { background: rgb(91 155 255 / 0.16); color: var(--blue-300); }

/* ---------- Footer ---------- */
.footer { background: var(--ink-950); color: var(--ink-300); padding-block: 56px 0; }
.footer h4 { color: var(--white); font-size: 0.92rem; font-weight: 800; margin-bottom: 13px; }
.footer ul { list-style: none; }
.footer li + li { margin-top: 9px; }
.footer a:hover { color: var(--blue-400); }
.footer-bottom { border-top: 1px solid rgb(255 255 255 / 0.09); margin-top: 44px; padding-block: 18px; font-size: 0.79rem; text-align: center; }

/* ==========================================================================
   MOTION
   Entrance animation is done with CSS scroll driven animations. That removes
   the JavaScript dependency entirely: if the browser does not support it, or
   the script fails, or the file is opened in an odd way, the content is simply
   visible. There is no state in which text is stuck at zero opacity.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* The range ends inside entry, never in cover.
       This was found by testing, not by reading. An element in the last screen
       of the page can never reach a point measured in cover, because there is no
       scrolling left below it to get there, so it was being left permanently
       half transparent. Ending at entry 60% means the animation finishes as soon
       as the element is mostly on screen, which every element can reach. */
    .reveal {
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
    .reveal-up {
      animation: reveal-up linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 65%;
    }
  }
  @keyframes reveal-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes reveal-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

  /* Hero copy animates on load. Safe, because it runs once and finishes. */
  .rise { opacity: 0; animation: rise 0.85s var(--ease) forwards; animation-delay: var(--d, 0s); }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  .word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
  .word > span { display: inline-block; transform: translateY(110%); opacity: 0; animation: word-rise 0.9s var(--ease) forwards; animation-delay: var(--d, 0s); }
  @keyframes word-rise { to { transform: none; opacity: 1; } }
}
/* Anything animated on load must be visible when motion is reduced. */
@media (prefers-reduced-motion: reduce) {
  .rise, .word > span { opacity: 1; transform: none; animation: none; }
}

/* ---------- Container queries ----------
   Lets a card adapt to the space it is in rather than the width of the window,
   which matters because the same card is used in two and three column grids. */
@supports (container-type: inline-size) {
  .cq { container-type: inline-size; }
  @container (min-width: 420px) {
    .cq-row { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .g3 { grid-template-columns: 1fr; }
  .split, .split-wide { grid-template-columns: 1fr; }
  .nav ul {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink-900); border-top: 1px solid rgb(255 255 255 / 0.1);
    padding: 8px 24px 20px;
  }
  .nav ul[hidden] { display: none; }
  .nav a { display: block; padding: 13px 0; border-bottom: 1px solid rgb(255 255 255 / 0.07); }
  .nav a[aria-current="page"] { border-bottom-color: var(--blue-400); }
  .nav-toggle { display: inline-block; }
  .form-grid { grid-template-columns: 1fr; }
  .chart { height: 190px; }
}
@media (max-width: 640px) {
  .g2, .g4 { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .btn-row .btn { width: auto; flex: 1 1 auto; min-width: 46%; }
  .card-num .n { font-size: 3.4rem; }
}

/* ---------- Print. Procurement and compliance teams print these. ---------- */
@media print {
  .header, .footer, .ticker, .btn, .nav-toggle, .skip, .hero-glow, .hero-mesh { display: none !important; }
  body, .dark, .darker, .hero { background: #fff !important; color: #000 !important; }
  .card { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
  .section { padding-block: 16px; }
  h2 { break-after: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.78em; color: #555; }
}