/* SolerWorks portal. Institutional Light.
   Loads after tokens.css and components.css. Every color here is a token; no hex outside the two
   technical dark surfaces the brief allows for topology and terminal blocks. */

/* Fonts, self-hosted */
@font-face{font-family:"Geist";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/Geist-Regular.woff2") format("woff2")}
@font-face{font-family:"Geist";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/Geist-Medium.woff2") format("woff2")}
@font-face{font-family:"Geist";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/Geist-SemiBold.woff2") format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/GeistMono-Regular.woff2") format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/GeistMono-Medium.woff2") format("woff2")}

:root{
  --tech-surface:#0c121e;      /* technical exception: topology and terminal blocks only */
  --tech-surface-deep:#020617;
  --tech-border:#1e293b;
  --tech-ink:#e2e8f0;
  --tech-ink-muted:#94a3b8;
  --tech-accent:#60a5fa;
  --container:1200px;
  --gutter:48px;
  --header-h:72px;
}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + var(--space-6))}
body{margin:0;background:var(--canvas);color:var(--ink-body);font:400 15px/1.6 var(--font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{margin:0;color:var(--ink);font-weight:600;letter-spacing:-0.025em}
h1,h2,h3{text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg{max-width:100%}
a{color:var(--link);text-decoration:none;transition:color 120ms ease-out}
a:hover{color:var(--azure-700);text-decoration:underline}
a.sw-btn:hover{text-decoration:none}
a.sw-btn--primary:hover{color:var(--on-accent)}
a.sw-btn--secondary:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--radius-sm)}
[hidden]{display:none !important}
.mono{font-family:var(--font-mono);font-size:13px;line-height:20px}
.tag{margin:0;color:var(--ink-muted)}
.skip-link{position:absolute;left:var(--space-4);top:-64px;z-index:100;padding:var(--space-2) var(--space-4);background:var(--ink);color:var(--canvas);border-radius:var(--radius-md)}
.skip-link:focus{top:var(--space-4);color:var(--canvas)}
.container{width:100%;max-width:var(--container);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.sw-btn--lg{height:44px;padding:0 20px;font-size:14px}
.sw-btn .sw-icon{vertical-align:0}

/* Header */
/* Own compositor layer, so page scroll never repaints the bar. The blur stays at 8px: a larger radius is what makes a sticky bar costly. */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);transform:translateZ(0);will-change:transform}
.site-header__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);min-height:var(--header-h)}
.site-header__brand{display:flex;align-items:center;min-height:44px;flex:none}
.site-header__brand img{display:block;height:26px;width:auto}
.site-header__toggle{display:none;align-items:center;gap:var(--space-2);height:40px;padding:0 var(--space-3);background:var(--surface);border:1px solid var(--border-control);border-radius:var(--radius-md);color:var(--ink);font:500 13px/20px var(--font-sans);cursor:pointer}
.site-nav{display:flex;align-items:center;gap:var(--space-8);flex:1;justify-content:flex-end}
.site-nav__list{display:flex;align-items:center;gap:var(--space-8)}
.site-nav__link{display:block;padding:6px 0;border-bottom:2px solid transparent;color:var(--ink-tag);font:500 14px/22px var(--font-sans)}
.site-nav__link:hover{color:var(--ink);text-decoration:none}
.site-nav__link[aria-current="page"]{color:var(--ink);border-bottom-color:var(--azure-600)}
.site-nav__actions{display:flex;align-items:center;gap:var(--space-2)}
.site-nav__cta{height:40px;padding:0 var(--space-4);white-space:nowrap}

/* Sections */
.section{padding:80px 0;border-bottom:1px solid var(--border)}
.section--zone{background:var(--surface-raised)}
.section--tight{padding:56px 0}
.section__head{display:flex;flex-direction:column;gap:var(--space-3);max-width:760px;margin-bottom:var(--space-12)}
.section__head::before{content:"";display:block;width:72px;height:8px;margin-bottom:var(--space-2);background:linear-gradient(90deg,var(--azure-600) 0 32px,transparent 32px 36px,var(--azure-700) 36px 52px,transparent 52px 56px,var(--pending) 56px 64px,transparent 64px 68px,var(--attention) 68px 72px);border-radius:2px}
.section__head h2{font-size:32px;line-height:40px}
.section__head p{font-size:16px;line-height:26px}
.prose{display:flex;flex-direction:column;gap:var(--space-4);max-width:720px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:72px;align-items:start}
.split--even{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-12)}
.stack{display:flex;flex-direction:column;gap:var(--space-4)}
.stack--lg{gap:var(--space-8)}
.actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}

/* Hero */
.hero{position:relative;padding:88px 0;border-bottom:1px solid var(--border);overflow:hidden}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:72px;align-items:start}
.hero__visual{display:flex;align-items:center;justify-content:center;min-width:0}
.art{display:block;width:100%;height:auto;overflow:visible}
.hero--page .art{max-width:520px}

