:root{color-scheme:light;
--bg:#ffffff;--surface:#f4f6f9;--surface-2:#eaeff5;--ink:#141a23;--muted:#4a5565;--line:#d6dce4;--line-soft:#e4e8ee;
--accent:#0a58a8;--accent-hover:#08467f;--on-accent:#ffffff;--focus:#b35c00;
--rec-bg:#f5f0fb;--rec-line:#6a3d9e;--rec-ink:#5a3288;--notice-bg:#fff6e0;--notice-line:#8a5300;
--code-bg:#eef1f5;--code-ink:#1c2430;
--b-law:#0a58a8;--b-pending:#8a5300;--b-soft:#475569;--b-bp:#0f6e6e;--b-rec:#6a3d9e;
--brand:#15284b;--brand-hover:#0b1830;--brand-tint:#eef2f9;--radius:10px;--radius-lg:16px;
--box-tint:#f3f6fc;--te-tint:#dfe6f1;--te-line:#b4c2d8;
--lite:#0d6b5e;--lite-tint:#e8f5f2;--lite-line:#9fd0c6;
--space-xs:.5rem;--space-s:1rem;--space-m:1.5rem;--space-l:clamp(2rem,1.25rem + 2vw,3rem);--space-xl:clamp(2.5rem,1.5rem + 3vw,4.5rem);
--max:96rem;--gutter:clamp(16px,4vw,72px);--measure:70ch;--wrap:var(--max);
--shadow-sm:0 1px 2px rgba(21,40,75,.06);--shadow:0 1px 2px rgba(21,40,75,.06),0 14px 36px -14px rgba(21,40,75,.22);
--sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
--mono:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace}
/* Motion (owner, 2026-10-14): every duration, easing and distance in one place, to tune. Card lift on hover and keyboard
   focus, the "+" turning into a minus, a box's content opening, the flow arrows' nudge, and the homepage intro (the hero
   scale wobbles, holds balanced, then glides into the header logo, which settles). All of it is off under
   prefers-reduced-motion */
:root{--motion-fast:150ms;--motion-base:200ms;--motion-open:250ms;
--ease-out:cubic-bezier(.22,.61,.36,1);--ease-in-out:cubic-bezier(.45,0,.55,1);--ease-glide:cubic-bezier(.65,0,.35,1);
--lift:3px;--line-lift:#b4c2d8;--shadow-lift:0 2px 4px rgba(21,40,75,.08),0 16px 32px -14px rgba(21,40,75,.32);--brand-bright:#24457f;
--ease-rise:cubic-bezier(.4,0,.15,1);
--intro-in:300ms;--intro-wobble:2s;--intro-hold:350ms;--intro-glide:1100ms;--intro-settle:350ms;--intro-pulse:1.1;
--intro-size:clamp(4.9rem,14.25vw - 4.25rem,6rem)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:6rem}
body{margin:0;background:var(--bg);color:var(--ink);font:1rem/1.6 var(--sans)}
.wrap{width:100%;max-width:calc(var(--max) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.prose>*{max-width:var(--measure)}
.prose>:is(.table-wrap,.grid,.stats,.plan,.jgroup,.plan-preview,.value-strip,.hw,.search-panel,.checks,.results,.cta-row,#timeline){max-width:none}
.prose>article.provision{max-width:54rem}
.prose.full>*{max-width:none}
a{color:var(--accent);text-underline-offset:.15em}
a:hover{color:var(--accent-hover)}
a:focus-visible,summary:focus-visible,.btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:16px;top:8px;z-index:40;background:var(--bg);padding:8px 12px;border:2px solid var(--focus)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3{line-height:1.15;margin:0 0 .5em;color:var(--ink)}
h1,h2{font-family:var(--serif);font-weight:500;letter-spacing:-.015em}
h1{font-size:clamp(2.1rem,1.2rem + 2.6vw,3.6rem);line-height:1.08}
h2{font-size:clamp(1.6rem,1.15rem + 1.3vw,2.5rem);margin-top:0}
h3{font-size:1.125rem;font-weight:650;line-height:1.3}
p,ul,ol{margin:0 0 1em}
li{margin:.25em 0}
code{font:.92em/1.4 var(--mono);background:var(--code-bg);color:var(--code-ink);padding:.1em .3em;border-radius:4px;overflow-wrap:anywhere}
pre{background:var(--code-bg);color:var(--code-ink);padding:14px 16px;border-radius:var(--radius);overflow-x:auto;margin:0 0 1.25em;border:1px solid var(--line)}
pre code{background:none;padding:0;overflow-wrap:normal;white-space:pre}
pre.changelog code{white-space:pre-wrap;overflow-wrap:anywhere}
header.site{position:sticky;top:0;z-index:30;border-bottom:1px solid var(--line-soft);background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px)}
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 2.25rem;padding-top:.85rem;padding-bottom:.85rem}
.brand{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--serif);font-weight:500;font-size:1.5rem;line-height:1;color:var(--brand);text-decoration:none;letter-spacing:-.005em}
/* Owner, 2026-10-13 (round 5): the serif wordmark, "Twin" in the brand navy and "Ethos" in the accent blue; Logo A's mark unchanged */
.wordmark{white-space:nowrap}.wm-twin{color:var(--brand)}.wm-ethos{color:var(--accent)}
.brand-mark{display:block;height:2rem;width:auto}
.brand:hover{color:var(--brand)}
nav.primary{flex:1 1 auto}
@media (min-width:40.0625rem){.bar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:2rem}
.bar>.brand{justify-self:start}.bar>nav.primary{justify-self:center}.bar>.bar-actions{justify-self:end}}
.bar-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-left:auto}
.bar-actions .btn{border-color:var(--brand)}
.bar-actions .btn-primary{background:var(--brand);color:var(--on-accent)}
.bar-actions .btn-primary:hover{background:var(--brand-hover);border-color:var(--brand-hover);color:var(--on-accent)}
.bar-actions .btn[aria-current=page]{box-shadow:inset 0 -3px 0 var(--focus)}
nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:.25rem 1.1rem;margin:0;padding:0}
nav.primary ul{gap:.25rem 1.9rem}
nav.primary a{text-decoration:none;color:var(--brand);font-weight:500}
nav.primary a:hover{text-decoration:underline;color:var(--brand)}
nav.primary a[aria-current=page]{font-weight:700;text-decoration:underline;text-decoration-thickness:2px}
@media (max-width:40rem){nav.primary{flex-basis:100%;order:3}nav.primary ul{gap:.25rem .9rem}.bar{column-gap:.75rem}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45em;padding:.7em 1.25em;border-radius:8px;font-weight:650;text-decoration:none;border:1.5px solid var(--brand);line-height:1.2;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.btn-primary{background:var(--brand);color:var(--on-accent)}
.btn-primary:hover{background:var(--brand-hover);border-color:var(--brand-hover);color:var(--on-accent)}
.btn-secondary{background:var(--bg);color:var(--brand)}
.btn-secondary:hover{color:var(--brand-hover);border-color:var(--brand-hover);background:var(--brand-tint)}
.btn-sm{padding:.45em .9em;font-size:.95rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.5em 0 1em}
main{display:block}
section{padding:clamp(2.5rem,4.5vw,4.5rem) 0;border-bottom:1px solid var(--line-soft)}
section:last-child{border-bottom:0}
.hero{padding:clamp(3rem,8vw,8rem) 0 clamp(2.5rem,6vw,6rem);background:linear-gradient(180deg,var(--brand-tint),var(--bg) 88%)}
/* the hero's column gap and headline size are tokens: the intro's scale is placed from them */
.hero{--hero-gap:clamp(2.5rem,6vw,7rem);--hero-h1:clamp(2.25rem,1rem + 3.5vw,4.75rem)}
.hero-grid{display:grid;gap:1.5rem var(--hero-gap)}
.hero h1{font-size:var(--hero-h1);line-height:1.04;letter-spacing:-.02em;margin:0;color:var(--brand)}
.hero-body>:last-child{margin-bottom:0}
.lede{font-size:clamp(1.08rem,1rem + .3vw,1.25rem);color:var(--ink);max-width:var(--measure)}
.fine{font-size:.9rem;color:var(--muted)}
.muted{color:var(--muted)}
.eyebrow{font-size:.85rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:.4em}
/* Owner, 2026-10-25: the homepage's first explorer panel (Explore; How it works' left on 2026-11-10) carries an "Example data" heading */
.example-label{margin:0 0 .5rem}
.page-head{padding:clamp(2.5rem,5vw,5rem) 0 clamp(1.75rem,3vw,3rem);border-bottom:1px solid var(--line-soft);background:linear-gradient(180deg,var(--brand-tint),var(--bg))}
.page-head h1{max-width:28ch}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:1rem}
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px 20px;box-shadow:var(--shadow-sm)}
.card p:last-child{margin-bottom:0}
.card.rec{border-left:5px solid var(--rec-line)}
.card-stack{display:grid;gap:.75rem;margin:0 0 1.5rem}
.stat{font-size:1.9rem;font-weight:800;line-height:1.1;margin:.2em 0 .3em;font-variant-numeric:tabular-nums}
.notice{border-left:5px solid var(--notice-line);background:var(--notice-bg);padding:12px 16px;border-radius:0 var(--radius) var(--radius) 0;margin:0 0 1.25em}
.rec-panel{border-left:5px solid var(--rec-line);background:var(--rec-bg);padding:16px 18px;border-radius:0 var(--radius) var(--radius) 0;margin:0 0 1.25em}
.rec-label{display:inline-block;font-size:.8rem;font-weight:700;color:var(--rec-ink);border:1.5px solid var(--rec-line);border-radius:999px;padding:.1em .7em;margin-bottom:.6em}
.lane{display:inline-block;font-size:.78rem;font-weight:700;padding:.15em .65em;border-radius:999px;color:#fff;white-space:nowrap}
.binding_in_force{background:var(--b-law)}.binding_not_in_force{background:var(--b-pending)}
.soft_law_or_standard{background:var(--b-soft)}.best_practice{background:var(--b-bp)}.recommended_guardrail{background:var(--b-rec)}
.table-wrap{overflow-x:auto;margin:0 0 1.25em;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg)}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:0}
thead th{background:var(--surface);font-weight:700}
td.num,th.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.steps{counter-reset:step;list-style:none;padding:0}
.steps li{counter-increment:step;position:relative;padding-left:2.6rem;margin:0 0 1rem}
.steps li::before{content:counter(step);position:absolute;left:0;top:0;width:1.8rem;height:1.8rem;border-radius:50%;background:var(--brand);color:var(--on-accent);font-weight:700;display:flex;align-items:center;justify-content:center}
.subnav{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:1.25rem 0 0}
.subnav a{display:inline-flex;align-items:center;min-height:2.25rem;padding:.2em .9em;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--brand);text-decoration:none;font-size:.93rem;font-weight:550}
.subnav a:hover{border-color:var(--brand);background:var(--brand-tint)}
.subnav a[aria-current=page]{background:var(--brand);border-color:var(--brand);color:var(--on-accent);font-weight:700}
.subnav a:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 18px;margin:0 0 1.5rem}
.toc ol{margin:0;padding-left:1.25rem}
details{border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px;margin:0 0 1rem}
summary{cursor:pointer;font-weight:650}
footer.site{border-top:1px solid var(--line);background:var(--surface);padding:clamp(2rem,4vw,3.5rem) 0;font-size:.95rem}
footer.site p{margin:0 0 .6em}
footer.site .disclosure{font-weight:650}
footer nav ul{gap:.25rem 1.25rem}
footer nav a{color:var(--accent);text-decoration:underline}
@media (min-width:64rem){footer.site .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);column-gap:clamp(2rem,6vw,7rem)}
footer.site nav{grid-column:2;grid-row:1/span 3}footer nav ul{display:grid;grid-template-columns:repeat(2,max-content);gap:.4rem 3rem}}
@media (max-width:40rem){pre{font-size:.82rem}.lede{font-size:1.08rem}}
@media print{header.site nav,.cta-row,.skip{display:none}header.site{position:static}}
/* How it works (owner, 2026-11-11, round 3, from the owner's marked-up option A): the TwinEthos context data layer is
   one row, its three boxes in a dashed frame joined by a line to a smaller TwinEthos MCP box; the two ways in (your
   coding agent above, your Claude or ChatGPT below, both in the Lite green) join MCP with elbow connector lines, as in
   a traditional flow; each row's icon and name sit on the right. Every box is a native <details> whose "+" opens its
   details inside the box. Round 3b (2026-11-11): the two ways in share the third box's width and edges and sit the
   same distance above and below it; the connectors leave from the middle of each box; every title stays on one
   line. One column below 80rem (the flow needs the width): the two ways in, an arrow down to MCP, a two-way arrow
   to the layer. Owner, 2026-11-12: the boxes other than MCP are narrower, so the flow stays a flow from 80rem (a
   1280px laptop, scrollbar included; was 85rem), with no new wraps: every title and pill stays on one line, clear of
   its "+", and every box's line under its title takes at most two. Measured: the third column, which the two ways in
   share, is 14.75rem ("Your Claude, ChatGPT" has 8px to spare); the first two shrink to 13.5rem, room for the counts
   to grow; the names keep their 12.5rem. The measured results below are held to the flow's width, so they line up.
   Round 2 (owner, 2026-11-12): MCP's box is inset .5rem in its column (its legs and the ways in's elbows follow it),
   so the line from the dashed frame to MCP shows as before (.9rem); on screens wider than the flow, the flow and the
   results are centred on the page */
