/* Tokens: mirror of packages/ui/tokens.css (design revision 2). */
:root {
  --font-ui: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num: "Manrope Variable", "Manrope", "Inter", system-ui, sans-serif;
  --num: tabular-nums lining-nums;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px;
  --radius-s: 6px; --radius-m: 10px; --radius-l: 14px; --radius-full: 9999px;
  --content: 1200px;
  --prose: 64ch;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --d-fast: 120ms; --d-base: 200ms; --d-chart: 280ms; --d-draw: 900ms;
  --o-area: 0.22;
}
:root, [data-theme="light"] {
  color-scheme: light;
  --canvas: #f4f6fb; --paper: #ffffff; --surface: #f1f4f9;
  --ink: #0f172a; --ink-2: #475569; --ink-3: #5d6b80;
  --rule: #e2e8f0; --grid: #edf1f7; --focus: #1f68bd;
  --primary: #0d7d73; --on-primary: #ffffff;
  --primary-container: #d7f3ef; --on-primary-container: #064e48;
  --exceed: #c8322f; --exceed-tint: #c8322f2e; --exceed-container: #fde8e7; --on-exceed-container: #9b1c1a;
  --nav-bg: #0f1b3d; --nav-ink: #b4c0de; --nav-ink-strong: #ffffff; --nav-hover: #172650; --nav-active: #1f3270; --nav-indicator: #2dd4bf;
  --series-current: #2a78d6; --series-treated: #0d9488; --series-appetite: #475569;
  --cat-1: #2a78d6; --cat-2: #eb6834; --cat-3: #1aa674; --cat-4: #c58600; --cat-5: #e56997; --cat-6: #008300; --cat-7: #5545b8; --cat-other: #94a3b8;
  --chip: #0f172a; --on-chip: #ffffff;
  --shadow-card: 0 1px 2px #0f172a0f, 0 4px 16px #0f172a0f;
  --shadow-hero: 0 2px 4px #0f172a14, 0 24px 48px #0f172a2e;
}
[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #0f1215; --paper: #171b1f; --surface: #1d2226;
  --ink: #eef1f4; --ink-2: #b6bdc6; --ink-3: #858d97;
  --rule: #2b3137; --grid: #22272c; --focus: #6da7ec;
  --primary: #2dd4bf; --on-primary: #042f2c;
  --primary-container: #0f3f3b; --on-primary-container: #a7f3e9;
  --exceed: #f87171; --exceed-tint: #f871713d; --exceed-container: #431a1f; --on-exceed-container: #fecaca;
  --nav-bg: #0b0c0e; --nav-ink: #a3a8b0; --nav-ink-strong: #ffffff; --nav-hover: #191b1f; --nav-active: #1b2b55; --nav-indicator: #2dd4bf;
  --series-current: #3987e5; --series-treated: #2dd4bf; --series-appetite: #adb2b9;
  --cat-1: #3987e5; --cat-2: #d95926; --cat-3: #199e70; --cat-4: #c98500; --cat-5: #d55181; --cat-6: #008300; --cat-7: #9085e9; --cat-other: #64748b;
  --chip: #eef1f4; --on-chip: #0f172a;
  --shadow-card: 0 0 0 1px #2b3137;
  --shadow-hero: 0 0 0 1px #2b3137, 0 24px 48px #00000080;
}
@media (prefers-reduced-motion: reduce) {
  :root { --d-fast: 0ms; --d-base: 0ms; --d-chart: 0ms; --d-draw: 0ms; }
  html { scroll-behavior: auto !important; }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font: 400 1rem/1.55 var(--font-ui);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--primary); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--primary-container); color: var(--on-primary-container); }
.num { font-variant-numeric: var(--num); }
.wrap { width: 100%; max-width: var(--content); margin: 0 auto; padding: 0 var(--s-6); }
.skip { position: absolute; left: -9999px; top: var(--s-2); }
.skip:focus { left: var(--s-4); z-index: 10; background: var(--paper); color: var(--ink); padding: var(--s-2) var(--s-4); border-radius: var(--radius-m); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Buttons (packages/ui Button) */
.btn {
  white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 44px; padding: 0 var(--s-5); border-radius: var(--radius-m);
  font: 600 0.9375rem/1 var(--font-ui); text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-card); }