/* Illustrations. Classes used by art.py. Every fill and stroke is a token. */
.art text,.cover text,.spot text{font-family:var(--font-sans)}
.a-azure{fill:var(--azure-600)}.a-deep{fill:var(--azure-700)}.a-tint{fill:var(--azure-200)}.a-tint50{fill:var(--azure-50)}
.a-tint50s{fill:var(--azure-50);stroke:var(--azure-200);stroke-width:1}
.a-violet{fill:var(--pending)}.a-amber{fill:var(--attention)}.a-white{fill:var(--on-accent)}.a-ink{fill:var(--ink)}
.a-slate{fill:var(--border-hover)}.a-track{fill:var(--badge-bg)}.a-paper{fill:var(--surface)}
.a-dot{fill:var(--azure-600)}.a-dot-soft{fill:var(--azure-200)}.a-cut{fill:var(--canvas)}
.a-card{fill:var(--surface);stroke:var(--border);stroke-width:1}
.a-card-chip{fill:var(--surface);stroke:var(--azure-200);stroke-width:1}
.a-chip{fill:var(--badge-bg);stroke:var(--badge-border);stroke-width:1}
.a-badge{fill:var(--badge-bg);stroke:var(--badge-border);stroke-width:1}
.a-ghost{fill:var(--surface-raised);stroke:var(--border);stroke-width:1}
.a-frame{fill:none;stroke:var(--border);stroke-width:1}
.a-perim{fill:var(--azure-50);stroke:var(--azure-600);stroke-width:2;stroke-dasharray:6 6}
.a-float{filter:drop-shadow(0 8px 20px rgba(15,23,42,.12))}
.a-link{fill:none;stroke:var(--border-control);stroke-width:1.5}
.a-team{fill:var(--surface-raised);stroke:var(--border-control);stroke-width:1;stroke-dasharray:4 4}
.a-rule{fill:none;stroke:var(--border);stroke-width:1}.a-rule--strong{stroke:var(--border-hover);stroke-width:2}
.a-node{fill:var(--surface);stroke:var(--border-control);stroke-width:1.5}
.a-ring{fill:none;stroke:var(--on-accent);stroke-width:2;opacity:.6}
.a-ring-az{fill:none;stroke:var(--azure-200);stroke-width:1.5}
.a-flow{fill:none;stroke:var(--azure-600);stroke-width:2;stroke-linecap:round}.a-flow--lg{stroke-width:3}.a-flow--on{stroke:var(--on-accent)}
.a-blocked{fill:none;stroke:var(--border-control);stroke-width:2;stroke-dasharray:4 5;stroke-linecap:round}
.a-x{fill:none;stroke:var(--ink-muted);stroke-width:2;stroke-linecap:round}
.a-lock{fill:none;stroke:var(--on-accent);stroke-width:2.5;stroke-linecap:round}
.a-tick{fill:none;stroke:var(--on-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.a-tick--lg{stroke-width:3.5}.a-tick--xl{stroke-width:5}
.a-t{font-size:15px;font-weight:600;letter-spacing:-0.02em;fill:var(--ink)}
.a-t13{font-size:13px;font-weight:500;fill:var(--ink)}
.a-s{font-size:12px;fill:var(--ink-muted)}.a-strong{fill:var(--ink);font-weight:500}.a-body{fill:var(--ink-body)}.a-struck{text-decoration:line-through}
.a-big{font-size:30px;font-weight:600;letter-spacing:-0.03em;fill:var(--ink)}
.a-cover{font-size:22px;font-weight:600;letter-spacing:-0.025em;fill:var(--ink)}
.a-m,.a-mono,.a-badge-t{font-family:var(--font-mono) !important}
.a-m{font-size:10px;font-weight:500;letter-spacing:.08em;fill:var(--ink-muted)}.a-tiny{font-size:9px}.a-faint{fill:var(--ink-subtle)}
.a-mono{font-size:11px;font-weight:500;letter-spacing:.04em;fill:var(--ink-tag)}
.a-badge-t{font-family:var(--font-sans) !important;font-size:12px;font-weight:500;fill:var(--badge-ink)}
.a-az{fill:var(--azure-600)}.a-az7{fill:var(--azure-700)}
.a-on,.a-big.a-on,.a-s.a-on,.a-m.a-on,.a-t13.a-on,.a-cover.a-on{fill:var(--on-accent)}

/* Pillar spot illustrations and brief covers */
.spot{display:block;width:100%;height:auto;margin-bottom:var(--space-2);border:1px solid var(--azure-200);border-radius:var(--radius-lg)}
.cover{display:block;width:100%;height:auto;border-radius:10px;box-shadow:var(--shadow-overlay)}
.hero__copy{display:flex;flex-direction:column;gap:var(--space-6)}
.hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.hero h1{font-size:clamp(34px,4.4vw,52px);line-height:1.12;letter-spacing:-0.03em}
.hero--page h1{font-size:clamp(32px,3.6vw,44px)}
.hero__lede{max-width:660px;font-size:17px;line-height:28px}
/* Page label above the headline: plain words in the accent colour. No pill, no capitals, no code-style slashes. */
.category-tag{color:var(--azure-700);font:600 14px/20px var(--font-sans);letter-spacing:0}

/* Spec card: label and value rows */
.spec{padding:var(--space-2) var(--space-6)}
.spec__row{display:flex;flex-direction:column;gap:var(--space-1);padding:14px 0;border-top:1px solid var(--border)}
.spec__row:first-child{border-top:0}
.spec dt{font:500 12px/16px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.spec dd{margin:0;color:var(--ink);font-size:15px;line-height:22px}
.spec dd.mono{font-size:14px}

/* Readiness checklist card */
.checklist{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-6)}
.checklist{border-top:3px solid var(--azure-600)}
.checklist .tag{color:var(--azure-700);font:500 12px/16px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;margin-bottom:var(--space-2)}
.checklist li{display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:center;gap:var(--space-3);padding:14px 0;border-top:1px solid var(--border);font-size:14px;line-height:20px}
.checklist li .sw-icon{color:var(--azure-600)}
.checklist li span{color:var(--ink-body)}
.checklist li b{font:500 13px/20px var(--font-mono);color:var(--ink);text-align:right}

/* Verification metrics bar */
.metrics{border-bottom:1px solid var(--azure-200);background:var(--azure-50)}
.metrics__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.metrics__item{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-8) var(--space-8) var(--space-8) 0;border-left:1px solid var(--azure-200);padding-left:var(--space-8)}
.metrics__item:first-child{border-left:0;padding-left:0}
.metrics__value{font:600 30px/40px var(--font-sans);letter-spacing:-0.03em;color:var(--ink)}
.metrics__label{font:500 12px/16px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--azure-700)}
.metrics__note{font-size:14px;line-height:22px}

