/* batondeck.com's own layer over hdtp-web-kit (kit/styles.css): BatonDeck's palette, then the ink
 * stage (nav + hero), the bridge demo, and this page's sections.
 *
 * The palette is the block below and nothing else: it gives every colour token of the kit BatonDeck's
 * value, from the product's brand.json (scripts/theme.mjs writes it, test/brand.test.mjs holds it), and
 * no rule after it names a colour. On the page the accent means one thing, "this was allowed"; the
 * button is the product's orange. */
/* theme:start (written by scripts/theme.mjs from the product's brand.json; not edited by hand) */
:root{
  --bg:#FCFBFA;
  --bg-2:#F8F7F5;
  --bg-3:#F3F2EF;
  --panel:#FFFFFF;
  --inset:#F6F5F3;
  --ink:#131A24;
  --text:#131A24;
  --muted:#4C5461;
  --faint:#636B78;
  --line:#EBE9E4;
  --line-2:#DDDAD3;
  --accent:#E46738;
  --accent-ink:#E05A2B;
  --accent-ui:#E46738;
  --accent-soft:#FBE8E1;
  --on-accent:#FFFFFF;
  --btn:#ED6B3A;
  --btn-hover:#DE5D2C;
  --on-btn:#FFFFFF;
  --amber:#8A5A06;
  --amber-soft:#EFE8DC;
  --ended:#C02736;
  --ink-2:#222B37;
  --on-ink:#F7F6F4;
  --dark-text:#F7F6F4;
  --dark-muted:#B4B0AA;
  --dark-panel:#19212C;
  --accent-2:#FF8A55;
  --err-on-ink:#F28A88;
  --bg-rgb:252 251 250;
  --ink-rgb:19 26 36;
  --on-ink-rgb:247 246 244;
  --accent-rgb:228 103 56;
  --amber-rgb:138 90 6;
  --glow-rgb:255 122 61;
  --shade-rgb:6 9 14;
  --win-close:#F28A88;
  --win-min:#DDA13A;
  --win-zoom:#5FCF8E;
  --pending:#DDA13A;
  --av:#5F6673;
  --av-p:#8A5A06;
  --av-m:#7132CF;
  --av-l:#2159C9;
  --av-o:#1A7040;
  --av-win-p:#2159C9;
  --on-av:#FFFFFF;
  --sw-off:#5F6673;
  --tile-1:#3B4452;
  --tile-2:#4C5461;
  --tile-3:#636B78;
}
/* theme:end */



h2{letter-spacing:-.03em}

/* ---------------------------------------------------------------- the ink stage */
.stage{background:var(--ink);color:var(--dark-text);position:relative;overflow:clip}
.stage::before{content:"";position:absolute;inset:auto -20% -40% 40%;height:80%;pointer-events:none;
  background:radial-gradient(closest-side,rgb(var(--accent-rgb) / .16),transparent)}
.nav-dark{background:rgb(var(--ink-rgb) / .86)}
.nav-dark.scrolled{border-bottom-color:rgb(var(--on-ink-rgb) / .08)}
.nav-dark .nav-links a{color:var(--dark-text)}
.nav-dark .nav-links a:hover{color:var(--on-ink)}

.hero-c{padding:clamp(4rem,9vw,8rem) 0 clamp(4.5rem,9vw,8rem);position:relative}
.hero-c-top{display:grid;grid-template-columns:1fr;gap:1.6rem;max-width:56rem}
.hero-c h1{color:var(--on-ink);font-size:clamp(2.7rem,5.4vw,4.9rem);font-weight:700;letter-spacing:-.04em;line-height:.98;margin:0;max-width:14ch}
.hero-c .lede{color:var(--dark-muted);max-width:40rem;margin-bottom:1.5rem;font-size:clamp(1.02rem,1.3vw,1.15rem)}
.beta{display:inline-block;margin:0 0 1.3rem;padding:.3rem .8rem;border-radius:999px;font-size:.84rem;font-weight:600;color:var(--accent-2);border:1px solid rgb(var(--glow-rgb) / .35)}

}