.how{--hw-max:74.75rem}
.hw{--gx:2.5rem;--gy:2.25rem;--frame:.85rem;--line-w:2px;margin:var(--space-l) 0 0;display:grid;gap:1rem;align-items:start;
grid-template-columns:minmax(0,1fr);grid-template-areas:"nbuild" "agent" "nask" "chat" "mcp" "nlayer" "layer"}
.hw-n-build{grid-area:nbuild}.hw-n-ask{grid-area:nask}.hw-n-layer{grid-area:nlayer}
.hw-agent{grid-area:agent}.hw-chat{grid-area:chat}.hw-mcp{grid-area:mcp}.hw-layer{grid-area:layer}
.hw-in{display:none}
.hw-name{display:flex;align-items:center;gap:.75rem;min-width:0}
.hw-name .icon{width:2.75rem;height:2.75rem;padding:.5rem;border-radius:10px;background:var(--brand-tint)}
.hw-n-ask .icon{background:var(--lite-tint)}
.hw-name h3{margin:0;font-size:1.5rem;line-height:1.2;color:var(--brand)}
.hw-n-ask h3{color:var(--lite)}
.hw-name p{margin:.15rem 0 0;font-size:.95rem;color:var(--muted)}
.hw details.hw-box{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);min-width:0}
.hw details.hw-box.hw-te{background:var(--te-tint);border-color:var(--te-line);border-top:4px solid var(--brand)}
.hw-way details.hw-box{background:var(--lite-tint);border-color:var(--lite-line)}
.hw-way details.hw-box>summary::after{--plus-bar:var(--lite)}
.hw details.hw-box>summary{align-items:flex-start;padding:1rem 1.125rem}
.hw-head{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.hw-head h4{margin:0;font-family:var(--serif);font-size:1.08rem;line-height:1.3}
.hw-te .hw-head h4{color:var(--brand)}
.hw-sub{font-size:.88rem;line-height:1.45;color:var(--muted)}
.hw-num{font-size:.75rem;font-weight:700;letter-spacing:.06em;color:var(--accent)}
.hw-tag{align-self:flex-start;margin-top:.35rem;font-size:.75rem;font-weight:700;line-height:1.5;color:var(--lite);background:var(--bg);border:1px solid var(--lite-line);border-radius:999px;padding:0 .65em}
.hw-body{padding:0 1.125rem 1.1rem;font-size:.93rem;overflow-wrap:anywhere}
.hw-body p,.hw-body ul{margin:0 0 .65rem}.hw-body>:last-child{margin-bottom:0}
.hw-body ul{padding-left:1.2rem}.hw-body li{margin:0 0 .3rem}
.hw-body .hw-stats,.hw-body .hw-try{list-style:none;padding:0}
.hw-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(6.25rem,1fr));gap:.5rem}
.hw-stats li{background:var(--bg);border-radius:8px;padding:.5rem .7rem;margin:0}
.hw-stats strong{display:block;font-family:var(--serif);font-weight:500;font-size:1.35rem;line-height:1.15;color:var(--brand)}
.hw-stats span{display:block;font-size:.8rem;line-height:1.35;color:var(--muted)}
.hw-lanes{display:flex;flex-wrap:wrap;gap:.35rem}.hw-lanes .lane{white-space:normal}
.hw-try li{background:var(--bg);border-left:3px solid var(--lite);border-radius:0 6px 6px 0;padding:.35rem .6rem;font-style:italic}
.hw-layer{list-style:none;margin:0;padding:.85rem;display:grid;gap:.85rem;align-items:start;min-width:0;border:1.5px dashed var(--brand-bright);border-radius:calc(var(--radius-lg) + .5rem)}
.hw-layer>li{margin:0;min-width:0}
/* MCP between its two connectors. Stacked: an arrow down from the two ways in above, a two-way arrow to the layer below */
.hw-mcp{display:flex;flex-direction:column;align-items:stretch;min-width:0;position:relative}
.hw-pipe{display:block;align-self:center;width:1.3rem;height:2.2rem;background:var(--brand)}
.hw-pipe-top{clip-path:polygon(34% 0,66% 0,66% 62%,100% 62%,50% 100%,0 62%,34% 62%)}
.hw-pipe-bottom{margin-top:1rem;clip-path:polygon(50% 0,100% 32%,66% 32%,66% 68%,100% 68%,50% 100%,0 68%,34% 68%,34% 32%,0 32%)}
.hw-mcp>details{margin-top:1rem}
@media (min-width:80rem){
.hw{--gx:1.25rem;column-gap:var(--gx);row-gap:var(--gy);justify-content:center;--mcp-inset:.5rem;
grid-template-columns:minmax(13.5rem,14.75rem) minmax(13.5rem,14.75rem) 14.75rem 13rem 12.5rem;
grid-template-areas:". . agent in-top nbuild" "l1 l2 l3 mcp nlayer" ". . chat in-bottom nask"}
.hw-name{align-self:center}
.hw-head h4{white-space:nowrap;font-size:1rem}
.hw details.hw-box>summary{gap:.5rem;padding:1rem}.hw-tag{white-space:nowrap}
.how .value-strip,.how details.tested{max-width:var(--hw-max);margin-inline:auto}
/* the layer's boxes sit in the flow's own columns, so the two ways in share the third box's width and edges; the
   dashed frame is drawn around them, reaching into the gaps */
.hw-layer{display:contents}
.hw-layer::before{content:"";grid-row:2;grid-column:1/4;align-self:stretch;margin:calc(-1 * var(--frame));border:1.5px dashed var(--brand-bright);border-radius:calc(var(--radius-lg) + .5rem);pointer-events:none}
.hw-layer>li:nth-child(1){grid-area:l1}.hw-layer>li:nth-child(2){grid-area:l2}.hw-layer>li:nth-child(3){grid-area:l3}
/* owner, 2026-11-11: the row is as tall as its name, so the boxes sit in the middle of the frame, not at its top */
.hw-layer>li{align-self:center}
.hw-in{display:block;position:relative;align-self:stretch}
.hw-in-top{grid-area:in-top}.hw-in-bottom{grid-area:in-bottom}
/* the elbows: out of the middle of each way in's right side, then down (or up) to MCP */
.hw-in,.hw-mcp{margin-left:var(--mcp-inset)}
.hw-in::before{content:"";position:absolute;left:calc(-1 * (var(--gx) + var(--mcp-inset)));width:calc(var(--gx) + var(--mcp-inset) + 50% + var(--line-w) / 2);border:0 solid var(--brand)}
.hw-in-top::before{top:50%;bottom:calc(-1 * var(--gy));border-width:var(--line-w) var(--line-w) 0 0;border-top-right-radius:10px}
.hw-in-bottom::before{top:calc(-1 * var(--gy));height:calc(var(--gy) + 50%);border-width:0 var(--line-w) var(--line-w) 0;border-bottom-right-radius:10px}
.hw-mcp{align-self:stretch}
.hw-mcp>details{margin:0}
/* the line from the frame to MCP, at MCP's middle */
.hw-mcp::before{content:"";position:absolute;top:50%;left:calc(var(--frame) - var(--gx) - var(--mcp-inset));width:calc(var(--gx) + var(--mcp-inset) - var(--frame));height:var(--line-w);margin-top:calc(var(--line-w) / -2);background:var(--brand)}
/* the vertical legs above and below MCP, ending in an arrowhead on its edge */
.hw-pipe,.hw-pipe-bottom{flex:1 0 .6rem;width:auto;height:auto;margin:0;align-self:stretch;background:none;clip-path:none;position:relative}
.hw-pipe::before{content:"";position:absolute;left:calc(50% - var(--line-w) / 2);width:var(--line-w);background:var(--brand)}
.hw-pipe::after{content:"";position:absolute;left:calc(50% - .45rem);width:.9rem;height:.6rem;background:var(--brand)}
.hw-pipe-top::before{top:0;bottom:.55rem}.hw-pipe-top::after{bottom:0;clip-path:polygon(0 0,100% 0,50% 100%)}
.hw-pipe-bottom::before{top:.55rem;bottom:0}.hw-pipe-bottom::after{top:0;clip-path:polygon(50% 0,100% 100%,0 100%)}
details.hw-box:not([open])>summary{min-height:5.25rem}
}
@media (forced-colors:active){.hw-pipe,.hw-pipe::before,.hw-pipe::after,.hw-mcp::before{forced-color-adjust:none;background:CanvasText}
.hw-in::before{forced-color-adjust:none;border-color:CanvasText}
.hw-way details.hw-box>summary::after{forced-color-adjust:none;--plus-bar:CanvasText}}
/* wide, MCP's legs are full-width containers: only their stems and arrowheads take CanvasText (review of #130) */
@media (forced-colors:active) and (min-width:80rem){.hw-pipe{background:none}}
.value-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px clamp(14px,3vw,40px);margin:0}
.value-strip div{border-top:3px solid var(--brand);padding:12px 2px 0}
.value-strip strong{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,1.2rem + 1vw,2.2rem);line-height:1.15;color:var(--brand)}
.value-strip span{font-size:.9rem;color:var(--muted)}
@media (max-width:72rem){.value-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:30rem){.value-strip{grid-template-columns:1fr}}
:root{--g-law:#0a58a8;--g-pending:#8a5300;--g-soft:#475569}
[hidden]{display:none!important}
.meta{font-size:.92rem;color:var(--muted);overflow-wrap:anywhere}
.tag{display:inline-block;font-size:.78rem;font-weight:650;padding:.1em .6em;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.kind{display:inline-block;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-right:.5rem}
.search-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px 20px;margin:0 0 1.25rem}
.field{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.field label{font-weight:650;font-size:.92rem}
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));gap:.75rem;margin-top:.75rem}
input[type=search],select{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--muted);border-radius:8px;padding:.5em .65em;width:100%;min-width:0}
input[type=search]{font-size:1.1rem;padding:.7em .85em}
input:focus-visible,select:focus-visible,button:focus-visible,ol:focus-visible,pre:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
button.btn{font:inherit;cursor:pointer;background:var(--bg);color:var(--brand)}
.results{list-style:none;padding:0;margin:0}
.results li{border-bottom:1px solid var(--line);padding:.8rem 0}
.results li p{margin:0 0 .3em}
.result-title{font-weight:650}
@media (min-width:64rem){#ex-results.results{display:grid;grid-template-columns:repeat(auto-fill,minmax(26rem,1fr));column-gap:clamp(2rem,4vw,4rem)}}
.provision{border-top:1px solid var(--line);padding:1.75rem 0 .5rem}
.provision:first-child{border-top:0;padding-top:0}
.guard{border-left:5px solid var(--accent);background:var(--surface);padding:12px 16px;border-radius:0 var(--radius) var(--radius) 0;margin:0 0 1.25rem;min-width:0}
.example pre{margin:0 0 .75rem}
fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px;margin:0 0 1rem;min-width:0;background:var(--bg)}
legend{font-weight:650;padding:0 .3rem}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.35rem 1rem}
.checks label{display:flex;gap:.5rem;align-items:flex-start}
.checks input{margin-top:.35rem;flex:none}
.access-form{display:grid;gap:.9rem;max-width:36rem;margin:0 0 1.5rem}
.access-form input[type=text],.access-form input[type=email],.access-form textarea{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--muted);border-radius:8px;padding:.5em .65em;width:100%;min-width:0}
textarea:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.access-form .hint{font-size:.88rem;color:var(--muted);margin:0}
.access-form select{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--muted);border-radius:8px;padding:.45em .6em;width:100%;min-width:0}
.access-form fieldset.choices{border:1px solid var(--line);border-radius:8px;padding:.6rem .9rem .8rem;margin:0;min-width:0}
.access-form legend{font-weight:650;font-size:.92rem;padding:0 .3rem}
.access-form legend .hint{font-weight:400}
.choice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:.35rem 1rem}
.choice{display:flex;gap:.45rem;align-items:flex-start}
.choice input{margin-top:.3rem;flex:none}
.step-fold>summary h2{display:inline;margin:0}
.quick>details.step-fold{max-width:54rem;border-top:1px solid var(--line);padding:.6rem 0}
.quick>details.step-fold:last-child{border-bottom:1px solid var(--line)}
.access-form .req{color:var(--accent);font-weight:700;margin-left:.15em}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
@media (max-width:40rem){.field-row{grid-template-columns:1fr}}
.access-form{max-width:none}
pre.copy{cursor:copy;user-select:all;position:relative}
pre.copy.copied::after{content:"Copied";position:absolute;top:.4rem;right:.5rem;font:600 .78rem/1.4 system-ui,sans-serif;background:var(--accent);color:var(--on-accent);padding:.1rem .5rem;border-radius:6px;user-select:none}
/* Ask TwinEthos (tools/web/ask.js; docs/technical/ASK-TWINETHOS.md §8): a floating "Ask" button that opens a chat panel,
   bottom right on wide screens and a full-screen sheet on phones (40rem and narrower), where the page behind it stops
   scrolling. The button is hidden until the script runs, so without JavaScript there is nothing to press. */