/* Cards */
.card{display:flex;flex-direction:column;gap:var(--space-3);padding:28px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:border-color 120ms ease-out}
.card:hover{border-color:var(--border-hover)}
.card h3{font-size:18px;line-height:26px;letter-spacing:-0.02em}
.card__index{font:500 12px/16px var(--font-mono);letter-spacing:.06em;color:var(--azure-600)}
.card__icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--azure-200);border-radius:var(--radius-lg);background:var(--azure-50);color:var(--azure-600)}
.card__foot{margin-top:auto;padding-top:var(--space-4);border-top:1px solid var(--border);display:flex;flex-direction:column;gap:var(--space-1)}
.card__foot .tag{font:500 12px/16px var(--font-mono);letter-spacing:.05em;text-transform:uppercase}
.card__foot p{font-size:14px;line-height:22px;color:var(--ink)}
.bullets{display:flex;flex-direction:column;gap:var(--space-3)}
.bullets li{position:relative;padding-left:18px}
.bullets li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:var(--radius-full);background:var(--azure-600)}
.bullets--out li::before{top:12px;height:2px;border-radius:0;background:var(--ink-subtle)}
.link-arrow{display:inline-flex;align-items:center;gap:6px;font-weight:500;font-size:14px;line-height:20px}

/* Diagrams: shared rules moved out of the SVG files so inline copies follow tokens and Geist */
.diagram{margin:0;padding:var(--space-4);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.diagram svg{display:block;width:100%;height:auto}
.diagram__scroll{border-radius:var(--radius-md)}
.diagram__hint{display:none;padding:var(--space-2) var(--space-2) 0;font:400 12px/16px var(--font-mono);color:var(--ink-muted)}
.diagram figcaption{padding:var(--space-3) var(--space-2) 0;border-top:1px solid var(--border);margin-top:var(--space-2);font-size:13px;line-height:20px;color:var(--ink-muted)}
.diagram .bg{fill:none}
.diagram .node{fill:var(--surface);stroke:var(--border-control);stroke-width:1}
.diagram .node-sw{fill:var(--azure-600)}
.diagram .team{fill:var(--surface-raised);stroke:var(--border-control);stroke-width:1;stroke-dasharray:4 4}
.diagram .edge{fill:none;stroke:var(--border-control);stroke-width:1.5;transition:stroke 120ms ease-out}
.diagram .edge.is-active{stroke:var(--azure-600);stroke-width:2.5}
.diagram .edge-off{fill:none;stroke:var(--border-control);stroke-width:1;stroke-dasharray:3 5;opacity:.6}
.diagram .flow{fill:none;stroke:var(--link);stroke-width:2}
.diagram .head{fill:var(--link)}
.diagram .pad{fill:var(--surface)}
.diagram text{font-family:var(--font-sans)}
.diagram .t{font-size:16px;font-weight:600;fill:var(--ink)}
.diagram .s{font-size:12px;fill:var(--ink-muted)}
.diagram .t-sw{font-size:16px;font-weight:600;fill:var(--on-accent)}
.diagram .s-sw{font-size:12px;fill:var(--on-accent);opacity:.85}
.diagram .l{font-size:13px;font-weight:600;fill:var(--ink)}
.diagram .lf{font-size:13px;font-weight:600;fill:var(--link)}
.diagram .k{font-size:11px;font-weight:500;letter-spacing:.06em;fill:var(--ink-muted)}
.diagram .cap{font-size:14px;font-weight:500;fill:var(--ink)}

.flow-block{display:flex;flex-direction:column;gap:var(--space-6)}
.flow-block__text{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-12);align-items:start}
.flow-block .diagram{width:100%;max-width:920px;margin:0 auto}
.flow-block--money{margin:var(--space-12) 0 var(--space-6)}

/* Agreement tabs */
.agreements{display:flex;flex-direction:column;gap:var(--space-8)}
.agreements .diagram{width:100%;max-width:920px;margin:0 auto}
.agreements__panel{padding:var(--space-6) var(--space-8) var(--space-8);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.agreement__cols{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--space-12);padding-top:var(--space-2)}
.agreement > p:not(.agreement__parties){max-width:720px}
.agreements .sw-tabs{flex-wrap:wrap;gap:var(--space-2) var(--space-6)}
.sw-tab{font-size:14px}
.agreement{display:flex;flex-direction:column;gap:var(--space-4);padding-top:var(--space-6)}
.agreement h3{font-size:20px;line-height:28px}
.agreement__parties{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);font:500 12px/16px var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-tag)}
.agreement__parties span{padding:4px var(--space-2);background:var(--badge-bg);border:1px solid var(--badge-border);border-radius:var(--radius-sm)}
.agreement__parties .is-sw{background:var(--azure-50);border-color:var(--azure-200);color:var(--azure-700)}
.agreement h4{font:500 12px/16px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.no-js-note{font-size:13px;color:var(--ink-muted)}

/* Operational boundaries */
.boundary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm);overflow:hidden}
.boundary__side{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-8)}
.boundary__side + .boundary__side{border-left:1px solid var(--border)}
.boundary__side--sw{border-top:3px solid var(--azure-600);background:var(--azure-50)}
.boundary__side--sw .tag{color:var(--azure-700)}
.boundary__side--partner{border-top:3px solid var(--border-control)}
.boundary__side h3{font-size:20px;line-height:28px}
.zeros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6);margin-top:var(--space-6)}
.zero{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-6);border:1px solid var(--border);border-top:3px solid var(--azure-200);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm)}
.zero h3{font-size:18px;line-height:26px;letter-spacing:-0.02em}
.zero p{font-size:14px;line-height:22px}