.btn-bright { background: var(--nav-indicator); color: #042f2c; }
.btn-ghost-nav { background: transparent; color: var(--nav-ink-strong); border-color: #ffffff38; }
.btn-ghost-nav:hover { background: var(--nav-hover); }
.btn-secondary { background: var(--paper); color: var(--ink); border-color: var(--rule); }
.btn-secondary:hover { border-color: var(--ink-3); background: var(--surface); text-decoration: none; }
.btn svg { width: 16px; height: 16px; stroke-width: 1.75; }

/* Chips and badges (packages/ui Badge) */
.badge {
  display: inline-flex; align-items: center; gap: var(--s-1); white-space: nowrap;
  border-radius: var(--radius-full); padding: 2px var(--s-2); font: 600 0.75rem/1.4 var(--font-ui);
}
.badge svg { width: 14px; height: 14px; stroke-width: 2; }
.badge-exceed { background: var(--exceed-container); color: var(--on-exceed-container); }

/* Header and hero on the navy of the product's navigation */
.hero { background: var(--nav-bg); color: var(--nav-ink); padding-bottom: var(--s-10); position: relative; }
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: #ffffff14;
}
.topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); height: 72px; }
.brand { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--nav-ink-strong); text-decoration: none; font: 700 1.1875rem/1 var(--font-ui); letter-spacing: -0.02em; }
.brand svg { width: 34px; height: 34px; }
.topnav { display: flex; align-items: center; gap: var(--s-1); }
.topnav a.link { color: var(--nav-ink); text-decoration: none; font: 500 0.875rem/1 var(--font-ui); padding: var(--s-3); border-radius: var(--radius-m); white-space: nowrap; }
.topnav a.link:hover { color: var(--nav-ink-strong); background: var(--nav-hover); }
.icon-btn {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full); border: 1px solid #ffffff2e; background: transparent; color: var(--nav-ink-strong); cursor: pointer; margin: 0 var(--s-2);
}
.icon-btn:hover { background: var(--nav-hover); }
.icon-btn svg { width: 18px; height: 18px; stroke-width: 1.75; }
[data-theme="dark"] .icon-sun, [data-theme="light"] .icon-moon { display: inline; }
[data-theme="dark"] .icon-moon, [data-theme="light"] .icon-sun { display: none; }

.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-9); align-items: center; padding-top: var(--s-9); }
.hero h1 {
  margin: 0; color: var(--nav-ink-strong); font: 700 clamp(2.4rem, 4.6vw, 3.75rem)/1.04 var(--font-ui); letter-spacing: -0.03em; text-wrap: balance;
}
.hero .lead { margin: var(--s-6) 0 0; font-size: 1.125rem; line-height: 1.6; max-width: 46ch; color: var(--nav-ink); text-wrap: pretty; }
.hero .actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-7); }
.hero .fine { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; gap: var(--s-3); font-size: 0.875rem; color: var(--nav-ink); max-width: 50ch; }
.hero .fine li { display: flex; gap: var(--s-2); align-items: flex-start; }
.hero .fine svg { flex: 0 0 18px; width: 18px; height: 18px; color: var(--nav-indicator); margin-top: 2px; stroke-width: 2; }

/* The hero chart card: the product's loss exceedance curve with its reading line */
.chart-card {
  background: var(--paper); color: var(--ink); border-radius: var(--radius-l); box-shadow: var(--shadow-hero);
  padding: var(--s-6) var(--s-6) var(--s-5); position: relative; margin: 0;
}
.chart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.chart-head .label { font: 600 0.8125rem/1.4 var(--font-ui); color: var(--ink-2); }
.reading {
  margin: var(--s-3) 0 var(--s-1); font: 600 1.375rem/1.3 var(--font-ui); letter-spacing: -0.01em; min-height: 2.6em; text-wrap: balance;
}
.toggle {
  display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer; user-select: none;
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink); border-radius: var(--radius-full);
  padding: 6px var(--s-3) 6px var(--s-2); font: 600 0.8125rem/1 var(--font-ui);
}
.toggle .sw { width: 28px; height: 16px; border-radius: 8px; background: var(--rule); position: relative; transition: background var(--d-fast) var(--ease); }
.toggle .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); box-shadow: 0 1px 2px #0003; transition: transform var(--d-fast) var(--ease); }
.toggle[aria-pressed="true"] { border-color: var(--series-treated); }
.toggle[aria-pressed="true"] .sw { background: var(--series-treated); }
.toggle[aria-pressed="true"] .sw::after { transform: translateX(12px); }
.plot { display: block; width: 100%; height: auto; margin-top: var(--s-2); touch-action: pan-y; cursor: crosshair; border-radius: var(--radius-m); }
.plot text { font: 500 12.5px var(--font-ui); fill: var(--ink-3); font-variant-numeric: var(--num); }
.plot .grid line { stroke: var(--grid); stroke-width: 1; }
.plot .base { stroke: var(--rule); stroke-width: 1; }
.plot .cur { stroke: var(--series-current); stroke-width: 2.5; fill: none; stroke-linejoin: round; }
.plot .trt { stroke: var(--series-treated); stroke-width: 2.5; fill: none; stroke-linejoin: round; transition: opacity var(--d-chart) var(--ease); }
.plot .app { stroke: var(--series-appetite); stroke-width: 1.5; stroke-dasharray: 6 5; fill: none; }
.plot .apt { fill: var(--paper); stroke: var(--series-appetite); stroke-width: 1.5; }
.plot .exc { fill: var(--exceed-tint); }
.plot .rl { stroke: var(--ink); stroke-width: 1; }
.plot .chip rect { fill: var(--chip); }
.plot .chip text { fill: var(--on-chip); font: 600 13px var(--font-ui); }
.plot .dot { stroke: var(--paper); stroke-width: 2.5; }
.plot .draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
.plot.pre .draw { stroke-dashoffset: 1; }
.plot .draw { transition: stroke-dashoffset var(--d-draw) var(--ease); }
.legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-3); font: 500 0.8125rem/1.4 var(--font-ui); color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: var(--s-2); }
.legend i { display: inline-block; width: 18px; height: 0; border-top: 2.5px solid; }
.legend .l-cur { border-color: var(--series-current); }
.legend .l-trt { border-color: var(--series-treated); }
.legend .l-app { border-top: 1.5px dashed var(--series-appetite); }
.legend .l-exc { height: 10px; border: 0; background: var(--exceed-tint); border-radius: 2px; box-shadow: inset 0 0 0 1px var(--exceed); }
.legend [hidden] { display: none; }
.caption { margin: var(--s-3) 0 0; font-size: 0.8125rem; color: var(--ink-3); }
details.table-view { margin-top: var(--s-2); font-size: 0.8125rem; color: var(--ink-2); }
details.table-view summary { cursor: pointer; color: var(--primary); font-weight: 600; width: fit-content; }
details.table-view table { margin-top: var(--s-3); }