.askw-launch{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));z-index:50;display:inline-flex;align-items:center;gap:.5rem;min-height:48px;padding:.65rem 1.15rem .65rem .95rem;border:0;border-radius:999px;background:var(--brand);color:var(--on-accent);font:inherit;font-weight:650;cursor:pointer;box-shadow:var(--shadow-lift);transition:transform var(--motion-fast) var(--ease-out),background-color var(--motion-fast) var(--ease-out)}
.askw-launch:hover{background:var(--brand-bright);transform:translateY(-2px)}
.askw-launch:focus-visible,.askw-close:focus-visible,.askw-starter:focus-visible,.askw-a summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.askw-launch svg{width:22px;height:22px;flex:none}
.askw-open .askw-launch{display:none}
.askw-panel{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));z-index:51;width:min(26rem,calc(100vw - 2rem));height:min(40rem,calc(100vh - 2rem));display:flex;flex-direction:column;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lift);overflow:hidden;animation:askw-in var(--motion-open) var(--ease-out)}
.askw-panel[hidden]{display:none!important}
@keyframes askw-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.askw-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.6rem .6rem .6rem 1rem;background:var(--brand);color:var(--on-accent);flex:none}
.askw-head h2{font-size:1.05rem;margin:0;color:inherit;letter-spacing:0}
.askw-close{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:8px;background:transparent;color:inherit;cursor:pointer}
.askw-close:hover{background:var(--brand-bright)}
.askw-close svg{width:20px;height:20px}
.askw-disclosure{margin:0;padding:.55rem 1rem;background:var(--brand-tint);border-bottom:1px solid var(--line);font-size:.86rem;font-weight:650;flex:none}
.askw-log{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:.9rem 1rem;display:grid;align-content:start;gap:1rem;font-size:.95rem}
.askw-welcome p{margin:0 0 .5rem}
.askw-welcome .hint{font-size:.86rem;color:var(--muted)}
.askw-starters{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.askw-starter{font:inherit;font-size:.88rem;text-align:left;color:var(--brand);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:.4em .85em;min-height:40px;cursor:pointer;max-width:100%}
.askw-starter:hover{border-color:var(--brand);background:var(--brand-tint)}
.askw-turn{display:grid;gap:.5rem;min-width:0}
.askw-q{justify-self:end;max-width:85%;margin:0;padding:.5rem .8rem;background:var(--brand);color:var(--on-accent);border-radius:14px 14px 4px 14px;overflow-wrap:anywhere;white-space:pre-wrap}
.askw-a{min-width:0;padding:.65rem .8rem;background:var(--surface);border:1px solid var(--line-soft);border-radius:14px 14px 14px 4px;overflow-wrap:anywhere}
.askw-a>:last-child{margin-bottom:0}
.askw-a .ask-answer{margin:0 0 .5rem}
.askw-a .ask-count{font-weight:650;margin:0 0 .6rem}
.askw-a .ask-progress{color:var(--muted);margin:0}
.askw-a .ask-progress::after{content:"";display:inline-block;width:.8em;height:.8em;margin-left:.5em;border:2px solid var(--line);border-top-color:var(--brand);border-radius:50%;vertical-align:-.1em;animation:ask-spin .9s linear infinite}
@keyframes ask-spin{to{transform:rotate(360deg)}}
.askw-a h3{font-size:.95rem;margin:.8rem 0 .2rem}
.askw-a h4{font-size:.88rem;margin:.6rem 0 .15rem;color:var(--muted)}
.askw-a ol,.askw-a ul{padding-left:1.1rem;margin:0 0 .5rem}
.askw-a li{margin:.3em 0}
.askw-a .fine{font-size:.84rem}
.askw-a .ask-where{font-weight:650}
.askw-a .ask-more{display:grid;gap:.5rem;justify-items:start;margin:.75rem 0 .25rem}
.askw-a .ask-more details{margin:0;width:100%;box-sizing:border-box;background:var(--bg);padding:8px 12px}
.askw-a .ask-conditions{font-size:.84rem;color:var(--muted);margin:.15em 0 .4em;padding-left:.9rem}
.askw-a .ask-conditions li{margin:.1em 0}
.askw-a .ask-template{margin:.4em 0 .6em}
.askw-a .ask-duty-title{font-size:1rem;margin:.8em 0 .15em}
.askw-a .ask-duty{margin:0 0 .3em}
.askw-a .ask-template-rules{margin:0 0 .3em}
.askw-a .ask-limits{font-size:.84rem;color:var(--muted);margin:.1em 0 .4em;padding-left:.9rem}
.askw-a .ask-links{margin:.5rem 0 0}
.askw-form{flex:none;display:flex;align-items:flex-end;gap:.5rem;padding:.65rem .75rem;border-top:1px solid var(--line);background:var(--bg)}
.askw-form textarea{flex:1 1 auto;min-width:0;font:inherit;font-size:1rem;line-height:1.4;color:var(--ink);background:var(--bg);border:1px solid var(--muted);border-radius:10px;padding:.55em .7em;resize:none;max-height:8.5rem;overflow-y:auto}
.askw-form .btn{flex:none;min-height:44px}
.askw-fine{flex:none;margin:0;padding:0 .9rem .6rem;font-size:.76rem;line-height:1.4;color:var(--muted);background:var(--bg)}
body.has-askw footer.site{padding-bottom:5.5rem}
/* owner, 2026-10-24: no chat on phones for now (40rem and narrower); /explore/ask/ says so there */
.askw-phone-note{display:none}
@media (max-width:40rem){.askw-launch,.askw-panel,.askw-wide-note{display:none!important}.askw-phone-note{display:block}body.has-askw footer.site{padding-bottom:0}}
@media (max-width:40rem){.askw-launch{padding:.65rem 1rem}.askw-launch .askw-brand{display:none}.askw-panel{inset:0;width:100%;height:100vh;height:100dvh;border:0;border-radius:0;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}html.askw-open,html.askw-open body{overflow:hidden}}
@media (prefers-reduced-motion:reduce){.askw-panel{animation:none}.askw-launch{transition:none}.askw-launch:hover{transform:none}}
@media print{.askw-launch,.askw-panel{display:none!important}}
.consent{display:flex;gap:.5rem;align-items:flex-start}
.consent input{margin-top:.35rem;flex:none}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
button.btn-primary{background:var(--brand);color:var(--on-accent)}
.plan{list-style:none;padding:0;margin:0 0 1.5rem;counter-reset:plan;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,24rem),1fr))}
.plan>li{counter-increment:plan;position:relative;margin:0;padding:16px 18px 16px 3.5rem;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);min-width:0}
.plan>li::before{content:counter(plan);position:absolute;left:16px;top:16px;width:1.8rem;height:1.8rem;border-radius:50%;background:var(--brand-tint);color:var(--brand);font-weight:700;font-size:.9rem;display:flex;align-items:center;justify-content:center}
.plan h3{margin-bottom:.3rem;font-size:1.05rem}
.plan p{margin:0 0 .35em}
.timeline{list-style:none;padding:0;margin:0 0 1.75rem}
.timeline li{border-left:3px solid var(--line);padding:.3rem 0 .9rem 1rem;margin:0}
.timeline li p{margin:0 0 .3em}
.timeline time{font-weight:700;font-variant-numeric:tabular-nums}
@media (min-width:80rem){#timeline{columns:2;column-gap:4rem}#timeline .month{break-inside:avoid-column}}
.grade{display:inline-block;font-size:.85rem;font-weight:700;padding:.15em .7em;border-radius:999px;border:1.5px solid currentColor}
.trust{border:1px solid var(--line);border-left:5px solid var(--muted);background:var(--surface);border-radius:0 var(--radius) var(--radius) 0;padding:12px 16px;margin:0 0 1.25rem;min-width:0}
.trust h2{font-size:1.2rem;margin-bottom:.35rem}
details.trust summary{font-weight:400}
.trust-label{font-weight:700;margin-right:.35rem}
.trust-sum{color:var(--muted);font-size:.92rem}
.trust-list{margin:.5rem 0 0}
.trust-list>div{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:.2rem 1rem;padding:.45rem 0;border-top:1px solid var(--line)}
.trust-list>div:first-child{border-top:0}
.trust-list dt{font-weight:650}
.trust-list dd{margin:0;min-width:0;overflow-wrap:anywhere}
.trust-list dd p,.trust-list dd ul{margin:0 0 .4em}
@media (max-width:40rem){.trust-list>div{grid-template-columns:1fr}}
.plan-preview{list-style:none;padding:0;margin:0 0 1rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:.75rem}
.plan-preview li{margin:0}
.plan-preview a{display:block;height:100%;background:var(--bg);border:1px solid var(--line);border-left:5px solid var(--brand);border-radius:0 var(--radius) var(--radius) 0;padding:12px 16px;font-weight:650;text-decoration:none;color:var(--brand)}
.plan-preview a:hover{text-decoration:underline}
.plan-preview a:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.jgroup{columns:16rem;column-gap:2rem;padding-left:1.1rem}
.jgroup li{break-inside:avoid}
@media print{header.site,footer.site nav,.subnav,.search-panel,#plan-tools,#plan-more,#ex-more,.toc{display:none!important}
body{font-size:11pt;background:#fff;color:#000}section{padding:.75rem 0;border:0}.page-head{padding:0 0 .5rem;background:none}
.plan{display:block}.plan>li{box-shadow:none}
.plan>li,.trust-list>div,.provision{break-inside:avoid}a{color:inherit}.lane{color:#000;background:none;border:1px solid #000}}
.grade.law_in_force{color:var(--g-law)}.grade.related_law_in_force{color:var(--g-law)}.grade.law_coming{color:var(--g-pending)}.grade.related_law_coming{color:var(--g-pending)}.grade.standards{color:var(--g-soft)}.grade.ahead_of_law{color:var(--rec-ink)}
@media (max-width:30rem){.hero .cta-row .btn{flex:1 1 100%;text-align:center}}
/* Owner, 2026-10-14 (round 6): more room between the three groups; within each row the cards are equal height */
.stat-group{margin:var(--space-xl) 0 0}
.stat-group+.stat-group{margin-top:clamp(3.5rem,2rem + 4vw,6.5rem)}
.stat-group h3{font-size:1.15rem;margin-bottom:.25rem}
.stat-group>.fine{max-width:52rem}
.stat-group+p{margin-top:1.5rem}
@media (min-width:80rem){.stat-group{display:grid;grid-template-columns:minmax(0,19rem) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:clamp(2rem,4vw,5rem);align-items:start}
.stat-group>h3,.stat-group>.fine{grid-column:1}.stat-group>.stats{grid-column:2;grid-row:1/span 2;margin-top:0;grid-template-columns:repeat(6,minmax(0,1fr))}
.stat-group>.stats>li{grid-column:span 2}
.stat-group>.stats>li:nth-child(3n+1):nth-last-child(2){grid-column:2/span 2}
.stat-group>.stats>li:nth-child(3n+1):last-child{grid-column:3/span 2}}
.stats{list-style:none;padding:0;margin:.75rem 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1rem}
.stat-card{margin:0;min-width:0;background:var(--bg);border:1px solid var(--line);border-top:4px solid var(--brand);border-radius:var(--radius-lg);padding:14px 18px;box-shadow:var(--shadow-sm)}
.stat-card p{margin:0 0 .5em}
.stat-card p:last-child{margin-bottom:0}
.stat-card .eyebrow{margin-bottom:.15em}
.stat-card .stat{font-size:clamp(1.9rem,1.5rem + 1.6vw,2.6rem);color:var(--brand);margin:.05em 0 .2em;overflow-wrap:anywhere}
.stat-card .stat.words{font-size:clamp(1.4rem,1.2rem + .8vw,1.75rem)}
section.folded{padding:1.4rem 0}
details.fold,details.more{border:0;border-radius:0;padding:0;margin:0}
details.fold>summary,details.more>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:44px}
details.fold>summary::-webkit-details-marker,details.more>summary::-webkit-details-marker{display:none}
details.fold>summary h2{margin:0}
details.fold>summary:hover h2,details.more>summary:hover .more-head{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.15em}
/* Owner, 2026-10-13 (round 3): every fold control is a plain, thick "+" (two 4px bars, no circle) that turns into a minus */
/* Motion (2026-10-14): the vertical bar is a stripe drawn at the angle --plus-turn, so it can turn: opening, it rotates
   90 degrees down onto the horizontal bar and the "+" becomes a minus. The round mask keeps the stripe one length
   while it turns. Where @property is not supported the bar switches at once */
@property --plus-turn{syntax:"<angle>";inherits:false;initial-value:90deg}
details.fold>summary::after,details.more>summary::after{content:"";flex:none;display:block;width:1.35rem;height:1.35rem;--plus-bar:var(--brand);--plus-turn:90deg;background-image:linear-gradient(var(--plus-bar),var(--plus-bar)),linear-gradient(var(--plus-turn),transparent calc(50% - 2px),var(--plus-bar) calc(50% - 2px),var(--plus-bar) calc(50% + 2px),transparent calc(50% + 2px));background-size:100% 4px,100% 100%;background-position:center;background-repeat:no-repeat;-webkit-mask-image:radial-gradient(circle closest-side,#000 calc(100% - .5px),transparent);mask-image:radial-gradient(circle closest-side,#000 calc(100% - .5px),transparent);transition:--plus-turn var(--motion-base) var(--ease-out)}
details.fold[open]>summary::after,details.more[open]>summary::after{--plus-turn:180deg}
details.more>summary::after{width:1.2rem;height:1.2rem}
@media (forced-colors:active){details.fold>summary::after,details.more>summary::after{forced-color-adjust:none;--plus-bar:CanvasText}}
.fold-body{padding-top:1.25rem}
/* AI assistants page (owner, 2026-11-10): the heading with the server address beside it from 48rem, and each
   assistant a fold whose "+" sits right after its name */
.add-head{display:grid;gap:.5rem 2rem;align-items:center}
.add-head h2{margin-bottom:0}.add-head p{margin:0 0 .35rem}
@media (min-width:48rem){.add-head{grid-template-columns:auto minmax(0,1fr)}}
details.add-fold{margin:.5rem 0}
details.add-fold>summary{justify-content:flex-start}
details.add-fold>summary h3{margin:0}
details.add-fold .fold-body{padding-top:.5rem}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media print{details.fold>summary::after,details.more>summary::after{display:none}}
.icon{display:block;flex:none}
.ih{display:flex;align-items:center;gap:.65rem}
h2.ih .icon{width:2rem;height:2rem}
h3.ih .icon{width:1.6rem;height:1.6rem}
.stats{align-items:stretch}
.stat-card{padding:0}
.stat-card>details>summary{align-items:flex-start;padding:16px 18px}
.stat-head{display:block;min-width:0}
.stat-head .eyebrow,.stat-head .stat,.stat-head .stat-who{display:block}
.stat-card .stat-head .stat{margin:.1em 0 .1em}
/* Owner, 2026-10-14 (round 7): every stat card has the same height, and within a row the labels, values and notes
   line up: each card spans four shared rows (label, value, note, and the details that open), through subgrids from
   the list down to the summary; the rows' minimums are the first row's tallest content */
@media (min-width:40.0625rem){@supports (grid-template-rows:subgrid){
.stats{grid-auto-rows:minmax(4.5rem,auto) minmax(5.25rem,auto) minmax(4.5rem,auto) auto;row-gap:0}
.stats>li.stat-card{display:grid;grid-row:span 4;grid-template-rows:subgrid;margin-bottom:1rem}
.stat-card>details.more{display:grid;grid-row:1/-1;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr)}
.stat-card>details.more>summary{display:grid;grid-row:1/span 3;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:1rem}
.stat-card .stat-head{display:contents}
.stat-card .stat-head>*{grid-column:1;margin:0}
.stat-card>details.more>summary::after{grid-column:2;grid-row:1}}}
/* between 80rem and 90rem the card columns are at their narrowest: the notes may take three lines and the numbers are a
   little smaller, so every card keeps the one height there too */
@media (min-width:80rem) and (max-width:89.9375rem){@supports (grid-template-rows:subgrid){
.stats{grid-auto-rows:minmax(4.5rem,auto) minmax(5.25rem,auto) minmax(5.95rem,auto) auto}
.stat-card .stat-head .stat:not(.words){font-size:2.2rem}}}
.stat-who{font-size:.92rem;font-weight:400;color:var(--muted)}
.stat-body{padding:0 18px 16px}
.hero-question{font-size:clamp(1.25rem,1rem + 1vw,1.75rem);font-family:var(--serif);font-weight:500;color:var(--accent);margin:0 0 .8em;line-height:1.3}
.hero-link{font-size:1.15rem;font-weight:650;margin:1.25em 0 1em}
.hero-link a{color:var(--brand);text-decoration-thickness:2px}
.hero-link a:hover{color:var(--brand-hover)}
.evidence,.tone{background:var(--surface)}
.cta{background:var(--brand-tint)}
section.feature{padding:clamp(3rem,7vw,7rem) 0}
.feature-grid{display:grid;gap:2.25rem clamp(2.5rem,6vw,7rem);align-items:center}
.feature-text,.feature-visual{min-width:0}
.feature-text>:last-child{margin-bottom:0}
.feature h2,.section-head h2,.cta h2{font-size:clamp(1.8rem,1.1rem + 2vw,3.1rem);line-height:1.1}
.feature.top .feature-grid{align-items:start}
.feature-text details.fold>summary{justify-content:flex-start;gap:1.25rem}
.learn-row{margin:1.5rem 0 0}
.learn{display:inline-flex;align-items:center;gap:.4em;min-height:44px;font-weight:650;color:var(--brand);text-decoration:none;border-bottom:2px solid var(--brand);line-height:1.2}
.learn::after{content:"\2192";content:"\2192"/""}
.learn:hover{color:var(--brand-hover);border-bottom-color:var(--accent)}
.learn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* Owner, 2026-11-09: "Recent incidents" (tools/site_panels.py incidents_section; was "Keeping the data current"): the four
   newest operator-disclosed incidents as soft rounded cards, two by two on wide screens and stacked on phones */
.incident-cards{list-style:none;margin:1.5rem 0 1rem;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem}
@media (min-width:64rem){.incident-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 2rem}}
.incident-card{margin:0;padding:1.25rem 1.4rem;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--bg)}
.incident-card p{margin:0}
.incident-meta{font-size:.85rem;color:var(--muted)}
.incident-card .incident-title{font-weight:650;margin:.15rem 0 .2rem;overflow-wrap:anywhere}
.incident-card .incident-cause{margin:.1rem 0 .45rem;font-size:.93rem;font-style:italic;overflow-wrap:anywhere}
.incident-what{font-size:.93rem;overflow-wrap:anywhere}
.incident-guards{margin:.15rem 0 0;padding-left:1.1rem;font-size:.93rem}
.incident-guards li{padding:.1rem 0}
/* Owner, 2026-11-07: "What's new" under the hero (tools/site_panels.py whats_new_section), centred: the heading, the
   three-way switch (radio buttons, no script) and four equal boxes; two by two on tablets and phones */
.whats-new{padding:clamp(2rem,3.5vw,3.5rem) 0}
.wn-head{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center;margin:0 0 1.75rem}
.wn-head h2{margin:0;justify-content:center;text-align:center}
.wn-radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.wn-tabs{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:.25rem;padding:.25rem;background:var(--surface);border:1px solid var(--line-soft);border-radius:999px}
.wn-tab{display:inline-flex;align-items:center;min-height:44px;padding:0 1.1rem;border-radius:999px;font-size:.95rem;font-weight:650;color:var(--muted);cursor:pointer;transition:background var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out)}
.wn-tab:hover{color:var(--brand)}
#wn-coming:checked~.wn-head [for=wn-coming],#wn-in-force:checked~.wn-head [for=wn-in-force],#wn-added:checked~.wn-head [for=wn-added]{background:var(--bg);color:var(--brand);box-shadow:var(--shadow-sm)}
#wn-coming:focus-visible~.wn-head [for=wn-coming],#wn-in-force:focus-visible~.wn-head [for=wn-in-force],#wn-added:focus-visible~.wn-head [for=wn-added]{outline:3px solid var(--focus);outline-offset:2px}
.wn-cards{display:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem;max-width:76rem;margin:0 auto;padding:0;list-style:none}
#wn-coming:checked~.wn-coming,#wn-in-force:checked~.wn-in-force,#wn-added:checked~.wn-added{display:grid}
.wn-cards>li{display:flex;min-width:0}
.wn-card{display:flex;flex-direction:column;gap:.4rem;width:100%;padding:18px 20px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);color:var(--ink);text-decoration:none;transition:transform var(--motion-base) var(--ease-out),box-shadow var(--motion-base) var(--ease-out),border-color var(--motion-base) var(--ease-out)}
.wn-card:hover,.wn-card:focus-visible{color:var(--ink);border-color:var(--line-lift);box-shadow:var(--shadow-lift);transform:translateY(calc(-1 * var(--lift)))}
.wn-card:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.wn-badge{align-self:flex-start;padding:.15rem .6rem;border-radius:6px;font-size:.8rem;font-weight:650;background:var(--brand-tint);color:var(--brand)}
.wn-badge-coming{background:var(--notice-bg);color:var(--b-pending)}
.wn-badge-in-force{background:var(--box-tint);color:var(--b-law)}
.wn-where{font-size:.85rem;color:var(--muted)}
.wn-law{font-weight:650;line-height:1.3;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.wn-what{font-size:.93rem;line-height:1.45;color:var(--muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.wn-go{margin-top:auto;padding-top:.35rem;font-size:.88rem;font-weight:650;color:var(--accent)}
.wn-go::after{content:" \2192";content:" \2192"/""}
.wn-asof{text-align:center;margin:1.5rem 0 0}
@media (max-width:64rem){.wn-cards{grid-template-columns:repeat(2,minmax(0,1fr));max-width:44rem}}
@media (max-width:40rem){.wn-head .ih .icon{display:none}.wn-cards{gap:.6rem}.wn-card{gap:.3rem;padding:12px}.wn-tab{padding:0 .8rem;font-size:.9rem}
.wn-badge{white-space:nowrap;padding:.1rem .45rem;font-size:.74rem}.wn-where{font-size:.8rem}.wn-law{font-size:.95rem}
.wn-what{font-size:.86rem;line-height:1.4}.wn-go{font-size:.8rem}}
@media (prefers-reduced-motion:reduce){.wn-card,.wn-tab{transition:none}.wn-card:hover,.wn-card:focus-visible{transform:none}}
@media print{.wn-tabs{display:none}.wn-cards{display:grid}}
.section-head{display:grid;gap:.5rem clamp(2.5rem,6vw,7rem);margin:0 0 .5rem}
.section-head h2{margin:0}
.section-intro>:last-child{margin-bottom:0}
@media (min-width:64rem){
.hero-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end}
.feature-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.feature.flip .feature-visual{order:-1}
.section-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.cta .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(2.5rem,6vw,7rem);align-items:start}
.cta .wrap>*{grid-column:2}.cta .wrap>h2{grid-column:1;grid-row:1/span 6}
}
@media (min-width:72rem){
.wrap.prose:has(>h2:first-child),.wrap.prose:has(>.toc:first-child){display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr);column-gap:clamp(2.5rem,5vw,6rem);align-items:start}
.wrap.prose:has(>h2:first-child)>*,.wrap.prose:has(>.toc:first-child)>*{grid-column:2}
.wrap.prose>h2:first-child,.wrap.prose>.toc:first-child{grid-column:1;grid-row:1/span 400;position:sticky;top:6rem}
.wrap.prose>h2:first-child{font-size:clamp(1.5rem,1rem + 1vw,2.1rem)}
}
.hero-intro{font-family:var(--serif);font-weight:500;font-size:clamp(1.3rem,1.05rem + .9vw,1.9rem);line-height:1.25;color:var(--ink);margin:0 0 .75em}
.hero-head .hero-question{margin:1.1rem 0 0}
/* Owner, 2026-11-09: the test limits fold under the results, behind a small "How we tested" line with the "+" */
details.tested{margin-top:var(--space-m)}
details.tested>summary{justify-content:flex-start;gap:.6rem;min-height:44px;font-size:.9rem;color:var(--muted)}
details.tested>summary::after{width:.95rem;height:.95rem}
details.tested>summary:hover .tested-head{text-decoration:underline;text-underline-offset:.15em}
details.tested .fine{margin:.25rem 0 0}
/* Owner, 2026-11-11: the measured results follow the flow with a sentence's worth of extra room (the two lane bands
   left: "Explore Global AI laws, free" and "Beyond the law" carry their links) */