/* Tables */
.sw-table td{white-space:normal;vertical-align:top;font-size:14px;line-height:22px}
.sw-table td.nowrap,.sw-table th.nowrap{white-space:nowrap}
.sw-table td strong{font-weight:500;color:var(--ink)}
.sw-table td.mono{font-family:var(--font-mono);font-size:13px}
.sw-table caption{caption-side:top;text-align:left;padding:var(--space-3) var(--space-4);font:500 12px/16px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);border-bottom:1px solid var(--border)}
.disclosure th[scope="row"]{width:34%;background:var(--surface);border-top:1px solid var(--border);padding:var(--space-4);font:500 12px/18px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);vertical-align:top;white-space:normal}
.disclosure td{padding:var(--space-4);font-size:15px}
.disclosure tr:first-child th,.disclosure tr:first-child td{border-top:0}
.disclosure td .mono{font-size:14px;color:var(--ink)}
.disclosure td small{display:block;margin-top:2px;font-size:13px;line-height:20px;color:var(--ink-muted)}

/* Technical exception: dark topology block */
.topology{padding:var(--space-6);background:var(--tech-surface);border:1px solid var(--tech-border);border-radius:var(--radius-lg);color:var(--tech-ink)}
.topology__head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-2);padding-bottom:var(--space-4);margin-bottom:var(--space-6);border-bottom:1px solid var(--tech-border);font:500 12px/16px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--tech-ink-muted)}
.topology__hops{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-6)}
.topology__hop{position:relative;display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4);background:var(--tech-surface-deep);border:1px solid var(--tech-border);border-radius:var(--radius-md)}
.topology__hop:not(:last-child)::after{content:"";position:absolute;top:50%;right:calc(var(--space-6) * -1);width:var(--space-6);height:1px;background:var(--tech-accent)}
.topology__hop--data{border-color:var(--tech-accent)}
.topology__step{font:500 12px/16px var(--font-mono);letter-spacing:.06em;color:var(--tech-accent)}
.topology__hop h3{color:var(--tech-ink);font:600 15px/22px var(--font-sans);letter-spacing:-0.01em}
.topology__hop p{font:400 12px/18px var(--font-mono);color:var(--tech-ink-muted)}
.topology__foot{margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--tech-border);font:400 12px/18px var(--font-mono);color:var(--tech-ink-muted)}
.topology__foot b{color:var(--tech-ink);font-weight:500}

/* Control list */
.controls{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm);overflow:hidden}
.controls__row{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--space-6);padding:var(--space-4) var(--space-6);border-top:1px solid var(--border)}
.controls__row:first-child{border-top:0}
.controls dt{font:500 12px/24px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.controls dd{margin:0;color:var(--ink)}

/* Protocol steps */
.protocol{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm);overflow:hidden;counter-reset:step}
.protocol__step{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:var(--space-4);align-items:start;padding:var(--space-4) var(--space-6);border-top:1px solid var(--border)}
.protocol__step:first-child{border-top:0}
.protocol__step::before{counter-increment:step;content:counter(step,decimal-leading-zero);font:500 13px/24px var(--font-mono);color:var(--azure-600)}
.protocol__step h3{font-size:15px;line-height:24px;letter-spacing:-0.01em}
.protocol__step p{font-size:14px;line-height:22px}
.protocol__owner{font:500 12px/24px var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-tag);white-space:nowrap}
.timeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm);overflow:hidden}
.timeline__item{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-6);border-left:1px solid var(--border)}
.timeline__item:first-child{border-left:0}
.timeline__mark{font:600 20px/28px var(--font-mono);color:var(--azure-600)}
.timeline__item:last-child{background:var(--azure-600)}
.timeline__item:last-child .timeline__mark,.timeline__item:last-child h3,.timeline__item:last-child p{color:var(--on-accent)}
.timeline__item h3{font-size:15px;line-height:22px;letter-spacing:-0.01em}
.timeline__item p{font-size:14px;line-height:22px}

