/* ============================================================
   Zikomo marketing system  ·  security printing
   A bank's risk register is an instrument of record, so the page
   borrows the language of the banknote and the bond certificate:
   engraved guilloche, ledger hairlines, folio labels, a plate.
   Palette: GUUT white and royal blue. Seal red only for what is wrong.
   Type: IBM Plex, self-hosted (the app uses Plex too, so a product
   screenshot on this site is the same voice). Serif for the display
   line, Sans for reading, Mono for figures and labels.
   ============================================================ */
@font-face{font-family:"Plex Sans";src:url(fonts/PlexSans-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Sans";src:url(fonts/PlexSans-400i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Plex Sans";src:url(fonts/PlexSans-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Sans";src:url(fonts/PlexSans-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Serif";src:url(fonts/PlexSerif-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Serif";src:url(fonts/PlexSerif-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Serif";src:url(fonts/PlexSerif-400i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(fonts/PlexMono-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(fonts/PlexMono-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
:root{
  --paper:#F7F9FD; --paper-2:#EBF0F9; --paper-3:#DCE5F3;
  --ink:#0A1424; --ink-2:#36435D; --ink-3:#5D6C86;
  --rule:#C9D4E6; --rule-2:#A9B8D2;
  --navy:#12408F; --navy-d:#0B2C68; --navy-x:#071A3D; --navy-l:#D7E4FA;
  --seal:#B3202C; --seal-l:#F3DADC;
  --amber:#8A5A00;
  --on-dark:#DBE5F5; --on-dark-2:#9CB0D2; --on-dark-3:#8496BC;
  --sans:"Plex Sans","IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Plex Serif","IBM Plex Serif",Georgia,"Times New Roman",serif;
  --mono:"Plex Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --maxw:1280px; --gut:28px;
  --s1:6px; --s2:12px; --s3:20px; --s4:34px; --s5:56px; --s6:96px;
  --ease:cubic-bezier(.22,.8,.3,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;
     line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:var(--navy);text-decoration:none}
a:hover{color:var(--navy-d)}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.dark :focus-visible{outline-color:var(--on-dark)}
::selection{background:var(--navy);color:var(--paper)}
html{caret-color:var(--navy);scrollbar-color:var(--rule-2) var(--paper);accent-color:var(--navy)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:var(--rule-2);border:3px solid var(--paper);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--ink-3)}
a{text-underline-offset:.18em;text-decoration-thickness:1px}
p a,li a,td a,.doc a{text-decoration:underline;text-decoration-color:var(--rule-2)}
p a:hover,li a:hover,td a:hover,.doc a:hover{text-decoration-color:currentColor}
body,table,.kv,.ledger,.inc{font-variant-numeric:tabular-nums}
p{margin:0 0 var(--s3)}
p:last-child{margin-bottom:0}
h1,h2,h3,h4{margin:0;font-weight:600;color:var(--ink);text-wrap:balance;letter-spacing:-.015em}
h1{font-family:var(--serif);font-size:clamp(40px,5.9vw,80px);line-height:1;font-weight:500;letter-spacing:-.025em}
h2{font-family:var(--serif);font-size:clamp(30px,3.6vw,50px);line-height:1.06;font-weight:500;letter-spacing:-.02em}
h3{font-size:21px;line-height:1.3;font-weight:600}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.lbl{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.dark .lbl{color:var(--on-dark-3)}
.lead{font-size:clamp(18px,1.5vw,20px);line-height:1.5;color:var(--ink-2);max-width:52ch}
.dark .lead{color:var(--on-dark-2)}
.muted{color:var(--ink-3);font-size:14px}
.dark .muted{color:var(--on-dark-3)}
.seal{color:var(--seal)}
.wide{font-weight:600}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
/* ledger sections: a folio column and a content column, ruled top */
.sec{padding-block:var(--s6)}
.sec.tight{padding-block:var(--s5)}
.folio{display:grid;grid-template-columns:172px minmax(0,1fr);gap:var(--s4);border-top:1px solid var(--rule-2);padding-top:var(--s3)}
.folio > .f{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);line-height:1.6}
.folio > .f b{display:block;color:var(--ink);font-weight:600;font-size:14px;letter-spacing:.1em}
.dark .folio{border-top-color:rgba(219,229,245,.25)}
.dark .folio > .f{color:var(--on-dark-3)}
.dark .folio > .f b{color:var(--on-dark)}
.dark{background:var(--navy-x);color:var(--on-dark)}
.dark h1,.dark h2,.dark h3{color:#fff}
.dark p{color:var(--on-dark-2)}
.dark a{color:#CEDCF8}

/* ---------- annotation bar ---------- */
.alt-note{background:var(--navy-x);color:var(--on-dark);font-family:var(--mono);font-size:14px;line-height:1.6;
  padding:12px var(--gut);border-bottom:1px solid rgba(219,229,245,.18)}
.alt-note b{color:#fff;font-weight:600}
.alt-note .tag{display:inline-block;background:var(--navy-l);color:var(--navy-x);padding:2px 8px;margin-right:10px;
  letter-spacing:.14em;text-transform:uppercase;font-size:11.5px;font-weight:600}

/* ---------- masthead ---------- */
.mast{position:sticky;top:0;z-index:50;background:rgba(247,249,253,.88);backdrop-filter:blur(12px) saturate(140%);
  border-bottom:1px solid var(--rule)}
.mast .in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);height:68px;display:flex;align-items:center;gap:var(--s4)}
.logo{display:flex;align-items:center;gap:12px;color:var(--ink)}
.logo .mk{width:34px;height:34px;color:var(--navy);flex:0 0 34px}
/* The real logo, supplied 25 Sep 2026. Replaces the rosette-plus-wordmark
   lockup in the masthead and footer; the rosette stays as the decorative
   device it was drawn to be (the seal, the plates, the section marks). */
/* The masthead bar is 68px. The original lockup — 34px rosette beside a 19px
   wordmark over an 11.5px strapline — stood about 39px in it. Replacing that
   with a 30px logo ABOVE the strapline made it ~51px, three quarters of the
   bar, which is what crowding looks like.

   So the masthead carries the logo alone, at a height that leaves the bar
   breathing. That is also how the launch brief uses it: the mark on its own,
   no strapline. The attribution moves to the footer, where there is room for
   it and where a reader actually looks for who made something. */
.logo .lockup{display:block;line-height:0}
.logo img{height:26px;width:auto;display:block}
.logo .lockup .by{display:none}
@media(max-width:640px){.logo img{height:22px}}

/* The footer keeps the full lockup: logo, then attribution beneath it. */
.foot .logo .lockup .by{display:block;margin-top:7px;line-height:1.3}
.foot .logo img{height:30px}
.logo .wd{font-family:var(--serif);font-weight:600;font-size:19px;letter-spacing:.04em;text-transform:uppercase;line-height:1;display:block}
.logo .by{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);display:block;margin-top:4px}
.mnav{margin-left:auto;display:flex;align-items:center;gap:var(--s3)}
.mnav a:not(.btn){font-size:14px;font-weight:500;color:var(--ink-2)}
.mnav a:not(.btn):hover{color:var(--ink)}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--rule-2);color:var(--ink);padding:8px 10px;cursor:pointer;border-radius:2px;width:44px;height:40px;position:relative}
.burger svg{transition:opacity .18s var(--ease),transform .22s var(--ease)}
.burger .x{position:absolute;inset:0;margin:auto;opacity:0;transform:rotate(-45deg) scale(.8)}
.burger[aria-expanded="true"] .bars{opacity:0;transform:scale(.8)}
.burger[aria-expanded="true"] .x{opacity:1;transform:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:14px;font-weight:600;
  padding:13px 22px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:2px;
  cursor:pointer;line-height:1.1;letter-spacing:.01em;transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease)}
.btn:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.o{background:transparent;color:var(--ink)}
.btn.o:hover{background:var(--paper-2);color:var(--ink);border-color:var(--ink)}
.btn.o:hover .ar{color:var(--ink)}
.dark .btn{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.dark .btn:hover{background:#fff;border-color:#fff}
.dark .btn.o{background:transparent;color:var(--on-dark);border-color:rgba(219,229,245,.4)}
.dark .btn.o:hover{border-color:#fff;color:#fff}
.btn.lg{padding:16px 28px;font-size:17px}
.btn .ar{font-family:var(--mono);transition:transform .18s var(--ease)}
.btn:hover .ar{transform:translateX(3px)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding-block:var(--s5) var(--s6)}
.hero .g{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s5);align-items:center}
.hero h1{margin-bottom:var(--s4)}
.hero h1 .x{color:var(--navy);font-style:italic;font-weight:400}
.hero .cta{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s4)}
.hero .fine{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--rule);font-size:14px;color:var(--ink-3);line-height:1.6;max-width:56ch}
.hero .fine .mono{color:var(--ink-2)}
.sealbox{position:relative;aspect-ratio:1;max-width:520px;width:100%;margin-inline:auto;color:var(--navy)}
.sealbox .ros{position:absolute;inset:0;width:100%;height:100%;animation:spin 240s linear infinite}
.sealbox .ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 180s linear infinite reverse}
.sealbox .ring text{font-family:var(--mono);font-size:14px;letter-spacing:.32em;fill:var(--ink);font-weight:500}
.sealbox .core{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}
.sealbox .core .n{font-family:var(--serif);font-weight:600;font-size:clamp(64px,11vw,108px);line-height:.9;letter-spacing:-.03em;color:var(--ink)}
.sealbox .core .l{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);margin-top:10px;background:var(--paper);padding:3px 8px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- the plate: a fragment of the record, as hero exhibit ---------- */
.plate{position:relative;background:#fff;border:1px solid var(--ink);outline:1px solid var(--rule-2);outline-offset:5px;
  max-width:560px;width:100%;margin-inline:auto;overflow:hidden}
.plate .ph2{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 18px;
  border-bottom:1px solid var(--ink);font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.plate .ph2 b{color:var(--ink);font-weight:500}
.plate .pb{padding:18px 18px 20px}
.plate .pt{font-family:var(--serif);font-size:clamp(21px,2vw,26px);line-height:1.3;letter-spacing:-.015em;color:var(--ink);margin:0 0 14px}
.plate .pr{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:14px;padding:9px 0;border-top:1px solid var(--rule);font-size:14px;align-items:baseline}
.plate .pr > span:first-child{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.plate .pr > span:last-child{color:var(--ink);text-align:right}
.plate .pr .mono{font-family:var(--mono);font-size:14px}
.plate .pr .seal{color:var(--seal);font-weight:500}
.plate .pr .amb{color:var(--amber)}
.plate .pr .gap{display:inline-block;width:38px;height:11px;vertical-align:-1px;background:repeating-linear-gradient(135deg,var(--seal) 0 2px,var(--seal-l) 2px 6px);border:1px solid var(--seal)}
.plate .pf{position:relative;z-index:1;border-top:1px solid var(--ink);padding:12px 18px;display:flex;justify-content:space-between;gap:12px;align-items:center;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--ink-3);background:var(--paper)}
.plate .pf b{color:var(--navy);font-weight:500}
.plate .pf .st{border:1.5px solid var(--seal);color:var(--seal);padding:3px 7px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;transform:rotate(-2deg);white-space:nowrap;flex:0 0 auto}
.plate .pf .ok{border:1.5px solid var(--navy);color:var(--navy);padding:3px 7px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;white-space:nowrap;flex:0 0 auto}
.plate .ros{position:absolute;right:-14%;top:-16%;width:46%;aspect-ratio:1;color:var(--navy);opacity:.12;pointer-events:none;z-index:0}
.plate .ph2,.plate .pb{position:relative;z-index:1}
.plate .ph2{background:var(--paper)}
.plate .sigl{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:6px}
.plate .sigl div{border-bottom:1px solid var(--ink);padding:26px 0 5px;font-family:var(--mono);font-size:11.5px;color:var(--ink-3);letter-spacing:.08em}
.plate .sigl div.no{border-bottom-style:dashed;border-bottom-color:var(--rule-2)}
.plate .sigl div i{font-style:normal;font-family:var(--serif);font-size:19px;color:var(--navy);display:block;margin-bottom:2px;font-style:italic}
.plate .sigl div b{display:block;color:var(--ink);font-weight:500;font-family:var(--sans);font-size:13px;letter-spacing:0;text-transform:none;margin-top:6px}
.plate .sigl div em{display:block;font-style:normal;color:var(--ink-3);font-size:11.5px;margin-top:2px}

/* the process, as one ruled line */
.procline{display:flex;flex-wrap:wrap;align-items:baseline;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.procline a{display:flex;align-items:baseline;gap:10px;padding:16px 26px 16px 0;margin-right:26px;color:var(--ink);font-family:var(--serif);font-size:clamp(20px,2vw,26px);border-right:1px solid var(--rule)}
.procline a span{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:var(--navy)}
.procline a:hover{color:var(--navy)}
.procline a.more-link{margin-left:auto;margin-right:0;border-right:0;font-family:var(--sans);font-size:14px;font-weight:500;color:var(--navy);padding-right:0}
@media(max-width:900px){.procline a{padding:12px 16px 12px 0;margin-right:16px}.procline a.more-link{width:100%;margin-left:0;border-top:1px solid var(--rule);padding:12px 0}}

.note .badge{display:inline-block;vertical-align:middle;margin-left:10px;border:1.5px solid var(--navy);color:var(--navy);font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;padding:2px 7px;font-weight:500}
.plate.toc .pr{grid-template-columns:34px minmax(0,1fr)}
.plate.toc .pr > span:last-child{text-align:left}

/* ---------- security thread divider ---------- */
.thread{width:100%;height:36px;color:var(--navy);opacity:.6}
.dark .thread{color:var(--on-dark-2);opacity:.45}

/* ---------- denominations ledger ---------- */
.ledger{display:grid;grid-template-columns:1.1fr .9fr 1.4fr 1.25fr .9fr;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.ledger > div{padding:var(--s3) var(--s3) var(--s3) 0;border-right:1px solid var(--rule);margin-right:var(--s3)}
.ledger > div:last-child{border-right:0;margin-right:0}
.ledger .v{font-family:var(--serif);font-size:clamp(44px,4.8vw,64px);line-height:1;letter-spacing:-.03em;color:var(--ink);font-weight:500}
.ledger .v small{font-family:var(--mono);font-size:.34em;letter-spacing:0;color:var(--ink-3);margin-left:8px;font-weight:400}
.ledger .k{font-size:14px;color:var(--ink-2);margin-top:12px;line-height:1.4;max-width:26ch}
.ledger .t{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}

/* ---------- exhibit: the spreadsheet ---------- */
.exhibit{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s5);align-items:start}
.exhibit .stick{position:sticky;top:92px}
.big{font-family:var(--serif);font-size:clamp(88px,13vw,168px);line-height:.85;letter-spacing:-.05em;color:var(--seal);font-weight:500;margin-top:var(--s3)}
.big small{font-family:var(--mono);font-size:.26em;letter-spacing:-.02em;color:var(--ink-3);margin-left:6px;font-weight:400}
.ruler{display:flex;gap:0;align-items:flex-end;height:22px;border-bottom:1px solid var(--ink);margin:var(--s3) 0 6px}
.ruler i{flex:1;border-left:1px solid var(--rule-2);height:10px}
.ruler i:nth-child(8n+1){height:18px;border-left-color:var(--ink)}
.rowmaps{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.rowmap{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.rowmap i{display:block;aspect-ratio:1.4;background:var(--paper-3);border:1px solid var(--rule-2)}
.rowmap i.ov{background:repeating-linear-gradient(135deg,var(--seal) 0 2px,var(--seal-l) 2px 6px);border-color:var(--seal)}
.rowmap i.na{background:transparent;border:1.5px dashed var(--amber)}
.rowcap{margin-top:12px;font-size:14px;color:var(--ink-2);line-height:1.45}
.rowcap b{display:block;font-family:var(--mono);font-size:21px;letter-spacing:-.03em;color:var(--ink);margin-bottom:4px;font-weight:500}
.rowcap b.seal{color:var(--seal)}
.rowcap b.amb{color:var(--amber)}
.legend{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s3);font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--ink-3)}
.legend span{display:inline-flex;align-items:center;gap:8px}
.legend i{width:16px;height:11px;display:inline-block;border:1px solid var(--rule-2);background:var(--paper-3)}
.legend i.ov{background:repeating-linear-gradient(135deg,var(--seal) 0 2px,var(--seal-l) 2px 6px);border-color:var(--seal)}
.legend i.na{background:transparent;border:1.5px dashed var(--amber)}
.stamp{display:inline-block;border:2px solid var(--seal);color:var(--seal);font-family:var(--mono);font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;padding:6px 10px;transform:rotate(-3deg);font-weight:600;margin-bottom:var(--s3)}

/* ---------- five stages: a stepped ledger ---------- */
.stages{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));row-gap:0}
.stage{border-top:1px solid var(--ink);padding:var(--s3) var(--s3) var(--s4) 0;position:relative}
.stage:nth-child(1){grid-column:1 / -1}
.stage:nth-child(2){grid-column:2 / -1}
.stage:nth-child(3){grid-column:3 / -1}
.stage:nth-child(4){grid-column:4 / -1}
.stage:nth-child(5){grid-column:5 / -1}
.stage .n{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;color:var(--navy);display:block;margin-bottom:10px}
.stage h3{margin-bottom:8px;font-weight:600;font-size:19px;letter-spacing:-.01em}
.stage p{font-size:14px;color:var(--ink-2);max-width:38ch;margin:0}
.stage .sub{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);letter-spacing:.06em;margin-top:10px;display:block}
.sig{margin-top:var(--s5);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s4);border-top:1px solid var(--ink);padding-top:var(--s3)}
.sig .line{border-bottom:1px solid var(--ink);padding:38px 0 6px;font-family:var(--mono);font-size:14px;color:var(--ink-3);letter-spacing:.06em}
.sig .line.no{border-bottom-style:dashed;border-bottom-color:var(--rule-2)}
.sig .who{font-size:14px;color:var(--ink-2);margin-top:10px}
.sig .who b{color:var(--ink);font-weight:600}
.sig .clause{grid-column:1 / -1;font-size:14px;color:var(--ink-2);max-width:70ch}

/* ---------- specimen: questionnaire writes the register ---------- */
.spec{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s5);align-items:start}
.qa{position:relative;background:#fff;color:var(--ink);border:1px solid var(--rule-2);overflow:hidden}
.qa .hd{padding:12px 18px;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;gap:12px;align-items:center;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);background:var(--paper)}
.qa .q{padding:20px 18px 8px}
.qa .q .ref{font-family:var(--mono);font-size:14px;color:var(--navy);letter-spacing:.06em;margin-bottom:8px}
.qa .q p{font-size:17px;line-height:1.4;color:var(--ink);margin:0}
.opts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;padding:14px 18px 18px}
.opt{border:1px solid var(--rule-2);padding:10px 8px;font-size:14px;text-align:center;color:var(--ink-2);font-weight:500;background:#fff}
.opt.on{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}
.arrow{display:flex;align-items:center;gap:10px;padding:14px 18px;border-top:1px dashed var(--rule-2);font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-2);background:var(--paper)}
.arrow .dot{width:9px;height:9px;border-radius:50%;background:var(--navy);box-shadow:0 0 0 3px var(--navy-l)}
.queue{position:relative;background:#fff;color:var(--ink);border:1px solid var(--rule-2);overflow:hidden}
.queue .hd{padding:12px 18px;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;gap:12px;align-items:center;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);background:var(--paper)}
.queue .hd .st{color:var(--amber);font-weight:600}
.queue .body{padding:22px 18px}
.queue blockquote{margin:0 0 var(--s3);font-size:clamp(21px,2.2vw,26px);line-height:1.34;letter-spacing:-.02em;font-weight:600;color:var(--ink)}
.queue blockquote:before{content:"\201C"}
.queue blockquote:after{content:"\201D"}
.kv{width:100%;border-collapse:collapse;font-size:14px}
.kv td{padding:9px 0;border-top:1px solid var(--rule);color:var(--ink-2)}
.kv td:last-child{text-align:right;font-family:var(--mono);color:var(--ink);font-weight:500}
.kv .p1{display:inline-block;background:var(--seal);color:#fff;padding:2px 8px;font-size:11.5px;letter-spacing:.1em}
.queue .act{display:flex;gap:8px;padding:14px 18px;border-top:1px solid var(--rule);background:var(--paper);flex-wrap:wrap}
.queue .act span{border:1px solid var(--ink);padding:9px 14px;font-size:14px;font-weight:600;color:var(--ink);background:#fff}
.queue .act span.pri{background:var(--ink);color:var(--paper)}
.queue .act span.dis{border-color:var(--rule);color:var(--ink-3);background:transparent}
.overprint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-18deg);
  font-weight:800;font-size:clamp(48px,9vw,92px);letter-spacing:.18em;text-transform:uppercase;
  color:var(--seal);opacity:.13;pointer-events:none;white-space:nowrap;user-select:none}
