/* Layout: left-aligned registry, 1240px column; the world map is the hero; feeds sit in two columns; record pages read like a filing sheet. */
:root{
  --paper:#F4F6FA; --surface:#FFFFFF; --sunk:#EBEFF5;
  --ink:#13203A; --ink-2:#4B5872; --ink-3:#77839A;
  --rule:#DCE2EB; --rule-2:#C3CCDA;
  --accent:#2747C7; --accent-ink:#FFFFFF; --accent-soft:#E5EAFB; --accent-hover:#1C379F;
  --seal:#9A6512;
  --st-force:#1D7A4E; --st-partial:#0E6E86; --st-enacted:#5A45B8; --st-proposed:#9C5506; --st-delayed:#B03E18; --st-off:#6B7280;
  --m0:#E4E6EA; --m1:#C9D5F5; --m2:#A8BCF0; --m3:#7391E0; --m4:#4264CB; --m5:#1D389B;
  --series-1:#2747C7; --series-2:#B0761A;
  --font-display:"Archivo","Arial Narrow",Arial,sans-serif;
  --font-body:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --radius:6px; --maxw:1240px;
  --step--1:.8125rem; --step-0:.9375rem; --step-1:1.125rem; --step-2:1.375rem; --step-3:1.875rem; --step-4:clamp(2rem,4.2vw,3.25rem);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#0C1322; --surface:#121B2E; --sunk:#0A101D;
  --ink:#E6EBF4; --ink-2:#A9B4C8; --ink-3:#7C889E;
  --rule:#222D45; --rule-2:#33405D;
  --accent:#8CA4FF; --accent-ink:#0C1322; --accent-soft:#1B2650; --accent-hover:#B3C3FF;
  --seal:#E0A846;
  --st-force:#4CC38A; --st-partial:#4EC1DB; --st-enacted:#A795F5; --st-proposed:#F0A54A; --st-delayed:#F07A52; --st-off:#9AA3B2;
  --m0:#262C38; --m1:#243C7C; --m2:#2C4488; --m3:#4565BE; --m4:#6D8DEA; --m5:#AFC3FF;
  --series-1:#6F8CF0; --series-2:#BF8420;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --paper:#0C1322; --surface:#121B2E; --sunk:#0A101D;
  --ink:#E6EBF4; --ink-2:#A9B4C8; --ink-3:#7C889E;
  --rule:#222D45; --rule-2:#33405D;
  --accent:#8CA4FF; --accent-ink:#0C1322; --accent-soft:#1B2650; --accent-hover:#B3C3FF;
  --seal:#E0A846;
  --st-force:#4CC38A; --st-partial:#4EC1DB; --st-enacted:#A795F5; --st-proposed:#F0A54A; --st-delayed:#F07A52; --st-off:#9AA3B2;
  --m0:#262C38; --m1:#243C7C; --m2:#2C4488; --m3:#4565BE; --m4:#6D8DEA; --m5:#AFC3FF;
  --series-1:#6F8CF0; --series-2:#BF8420;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:var(--step-0);line-height:1.55;font-variant-numeric:tabular-nums}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--accent-hover)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
h1,h2,h3{font-family:var(--font-display);font-stretch:112%;line-height:1.12;margin:0;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:var(--step-4);font-weight:800}
h1.long{font-size:clamp(1.6rem,3vw,2.3rem)}
h2{font-size:var(--step-2);font-weight:750}
h3{font-size:var(--step-1);font-weight:700}
p{margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:20px}
.muted{color:var(--ink-2)}
.faint{color:var(--ink-3)}
.small{font-size:var(--step--1)}
.stack{display:flex;flex-direction:column;gap:var(--gap,16px)}
.row{display:flex;flex-wrap:wrap;gap:var(--gap,12px);align-items:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;gap:24px;min-height:60px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand-mark{width:26px;height:26px;flex:none}
.brand-name{font-family:var(--font-display);font-stretch:125%;font-weight:800;font-size:1.15rem;letter-spacing:-.02em}
.nav{display:flex;gap:4px;flex-wrap:wrap;flex:1}
.nav a{white-space:nowrap;color:var(--ink-2);text-decoration:none;padding:6px 10px;border-radius:999px;font-weight:550;font-size:.9rem}
.nav a:hover{color:var(--ink);background:var(--sunk)}
.nav a[aria-current="page"]{color:var(--ink);background:var(--accent-soft)}
.btn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-weight:650;font-size:.9rem;border-radius:999px;padding:8px 16px;border:1px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-hover);color:var(--accent-ink)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn-ghost:hover{border-color:var(--ink-3);color:var(--ink)}
@media (max-width:1100px){
  .top .wrap{gap:10px;padding-top:8px;justify-content:space-between}
  .nav{order:3;flex:1 1 100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:8px;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
  .nav::-webkit-scrollbar{display:none}
}
@media (max-width:420px){.top .btn-primary{padding:8px 12px;font-size:.84rem}.top .brand-logo{height:18px}}
.sm-show{display:none}
@media (max-width:420px){.sm-hide{display:none}.sm-show{display:inline}}
/* large displays: wider column and slightly larger type so the layout doesn't float in empty space */
@media (min-width:1800px){:root{--maxw:1480px}html{font-size:17px}}
@media (min-width:2300px){:root{--maxw:1720px}html{font-size:19px}}

main{padding-block:28px 64px}
.page-head{display:flex;flex-direction:column;gap:10px;padding-bottom:24px;border-bottom:1px solid var(--rule);margin-bottom:28px}
.page-head .lede{font-size:var(--step-1);color:var(--ink-2);max-width:68ch}
.crumbs{font-size:var(--step--1);color:var(--ink-3)}
.crumbs a{color:var(--ink-2)}

/* hero */
.hero{display:grid;gap:18px;padding-bottom:8px}
.hero h1{max-width:20ch}
.hero .lede{font-size:var(--step-1);color:var(--ink-2);max-width:62ch}
.tally{display:flex;flex-wrap:wrap;gap:6px 28px;margin-top:4px}
.tally div{display:flex;flex-direction:column}
.tally b{font-family:var(--font-display);font-stretch:118%;font-size:1.6rem;font-weight:800;line-height:1.1}
.tally span{font-size:var(--step--1);color:var(--ink-2)}

/* atlas */
.atlas{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:0;background:var(--surface);border:1px solid var(--rule);border-radius:10px;overflow:hidden;margin-top:22px}
@media (max-width:980px){.atlas{grid-template-columns:minmax(0,1fr)}}
.atlas-map{position:relative;min-width:0;border-right:1px solid var(--rule)}
@media (max-width:980px){.atlas-map{border-right:0;border-bottom:1px solid var(--rule)}}
.layers{display:flex;flex-wrap:wrap;gap:6px;padding:12px 14px;border-bottom:1px solid var(--rule)}
.layers button{font:inherit;font-size:.85rem;font-weight:600;color:var(--ink-2);background:transparent;border:1px solid var(--rule-2);border-radius:999px;padding:5px 12px;cursor:pointer}
.layers button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.map-svg{display:block;width:100%;height:auto;aspect-ratio:1.9/1;max-width:100%}
.map-svg path.c{stroke:var(--surface);stroke-width:.5;cursor:pointer;transition:opacity .15s}
.map-svg path.c.nodata{cursor:default}
.map-svg path.c:hover,.map-svg path.c.sel{stroke:var(--ink);stroke-width:1.2}
.map-svg circle.dot{stroke:var(--surface);stroke-width:1.5;cursor:pointer}
.map-fallback{padding:20px}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;padding:10px 14px 14px;font-size:var(--step--1);color:var(--ink-2)}
.legend .sw{display:inline-block;width:14px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.legend .src{margin-left:auto;color:var(--ink-3)}
.panel{padding:18px;display:flex;flex-direction:column;gap:12px;min-width:0}
.panel h3{font-size:var(--step-2)}
.panel .kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:var(--step--1)}
.panel .kv dt{color:var(--ink-3)}
.panel .kv dd{margin:0;text-align:right;font-weight:600}
.panel-hint{color:var(--ink-3);font-size:var(--step--1)}
.m0{fill:var(--m0)}.m1{fill:var(--m1)}.m2{fill:var(--m2)}.m3{fill:var(--m3)}.m4{fill:var(--m4)}.m5{fill:var(--m5)}
.bg-m1{background:var(--m1)}.bg-m2{background:var(--m2)}.bg-m3{background:var(--m3)}.bg-m4{background:var(--m4)}.bg-m5{background:var(--m5)}.bg-m0{background:var(--m0)}

/* sections */
.section{margin-top:48px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.section-head p{color:var(--ink-2);font-size:var(--step--1)}
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.cols-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media (max-width:900px){.cols,.cols-3{grid-template-columns:minmax(0,1fr)}}

/* feed */
.feed{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.feed li{display:grid;grid-template-columns:86px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--rule)}
.feed time{font-size:var(--step--1);color:var(--ink-3);padding-top:2px}
.feed .what{font-size:var(--step--1);color:var(--ink-2)}
.feed a.t{font-weight:650;color:var(--ink);text-decoration:none}
.feed a.t:hover{color:var(--accent)}
.countdown{font-family:var(--font-display);font-stretch:118%;font-weight:800;font-size:1.05rem;color:var(--ink);line-height:1.2}
.countdown small{display:block;font-family:var(--font-body);font-weight:500;font-size:.72rem;color:var(--ink-3);font-stretch:100%}

/* tags & chips */
.jtag{display:inline-flex;align-items:center;justify-content:center;min-width:2.4em;padding:1px 6px;border-radius:4px;background:var(--sunk);color:var(--ink-2);font-size:.72rem;font-weight:700;letter-spacing:.02em;text-decoration:none;border:1px solid var(--rule)}
a.jtag:hover{border-color:var(--ink-3);color:var(--ink)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;color:var(--ink-2);white-space:nowrap}
.chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c,var(--st-off))}
.chip.s-in-force{--c:var(--st-force)}.chip.s-partially-in-force{--c:var(--st-partial)}.chip.s-enacted{--c:var(--st-enacted)}
.chip.s-proposed,.chip.s-consultation{--c:var(--st-proposed)}.chip.s-delayed{--c:var(--st-delayed)}.chip.s-withdrawn,.chip.s-superseded{--c:var(--st-off)}
.pill{display:inline-block;font-size:.74rem;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--sunk);color:var(--ink-2);border:1px solid var(--rule)}
.pill.on{background:var(--accent-soft);color:var(--ink);border-color:transparent}
.new{color:var(--seal);font-weight:700;font-size:.74rem}