/* Sections on the canvas */
main section { padding: var(--s-10) 0 0; }
main section:first-child { padding-top: var(--s-10); }
.sec-head { max-width: 760px; margin-bottom: var(--s-7); }
.sec-head h2 { margin: 0; font: 700 clamp(1.6rem, 2.6vw, 2.125rem)/1.18 var(--font-ui); letter-spacing: -0.02em; text-wrap: balance; }
.sec-head p { margin: var(--s-4) 0 0; color: var(--ink-2); font-size: 1.0625rem; max-width: var(--prose); text-wrap: pretty; }
.card { background: var(--paper); border-radius: var(--radius-l); box-shadow: var(--shadow-card); padding: var(--s-6); }
.card h3 { margin: 0; font: 600 1rem/1.4 var(--font-ui); }
.card .sub { margin: var(--s-1) 0 0; font-size: 0.8125rem; color: var(--ink-2); }

/* KPI tiles (MetricFigure) */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.tile .k { font: 500 0.8125rem/1.4 var(--font-ui); color: var(--ink-2); text-decoration: underline dotted; text-underline-offset: 3px; }
.tile .v { display: block; margin-top: var(--s-2); font: 700 1.875rem/1.1 var(--font-num); font-variant-numeric: var(--num); letter-spacing: -0.01em; }
.tile .v.exceed { color: var(--exceed); }
.tile .d { margin-top: var(--s-2); font-size: 0.8125rem; color: var(--ink-3); }
.meter { position: relative; height: 8px; border-radius: 4px; background: var(--surface); margin-top: var(--s-3); }
.meter b { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--exceed); }
.meter s { position: absolute; top: -4px; width: 2px; height: 16px; background: var(--ink); }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4); margin-top: var(--s-4); }
.bars { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; gap: var(--s-4); }
.bars li { display: grid; gap: 6px; font-size: 0.875rem; }
.bars .row { display: flex; justify-content: space-between; gap: var(--s-4); }
.bars .row b { font-variant-numeric: var(--num); }
.bars .track { height: 8px; border-radius: 4px; background: var(--surface); }
.bars .fill { height: 8px; border-radius: 4px; }
.cat { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--ink-3); }
.cat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.cat span { color: var(--ink-3); }
.actions-list { list-style: none; margin: var(--s-5) 0 0; padding: 0; }
.actions-list li { border-top: 1px solid var(--rule); font-size: 0.875rem; }
.actions-list li:first-child { border-top: 0; }
.actions-list .what { font-weight: 600; }
.actions-list .cost { color: var(--ink-3); font-size: 0.8125rem; grid-column: 1; }
.actions-list .gain { grid-row: 1 / span 2; grid-column: 2; align-self: center; text-align: right; font: 700 1.125rem/1.2 var(--font-num); color: var(--series-treated); font-variant-numeric: var(--num); }
.actions-list .gain small { display: block; font: 500 0.75rem/1.4 var(--font-ui); color: var(--ink-3); }
.total { margin-top: var(--s-4); padding: var(--s-4); border-radius: var(--radius-m); background: var(--primary-container); color: var(--on-primary-container); font-size: 0.875rem; font-weight: 600; }