.more{margin-top:var(--s3);border-top:1px solid rgba(219,229,245,.2)}
.more div{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:14px;padding:12px 0;border-bottom:1px solid rgba(219,229,245,.14);font-size:14px;align-items:baseline}
.more .r{font-family:var(--mono);font-size:14px;color:#CEDCF8}
.more .s{color:var(--on-dark-2)}
.more .q{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-3)}

/* ---------- crosswalk ---------- */
.xw{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s5);align-items:start}
.delta{display:flex;align-items:baseline;gap:14px;flex-wrap:nowrap;font-family:var(--mono);letter-spacing:-.04em;line-height:1;margin:var(--s3) 0}
.delta .a{font-size:clamp(34px,4vw,54px);color:var(--ink-3);text-decoration:line-through;text-decoration-thickness:3px;text-decoration-color:var(--seal)}
.delta .ar{font-size:clamp(20px,2.4vw,30px);color:var(--ink-3)}
.delta .b{font-family:var(--serif);font-size:clamp(56px,6.6vw,96px);color:var(--ink);font-weight:500}
.delta .b small{font-size:.32em;color:var(--navy);letter-spacing:0;margin-left:8px;font-weight:400}
.tblwrap{overflow-x:auto;background:var(--paper);border:1px solid var(--ink);-webkit-overflow-scrolling:touch}
table.ctl{width:100%;min-width:560px;border-collapse:collapse;font-size:14px}
table.ctl th{text-align:left;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);background:var(--ink);padding:10px 14px;font-weight:500}
table.ctl td{padding:11px 14px;border-top:1px solid var(--rule);vertical-align:top;color:var(--ink-2)}
table.ctl td.r{font-family:var(--mono);color:var(--navy);font-weight:500;white-space:nowrap}
table.ctl td.c{color:var(--ink);font-weight:500}
table.ctl td.t{font-family:var(--mono);font-size:14px;color:var(--ink-3);white-space:nowrap}
table.ctl td.n{font-family:var(--mono);font-size:14px;color:var(--seal);font-weight:600;letter-spacing:.06em;white-space:nowrap}
table.ctl tbody tr:hover td{background:var(--paper)}
.deadline{margin-top:var(--s3);padding:var(--s3);border:1px solid var(--rule-2);display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s3);align-items:center}
.deadline .d{font-family:var(--mono);font-size:21px;letter-spacing:-.02em;color:var(--seal);font-weight:500;line-height:1.1}
.deadline .d small{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:6px;font-weight:400}
.deadline p{font-size:14px;color:var(--ink-2);margin:0}

