/* ============================================================
   SELF-HOSTED FONTS - Noto Sans + Noto Serif
   Served from our own origin so no request reaches Google and no
   visitor IP is transmitted to a third party on page load. This closes
   the GDPR exposure described in privacy.html section 4 (loading fonts
   from Google's CDN transmits the visitor IP to the US without consent;
   LG Munchen I, 3 O 17493/20, 2022).

   Licence: SIL Open Font License 1.1, which expressly permits
   redistribution and self-hosting. Licence text ships alongside the
   files at assets/fonts/OFL-NotoSans.txt and OFL-NotoSerif.txt.
   Verified against https://raw.githubusercontent.com/google/fonts/main/ofl/notosans/OFL.txt

   These are VARIABLE fonts: one file covers the whole weight range, so
   `font-weight: 300 700` lets the browser interpolate any weight from a
   single download. Google serves the same file for every weight, which
   is why 16 downloaded files deduped to 4.
   ============================================================ */
@font-face{
  font-family:'Noto Sans';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('assets/fonts/notosans-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Noto Sans';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('assets/fonts/notosans-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Noto Serif';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('assets/fonts/notoserif-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Noto Serif';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('assets/fonts/notoserif-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ============================================================
   common.css - shared design tokens + nav + footer + typography
   Sampled from OCB_DESKTOP_080326.ai (Lucio) + specs PDF.
   Illustrator KERN n == n/1000 em letter-spacing.
   Font trap fix: use Noto Sans (Latin), not NotoSansSC.
   ============================================================ */
:root{
  --navy:#172b5c; --teal:#42eaca; --coral:#f86820; --paper:#f5f1ff; --sky:#8bc4e2;
  --ink:#172b5c; --muted:#5a6180; --rule:rgba(23,43,92,.12);
  --card:#ffffff; --card-tint:rgba(255,255,255,.7);
  --content:1090px; --gutter:40px; --edge:70px;
  --sans:"Noto Sans",system-ui,sans-serif; --serif:"Noto Serif",Georgia,serif;
  /* widget.css compat aliases so the ported widget re-themes */
  --bg:var(--paper); --bg-elev:#fff; --bg-sunk:rgba(23,43,92,.04);
  --ink-dim:#4A5568; --ink-faint:#6B7280;
  --line:rgba(23,43,92,.10); --line-strong:rgba(23,43,92,.18);
  --amber:var(--coral); --amber-hover:#d75818; --amber-tint:rgba(248,104,32,.10);
  --green:#2F7D4F;
  --maxw:calc(var(--content) + var(--gutter)*2 + var(--edge)*2); --pad:var(--edge);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.5}
img,svg{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:calc(var(--content) + var(--gutter)*2 + var(--edge)*2);margin:0 auto;padding:0 var(--edge)}
.col{max-width:var(--content);margin:0 auto}

/* ---------- layered mesh gradient (light hero bg) ---------- */
.bg{position:relative;background:
  radial-gradient(70% 55% at 18% 8%, #ffffff 0%, rgba(255,255,255,0) 60%),
  radial-gradient(60% 50% at 50% 42%, #7fc3e6 0%, rgba(127,195,230,0) 62%),
  radial-gradient(55% 45% at 88% 22%, #cfd8fb 0%, rgba(207,216,251,0) 65%),
  linear-gradient(180deg,#eef0ff 0%,#e6ecff 55%,#eae7fb 100%)}
.bg--band{background:
  radial-gradient(50% 60% at 15% 30%, #d7e6ff 0%, rgba(215,230,255,0) 60%),
  radial-gradient(55% 60% at 85% 70%, #e2dcff 0%, rgba(226,220,255,0) 62%),
  linear-gradient(180deg,#f5f1ff 0%,#eef0ff 100%)}

/* ---------- top nav ---------- */
.topbar{display:flex;align-items:center;gap:32px;padding:34px 0 8px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto}
.brand span{font-weight:600;font-size:17px;letter-spacing:.10em;color:var(--navy)}
nav.main{display:flex;gap:38px;margin-left:26px;flex:1 1 auto}
nav.main a{font-size:16px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--navy);font-weight:400;white-space:nowrap;transition:color .2s ease}
nav.main a:hover{color:var(--coral)}
.pill{font-size:16px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;border-radius:999px;padding:13px 30px;text-decoration:none;white-space:nowrap;transition:transform .18s ease, background .2s ease, color .2s ease;border:0;font-family:var(--sans);cursor:pointer}
.pill--ghost{background:#fff;color:var(--navy)}
.pill--ghost:hover{background:#f5f8ff}
.pill--solid{background:var(--navy);color:#fff}
.pill--solid:hover{background:#233f80}
/* The hamburger is only ever *styled* inside the 880px block, so above it the button
   fell back to its default box and painted a stray 16x6px mark beside the logo on
   every page. Hidden by default; the mobile block turns it back on with display:flex. */
.nav-toggle{display:none}

/* Nav pills run smaller than body pills. This lived only in index.html's inline
   style, so every other page fell through to the base .pill and the topbar spilled
   ~19px past the viewport at 1280. Shared here so all pages match. */
.topbar .pill{font-size:12px;padding:9px 16px;letter-spacing:.10em}

/* ---------- generic section shell ---------- */
section.band{padding:96px 0}
.eyebrow{font-size:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--coral);margin:0 0 22px}
h1{font-family:var(--serif);font-weight:400}
h2{font-family:var(--serif);font-weight:400;font-size:52px;line-height:1.08;margin:0 0 28px;color:var(--navy);max-width:22ch;letter-spacing:-.005em}
h2 .light{color:rgba(23,43,92,.35)}
h3{font-family:var(--serif);font-weight:500;color:var(--navy)}
.lede{font-size:19px;line-height:1.65;color:var(--muted);max-width:62ch;margin:0}

/* ---------- breadcrumb (used on sub-pages) ---------- */
.breadcrumb{font-size:14px;letter-spacing:.06em;color:var(--muted);margin-bottom:32px;padding-top:32px}
.breadcrumb a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.breadcrumb a:hover{color:var(--coral)}
.breadcrumb strong{color:var(--navy);font-weight:600}

/* ---------- page hero (sub-page pattern) ---------- */
.page-hero{padding:24px 0 24px}
.page-hero h1{font-size:78px;line-height:79px;margin:0 0 28px;color:var(--navy);letter-spacing:-.005em}
.page-hero .intro{font-family:var(--serif);font-weight:400;font-size:28px;line-height:36px;color:var(--muted);max-width:62ch;margin:0}

/* ---------- footer ---------- */
footer.site{background:var(--navy);color:#fff;padding:44px 0 34px;margin-top:80px}
.foot__row{display:flex;align-items:center;gap:38px;flex-wrap:wrap}
.foot__nav{display:flex;gap:34px;flex:1 1 auto;margin-left:22px}
.foot__nav a{font-size:18px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:#fff;transition:color .2s ease}
.foot__nav a:hover{color:var(--teal)}
.foot__social{display:flex;gap:16px;align-items:center}
.foot__social a{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;text-decoration:none;transition:background .2s ease}
.foot__social a:hover{background:var(--teal);color:var(--navy)}
.foot__social svg{width:15px;height:15px}
.foot__legal{font-size:14px;font-weight:300;letter-spacing:.01em;color:rgba(255,255,255,.72);padding-top:30px;display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.foot__legal a{color:rgba(255,255,255,.72);text-decoration:underline;text-underline-offset:2px}
.foot__legal a:hover{color:#fff}
.copy{font-size:16px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);white-space:nowrap}

/* ---------- article prose (blog posts) ---------- */
article.prose{padding:24px 0 96px}
article.prose .wrap-narrow{max-width:720px;margin:0 auto}
article.prose h1{font-size:56px;line-height:1.05;color:var(--navy);margin:0 0 24px;letter-spacing:-.01em}
article.prose h1 em{font-style:italic;color:var(--coral);font-weight:400}
article.prose .article-meta{display:flex;gap:14px;align-items:center;font-size:12px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-weight:600;padding:8px 0 32px}
article.prose .article-meta .sep{color:var(--rule)}
article.prose .article-meta .cat{color:var(--coral);font-weight:700}
article.prose p{font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.65;color:var(--navy);margin:0 0 24px;letter-spacing:-.005em}
article.prose p strong{font-weight:500;color:var(--navy);font-style:italic}
article.prose a{color:var(--coral);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
article.prose a:hover{color:#d75818}
article.prose h2{font-family:var(--serif);font-weight:400;font-size:32px;margin:44px 0 22px;color:var(--navy);letter-spacing:-.005em;max-width:none}
article.prose .callout{margin:40px 0;padding:32px;background:#fff;border-left:3px solid var(--coral);border-radius:0 12px 12px 0}
article.prose .callout p{font-family:var(--serif);font-style:italic;font-weight:400;font-size:24px;line-height:1.4;color:var(--navy);margin:0}
article.prose .cta-row{margin-top:44px;display:flex;gap:12px;flex-wrap:wrap}
article.prose .cta-row a{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:14px;font-weight:600;padding:14px 22px;border-radius:999px;letter-spacing:.10em;text-transform:uppercase;text-decoration:none;transition:transform .18s ease, background .2s ease}
article.prose .cta-row a.primary{background:var(--navy);color:#fff}
article.prose .cta-row a.primary:hover{background:#233f80;transform:translateY(-1px)}
article.prose .cta-row a.ghost{background:transparent;color:var(--navy);border:1px solid var(--rule)}
article.prose .cta-row a.ghost:hover{border-color:var(--coral);color:var(--coral)}
article.prose .disclaimer{margin-top:56px;padding-top:24px;border-top:1px solid var(--rule);font-family:var(--sans);font-size:13px;color:var(--muted);line-height:1.6}
article.prose .article-hero-image{margin:8px 0 32px}
article.prose .article-hero-image .frame{border:1px solid var(--rule);border-radius:14px;overflow:hidden;background:#fff}
article.prose .article-hero-image svg{display:block;width:100%;height:auto}
article.prose .article-hero-image .caption{margin-top:12px;font-size:12px;color:var(--muted);text-align:center;letter-spacing:.02em}

/* ---------- responsive ---------- */
@media (max-width:1200px){
  :root{--edge:32px}
  h2{font-size:42px}
  .page-hero h1{font-size:60px;line-height:62px}
  .page-hero .intro{font-size:22px;line-height:30px}
  article.prose h1{font-size:42px}
  article.prose p{font-size:18px}
}
@media (max-width:880px){
  :root{--edge:20px;--gutter:20px}
  .topbar{flex-wrap:wrap;gap:16px}
  nav.main{order:3;width:100%;margin:0;gap:22px;flex-wrap:wrap}
  h2{font-size:32px}
  .page-hero h1{font-size:42px;line-height:46px}
  .page-hero .intro{font-size:19px;line-height:28px}
  article.prose h1{font-size:32px}
  article.prose h2{font-size:26px}
  article.prose p{font-size:17px}
  section.band{padding:64px 0}
}
/* 881-1100px. The topbar row needs ~1020px (brand 242 + 4 links 331 + gaps + pills 243)
   but the container is only 960px at 1024, so it spilled ~107px past the viewport on
   every page. Nav drops to its own line through this band; the hamburger takes over
   below 881, and above 1100 the single row fits. Measured, not guessed. */
@media (max-width:1100px) and (min-width:881px){
  .topbar{flex-wrap:wrap;row-gap:14px}
  nav.main{order:3;width:100%;margin-left:0;gap:26px}
}

/* ============================================================
   MOBILE - per OCB_MOBILE_SPECS_080526.pdf (Lucio, 2026-08-05)
   Spec deltas from desktop, not just reflow:
     - nav collapses to a hamburger
     - TESTNET / CONNECT WALLET pills drop below the brand row
     - footer nav stacks vertically, each item with a rule, centred
     - footer social + legal + copyright centred
     - chain-flow diagram rotates from horizontal to vertical
   Margins from spec: 80 outer / 45 card inset / 90 inner.
   ============================================================ */
@media (max-width:880px){
  /* ---- nav: hamburger ---- */
  .topbar{
    flex-wrap:wrap; gap:14px; padding:26px 0 8px;
    justify-content:space-between; align-items:center;
  }
  .brand{order:1}
  .nav-toggle{
    order:2; display:flex; flex-direction:column; justify-content:center; align-items:flex-end;
    gap:6px; width:34px; height:34px; background:none; border:0; cursor:pointer; padding:0;
    flex:0 0 auto;
  }
  .nav-toggle span{
    display:block; height:2.5px; width:26px; background:var(--navy);
    border-radius:2px; transition:transform .22s ease, opacity .18s ease;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  nav.main{
    order:4; width:100%; margin:0; flex-direction:column; gap:0;
    max-height:0; overflow:hidden; transition:max-height .28s ease;
  }
  nav.main[data-open="true"]{max-height:320px}
  nav.main a{
    padding:14px 0; border-bottom:1px solid var(--rule); font-size:15px; width:100%;
  }

  /* Pills share one row below the brand, per spec p.1. Sized so both fit a
     375px viewport without wrapping - the earlier full-width stack ate half
     the first screen before the headline appeared. */
  .topbar .pill{order:3;flex:0 1 auto;font-size:12px;padding:9px 16px;letter-spacing:.10em}
  .topbar{row-gap:12px}
  .topbar .brand{flex:1 1 auto;min-width:0}
  .topbar .brand span{font-size:14px;letter-spacing:.08em}

  /* ---- footer: stacked, centred ---- */
  .foot__row{flex-direction:column; align-items:center; gap:26px; text-align:center}
  /* max-width:min() + auto margins so this never exceeds the container.
     A fixed 280px overflowed by 2px at a 320px viewport (S8 gate). */
  .foot__nav{
    flex-direction:column; gap:0; margin:0 auto; align-items:stretch;
    width:100%; max-width:min(280px, 100%);
  }
  .foot__nav a{
    padding:12px 0; border-bottom:1px solid rgba(255,255,255,.22);
    text-align:center; font-size:16px;
  }
  .foot__nav a:first-child{border-top:1px solid rgba(255,255,255,.22)}
  .foot__social{justify-content:center}
  .foot__legal{flex-direction:column; align-items:center; text-align:center; gap:16px}
  .foot__legal p{max-width:46ch}

  /* ---- type scale ---- */
  .page-hero h1{font-size:38px;line-height:42px}
  .page-hero .intro{font-size:18px;line-height:27px}
  article.prose h1{font-size:30px;line-height:1.15}
}

/* ---- back-to-top arrow (mobile spec shows it at the foot of every screen) ---- */
.to-top{
  display:none; margin:28px auto 0; width:44px; height:44px; border-radius:50%;
  align-items:center; justify-content:center; background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.28); color:var(--teal); text-decoration:none;
  transition:background .2s ease;
}
.to-top:hover{background:rgba(255,255,255,.18)}
@media (max-width:880px){ .to-top{display:flex} }

/* ---------- code blocks ----------
   Needed under every docs outcome (front door, migration, or split audiences), so
   it is safe to build while the two-docs-sites question is with Ilan.
   Wide code must scroll inside its own box: the page body must never scroll
   sideways, which is what the 195/195 width sweep is protecting. */
:root{ --mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; }

code{
  font-family:var(--mono); font-size:.90em;
  background:#eef0fa; color:#20265c;
  padding:.14em .40em; border-radius:4px;
  overflow-wrap:anywhere;
}
pre{
  margin:0 0 22px; background:var(--navy); color:#e8ecff;
  border-radius:10px; padding:18px 20px;
  overflow-x:auto; max-width:100%;
  font-family:var(--mono); font-size:13.5px; line-height:1.65;
  -webkit-overflow-scrolling:touch;
}
pre code{
  background:none; color:inherit; padding:0; border-radius:0;
  font-size:inherit; white-space:pre; overflow-wrap:normal;
}
/* Optional caption strip. Markup:
   <div class="codeblock"><div class="codeblock__name"><b>file.ts</b></div><pre>...</pre></div> */
.codeblock{margin:0 0 22px; border-radius:10px; overflow:hidden; max-width:100%}
.codeblock__name{
  background:#161c56; color:#aab4e8;
  font-family:var(--mono); font-size:12px; letter-spacing:.04em;
  padding:9px 20px; border-bottom:1px solid rgba(255,255,255,.10);
  display:flex; justify-content:space-between; gap:14px;
}
.codeblock__name b{color:#fff; font-weight:600}
.codeblock pre{margin:0; border-radius:0}
/* Terminal blocks read better with a muted, unselectable prompt so that
   copying the line does not drag a stray "$" into the user's shell. */
pre.term{background:#0b1030}
pre.term .p{color:#6f7ab5; user-select:none}
@media (max-width:880px){
  pre{font-size:12.5px; padding:15px 16px; border-radius:8px}
  .codeblock__name{padding:8px 16px; font-size:11.5px}
}

/* ---------- legal instrument typography ----------
   These pages are legal instruments and should read as such: numbered clauses in a
   left gutter, a tighter measure, sober links, no marketing accents. The earlier
   treatment read as a friendly explainer, which is the wrong register for a document
   a counterparty's counsel will read. */
.legal-doc{color:#1b2242}
.legal-doc .doc-head{border-bottom:2px solid var(--navy);padding-bottom:18px;margin:0 0 30px}
.legal-doc .doc-title{font-family:var(--serif);font-size:34px;line-height:1.15;margin:0 0 12px;color:var(--navy)}
.legal-doc .doc-meta{display:flex;flex-wrap:wrap;gap:6px 28px;font-size:13px;color:#5b6480;margin:0}
.legal-doc .doc-meta span{white-space:nowrap}
.legal-doc .doc-meta strong{color:var(--navy);font-weight:600}
.legal-doc .recital{font-size:15px;line-height:1.7;color:#3a4266;margin:0 0 26px;max-width:78ch}
.legal-doc h2{
  font-family:var(--sans);font-size:15px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--navy);margin:38px 0 14px;max-width:none;
  padding-bottom:7px;border-bottom:1px solid var(--rule);
}
.legal-doc h2 .anchor{font-weight:400}
/* clause = number in the gutter, text in the column. The grid keeps sub-clause text
   aligned under itself rather than wrapping back beneath the number. */
.legal-doc .cl{display:grid;grid-template-columns:52px 1fr;gap:0 12px;margin:0 0 11px;max-width:82ch}
.legal-doc .cl > .n{font-size:14.5px;line-height:1.7;color:#6b7395;font-variant-numeric:tabular-nums}
/* min-width:0 is load-bearing. Grid items default to min-width:auto, so a wide
   table inside a clause forces the whole column open and pushes the page
   sideways: 178px of overflow at 320px before this line. */
.legal-doc .cl{min-width:0}
.legal-doc .cl > div{font-size:14.5px;line-height:1.7;color:#2b3357;min-width:0}
.legal-doc .cl > div > table{max-width:100%}
.legal-doc .cl ul{margin:8px 0 4px;padding-left:20px}
.legal-doc .cl li{font-size:14.5px;line-height:1.65;color:#2b3357;margin-bottom:6px}
.legal-doc .cl strong{color:var(--navy);font-weight:600}
.legal-doc a{color:var(--navy);text-decoration:underline;text-underline-offset:2px}
.legal-doc a:hover{color:var(--coral)}
.legal-doc .deftbl,.legal-doc .tbl{width:100%;border-collapse:collapse;margin:6px 0 20px;max-width:82ch}
.legal-doc .deftbl th,.legal-doc .tbl th{
  text-align:left;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:#5b6480;padding:9px 12px;border-bottom:1.5px solid var(--navy);font-weight:700;
}
.legal-doc .deftbl td,.legal-doc .tbl td{
  font-size:14px;line-height:1.6;color:#2b3357;padding:11px 12px;
  border-bottom:1px solid var(--rule);vertical-align:top;
}
.legal-doc .deftbl td strong,.legal-doc .tbl td strong{color:var(--navy)}
.legal-doc .legal-toc{background:#fff;border:1px solid var(--rule);border-radius:6px;padding:22px 26px;margin:0 0 34px;max-width:82ch}
.legal-doc .legal-toc h2{border:0;margin:0 0 12px;padding:0;font-size:12px;letter-spacing:.10em}
.legal-doc .legal-toc ol{margin:0;padding-left:20px;columns:2;column-gap:34px}
.legal-doc .legal-toc li{font-size:13.5px;line-height:1.85;break-inside:avoid}
.legal-doc .legal-toc a{color:#2b3357;text-decoration:none}
.legal-doc .legal-toc a:hover{text-decoration:underline}
.legal-doc .flag{
  border-left:3px solid var(--coral);background:#fff;padding:14px 18px;margin:6px 0 18px;
  max-width:82ch;font-size:13.5px;line-height:1.6;color:#3a4266;
}
.legal-doc .flag strong{color:var(--navy)}
.legal-doc .exec{margin:40px 0 0;padding:22px 0 0;border-top:2px solid var(--navy);max-width:82ch;font-size:13.5px;line-height:1.7;color:#3a4266}
@media (max-width:880px){
  .legal-doc .doc-title{font-size:27px}
  .legal-doc .legal-toc ol{columns:1}
  .legal-doc .cl{grid-template-columns:42px 1fr;gap:0 8px}
  .legal-doc .deftbl,.legal-doc .tbl{display:block;overflow-x:auto}
}

/* ---------- cookie consent banner ----------
   Accept and Reject are deliberately the same size, the same shape and the same
   font weight. A dimmed or ghosted Reject beside a bright Accept is the exact
   dark pattern regulators cite, and consent obtained that way is not consent.
   Both controls clear 4.5:1 against their own background in every state:
   navy #172b5c on white and white on navy are both ~13:1. */
.consent{
  position:fixed; left:0; right:0; bottom:0; z-index:9999;
  background:#fff; border-top:1px solid var(--rule);
  box-shadow:0 -8px 30px rgba(23,43,92,.13);
  padding:18px var(--edge);
}
.consent__inner{
  max-width:1090px; margin:0 auto;
  display:flex; align-items:center; gap:26px; flex-wrap:wrap;
}
.consent__text{
  margin:0; flex:1 1 380px; min-width:0;
  font-size:15px; line-height:1.6; color:var(--navy);
}
.consent__text a{color:var(--coral);text-decoration:underline;text-underline-offset:2px}
.consent__actions{display:flex; gap:12px; flex:0 0 auto}
.consent__btn{
  font-family:var(--sans); font-size:13px; font-weight:600;
  letter-spacing:.10em; text-transform:uppercase;
  padding:12px 26px; border-radius:999px; cursor:pointer;
  min-width:132px; text-align:center;
  transition:background .18s ease, color .18s ease;
}
.consent__btn--accept{background:var(--navy); color:#fff; border:2px solid var(--navy)}
.consent__btn--accept:hover{background:#233f80; border-color:#233f80; color:#fff}
.consent__btn--reject{background:#fff; color:var(--navy); border:2px solid var(--navy)}
.consent__btn--reject:hover{background:#eef1ff; color:var(--navy)}
.consent__btn:focus-visible{outline:3px solid var(--coral); outline-offset:2px}
@media (max-width:600px){
  .consent__inner{gap:14px}
  .consent__actions{width:100%; gap:10px}
  .consent__btn{flex:1 1 0; min-width:0; padding:13px 10px}
}

/* A single long word in a page heading cannot wrap, so at the narrowest widths it
   pushes the whole page sideways. "Documentation" overflowed its 240px column by
   37px at a 280px viewport. Allowing a break inside the word is preferable to a
   horizontally scrolling page, and applies to any long heading rather than just
   the one that happened to surface it. */
@media (max-width:400px){
  .page-hero h1, article.prose h1, .doc-title{overflow-wrap:anywhere}
}

/* Narrow-viewport overflow. Three unrelated causes, one band:
     - a bare URL (github.com/kofif1/onchainbridges-security) is one unbreakable
       token 367px wide, so it pushed team.html 107px past a 280px viewport
     - the privacy processor table cannot compress below its column content
     - teleport stat-cards had no min-width:0, so flex refused to shrink them
   Measured before/after at 280/320/375: 12-107px overflow -> 0 on all three. */
@media (max-width:880px){
  .prose a, article.prose a, p.body a, .legal-body a{overflow-wrap:anywhere;word-break:break-word}
  .legal-body table, article.prose table{display:block;width:100%;overflow-x:auto}
  .stat-card{min-width:0}
  .stat-card > *{overflow-wrap:anywhere}
}

/* ============================================================
   MOBILE BLOCKER FIX - concierge input collapsed to 24px
   (S8 mobile gate, 2026-08-06, measured at a verified 375px viewport)

   Cause: widget.css sets `.send-btn { width:100% }` inside its own mobile
   query. That rule was written for the older `.chat-row` container but is
   not scoped to it, so it leaks into `.concierge-input`, which is a
   flex row with nowrap. A 100%-width sibling starves the input: it
   collapsed to 24px while the button took 287 of 333px. The placeholder
   was still set, so the field looked functional and could not be typed in,
   with a full-width Send button beside it. Worse than no widget.

   Fix: let the row wrap, give the input its own full-width line, and size
   the button to content aligned right - which is what Lucio's mobile comp
   (p.1) actually draws: prompt text on its own, SEND as a pill bottom-right.
   common.css loads after widget.css, so these win without editing the
   ported widget file.
   ============================================================ */
@media (max-width:880px){
  #concierge .concierge-input{
    flex-wrap:wrap; gap:10px; padding:12px 12px 14px;
  }
  #concierge .chat-input{
    flex:1 1 100%; min-width:0; width:100%;
    padding:14px 14px; font-size:16px;   /* 16px avoids iOS zoom-on-focus */
  }
  #concierge .send-btn{
    width:auto; margin-left:auto; flex:0 0 auto;
    padding:13px 30px; justify-content:center;
  }
}

/* ============================================================
   LEGAL DOCUMENT STRUCTURE (S8 brief, 2026-08-07)
   Anchored sections so a single clause can be linked to directly,
   a contents list, and cross-document navigation.
   ============================================================ */
.legal-toc{
  background:#fff;border:1px solid var(--rule);border-radius:8px;
  padding:26px 30px;margin:0 0 44px;max-width:70ch;
}
.legal-toc h2{
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0 0 16px;max-width:none;
}
.legal-toc ol{margin:0;padding-left:20px;counter-reset:toc}
.legal-toc li{font-size:16px;line-height:1.9;color:var(--muted);margin:0}
.legal-toc a{color:var(--navy);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s ease,color .15s ease}
.legal-toc a:hover{color:var(--coral);border-bottom-color:var(--coral)}

/* anchored headings: hash appears on hover, always reachable by keyboard */
.legal-body h2[id]{scroll-margin-top:24px;position:relative}
.legal-body h2[id] .anchor{
  position:absolute;left:-28px;top:50%;transform:translateY(-50%);
  font-family:var(--sans);font-size:20px;font-weight:400;color:var(--rule);
  text-decoration:none;opacity:0;transition:opacity .15s ease,color .15s ease;
}
.legal-body h2[id]:hover .anchor,
.legal-body h2[id] .anchor:focus{opacity:1;color:var(--coral)}
@media (max-width:1200px){
  .legal-body h2[id] .anchor{display:none}
}

/* cross-links between the three legal documents */
.legal-siblings{
  display:flex;gap:12px;flex-wrap:wrap;margin:56px 0 0;padding-top:32px;
  border-top:1px solid var(--rule);max-width:70ch;
}
.legal-siblings span{
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  font-weight:600;width:100%;margin-bottom:4px;
}
.legal-siblings a{
  font-size:15px;font-weight:500;color:var(--navy);text-decoration:none;
  border:1px solid var(--rule);border-radius:999px;padding:10px 20px;
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.legal-siblings a:hover{border-color:var(--coral);color:var(--coral);background:var(--amber-tint)}
.legal-siblings a[aria-current="page"]{background:var(--navy);color:#fff;border-color:var(--navy)}