/* rule list */
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px;background:var(--surface);border:1px solid var(--rule);border-radius:8px;margin-bottom:16px;position:sticky;top:calc(env(safe-area-inset-top,0px) + 61px);z-index:5}
.filters input,.filters select{font:inherit;font-size:.88rem;color:var(--ink);background:var(--paper);border:1px solid var(--rule-2);border-radius:6px;padding:7px 10px;min-width:0}
.filters input[type=search]{flex:1 1 220px}
.filters .count{margin-left:auto;font-size:var(--step--1);color:var(--ink-3)}
@media (max-width:760px){.filters{position:static}.filters select{flex:1 1 140px}}
.rules{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.rules li{display:grid;grid-template-columns:64px minmax(0,1fr) 170px;gap:14px;padding:14px 0;border-bottom:1px solid var(--rule)}
.rules li[hidden]{display:none}
.rules .t{font-weight:700;color:var(--ink);text-decoration:none;font-size:1rem}
.rules .t:hover{color:var(--accent)}
.rules .meta{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:4px;font-size:var(--step--1);color:var(--ink-3)}
.rules .sum{margin-top:6px;color:var(--ink-2);font-size:.9rem;max-width:78ch}
.rules .side{display:flex;flex-direction:column;gap:4px;align-items:flex-end;text-align:right;font-size:var(--step--1);color:var(--ink-3)}
@media (max-width:760px){.rules li{grid-template-columns:52px minmax(0,1fr)}.rules .side{grid-column:2;align-items:flex-start;text-align:left;flex-direction:row;flex-wrap:wrap;gap:8px}}

/* record sheet */
.sheet{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:36px}
@media (max-width:900px){.sheet{grid-template-columns:minmax(0,1fr)}}
.sheet .body{display:flex;flex-direction:column;gap:22px;min-width:0}
.sheet .body p{max-width:70ch}
.facts{background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:6px 16px}
.facts dl{margin:0}
.facts .f{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;padding:9px 0;border-bottom:1px solid var(--rule);font-size:.88rem}
.facts .f:last-child{border-bottom:0}
.facts dt{color:var(--ink-3)}
.facts dd{margin:0;min-width:0;overflow-wrap:anywhere}
.callout{border-left:3px solid var(--accent);padding:4px 0 4px 14px}
.callout h3{font-size:var(--step-0);margin-bottom:4px}
.source{display:flex;flex-direction:column;gap:6px;padding:14px 16px;background:var(--sunk);border-radius:8px;font-size:.88rem}
.source a{overflow-wrap:anywhere}
.cta-box{border:1px solid var(--rule-2);border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--surface)}
.cta-box p{font-size:.88rem;color:var(--ink-2)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:8px;overflow:hidden}
.stats div{background:var(--surface);padding:14px 16px;display:flex;flex-direction:column;gap:2px;min-width:0}
.stats b{font-family:var(--font-display);font-stretch:115%;font-size:1.5rem;font-weight:800;line-height:1.15}
.stats b.txt{font-size:1.05rem;font-stretch:105%;line-height:1.3}
.stats span{font-size:var(--step--1);color:var(--ink-2)}