/* ---------- market: denominations ---------- */
.notes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2);margin:var(--s4) 0}
.note{position:relative;aspect-ratio:2.05/1;border:1px solid var(--rule-2);background:var(--paper-2);overflow:hidden;padding:14px 16px;display:flex;flex-direction:column;justify-content:space-between;color:var(--ink)}
.note .rs{position:absolute;right:-22%;top:-18%;width:78%;aspect-ratio:1;color:var(--navy);opacity:.35}
.note .cc{font-family:var(--serif);font-weight:600;font-size:clamp(24px,2.6vw,34px);letter-spacing:-.01em;line-height:1;position:relative}
.note .cn{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);position:relative}
.note .bd{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);position:relative;letter-spacing:.02em}
.note:nth-child(2){background:#EDF2FA}
.note:nth-child(3){background:#E6EDF8}
.note:nth-child(4){background:#DFE8F6}
.mkt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5)}
.mkt h3{margin-bottom:10px}
.mkt p{font-size:17px;color:var(--ink-2)}
.cal{border-top:1px solid var(--ink);margin-top:var(--s3)}
.cal div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:14px}
.cal div span:first-child{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding-top:3px}
.cal div span:last-child{color:var(--ink)}

/* ---------- CTA ---------- */
.cta-sec{position:relative;overflow:hidden}
.cta-sec .bg{position:absolute;right:-12%;top:50%;width:min(60vw,720px);aspect-ratio:1;transform:translateY(-50%);color:var(--on-dark-3);opacity:.35;pointer-events:none}
.cta-sec .wrap{position:relative}
.cta-sec h2{max-width:16ch;margin-bottom:var(--s3)}
.cta-sec .row{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s4)}

