:root {
  --paper: #f4f8f9;
  --surface: #ffffff;
  --sunk: #eaf1f3;
  --ink: #0b2545;
  --text: #2a3f55;
  --muted: #566c7f;
  --line: #d8e4e8;
  --teal: #2c6e7a;
  --teal-soft: #dff0f2;
  --teal-bright: #5faeb8;
  --gold: #c9a24b;
  --ok: #15803d;
  --ok-soft: #e3f4e8;
  --warn: #9a5b00;
  --warn-soft: #fbefd6;
  --shadow: 0 1px 2px rgba(11,37,69,.06), 0 12px 32px -12px rgba(11,37,69,.18);
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --sans: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #08182e; --surface: #0f2440; --sunk: #0c1f38; --ink: #eef4f7; --text: #c5d3de; --muted: #90a5b6;
    --line: #223a56; --teal: #7fc6cf; --teal-soft: #14384a; --teal-bright: #5faeb8; --gold: #d8b25e;
    --ok: #4ade80; --ok-soft: #12351f; --warn: #f0b64d; --warn-soft: #3a2a0c;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 16px 40px -14px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  --paper: #08182e; --surface: #0f2440; --sunk: #0c1f38; --ink: #eef4f7; --text: #c5d3de; --muted: #90a5b6;
  --line: #223a56; --teal: #7fc6cf; --teal-soft: #14384a; --teal-bright: #5faeb8; --gold: #d8b25e;
  --ok: #4ade80; --ok-soft: #12351f; --warn: #f0b64d; --warn-soft: #3a2a0c;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 16px 40px -14px rgba(0,0,0,.6);
}

*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--text);
  font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased;
}
.wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: 20px; }
a { color: var(--teal); }
h1, h2, h3 { font-family: var(--serif); color: var(--ink); margin: 0; text-wrap: balance; letter-spacing: -.01em; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--teal-bright); outline-offset: 3px; border-radius: 4px; }

/* header */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font: 600 22px/1 var(--sans); letter-spacing: -.02em; }
.brand svg { width: 34px; height: 34px; flex: none; }
nav { display: flex; align-items: center; gap: 26px; font-size: 14px; }
nav a { color: var(--text); text-decoration: none; font-weight: 500; }
nav a:hover { color: var(--ink); }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 10px; font: 600 14px/1 var(--sans); text-decoration: none; border: 1px solid transparent; cursor: pointer; }
.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover { background: var(--teal); color: #fff; }
.btn-line { border-color: var(--line); color: var(--ink); background: var(--surface); }
.btn-line:hover { border-color: var(--teal-bright); }
@media (max-width: 760px) { nav a:not(.btn) { display: none; } }

/* hero */
.hero { padding-block: 72px 56px; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.kicker { font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--teal); display: inline-flex; align-items: center; gap: 10px; }
.kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.hero h1 { font-size: clamp(38px, 5.6vw, 64px); line-height: 1.04; font-weight: 700; margin-top: 20px; }
.hero h1 em { font-style: italic; font-weight: 600; color: var(--teal); }
.lead { font-size: 18px; line-height: 1.6; margin-top: 22px; max-width: 34em; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.proof { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.proof b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; gap: 40px; } .hero { padding-block: 44px 40px; } }

/* the record */
.record { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.record-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--sunk); font: 500 12px/1.2 var(--mono); color: var(--muted); }
.record-head .ex { color: var(--warn); }
.record-body { padding: 18px; display: grid; gap: 18px; }
.rq { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.rq h3 { font: 600 17px/1.3 var(--sans); letter-spacing: -.01em; }
.rq p { font-size: 13px; color: var(--muted); margin-top: 3px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font: 600 12px/1 var(--sans); white-space: nowrap; }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.checks li { display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: center; font-size: 14px; }
.checks .tick { width: 20px; height: 20px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); display: grid; place-items: center; }
.checks .tick svg { width: 12px; height: 12px; }
.checks .val { font: 400 12px/1 var(--mono); color: var(--muted); text-align: right; }
.clock { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--sunk); border: 1px dashed var(--line); }
.clock small { display: block; font-size: 12px; color: var(--muted); }
.clock strong { font: 500 26px/1.1 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.clock .who { text-align: right; font-size: 13px; color: var(--text); }
.chain { display: grid; gap: 0; font: 400 12px/1.4 var(--mono); }
.chain div { display: grid; grid-template-columns: 22px 1fr; gap: 10px; position: relative; padding-bottom: 12px; color: var(--text); }
.chain div:last-child { padding-bottom: 0; }
.chain div::before { content: ""; position: absolute; left: 4px; top: 12px; bottom: -2px; width: 1.5px; background: var(--line); }
.chain div:last-child::before { display: none; }
.chain i { width: 10px; height: 10px; border-radius: 50%; background: var(--teal-bright); margin-top: 4px; }
.chain div:last-child i { background: var(--gold); }
.chain span { display: block; color: var(--muted); }
.chain b { font-weight: 500; color: var(--ink); }

/* sections */
section { padding-block: 84px; }
section + section { border-top: 1px solid var(--line); }
.head { max-width: 46rem; margin-bottom: 44px; }
.head h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1.1; font-weight: 700; margin-top: 14px; }
.head p { margin-top: 16px; font-size: 17px; }
@media (max-width: 700px) { section { padding-block: 56px; } }