/* tables */
.tbl-wrap{overflow-x:auto;border:1px solid var(--rule);border-radius:8px;background:var(--surface)}
table.tbl{width:100%;border-collapse:collapse;font-size:.86rem}
.tbl th{text-align:left;font-weight:650;color:var(--ink-2);padding:9px 12px;border-bottom:1px solid var(--rule-2);background:var(--sunk);white-space:nowrap;position:sticky;top:0}
.tbl th button{all:unset;cursor:pointer}
.tbl th button:focus-visible{outline:2px solid var(--accent)}
.tbl td{padding:8px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl td.num,.tbl th.num{text-align:right}
.tbl .zh{color:var(--ink-3);font-size:.8rem}
.tbl a{text-decoration:none;font-weight:600}
.pager{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:10px 2px;font-size:var(--step--1);color:var(--ink-3)}

/* charts */
.chart{background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:16px;min-width:0}
.chart h3{font-size:var(--step-0);font-weight:700;font-family:var(--font-body);font-stretch:100%;letter-spacing:0}
.chart .sub{font-size:var(--step--1);color:var(--ink-3);margin:2px 0 10px}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .ax{fill:var(--ink-3);font-size:11px;font-family:var(--font-body)}
.chart .lbl{fill:var(--ink-2);font-size:11.5px;font-family:var(--font-body)}
.chart .val{fill:var(--ink);font-size:11.5px;font-weight:650;font-family:var(--font-body)}
.chart .grid{stroke:var(--rule);stroke-width:1}
.chart .base{stroke:var(--rule-2);stroke-width:1}
.chart .s1{fill:var(--series-1)}.chart .s2{fill:var(--series-2)}
.chart .l1{stroke:var(--series-1);fill:none;stroke-width:2}.chart .l2{stroke:var(--series-2);fill:none;stroke-width:2}
.chart .partial{fill:var(--series-1);opacity:.45}
.chart [data-tip]:hover{opacity:.82}
.chart-foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:10px;font-size:.75rem;color:var(--ink-3)}
.chart-foot button{all:unset;cursor:pointer;color:var(--accent);font-weight:600}
.key{display:flex;gap:14px;flex-wrap:wrap;font-size:var(--step--1);color:var(--ink-2);margin-bottom:6px}
.key i{display:inline-block;width:12px;height:3px;border-radius:2px;margin-right:6px;vertical-align:3px}
.tip{position:fixed;z-index:50;pointer-events:none;background:var(--ink);color:var(--paper);font-size:.78rem;padding:6px 9px;border-radius:6px;max-width:260px;line-height:1.35;box-shadow:0 4px 16px rgb(0 0 0 / .18)}