/* ---------- footer ---------- */
.foot{background:var(--paper-2);border-top:1px solid var(--rule-2);padding-block:var(--s5) var(--s4);font-size:14px;color:var(--ink-2)}
.foot .g{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--s4)}
.foot .fh{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px;font-weight:500}
.foot a{display:block;padding:4px 0;color:var(--ink-2)}
.foot a:hover{color:var(--ink)}
.foot .base{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--rule);display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center;font-family:var(--mono);font-size:14px;color:var(--ink-3);letter-spacing:.04em}
.foot .base .sp{flex:1}

/* ------------------------------------------------------------
   A light panel laid on a dark section is still a light panel.
   .dark sets text colours for its own surface; these components
   carry their own paper, so they take their ink back.
   ------------------------------------------------------------ */
.dark :is(.qa,.queue,.note,.tblwrap){color:var(--ink)}
.dark :is(.qa,.queue,.note,.tblwrap) p{color:var(--ink-2)}
.dark :is(.qa,.queue,.note,.tblwrap) .muted{color:var(--ink-3)}
.dark :is(.qa,.queue,.note,.tblwrap) .lbl{color:var(--ink-3)}
.dark :is(.qa,.queue,.note,.tblwrap) :is(h2,h3,h4,b,strong){color:var(--ink)}
.dark :is(.qa,.queue,.note,.tblwrap) a{color:var(--navy)}
.dark :is(.qa,.queue,.note,.tblwrap) a:hover{color:var(--navy-d)}
.dark .opt{color:var(--ink-2)}
.dark .opt.on{color:#fff}
.dark .queue .hd .st{color:var(--amber)}

.dark .legend{color:var(--on-dark-2)}
.dark .legend i{border-color:rgba(219,229,245,.45);background:rgba(219,229,245,.18)}

.ph{font-size:21px;line-height:1.25;letter-spacing:-.015em;margin:10px 0 6px}

.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);align-items:start}
@media(max-width:980px){.plans{grid-template-columns:1fr;max-width:560px}}
/* what a plan includes: one ruled line per item, on paper */
.inc{margin-top:var(--s3);border-top:1px solid var(--ink)}
.inc div{padding:11px 0;border-bottom:1px solid var(--rule);font-size:14px;color:var(--ink-2);line-height:1.45}
.inc div::before{content:"\2713";font-family:var(--mono);color:var(--navy);margin-right:10px;font-weight:600}