/* ---------------------------------------------------------------- sections */
.two-col{display:grid;grid-template-columns:5fr 7fr;gap:clamp(1.5rem,5vw,4rem);align-items:start}
.two-col h2{font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1.08;margin:0}
.prose-c p{font-size:1.1rem;color:var(--text);line-height:1.65;max-width:38rem}
@media (max-width:820px){.two-col{grid-template-columns:1fr}}

/* how it works — a real sequence, so it is numbered */
.steps-c{list-style:none;counter-reset:step;padding:0;margin:2rem 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,3vw,2.5rem)}
.steps-c li{counter-increment:step;border-top:2px solid var(--ink);padding-top:1.1rem}
.steps-c li::before{content:counter(step);display:block;font-family:var(--display);font-weight:700;font-size:2.4rem;line-height:1;color:var(--accent-ink);margin-bottom:.7rem}
.steps-c h3{font-size:1.25rem;margin-bottom:.45rem}
.steps-c p{color:var(--muted);margin:0}
@media (max-width:820px){.steps-c{grid-template-columns:1fr}}


/* yours, not ours */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,5vw,4rem)}
.split h3{font-size:1.25rem}
@media (max-width:720px){.split{grid-template-columns:1fr}}

/* the self-hosted band's list */
.band .doc-list{margin:0;padding-left:1.1rem;color:var(--dark-muted);line-height:1.8;columns:2;column-gap:1.4rem}
@media (max-width:820px){.band .doc-list{columns:1}}

/* plans (held to batondeck's catalog.ts by test/plans.test.mjs) */
.plans-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel)}
.plans{width:100%;border-collapse:collapse;min-width:620px;font-size:.95rem}
.plans th,.plans td{padding:.85rem 1rem;text-align:center;border-bottom:1px solid var(--line)}
.plans tbody tr:last-child th,.plans tbody tr:last-child td{border-bottom:0}
.plans thead th{font-family:var(--display);font-size:1rem;font-weight:600;color:var(--ink);background:var(--bg-2)}
.plans tbody th{text-align:left;font-weight:500;color:var(--ink)}
.plans td{color:var(--text);font-variant-numeric:tabular-nums}
.plans .hl{background:var(--accent-soft)}

@media (max-width:820px){.nav-dark .nav-cta .btn.ghost-dark{display:none}}   /* Sign in stays in the hero's fine print */

/* line lengths (measured: the FAQ answers ran ~87 characters, the residency note ~160, the steps ~90 at tablet width) */
p.fine.center{max-width:32rem;margin-inline:auto}
.steps-c p{max-width:34rem}

/* the hero: headline beside the copy when there is room, stacked when not */
/* the hero form: one row when its column is wide, two rows (name + email, then the button) when not */

/* plans on a phone: the limits stay pinned while the plans scroll, and a fade at the edge says there is more */
@media (max-width:720px){
  .plans-scroll{position:relative;background:linear-gradient(to left,rgb(var(--ink-rgb) / .07),transparent 28px) right/28px 100% no-repeat,var(--panel);background-attachment:local,scroll}
  .plans{min-width:560px;font-size:.86rem}
  .plans th,.plans td{padding:.7rem .6rem}
  .plans thead th:first-child,.plans tbody th{position:sticky;left:0;z-index:1;background:var(--panel);box-shadow:1px 0 0 var(--line);min-width:8.5rem;max-width:9rem;white-space:normal}
  .plans thead th:first-child{background:var(--bg-2)}
}