/* areas */
.areas { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.area { padding: 26px 26px 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); grid-column: span 4; }
.area.wide { grid-column: span 6; }
.area h3 { font-size: 22px; font-weight: 600; }
.area p.sub { font-size: 14px; color: var(--muted); margin-top: 6px; }
.area ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 14.5px; }
.area li { padding-left: 18px; position: relative; }
.area li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 1.5px; background: var(--teal-bright); }
.area li b { color: var(--ink); font-weight: 600; }
.areas > .area:nth-child(3n) { border-right: 0; }
@media (max-width: 900px) { .area, .area.wide { grid-column: span 12; border-right: 0; } }

/* rulebook switch */
.switch { display: inline-flex; padding: 4px; border-radius: 12px; background: var(--sunk); border: 1px solid var(--line); gap: 4px; margin-bottom: 22px; }
.switch button { border: 0; background: transparent; color: var(--text); font: 600 14px/1 var(--sans); padding: 11px 20px; border-radius: 9px; cursor: pointer; }
.switch button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.rules { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow-x: auto; }
.rules table { width: 100%; border-collapse: collapse; min-width: 640px; }
.rules th { text-align: left; font: 500 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 14px 22px; background: var(--sunk); border-bottom: 1px solid var(--line); }
.rules td { padding: 18px 22px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 15px; }
.rules tr:last-child td { border-bottom: 0; }
.rules td:first-child { width: 28%; color: var(--ink); font-weight: 600; }
.rules td .src { display: block; margin-top: 6px; font: 400 12px/1.4 var(--mono); color: var(--teal); }
.fine { font-size: 13.5px; color: var(--muted); margin-top: 14px; }