/* ---------- reveal ---------- */
.js .hero .g > *{animation:arrive .9s var(--ease) both}
.js .hero .g > :last-child{animation-delay:.12s}
@keyframes arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rv{opacity:1}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .stages{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stage:nth-child(4){grid-column:2 / -1}
  .stage:nth-child(5){grid-column:3 / -1}
  .ledger{grid-template-columns:1fr 1fr 1fr}
  .ledger > div:nth-child(3){border-right:0}
}
@media(max-width:900px){
  :root{--gut:20px;--s6:64px;--s5:44px}
  .mnav{display:none}
  .mnav.open{display:flex;position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--ink);padding:var(--s2) var(--gut) var(--s4);
    box-shadow:0 28px 40px -28px rgba(10,20,36,.45);animation:arrive .28s var(--ease) both}
  .mnav.open a:not(.btn){padding:13px 0;border-bottom:1px solid var(--rule);font-size:17px;color:var(--ink)}
  .mnav.open .btn{margin-top:var(--s3);justify-content:center}
  .burger{display:block}
  .folio{grid-template-columns:1fr;gap:var(--s3)}
  .hero .g,.exhibit,.spec,.xw,.mkt,.sig{grid-template-columns:1fr}
  .exhibit .stick{position:static}
  .hero .g{gap:var(--s4)}
  .sealbox{max-width:360px}
  .sealbox .ring text{font-size:14px}
  .notes{grid-template-columns:1fr 1fr}
  .foot .g{grid-template-columns:1fr 1fr}
  .rowmaps{grid-template-columns:1fr}
  .cta-sec .bg{right:-40%;width:90vw;opacity:.22}
}
@media(max-width:640px){
  :root{--gut:16px}
  .stages{grid-template-columns:1fr}
  .stage{grid-column:1 / -1 !important;padding-right:0}
  .ledger{grid-template-columns:1fr 1fr}
  .ledger > div{border-right:0;margin-right:0;border-bottom:1px solid var(--rule)}
  .ledger > div:nth-child(odd){border-right:1px solid var(--rule);margin-right:var(--s3)}
  .ledger > div:nth-child(5){grid-column:1 / -1;border-right:0;margin-right:0;border-bottom:0}
  .btn.lg{width:100%;justify-content:center}
  .opts{grid-template-columns:1fr}
  .deadline{grid-template-columns:1fr}
  .cal div{grid-template-columns:1fr;gap:4px}
  .sealbox{max-width:300px}
  .sealbox .ring text{font-size:17px}
  .notes{grid-template-columns:1fr 1fr;gap:8px}
  .note{padding:10px 12px}
  .foot .g{grid-template-columns:1fr}
  .more div{grid-template-columns:64px minmax(0,1fr)}
  .more .q{grid-column:2}
  .alt-note{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .js .rv{opacity:1;transform:none}
}

/* ============================================================
   FORM — the application form of a bank: ruled fields, mono
   labels, no rounded chrome. Errors would carry seal red.
   ============================================================ */
.cx{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--s5);align-items:start}
.frm{border-top:1px solid var(--ink);padding-top:var(--s4)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s3);grid-template-rows:auto auto auto}
.pair > .field{display:grid;grid-template-rows:subgrid;grid-row:span 3;align-content:start}
@supports not (grid-template-rows:subgrid){.pair > .field label{min-height:2.7em}}
.field{margin-bottom:var(--s3)}
.field label{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);font-weight:500;margin-bottom:8px}
.field input[type=text],.field input[type=email],.field input[type=tel],
.field select,.field textarea{
  width:100%;font-family:var(--sans);font-size:17px;line-height:1.4;color:var(--ink);
  background:#fff;border:1px solid var(--rule-2);border-radius:2px;padding:12px 14px;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
.field textarea{min-height:132px;resize:vertical}
.field select{appearance:none;padding-right:38px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-size:6px 6px,6px 6px;background-position:right 16px center,right 10px center;background-repeat:no-repeat}
.field :is(input,select,textarea):hover{border-color:var(--ink-3)}
.field :is(input,select,textarea):focus{outline:none;border-color:var(--navy);box-shadow:inset 0 -2px 0 var(--navy)}
.field :is(input,select,textarea):user-invalid{border-color:var(--seal);box-shadow:inset 0 -2px 0 var(--seal)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3);opacity:.7}
.help{font-family:var(--mono);font-size:11.5px;line-height:1.6;color:var(--ink-3);margin:8px 0 0;letter-spacing:.02em}
.field.consent{display:grid;grid-template-columns:18px minmax(0,1fr);gap:12px;align-items:start;
  border-top:1px solid var(--rule);padding-top:var(--s3);margin-top:var(--s4)}