/* the three pillars: identity, delegation, channel. Three parallel claims, not a sequence, so no numbers. */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3.5vw,3rem);margin-top:.6rem}
.pillars>div{border-top:2px solid var(--ink);padding-top:1.2rem;display:flex;flex-direction:column}
.pillars h3{font-size:1.3rem;margin-bottom:.6rem}
.pillars p{color:var(--text);line-height:1.62;margin:0 0 1rem;max-width:34rem}
.pillars .proof{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--line);font-size:.9rem;color:var(--ink);font-weight:500}
@media (max-width:900px){.pillars{grid-template-columns:1fr}}

/* the hero, with the idea drawn beside it: a certificate your wallet signed, and one contact's permissions */
.hero-c-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.deleg{margin:0;position:relative}
.cert-card,.scope-card{background:var(--dark-panel);border:1px solid rgb(var(--on-ink-rgb) / .1);border-radius:18px;padding:1.25rem 1.35rem;box-shadow:0 30px 70px -30px rgb(var(--shade-rgb) / .75)}
.cc-title{margin:0 0 .9rem;font-family:var(--display);font-weight:600;font-size:1.08rem;color:var(--on-ink)}
.cert-card dl{margin:0;display:grid;gap:.1rem}
.cert-card dl div{display:grid;grid-template-columns:7.2rem 1fr;gap:.6rem;padding:.5rem 0;border-bottom:1px solid rgb(var(--on-ink-rgb) / .07);font-size:.9rem}
.cert-card dt{color:var(--dark-muted)}
.cert-card dd{margin:0;color:var(--dark-text)}
.cert-card code{background:transparent;border:0;padding:0;color:var(--dark-text);font-size:.85em}
.cc-sig{display:flex;align-items:center;gap:.6rem;margin:1rem 0 0;font-size:.86rem;color:var(--accent-2)}
.cert-card{width:94%}
.scope-card{position:relative;margin:-.5rem 0 0 auto;width:min(19rem,76%);background:var(--panel);border-color:var(--panel)}
.scope-card .cc-title{color:var(--ink)}
.scope-card ul{list-style:none;margin:0;padding:0}
.scope-card li{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--line);font-size:.92rem;color:var(--ink)}
.scope-card li:last-child{border-bottom:0}
.cc-foot{margin:.7rem 0 0;font-size:.82rem;color:var(--muted)}
.deleg .sw{flex:0 0 30px}
@media (max-width:960px){.hero-c-grid{grid-template-columns:1fr}.deleg{max-width:32rem}}
@media (max-width:520px){.cert-card{width:auto}.scope-card{width:auto;margin:.8rem 0 0}}
.cert-card code{white-space:nowrap}


/* where your data lives */
.refuse{display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem;font-size:.85rem}
.refuse .w{padding:.4rem .65rem;border-radius:8px;background:var(--bg-2);border:1px solid var(--line-2);color:var(--ink)}
.refuse .arrow{flex:1;height:2px;background:var(--line-2);position:relative;min-width:3rem}
.refuse .x{padding:.4rem .65rem;border-radius:8px;background:var(--ink);color:var(--on-ink);font-weight:600}

.two-col-c{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(1.5rem,5vw,4rem);align-items:center}
.two-col-c p.muted{max-width:36rem}
.two-col-c .battery{margin:0}
@media (max-width:900px){.two-col-c{grid-template-columns:1fr}}