/* Comparison table */
.table-card { padding: var(--s-2) var(--s-2) var(--s-1); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
th, td { text-align: left; padding: var(--s-4); border-bottom: 1px solid var(--rule); vertical-align: top; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
thead th { font: 600 0.8125rem/1.4 var(--font-ui); color: var(--ink-3); }
thead th.us { color: var(--primary); }
tbody th { font-weight: 600; }
td.them { color: var(--ink-2); }
td.us { font-weight: 500; }
td.us svg { width: 16px; height: 16px; color: var(--primary); vertical-align: -3px; margin-right: var(--s-2); stroke-width: 2.25; }
.table-view table th, .table-view table td { padding: var(--s-2) var(--s-3); }

/* Steps: a real sequence, so numbered */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-4); counter-reset: step; }
.steps li { position: relative; padding-top: var(--s-6); }
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; left: 0; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--nav-bg); color: var(--nav-ink-strong); font: 700 0.8125rem/1 var(--font-num); z-index: 1;
}
[data-theme="dark"] .steps li::before { background: var(--nav-active); }
.steps li::after { content: ""; position: absolute; top: 0; left: 28px; right: calc(-1 * var(--s-4)); height: 2px; margin-top: -1px; background: var(--rule); }
.steps li:last-child::after { display: none; }
.steps h3 { margin: var(--s-3) 0 var(--s-2); font: 600 1.0625rem/1.35 var(--font-ui); }
.steps p { margin: 0; color: var(--ink-2); font-size: 0.9375rem; }
.loop { margin-top: var(--s-7); display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-5) var(--s-6); border-radius: var(--radius-l); border: 1px dashed var(--rule); }
.loop svg { flex: 0 0 22px; width: 22px; height: 22px; color: var(--primary); stroke-width: 1.75; margin-top: 2px; }
.loop p { margin: 0; color: var(--ink-2); max-width: 80ch; }
.loop b { color: var(--ink); }

/* Value items */
.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; background: var(--paper); border-radius: var(--radius-l); box-shadow: var(--shadow-card); overflow: hidden; }
.values div { padding: var(--s-6); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.values div:nth-child(3n) { border-right: 0; }
.values div:nth-last-child(-n+3) { border-bottom: 0; }
.values svg { width: 22px; height: 22px; color: var(--primary); stroke-width: 1.75; }
.values h3 { margin: var(--s-3) 0 var(--s-2); font: 600 1.0625rem/1.35 var(--font-ui); }
.values p { margin: 0; color: var(--ink-2); font-size: 0.9375rem; }

/* Scope */
.scope { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.chips span { display: inline-flex; align-items: center; gap: var(--s-2); padding: 6px var(--s-3); border-radius: var(--radius-full); background: var(--surface); font: 500 0.875rem/1.2 var(--font-ui); }
.chips span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.card p { color: var(--ink-2); font-size: 0.9375rem; margin: var(--s-3) 0 0; }
.card p:first-of-type { margin-top: var(--s-3); }
.facts { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.facts li { display: flex; gap: var(--s-3); font-size: 0.9375rem; color: var(--ink-2); }
.facts svg { flex: 0 0 18px; width: 18px; height: 18px; color: var(--primary); stroke-width: 1.9; margin-top: 3px; }

/* Contact */
.contact { margin-top: var(--s-10); background: var(--nav-bg); color: var(--nav-ink); border-radius: var(--radius-l); padding: var(--s-9) var(--s-8); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: center; }
.contact h2 { margin: 0; color: var(--nav-ink-strong); font: 700 clamp(1.6rem, 2.8vw, 2.25rem)/1.15 var(--font-ui); letter-spacing: -0.02em; text-wrap: balance; }
.contact p { margin: var(--s-4) 0 0; font-size: 1.0625rem; max-width: 52ch; }
.contact .who { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-6); }
.contact .who img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: 0 0 72px; box-shadow: 0 0 0 3px var(--nav-active); }
.contact .who b { display: block; color: var(--nav-ink-strong); font-weight: 600; }
.contact .who span.role { display: block; color: var(--nav-ink); font-size: 0.9375rem; margin-top: 2px; }
.contact .panel { background: var(--nav-hover); border-radius: var(--radius-l); padding: var(--s-6); }
.contact .panel .btn { width: 100%; min-height: 48px; font-size: 1rem; }
.contact .addr { margin-top: var(--s-4); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); font-size: 0.9375rem; color: var(--nav-ink-strong); }
.contact .addr button { background: transparent; border: 1px solid #ffffff38; color: var(--nav-ink-strong); border-radius: var(--radius-m); padding: 6px var(--s-3); font: 600 0.8125rem/1 var(--font-ui); cursor: pointer; }
.contact .addr button:hover { background: var(--nav-active); }
.contact .note { margin: var(--s-4) 0 0; font-size: 0.8125rem; color: var(--nav-ink); }

/* The risk index: one risk measured, then all risks on one map */
.index-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-4); align-items: stretch; }
.scn { margin: var(--s-5) 0 0; padding: var(--s-4); border-radius: var(--radius-m); background: var(--surface); }
.scn b { display: block; font: 600 1rem/1.4 var(--font-ui); }
.scn .cat { margin-top: var(--s-2); }
.measure { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0 var(--s-3); margin-top: var(--s-5); }
.measure .n { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--nav-bg); color: var(--nav-ink-strong); font: 700 0.75rem/1 var(--font-num); }
[data-theme="dark"] .measure .n { background: var(--nav-active); }
.measure .n.eq { background: var(--primary); color: var(--on-primary); font-size: 0.9375rem; }
.measure .q { font: 600 0.875rem/26px var(--font-ui); color: var(--ink-2); }
.measure .big { display: block; margin-top: var(--s-1); font: 700 1.625rem/1.15 var(--font-num); font-variant-numeric: var(--num); letter-spacing: -0.01em; }
.measure .big small { font: 500 0.875rem/1.4 var(--font-ui); color: var(--ink-3); letter-spacing: 0; margin-left: var(--s-2); }
.measure .body { grid-column: 2; }
.card .measure p.cap { margin: var(--s-2) 0 0; font-size: 0.8125rem; color: var(--ink-3); }
.years { display: flex; gap: 4px; margin-top: var(--s-3); }
.years i { flex: 1; height: 16px; border-radius: 3px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); }
.years i.hit { background: var(--cat-1); box-shadow: none; }
.dens { display: block; width: 100%; height: auto; margin-top: var(--s-2); }
.dens text { font: 500 13px var(--font-ui); fill: var(--ink-3); font-variant-numeric: var(--num); }
.dens .lab { fill: var(--ink); font-weight: 600; }
.dens .curve { fill: none; stroke: var(--cat-1); stroke-width: 2; }
.dens .band { fill: var(--cat-1); opacity: 0.18; }
.dens .base { stroke: var(--rule); }
.dens .track { stroke: var(--surface); stroke-width: 8; stroke-linecap: round; }
.dens .bar { stroke: var(--cat-1); stroke-width: 8; stroke-linecap: round; }
.dens .hd { fill: var(--paper); stroke: var(--cat-1); stroke-width: 2.5; }
.dens .md { fill: var(--ink); stroke: var(--paper); stroke-width: 2; }
.dens .tick { stroke: var(--ink-3); stroke-dasharray: 2 3; }
.outcome { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4); margin-top: var(--s-3); padding: var(--s-4); border-radius: var(--radius-m); background: var(--primary-container); color: var(--on-primary-container); }
.outcome b { display: block; font: 700 1.375rem/1.15 var(--font-num); font-variant-numeric: var(--num); }
.outcome span { display: block; margin-top: var(--s-1); font-size: 0.8125rem; line-height: 1.4; }