/* Artifact catalog */
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-bottom:var(--space-6)}
.filters__label{margin-right:var(--space-2);font:500 12px/16px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.filter{height:32px;padding:0 var(--space-3);background:var(--surface);border:1px solid var(--border-control);border-radius:var(--radius-md);color:var(--ink);font:500 13px/20px var(--font-sans);cursor:pointer;transition:background-color 120ms ease-out,border-color 120ms ease-out,color 120ms ease-out}
.filter:hover{background:var(--surface-raised)}
.filter[aria-pressed="true"]{background:var(--azure-50);border-color:var(--azure-600);color:var(--azure-700)}
.catalog{display:flex;flex-direction:column;gap:var(--space-4)}
.catalog__count{margin-left:auto;font:400 13px/20px var(--font-mono);color:var(--ink-muted)}
.artifact{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:border-color 120ms ease-out}
.artifact:hover{border-color:var(--border-hover)}
.artifact__main{display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:var(--space-6);align-items:start;padding:var(--space-6)}
.artifact__id{display:flex;flex-direction:column;gap:2px;align-self:start;color:var(--azure-700);padding:var(--space-3);background:var(--azure-50);border:1px solid var(--azure-200);border-radius:var(--radius-lg);font:500 12px/16px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.artifact__id b{font:600 24px/28px var(--font-mono);letter-spacing:0;color:var(--azure-700)}
.artifact__body{display:flex;flex-direction:column;gap:var(--space-2)}
.artifact__body h3{font-size:18px;line-height:26px;letter-spacing:-0.02em}
.artifact__meta{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-1)}
.chip{display:inline-flex;align-items:center;height:22px;padding:0 var(--space-2);background:var(--badge-bg);border:1px solid var(--badge-border);border-radius:var(--radius-sm);color:var(--ink-tag);font:500 11px/16px var(--font-mono);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.artifact__actions{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-2);min-width:188px}
.artifact__alt{font-size:13px;line-height:20px;text-align:center}
.artifact details{border-top:1px solid var(--border)}
.artifact summary{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);color:var(--ink);font:500 13px/20px var(--font-sans);cursor:pointer;list-style:none;border-radius:0 0 var(--radius-lg) var(--radius-lg)}
.artifact summary::-webkit-details-marker{display:none}
.artifact summary:hover{background:var(--surface-raised)}
.artifact summary .sw-icon{transition:none;color:var(--ink-muted)}
.artifact details[open] summary .sw-icon{transform:rotate(90deg)}
.artifact details[open] summary{border-radius:0}
.preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6);padding:var(--space-2) var(--space-6) var(--space-6)}
.preview h4{margin-bottom:var(--space-2);font:500 12px/16px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.preview ol{display:flex;flex-direction:column;gap:6px;counter-reset:f}
.preview ol li{display:flex;gap:var(--space-3);font-size:14px;line-height:22px;color:var(--ink)}
.preview ol li::before{counter-increment:f;content:counter(f,decimal-leading-zero);flex:none;font:400 12px/22px var(--font-mono);color:var(--ink-subtle)}
.preview p{font-size:14px;line-height:22px}
.catalog__empty{padding:var(--space-6);border:1px dashed var(--border-hover);border-radius:var(--radius-lg);color:var(--ink-muted);text-align:center}

/* Declaration */
.declaration{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6);background:var(--azure-50);border:1px solid var(--azure-200);border-radius:var(--radius-lg)}
.declaration h3{font-size:18px;line-height:26px;letter-spacing:-0.02em}
.declaration p{color:var(--ink-body)}

/* Channels */
.channel{gap:var(--space-2)}
.channel a.mono{font-size:15px;line-height:24px;font-weight:500}
/* Parties and roles: one block per party, facts stacked as label and value, so it fits any column width and prints cleanly. */
.roles{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm);overflow:hidden}
.roles__row{display:grid;grid-template-columns:168px minmax(0,1fr);gap:var(--space-6);padding:var(--space-4) var(--space-6);border-top:1px solid var(--border)}
.roles__row:first-child{border-top:0}
.roles__row h3{font-size:15px;line-height:22px;letter-spacing:0;color:var(--ink)}
.roles dl{margin:0;display:flex;flex-direction:column;gap:var(--space-2)}
.roles dl > div{display:grid;grid-template-columns:196px minmax(0,1fr);gap:var(--space-4)}
.roles dt{font-size:13px;line-height:22px;color:var(--ink-muted)}
.roles dd{margin:0;font-size:14px;line-height:22px;color:var(--ink-body)}
@media (max-width:720px){
  .roles__row{grid-template-columns:minmax(0,1fr);gap:var(--space-2);padding:var(--space-4)}
  .roles dl > div{grid-template-columns:minmax(0,1fr);gap:0}
  .roles dl{gap:var(--space-3)}
}
.cite{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm);overflow:hidden}
.cite__row{display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--space-6);padding:var(--space-4) var(--space-6);border-top:1px solid var(--border)}
.cite__row:first-child{border-top:0}
.cite__row--lead{background:var(--azure-50)}
.cite__ref{font:500 13px/24px var(--font-mono);color:var(--ink)}
.cite__row p{font-size:14px;line-height:22px}
.cite__row p strong{color:var(--ink);font-weight:500}
.demarcation{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)}

/* CTA band */
.cta{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-6);padding:var(--space-12);padding-right:calc(36% + var(--space-12));background:var(--azure-600);border-radius:var(--radius-lg);overflow:hidden;isolation:isolate}
.cta::before{content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;width:36%;background:var(--azure-700)}
.cta::after{content:"";position:absolute;z-index:-1;top:var(--space-8);right:var(--space-8);bottom:var(--space-8);width:calc(36% - 64px);background-image:radial-gradient(circle,var(--azure-200) 2px,transparent 2.5px);background-size:32px 32px;background-repeat:space}
.cta h2{color:var(--on-accent)}
.cta p{color:var(--on-accent)}
.cta .sw-btn--primary{background:var(--surface);color:var(--azure-700)}
.cta .sw-btn--primary:hover{background:var(--azure-50);color:var(--azure-700)}
.cta .sw-btn--secondary{background:var(--azure-600);border-color:var(--on-accent);color:var(--on-accent)}
.cta .sw-btn--secondary:hover{background:var(--azure-700);color:var(--on-accent)}
.cta :focus-visible{outline-color:var(--on-accent)}
.cta h2{font-size:24px;line-height:32px}
.cta p{margin-top:var(--space-2);max-width:620px}