/* pillar diagrams */
.pv{min-height:10.4rem;margin-bottom:1.1rem;border-radius:16px;background:var(--bg-2);border:1px solid var(--line);padding:1rem;display:flex;align-items:center;justify-content:center;font-size:.8rem;overflow:hidden}
.pv-id{gap:.6rem}
.pv-root{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--ink);color:var(--on-ink);border-radius:12px;padding:.7rem .8rem;font-weight:600;text-align:center;line-height:1.2}
.pv-root small{font-weight:400;color:var(--dark-muted);font-size:.74rem}
.pv-arrows{display:flex;flex-direction:column;gap:1.6rem;flex:1;max-width:3.2rem}
.pv-arrows i{display:block;height:2px;background:var(--accent)}
.pv-arrows i.dash{background:repeating-linear-gradient(90deg,var(--line-2) 0 5px,transparent 5px 9px)}
.pv-hosts{display:flex;flex-direction:column;gap:.6rem}
.pv-hosts span{background:var(--panel);border:1.5px solid var(--ink);border-radius:10px;padding:.45rem .6rem;font-weight:600;color:var(--ink);white-space:nowrap}
.pv-hosts span.alt{border-style:dashed;border-color:var(--line-2);color:var(--muted);font-weight:500}
.pv-del{flex-direction:column;align-items:stretch;gap:.5rem;justify-content:center}
.pv-cert{display:flex;flex-direction:column;gap:.15rem;background:var(--ink);color:var(--dark-text);border-radius:10px;padding:.55rem .7rem}
.pv-cert code{background:none;border:0;padding:0;color:var(--on-ink);font-size:.95em}
.pv-cert .sig{display:flex;align-items:center;gap:.35rem;color:var(--accent-2)}
.pv-cert .sig i{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.pv-scope{display:grid;grid-template-columns:1fr auto;gap:.3rem .6rem;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.45rem .7rem;color:var(--ink)}
.pv-scope .sw{width:24px;height:14px}.pv-scope .sw::after{width:10px;height:10px}
.pv-ch{flex-direction:column;gap:.8rem}
.pv-line{display:flex;align-items:center;gap:.5rem;width:100%}
.pv-end{background:var(--panel);border:1.5px solid var(--ink);border-radius:10px;padding:.45rem .6rem;font-weight:600;color:var(--ink);white-space:nowrap}
.pv-wire{flex:1;height:2px;background:var(--accent);position:relative}
.pv-wire i{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:5px;background:var(--ink)}
/* The lock is a mask over --on-ink: a data: URL cannot hold a token. */
.pv-wire i::after{content:"";position:absolute;inset:0;background:var(--on-ink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3.5' y='7' width='9' height='6.5' rx='1.4' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M5.5 7V5.3a2.5 2.5 0 0 1 5 0V7' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center/70% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3.5' y='7' width='9' height='6.5' rx='1.4' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M5.5 7V5.3a2.5 2.5 0 0 1 5 0V7' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center/70% no-repeat}
.pv-none{display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center}
.pv-none span{color:var(--faint);text-decoration:line-through;border:1px dashed var(--line-2);border-radius:999px;padding:.2rem .55rem}

/* Motion (the kit's site.js adds .rv/.in as blocks scroll in; reduced motion stops all of it). The
   hero enters once, from CSS, and its scope card switches one permission off, as the copy says you
   can; the pillars draw what they claim (the root reaches either host, a call crosses the channel,
   a switch goes off); a write that cannot stay in the EU travels to "refused" and stops there. */
@media (prefers-reduced-motion:no-preference){
  .hero-c .beta,.hero-c h1,.hero-c .lede,.hero-c .waitlist,.hero-c .fine{animation:rise .7s var(--ease-out) both}
  .hero-c h1{animation-delay:.07s}.hero-c .lede{animation-delay:.16s}.hero-c .waitlist{animation-delay:.24s}.hero-c .fine{animation-delay:.3s}
  .deleg .cert-card{animation:rise .9s var(--ease-out) .35s both}
  .deleg .scope-card{animation:card-in .9s var(--ease-out) .7s both}
  .scope-card .sw.off{animation:sw-off .35s ease-out 2.2s both}
  .scope-card .sw.off::after{animation:knob-off .35s ease-out 2.2s both}
}
@keyframes card-in{from{opacity:0;transform:translate(18px,22px) rotate(2deg)}to{opacity:1;transform:none}}
@keyframes sw-off{from{background:var(--accent-ui)}to{background:var(--sw-off)}}
@keyframes knob-off{from{transform:translateX(13px)}to{transform:none}}
@keyframes knob-off-s{from{transform:translateX(10px)}to{transform:none}}
.pv-arrows i{transform-origin:left center}
.in .pv-arrows i{animation:grow-x .6s var(--ease-out) .3s both}
.in .pv-arrows i.dash{animation-delay:.55s}
.pv-wire::after{content:"";position:absolute;top:50%;left:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--accent);opacity:0}
.in .pv-wire::after{animation:wire-go 2.4s ease-in-out .8s infinite}
@keyframes wire-go{0%{left:0;opacity:0}10%{opacity:1}85%{left:100%;opacity:1}100%{left:100%;opacity:0}}
.in .pv-scope .sw.off{animation:sw-off .35s ease-out 1s both}
.in .pv-scope .sw.off::after{animation:knob-off-s .35s ease-out 1s both}
.refuse .arrow::after{content:"";position:absolute;top:50%;left:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--ink);opacity:0}
.in .refuse .arrow::after{animation:wire-go 2.4s ease-in-out .6s infinite}
.refuse .x{transform-origin:center}
.in .refuse .x{animation:pop .45s cubic-bezier(.3,1.3,.5,1) .5s both}

