/* Self-hosted from Google Fonts (Inter, JetBrains Mono; SIL Open Font License 1.1). Latin + Latin Extended only. */
/* Inter latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* JetBrains Mono latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* JetBrains Mono latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ERC3643 Association: stylesheet
   Tokens first. Components reference tokens only. */
:root{
  /* neutrals, tinted slightly toward the brand blue */
  --paper:#FFFFFF;
  --tint:#F4F6FA;
  --tint-2:#EBEFF6;
  --rule:#DCE1EA;
  --rule-strong:#BFC8D6;
  --ink:#0B1220;
  --ink-2:#434E63;          /* secondary text, ~8.5:1 on white */
  --ink-3:#5E687B;          /* meta only, ~5.9:1 on white */

  /* brand */
  --blue:#1640D6;
  --blue-press:#0E2FA6;
  --blue-wash:#EEF2FE;
  --navy:#0A1F6B;
  --navy-rule:#2A3F8C;
  --on-navy:#FFFFFF;
  --on-navy-2:#C8D3F4;

  /* status, demo and forms only */
  --pass:#0E7A46;
  --pass-wash:#E8F5EE;
  --fail:#B42318;
  --fail-wash:#FDEDEB;

  --serif:"Source Serif 4", "Iowan Old Style", Georgia, serif;
  --sans:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Menlo, monospace;

  --r-sm:3px;   /* buttons, inputs, chips */
  --r-md:6px;   /* panels */

  --gutter:24px;
  --max:1240px;
  --section:104px;

  --ease-out:cubic-bezier(.2,.7,.2,1);
  --t-fast:120ms;
  --t-step:420ms;
}
@media (max-width:760px){ :root{ --gutter:16px; --section:72px; } }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.62 var(--sans);font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--blue);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--blue-press)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}
.on-navy :focus-visible{outline-color:#fff}
code,.code{font-family:var(--mono);font-size:.8em;font-weight:500;color:var(--ink);letter-spacing:-.01em}

.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;z-index:100}
.skip:focus{left:8px}

/* ---------- type roles ---------- */
.display{font:600 clamp(42px,5.4vw,72px)/1.04 var(--serif);letter-spacing:-.022em;margin:0;font-optical-sizing:auto}
.h-section{font:600 clamp(32px,3.4vw,46px)/1.1 var(--serif);letter-spacing:-.018em;margin:0;font-optical-sizing:auto}
.h-item{font:600 20px/1.35 var(--sans);letter-spacing:-.01em;margin:0}
.lede{font-size:20px;line-height:1.55;color:var(--ink-2);margin:0;max-width:42ch}
.body{max-width:64ch}
.meta{font-size:14px;line-height:1.45;color:var(--ink-3)}
.label{font:600 14px/1.3 var(--sans);color:var(--ink-2);margin:0}
p{margin:0 0 16px}

/* ---------- buttons & links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:var(--r-sm);font:600 16px/1 var(--sans);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast)}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-press);color:#fff}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--rule-strong)}
.btn-secondary:hover{border-color:var(--ink);color:var(--ink)}
.btn-on-navy{background:#fff;color:var(--navy)}
.btn-on-navy:hover{background:var(--on-navy-2);color:var(--navy)}
.btn-sm{min-height:44px;padding:0 16px;font-size:16px}
.link-ext::after{content:"↗";font-size:.85em;margin-left:3px}
.actions{display:flex;flex-wrap:wrap;gap:12px}


/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.97);border-bottom:1px solid var(--rule)}
.site-head .wrap{display:flex;align-items:center;gap:24px;height:72px}
.brand{display:inline-flex;align-items:center;min-height:44px}
.brand img{height:36px;width:auto}
.nav{display:flex;align-items:center;gap:4px;flex:1}
.nav a,.nav .menu-btn{white-space:nowrap;font:500 16px/1 var(--sans);color:var(--ink);text-decoration:none;padding:12px 12px;border-radius:var(--r-sm);background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.nav a:hover,.nav .menu-btn:hover{background:var(--tint)}
.nav a[aria-current="page"]{color:var(--blue);box-shadow:inset 0 -2px 0 var(--blue);border-radius:0}
.util{display:flex;align-items:center;gap:4px}
.util a{white-space:nowrap;font:500 14px/1 var(--sans);min-height:44px;display:inline-flex;align-items:center;color:var(--ink-2);text-decoration:none;padding:10px 10px}
.util a:hover{color:var(--ink)}
.chev{width:10px;height:10px;transition:transform var(--t-fast)}
.menu-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.has-menu{position:relative}
.menu{position:absolute;top:calc(100% + 10px);left:0;width:560px;background:#fff;border:1px solid var(--rule);border-radius:var(--r-md);box-shadow:0 18px 40px -12px rgba(11,18,32,.22),0 2px 6px rgba(11,18,32,.06);padding:8px;display:none}
.menu[data-open="true"]{display:grid;grid-template-columns:1fr 1fr;gap:2px;animation:pop 140ms var(--ease-out)}
@keyframes pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.menu a{display:block;padding:12px 14px;border-radius:var(--r-sm);text-decoration:none;color:var(--ink)}
.menu a:hover{background:var(--tint)}
.menu a b{display:block;font:600 16px/1.3 var(--sans)}
.menu a span{display:block;font-size:14px;line-height:1.4;color:var(--ink-2);margin-top:3px}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--rule-strong);border-radius:var(--r-sm);height:44px;padding:0 14px;font:600 16px var(--sans);color:var(--ink);cursor:pointer}
@media (max-width:1180px){
  .nav,.util{display:none}
  .burger{display:inline-flex;align-items:center}
  .site-head .head-join{display:none}
}
.drawer{position:fixed;inset:0;z-index:60;background:#fff;display:none;overflow:auto}
.drawer[data-open="true"]{display:block}
.drawer .wrap{padding-top:16px;padding-bottom:40px}
.drawer-top{display:flex;justify-content:space-between;align-items:center;height:56px;margin-bottom:12px}
.drawer nav a{display:flex;align-items:center;min-height:52px;border-bottom:1px solid var(--rule);font:500 20px/1.2 var(--sans);color:var(--ink);text-decoration:none}
.drawer .group-label{margin:28px 0 4px}
.drawer nav.sub a{font-size:18px;min-height:48px}
.drawer .btn{width:100%;margin-top:28px}

/* ---------- sections ---------- */
.section{padding:var(--section) 0}
.section.tint{background:var(--tint)}

.navy{background:var(--navy);color:var(--on-navy)}
.navy .meta,.navy .lede{color:var(--on-navy-2)}

.split{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
.split-even{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}

@media (max-width:960px){.split,.split-even{grid-template-columns:minmax(0,1fr);gap:32px}}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:40px}
.section-head p{margin:0}

/* ---------- hero ---------- */
.hero{padding:88px 0 96px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:72px;align-items:center}
.hero .lede{margin-top:28px}
.hero .actions{margin-top:36px}

@media (max-width:1080px){.hero-grid{grid-template-columns:minmax(0,1fr);gap:48px}.hero{padding:56px 0 72px}}

/* ---------- the transfer check (signature) ---------- */
.check{border:1px solid var(--rule-strong);border-radius:var(--r-md);background:#fff;font-size:16px;line-height:1.45;position:relative}
.check-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--rule)}
.check-head .label{font-size:14px}
.check-ctrl{display:flex;gap:6px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:32px;padding:0 10px;border:1px solid var(--rule);background:#fff;border-radius:var(--r-sm);font:500 14px var(--sans);color:var(--ink-2);cursor:pointer}
.icon-btn:hover{border-color:var(--rule-strong);color:var(--ink)}
.icon-btn[aria-pressed="true"]{background:var(--tint-2);color:var(--ink)}
.tx{display:grid;grid-template-columns:auto 1fr auto;gap:4px 16px;padding:18px 20px;border-bottom:1px solid var(--rule)}
.tx dt{font-size:14px;color:var(--ink-3);padding-top:2px}
.tx dd{margin:0;color:var(--ink)}
.tx dd .code{color:var(--ink-2);margin-right:8px}
.tx .amount{grid-row:span 3;align-self:start;text-align:right;font:600 28px/1.1 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.tx .amount small{display:block;font:500 13px/1.3 var(--sans);color:var(--ink-3);margin-top:4px;letter-spacing:0}
.steps{list-style:none;margin:0;padding:10px 20px 6px;position:relative}
.step{display:grid;grid-template-columns:22px 1fr auto;gap:0 14px;padding:10px 0;position:relative}
.step::before{content:"";position:absolute;left:10px;top:30px;bottom:-12px;width:2px;background:var(--rule)}
.step:last-child::before{display:none}
.step .dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--rule-strong);background:#fff;display:grid;place-items:center;position:relative;z-index:1;transition:all var(--t-step) var(--ease-out)}
.step .dot svg{width:12px;height:12px;opacity:0;transition:opacity var(--t-fast)}
.step .what{color:var(--ink-2);font-weight:500;transition:color var(--t-step) var(--ease-out)}
.step .why{display:block;color:var(--ink-3);font-size:14px;margin-top:2px}
.step .fn{font:500 13px/22px var(--mono);color:var(--ink-3);white-space:nowrap}
.step.is-on .what{color:var(--ink)}
.step.is-on .why{color:var(--ink-2)}
.step.is-ok .dot{background:var(--blue);border-color:var(--blue)}
.step.is-ok .dot svg{opacity:1}
.step.is-ok::before{background:var(--blue)}
.step.is-no .dot{background:var(--fail);border-color:var(--fail)}
.step.is-no .dot svg{opacity:1}
.step.is-no .what{color:var(--fail)}
.step.is-skip .what,.step.is-skip .why{color:var(--ink-3)}
.step.is-skip .dot{border-style:dashed}
.verdict{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-top:1px solid var(--rule);min-height:72px;background:var(--tint)}
.verdict-word{font:600 28px/1.1 var(--serif);letter-spacing:-.01em}
.verdict-why{font-size:14px;color:var(--ink-2);text-align:right;max-width:34ch}
.verdict[data-state="ok"]{background:var(--pass-wash)}
.verdict[data-state="ok"] .verdict-word{color:var(--pass)}
.verdict[data-state="no"]{background:var(--fail-wash)}
.verdict[data-state="no"] .verdict-word{color:var(--fail)}
@media (max-width:560px){.step .fn{display:none}.tx{grid-template-columns:auto 1fr}.tx .amount{grid-row:auto;grid-column:1/-1;text-align:left;order:-1;margin-bottom:6px}.verdict{flex-direction:column;align-items:flex-start}.verdict-why{text-align:left}}

/* ---------- on the record (ledger) ---------- */
.ledger{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink)}
.ledger article{padding:20px 24px 4px 0;margin-right:24px;border-right:1px solid var(--rule)}
.ledger article:last-child{border-right:0;margin-right:0}
.ledger time{display:block;font:600 14px/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink);margin-bottom:14px}
.ledger h3{font:600 18px/1.35 var(--sans);margin:0 0 8px}
.ledger p{font-size:16px;line-height:1.5;color:var(--ink-2);margin:0 0 12px}
.ledger a{font-size:14px;font-weight:500}
@media (max-width:960px){.ledger{grid-template-columns:1fr 1fr}.ledger article{border-right:0;margin-right:0;border-bottom:1px solid var(--rule);padding-bottom:16px}}
@media (max-width:560px){.ledger{grid-template-columns:1fr}}