.how .value-strip{margin-top:calc(var(--space-xl) + 1.75rem)}
.badges{display:flex;flex-wrap:wrap;gap:.35rem;margin:.15rem 0 .55rem}
.badge{display:inline-block;font-size:.78rem;font-weight:700;padding:.15em .65em;border-radius:999px;border:1px solid var(--line);color:var(--muted);background:var(--bg)}
.badge-law{background:var(--b-law);border-color:var(--b-law);color:#fff}
.badge-rec{color:var(--rec-ink);border:1.5px solid var(--rec-line);background:var(--rec-bg)}
.guard-recs{list-style:none;margin:.65rem 0 0;padding:.55rem .85rem;border-left:4px solid var(--rec-line);background:var(--rec-bg);border-radius:0 8px 8px 0;font-size:.92rem}
.guard-recs li{margin:.35rem 0}.guard-recs li>a{display:block;margin-bottom:.2rem}.guard-recs .grade{font-size:.75rem}
.lane-target{display:block;height:0}
.lane-filter{margin:0 0 1.1rem}
.lane-filter a[href='#all'],#law:target~.lane-filter a[href='#law'],#rec:target~.lane-filter a[href='#rec']{background:var(--brand);border-color:var(--brand);color:var(--on-accent);font-weight:700}
#law:target~.lane-filter a[href='#all'],#rec:target~.lane-filter a[href='#all']{background:var(--bg);border-color:var(--line);color:var(--brand);font-weight:550}
#law:target~.guards>li:not(.has-law),#rec:target~.guards>li:not(.has-rec){display:none}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.25rem .5rem;margin:0 0 1rem;padding:0;font-size:.92rem;color:var(--muted)}
.crumbs li{margin:0}
.crumbs li+li::before{content:"/";content:"/"/"";margin-right:.5rem}
.crumbs a{color:var(--brand)}
.head-grid{display:grid;gap:1.25rem clamp(2rem,5vw,5rem)}
.head-aside .notice{margin:0}
.subnav.compact a{font-size:.88rem}
.explore-grid{display:grid;gap:2.5rem clamp(2rem,4vw,4rem);margin:0 0 2.5rem}
.explore-grid>*{min-width:0}
@media (min-width:64rem){.head-grid{grid-template-columns:minmax(0,1fr) minmax(18rem,26rem);align-items:start}}
@media (min-width:80rem){.explore-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}#ex-results.results{grid-template-columns:minmax(0,1fr)}
.explore-filter fieldset:nth-of-type(2) .checks{max-height:22rem;overflow-y:auto;padding-right:.5rem}}
@media print{.explore-search,.explore-grid~h2,.explore-grid~.grid,#packs,#recommended-guardrails,#changelog{display:none!important}.explore-grid{display:block}}
/* Filter options' report (CX-15; the readiness check's, folded in 2026-11-06): the parts the explorer's script fills in
   under the ranked guards. Printed, every law's provisions are open (explore.js expandForPrint). */
#plan-report .notice{margin-top:1.5rem}
.rep-part{margin:1.75rem 0 0;padding-top:1.1rem;border-top:1px solid var(--line-soft)}
.rep-sub{font-size:1rem;margin:1.1rem 0 .35rem}
.rep-law{background:var(--bg)}
.rep-law summary .fine{font-weight:400}
.rep-provisions{list-style:none;padding:0;margin:.5rem 0 0}
.rep-provisions li{border-top:1px solid var(--line-soft);padding:.55rem 0;margin:0;min-width:0;overflow-wrap:anywhere}
.rep-provisions li p{margin:0 0 .2em}
@media print{.rep-law{border:0;padding:0}.rep-law>summary{list-style:none}.rep-provisions li,.rep-part h3{break-inside:avoid}}
.panel{margin:0;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden;min-width:0}
.panel-bar{display:flex;align-items:center;gap:.6rem;padding:.6rem 1.1rem;border-bottom:1px solid var(--line-soft);background:var(--surface);font-size:.82rem;color:var(--muted);min-width:0}
.panel-bar::before{content:"";flex:none;width:.6rem;height:.6rem;border-radius:50%;background:var(--brand)}
.panel-app{flex:none;font-weight:700;color:var(--brand)}
.panel-path{font-family:var(--mono);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel-body{padding:1.15rem 1.35rem 1.25rem}
.panel-body>:last-child{margin-bottom:0}
.panel-body p{margin:0 0 .6rem}
.panel-cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.25rem 1rem;padding:.7rem 1.35rem;border-top:1px solid var(--line-soft);font-size:.82rem;color:var(--muted)}
.panel-cap a{font-weight:650;color:var(--brand)}
.panel-title{font-family:var(--serif);font-size:clamp(1.2rem,1rem + .6vw,1.5rem);line-height:1.25;color:var(--ink)}
.panel-meta{font-size:.9rem;color:var(--muted);overflow-wrap:anywhere}
.panel-status{font-weight:650;color:var(--brand)}
.panel-k{display:block;font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:0 0 .35rem}
.panel-guard{border-left:3px solid var(--accent);background:var(--surface);border-radius:0 8px 8px 0;padding:.65rem .9rem;margin:.85rem 0 1rem}
.panel-guard p{margin:0;font-size:.95rem}
.panel-rows{list-style:none;margin:0 0 .75rem;padding:0}
.panel-rows li{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .65rem;padding:.55rem 0;border-top:1px solid var(--line-soft);margin:0;font-size:.92rem}
.panel-sub{font-size:.86rem;color:var(--muted)}
.panel-foot{font-size:.88rem;color:var(--muted)}
.panel-markets li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.3rem 1rem}
.panel-markets a{color:var(--ink);font-weight:600;text-decoration:none}
.panel-markets a:hover{text-decoration:underline}
.panel-num{font-size:.86rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.meter{grid-column:1/-1;display:block;height:6px;border-radius:99px;background:var(--line-soft);overflow:hidden}
.meter>span{display:block;height:100%;border-radius:99px;background:var(--brand)}
.m-1{width:10%}.m-2{width:20%}.m-3{width:30%}.m-4{width:40%}.m-5{width:50%}.m-6{width:60%}.m-7{width:70%}.m-8{width:80%}.m-9{width:90%}.m-10{width:100%}
.panel-plan{list-style:none;counter-reset:pp;margin:0 0 .75rem;padding:0}
.panel-plan li{counter-increment:pp;position:relative;margin:0;padding:.7rem 0 .7rem 2.4rem;border-top:1px solid var(--line-soft)}
.panel-plan li::before{content:counter(pp);position:absolute;left:0;top:.75rem;width:1.65rem;height:1.65rem;border-radius:50%;background:var(--brand);color:var(--on-accent);font-size:.82rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.panel-plan a{font-weight:650;color:var(--brand)}
.panel-plan p{margin:.2rem 0 0;font-size:.92rem}
.panel-mcp .panel-body{padding:0}
.panel-code{margin:0;border:0;border-radius:0;background:#f7f9fc;padding:1.1rem 1.35rem;font-size:.8rem;line-height:1.6}
.panel-code code{white-space:pre-wrap;overflow-wrap:anywhere}
.t-user{color:var(--brand);font-weight:700}.t-call{color:var(--accent);font-weight:700}.t-key{color:#8a4b00}.t-str{color:#1b6136}.t-num{color:#5a3288}
.panel-guardrail{border-top:4px solid var(--rec-line)}
.law-layout{display:grid;gap:0 clamp(2rem,4vw,4.5rem);grid-template-columns:minmax(0,1fr)}
.law-main>*{max-width:54rem}
.law-side .toc{background:none;border:0;border-left:2px solid var(--line);border-radius:0;padding:.25rem 0 .25rem 1rem;font-size:.92rem}
.law-side .toc ol{padding-left:1.1rem}
.law-side .toc li{margin:.35em 0}
@media (min-width:64rem){
.law-layout{grid-template-columns:minmax(0,15rem) minmax(0,1fr);grid-template-areas:"top top" "side trust" "side main"}
.law-top{grid-area:top}.law-side{grid-area:side;position:sticky;top:6rem;max-height:calc(100vh - 7.5rem);overflow:auto}
.law-trust{grid-area:trust}.law-main{grid-area:main}
.law-layout.no-side{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "trust" "main"}
}
@media (min-width:110rem){
.law-layout{grid-template-columns:minmax(0,15rem) minmax(0,54rem) minmax(18rem,1fr);grid-template-areas:"top top top" "side main trust"}
.law-layout.no-side{grid-template-columns:minmax(0,54rem) minmax(18rem,1fr);grid-template-areas:"top top" "main trust"}
.law-trust{position:sticky;top:6rem;max-height:calc(100vh - 7.5rem);overflow:auto}
.law-trust .trust-list>div{grid-template-columns:1fr}
}
/* The Data page (/data/, owner, 2026-10-14): key figures (four cards and the wide sources card), inline SVG charts (presentation attributes only, no
   style attribute or element), tables by jurisdiction and sliced views */
section.data-section{padding:clamp(3rem,1.75rem + 3.5vw,6rem) 0}
.figures{list-style:none;padding:0;margin:0 0 var(--space-m);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:var(--space-m) clamp(14px,3vw,40px)}
.figures li{margin:0;border-top:3px solid var(--brand);padding:14px 2px 0}
.figures strong{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(2rem,1.4rem + 1.8vw,3.2rem);line-height:1.1;color:var(--brand);font-variant-numeric:tabular-nums}
.figures .fig-label{display:block;margin-top:.45rem;font-size:1.05rem;font-weight:650;color:var(--ink)}
.figures .fig-note{display:block;margin:.25rem 0 0;font-size:.95rem;color:var(--muted)}
.figures .fig-wide{grid-column:1/-1}.figures .fig-body>:first-child{margin-top:.45rem}
.figures .fig-kinds{margin:.5rem 0 0;font-size:.95rem;color:var(--ink);font-variant-numeric:tabular-nums}
.charts{display:grid;gap:var(--space-l) clamp(2rem,4vw,4.5rem);grid-template-columns:minmax(0,1fr)}
.chart{margin:0;min-width:0;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-m);box-shadow:var(--shadow-sm)}
.chart figcaption h3{margin:0 0 .25rem;font-size:1.2rem}
.chart figcaption .fine{margin:0 0 var(--space-s)}
.chart-scroll{overflow-x:auto}
.chart svg{display:block;width:100%;height:auto}
/* each chart is drawn twice (round 10): the wide layout, and in a chart box narrower than 32rem a narrow one, so no
   part of a chart is hidden in a side-scroll box or drawn too small (display:none also takes the copy not shown out of
   the accessibility tree) */
.chart-scroll{container-type:inline-size}.chart svg.chart-narrow{display:none}
@container (max-width:31.99rem){.chart svg.chart-wide{display:none}.chart svg.chart-narrow{display:block}}
.chart-more{margin:var(--space-s) 0 0}
/* each chart bar is a link into Explore (owner, 2026-10-14): a tint behind the row on hover, plus a navy ring on
   keyboard focus (in place of the outline, which an SVG link draws unevenly), and the bar's label underlined */
.chart svg a{cursor:pointer;outline:none}
.chart svg a .hit{fill:var(--brand-tint);fill-opacity:0;transition:fill-opacity var(--motion-fast) var(--ease-out)}
.chart svg a:hover .hit,.chart svg a:focus-visible .hit{fill-opacity:1}
.chart svg a:focus-visible .hit{stroke:var(--brand);stroke-width:3}
.chart svg a:hover .bar-label,.chart svg a:focus-visible .bar-label{text-decoration:underline;fill:var(--brand)}
.data-grid{display:grid;gap:var(--space-l) clamp(2rem,4vw,4.5rem);grid-template-columns:minmax(0,1fr)}
.data-grid>*{min-width:0}
.data-grid h3,#jurisdictions h3{margin-top:var(--space-l)}
.data-grid>* h3{margin-top:0}
table.data-table tr.total>*{font-weight:700;border-top:2px solid var(--line)}
table.data-table th,table.data-table td{padding:7px 12px}
table.data-table td.num,table.data-table thead th:not(:first-child){text-align:right}
table.data-table tfoot tr>*{background:var(--surface)}
.data-links{columns:22rem;column-gap:2rem;padding-left:1.1rem}
.data-links li{break-inside:avoid}
@media (min-width:64rem){.charts{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}.charts>.chart-tall{grid-row:span 2}
.figures{grid-template-columns:repeat(4,minmax(0,1fr))}
.figures .fig-wide{display:grid;grid-template-columns:subgrid}.figures .fig-body{grid-column:2/-1}.figures .fig-body>:first-child{margin-top:0}
.data-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:63.99rem){header.site{position:static}html{scroll-padding-top:1rem}}
@media (max-width:40rem){
.hero{padding:1.75rem 0 1.75rem}.hero h1{font-size:2.05rem;line-height:1.12;margin-bottom:.25em}
.hero .lede{font-size:1.05rem;line-height:1.55}.hero .cta-row{margin:1.1rem 0 .75rem;gap:.6rem}.hero-link{font-size:1.05rem}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px}
nav.primary a,footer nav a{display:inline-flex;align-items:center;min-height:44px}nav.primary ul,footer nav ul{row-gap:0}
section{padding:1.75rem 0}section.folded{padding:.9rem 0}section.feature{padding:2rem 0}
h2{font-size:1.5rem}.feature h2,.section-head h2,.cta h2{font-size:1.6rem}h2.ih .icon{width:1.75rem;height:1.75rem}
.grid,.stats{grid-template-columns:1fr;gap:.75rem}
.feature-grid{gap:1.5rem}
details:not(.fold):not(.more)>summary{padding:.6rem 0}
.stat-group{margin-top:1.4rem}.stat-card .stat-head .stat{font-size:2rem}.stat-card .stat-head .stat.words{font-size:1.4rem}
.brand{font-size:1.5rem;gap:.6rem}.brand-mark{height:2.9rem}
.bar-actions{gap:.4rem}.bar-actions .btn{padding:.4em .75em}
.hero .hero-question{font-size:1.25rem}
.panel-body{padding:1rem}.panel-cap{padding:.65rem 1rem}.panel-code{padding:1rem;font-size:.76rem}
.page-head{padding:1.75rem 0 1.25rem}.subnav a{min-height:44px}
section.data-section{padding:2rem 0}.chart{padding:1rem}
}
/* Motion (owner, 2026-10-14). Timings and easings are the tokens at the top (--motion-*, --ease-*, --lift, --intro-*).
   Cards lift on hover and on keyboard focus (:focus-visible inside them), with a deeper shadow; the navy top accent
   brightens a touch where a card has one */
details.hw-box,.stat-card,.plan>li{transition:transform var(--motion-base) var(--ease-out),box-shadow var(--motion-base) var(--ease-out),border-color var(--motion-base) var(--ease-out)}
@media (hover:hover){details.hw-box:hover,.stat-card:hover,.plan>li:hover{transform:translateY(calc(-1 * var(--lift)));box-shadow:var(--shadow-lift)}
.stat-card:hover{border-top-color:var(--brand-bright)}
details.hw-box:hover,.plan>li:hover{border-color:var(--line-lift)}}
details.hw-box:has(>summary:focus-visible),.stat-card:has(summary:focus-visible),.plan>li:has(:focus-visible){transform:translateY(calc(-1 * var(--lift)));box-shadow:var(--shadow-lift)}
.stat-card:has(summary:focus-visible){border-top-color:var(--brand-bright)}
details.hw-box:has(>summary:focus-visible),.plan>li:has(:focus-visible){border-color:var(--line-lift)}
/* A box's content slides and fades open (height and opacity); browsers without ::details-content open it at once */
@supports selector(::details-content){
details.fold,details.more{interpolate-size:allow-keywords}
details.fold::details-content,details.more::details-content{block-size:0;opacity:0;overflow:clip;overflow-clip-margin:6px;transition:block-size var(--motion-open) var(--ease-out),opacity var(--motion-open) var(--ease-out),content-visibility var(--motion-open) allow-discrete}
details.fold[open]::details-content,details.more[open]::details-content{block-size:auto;opacity:1}
/* a How it works box keeps its closed height while it opens: its summary gives up the reserved room as the content grows */
details.hw-box>summary{transition:min-height var(--motion-open) var(--ease-out)}}
@media (prefers-reduced-motion:reduce){details.hw-box,.stat-card,.plan>li{transform:none!important}}
@media print{.intro-scale{display:none!important}}
/* The homepage intro (owner, 2026-10-14): wide screens only, and none under reduced motion. The pivot and the
   pans' hang points come from the logo (tools/generate_web.py logo_scales). Round 2: the scale sits in the open
   space right of the headline's first line (its base level with that line, its right edge 1.5rem short of the
   right column), stays navy and fades only as it reaches the shield; the glide arcs (the rise leads the sweep) */
.intro-scale{display:none}
@media (min-width:64rem) and (prefers-reduced-motion:no-preference){
.hero-head{position:relative}
.intro-scale{display:block;position:absolute;right:var(--intro-right,calc(1.5rem - var(--hero-gap)));left:var(--intro-left,auto);top:var(--intro-top,calc(.55 * var(--hero-h1) - .5 * var(--intro-size)));height:var(--intro-size);width:calc(var(--intro-size) * 42 / 37);overflow:visible;z-index:31;pointer-events:none;fill:var(--brand);transform-origin:0 0;animation:intro-in var(--intro-in) var(--ease-out) both,intro-fade var(--intro-glide) var(--ease-out) calc(var(--intro-wobble) + var(--intro-hold)) forwards}
.intro-scale g{transform-box:view-box}
.intro-beam{transform-origin:32px 28.2px;animation:intro-wobble var(--intro-wobble) var(--ease-in-out) both}
.intro-pan-l{transform-origin:19px 28.2px}.intro-pan-r{transform-origin:45px 28.2px}
.intro-pan{animation:intro-hang var(--intro-wobble) var(--ease-in-out) both}
.intro-glide .intro-scale{animation:intro-glide var(--intro-glide) var(--ease-glide) forwards,intro-rise var(--intro-glide) var(--ease-rise) forwards}
.intro-glide .brand-mark{animation:logo-settle var(--intro-settle) var(--ease-out) calc(var(--intro-glide) * .85) both}
.intro-wait .intro-scale,.intro-wait .intro-scale g{animation:none}}
@keyframes intro-in{from{opacity:0}to{opacity:1}}
@keyframes intro-fade{to{opacity:0}}
@keyframes intro-wobble{0%{transform:rotate(-14deg)}16.67%{transform:rotate(10deg)}33.33%{transform:rotate(-6.5deg)}50%{transform:rotate(3.5deg)}66.67%{transform:rotate(-1.5deg)}83.33%{transform:rotate(0.5deg)}100%{transform:rotate(0deg)}}
@keyframes intro-hang{0%{transform:rotate(14deg)}16.67%{transform:rotate(-10deg)}33.33%{transform:rotate(6.5deg)}50%{transform:rotate(-3.5deg)}66.67%{transform:rotate(1.5deg)}83.33%{transform:rotate(-0.5deg)}100%{transform:rotate(0deg)}}
@keyframes intro-glide{0%{transform:none;opacity:1}85%{opacity:1}100%{transform:translateX(var(--glide-x)) scale(var(--glide-s));opacity:0}}
@keyframes intro-rise{0%{translate:0 0}100%{translate:0 var(--glide-y)}}
@keyframes logo-settle{0%,100%{transform:scale(1)}45%{transform:scale(var(--intro-pulse))}}