/* ------------------------------------------------------------------ step illustrations */
.st-vis{display:flex;align-items:center;gap:.5rem;min-height:3.4rem;margin-bottom:.9rem;padding:.6rem .7rem;border-radius:12px;background:var(--panel);border:1px solid var(--line)}
.v-addr .addr{font:600 .85rem var(--mono);color:var(--ink);white-space:nowrap}
.v-addr .addr b{font-weight:500;color:var(--muted)}
.v-addr .reg{margin-left:auto;display:flex;border:1px solid var(--line-2);border-radius:8px;overflow:hidden}
.v-addr .reg i{font:600 .72rem var(--sans);font-style:normal;padding:.25rem .5rem;color:var(--muted)}
.v-addr .reg i.on{background:var(--ink);color:var(--on-ink)}
.v-cert .wal,.v-mcp .ag{font:600 .78rem var(--sans);background:var(--ink);color:var(--on-ink);padding:.35rem .55rem;border-radius:8px;white-space:nowrap}
.v-cert .sig,.v-mcp .plug{position:relative;flex:1;height:2px;background:var(--ink);min-width:1.2rem}
.v-cert .sig::after,.v-mcp .plug::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:7px solid var(--ink);border-right:0}
.v-cert .crt{font:600 .74rem var(--mono);border:1.5px solid var(--ink);border-radius:8px;padding:.3rem .5rem;display:grid;white-space:nowrap}
.v-cert .crt small{font:500 .68rem var(--sans);color:var(--muted)}
.v-mcp .mcp{font:600 .74rem var(--mono);border:1.5px solid var(--accent-ui);color:var(--accent-ink);border-radius:8px;padding:.35rem .5rem;white-space:nowrap}
.v-mcp .plug{background:var(--accent)}.v-mcp .plug::after{border-left-color:var(--accent)}
.in .v-addr .reg i.on{animation:reg-pick .5s ease-out .5s both}
@keyframes reg-pick{from{background:transparent;color:var(--muted)}to{background:var(--ink);color:var(--on-ink)}}
.v-cert .sig,.v-mcp .plug{transform-origin:left center}
.in .v-cert .sig,.in .v-mcp .plug{animation:grow-x .6s var(--ease-out) .4s both}
.in .v-cert .crt,.in .v-mcp .mcp{animation:pop .45s cubic-bezier(.3,1.3,.5,1) .9s both}