/* Dialog */
.dialog{width:calc(100% - 32px);max-width:600px;max-height:calc(100dvh - 48px);padding:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-overlay);color:var(--ink-body);overflow:auto}
.dialog::backdrop{background:rgba(2,6,23,.72)}
.dialog__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);padding:var(--space-6) var(--space-6) var(--space-4);border-bottom:1px solid var(--border)}
.dialog__head h2{font-size:20px;line-height:28px}
.dialog__head p{margin-top:var(--space-1);font-size:14px;line-height:22px;color:var(--ink-muted)}
.dialog__close{flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;background:transparent;border:0;border-radius:var(--radius-md);color:var(--ink-muted);cursor:pointer}
.dialog__close:hover{background:var(--surface-raised);color:var(--ink)}
.dialog__body{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-6)}
.dialog__foot{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-3);padding:var(--space-4) var(--space-6);border-top:1px solid var(--border);background:var(--surface-raised)}
.dialog fieldset{margin:0;padding:0;border:0;display:flex;flex-direction:column;gap:var(--space-2)}
.dialog legend{padding:0;margin-bottom:var(--space-2);font:500 12px/16px var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.dialog .sw-check{font-size:14px;line-height:22px}
.dialog .sw-check input{margin-top:3px}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.form-error{padding:var(--space-3) var(--space-4);background:var(--attention-tint);border:1px solid var(--attention-border);border-radius:var(--radius-md);color:var(--attention);font-size:14px;line-height:22px}
.request-draft{max-height:220px;overflow:auto;margin:0;padding:var(--space-4);background:var(--tech-surface);border:1px solid var(--tech-border);border-radius:var(--radius-md);color:var(--tech-ink);font:400 12px/18px var(--font-mono);white-space:pre-wrap;word-break:break-word}
.fineprint{font-size:13px;line-height:20px;color:var(--ink-muted)}

/* Document viewer */
.viewer{width:calc(100% - 32px);max-width:1080px;height:calc(100dvh - 48px);max-height:none;padding:0;overflow:hidden}
.viewer[open]{display:flex;flex-direction:column}
.viewer__bar{flex:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3) var(--space-6);padding:var(--space-3) var(--space-4) var(--space-3) var(--space-6);border-bottom:1px solid var(--border);background:var(--surface)}
.viewer__title{min-width:0;flex:1 1 240px}
.viewer__title h2{font-size:16px;line-height:24px;letter-spacing:-0.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewer__title h2:focus-visible{outline-offset:4px}
.viewer__pages{font:400 12px/16px var(--font-mono);color:var(--ink-muted);min-height:16px}
.viewer__tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.viewer__tool{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;background:transparent;border:1px solid transparent;border-radius:var(--radius-md);color:var(--ink-muted);cursor:pointer;transition:background-color 120ms ease-out,color 120ms ease-out}
.viewer__tool:hover{background:var(--surface-raised);color:var(--ink)}
.viewer__zoom{min-width:44px;text-align:center;font:500 12px/16px var(--font-mono);color:var(--ink-tag)}
.viewer__alt{margin-left:var(--space-2)}
.viewer__stage{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;align-items:center;gap:var(--space-6);padding:var(--space-6);background:var(--badge-bg);background-image:radial-gradient(circle,var(--border-hover) 1px,transparent 1.5px);background-size:32px 32px}
.viewer__stage:focus-visible{outline-offset:-2px}
.viewer__status{margin:auto;padding:var(--space-4) var(--space-6);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);color:var(--ink-body);font-size:14px;line-height:22px}
.viewer__page{position:relative;flex:none;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-overlay)}
.viewer__page canvas{display:block;width:100%;height:100%}
.textLayer{position:absolute;inset:0;overflow:clip;line-height:1;text-align:initial;-webkit-text-size-adjust:none;text-size-adjust:none;forced-color-adjust:none;transform-origin:0 0;z-index:1}
.textLayer span,.textLayer br{position:absolute;color:transparent;white-space:pre;cursor:text;transform-origin:0% 0%}
.textLayer ::selection{background:rgba(37,99,235,.3)}
.textLayer .endOfContent{display:block;position:absolute;inset:100% 0 0;z-index:-1;cursor:default;user-select:none}
.doc-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px var(--space-2);font-size:13px;line-height:20px;color:var(--ink-muted)}
.doc-links span{font:500 11px/20px var(--font-mono);letter-spacing:.06em;text-transform:uppercase}

/* Routing cards */
.routes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)}
.route{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-8);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);color:var(--ink-body);transition:border-color 120ms ease-out}
.route:hover{border-color:var(--azure-600);text-decoration:none;color:var(--ink-body)}
.route h3{font-size:22px;line-height:30px;color:var(--ink)}
.route .tag{font:500 12px/16px var(--font-mono);letter-spacing:.06em;text-transform:uppercase}
.route .link-arrow{margin-top:var(--space-3);color:var(--link)}
.route--primary{border-top:3px solid var(--azure-600);background:var(--azure-50)}
.route--primary .tag{color:var(--azure-700)}
.route--compact{padding:var(--space-6)}
.route--compact h3{font-size:18px;line-height:26px}
.tag--azure{color:var(--azure-700)}
.section__note{margin-top:var(--space-6)}
.chip--date{background:var(--surface);color:var(--ink-muted)}
.diagram--bare{padding:0;border:0;box-shadow:none;background:transparent}
.hero--slim{padding:64px 0 56px}
.hero__copy--wide{max-width:820px}