/* evidence */
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
@media (max-width: 900px) { .two { grid-template-columns: 1fr; gap: 32px; } }
.facts { display: grid; gap: 18px; margin-top: 8px; }
.facts div { display: grid; grid-template-columns: 22px 1fr; gap: 14px; }
.facts svg { width: 22px; height: 22px; color: var(--teal); margin-top: 2px; }
.facts b { display: block; color: var(--ink); font-weight: 600; }
.facts span { font-size: 15px; }
.log { background: var(--ink); color: #cfe0ea; border-radius: 16px; padding: 22px; font: 400 12.5px/1.75 var(--mono); overflow-x: auto; box-shadow: var(--shadow); }
:root[data-theme="dark"] .log { background: #06121f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .log { background: #06121f; } }
.log .h { color: #8fa9bb; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; margin-bottom: 10px; display: flex; justify-content: space-between; gap: 12px; }
.log .row { white-space: nowrap; }
.log .t { color: #7fc6cf; } .log .a { color: #ffffff; } .log .hs { color: #c9a24b; }
.log .bad { color: #ffb4b4; }
.log .sep { border-top: 1px dashed #2a4661; margin: 12px 0; }

/* people */
.roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.role { padding: 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.role h3 { font: 600 16px/1.3 var(--sans); }
.role p { font-size: 14px; margin-top: 8px; color: var(--muted); }

/* boundaries */
.bounds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 800px) { .bounds { grid-template-columns: 1fr; } }
.bounds > div { padding: 26px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); }
.bounds h3 { font-size: 21px; font-weight: 600; }
.bounds ul { margin: 14px 0 0; padding-left: 18px; display: grid; gap: 8px; font-size: 15px; }

/* a working day */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; counter-reset: step; }
.step { padding: 24px; border-right: 1px solid var(--line); display: grid; gap: 10px; align-content: start; }
.step:last-child { border-right: 0; }
.step .who { font: 500 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--teal); }
.step h3 { font: 600 17px/1.3 var(--sans); }
.step h3::before { counter-increment: step; content: counter(step) ". "; color: var(--gold); }
.step p { font-size: 14.5px; }
.step .shot { margin-top: 6px; padding: 10px 12px; border-radius: 10px; background: var(--sunk); border: 1px solid var(--line); font-size: 13px; color: var(--text); }
.step .shot b { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } .step { border-right: 0; border-bottom: 1px solid var(--line); } .step:last-child { border-bottom: 0; } }
.inbox { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
@media (max-width: 800px) { .inbox { grid-template-columns: 1fr; } }
.lane { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.lane h3 { font: 600 14px/1 var(--sans); padding: 14px 18px; background: var(--sunk); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; }
.lane h3 span { font: 400 12px/1 var(--mono); color: var(--muted); }
.lane ul { list-style: none; margin: 0; padding: 0; }
.lane li { padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 14px; display: grid; gap: 3px; }
.lane li:last-child { border-bottom: 0; }
.lane li small { font-size: 12.5px; color: var(--muted); }
.lane li b { color: var(--ink); font-weight: 600; }
.caption { font-size: 13.5px; color: var(--muted); margin-top: 12px; }

/* what becomes easier */
.outcomes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-bottom: 40px; }
@media (max-width: 900px) { .outcomes { grid-template-columns: 1fr; } }
.outcomes h3 { font-size: 23px; font-weight: 600; }
.outcomes p { margin-top: 8px; font-size: 15px; }
.gains { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.gain { padding: 20px 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.gain b { display: block; color: var(--ink); font: 600 15.5px/1.35 var(--sans); }
.gain p { font-size: 14px; color: var(--muted); margin-top: 6px; }

/* directors */
.board { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.board .bh { padding: 12px 18px; background: var(--sunk); border-bottom: 1px solid var(--line); font: 500 12px/1.2 var(--mono); color: var(--muted); display: flex; justify-content: space-between; gap: 12px; }
.board .bb { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.board .paper { padding: 18px; font-size: 13.5px; border-right: 1px solid var(--line); display: grid; gap: 8px; align-content: start; }
.board .paper h4 { margin: 0; font: 600 15px/1.3 var(--serif); color: var(--ink); }
.board .paper mark { background: var(--warn-soft); color: inherit; padding: 0 2px; }
.board .notes { padding: 18px; font-size: 13px; display: grid; gap: 10px; align-content: start; background: var(--paper); }
.board .notes div { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.board .notes small { display: block; font: 400 11px/1.3 var(--mono); color: var(--muted); margin-bottom: 3px; }
@media (max-width: 560px) { .board .bb { grid-template-columns: 1fr; } .board .paper { border-right: 0; border-bottom: 1px solid var(--line); } }
details.more > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 10px; font: 600 15px/1 var(--sans); color: var(--ink); padding: 12px 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::after { content: "+"; color: var(--teal); font-size: 18px; line-height: 1; }
details.more[open] > summary::after { content: "\2212"; }
details.more[open] > summary { margin-bottom: 24px; }

/* close */
.close { background: var(--ink); color: #d5e3ec; border-radius: 22px; padding: 56px clamp(24px, 5vw, 64px); display: grid; gap: 22px; justify-items: start; }
:root[data-theme="dark"] .close { background: #0f2440; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .close { background: #0f2440; } }
.close h2 { color: #fff; font-size: clamp(30px, 4.4vw, 48px); line-height: 1.08; max-width: 18em; }
.close p { max-width: 36em; font-size: 17px; }
.close .btn-solid { background: #fff; color: #0b2545; }
.close .btn-solid:hover { background: var(--gold); color: #0b2545; }
footer { padding-block: 40px 56px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Product evidence and market coverage */
.brand img { width:154px; height:47px; object-fit:contain; }
.brand .reversed { display:none; }
@media(prefers-color-scheme:dark){.brand .normal{display:none}.brand .reversed{display:block}}
section { scroll-margin-top:85px; }
.product-shot { margin:0; }
.product-shot a { display:block; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; box-shadow:var(--shadow); }
.product-shot img { display:block; width:100%; height:auto; }
.product-shot figcaption { font-size:14px; color:var(--muted); margin-top:12px; line-height:1.6; }
.product-shot figcaption strong { display:block; color:var(--ink); font-weight:600; }
.hero .product-shot { margin-top:12px; }
.hero .product-shot a { margin-top:18px; }
.shot-label { font:500 12px/1.4 var(--mono); letter-spacing:.04em; color:var(--teal); }
.market-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 30px; margin:30px 0; }
.market-link { display:block; padding:20px 0; border-bottom:1px solid var(--line); text-decoration:none; }
.market-link h3 {font:600 20px/1.3 var(--sans);margin-bottom:8px}
.market-link p {font-size:14px;color:var(--text)}
.market-link small { display:block; margin-top:9px; color:var(--teal); font-size:13px; }
.market-link:hover h3 { text-decoration:underline; text-underline-offset:4px; }
.scope-note { border-left:3px solid var(--gold); padding:14px 18px; background:var(--sunk); font-size:15px; margin-bottom:34px; }
.demo-field {display:grid; gap:8px; margin:22px 0; max-width:460px; color:#fff;}
.demo-field select {font:inherit;padding:12px;border:1px solid #90a5b6;border-radius:8px;background:#fff;color:#0b2545;width:100%;}
.market-body {max-width:850px; margin:0 auto; padding:52px 20px;}
.market-body h1 {font-size:clamp(36px,5vw,58px); line-height:1.1; margin:20px 0;}
.market-body h2 {font-size:30px;margin:34px 0 16px;}
.market-body ul {padding-left:22px;}
.market-body li {margin:12px 0;}
.market-body .lead {max-width:none;}
.market-nav {display:flex; flex-wrap:wrap; gap:10px 20px; margin-top:20px;}
.market-nav a {font-size:14px;}
.image-viewer {width:min(1280px,96vw);max-height:94vh;padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--text);}
.image-viewer::backdrop {background:rgba(0,0,0,.7);}
.image-viewer header {display:flex;justify-content:space-between;gap:20px;margin-bottom:15px;}
.image-viewer img {display:block;max-height:76vh;width:auto;margin:auto;object-fit:contain;}
.image-viewer button {font:inherit;cursor:pointer;padding:8px 14px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--ink);}
@media(max-width:760px){.market-links{grid-template-columns:1fr 1fr;gap:0 20px}.brand img{width:130px;height:40px}.hero .product-shot{margin-top:0}.image-viewer{padding:10px}.image-viewer img{max-width:100%}}
@media(max-width:460px){.market-links{grid-template-columns:1fr}.hero .kicker{line-height:1.6}.market-body{padding-top:30px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.hero-workspace .inbox {grid-template-columns:1fr;margin-top:18px}.hero-workspace .lane {box-shadow:var(--shadow)}.hero-workspace .caption {margin-top:12px}

/* Examiner's email */
.ex { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 24px; margin-top: 36px; align-items: start; }
.ex-list { display: grid; gap: 8px; }
.ex-list button { text-align: left; font: 600 15px/1.35 var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; cursor: pointer; }
.ex-list button small { display: block; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--teal); margin-bottom: 8px; }
.ex-list button[aria-selected="true"] { border-color: var(--teal); background: var(--teal-soft); box-shadow: var(--shadow); }
.ex-list button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.ex-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 28px; box-shadow: var(--shadow); }
.ex-card .ask { font: italic 400 22px/1.35 var(--serif); color: var(--ink); margin: 0 0 18px; }
.ex-card ol { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 12px; }
.ex-card li { counter-increment: s; display: grid; grid-template-columns: 28px 1fr; gap: 12px; color: var(--text); }
.ex-card li::before { content: counter(s); width: 28px; height: 28px; border-radius: 50%; background: var(--teal-soft); color: var(--teal); font: 600 13px/28px var(--mono); text-align: center; }
.ex-card .edge { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.ex-card .edge b { color: var(--ink); }
@media (max-width: 900px) { .ex { grid-template-columns: 1fr; } .ex-card { padding: 20px; } }

/* Role views */
.rv-pics { display: grid; gap: 14px; margin: 0 0 18px; }
.rv-pics img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.rv-pics.rv-phones { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; }
.rv-list { margin: 0; padding-left: 18px; display: grid; gap: 8px; color: var(--text); }

/* Hero role chooser */
.hero .who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; }
.hero .who span { font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.hero .who a { font-size: 14px; font-weight: 500; color: var(--teal); text-decoration: none; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.hero .who a:hover { border-color: var(--teal); background: var(--teal-soft); }
.hero .who a:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* Keep the header on one line now that it has more links */
nav a { white-space: nowrap; }
@media (max-width: 1000px) { nav { gap: 14px; font-size: 13px; } .top .btn { padding-inline: 12px; } }

/* Hero: the desk, the phone and an escalation, layered */
.stack { position: relative; padding: 0 0 84px; }
.stack .win { position: relative; margin-top: 0; padding-top: 22px; background: #fff; }
.stack .win::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 22px; background: #eaf1f3 radial-gradient(circle at 12px 11px, #e06c5f 3.5px, transparent 4px), radial-gradient(circle at 26px 11px, #e3b34a 3.5px, transparent 4px), radial-gradient(circle at 40px 11px, #5fb878 3.5px, transparent 4px); border-bottom: 1px solid var(--line); }
.stack .phone { position: absolute; right: -10px; bottom: 0; width: 31%; height: auto; border: 5px solid #0b2545; border-radius: 26px; background: #fff; box-shadow: 0 24px 48px -14px rgba(11,37,69,.5); }
.stack .note { position: absolute; left: -16px; bottom: 6px; width: 60%; height: auto; border-radius: 12px; border: 1px solid var(--line); background: #fff; box-shadow: 0 18px 40px -12px rgba(11,37,69,.45); }
.stack .win, .stack .phone, .stack .note { animation: stack-rise .9s cubic-bezier(.2,.7,.2,1) both; }
.stack .phone { animation: stack-rise .9s .35s cubic-bezier(.2,.7,.2,1) both, stack-float 7s 1.4s ease-in-out infinite; }
.stack .note { animation: stack-rise .9s .6s cubic-bezier(.2,.7,.2,1) both, stack-float 8s 1.8s ease-in-out infinite reverse; }
@keyframes stack-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes stack-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .stack .win, .stack .phone, .stack .note { animation: none; } }
@media (max-width: 560px) { .stack { padding-bottom: 60px; } .stack .note { display: none; } .stack .phone { right: -4px; width: 36%; } }

/* Tamper-evident chain illustration */
.tamper { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px; box-shadow: var(--shadow); margin-bottom: 28px; }
.tp-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; align-items: center; margin-bottom: 14px; }
.tp-status { font: 600 13px/1.3 var(--sans); color: var(--ok); }
.tp-status.bad { color: #b42318; }
.tp-chain { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.tp-chain li { position: relative; display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: start; padding: 10px 0 10px 0; }
.tp-chain li + li::before { content: ""; position: absolute; left: 13px; top: -12px; height: 24px; width: 2px; background: var(--teal-bright); transition: background .3s; }
.tp-chain li.broken-link::before { background: repeating-linear-gradient(to bottom, #d92d20 0 4px, transparent 4px 7px); }
.tp-dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 600 12px/1 var(--mono); background: var(--sunk); color: var(--muted); border: 2px solid var(--line); transition: all .35s; z-index: 1; }
.tp-chain li.ok .tp-dot { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.tp-chain li.bad .tp-dot { background: #fee4e2; border-color: #d92d20; color: #b42318; }
.tp-text { font: 500 14px/1.35 var(--sans); color: var(--ink); }
.tp-text small { display: block; font: 400 11.5px/1.5 var(--mono); color: var(--muted); margin-top: 3px; word-break: break-all; }
.tp-text small b { font-weight: 500; color: var(--text); }
.tp-text.edited { color: #b42318; }
.tp-tag { font: 600 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 5px 8px; border-radius: 999px; background: var(--sunk); color: var(--muted); white-space: nowrap; transition: all .35s; }
.tp-chain li.ok .tp-tag { background: var(--ok-soft); color: var(--ok); }
.tp-chain li.bad .tp-tag { background: #fee4e2; color: #b42318; }
.tp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
@media (max-width: 560px) { .tp-chain li { grid-template-columns: 28px 1fr; } .tp-tag { grid-column: 2; justify-self: start; } }

/* A typical working day: a request travels through the people who touch it */
.rail { position: relative; height: 66px; margin: 0 0 18px; }
.rail-track { position: absolute; left: 12.5%; right: 12.5%; top: 40px; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.rail-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--teal-bright), var(--teal)); border-radius: 4px; transition: width 1s cubic-bezier(.4,.1,.2,1); }
.rail-node { position: absolute; top: 31px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; display: grid; place-items: center; font: 600 11px/1 var(--mono); background: var(--surface); color: var(--muted); border: 2px solid var(--line); transition: all .4s; }
.rail-node[data-i="0"] { left: 12.5%; } .rail-node[data-i="1"] { left: 37.5%; } .rail-node[data-i="2"] { left: 62.5%; } .rail-node[data-i="3"] { left: 87.5%; }
.rail-node.on { background: var(--teal); border-color: var(--teal); color: #fff; box-shadow: 0 0 0 5px var(--teal-soft); }
.rail-token { position: absolute; left: 12.5%; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; transition: left 1s cubic-bezier(.4,.1,.2,1); z-index: 2; }
.rail-token span { font: 600 12px/1 var(--sans); white-space: nowrap; padding: 7px 11px; border-radius: 999px; background: var(--ink); color: var(--paper); box-shadow: var(--shadow); }
.rail-token i { order: 2; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid var(--ink); }
.rail-replay { font: 500 13px/1 var(--sans); color: var(--teal); background: none; border: 0; cursor: pointer; padding: 0 0 14px; text-decoration: underline; }
.js-day .step { transition: background .5s, box-shadow .5s; box-shadow: inset 0 0 0 0 var(--teal); }
.js-day .step.on { background: var(--teal-soft); box-shadow: inset 0 4px 0 0 var(--teal); }
.js-day .step.on .shot { background: var(--surface); }
@media (prefers-reduced-motion: reduce) { .rail-fill, .rail-token, .js-day .step, .rail-node { transition: none; } }
@media (max-width: 900px) { .rail { display: none; } .js-day .step.on { background: var(--surface); box-shadow: none; } .rail-replay { display: none; } }

/* Markets: regulator seals, staggered entrance, lift on hover */
.market-link { position: relative; padding: 20px 0 20px 64px; transition: transform .25s ease, border-color .25s; }
.market-link .seal { position: absolute; left: 0; top: 20px; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; font: 600 11px/1 var(--mono); letter-spacing: .04em; color: var(--paper); background: linear-gradient(145deg, var(--ink), var(--teal)); box-shadow: 0 6px 16px -6px rgba(11,37,69,.5); transition: transform .35s cubic-bezier(.3,1.6,.5,1), box-shadow .25s; }
.market-link:hover .seal, .market-link:focus-visible .seal { transform: rotate(-6deg) scale(1.1); box-shadow: 0 12px 22px -8px rgba(11,37,69,.55); }
.market-link:hover { transform: translateX(3px); border-bottom-color: var(--teal-bright); }
.market-link small { display: inline-block; transition: transform .25s; }
.market-link:hover small { transform: translateX(5px); }
.js-mk .market-link { opacity: 0; transform: translateY(14px); }
.js-mk .market-links.in .market-link { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1), border-color .25s; transition-delay: calc(var(--i) * 90ms); }
.js-mk .market-links.in .market-link:hover { transform: translateX(3px); transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .js-mk .market-link { opacity: 1; transform: none; } .market-link, .market-link .seal, .market-link small { transition: none; } }
.tp-text small span { display: inline-block; white-space: nowrap; margin-right: 8px; }

/* Market page seal */
.market-body .seal.big { display: grid; place-items: center; width: 64px; height: 64px; margin: 18px 0 14px; border-radius: 16px; font: 600 14px/1 var(--mono); letter-spacing: .04em; color: var(--paper); background: linear-gradient(145deg, var(--ink), var(--teal)); box-shadow: 0 10px 22px -8px rgba(11,37,69,.55); animation: stack-rise .8s cubic-bezier(.2,.7,.2,1) both; }
@media (prefers-reduced-motion: reduce) { .market-body .seal.big { animation: none; } }

/* Chain tags: a slightly deeper green on the light theme so small text passes contrast */
.tp-chain li.ok .tp-tag, .tp-status:not(.bad) { color: #0f6b30; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tp-chain li.ok .tp-tag, :root:not([data-theme="light"]) .tp-status:not(.bad) { color: var(--ok); } }
:root[data-theme="dark"] .tp-chain li.ok .tp-tag, :root[data-theme="dark"] .tp-status:not(.bad) { color: var(--ok); }