/* ------------------------------------------------------------------ the key split */
.keys{margin:0 0 2rem;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:1rem;align-items:end}
.k-h{margin:0 0 .5rem;font-weight:600;color:var(--muted);font-size:.85rem}
.k-key{border-radius:16px;padding:1rem 1.2rem;display:grid;gap:.2rem}
.k-key b{font:600 1.1rem var(--display)}
.k-key span{font-size:.88rem}
.k-key.root{background:var(--ink);color:var(--on-ink)}
.k-key.root span{color:var(--dark-muted)}
.k-key.leaf{background:var(--panel);border:1.5px solid var(--ink);color:var(--ink)}
.k-key.leaf span{color:var(--muted)}
.k-life{height:6px;border-radius:6px;background:var(--bg-3);margin:.5rem 0 .2rem;overflow:hidden}
.k-life i{display:block;height:100%;background:var(--accent);transform-origin:right center}
.k-key.leaf .k-end{font-size:.8rem;color:var(--faint)}
.k-arrow{position:relative;align-self:center;min-width:9rem;text-align:center;font-size:.8rem;color:var(--muted);padding-bottom:.9rem}
.k-arrow::after{content:"";position:absolute;left:0;right:10px;bottom:0;height:2px;background:repeating-linear-gradient(90deg,var(--ink) 0 5px,transparent 5px 9px)}
.k-arrow::before{content:"";position:absolute;right:0;bottom:-5px;border:6px solid transparent;border-left:10px solid var(--ink);border-right:0}
.in .k-life i,.keys.in .k-life i{animation:life 5s linear .6s infinite}
@keyframes life{0%{transform:none}85%{transform:scaleX(0)}100%{transform:scaleX(0)}}
.in .k-key.leaf .k-end,.keys.in .k-key.leaf .k-end{animation:k-end 5s linear .6s infinite}
@keyframes k-end{0%,80%{color:var(--faint)}86%,100%{color:var(--ended)}}
@media (max-width:820px){.keys{grid-template-columns:1fr}.k-arrow{min-width:0;justify-self:start;padding:0 0 0 1rem;margin-left:1.4rem;text-align:left}.k-arrow::after{left:0;right:auto;top:-.4rem;bottom:-.4rem;width:2px;height:auto;background:repeating-linear-gradient(var(--ink) 0 5px,transparent 5px 9px)}.k-arrow::before{display:none}}

/* From the live review: the plans table says it scrolls on a phone; "Both of them" reads as one list. */
.scroll-hint{display:none;margin:.6rem 0 0;font-size:.85rem;color:var(--muted)}
.scroll-hint::after{content:" →"}
@media (max-width:720px){.scroll-hint{display:block}}
.band .doc .doc-list{columns:1}

/* ------------------------------------------------------------------ what BatonDeck runs: a hub
   Six services on one bar, the workspace: each is wired to it, and a pulse runs each wire. */
.hub{display:grid;gap:0;margin-top:1.6rem}
.hub-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:0}
.hub-row>div{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1.1rem 1.2rem}
.hub-row dt{display:flex;align-items:center;gap:.6rem;font-family:var(--display);font-weight:600;font-size:1.08rem;color:var(--ink);margin-bottom:.35rem}
.hub-row dd{margin:0;color:var(--muted);font-size:.93rem;line-height:1.55}
.hub-row code{white-space:nowrap}
.hub-row>div::after{content:"";position:absolute;left:50%;width:2px;height:2rem;background:var(--line-2)}
.hub-row.top>div::after{top:100%}
.hub-row.bot>div::after{bottom:100%}
.hub-row>div::before{content:"";position:absolute;left:50%;width:8px;height:8px;margin-left:-3px;border-radius:50%;background:var(--accent);opacity:0;z-index:1}
.hub-row.top>div::before{top:100%}
.hub-row.bot>div::before{bottom:100%}
.hub-bar{margin:2rem 0;background:var(--ink);color:var(--on-ink);border-radius:14px;padding:.9rem 1.2rem;display:flex;justify-content:center;align-items:baseline;gap:.8rem;flex-wrap:wrap}
.hub-bar b{font:600 1.1rem var(--display)}
.hub-bar span{color:var(--dark-muted);font-size:.9rem}
.hub-row.top.in>div::before{animation:hub-down 2.4s ease-in-out infinite}
.hub-row.bot.in>div::before{animation:hub-up 2.4s ease-in-out infinite}
.hub-row.in>div:nth-child(2)::before{animation-delay:.4s}.hub-row.in>div:nth-child(3)::before{animation-delay:.8s}
@keyframes hub-down{0%{opacity:0;transform:none}15%{opacity:1}80%{opacity:1;transform:translateY(2rem)}100%{opacity:0;transform:translateY(2rem)}}
@keyframes hub-up{0%{opacity:0;transform:translateY(0)}15%{opacity:1}80%{opacity:1;transform:translateY(-2rem)}100%{opacity:0;transform:translateY(-2rem)}}
@media (max-width:820px){
  .hub-row{grid-template-columns:1fr;gap:.7rem}
  .hub-row>div{margin-left:1.4rem}
  .hub-row>div::after{left:-1.4rem;top:50%!important;bottom:auto!important;width:1.4rem;height:2px}
  .hub-row>div::before{display:none}
  .hub{border-left:2px solid var(--line-2);padding-left:0}
  .hub-bar{margin:.7rem 0 .7rem 1.4rem;justify-content:flex-start}
}