/* matrix */
.matrix td.mark{text-align:center}
.dotb{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--accent)}
.doth{display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid var(--accent)}
.lock{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;text-align:center;border:1px dashed var(--rule-2);border-radius:8px;padding:16px;color:var(--ink-2);font-size:.86rem}

/* pricing */
.tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:1000px){.tiers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.tiers{grid-template-columns:minmax(0,1fr)}}
.tier{background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:20px;display:flex;flex-direction:column;gap:12px}
.tier.feature{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.tier .price{font-family:var(--font-display);font-stretch:115%;font-weight:800;font-size:2rem;line-height:1}
.tier .price small{font-family:var(--font-body);font-size:.85rem;font-weight:500;color:var(--ink-3);font-stretch:100%}
.tier ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:.88rem;color:var(--ink-2)}
.toggle{display:inline-flex;border:1px solid var(--rule-2);border-radius:999px;padding:3px}
.toggle button{font:inherit;font-size:.85rem;font-weight:600;border:0;background:transparent;color:var(--ink-2);padding:5px 14px;border-radius:999px;cursor:pointer}
.toggle button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

/* subscribe band */
.band{margin-top:56px;background:var(--ink);color:var(--paper);border-radius:12px;padding:28px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:24px;align-items:center}
.band h2{color:var(--paper)}
.band p{color:color-mix(in srgb,var(--paper) 78%,transparent)}
@media (max-width:820px){.band{grid-template-columns:minmax(0,1fr)}}
.signup{display:flex;gap:8px;flex-wrap:wrap}
.signup input{flex:1 1 200px;font:inherit;padding:10px 14px;border-radius:999px;border:1px solid var(--rule-2);background:var(--surface);color:var(--ink);min-width:0}
.signup .msg{flex-basis:100%;font-size:var(--step--1)}
.band .signup .btn-primary{background:var(--paper);color:var(--ink)}