/* ---------- comparison table (problems) ---------- */

/* ---------- role index ---------- */
.index{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.index a{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr) 40px;gap:24px;align-items:center;padding:24px 8px 24px 0;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--ink);transition:background var(--t-fast),padding var(--t-step) var(--ease-out)}
.index .name{font:600 clamp(22px,2.2vw,28px)/1.2 var(--serif);letter-spacing:-.01em}
.index .line{font-size:16px;line-height:1.5;color:var(--ink-2)}
.index .go{justify-self:end;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--rule-strong);color:var(--ink);transition:all var(--t-fast)}
.index a:hover{background:var(--tint);padding-left:16px}
.index a:hover .name{color:var(--blue)}
.index a:hover .go{background:var(--blue);border-color:var(--blue);color:#fff}
@media (max-width:760px){.index a{grid-template-columns:1fr 36px;gap:6px 16px}.index .line{grid-column:1}.index .go{grid-row:1/3;grid-column:2;align-self:center}.index a:hover{padding-left:0}}

/* ---------- definition rows (facts) ---------- */
.defs{margin:0;border-top:1px solid var(--ink)}
.defs > div{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--rule)}
.defs dt{font:600 28px/1.2 var(--serif);letter-spacing:-.01em}
.defs dd{margin:0;font-size:18px;line-height:1.55;color:var(--ink)}
.defs dd .meta{display:block;margin-top:4px}
@media (max-width:560px){.defs > div{grid-template-columns:1fr;gap:6px}}

/* ---------- members ---------- */

.logo-wall{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.logo-wall a{display:grid;place-items:center;height:112px;padding:20px 24px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);background:#fff;transition:background var(--t-fast)}
.logo-wall img{max-height:48px;max-width:78%;width:auto;object-fit:contain;filter:grayscale(1) contrast(1.1);opacity:.78;transition:filter var(--t-fast),opacity var(--t-fast)}
.logo-wall a:hover{background:var(--tint)}
.logo-wall a:hover img{filter:none;opacity:1}
@media (max-width:960px){.logo-wall{grid-template-columns:repeat(4,1fr)}}
@media (max-width:560px){.logo-wall{grid-template-columns:repeat(3,1fr)}.logo-wall a{height:84px;padding:14px}}
.under{margin-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}

/* ---------- library list ---------- */
.lib{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.lib a{display:grid;grid-template-columns:200px 1fr 240px;gap:24px;padding:20px 0;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--ink);align-items:baseline}
.lib .type{font:600 14px/1.4 var(--sans);color:var(--ink-2)}
.lib .t{font:600 18px/1.4 var(--sans);letter-spacing:-.005em}

.lib a:hover .t{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
@media (max-width:760px){.lib a{grid-template-columns:1fr;gap:4px}}

/* ---------- join band ---------- */
.join-grid{text-align:center}
.join-grid .h-section{color:#fff;max-width:16ch;margin-left:auto;margin-right:auto}
.join-grid .benefits,.join-grid .actions{justify-content:center}
.join-grid .lede{margin-top:20px}
.benefits{list-style:none;margin:28px 0 36px;padding:0;display:flex;flex-wrap:wrap;gap:8px 28px}
.benefits li{font-weight:500;display:flex;align-items:center;gap:10px}
.benefits li::before{content:"";width:6px;height:6px;background:var(--on-navy-2);border-radius:50%}
.input{width:100%;height:48px;border-radius:var(--r-sm);border:1px solid var(--rule-strong);padding:0 14px;font:400 16px var(--sans);color:var(--ink);background:#fff}
.input:focus{outline:2px solid var(--blue);outline-offset:1px}

/* ---------- footer ---------- */
.foot{padding:72px 0 40px;border-top:1px solid var(--rule)}
.foot-grid{display:grid;grid-template-columns:2fr repeat(4,1fr);gap:32px}
.foot h4{font:600 14px/1.3 var(--sans);margin:0 0 14px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin:0 0 10px}
.foot a{color:var(--ink-2);text-decoration:none;font-size:16px}
.foot a:hover{color:var(--ink);text-decoration:underline}
.foot address{font-style:normal;font-size:16px;line-height:1.6;color:var(--ink-2);margin-top:20px}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:56px;padding-top:24px;border-top:1px solid var(--rule)}
@media (max-width:960px){.foot-grid{grid-template-columns:1fr 1fr}.foot-grid > div:first-child{grid-column:1/-1}}

/* ---------- page header (inner pages) ---------- */
.crumbs{font-size:14px;color:var(--ink-3);margin:0 0 20px;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.page-hero{padding:72px 0 88px;border-bottom:1px solid var(--rule)}
.page-hero .lede{margin-top:24px;max-width:46ch}

/* ---------- expandable rows (role page) ---------- */
.rows{border-top:1px solid var(--ink)}
.row{border-bottom:1px solid var(--rule)}
.row summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr) 32px;gap:24px;padding:24px 0;align-items:start}
.row summary::-webkit-details-marker{display:none}
.row .today{font:600 20px/1.4 var(--serif);letter-spacing:-.005em}
.row .with{font-size:18px;line-height:1.55}

.row .how{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr) 32px;gap:24px;padding:0 0 28px}
.row .how > div{grid-column:2}
.how-list{margin:0;display:grid;grid-template-columns:120px 1fr;gap:10px 16px;font-size:16px;line-height:1.5}
.how-list dt{color:var(--ink-3);font-weight:500}
.how-list dd{margin:0}
@media (max-width:760px){.row summary{grid-template-columns:1fr 32px}.row .with{grid-column:1}.row .how{grid-template-columns:1fr}.row .how > div{grid-column:1}.how-list{grid-template-columns:1fr;gap:2px}.how-list dd{margin-bottom:10px}}

.statement{font:500 clamp(24px,2.6vw,32px)/1.35 var(--serif);letter-spacing:-.01em;max-width:30ch;margin:0}

.faq details{border-bottom:1px solid var(--rule)}
.faq{border-top:1px solid var(--ink)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:20px 0;font:600 18px/1.4 var(--sans);min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 24px/1 var(--sans);color:var(--ink-2);transition:transform var(--t-fast)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details > div{padding:0 0 22px;max-width:64ch;font-size:16px;color:var(--ink)}

.mlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.mlist li{display:grid;grid-template-columns:120px 1fr auto;gap:24px;align-items:center;padding:18px 0;border-bottom:1px solid var(--rule)}
.mlist img{max-height:30px;width:auto;max-width:110px;object-fit:contain;filter:grayscale(1);opacity:.8}
.mlist b{display:block;font-weight:600;font-size:18px}
.mlist span{display:block;color:var(--ink-2);font-size:16px;line-height:1.45}
@media (max-width:560px){.mlist li{grid-template-columns:1fr;gap:6px}}

/* ---------- standard page: demo ---------- */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--rule);margin-bottom:32px}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:14px 18px;font:600 16px var(--sans);color:var(--ink-2);cursor:pointer;min-height:48px}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--blue)}
.tabs button:hover{color:var(--ink)}
.demo-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start}
@media (max-width:960px){.demo-grid{grid-template-columns:minmax(0,1fr)}}