/* ------------------------------------------------------------------ residency: two jurisdictions
   Each region is a container with what it holds inside; what no region holds sits outside both,
   drawn as such. The lists are residency.ts's (test/residency.test.mjs holds their counts). */
.rz{display:grid;gap:1rem}
.rz-regions{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.rz-region{position:relative;border:2px dashed var(--line-2);border-radius:20px;padding:1.6rem 1.2rem 1.2rem;background:var(--bg-2)}
.rz-region.on{border-color:var(--ink);background:var(--panel)}
.rz-tag{position:absolute;top:-.8rem;left:1rem;margin:0;padding:.2rem .7rem;border-radius:999px;background:var(--ink);color:var(--on-ink);font:600 .8rem var(--sans)}
.rz-region:not(.on) .rz-tag{background:var(--panel);color:var(--muted);border:1px solid var(--line-2)}
.rz-sub{margin:0 0 .8rem;color:var(--muted);font-size:.9rem}
.rz-items{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.rz-items li{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.6rem .8rem;font-size:.9rem;color:var(--text)}
.rz-region.on .rz-items li{border-color:var(--line-2)}
.rz-kind{display:block;font:600 .72rem var(--mono);color:var(--accent-ink);margin-bottom:.15rem}
.rz-region:not(.on) .rz-kind{color:var(--muted)}
.rz-guard{margin-top:.9rem;padding-top:.8rem;border-top:1px solid var(--line)}
.rz-gh{margin:0 0 .5rem;font-weight:600;font-size:.85rem;color:var(--ink)}
.rz-outside{border:1px solid var(--line);border-radius:18px;padding:1rem 1.2rem;background:var(--panel)}
.rz-oh{margin:0 0 .7rem;font-weight:600;color:var(--ink)}
.rz-outside ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.6rem}
.rz-outside li{border:1px dashed var(--line-2);border-radius:12px;padding:.6rem .7rem;display:grid;gap:.2rem;align-content:start}
.rz-outside b{font-size:.86rem;color:var(--ink);font-weight:600}
.rz-outside span{font-size:.8rem;color:var(--muted);line-height:1.45}
.rz-foot{margin:0;font-size:.85rem;color:var(--muted)}
.in .rz-items li,.rz-regions.in .rz-items li{animation:pop .4s cubic-bezier(.3,1.3,.5,1) both}
.rz-region:nth-child(2) .rz-items li{animation-delay:.25s}.rz-items li:nth-child(2){animation-delay:.12s}.rz-region:nth-child(2) .rz-items li:nth-child(2){animation-delay:.37s}
@media (max-width:1000px){.rz-outside ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.rz-regions{grid-template-columns:1fr}.rz-outside ul{grid-template-columns:1fr}}