.map-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-3) var(--s-5); }
.map-head > div { max-width: 46ch; }
.seg { display: inline-flex; padding: 3px; border-radius: var(--radius-full); background: var(--surface); border: 1px solid var(--rule); }
.seg button { min-height: 34px; padding: 0 var(--s-3); border: 0; border-radius: var(--radius-full); background: transparent; color: var(--ink-2); font: 600 0.8125rem/1 var(--font-ui); cursor: pointer; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-card); }
[data-theme="dark"] .seg button[aria-pressed="true"] { background: var(--primary-container); color: var(--on-primary-container); box-shadow: none; }
.map-reading { margin: var(--s-5) 0 0; font: 600 1.1875rem/1.35 var(--font-ui); letter-spacing: -0.01em; min-height: 2.7em; text-wrap: balance; }
.map { display: block; width: 100%; height: auto; margin-top: var(--s-2); touch-action: pan-y; border-radius: var(--radius-m); }
.map text { font: 500 12.5px var(--font-ui); fill: var(--ink-3); font-variant-numeric: var(--num); }
.map .grid line { stroke: var(--grid); stroke-width: 1; }
.map .base { stroke: var(--rule); stroke-width: 1; }
.map .iso { fill: none; stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.75; }
.map .iso-l { font-size: 11.5px; paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.map .b { stroke: var(--paper); stroke-width: 2; cursor: pointer; transition: opacity var(--d-base) var(--ease); }
.map .b.on { stroke: var(--ink); stroke-width: 2.5; }
.map.dim .b:not(.on) { opacity: 0.4; }
.map .rng { stroke: var(--ink); stroke-width: 1.5; opacity: 0.55; }
.map .rng-cap { stroke: var(--ink); stroke-width: 1.5; opacity: 0.55; }
.map .dl { fill: var(--ink); font-weight: 600; paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.pick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.pick-title { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-3); font: 600 0.9375rem/1.4 var(--font-ui); }
.pick-title .cat { font-weight: 500; }
.pick .k { display: block; font-size: 0.75rem; line-height: 1.35; color: var(--ink-3); }
.pick .v { display: block; margin-top: 2px; font: 700 1.125rem/1.2 var(--font-num); font-variant-numeric: var(--num); }
.chips.sm { margin-top: var(--s-4); }
.chips.sm span { padding: 4px var(--s-3); font-size: 0.8125rem; }
.map-note { margin: var(--s-3) 0 0; font-size: 0.8125rem; color: var(--ink-3); }
.loop.to-curve { margin-top: var(--s-4); }
.loop.to-curve a { font-weight: 600; white-space: nowrap; }

/* Hosting and sign-in */
.flow-card h3 { font-size: 1.0625rem; }
.flow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(88px, 0.55fr) minmax(0, 1fr) minmax(88px, 0.55fr) minmax(0, 1fr); align-items: stretch; margin-top: var(--s-6); }
.node { border: 1px solid var(--rule); border-radius: var(--radius-l); padding: var(--s-5); background: var(--paper); }
.node .ic { width: 24px; height: 24px; color: var(--primary); stroke-width: 1.75; }
.node b { display: block; margin-top: var(--s-3); font: 600 1rem/1.35 var(--font-ui); }
.node > span { display: block; margin-top: var(--s-1); font-size: 0.875rem; line-height: 1.5; color: var(--ink-2); }
.node .idps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-3); }
.node .idps em { font: 600 0.75rem/1.3 var(--font-ui); font-style: normal; padding: 3px var(--s-2); border-radius: var(--radius-full); background: var(--surface); color: var(--ink); }
.node.app { background: var(--nav-bg); border-color: var(--nav-bg); }
.node.app b { color: var(--nav-ink-strong); }
.node.app > span { color: var(--nav-ink); }
.node.app .brandmark { width: 26px; height: 26px; }
.node.app .idps em { background: var(--nav-active); color: var(--nav-ink-strong); }
.hop { display: flex; flex-direction: column; justify-content: center; gap: var(--s-2); padding: 0 var(--s-2); font-size: 0.75rem; line-height: 1.35; color: var(--ink-3); text-align: center; }
.hop .ar { display: flex; align-items: center; color: var(--primary); }
.hop .ar i { flex: 1; height: 2px; background: currentColor; border-radius: 1px; }
.hop .ar svg { flex: 0 0 9px; width: 9px; height: 14px; margin-left: -3px; }
.flow-facts { list-style: none; margin: var(--s-6) 0 0; padding: var(--s-5) 0 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4) var(--s-6); }
.flow-facts li { display: flex; gap: var(--s-3); font-size: 0.9375rem; color: var(--ink-2); }
.flow-facts b { color: var(--ink); font-weight: 600; }
.flow-facts svg { flex: 0 0 18px; width: 18px; height: 18px; color: var(--primary); stroke-width: 1.9; margin-top: 3px; }
.hosting { margin-top: var(--s-4); }
.card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
.badge-std { background: var(--primary-container); color: var(--on-primary-container); }
.badge-req { background: var(--surface); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule); }