/* modal */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgb(8 12 24 / .55);padding:16px}
.modal[hidden]{display:none!important}
.modal-card{background:var(--surface);color:var(--ink);border-radius:12px;max-width:440px;width:100%;padding:24px;display:flex;flex-direction:column;gap:12px;border:1px solid var(--rule)}
.modal-card .x{align-self:flex-end;all:unset;cursor:pointer;color:var(--ink-3);font-size:1.4rem;line-height:1}

footer.foot{border-top:1px solid var(--rule);padding-block:28px 40px;font-size:var(--step--1);color:var(--ink-2)}
footer.foot .wrap{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:24px}
@media (max-width:800px){footer.foot .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}}
footer.foot h4{margin:0 0 8px;font-size:.82rem;color:var(--ink)}
footer.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
footer.foot a{color:var(--ink-2);text-decoration:none}
footer.foot a:hover{color:var(--accent)}

.prose{max-width:72ch;display:flex;flex-direction:column;gap:14px}
.prose h2{margin-top:18px}
.prose ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;background:var(--sunk);border:1px solid var(--rule);border-radius:6px;padding:10px;overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere}
.grp{margin-top:28px}
.grp h2{font-size:var(--step-1);margin-bottom:10px}
.month{display:grid;grid-template-columns:140px minmax(0,1fr);gap:20px;padding:18px 0;border-top:1px solid var(--rule)}
@media (max-width:700px){.month{grid-template-columns:minmax(0,1fr);gap:8px}}
.month h3{font-size:var(--step-1)}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}
.prose .btn{align-self:flex-start}

.brand-logo{display:block;height:24px;width:auto;color:var(--ink)}
.foot-logo{height:20px;align-self:flex-start}
@media (max-width:760px){.brand-logo{height:20px}}

/* use cases */
.uc-jump{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin-bottom:14px}
.uc-jump a,.who-card{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--rule);border-radius:8px;background:var(--surface);text-decoration:none;color:var(--ink)}
.uc-jump a:hover,.who-card:hover{border-color:var(--accent)}
.uc-jump b,.uc-tag{font-size:.74rem;font-weight:700;color:var(--accent);letter-spacing:.01em}
.uc-jump span{font-size:.9rem;font-weight:600}
.who{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:900px){.who{grid-template-columns:minmax(0,1fr)}}
.who-card b{font-size:1rem;line-height:1.35}
.uc-legend{display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--ink-2);margin:6px 0 10px}
.uc-legend .lg{display:inline-block;width:18px;height:8px;border-radius:2px;margin-right:6px;vertical-align:1px}
.uc{border-top:1px solid var(--rule);padding-top:28px;margin-top:28px;scroll-margin-top:80px}
.uc header{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.uc header p{max-width:75ch}
.uc h2{font-size:var(--step-3)}
.uc-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:32px}
@media (max-width:960px){.uc-grid{grid-template-columns:minmax(0,1fr)}}
.uc-scn{background:var(--sunk);border-radius:8px;padding:14px 16px;max-width:75ch}
.uc-steps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:10px;max-width:75ch}
.uc-steps li::marker{font-weight:700;color:var(--accent)}
.uc-h{font-family:var(--font-body);font-stretch:100%;font-size:.95rem;font-weight:700;letter-spacing:0;margin-bottom:8px}
.stages{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.stages li{display:grid;grid-template-columns:42px minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;align-items:center}
.stages .bar{grid-row:1/3;height:10px;border-radius:3px;border:1.5px solid var(--accent)}
.stages b{font-size:.9rem;font-weight:600}
.stages .small{color:var(--ink-3)}
.st-full .bar,.lg.st-full{background:var(--accent);border:1.5px solid var(--accent)}
.st-part .bar,.lg.st-part{background:linear-gradient(90deg,var(--accent) 50%,transparent 50%);border:1.5px solid var(--accent)}
.st-none .bar,.lg.st-none{background:transparent;border:1.5px dashed var(--ink-3)}

/* tap targets: every standalone link or control is at least 24px tall (WCAG 2.2 AA 2.5.8); 44px on touch screens for the main ones */
.brand{min-height:44px}
.jtag{min-height:24px;min-width:24px}
.rules .t,.feed a.t{display:inline-block;padding-block:3px}
footer.foot a{display:inline-block;padding-block:4px}
footer.foot ul{gap:2px}
.cta-box .row a,.section-head a,.chart-foot button,.chart-foot a,.uc .row a{display:inline-block;padding-block:4px}
.nav a{min-height:32px;display:inline-flex;align-items:center}
@media (pointer:coarse){
  .nav a,.btn,.layers button,.toggle button{min-height:44px}
  footer.foot a{padding-block:10px}
  .filters input,.filters select{min-height:44px}
}