.scen{list-style:none;margin:0 0 24px;padding:0;border-top:1px solid var(--ink)}
.scen button{width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--rule);padding:16px 0;cursor:pointer;display:block;font:inherit;color:var(--ink)}
.scen button b{display:block;font:600 18px/1.35 var(--sans)}
.scen button span{display:block;font-size:14px;color:var(--ink-2);margin-top:2px}
.scen button[aria-pressed="true"] b{color:var(--blue)}
.scen button[aria-pressed="true"]{box-shadow:inset 3px 0 0 var(--blue);padding-left:14px}
.register{width:100%;border-collapse:collapse;font-size:14px}
.register th{font:600 13px/1.3 var(--sans);color:var(--ink-3);text-align:left;padding:10px 12px;border-bottom:1px solid var(--rule-strong);white-space:nowrap}
.register td{padding:12px;border-bottom:1px solid var(--rule);vertical-align:middle}
.register td.r,.register th.r{text-align:right;font-variant-numeric:tabular-nums}
.register tr.changed td{background:var(--blue-wash);transition:background .6s}
.register tr.gone td{color:var(--ink-3);text-decoration:line-through}
.pill{display:inline-flex;align-items:center;gap:6px;font:600 13px/1 var(--sans);padding:5px 8px;border-radius:999px;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ok{background:var(--pass-wash);color:var(--pass)}
.pill.no{background:var(--fail-wash);color:var(--fail)}
.pill.neutral{background:var(--tint-2);color:var(--ink-2)}
.log{font:500 13px/1.7 var(--mono);background:var(--ink);color:#D7DCE6;border-radius:var(--r-md);padding:14px 16px;margin-top:16px;min-height:76px;overflow-x:auto}
.log .ev{color:#fff}
.log .c{color:#8F9AB0}
.panel{border:1px solid var(--rule-strong);border-radius:var(--r-md);overflow:hidden}
.panel-head{padding:14px 16px;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;gap:12px}

.tablewrap{overflow-x:auto}

.timeline{list-style:none;margin:0;padding:0;border-left:2px solid var(--rule);margin-left:6px}
.timeline li{position:relative;padding:0 0 28px 28px}
.timeline li::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--ink)}
.timeline li.major::before{background:var(--blue);border-color:var(--blue)}
.timeline time{display:block;font:600 14px var(--sans);font-variant-numeric:tabular-nums;color:var(--ink-2);margin-bottom:2px}
.timeline b{font-weight:600}

.musts{columns:2;column-gap:48px;margin:0;padding-left:22px;font-size:16px}
.musts li{break-inside:avoid;margin-bottom:10px}
@media (max-width:760px){.musts{columns:1}}

.toc{position:sticky;top:104px;font-size:14px}
.toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--rule)}
.toc a{display:block;padding:7px 0 7px 16px;margin-left:-1px;border-left:2px solid transparent;color:var(--ink-2);text-decoration:none}
.toc a:hover{color:var(--ink)}
.toc a[aria-current="true"]{border-left-color:var(--blue);color:var(--ink);font-weight:600}

@media (max-width:1080px){.toc{display:none}}
.doc-sec{padding:72px 0;border-bottom:1px solid var(--rule)}
.doc-sec:first-child{padding-top:24px}
.doc-sec:last-child{border-bottom:0}
.doc-sec > .h-section{margin-bottom:20px}

/* two checks diagram */

/* article */
.article{max-width:760px}
.answer{font:500 24px/1.5 var(--serif);letter-spacing:-.005em;margin:32px 0 0;color:var(--ink)}
.keyfacts{margin:40px 0;padding:24px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.keyfacts h2{font:600 14px var(--sans);margin:0 0 12px}
.keyfacts ul{margin:0;padding-left:20px}
.keyfacts li{margin-bottom:8px}
.article h2.q{font:600 28px/1.3 var(--serif);letter-spacing:-.01em;margin:48px 0 12px}
.article p{max-width:66ch}
.sources{font-size:16px}
.sources li{margin-bottom:8px}
.byline{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:20px}
.related{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.related a{display:block;padding:16px 0;border-bottom:1px solid var(--rule);font:600 18px/1.4 var(--sans);color:var(--ink);text-decoration:none}
.related a:hover{color:var(--blue)}
.aside-grid{display:grid;grid-template-columns:minmax(0,760px) 1fr;gap:80px}
@media (max-width:1080px){.aside-grid{grid-template-columns:minmax(0,1fr)}}
.aside{position:sticky;top:112px}

/* ---------- motion preference ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* touch sizing */
@media (max-width:760px){
  .icon-btn{min-height:44px;min-width:44px}
  
  .ledger a,.section-head a,.lib a,.foot a{display:inline-flex;align-items:center;min-height:44px}
  .foot li{margin:0}
}
.section.record{padding-bottom:88px}
@media (max-width:760px){.musts{padding-left:18px}.register td,.register th{padding:10px 8px}}
.article .display{font-size:clamp(32px,3.4vw,46px)}
.page-hero .hero-grid{align-items:start}
.mlist a{font-size:14px;font-weight:500;white-space:nowrap}
.mlist img{max-height:36px}

/* ===== v2: less text, more air ===== */
:root{--section:144px}
@media (max-width:760px){:root{--section:88px}}
.hero{padding:128px 0 144px}
.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,500px);gap:112px}
.hero .lede{max-width:26ch;margin-top:32px}
.hero .actions{margin-top:44px}
.check .tx{padding:16px 20px}
.check .steps{padding:6px 20px 4px}
.check .step{padding:8px 0}
.check .verdict{min-height:64px;padding:14px 20px}
@media (max-width:1080px){.hero{padding:64px 0 88px}.hero-grid{gap:56px}}

.section.record{padding:0 0 var(--section)}
.ledger{display:grid;grid-template-columns:repeat(4,1fr);gap:0 40px;border-top:0}
.ledger a{display:block;border-top:1px solid var(--ink);padding:16px 0 0;text-decoration:none;color:var(--ink)}
.ledger time{display:block;font:600 14px/1 var(--sans);color:var(--ink-3);margin:0 0 28px}
.ledger b{display:block;font:600 28px/1.15 var(--serif);letter-spacing:-.01em}
.ledger span{display:block;font-size:16px;color:var(--ink-2);margin-top:8px}
.ledger a:hover b{color:var(--blue)}
.ledger a::after{content:"Source ↗";display:block;margin-top:16px;font:500 14px var(--sans);color:var(--blue);opacity:0;transition:opacity var(--t-fast)}
.ledger a:hover::after,.ledger a:focus-visible::after{opacity:1}
@media (max-width:960px){.ledger{grid-template-columns:1fr 1fr;gap:40px 24px}.ledger a::after{opacity:1}}

.fixes{display:grid;grid-template-columns:1fr 1fr;gap:72px 112px;margin-top:80px}
.fixes > div{border-top:1px solid var(--rule-strong);padding-top:24px}
.fixes .was{font-size:16px;color:var(--ink-3);margin:0 0 14px;text-decoration:line-through;text-decoration-color:var(--rule-strong);text-decoration-thickness:1px}
.fixes .now{font:600 clamp(24px,2.4vw,32px)/1.2 var(--serif);letter-spacing:-.012em;margin:0;max-width:18ch}
@media (max-width:760px){.fixes{grid-template-columns:1fr;gap:48px;margin-top:48px}}

.index a{grid-template-columns:1fr 40px;padding:22px 8px 22px 0}
.index .name{font-size:clamp(22px,2vw,26px)}

.terms{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin:80px 0 0}
.terms > div{border-top:1px solid var(--ink);padding-top:24px}
.terms dt{font:600 clamp(44px,4.6vw,68px)/1 var(--serif);letter-spacing:-.025em}
.terms dd{margin:20px 0 0;font-size:16px;color:var(--ink-2);max-width:16ch}
@media (max-width:760px){.terms{grid-template-columns:1fr 1fr;gap:40px 24px;margin-top:48px}}

.section-head{margin-bottom:56px}
.logo-wall a{height:128px}
.row .with{font-size:18px;color:var(--ink-2)}
.row .today{font-size:22px}
.fixes .now{max-width:22ch}
@media (min-width:761px){.check-head .label{white-space:nowrap}}

/* ===== v3: rhythm + colour logos ===== */
:root{--section:120px}
@media (max-width:760px){:root{--section:80px}}
.hero{padding:104px 0 104px}
.section.record{padding:0 0 var(--section)}
.navy.section{padding:104px 0}
.fixes{margin-top:64px;gap:56px 112px}
.terms{margin-top:64px}
.section-head{margin-bottom:48px}
/* roles: two even columns under the heading */
.index-2{display:grid;grid-template-columns:1fr 1fr;column-gap:64px;border-top:0;margin-top:48px}
.index-2 li{border-top:1px solid var(--rule)}
.index-2 li:nth-child(-n/**/+2){border-top:1px solid var(--ink)}
.index-2 a{border-bottom:0}
.index-2 li:nth-last-child(-n/**/+2){border-bottom:1px solid var(--rule)}
.index-2 li:last-child:nth-child(odd){border-bottom:1px solid var(--rule)}
@media (max-width:760px){.index-2{grid-template-columns:1fr}.index-2 li:nth-child(2){border-top:1px solid var(--rule)}.index-2 li:nth-last-child(2){border-bottom:0}}
/* logos in full colour */
.logo-wall img{filter:none;opacity:1}
.logo-wall a:hover{background:var(--tint)}
.mlist img{filter:none;opacity:1}
.index-2 li,.index-2 li:nth-last-child(-n/**/+2),.index-2 li:last-child:nth-child(odd){border-top:0;border-bottom:1px solid var(--rule)}
.index-2 li:nth-child(-n/**/+2){border-top:1px solid var(--ink)}
@media (max-width:760px){.index-2 li:nth-child(2){border-top:0}}
.dev-link{margin:32px 0 0;font-size:16px;color:var(--ink-2)}