@media (max-width: 1080px) {
  .index-grid { grid-template-columns: 1fr; }
  .flow-facts { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .flow { grid-template-columns: 1fr; }
  .hop { flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--s-3); padding: var(--s-1) 0 var(--s-1) var(--s-5); text-align: left; min-height: 56px; }
  .hop .ar { flex-direction: column; width: 14px; align-self: stretch; }
  .hop .ar i { width: 2px; height: auto; flex: 1; }
  .hop .ar svg { transform: rotate(90deg); margin: -3px 0 0; }
  .pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .map text { font-size: 17px; }
  .map .iso-l { font-size: 15px; }
  .map .ax-title { display: none; }
  .dens text { font-size: 16px; }
  .outcome { grid-template-columns: 1fr; }
  .map-reading { font-size: 1.0625rem; }
  .seg { display: flex; width: 100%; }
  .seg button { flex: 1; line-height: 1.2; padding: 6px var(--s-2); }
}

/* AI assistant */
.topnav a.link-ai { display: inline-flex; align-items: center; gap: 6px; }
.topnav a.link-ai svg { width: 15px; height: 15px; stroke-width: 1.9; color: var(--nav-indicator); }
.hero .fine li.ai-line { color: var(--nav-ink-strong); }
.skills { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); }
.skills li { display: grid; gap: var(--s-3); align-content: start; }
.skills .si { width: 40px; height: 40px; border-radius: var(--radius-m); display: flex; align-items: center; justify-content: center; background: var(--primary-container); color: var(--on-primary-container); }
.skills .si svg { width: 20px; height: 20px; stroke-width: 1.8; }
.skills h3 { margin: 0; font: 600 1.0625rem/1.35 var(--font-ui); }
.skills p { margin: var(--s-1) 0 0; color: var(--ink-2); font-size: 0.9375rem; }
.loop.guard { margin-top: var(--s-7); padding: var(--s-5); }
@media (max-width: 1080px) {
  .skills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .skills { grid-template-columns: 1fr; }
}