/* Gated documents */
.gated{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm);overflow:hidden}
.gated__row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:var(--space-4);align-items:start;padding:var(--space-4) var(--space-6);border-top:1px solid var(--border)}
.gated__row:first-child{border-top:0}
.gated__icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-lg);background:var(--badge-bg);border:1px solid var(--badge-border);color:var(--ink-tag)}
.gated__row h3{font-size:15px;line-height:24px;letter-spacing:-0.01em}
.gated__row p{font-size:14px;line-height:22px}

/* Signup and intake forms */
.signup{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-8);align-items:center;padding:var(--space-6) var(--space-8);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.signup h3{font-size:18px;line-height:26px;letter-spacing:-0.02em}
.signup__text p{font-size:14px;line-height:22px}
.signup__form{display:flex;flex-direction:column;gap:var(--space-2)}
.signup__row{display:flex;gap:var(--space-2)}
.signup__row .sw-input{flex:1;min-width:0;height:40px}
.signup__row .sw-btn{height:40px;padding:0 var(--space-4)}
.signup__done{font-size:15px;line-height:24px;color:var(--ink)}
.intake{display:flex;flex-direction:column;gap:var(--space-6);padding:var(--space-8);border-top:3px solid var(--azure-600)}
.intake:hover{border-color:var(--border);border-top-color:var(--azure-600)}
.intake fieldset{margin:0;padding:0;border:0;display:flex;flex-direction:column;gap:var(--space-4)}
.intake legend{padding:0;margin-bottom:var(--space-3);font:600 15px/24px var(--font-sans);color:var(--ink)}
.intake .sw-check{font-size:14px;line-height:22px}
.intake .sw-check input{margin-top:3px}
.intake .field-row{align-items:end}
.sw-field--trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* FAQ */
.faq{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm);overflow:hidden}
.faq details{border-top:1px solid var(--border)}
.faq details:first-child{border-top:0}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) var(--space-6);color:var(--ink);font:500 15px/24px var(--font-sans);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:8px;height:8px;border-right:2px solid var(--ink-muted);border-bottom:2px solid var(--ink-muted);transform:rotate(45deg);margin-top:-4px}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.faq summary:hover{background:var(--surface-raised)}
.faq details p{padding:0 var(--space-6) var(--space-4);font-size:15px;line-height:24px;max-width:640px}

/* Brief links with covers */
.brief-pair{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-4)}
.brief{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--space-4);align-items:center;padding:var(--space-3);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);color:var(--ink-body);transition:border-color 120ms ease-out}
.brief:hover{border-color:var(--azure-600);text-decoration:none}
.brief .cover{box-shadow:var(--shadow-sm);border-radius:4px}
.brief__text{display:flex;flex-direction:column;font-size:13px;line-height:20px;color:var(--ink-muted)}
.brief__text b{font-weight:600;font-size:15px;line-height:24px;color:var(--ink)}

/* Long-form article: adequacy framework and legal pages */
.article{display:grid;grid-template-columns:240px minmax(0,1fr);gap:72px;align-items:start}
.article--single{grid-template-columns:minmax(0,760px)}
.article__toc{position:sticky;top:calc(var(--header-h) + var(--space-8));display:flex;flex-direction:column;gap:var(--space-3);padding-left:var(--space-4);border-left:2px solid var(--azure-200)}
.article__toc .tag{font:500 12px/16px var(--font-mono);letter-spacing:.06em;text-transform:uppercase}
.article__toc ol{display:flex;flex-direction:column;gap:var(--space-2);font-size:14px;line-height:20px;counter-reset:toc}
.article__toc a{color:var(--ink-body)}
.article__toc a:hover{color:var(--link)}
.article__body{display:flex;flex-direction:column;gap:var(--space-12);max-width:760px;min-width:0}
.article__body > section{display:flex;flex-direction:column;gap:var(--space-4)}
.article__body h2{font-size:24px;line-height:32px;letter-spacing:-0.02em}
.article__body p,.article__body li{font-size:16px;line-height:26px}
.article__body .cite p,.article__body .faq p,.article__body .sw-table td{font-size:14px;line-height:22px}
.article__body .fineprint{font-size:13px;line-height:20px}
.article__body li strong{color:var(--ink);font-weight:600}

/* Footer */
.site-footer{background:var(--surface-raised)}
.site-footer__grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:var(--space-12);padding-top:56px;padding-bottom:var(--space-8)}
.site-footer__about{display:flex;flex-direction:column;gap:var(--space-4)}
.site-footer__about img{display:block;height:24px;width:auto;align-self:flex-start}
.site-footer__about p{max-width:440px;font-size:13px;line-height:21px;color:var(--ink-muted)}
.site-footer__col{display:flex;flex-direction:column;gap:var(--space-3)}
.site-footer__col h2{font:500 12px/16px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-tag)}
.site-footer__col ul{display:flex;flex-direction:column;gap:var(--space-2);font-size:13px;line-height:21px}
.site-footer__col .mono{font-size:13px;line-height:21px}
.site-footer__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-4);padding-top:20px;padding-bottom:var(--space-8);border-top:1px solid var(--border);font-size:12px;line-height:16px;color:var(--ink-muted)}
.site-footer__impressum{font:400 12px/16px var(--font-mono);letter-spacing:.02em;color:var(--ink-muted)}

/* Responsive */
@media (max-width:1080px){
  :root{--gutter:32px}
  .hero__grid,.split{gap:var(--space-12)}
  .topology__hops{grid-template-columns:repeat(2,minmax(0,1fr))}
  .topology__hop:nth-child(2)::after{display:none}
  .site-footer__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .site-footer__about{grid-column:1 / -1}
}
/* Header. The full navigation needs about 980px, so it stays in place on small laptops and half-width windows and only
   folds into the Menu button at 1040px. Between the two it runs on tighter spacing. */