.field.consent input[type=checkbox]{width:18px;height:18px;margin:2px 0 0;accent-color:var(--navy);cursor:pointer}
.field.consent label{font-family:var(--sans);font-size:14px;letter-spacing:0;text-transform:none;
  color:var(--ink-2);font-weight:400;line-height:1.5;margin:0;cursor:pointer}
.field.consent label a{border-bottom:1px solid var(--rule-2)}

/* ============================================================
   LEGAL DOCUMENT — narrow measure, clause folios, amber for a
   value GUUT has still to supply.
   ============================================================ */
.doc{max-width:980px}
.doc .folio{margin-top:var(--s5)}
.doc .tblwrap{margin:var(--s3) 0}
.doc .folio:first-of-type{margin-top:var(--s4)}
.doc p{max-width:66ch;font-size:17px;line-height:1.62;color:var(--ink-2)}
.doc h2{font-size:clamp(26px,2.6vw,36px);line-height:1.18;margin-bottom:var(--s3);max-width:20ch}
.doc h3{font-size:19px;margin:var(--s4) 0 var(--s2);font-weight:600}
.doc ol,.doc ul{max-width:66ch;font-size:17px;line-height:1.62;color:var(--ink-2);padding-left:1.3em;margin:0 0 var(--s3)}
.doc li{margin-bottom:8px}
.doc li::marker{color:var(--ink-3);font-family:var(--mono);font-size:14px}
hr.rule{border:0;border-top:1px solid var(--ink);margin:var(--s5) 0 var(--s3)}
.tbs{font-family:var(--mono);font-size:.86em;color:var(--amber);letter-spacing:.01em;
  background:#FBF3E2;padding:1px 5px;border-bottom:1px solid rgba(138,90,0,.4);white-space:normal}

@media(max-width:980px){
  .cx{grid-template-columns:1fr;gap:var(--s5)}
}
@media(max-width:640px){
  .pair{grid-template-columns:1fr;gap:0}
  .doc p,.doc ol,.doc ul{font-size:17px}
}