footer { padding: var(--s-8) 0 var(--s-9); color: var(--ink-3); font-size: 0.8125rem; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); }
footer a { color: var(--ink-2); }

/* Motion: one reveal per element as it scrolls into view; none when reduced motion is set */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 640ms var(--ease), transform 640ms var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.js .reveal.in { opacity: 1; transform: none; }
.bars .fill { width: var(--w); transition: width 900ms var(--ease); transition-delay: calc(200ms + var(--i, 0) * 110ms); }
.js .bars:not(.in) .fill { width: 0; }
.meter b { width: var(--w); transition: width 1000ms var(--ease) 250ms; }
.meter s { transition: opacity 300ms var(--ease) 1100ms; }
.js .meter:not(.in) b { width: 0; }
.js .meter:not(.in) s { opacity: 0; }
td.us svg path { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 420ms var(--ease); }
.js .table-card:not(.in) td.us svg path { stroke-dashoffset: 1; }
.table-card tbody tr:nth-child(1) td.us svg path { transition-delay: 300ms; }
.table-card tbody tr:nth-child(2) td.us svg path { transition-delay: 450ms; }
.table-card tbody tr:nth-child(3) td.us svg path { transition-delay: 600ms; }
.table-card tbody tr:nth-child(4) td.us svg path { transition-delay: 750ms; }
.steps li::after { background: linear-gradient(var(--primary), var(--primary)) left / 0% 100% no-repeat, var(--rule); transition: background-size 520ms var(--ease); transition-delay: calc(300ms + var(--i, 0) * 260ms); }
.steps.in li::after { background-size: 100% 100%; }
.steps li::before { transition: transform 360ms var(--ease), background 360ms var(--ease); transition-delay: calc(var(--i, 0) * 260ms); }
.js .steps:not(.in) li::before { transform: scale(0.4); }
.js .steps:not(.in) li h3, .js .steps:not(.in) li p { opacity: 0; transform: translateY(10px); }
.steps li h3, .steps li p { transition: opacity 500ms var(--ease), transform 500ms var(--ease); transition-delay: calc(120ms + var(--i, 0) * 260ms); }
.loop.in svg { animation: spin 1100ms var(--ease) 600ms 1 both; }
@keyframes spin { from { transform: rotate(-360deg); } to { transform: rotate(0); } }

/* Planned actions you can switch on and off */
.act { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 2px var(--s-3); align-items: start; width: 100%; padding: var(--s-3) 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: var(--radius-s); }
.act .box { grid-row: 1 / span 2; width: 18px; height: 18px; margin-top: 2px; border-radius: 5px; border: 1.5px solid var(--ink-3); display: flex; align-items: center; justify-content: center; transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); }
.act .box svg { width: 12px; height: 12px; color: var(--paper); stroke-width: 3; opacity: 0; transition: opacity var(--d-fast) var(--ease); }
.act[aria-pressed="true"] .box { background: var(--series-treated); border-color: var(--series-treated); }
.act[aria-pressed="true"] .box svg { opacity: 1; }
.act .what { font-weight: 600; }
.act .cost { grid-column: 2; color: var(--ink-3); font-size: 0.8125rem; }
.act .gain { grid-column: 3; grid-row: 1 / span 2; align-self: center; text-align: right; font: 700 1.125rem/1.2 var(--font-num); color: var(--series-treated); font-variant-numeric: var(--num); transition: color var(--d-base) var(--ease), opacity var(--d-base) var(--ease); }
.act .gain small { display: block; font: 500 0.75rem/1.4 var(--font-ui); color: var(--ink-3); }
.act[aria-pressed="false"] .what, .act[aria-pressed="false"] .gain { color: var(--ink-3); }
.act[aria-pressed="false"] .gain { opacity: 0.7; }
.act[aria-pressed="false"] .gain .amt { text-decoration: line-through; }
.act:hover .what { text-decoration: underline; text-underline-offset: 3px; }
.total b { display: block; transition: opacity var(--d-base) var(--ease); }
.total span { display: block; margin-top: var(--s-2); font-weight: 500; }

/* Compact bar once the hero has scrolled away */
.stickybar { position: fixed; top: 0; left: 0; right: 0; z-index: 20; background: var(--nav-bg); box-shadow: 0 1px 0 #ffffff14, 0 8px 24px #0f172a33; transform: translateY(-100%); visibility: hidden; transition: transform var(--d-chart) var(--ease), visibility 0s linear var(--d-chart); }
.stickybar.show { transform: none; visibility: visible; transition: transform var(--d-chart) var(--ease); }
.stickybar .topbar { height: 60px; }
.stickybar .brand svg { width: 28px; height: 28px; }
main section, #contact { scroll-margin-top: 72px; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .bars:not(.in) .fill, .js .meter:not(.in) b { opacity: 1; transform: none; transition: none; }
  .js .bars:not(.in) .fill, .js .meter:not(.in) b { width: var(--w); }
  .js .meter:not(.in) s, .js .steps:not(.in) li h3, .js .steps:not(.in) li p { opacity: 1; transform: none; }
  .js .steps:not(.in) li::before { transform: none; }
  .js .table-card:not(.in) td.us svg path { stroke-dashoffset: 0; }
  .loop.in svg { animation: none; }
}