@media (min-width:1041px) and (max-width:1180px){
  .site-header__bar{gap:var(--space-4)}
  .site-nav{gap:var(--space-6)}
  .site-nav__list{gap:var(--space-6)}
}
@media (max-width:1040px){
  .js .site-header__toggle{display:inline-flex}
  .site-header__bar{flex-wrap:wrap}
  .site-nav{flex-basis:100%;flex-direction:column;align-items:stretch;gap:var(--space-4);padding-bottom:var(--space-4)}
  .js .site-nav{display:none}
  .js .site-nav.is-open{display:flex}
  .site-nav__list{flex-direction:column;align-items:stretch;gap:0}
  .site-nav__link{padding:var(--space-2) 0;border-bottom:1px solid var(--border)}
  .site-nav__link[aria-current="page"]{border-bottom-color:var(--border);color:var(--azure-700)}
  .site-nav__actions{flex-wrap:wrap}
}
@media (max-width:920px){
  .hero{padding:56px 0}
  .cta{padding:var(--space-8)}
  .cta::before,.cta::after{display:none}
  .section{padding:56px 0}
  .hero__grid,.split,.split--even,.grid-2,.grid-3,.routes,.signup,.article,.zeros,.agreement__cols,.flow-block__text,.boundary,.demarcation,.metrics__list{grid-template-columns:minmax(0,1fr)}
  .boundary__side + .boundary__side{border-left:0}
  .metrics__item{border-left:0;padding-left:0;border-top:1px solid var(--border);padding-top:var(--space-6);padding-bottom:var(--space-6)}
  .metrics__item:first-child{border-top:0}
  .timeline{grid-template-columns:repeat(2,minmax(0,1fr))}
  .timeline__item:nth-child(3){border-left:0}
  .timeline__item:nth-child(n+3){border-top:1px solid var(--border)}
  .artifact__main{grid-template-columns:minmax(0,1fr)}
  .artifact__id{flex-direction:row;align-items:baseline;gap:var(--space-2)}
  .artifact__actions{flex-direction:row;flex-wrap:wrap;align-items:center;min-width:0}
  .preview,.controls__row,.cite__row{grid-template-columns:minmax(0,1fr);gap:var(--space-1)}
  .article__toc{position:static}
  .article{gap:var(--space-8)}
  .gated__row{grid-template-columns:40px minmax(0,1fr)}
  .gated__row .chip{grid-column:2;justify-self:start}
  .preview{gap:var(--space-6)}
  .protocol__step{grid-template-columns:40px minmax(0,1fr)}
  .protocol__owner{grid-column:2;white-space:normal;line-height:16px}
  .section__head h2{font-size:26px;line-height:34px}
  .disclosure th[scope="row"]{width:40%}
}
@media (max-width:600px){
  :root{--gutter:16px}
  .viewer{width:100%;max-width:100%;height:100dvh;border-radius:0;border:0}
  .viewer__stage{padding:var(--space-3);gap:var(--space-3)}
  .viewer__bar{padding:var(--space-2) var(--space-3)}
  .viewer__zoom{display:none}
  .topology__hops,.timeline,.field-row,.site-footer__grid{grid-template-columns:minmax(0,1fr)}
  .topology__hop::after{display:none}
  .timeline__item{border-left:0}
  .timeline__item:nth-child(n+2){border-top:1px solid var(--border)}
  .disclosure th[scope="row"],.disclosure td{display:block;width:100%}
  .disclosure td{border-top:0;padding-top:0}
  .card,.boundary__side,.agreements__panel,.intake,.route,.signup{padding:var(--space-6)}
  .signup__row{flex-direction:column}
  .hero__lede{font-size:16px;line-height:26px}
  .diagram{padding:var(--space-2)}
  .diagram__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .diagram svg{min-width:720px}
  .diagram__hint{display:block}
}
/* A table wider than the screen scrolls inside its wrapper. The caption stays put and wraps, so it is never cut off. */
.sw-table caption{position:sticky;left:0;box-sizing:border-box;max-width:calc(100vw - 2 * var(--gutter) - 2px)}
/* Scroll performance. Each card, diagram and drawing is its own layout and paint island, so a hover or state change
   under the pointer repaints that box alone instead of the band of page around it. Measured with tests/scroll-perf.js.
   .art keeps paint open because its floating tiles cast shadows past the drawing's edge. */
@media screen{
  .card,.artifact,.diagram,.sw-table-wrap,.spot,.cover,.diagram svg{contain:layout paint}
  .art,.hero__visual{contain:layout}
  .artifact summary:focus-visible{outline-offset:-2px}
}
/* Touch: controls reach the 44px minimum on phones. */
@media (max-width:640px){
  .sw-btn,.sw-input,.sw-select,.site-header__toggle,.filter,.sw-tab{min-height:44px}
  .dialog__close,.viewer__tool,.filter{min-width:44px}
  .dialog__close,.viewer__tool{min-height:44px}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}
@media print{
  .site-header,.site-footer,.skip-link,.filters,.dialog,.actions,.article__toc,.hero__visual{display:none !important}
  body{font-size:11pt}
  .hero,.section{padding:12pt 0;border:0}
  .article{display:block}
  .article__body{max-width:none;gap:18pt}
  .faq details{display:block}
  .faq details > p{display:block}
  .faq summary::after{display:none}
  a{color:inherit;text-decoration:none}
  .sw-table-wrap,.cite,.faq{box-shadow:none}
  h2{break-after:avoid}
  .cite__row,.faq details,tr{break-inside:avoid}
}