/* ===== v4: remaining pages ===== */
.page-hero.compact{padding:80px 0 72px}
.page-hero.compact .lede{max-width:44ch}
.dir-section{padding-top:56px}
.dir-tools{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between;margin-bottom:20px}
.search{position:relative;flex:1 1 320px;max-width:420px}
.search svg{position:absolute;left:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--ink-3)}
.search .input{padding-left:42px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:40px;padding:0 14px;border:1px solid var(--rule-strong);border-radius:999px;background:#fff;font:500 14px var(--sans);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.chip span{color:var(--ink-3);font-variant-numeric:tabular-nums}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.chip[aria-pressed="true"] span{color:#C8CFDB}
@media (max-width:760px){.chip{min-height:44px}}
.dir-count{margin:0 0 20px}
.dir{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.dir li{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.dir a{display:flex;flex-direction:column;height:100%;padding:24px;text-decoration:none;color:var(--ink);transition:background var(--t-fast)}
.dir a:hover{background:var(--tint)}
.dlogo{height:56px;display:flex;align-items:center;margin-bottom:20px}
.dlogo img{max-height:44px;max-width:70%;object-fit:contain}
.dir b{font:600 17px/1.3 var(--sans)}
.dcat{font-size:13px;color:var(--ink-3);margin-top:4px}
.ddesc{font-size:14px;line-height:1.5;color:var(--ink-2);margin-top:12px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:1080px){.dir{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.dir{grid-template-columns:repeat(2,minmax(0,1fr))}.dir a{padding:16px}.ddesc{display:none}}
.dir-empty{padding:48px 0}
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--blue);text-decoration:underline;cursor:pointer}
.lib li[hidden]{display:none}

.narrow{max-width:880px}
.embed{margin-top:40px;border:1px solid var(--rule-strong);border-radius:var(--r-md);overflow:hidden;background:var(--tint)}
.embed iframe{display:block;width:100%;height:620px;border:0}

.quote{display:grid;grid-template-columns:120px minmax(0,1fr);gap:40px;align-items:start;max-width:960px}
.quote img{width:120px;height:120px;border-radius:50%;object-fit:cover;filter:grayscale(1)}
.quote blockquote{margin:0}
.quote p{font:500 clamp(26px,2.8vw,36px)/1.3 var(--serif);letter-spacing:-.012em;margin:0 0 20px}
@media (max-width:760px){.quote{grid-template-columns:1fr;gap:24px}.quote img{width:80px;height:80px}}

.plain{list-style:none;margin:0;padding:0}
.plain li{padding:12px 0;border-bottom:1px solid var(--rule);font-size:18px}
.plain li:first-child{border-top:1px solid var(--ink)}

.index .name .sub{display:block;font:400 15px/1.4 var(--sans);color:var(--ink-2);margin-top:4px;letter-spacing:0}
@media (max-width:760px){.how-list code{white-space:normal;word-break:break-word}}
.page-hero.compact + .section{padding-top:88px}
.page-hero.compact + .dir-section{padding-top:48px}
.dir-more{display:flex;justify-content:center;margin-top:40px}

/* ===== v5: distinct treatments, clearer hierarchy ===== */

/* On the record: a timeline in the check-line language */
.ledger{position:relative;gap:0 32px}
.ledger::before{content:"";position:absolute;left:0;right:0;top:35px;height:2px;background:var(--rule)}
.ledger a{border-top:0;padding:0;position:relative}
.ledger time{margin:0 0 20px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.ledger a::before{content:"";display:block;width:14px;height:14px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 5px #fff;margin:0 0 22px;position:relative;z-index:1}
.ledger a:hover::before{box-shadow:0 0 0 5px #fff,0 0 0 7px var(--blue-wash)}
@media (max-width:960px){.ledger::before{display:none}}

/* Built for…: before → after rows, no rules */
.fixes{display:block;margin-top:56px}
.fixes > div{display:grid;grid-template-columns:minmax(0,5fr) 56px minmax(0,7fr);align-items:center;gap:24px;border-top:0;padding:22px 0}
.fixes > div + div{border-top:1px solid var(--rule)}
.fixes .was{margin:0;font-size:18px;color:var(--ink-3);text-decoration:none}
.fixes .arr{width:40px;height:40px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:18px}
.fixes .now{margin:0;max-width:none;font-size:clamp(24px,2.4vw,30px)}
@media (max-width:760px){.fixes > div{grid-template-columns:1fr;gap:10px}.fixes .arr{width:28px;height:28px;font-size:14px}}

/* No one owns it: white tiles on the tint */
.terms.tiles{gap:16px}
.terms.tiles > div{border-top:0;background:#fff;padding:32px 28px 36px;border-radius:var(--r-md)}
.terms.tiles dt{color:var(--blue)}
.terms.tiles dd{color:var(--ink);font-size:17px}

/* About: large verbs with meaning beside them */

/* Join: what members get, as a checked list */
.checks{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:920px}
.checks li{display:grid;grid-template-columns:44px 1fr;column-gap:20px}
.checks li::before{content:"";grid-row:1/3;width:44px;height:44px;border-radius:50%;background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat}
.checks b{font:600 26px/1.25 var(--serif);letter-spacing:-.01em}
.checks span{margin-top:6px;font-size:17px;color:var(--ink-2);max-width:30ch}
@media (max-width:760px){.checks{grid-template-columns:1fr}}

/* Join: stepper in the check-line language */
.stepper{list-style:none;counter-reset:s;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.stepper li{counter-increment:s;position:relative}
.stepper li::before{content:counter(s);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;border:2px solid var(--blue);color:var(--blue);font:600 17px var(--sans);position:relative;z-index:1;margin-bottom:24px}
.stepper li:first-child::before{background:var(--blue);color:#fff}
.stepper li:not(:last-child)::after{content:"";position:absolute;top:21px;left:44px;right:-32px;height:2px;background:var(--blue);opacity:.35}
.stepper b{display:block;font:600 28px/1.2 var(--serif)}
.stepper span{display:block;margin-top:8px;font-size:17px;color:var(--ink-2);max-width:24ch}
@media (max-width:760px){.stepper{grid-template-columns:1fr;gap:28px}.stepper li{padding-left:64px}.stepper li::before{position:absolute;left:0;top:0;margin:0}.stepper li:not(:last-child)::after{top:44px;bottom:-28px;left:21px;right:auto;width:2px;height:auto}}

/* Developers: figures in a row with vertical dividers */
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin:56px 0 0}
.stats > div{padding:0 32px;border-left:1px solid var(--rule-strong)}
.stats > div:first-child{padding-left:0;border-left:0}
.stats dt{font:600 clamp(48px,5vw,76px)/1 var(--serif);letter-spacing:-.03em}
.stats dd{margin:14px 0 0;font-size:17px;color:var(--ink-2)}
@media (max-width:760px){.stats{grid-template-columns:1fr 1fr;gap:32px 0}.stats > div:nth-child(3){padding-left:0;border-left:0}}
.ledger::before{top:6px}
.ledger a::before{margin:0 0 20px}
.ledger time{margin:0 0 12px}

.stats dt{font-size:clamp(40px,4.2vw,64px);white-space:nowrap}
.policy p,.policy li{font-size:17px;line-height:1.65}.policy h2.q{font-size:22px;margin-top:40px}

/* ===== v6: The Standard uses the full width ===== */
.subnav{background:#fff;border-bottom:1px solid var(--rule)}
.subnav ol{list-style:none;margin:0;padding:0;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.subnav ol::-webkit-scrollbar{display:none}
.subnav a{display:flex;align-items:center;min-height:52px;padding:0 14px;white-space:nowrap;font:500 15px var(--sans);color:var(--ink-2);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px}
.subnav li:first-child a{padding-left:0}
.subnav a:hover{color:var(--ink)}
.subnav a[aria-current="true"]{color:var(--ink);border-bottom-color:var(--blue)}
html{scroll-padding-top:140px}

.doc-sec{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:72px;padding:104px 0;border-bottom:1px solid var(--rule)}
.doc-sec > *{grid-column:2}
.doc-sec > .h-section{grid-column:1;grid-row:1 / span 30;align-self:start;margin:0}
.doc-sec:first-child{padding-top:88px}
.doc-sec.wide{display:block}
.doc-sec.wide > .h-section{margin-bottom:28px}
.doc-sec .body{max-width:60ch}
#what .body{font-size:20px;line-height:1.55}
@media (max-width:960px){.doc-sec{display:block;padding:72px 0}.doc-sec > .h-section{margin-bottom:20px}}

/* two checks: larger at full width */

/* interfaces: two columns of definitions */
#spec .defs{display:grid;grid-template-columns:1fr 1fr;column-gap:56px;border-top:0}
#spec .defs > div{grid-template-columns:1fr;gap:6px;border-top:1px solid var(--rule);border-bottom:0;padding:20px 0}
#spec .defs dd{font-size:17px}
@media (max-width:760px){#spec .defs{grid-template-columns:1fr}}

/* history: horizontal timeline */
.tl-h{display:grid;grid-template-columns:repeat(6,1fr);gap:24px;border-left:0;margin:48px 0 0;position:relative}
.tl-h::before{content:"";position:absolute;left:0;right:0;top:6px;height:2px;background:var(--rule)}
.tl-h li{padding:32px 0 0}
.tl-h li::before{left:0;top:0;z-index:1;box-shadow:0 0 0 5px #fff}
.tl-h time{margin-bottom:8px}
.tl-h li{font-size:16px;line-height:1.45}
@media (max-width:960px){.tl-h{grid-template-columns:1fr;gap:0;border-left:2px solid var(--rule);margin-left:6px}.tl-h::before{display:none}.tl-h li{padding:0 0 24px 28px}.tl-h li::before{left:-7px;top:6px;box-shadow:none}}

#lab-form{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px;align-content:start}

#lab-form .btn{grid-column:1/-1;justify-self:start;margin-top:8px}
#demo .demo-grid{grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:56px}
@media (max-width:960px){#demo .demo-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){#lab-form{grid-template-columns:1fr}}
.doc-sec{scroll-margin-top:-117px}   /* subnav no longer sticks, so land 53px higher */

/* ===== v7: audit fixes ===== */
/* restore mobile layouts that later rules overrode */
@media (max-width:1080px){.hero-grid{grid-template-columns:minmax(0,1fr);gap:48px}}
@media (max-width:560px){.logo-wall a{height:88px;padding:14px}}
/* adjacent white sections: don't double the gap */
.section:not(.tint):not(.navy) + .section:not(.tint):not(.navy):not(.dir-section){padding-top:0}
/* privacy: long URLs wrap */
.policy{overflow-wrap:anywhere}
/* footer headings are h2 now, same look */
.foot-h{font:600 14px/1.3 var(--sans);margin:0 0 14px;color:var(--ink)}
.foot li a{display:inline-block;min-width:24px}
/* weights: only 400/500/600; mono only 500 */
b,strong{font-weight:600}
#spec .defs dt{font:500 14px var(--mono)!important}
/* type scale: 14 16 18 20 24 28 36 46 64 72 */
code{font-size:14px}
.step .fn, .tx dt, .dcat, .tx .amount small{font-size:14px}
.subnav a{font-size:16px}
.index .name .sub{font-size:14px}
.dir b,.checks span,.stepper span,.defs dd,#spec .defs dd,.policy p,.policy li,.article p,.terms.tiles dd{font-size:18px}
.ddesc{font-size:14px}
.policy h2.q, .row .today, .index .name{font-size:24px}
.defs dt[style]{font-size:24px!important}
.checks b, .stepper b, .ledger b{font-size:28px}
.fixes .now{font-size:clamp(22px,2.2vw,28px)}
.statement,.quote p{font-size:clamp(26px,2.6vw,36px)}
.terms dt, .terms.tiles dt, .stats dt{font-size:clamp(40px,4.4vw,64px)}
@media (max-width:760px){.index .name, .row .today{font-size:20px}.checks b,.stepper b,.ledger b{font-size:24px}}
.display,.h-section,.statement,.quote p,.fixes .now{text-wrap:balance}

/* ===== v8 ===== */
/* lighter brand blue */
:root{--blue:#2D5BE3;--blue-press:#1F47C9;--blue-wash:#EEF3FF}

/* live example card: country first, wallet under it, fixed size */
.check .tx{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:start;padding:18px 20px}
.parties{margin:0;display:grid;gap:12px}
.parties > div{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:baseline}
.parties dt{font-size:14px;color:var(--ink-3)}
.parties dd{margin:0;min-width:0}
.parties b{display:block;font:600 17px/1.3 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.parties .addr{display:block;font:500 13px/1.4 var(--mono);color:var(--ink-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.check .amount{margin:0;text-align:right;font:600 28px/1.1 var(--sans);font-variant-numeric:tabular-nums;min-width:120px}
.check .amount small{display:block;font:500 13px/1.3 var(--sans);color:var(--ink-3);margin-top:6px}
.step .what,.step .why{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.step > span:nth-child(2){min-width:0}
.check .verdict{min-height:84px}
.verdict-why{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em}
@media (max-width:560px){.check .tx{grid-template-columns:1fr}.check .amount{text-align:left;order:-1}}

/* hero: faint ledger-paper dot grid, fading out */
.hero{position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background-image:radial-gradient(circle at 1px 1px, rgba(45,91,227,.16) 1px, transparent 1.4px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 70% 75% at 72% 45%, #000 0%, rgba(0,0,0,.55) 45%, transparent 78%);
          mask-image:radial-gradient(ellipse 70% 75% at 72% 45%, #000 0%, rgba(0,0,0,.55) 45%, transparent 78%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--rule) 20%,var(--rule) 80%,transparent)}
.hero .check{box-shadow:0 1px 0 rgba(11,18,32,.02),0 24px 48px -28px rgba(20,40,110,.28)}

/* rolling logo tiles */
.logo-wall a.lw-tile{position:relative;overflow:hidden;display:block}
.lw-face{position:absolute;inset:0;display:grid;place-items:center;transition:transform .7s cubic-bezier(.65,0,.25,1)}
.lw-face img{max-width:none;max-height:none;filter:none;opacity:1}
@media (prefers-reduced-motion:reduce){.lw-face{transition:none}}

/* role-page member list: centred, evenly sized logos; quiet links */
.mlist li{grid-template-columns:150px minmax(0,1fr) auto}
.mlist img{max-height:none;max-width:none;justify-self:center;filter:none;opacity:1}
.mlist li > a.link-ext{font-size:14px;font-weight:500}
@media (max-width:560px){.mlist li{grid-template-columns:1fr}.mlist img{justify-self:start}}
.dlogo{justify-content:flex-start}
.dlogo img{max-height:none;max-width:none}
/* Try it: switches */

.switch{display:grid;grid-template-columns:52px minmax(0,1fr);gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--rule);cursor:pointer;position:relative}
.switch input{position:absolute;opacity:0;width:52px;height:30px;margin:0;cursor:pointer}
.sw{width:48px;height:28px;border-radius:999px;background:var(--rule-strong);position:relative;transition:background var(--t-fast)}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(11,18,32,.25);transition:transform .18s var(--ease-out)}
.switch input:checked + .sw{background:var(--fail)}
.switch input:checked + .sw::after{transform:translateX(20px)}
.switch input:focus-visible + .sw{outline:2px solid var(--blue);outline-offset:3px}

.switch:hover .sw{background:#A9B4C4}
.switch:hover input:checked + .sw{background:#9A1D14}
.lab-actions{display:flex;gap:12px;margin-top:24px}

/* ===== How it works: purpose-built sections ===== */
.doc-sec.wide > .h-section{margin-bottom:32px}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:end;margin-bottom:40px}
.sec-head .h-section{margin:0!important}
.sec-head .meta{margin:0;max-width:52ch;font-size:16px}
@media (max-width:960px){.sec-head{grid-template-columns:1fr;gap:12px}}

/* What it is: one definition, then is / isn't */
.def{font:500 clamp(24px,2.6vw,34px)/1.35 var(--serif);letter-spacing:-.01em;max-width:34ch;margin:0 0 48px}
.isnt{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:900px}
.isnt > div{background:var(--tint);border-radius:var(--r-md);padding:24px 28px}
.isnt .label{margin-bottom:12px}
.marks{list-style:none;margin:0;padding:0}
.marks li{display:flex;gap:12px;align-items:center;padding:8px 0;font-size:18px}
.marks li::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:var(--blue) center/12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.marks.no li{color:var(--ink-2)}
.marks.no li::before{background:var(--ink-3) center/10px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 3l6 6M9 3l-6 6' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}
@media (max-width:760px){.isnt{grid-template-columns:1fr}}

/* Two checks: a flow */
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr 0.85fr;gap:56px;position:relative}
.flow-step{border:1px solid var(--rule-strong);border-radius:var(--r-md);padding:28px 28px 24px;background:#fff;position:relative}
.flow-step:not(:last-child)::after,.flow-step + .flow-step::after{content:"";position:absolute;top:50%;right:-57px;width:56px;height:2px;background:var(--blue)}
.flow-step::before{content:"";position:absolute;top:calc(50% - 5px);right:-58px;width:10px;height:10px;border-top:2px solid var(--blue);border-right:2px solid var(--blue);transform:rotate(45deg);display:none}
.flow .n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--blue);color:#fff;font:600 15px var(--sans);margin-bottom:18px}
.flow h3{font:600 24px/1.25 var(--serif);margin:0 0 8px}
.flow p{font-size:17px;color:var(--ink-2);margin:0 0 16px}
.flow code{font-size:14px;color:var(--ink-3)}
.flow-end{display:grid;gap:12px;align-content:center}
.flow-end > div{border-radius:var(--r-md);padding:18px 20px}
.flow-end b{display:block;font:600 20px/1.25 var(--serif)}
.flow-end span{display:block;font-size:16px;margin-top:4px}
.flow-end .ok{background:var(--pass-wash)} .flow-end .ok b{color:var(--pass)}
.flow-end .no{background:var(--fail-wash)} .flow-end .no b{color:var(--fail)}
@media (max-width:960px){.flow{grid-template-columns:1fr;gap:32px}.flow-step::after{top:auto!important;bottom:-33px;right:auto!important;left:40px;width:2px!important;height:32px!important}}

/* Agent controls: six tiles */
.ctl-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ctl-grid li{background:var(--tint);border-radius:var(--r-md);padding:26px 28px 24px;display:flex;flex-direction:column}
.ctl-grid h3{font:600 24px/1.25 var(--serif);margin:0 0 8px}
.ctl-grid p{font-size:17px;color:var(--ink-2);margin:0 0 18px;flex:1}
.ctl-grid code{font-size:14px;color:var(--ink-2);background:#fff;border:1px solid var(--rule);border-radius:var(--r-sm);padding:3px 8px;align-self:flex-start}
@media (max-width:960px){.ctl-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ctl-grid{grid-template-columns:1fr}}

/* Inside the standard: architecture */
.arch{display:grid;grid-template-columns:1fr 1fr 1fr;gap:56px;align-items:center;position:relative}
.arch-col{display:grid;gap:10px;position:relative}
.arch-col .label{margin:0 0 6px}
.arch-col.core{align-self:center}
.arch-col.core::before,.arch-col.core::after{content:"";position:absolute;top:50%;width:56px;height:2px;background:var(--rule-strong)}
.arch-col.core::before{left:-56px}
.arch-col.core::after{right:-56px}
.ibox{border:1px solid var(--rule);border-radius:var(--r-md);padding:14px 16px;background:#fff}
.ibox code{display:block;font-size:14px;color:var(--ink);font-weight:500}
.ibox span{display:block;font-size:15px;color:var(--ink-2);margin-top:4px}
.ibox em{font-style:normal;font-family:var(--mono);font-size:13px}
.ibox.main{border:2px solid var(--blue);background:var(--blue-wash);padding:20px}
.ibox.main code{font-size:17px;color:var(--blue-press)}
@media (max-width:960px){.arch{grid-template-columns:1fr;gap:28px}.arch-col.core::before,.arch-col.core::after{display:none}.arch-col.core{order:-1}}
.musts-box{margin-top:40px;border:1px solid var(--rule);border-radius:var(--r-md)}
.musts-box summary{cursor:pointer;list-style:none;padding:18px 22px;font:600 17px var(--sans);display:flex;justify-content:space-between}
.musts-box summary::-webkit-details-marker{display:none}
.musts-box summary::after{content:"+";font-size:22px;color:var(--ink-2)}
.musts-box[open] summary::after{content:"–"}
.musts-box > div{padding:0 22px 22px}
.ibox span,.flow p{font-size:16px}

/* Role pages: Today vs With ERC-3643 */
.vs{margin-top:40px}
.vs-head{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:12px}
.vs-head span{font:600 14px/1 var(--sans);padding:0 4px;display:flex;align-items:center;gap:10px}
.vs-head span:first-child{color:var(--ink-3)}
.vs-head span:last-child{color:var(--blue)}
.vs-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:12px}
.vs-a,.vs-b{border-radius:var(--r-md);padding:22px 24px 22px 60px;position:relative}
.vs-a{background:var(--tint)}
.vs-b{background:#fff;border:1px solid var(--rule-strong)}
.vs-a::before,.vs-b::before{content:"";position:absolute;left:22px;top:24px;width:24px;height:24px;border-radius:50%}
.vs-a::before{background:var(--ink-3) center/10px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 3l6 6M9 3l-6 6' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}
.vs-b::before{background:var(--blue) center/12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.vs-a p{margin:0;font-size:18px;color:var(--ink-2)}
.vs-b p{margin:0;font:600 20px/1.35 var(--serif);color:var(--ink)}
.vs-tag{display:none}
.tech{margin-top:10px}
.tech summary{cursor:pointer;list-style:none;font:500 14px var(--sans);color:var(--blue);display:inline-flex;gap:6px;align-items:center;min-height:32px}
.tech summary::-webkit-details-marker{display:none}
.tech summary::after{content:"+";font-size:16px}
.tech[open] summary::after{content:"–"}
.tech .how-list{margin-top:10px;font-size:15px;grid-template-columns:100px 1fr}
@media (max-width:760px){
  .vs-head{display:none}
  .vs-row{grid-template-columns:1fr;gap:6px;margin-bottom:24px}
  .vs-tag{display:block;font:600 12px/1 var(--sans);text-transform:none;margin-bottom:6px;color:var(--ink-3)}
  .vs-b .vs-tag{color:var(--blue)}
}
.check .tx .amount{grid-row:auto;align-self:start}
.ctl-grid .fns{display:flex;gap:8px;flex-wrap:wrap}
.what-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.what-grid .def{margin:0}
.what-grid .isnt{max-width:none}
@media (max-width:960px){.what-grid{grid-template-columns:1fr;gap:32px}}
.vs-a{display:flex;align-items:center}
.vs-a::before{top:50%;transform:translateY(-50%)}
.hero::before{background-image:radial-gradient(circle at 1px 1px, rgba(45,91,227,.22) 1px, transparent 1.5px)}

/* ===== v9 ===== */
/* hero: lift the card; drop the bottom rule */
@media (min-width:1081px){.hero .check{transform:translateY(-30px)}}
.hero::after{display:none}
.strip-h{font:600 28px/1.25 var(--serif);letter-spacing:-.01em;margin:0 0 36px;max-width:none}

/* header: pages on the left; quieter links + button grouped on the right */
.site-head .wrap{gap:20px}
.util{margin-left:auto;gap:0;padding-right:8px;margin-right:4px;border-right:1px solid var(--rule)}
.util a{font-size:13px;color:var(--ink-3);padding:10px 8px}
.util a:hover{color:var(--ink)}
.nav{flex:0 1 auto}

/* roles menu: wide enough for every option */
.menu{width:min(720px,calc(100vw - 48px))}
.menu[data-open="true"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.menu a span{white-space:normal}

/* Today vs With: smaller */
.vs{margin-top:28px}
.vs-row{gap:12px;margin-bottom:8px}
.vs-a,.vs-b{padding:14px 18px 14px 50px}
.vs-a::before,.vs-b::before{left:16px;width:22px;height:22px}
.vs-b::before{top:15px}
.vs-a p{font-size:16px}
.vs-b p{font-size:17px}
.tech{margin-top:4px}
.tech summary{min-height:28px;font-size:13px}

/* About: verbs as three columns, below the heading in the hierarchy */

/* FAQ links */
.faq details > div a{font-weight:500;white-space:nowrap}
/* role pages: a quiet line icon instead of the demo card */

.page-hero .hero-grid{align-items:center}

/* ===== Try it: compact, realistic controls ===== */
#demo .demo-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;align-items:start}
.lab{display:grid;grid-template-columns:1fr 1fr;gap:16px}

.range{display:grid;grid-template-columns:minmax(0,1fr) 56px;gap:12px;align-items:center}
.range input{width:100%;accent-color:var(--blue);height:24px}
.range output{font:600 15px var(--sans);font-variant-numeric:tabular-nums;text-align:right}
.select{height:36px;border:1px solid var(--rule-strong);border-radius:var(--r-sm);background:#fff;font:500 14px var(--sans);padding:0 10px;color:var(--ink)}

.lab-actions{display:flex;gap:8px;margin:0}
/* compact result card for the lab */
[data-check="lab"]{font-size:14px}
[data-check="lab"] .check-head{padding:10px 16px}
[data-check="lab"] .tx{padding:12px 16px}
[data-check="lab"] .parties{gap:6px}
[data-check="lab"] .parties b{font-size:15px}
[data-check="lab"] .amount{font-size:22px}
[data-check="lab"] .steps{padding:4px 16px}
[data-check="lab"] .step{padding:5px 0}
[data-check="lab"] .step .fn{display:none}
[data-check="lab"] .step .what{font-size:14px}
[data-check="lab"] .step .why{font-size:13px;margin-top:0}
[data-check="lab"] .verdict{min-height:64px;padding:10px 16px}
[data-check="lab"] .verdict-word{font-size:22px}
[data-check="lab"] .verdict-why{font-size:13px}
#lab-log{min-height:52px;margin-top:10px;padding:10px 14px}
@media (max-width:960px){#demo .demo-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.lab{grid-template-columns:1fr}}

.lab{grid-template-areas:"rules sender" "rules receiver" "send send";grid-template-rows:auto 1fr auto}

@media (max-width:640px){.lab{grid-template-areas:"rules" "sender" "receiver" "send";grid-template-rows:auto}}

/* ===== v10: simpler Try it ===== */
#demo .demo-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}

/* lighter brand blue */
:root{--blue:#3D6BF0;--blue-press:#2A55D9;--blue-wash:#EFF4FF}

/* ===== role pages: a collage of the interface fragments that role works with ===== */

.role-scene{position:relative;justify-self:end;width:100%;max-width:460px;aspect-ratio:1/0.92;border-radius:var(--r-md);
  background:var(--tint) radial-gradient(circle at 1px 1px, rgba(61,107,240,.2) 1px, transparent 1.5px) 0 0/22px 22px}
.frag{position:absolute;background:#fff;border:1px solid var(--rule);border-radius:var(--r-md);padding:14px 16px;box-shadow:0 14px 32px -18px rgba(20,40,110,.28);font-size:14px;line-height:1.35}
.frag .fl{margin:0 0 8px;font:600 12px/1.2 var(--sans);color:var(--ink-3)}
.frag .big{display:block;font:600 26px/1.1 var(--sans);font-variant-numeric:tabular-nums;margin-bottom:8px}
.frag .big small{font:500 13px var(--sans);color:var(--ink-3)}
.frag .fc{font:500 12px var(--mono);color:var(--ink-2)}
.f1{left:7%;top:9%;width:72%;z-index:1}
.f2{right:5%;top:55%;width:56%;z-index:2;display:flex;gap:10px;align-items:center}
.f3{left:11%;bottom:7%;width:46%;z-index:3}
.f3:has(> i){display:flex;gap:10px;align-items:center}
.f2 b,.f3 > span b{display:block;font:600 14px var(--sans)}
.f2 small,.f3 > span small{display:block;font-size:12px;color:var(--ink-3);margin-top:2px}
.frag i{flex:none;display:inline-block;width:18px;height:18px;border-radius:50%;vertical-align:-4px}
.frag i.ok{background:var(--blue) center/10px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.frag i.no{background:var(--fail) center/9px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 3l6 6M9 3l-6 6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.ft{width:100%;border-collapse:collapse;font-size:13px}
.ft td{padding:6px 0;border-top:1px solid var(--rule)}
.ft td.r{text-align:right;font-variant-numeric:tabular-nums;padding-right:10px}
.ft td:last-child{width:22px;text-align:right}
.fu{list-style:none;margin:0;padding:0}
.fu li{display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px solid var(--rule);font-size:13px}
.fu li b{font-weight:600}
.fu li span{margin-left:auto;color:var(--ink-2);text-align:right}
.fu .pass{color:var(--pass);font-weight:600}
.fu .fail{color:var(--fail);font-weight:600}
.log-lines time{font:500 12px var(--mono);color:var(--ink-3);min-width:40px}
.log-lines code{font-size:12px}
.frag .bar{display:block;height:6px;border-radius:99px;background:var(--tint-2);overflow:hidden}
.frag .bar span{display:block;height:100%;background:var(--blue)}
.frag .pill{margin:2px 0 8px}
.frag.f1 .pill + .fc{display:block}
@media (prefers-reduced-motion:no-preference){
  .f2{animation:drift 7s ease-in-out infinite}
  .f3{animation:drift 8s ease-in-out -3s infinite}
}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (max-width:1080px){.role-scene{display:none}}

.frag .fc{white-space:nowrap}
.f2,.f3{width:auto;min-width:40%;max-width:62%}
.f2:not(:has(> i)){display:block}

.step .what,.step .why{display:block;max-width:100%}

/* role collages: no background, no motion, real shadows, larger */
.role-scene{background:none;max-width:520px;aspect-ratio:1/0.95}
.f2,.f3{animation:none!important}
.frag{border-color:var(--rule);box-shadow:0 2px 4px rgba(11,18,32,.05),0 22px 48px -16px rgba(20,40,110,.30);padding:18px 20px;font-size:15px}
.frag .fl{font-size:13px;margin-bottom:10px}
.frag .big{font-size:30px}
.frag .fc{font-size:13px}
.ft,.fu li{font-size:14px}
.ft td,.fu li{padding:8px 0}
.f1{left:0;top:4%;width:80%}
.f2{right:0;top:52%}
.f3{left:6%;bottom:2%}
.f2 b,.f3 > span b{font-size:15px}
.f2 small,.f3 > span small{font-size:13px}
.frag i{width:20px;height:20px}
.f1{width:86%}.f2{top:43%}.f3{bottom:8%}.role-scene{aspect-ratio:1/0.85}
/* collage: stacked flow with a small fixed overlap, so tall cards never cover each other */
.role-scene{aspect-ratio:auto;display:flex;flex-direction:column;align-items:flex-start;padding:8px 0 24px}
.role-scene .frag{position:relative;left:auto;right:auto;top:auto;bottom:auto}
.role-scene .f1{width:86%}
.role-scene .f2{align-self:flex-end;margin-top:-18px;max-width:64%}
.role-scene .f3{margin-top:-14px;margin-left:8%;max-width:60%}

/* ===== v11: one common, highly legible family (Inter) for everything ===== */
:root{--serif:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;--ink-3:#545F73}
.display{font-weight:650;letter-spacing:-.032em;line-height:1.04}
.h-section{font-weight:650;letter-spacing:-.026em}
.strip-h, .flow h3, .ctl-grid h3, .checks b, .stepper b, .ledger b, .row .today, .index .name, .vs-b p, .fixes .now, .defs dt, .terms dt, .stats dt, .article h2.q, .verdict-word, .flow-end b{letter-spacing:-.018em;font-weight:600}
.terms dt, .stats dt{letter-spacing:-.03em}
.statement,.quote p,.def,.answer{font-weight:500;letter-spacing:-.015em}
.answer{font-size:22px;line-height:1.5}
.display{letter-spacing:-.022em;font-weight:650}.h-section{letter-spacing:-.018em}.terms dt, .stats dt{letter-spacing:-.022em}

/* ===== Built on ERC-3643: the stack ===== */

.layer{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:stretch;position:relative}

.assets{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px}
.asset{display:block;padding:12px 14px;border-radius:var(--r-sm);background:var(--tint);text-decoration:none;color:var(--ink)}
.asset b{display:block;font:600 16px var(--sans)}
.asset span{display:block;font-size:14px;color:var(--ink-2);margin-top:2px}
.asset:hover{background:var(--tint-2)}

.tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}

.tool{display:flex;align-items:center;gap:12px;padding:8px 0;text-decoration:none;color:var(--ink)}

@media (max-width:960px){
  
  .layer{grid-template-columns:1fr;gap:8px}
  
  .tools{grid-template-columns:1fr 1fr}
  
}
@media (max-width:560px){.assets,.tools{grid-template-columns:1fr}}

.tools{gap:16px 24px}
.tool{padding:6px 0}
.tool{display:grid;gap:6px;padding:8px 0}

.enables{list-style:none;margin:20px 0 0;padding:20px 0 0;border-top:1px solid #D3DEFB;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.enables b{display:block;font:600 15px var(--sans);color:var(--ink);margin-bottom:4px;padding-left:16px;position:relative}
.enables b::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;background:var(--blue)}
.enables span{display:block;font-size:14px;line-height:1.5;color:var(--ink-2);padding-left:16px}

@media (max-width:960px){.enables{grid-template-columns:1fr;gap:14px}}

/* ===== Built on ERC-3643: compact layered architecture ===== */

/* assets */

/* connecting layer: the one highlighted band */

/* services */

.cat{display:inline-block;font:600 12px/1 var(--sans);color:var(--ink-3);background:var(--tint);border-radius:999px;padding:6px 10px;margin-bottom:12px}

/* standard: a thin foundation bar */

/* ===== Built on: simplified four-row stack ===== */

/* news articles ported from the old site */
.news .display{font-size:clamp(30px,3.2vw,42px)}
.prose{margin-top:32px;max-width:68ch;font-size:18px;line-height:1.65}
.prose p{margin:0 0 18px}
.prose h2,.prose h3{font:650 22px/1.3 var(--sans);letter-spacing:-.01em;margin:36px 0 12px}
.prose ul,.prose ol{padding-left:22px;margin:0 0 18px}
.prose li{margin-bottom:6px}
.prose img{max-width:100%;height:auto;border-radius:var(--r-md);margin:16px 0}
.prose blockquote{margin:24px 0;padding:0 0 0 20px;border-left:3px solid var(--blue);font-size:20px;color:var(--ink)}
.prose a{word-break:break-word}
.article .crumbs{font-size:14px}

/* ===== Library: cards + sticky questions ===== */
.lib-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;align-items:start}
.lcards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.lc[hidden]{display:none}
.lc a{display:flex;flex-direction:column;height:100%;border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden;text-decoration:none;color:var(--ink);background:#fff;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.lc a:hover{border-color:var(--rule-strong);box-shadow:0 12px 28px -18px rgba(20,40,110,.35)}
.lc-img{display:block;aspect-ratio:16/8;background:var(--tint);overflow:hidden}
.lc-img img{width:100%;height:100%;object-fit:cover;display:block}

.lc-body{display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px;flex:1}
.lc-kind{font:600 12px var(--sans);color:var(--blue)}
.lc-t{font:600 17px/1.35 var(--sans);letter-spacing:-.005em;flex:1}
.lc a:hover .lc-t{color:var(--blue-press)}
.lc-meta{font-size:13px;color:var(--ink-3)}
.lib-qs{position:sticky;top:96px;max-height:calc(100vh - 120px);display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:var(--r-md);padding:20px 20px 0;background:var(--tint)}
.lib-qs ul{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--rule-strong) transparent;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 36px),transparent)}
.lib-qs-h{font:650 16px var(--sans);margin:0 0 8px}
.lib-qs ul{list-style:none;margin:0;padding:0 0 28px}
.lib-qs li[hidden]{display:none}
.lib-qs a{display:block;padding:11px 0;border-top:1px solid var(--rule);font:500 15px/1.4 var(--sans);color:var(--ink);text-decoration:none}
.lib-qs a:hover{color:var(--blue)}
@media (max-width:1080px){.lib-grid{grid-template-columns:1fr}.lib-qs{position:static;order:-1;max-height:none}.lib-qs ul{overflow:visible;-webkit-mask-image:none;mask-image:none;padding-bottom:8px}}
@media (max-width:640px){.lcards{grid-template-columns:1fr}}

/* Try it: flip switches, result hidden until Send */
.lab3{display:block}
.flip-tx{font-size:18px;line-height:1.5;margin:0 0 4px;color:var(--ink)}
.lab3 > .meta{margin:0 0 18px}
.flips{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.flips li{border-bottom:1px solid var(--rule)}
.flip{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 2px;cursor:pointer;position:relative}
.flip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.flip-t b{display:block;font:600 16px/1.35 var(--sans);color:var(--ink)}
.flip-t small{display:block;font-size:14px;color:var(--ink-3);margin-top:2px}
.flip .sw{flex:none}
.flip input:checked + .sw{background:var(--blue)}
.flip input:checked + .sw::after{transform:translateX(20px)}
.flip input:focus-visible + .sw{outline:2px solid var(--blue);outline-offset:3px}
.flip:hover .sw{background:#A9B4C4}
.flip:hover input:checked + .sw{background:var(--blue-press)}
.lab3 .lab-actions{margin-top:24px}
.check .step:not(.is-on):not(.is-skip) .why{visibility:hidden}
.verdict[data-state="idle"] .verdict-word{color:var(--ink-3)}
.musts-box .musts-src{margin-top:28px}
#lab-form.lab3{display:block;max-width:none}
#lab-form.lab3 .btn{margin-top:0}
@media (max-width:560px){.stats dt{font-size:34px}.terms.tiles dt{font-size:34px}}
@media (max-width:960px){#demo .demo-grid{grid-template-columns:minmax(0,1fr);gap:32px}}
/* Try it: tighter so the whole demo fits one screen */
#demo.doc-sec{padding:64px 0 72px}
#demo > .h-section{margin-bottom:8px}
#demo .tabs{margin:16px 0 24px}
#demo .tabs button{min-height:44px;padding:10px 16px;font-size:15px}
.flip-tx{font-size:16px;margin-bottom:2px}
.lab3 > .meta{margin-bottom:12px}
.flip{padding:9px 2px}
.flip-t b{font-size:15px}
.flip-t small{font-size:13px;margin-top:0}
.flip .sw{width:42px;height:24px}
.flip .sw::after{width:18px;height:18px}
.flip input:checked + .sw::after{transform:translateX(18px)}
.lab3 .lab-actions{margin-top:18px}
[data-check="lab"] .verdict{min-height:56px}
#demo .log{min-height:0;margin-top:10px}
@media (max-width:960px){#demo.doc-sec{padding:56px 0}}
/* Built on ERC-3643: three-layer stack */

/* ===== Revisions (team review, Oct 2026) ===== */
/* Home: trust block (status tiles + regulator references) */
.trust .terms.tiles-5{grid-template-columns:repeat(5,minmax(0,1fr));margin-top:48px}
.trust .terms.tiles-5 dt{font-size:clamp(34px,3.2vw,48px)}
.trust .terms.tiles-5 dd{max-width:none}
.trust-sub{margin:88px 0 36px}
@media (max-width:1080px){.trust .terms.tiles-5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.trust .terms.tiles-5{grid-template-columns:1fr 1fr}.trust-sub{margin-top:64px}}

/* Home: ERC-20 vs ERC-3643 table */
.cmp-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:end;margin-bottom:48px}
.cmp-head .lede{max-width:46ch}
.cmp{width:100%;border-collapse:collapse;table-layout:fixed}
.cmp thead th{font:600 15px/1.2 var(--sans);text-align:left;padding:0 24px 14px;color:var(--ink-3)}
.cmp thead th:last-child{color:var(--blue)}
.cmp thead td{width:22%}
.cmp tbody th{font:600 17px/1.4 var(--sans);text-align:left;vertical-align:top;padding:20px 24px 20px 0;color:var(--ink)}
.cmp tbody td{vertical-align:top;padding:20px 24px;font-size:17px;line-height:1.5}
.cmp tbody tr{border-top:1px solid var(--rule)}
.cmp tbody tr:last-child{border-bottom:1px solid var(--rule)}
.cmp td:nth-child(2){color:var(--ink-3)}
.cmp td:nth-child(3){color:var(--ink);background:var(--blue-wash)}
.cmp tbody tr:first-child td:nth-child(3){border-radius:var(--r-md) var(--r-md) 0 0}
.cmp tbody tr:last-child td:nth-child(3){border-radius:0 0 var(--r-md) var(--r-md)}
@media (max-width:860px){
  .cmp-head{grid-template-columns:1fr;gap:16px}
  .cmp thead{display:none}
  .cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:auto}
  .cmp tbody tr{padding:18px 0}
  .cmp tbody th{padding:0 0 10px}
  .cmp tbody td{padding:12px 14px;font-size:16px;border-radius:var(--r-sm)!important}
  .cmp tbody td::before{content:attr(data-h);display:block;font:600 13px/1.2 var(--sans);margin-bottom:4px}
  .cmp td:nth-child(2)::before{color:var(--ink-3)}
  .cmp td:nth-child(3)::before{color:var(--blue)}
  .cmp td:nth-child(3){margin-top:6px}
}

/* The Standard: ONCHAINID and compliance module */
.parts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
.part{border:1px solid var(--rule-strong);border-radius:var(--r-md);padding:30px 32px 28px;background:#fff}
.part .label{color:var(--blue);margin-bottom:10px}
.part h3{font:600 28px/1.2 var(--serif);letter-spacing:-.018em;margin:0 0 14px}
.part p{font-size:17px;line-height:1.55;color:var(--ink-2)}

@media (max-width:860px){.parts{grid-template-columns:1fr}}

/* About: three words, then the purpose in prose, one panel */
.about-panel{margin-top:40px;background:var(--tint);border-radius:var(--r-md);padding:0 40px 40px}
.verbs-words{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--rule-strong)}
.verbs-words li{margin:0;padding:32px 0 28px;font:600 clamp(28px,2.6vw,36px)/1.1 var(--sans);letter-spacing:-.02em;color:var(--blue)}
.verbs-words li + li{padding-left:32px;box-shadow:inset 1px 0 0 var(--rule-strong)}
.about-purpose{margin:32px 0 0;font-size:20px;line-height:1.6;color:var(--ink);max-width:72ch}
@media (max-width:640px){.about-panel{padding:0 24px 28px}.verbs-words{grid-template-columns:1fr}.verbs-words li{padding:20px 0}.verbs-words li + li{padding-left:0;box-shadow:inset 0 1px 0 var(--rule)}.about-purpose{font-size:18px;margin-top:24px}}

/* Home hero: longer subtitle */
.hero .display{font-size:clamp(40px,4.8vw,66px)}
.hero .lede{max-width:36ch;font-size:19px}
/* Trust tiles: link on its own line */
.terms.tiles dd .tile-link{display:block;margin-top:8px;font-size:15px;font-weight:500}

/* ===== Built on ERC-3643 (ecosystem page) ===== */

/* Header: room for the Ecosystem tab */
.brand,.site-head .head-join{flex:none}
.site-head .head-join{white-space:nowrap}
.nav a,.nav .menu-btn{padding-left:10px;padding-right:10px}
.util a[href*="github.com"]{display:none} /* GitHub stays in the footer and on Developers */
@media (max-width:1240px){.nav,.util{display:none}.burger{display:inline-flex;align-items:center}.site-head .head-join{display:none}}

/* ===== Ecosystem: layered stack, one band per layer ===== */

.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px 12px}

.t{display:block;text-decoration:none;color:var(--ink)}

@media (max-width:560px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* stack: one 4-column grid shared by every band; logo tiles always named */
.tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 20px}

@media (max-width:560px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== Ecosystem: filterable card grid ===== */

/* ecosystem: compact horizontal cards, 3 across */

/* ===== Ecosystem v3: section by section ===== */
.eco-facts{display:flex;flex-wrap:wrap;gap:12px 48px;margin:32px 0 0}
.eco-facts > div{display:flex;align-items:baseline;gap:10px}
.eco-facts dt{font:650 28px/1 var(--sans);letter-spacing:-.02em;color:var(--blue)}
.eco-facts dd{margin:0;font-size:15px;color:var(--ink-2);max-width:34ch}
.eco-head{max-width:760px;margin-bottom:48px}
.eco-k{font:600 14px/1.3 var(--sans);color:var(--blue);margin:0 0 12px}
.eco-intro{font-size:18px;line-height:1.55;color:var(--ink-2);margin:16px 0 0;max-width:60ch}
/* logo tile: the only boxed element; logo centred and sized by shape */
.lg{display:flex;align-items:center;justify-content:center;height:96px;padding:16px 20px;background:#fff;border:1px solid var(--rule);border-radius:var(--r-md)}
.lg img{display:block;width:auto;height:auto;object-fit:contain}
.lg.wide img{max-height:30px;max-width:78%}
.lg.mid img{max-height:44px;max-width:66%}
.lg.sq img{max-height:56px;max-width:56px}
.ents{list-style:none;margin:0;padding:0;display:grid;gap:40px 28px}
.ents-3{grid-template-columns:repeat(3,minmax(0,1fr))}

.ent{display:flex;flex-direction:column}
.ent-t{padding-top:18px;display:flex;flex-direction:column;flex:1}
.ent-t h3{font:600 19px/1.3 var(--sans);letter-spacing:-.01em;margin:0 0 6px}
.ent-t p{font-size:15px;line-height:1.5;color:var(--ink-2);margin:0 0 12px;flex:1}
.ent-src{font:500 14px var(--sans);text-decoration:none;align-self:flex-start}
.ent-src:hover{text-decoration:underline}

/* research: compact rows, logo left */

/* feature band: FAST */
.eco-feature{background:var(--navy);color:#fff;padding:var(--section) 0}
.feat-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:center}
.eco-feature .eco-k{color:var(--on-navy-2)}
.eco-feature .h-section{color:#fff}
.feat-p{font-size:18px;line-height:1.6;color:var(--on-navy-2);margin:20px 0 24px;max-width:46ch}
.feat-link{color:#fff;font-weight:500}
.feat-link:hover{color:var(--on-navy-2)}
.feat-logos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.feat-logos .lg{border-color:transparent;height:104px}
/* cross-chain DvP explainer */
.dvp{margin-top:72px;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px;align-items:center;padding:36px 40px;border-radius:var(--r-md);background:var(--blue-wash)}
.dvp-text h3{font:600 24px/1.25 var(--sans);letter-spacing:-.015em;margin:0 0 10px}
.dvp-text p{font-size:16px;line-height:1.55;color:var(--ink-2);margin:0 0 14px}
.dvp-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;position:relative}
.dvp-flow::before{content:"";position:absolute;left:12%;right:12%;top:50%;height:2px;background:var(--blue);opacity:.5}
.dvp-flow li{position:relative;background:#fff;border:1px solid var(--rule-strong);border-radius:var(--r-md);padding:18px 18px 16px;display:flex;flex-direction:column;gap:4px}
.dvp-flow li.dvp-mid{border:1.5px solid var(--blue)}
.dvp-chain{font:600 12px var(--sans);color:var(--blue)}
.dvp-flow b{font:600 17px/1.3 var(--sans)}
.dvp-flow li > span:last-child{font-size:14px;color:var(--ink-2);line-height:1.4}
@media (max-width:1080px){
  
  
  .feat-grid,.dvp{grid-template-columns:1fr;gap:32px}
  
}
@media (max-width:760px){
  .ents-3{grid-template-columns:1fr 1fr}
  
  .dvp{padding:24px}
  .dvp-flow{grid-template-columns:1fr;gap:12px}
  .dvp-flow::before{left:50%;right:auto;top:8%;bottom:8%;width:2px;height:auto}
  .feat-logos{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){.ents-3{grid-template-columns:1fr}.lg{height:84px}}

@media (max-width:560px){.ents-3{grid-template-columns:1fr;gap:24px}.ent{display:grid;grid-template-columns:112px minmax(0,1fr);gap:16px;align-items:start}.ent .lg{height:72px;padding:10px}.ent-t{padding-top:0}.lg.sq img{max-height:44px;max-width:44px}.lg.wide img{max-width:88%}.lg.mid img{max-width:80%}}
/* ecosystem v4: aligned facts, one repeated section layout */
.eco-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin:48px 0 0;max-width:960px}
.eco-facts > div{display:block;border-top:1px solid var(--ink);padding-top:16px}
.eco-facts dt{font:650 36px/1 var(--sans);letter-spacing:-.025em;color:var(--blue);margin:0 0 10px}
.eco-facts dd{margin:0;font-size:15px;line-height:1.45;color:var(--ink-2);max-width:28ch}
.ents-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1080px){.ents-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.eco-facts{grid-template-columns:1fr;gap:20px}}
@media (max-width:560px){.ents-4{grid-template-columns:1fr;gap:24px}}
.lg.branded{border-width:1px}.lg.branded img{filter:none}

.drawer-close{height:44px;min-width:44px}