/* Responsive */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-8); }
  .hero .lead, .hero .fine { max-width: 60ch; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-8); }
  .steps li::after { display: none; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact { grid-template-columns: 1fr; padding: var(--s-8) var(--s-6); }
}
@media (max-width: 1180px) {
  .topnav a.link:not(.keep) { display: none; }
}
@media (max-width: 560px) {
  .topnav a.link.keep { display: none; }
}
@media (max-width: 820px) {
  .pair, .scope { grid-template-columns: 1fr; }
  .values { grid-template-columns: 1fr; }
  .values div { border-right: 0 !important; border-bottom: 1px solid var(--rule) !important; }
  .values div:last-child { border-bottom: 0 !important; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 var(--s-4); }
  .hero { padding-bottom: var(--s-8); }
  .chart-card { padding: var(--s-4); }
  .reading { font-size: 1.125rem; }
  .plot text { font-size: 19px; }
  .plot .chip text { font-size: 19px; }
  .plot .ax-title { display: none; }
  .steps { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr; }
  .topnav .btn { padding: 0 var(--s-3); }
  .brand span { display: none; }
}

/* Three value items in one row (Getting started) */
.values.values-3 div:nth-last-child(-n+3) { border-bottom: 0; }

/* Documentation page */
.hero.hero-docs { padding-bottom: var(--s-9); }
.hero-docs .doc-title { padding-top: var(--s-8); max-width: 760px; }
.hero-docs h1 { font-size: clamp(2rem, 3.6vw, 2.75rem); }
.docs { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: var(--s-9); padding-top: var(--s-9); align-items: start; }
.toc { position: sticky; top: 84px; font-size: 0.875rem; }
.toc h2 { margin: 0 0 var(--s-3); font: 600 0.75rem/1.4 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc ol ol { padding-left: var(--s-4); margin: 2px 0 var(--s-2); }
.toc a { display: block; padding: 6px var(--s-3); border-radius: var(--radius-s); color: var(--ink-2); text-decoration: none; }
.toc a:hover { background: var(--surface); color: var(--ink); }
.toc a[aria-current="true"] { background: var(--primary-container); color: var(--on-primary-container); font-weight: 600; }
.doc { max-width: 78ch; min-width: 0; }
.doc > section, main .doc > section:first-child { padding: 0 0 var(--s-9); scroll-margin-top: 84px; }
.doc h2 { margin: 0 0 var(--s-4); font: 700 clamp(1.5rem, 2.4vw, 1.875rem)/1.2 var(--font-ui); letter-spacing: -0.02em; }
.doc h3 { margin: var(--s-7) 0 var(--s-3); font: 600 1.1875rem/1.35 var(--font-ui); scroll-margin-top: 84px; }
.doc h4 { margin: var(--s-5) 0 var(--s-2); font: 600 1rem/1.4 var(--font-ui); }
.doc p, .doc li { color: var(--ink-2); font-size: 1rem; line-height: 1.65; }
.doc p { margin: var(--s-3) 0 0; }
.doc ul, .doc ol.list { margin: var(--s-3) 0 0; padding-left: var(--s-6); }
.doc li + li { margin-top: var(--s-2); }
.doc b, .doc strong { color: var(--ink); }
.doc code { font: 500 0.875em/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; background: var(--surface); padding: 2px 6px; border-radius: var(--radius-s); color: var(--ink); overflow-wrap: anywhere; }
.doc .lead-p { font-size: 1.0625rem; }
.doc .card { margin-top: var(--s-5); }
.doc table { margin-top: var(--s-4); font-size: 0.9375rem; }
.doc .table-card { padding: var(--s-2); margin-top: var(--s-4); }
.doc td, .doc th { padding: var(--s-3) var(--s-4); }
.doc td { color: var(--ink-2); }
.note-box { margin-top: var(--s-5); padding: var(--s-4) var(--s-5); border-radius: var(--radius-m); background: var(--primary-container); color: var(--on-primary-container); font-size: 0.9375rem; }
.note-box b { color: inherit; }
.doc .flow { margin-top: var(--s-5); }
.faq details { border-top: 1px solid var(--rule); padding: var(--s-4) 0; }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.faq details p { margin-top: var(--s-2); }
.back { color: var(--nav-ink); text-decoration: none; font: 500 0.875rem/1 var(--font-ui); display: inline-flex; gap: var(--s-2); align-items: center; }
.back:hover { color: var(--nav-ink-strong); }
@media (max-width: 960px) {
  .docs { grid-template-columns: 1fr; gap: var(--s-6); }
  .toc { position: static; }
}