/* Self-hosted webfonts (OFL) - vendored 2026-08-12, Riju-authorized */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/fraunces-500.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/fraunces-600.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/inter-500.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/inter-600.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/jetbrains-mono-400.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/jetbrains-mono-700.woff2") format("woff2")}

/* ==========================================================================
   KryptAPI — site.css  ·  r3 palette (the same vault, under moonlight)
   Colour contract — three meanings, never crossed:
     arc-cyan  #2FD4E6  = live cryptographic state   (token name: --phos)
     tyrian    #AE47C2  = ceremonial ONLY — seals, signatures, statements.
                          Never an error, never a status.  (token name: --wax)
     steel     #C4CEDC  = anything touching custody      (token name: --brass)
     amber     #E8A03D  = the ONLY error colour. Unchanged from r1, on purpose.
   Token NAMES are historical and deliberately unchanged in r3 so that no
   selector or JS reference had to churn during the re-key. Read --phos as
   "arc", --wax as "tyrian", --brass as "steel".
   Ramp rule: no cyan stop bluer than ~195deg.
   Motion: vault mechanics. Short travel, hard latch, no float, no bounce.
   ========================================================================== */

/* ---------- 1. tokens ---------- */
:root{
  --bg:#05070D;
  --bg-deep:#030509;
  --ink:#E9EEF7;
  --muted:#8E9AB0;
  --dim:#545F75;
  --phos:#2FD4E6;
  --wax:#AE47C2;
  --wax-dark:#5E2370;
  --brass:#C4CEDC;
  --amber:#E8A03D;
  --ok:#2FD4E6;
  --warn:#C4CEDC;
  --line:rgba(160,190,255,0.10);
  --line-2:rgba(160,190,255,0.18);
  --glass:rgba(160,190,255,0.045);
  --glass-2:rgba(160,190,255,0.075);

  --serif:"Fraunces",Georgia,Cambria,"Times New Roman",serif;
  --sans:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono","Cascadia Code","SF Mono",Menlo,Consolas,monospace;

  --latch:cubic-bezier(0.22,0.9,0.24,1);
  --t-micro:180ms;
  --t-card:280ms;
  --t-cer:640ms;

  --gutter:clamp(18px,4.4vw,34px);
  --maxw:1180px;
  /* no top bar exists any more — the Custody Rail owns the left edge (desktop)
     and the top edge (mobile). --nav-h is the vertical chrome the page must clear. */
  --nav-h:0px;
  --crail:84px;
  --crail-open:264px;
  --crail-strip:56px;
}

/* ---------- 2. reset & base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.65;
  font-weight:400;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,canvas{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;letter-spacing:-0.014em;margin:0;line-height:1.12}
h1{font-size:clamp(34px,6vw,62px)}
h2{font-size:clamp(27px,3.9vw,42px);line-height:1.14}
h3{font-size:clamp(18px,2.1vw,22px);line-height:1.25;letter-spacing:-0.008em}
h4{font-size:16px;line-height:1.35}
p{margin:0 0 1em;max-width:62ch}
a{color:var(--phos);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
ul,ol{margin:0 0 1em;padding-left:1.15em}
li{margin:0 0 .45em;max-width:62ch}
hr{border:0;border-top:1px solid var(--line);margin:36px 0}
::selection{background:rgba(47,212,230,.22);color:#fff}

/* focus: a brass keyline, always visible */
:focus{outline:none}
:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:3px;
  border-radius:3px;
}
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  font-family:var(--mono);font-size:12px;padding:12px 18px;
  background:var(--bg-deep);color:var(--phos);border:1px solid var(--brass);
}
.skip:focus{left:12px;top:12px}

/* ---------- 3. typographic utilities ---------- */
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-0.01em}
.eyebrow{
  font-family:var(--mono);font-size:11.5px;text-transform:uppercase;
  letter-spacing:0.28em;color:var(--phos);margin:0 0 16px;
  display:block;font-weight:400;
}
.eyebrow::before{content:"// "}
.eyebrow.brass{color:var(--brass)}
.eyebrow.wax{color:var(--wax)}
.lede{font-size:clamp(17px,2vw,19.5px);line-height:1.6;color:var(--muted);max-width:64ch}
.muted{color:var(--muted)}
.dim{color:var(--dim)}
.phos{color:var(--phos)}
.brass{color:var(--brass)}
.hash{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  color:var(--muted);white-space:nowrap;cursor:help;
  border-bottom:1px dotted rgba(142,154,176,.4);
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 4. layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.wrap-narrow{max-width:860px}
section{position:relative}
.band{padding:clamp(56px,8vw,104px) 0;position:relative}
.band + .band{border-top:1px solid var(--line)}
.band-tight{padding:clamp(40px,5vw,64px) 0}
.band-deep{background:var(--bg-deep)}
.grid{display:grid;gap:clamp(16px,2.2vw,22px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.split-wide{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.stack-sm > * + *{margin-top:14px}
.head-block{max-width:760px;margin-bottom:clamp(28px,4vw,48px)}
.head-block p{margin-bottom:0}

@media (max-width:900px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split,.split-wide{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}
}

/* ---------- 5. entrance: 8px hard latch, NO stagger ---------- */
.latch{opacity:0;transform:translateY(8px)}
.latch.in{opacity:1;transform:none;transition:opacity 280ms var(--latch),transform 280ms var(--latch)}

/* ---------- 6. nav: THE CUSTODY RAIL ----------
   Site navigation as a hash-chained audit ledger. Desktop: a fixed LEFT rail,
   84px collapsed, latching open to 264px on hover / :focus-within / explicit
   seal-toggle. Mobile: a fixed TOP seal-strip whose wax-seal trigger unrolls a
   ledger sheet DOWNWARD. There is no horizontal link row at any breakpoint. */

.brandlink{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
.brandlink:hover{text-decoration:none}
.kmark{width:32px;height:32px;flex:0 0 auto;display:block}
.wordmark{
  font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:-0.01em;
  color:var(--ink);white-space:nowrap;
}
.wordmark i{font-style:normal;color:var(--phos)}

.crail{
  position:fixed;z-index:80;background:var(--bg-deep);
  display:flex;flex-direction:column;
}
.crail a{text-decoration:none}
.crail a:hover{text-decoration:none}
.crail-brand{display:flex;align-items:center;gap:11px;flex:0 0 auto;min-width:0}
.crail-brand .kmark{width:32px;height:32px}

/* the menu trigger IS the brand's wax seal — the hamburger is gone */
.crail-seal{
  background:transparent;border:1px solid var(--line-2);border-radius:10px;
  padding:0;cursor:pointer;color:var(--muted);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  transition:border-color var(--t-micro) var(--latch),background var(--t-micro) var(--latch);
}
.crail-seal:hover{border-color:rgba(196,206,220,.6);background:rgba(196,206,220,.09)}
.nseal{display:block;pointer-events:none}
.nseal .half{transform-origin:50% 50%;transition:transform 200ms var(--latch)}
.nseal .crack{
  stroke:#330B3D;stroke-width:1.1;fill:none;stroke-linecap:round;
  stroke-dasharray:22;stroke-dashoffset:22;
}
.crail-seal.cracked .nseal .crack{animation:crackIn 160ms linear forwards}
.crail-seal.cracked .nseal .half-l{transform:rotate(-7deg) translate(-1.6px,.6px)}
.crail-seal.cracked .nseal .half-r{transform:rotate(7deg) translate(1.6px,.6px)}

/* --- ledger entries, chained --- */
.crail-panel{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.crail-list{
  list-style:none;margin:0;padding:6px 0 10px;position:relative;
  flex:1 1 auto;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;
}
.crail-list::-webkit-scrollbar{display:none}
.crail-list::before{ /* the chain */
  content:"";position:absolute;left:22px;top:16px;bottom:16px;width:1px;
  background:var(--line-2);
}
.crail-list li{margin:0;max-width:none}
.crail-link{
  position:relative;display:flex;align-items:center;gap:11px;
  padding:11px 14px 11px 34px;min-height:44px;
  border-left:2px solid transparent;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:var(--muted);
  transition:color var(--t-micro) var(--latch),background var(--t-micro) var(--latch);
}
.crail-link::before{ /* node tick sitting on the chain */
  content:"";position:absolute;left:18px;top:50%;margin-top:-4.5px;
  width:9px;height:9px;border-radius:50%;
  background:var(--bg-deep);border:1px solid var(--line-2);
  transition:border-color var(--t-micro) var(--latch),background var(--t-micro) var(--latch);
}
.crail-link:hover{color:var(--ink);background:rgba(47,212,230,.05)}
.crail-link:hover::before{border-color:var(--phos)}
.crail-glyph{
  width:18px;height:18px;flex:0 0 auto;
  stroke:currentColor;fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;
}
.crail-label{white-space:nowrap;min-width:0}
.crail-hash{
  margin-left:auto;font-family:var(--mono);font-size:9.6px;color:var(--dim);
  white-space:nowrap;letter-spacing:0;
}
.crail-att{margin-left:auto;color:var(--phos);white-space:nowrap;font-size:10.6px;letter-spacing:.06em}

/* lineage: hovering an entry lights every entry it commits to, upward */
.crail-entry.lit > .crail-link{color:var(--phos)}
.crail-entry.lit > .crail-link::before{border-color:var(--phos);background:var(--phos)}
.crail-entry.lit > .crail-link .crail-hash{color:rgba(47,212,230,.72)}

/* the attested (current) entry */
.crail-link[aria-current="page"]{
  color:var(--ink);background:rgba(47,212,230,.07);border-left-color:var(--phos);
}
.crail-link[aria-current="page"]::before{background:var(--phos);border-color:var(--phos)}

/* indented child entries: the four service pages */
.crail-kids{list-style:none;margin:0;padding:0;overflow:hidden}
.crail-kid{
  position:relative;display:flex;align-items:center;
  padding:9px 12px 9px 56px;min-height:40px;
  border-left:2px solid transparent;
  font-family:var(--mono);font-size:11.6px;color:var(--dim);white-space:nowrap;
  transition:color var(--t-micro) var(--latch),background var(--t-micro) var(--latch);
}
.crail-kid::before{content:"";position:absolute;left:22px;top:50%;width:24px;height:1px;background:var(--line-2)}
.crail-kid:hover{color:var(--phos);background:rgba(47,212,230,.04)}
.crail-kid[aria-current="page"]{color:var(--ink);border-left-color:var(--phos);background:rgba(47,212,230,.06)}
.crail-kid[aria-current="page"]::before{background:var(--phos)}

/* the portal: a brass-rimmed wax-sealed drawer, pinned to the foot */
.crail-portal{
  flex:0 0 auto;display:flex;align-items:center;gap:12px;
  padding:15px 14px 15px 26px;min-height:56px;
  border-top:1px solid rgba(196,206,220,.45);
  background:linear-gradient(180deg,rgba(196,206,220,.09),rgba(196,206,220,.02));
  font-family:var(--mono);font-size:12.4px;color:var(--brass);
  transition:background var(--t-micro) var(--latch),padding-left var(--t-micro) var(--latch);
}
.crail-portal:hover{background:rgba(196,206,220,.17);padding-left:30px}
.crail-waxdot{
  width:16px;height:16px;border-radius:50%;flex:0 0 auto;
  background:radial-gradient(circle at 38% 34%,#CE7BE0,#AE47C2 60%,#5E2370);
  box-shadow:0 0 0 1.5px rgba(196,206,220,.75);
}

/* ---- desktop: the left rail ---- */
@media (min-width:768px){
  body{padding-left:var(--crail)}
  .crail{
    left:0;top:0;bottom:0;width:var(--crail);overflow:hidden;
    border-right:1px solid var(--line);
    transition:width var(--t-card) var(--latch),box-shadow var(--t-card) var(--latch);
  }
  .crail:hover,.crail:focus-within,.crail.open{
    width:var(--crail-open);
    box-shadow:16px 0 38px -20px rgba(0,0,0,.95);
  }
  .crail-bar{
    display:flex;flex-direction:column;align-items:flex-start;gap:12px;
    padding:16px 0 14px;flex:0 0 auto;border-bottom:1px solid var(--line);
  }
  .crail-brand{padding-left:26px}
  .crail-here{display:none}
  .crail-seal{width:34px;height:34px;margin-left:25px}
  .nseal{width:22px;height:22px}
  /* collapsed labels stay in the accessibility tree — opacity, never display:none */
  .crail-label,.crail-hash,.crail-att,.crail-brand .wordmark{
    opacity:0;transition:opacity 140ms var(--latch);
  }
  :is(.crail:hover,.crail:focus-within,.crail.open) :is(.crail-label,.crail-hash,.crail-att,.wordmark){opacity:1}
  .crail-kids{
    max-height:0;opacity:0;
    transition:max-height var(--t-card) var(--latch),opacity 140ms var(--latch);
  }
  :is(.crail:hover,.crail:focus-within,.crail.open) .crail-kids{max-height:240px;opacity:1}
}

/* ---- mobile: the top seal-strip + descending ledger sheet ---- */
@media (max-width:767.98px){
  :root{--nav-h:56px}
  body{padding-top:calc(var(--crail-strip) + env(safe-area-inset-top))}
  .crail{
    left:0;right:0;top:0;width:auto;height:auto;overflow:visible;
    border-bottom:1px solid var(--line);background:rgba(3,5,9,.97);
  }
  .crail-bar{
    display:flex;align-items:center;gap:10px;position:relative;z-index:2;
    height:var(--crail-strip);padding:0 8px 0 14px;
    margin-top:env(safe-area-inset-top);
  }
  .crail-brand .wordmark{display:none}
  .crail-here{
    display:block;flex:1 1 auto;min-width:0;text-align:center;
    font-family:var(--mono);font-size:10.8px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .crail-seal{width:44px;height:44px}
  .nseal{width:28px;height:28px}
  .crail-panel{
    position:fixed;left:0;right:0;top:0;bottom:0;z-index:1;
    background:var(--bg-deep);
    padding-top:calc(var(--crail-strip) + env(safe-area-inset-top));
    padding-bottom:env(safe-area-inset-bottom);
    transform:translateY(-100%);visibility:hidden;
    transition:transform var(--t-card) var(--latch),visibility 0s linear var(--t-card);
  }
  .crail.open .crail-panel{
    transform:none;visibility:visible;
    transition:transform var(--t-card) var(--latch),visibility 0s linear 0s;
  }
  .crail-list{padding:12px 0 18px}
  .crail-list::before{left:24px}
  .crail-link{font-size:14px;min-height:54px;padding-left:42px}
  .crail-link::before{left:20px}
  .crail-kid{min-height:44px;padding-left:64px;font-size:12.6px}
  .crail-kid::before{left:24px;width:28px}
  .crail-hash{display:none}
  .crail-portal{min-height:62px;font-size:13px}
  body.crail-open{overflow:hidden}
}
@media (max-width:767.98px) and (prefers-reduced-motion:reduce){
  .crail-panel{
    transform:none;opacity:0;
    transition:opacity 120ms linear,visibility 0s linear 120ms;
  }
  .crail.open .crail-panel{opacity:1;transition:opacity 120ms linear,visibility 0s linear 0s}
  .crail-seal.cracked .nseal .crack{animation:none;stroke-dashoffset:0}
}

/* ---------- 7. buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:13.5px;letter-spacing:.01em;
  padding:13px 22px;border-radius:9px;border:1px solid var(--line-2);
  color:var(--ink);background:transparent;cursor:pointer;
  transition:transform var(--t-micro) var(--latch),border-color var(--t-micro) var(--latch),background var(--t-micro) var(--latch),color var(--t-micro) var(--latch);
  text-align:left;
}
.btn:hover{text-decoration:none;transform:translateY(-2px);border-color:rgba(47,212,230,.5)}
.btn-primary{border-color:rgba(196,206,220,.7);color:var(--ink);box-shadow:inset 0 0 0 0 rgba(196,206,220,0)}
.btn-primary:hover{background:rgba(196,206,220,.12);border-color:var(--brass);box-shadow:inset 0 0 0 1px rgba(196,206,220,.35)}
.btn-ghost{color:var(--muted)}
.btn-ghost:hover{color:var(--ink)}
.btn-sm{font-size:12px;padding:8px 13px}
.cta-row{display:flex;flex-wrap:wrap;gap:13px;align-items:center}

/* ---------- 8. pills & chips ---------- */
.pill-row{display:flex;flex-wrap:wrap;gap:9px}
.pill{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--muted);
  padding:7px 14px;border:1px solid var(--line);border-radius:99px;background:var(--glass);
}
.pill b{color:var(--phos);font-weight:600}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:11.5px;color:var(--muted);
  border:1px solid var(--line);border-radius:7px;padding:6px 11px;background:var(--glass);
}
.chip .dot{width:6px;height:6px;border-radius:50%;background:var(--phos);flex:0 0 auto}
.chip.brass-chip{border-color:rgba(196,206,220,.4);color:var(--brass)}
.chip.brass-chip .dot{background:var(--brass)}
.chip.amber-chip{border-color:rgba(232,160,61,.45);color:var(--amber)}
.chip.amber-chip .dot{background:var(--amber)}

/* ---------- 9. cards / glass ---------- */
.card{
  background:var(--glass);border:1px solid var(--line);border-radius:12px;
  padding:clamp(18px,2.4vw,26px);position:relative;
  transition:border-color var(--t-card) var(--latch),transform var(--t-card) var(--latch),box-shadow var(--t-card) var(--latch);
}
.card:hover{border-color:rgba(47,212,230,.5);transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(196,206,220,.22)}
.card h3{margin:0 0 10px}
.card p:last-child{margin-bottom:0}
.card-brass{border-top:2px solid var(--brass)}
.card-flat:hover{transform:none}
.card-num{
  font-family:var(--mono);font-size:11.5px;color:var(--brass);letter-spacing:.2em;
  display:block;margin-bottom:10px;
}

/* ---------- 10. wax-seal cards ---------- */
.wgrid{display:grid;gap:clamp(14px,1.8vw,20px);grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:960px){.wgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.wgrid{grid-template-columns:minmax(0,1fr)}}

.wcard{
  position:relative;perspective:600px;
  min-height:236px;cursor:pointer;
  border:0;padding:0;background:transparent;text-align:left;
  font:inherit;color:inherit;display:block;width:100%;
}
.wcard-face{
  position:relative;min-height:236px;height:100%;
  background:var(--glass);border:1px solid var(--line);border-radius:12px;
  transition:border-color var(--t-card) var(--latch),box-shadow var(--t-card) var(--latch);
}
.wcard:hover .wcard-face,.wcard:focus-visible .wcard-face{border-color:rgba(47,212,230,.5);box-shadow:inset 0 0 0 1px rgba(196,206,220,.22)}
.wcard-body{
  padding:22px 22px 24px;opacity:0;
  transition:opacity 200ms var(--latch) 120ms;
}
.wcard.open .wcard-body{opacity:1}
.wcard-body h3{margin:0 0 10px;font-size:19px}
.wcard-body p{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0 0 12px}
.wcard-more{
  font-family:var(--mono);font-size:11.5px;color:var(--phos);letter-spacing:.06em;
  display:inline-block;transform:translateY(8px);opacity:0;
  transition:transform 240ms var(--latch) 160ms,opacity 240ms var(--latch) 160ms;
}
.wcard.open .wcard-more{transform:none;opacity:1}

.wcard-flap{
  position:absolute;inset:0;border-radius:12px;
  background:linear-gradient(180deg,rgba(12,16,28,.98),rgba(5,7,13,.99));
  border:1px solid var(--line);
  transform-origin:top center;
  transform-style:preserve-3d;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:20px 22px;
  z-index:2;
}
.wcard-flap::before{ /* the diagonal flap crease */
  content:"";position:absolute;left:0;right:0;top:0;height:56%;
  background:linear-gradient(160deg,rgba(160,190,255,.03),transparent 60%);
  border-bottom:1px solid rgba(160,190,255,.09);
  clip-path:polygon(0 0,100% 0,100% 34%,50% 100%,0 34%);
  pointer-events:none;
}
.wcard-flap-title{
  font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.2em;
  color:var(--muted);position:relative;z-index:1;
}
.wcard-flap-title::before{content:"// ";color:var(--phos)}
.wcard-hint{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--dim);
  margin-top:7px;text-transform:uppercase;
}
.wcard.open .wcard-flap{animation:flapOpen 300ms var(--latch) forwards;pointer-events:none}
.wcard.closing .wcard-flap{animation:flapShut 240ms var(--latch) forwards}
@keyframes flapOpen{
  0%{transform:rotateX(0deg);opacity:1}
  35%{transform:rotateX(-28deg);opacity:1}
  100%{transform:rotateX(-104deg);opacity:0}
}
@keyframes flapShut{
  0%{transform:rotateX(-104deg);opacity:0}
  100%{transform:rotateX(0deg);opacity:1}
}
/* the wax seal sitting on the crease */
.wseal{
  position:absolute;left:50%;top:44%;width:34px;height:34px;margin-left:-17px;margin-top:-17px;
  z-index:3;pointer-events:none;
}
.wseal .crack{stroke:#330B3D;stroke-width:1.1;fill:none;stroke-linecap:round;
  stroke-dasharray:22;stroke-dashoffset:22;}
.wcard.cracked .wseal .crack{animation:crackIn 160ms linear forwards}
@keyframes crackIn{to{stroke-dashoffset:0}}
.wseal .half{transform-origin:50% 50%;transition:transform 240ms var(--latch),opacity 240ms var(--latch)}
.wcard.cracked .wseal .half-l{transform:rotate(-8deg) translate(-1px,6px);opacity:0}
.wcard.cracked .wseal .half-r{transform:rotate(8deg) translate(1px,6px);opacity:0}

/* ---------- 11. code blocks ---------- */
.code{
  background:#04060C;border:1px solid var(--line);border-radius:10px;
  overflow:hidden;position:relative;
}
.code-bar{
  display:flex;align-items:center;gap:10px;padding:9px 13px;
  border-bottom:1px solid var(--line);background:rgba(160,190,255,.025);
}
.code-bar .path{font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.03em;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.copy-btn{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);background:transparent;border:1px solid var(--line);border-radius:6px;
  padding:5px 9px;cursor:pointer;flex:0 0 auto;
  transition:color var(--t-micro) var(--latch),border-color var(--t-micro) var(--latch);
}
.copy-btn:hover{color:var(--phos);border-color:rgba(47,212,230,.45)}
.copy-btn.done{color:var(--phos);border-color:rgba(47,212,230,.6)}
.code pre{
  margin:0;padding:16px 15px;overflow-x:auto;
  font-family:var(--mono);font-size:12.6px;line-height:1.72;
  color:var(--ink);tab-size:2;
}
.code pre code{font:inherit;color:inherit;white-space:pre}
.tk{color:var(--dim)}          /* punctuation / comments */
.tk-key{color:var(--muted)}    /* json keys */
.tk-str{color:var(--ink)}      /* strings */
.tk-val{color:var(--phos)}     /* live values */
.tk-brass{color:var(--brass)}  /* custody-touching */
.tk-cmd{color:var(--brass)}
.tk-amber{color:var(--amber)}

/* rivets: brass, not traffic lights */
.rivets{display:flex;gap:6px;flex:0 0 auto}
.rivet{
  width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 35% 32%,#E4EAF2,#C4CEDC 55%,#77828F);
  box-shadow:inset 0 0 0 .5px rgba(0,0,0,.5);
}

/* ---------- 12. tabs ---------- */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--line);position:relative;margin-bottom:0;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;
  background:transparent;border:0;color:var(--muted);padding:11px 16px;cursor:pointer;
  white-space:nowrap;transition:color var(--t-micro) var(--latch);
}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--phos)}
.tab-underline{
  position:absolute;bottom:-1px;height:2px;background:var(--phos);
  transition:transform var(--t-micro) var(--latch),width var(--t-micro) var(--latch);
  left:0;width:0;
}
.tabpanel[hidden]{display:none}

/* ---------- 13. tables ---------- */
.tbl-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--glass)}
table.dt{border-collapse:collapse;width:100%;min-width:560px}
table.dt caption{text-align:left;font-family:var(--mono);font-size:11.5px;color:var(--dim);padding:12px 14px 0;letter-spacing:.1em;text-transform:uppercase}
table.dt th,table.dt td{
  text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);
  font-size:13.6px;vertical-align:top;
}
table.dt th{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.18em;
  color:var(--dim);font-weight:400;white-space:nowrap;
}
table.dt tbody tr:last-child td{border-bottom:0}
table.dt tbody tr:hover{background:rgba(160,190,255,.028)}
table.dt td.m,table.dt td .m{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12.6px;color:var(--phos);white-space:nowrap}
table.dt td.mb{font-family:var(--mono);font-size:12.6px;color:var(--brass);white-space:nowrap}
table.dt td.ma{font-family:var(--mono);font-size:12.6px;color:var(--amber);white-space:nowrap}
table.dt td.mm{font-family:var(--mono);font-size:12.6px;color:var(--muted)}

/* redaction bars — never resolve */
.redact{
  display:inline-block;height:12px;border-radius:2px;vertical-align:middle;
  background:repeating-linear-gradient(90deg,rgba(84,95,117,.55) 0 6px,rgba(84,95,117,.28) 6px 9px);
  min-width:40px;
}
.redact-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

/* ---------- 14. accordion ---------- */
.acc{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-btn{
  width:100%;background:transparent;border:0;cursor:pointer;color:var(--ink);
  display:flex;align-items:center;gap:16px;padding:18px 4px;text-align:left;
  font-family:var(--serif);font-size:17.5px;font-weight:600;line-height:1.3;
  transition:color var(--t-micro) var(--latch);
}
.acc-btn:hover{color:var(--phos)}
.acc-key{
  flex:0 0 auto;width:18px;height:18px;
  transition:transform 240ms var(--latch);color:var(--brass);
}
.acc-btn[aria-expanded="true"] .acc-key{transform:rotate(90deg)}
.acc-panel{overflow:hidden;height:0;transition:height 280ms var(--latch)}
.acc-panel-in{padding:0 4px 20px}
.acc-panel-in p{color:var(--muted);font-size:15px;margin-bottom:.8em}
.acc-panel-in p:last-child{margin-bottom:0}

/* ---------- 15. hash-chain ledger ticker ---------- */
.ledger{
  border:1px solid var(--line);border-radius:11px;background:#04060C;overflow:hidden;
  position:relative;
}
.ledger-bar{
  display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line);
  background:rgba(160,190,255,.025);
}
.ledger-bar .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);flex:1;min-width:0}
.ledger-bar .live{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--phos);display:flex;align-items:center;gap:6px}
.ledger-bar .live i{width:6px;height:6px;border-radius:50%;background:var(--phos);display:block;animation:livePulse 2.4s var(--latch) infinite}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.28}}
.ledger-list{
  list-style:none;margin:0;padding:9px 0;min-height:206px;
  font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums;
  position:relative;
}
.ledger-list li{
  margin:0;padding:5px 14px;color:var(--muted);white-space:nowrap;
  overflow-x:auto;scrollbar-width:none;cursor:pointer;
  transition:color 180ms var(--latch),background 180ms var(--latch),opacity 180ms var(--latch);
  border-left:2px solid transparent;
}
.ledger-list li::-webkit-scrollbar{display:none}
.ledger-list li .ts{color:var(--dim)}
.ledger-list li .env{color:var(--ink)}
.ledger-list li .act{color:var(--phos)}
.ledger-list li .prev{color:var(--dim)}
.ledger.dimmed .ledger-list li{opacity:.24}
.ledger-list li.chain{opacity:1;color:var(--phos);background:rgba(47,212,230,.05);border-left-color:var(--phos)}
.ledger-list li.chain .ts,.ledger-list li.chain .prev{color:rgba(47,212,230,.75)}
.ledger-list li.enter{animation:ledgerIn 280ms var(--latch)}
@keyframes ledgerIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ledger-list li .detail{
  display:none;white-space:pre-wrap;color:var(--dim);font-size:11.6px;
  padding:8px 0 4px;line-height:1.6;
}
.ledger-list li.expanded .detail{display:block}
.ledger-cap{
  font-family:var(--mono);font-size:11px;color:var(--brass);letter-spacing:.06em;
  padding:9px 14px;border-top:1px solid var(--line);min-height:34px;
  opacity:0;transition:opacity 180ms var(--latch);
}
.ledger-cap.show{opacity:1}

/* ---------- 16. route inspector ---------- */
.route{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:1000px){.route{grid-template-columns:minmax(0,1fr)}}
.route-map{
  border:1px solid var(--line);border-radius:11px;background:var(--glass);
  overflow-x:auto;overflow-y:hidden;padding:8px;
}
.route-map svg{min-width:820px;display:block}
.route-node rect{fill:rgba(160,190,255,.05);stroke:var(--line-2);stroke-width:1}
.route-node text{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;fill:var(--muted)}
.route-node .glyph{stroke:var(--muted);stroke-width:1.1;fill:none}
.edge{cursor:pointer}
.edge .hit{stroke:transparent;stroke-width:18;fill:none}
.edge .base{stroke:#545F75;stroke-width:1;fill:none;transition:opacity 180ms var(--latch)}
.edge .flow{
  stroke:var(--phos);stroke-width:1.2;fill:none;opacity:.42;
  stroke-dasharray:4 7;animation:dashMove 1.6s linear infinite;
  transition:opacity 180ms var(--latch),stroke-width 180ms var(--latch);
}
@keyframes dashMove{to{stroke-dashoffset:-22}}
.edge:hover .flow{opacity:.85}
.edge:focus-visible .flow{opacity:1}
.route.selecting .edge{opacity:.25}
.route.selecting .edge.sel{opacity:1}
.edge.sel .flow{opacity:1;stroke-width:1.8}
.edge-label{font-family:var(--mono);font-size:8.6px;letter-spacing:.1em;fill:var(--dim);pointer-events:none}
.edge.sel .edge-label,.edge:hover .edge-label{fill:var(--phos)}
.route-dot circle{fill:var(--phos)}
.route-panel{
  border:1px solid var(--line);border-radius:11px;background:#04060C;overflow:hidden;
}
.route-panel-head{
  padding:12px 14px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px;background:rgba(160,190,255,.025);
}
.route-panel-head .t{font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--phos);flex:1;min-width:0}
.route-panel-body{padding:0}
.route-panel pre{
  margin:0;padding:15px 14px;font-family:var(--mono);font-size:11.9px;line-height:1.72;
  color:var(--muted);overflow-x:auto;max-height:420px;overflow-y:auto;white-space:pre;
}
.route-panel .empty{padding:22px 16px;font-family:var(--mono);font-size:12px;color:var(--dim);line-height:1.7}
.route-panel-in{opacity:0;transform:translateY(8px)}
.route-panel-in.on{opacity:1;transform:none;transition:opacity var(--t-card) var(--latch),transform var(--t-card) var(--latch)}

/* ---------- 17. live seal console ---------- */
.console{
  border:1px solid var(--line);border-top:1px solid var(--brass);border-radius:11px;
  background:var(--glass);overflow:hidden;
}
.console-head{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 15px;border-bottom:1px solid var(--line);background:rgba(160,190,255,.025);
}
.console-head .t{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);flex:1;min-width:140px}
.console-panes{display:grid;grid-template-columns:minmax(0,1fr) 218px minmax(0,1fr);gap:0}
@media (max-width:940px){.console-panes{grid-template-columns:minmax(0,1fr)}}
.pane{padding:16px 15px;border-right:1px solid var(--line);min-width:0}
.pane:last-child{border-right:0}
@media (max-width:940px){.pane{border-right:0;border-bottom:1px solid var(--line)}}
.pane-h{font-family:var(--mono);font-size:10.8px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:4px}
.pane-fp{font-family:var(--mono);font-size:10.6px;color:var(--brass);min-height:15px;margin-bottom:11px;opacity:0;transition:opacity 240ms var(--latch);word-break:break-all}
.pane-fp.on{opacity:1}
.console textarea{
  width:100%;min-height:132px;resize:vertical;
  background:#04060C;color:var(--ink);border:1px solid var(--line);border-radius:8px;
  font-family:var(--mono);font-size:13px;line-height:1.6;padding:11px 12px;
}
.console textarea:focus-visible{border-color:rgba(47,212,230,.5);outline:2px solid var(--brass);outline-offset:1px}
.pane-relay{background:rgba(4,6,12,.7);text-align:center}
.relay-cap{font-family:var(--mono);font-size:10.2px;color:var(--dim);line-height:1.55;margin-top:10px}
.relay-meta{font-family:var(--mono);font-size:10.8px;color:var(--muted);text-align:left;line-height:1.85;margin-top:10px}
.relay-meta b{color:var(--dim);font-weight:400;display:inline-block;min-width:66px}
.relay-ct{
  height:74px;overflow:hidden;border:1px solid var(--line);border-radius:6px;
  background:#04060C;margin-top:11px;padding:6px;text-align:left;
  font-family:var(--mono);font-size:9.6px;line-height:1.5;color:var(--dim);
  word-break:break-all;
}
.dest-out{
  min-height:132px;background:#04060C;border:1px solid var(--line);border-radius:8px;
  padding:11px 12px;font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--phos);
  white-space:pre-wrap;word-break:break-word;
}
.dest-out .cursor{
  display:inline-block;width:7px;height:14px;background:var(--phos);vertical-align:-2px;
  animation:blink 1s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}
.dest-locked{display:flex;align-items:center;justify-content:center;min-height:132px;color:var(--dim);flex-direction:column;gap:9px}
.dest-locked svg{width:38px;height:38px}
.dest-locked span{font-family:var(--mono);font-size:10.6px;letter-spacing:.14em;text-transform:uppercase}
.console-audit{
  border-top:1px solid var(--line);padding:12px 15px;
  font-family:var(--mono);font-size:11.5px;color:var(--dim);line-height:1.85;
  word-break:break-all;
}
.console-audit .ok{color:var(--phos)}
.console-raw{
  border-top:1px solid var(--line);background:#04060C;
}
.console-raw pre{margin:0;padding:14px 15px;font-family:var(--mono);font-size:11.6px;line-height:1.7;color:var(--muted);overflow-x:auto;white-space:pre}
.console-raw[hidden]{display:none}
.console-err{color:var(--amber);font-family:var(--mono);font-size:12px;padding:0 15px 12px}

/* ---------- 18. cipher drift canvas ---------- */
.drift{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
}
.band > .wrap{position:relative;z-index:1}
.band-img{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-repeat:no-repeat;background-size:cover;background-position:center;
}
.band-scrim{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,7,13,.92),rgba(5,7,13,.72) 45%,rgba(5,7,13,.97));
}

/* page header band */
.phead{
  position:relative;overflow:hidden;
  padding:clamp(56px,9vw,110px) 0 clamp(44px,6vw,72px);
  border-bottom:1px solid var(--line);
}
.phead h1{max-width:16ch}
.phead .lede{margin-top:20px}

/* ---------- 19. footer ---------- */
.foot{border-top:1px solid var(--line);background:var(--bg-deep);padding:clamp(40px,5vw,62px) 0 30px}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(3,minmax(0,1fr));gap:28px}
@media (max-width:860px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.foot-grid{grid-template-columns:minmax(0,1fr)}}
.foot h4{font-family:var(--mono);font-size:10.8px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);font-weight:400;margin:0 0 13px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin:0 0 9px}
.foot a{font-family:var(--mono);font-size:12.4px;color:var(--muted)}
.foot a:hover{color:var(--phos)}
.foot-brand p{font-size:13.4px;color:var(--dim);max-width:34ch;margin:14px 0 0;line-height:1.6}
.foot-base{
  margin-top:36px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  font-family:var(--mono);font-size:11.4px;color:var(--dim);letter-spacing:.04em;
}
.foot-base .sp{flex:1}

/* ---------- 20. misc components ---------- */
.deflist{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.deflist li{margin:0;background:var(--bg);padding:16px 18px;max-width:none}
.deflist dt,.deflist .dt{font-family:var(--mono);font-size:12.4px;color:var(--phos);letter-spacing:.04em;margin-bottom:5px}
.deflist dd,.deflist .dd{margin:0;color:var(--muted);font-size:14.4px;line-height:1.6}

.note{
  border-left:2px solid var(--brass);padding:2px 0 2px 15px;
  font-family:var(--mono);font-size:12.4px;color:var(--muted);line-height:1.7;
}
.note.amber{border-left-color:var(--amber);color:var(--amber)}
.note.phos{border-left-color:var(--phos)}

.callout{
  border:1px solid rgba(196,206,220,.4);border-radius:10px;padding:18px 20px;
  background:rgba(196,206,220,.05);
}
.callout h4{font-family:var(--mono);font-size:11.6px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin:0 0 9px;font-weight:400}
.callout p{margin:0;font-size:14.4px;color:var(--muted)}

.numlist{list-style:none;margin:0;padding:0;counter-reset:n}
.numlist > li{
  margin:0;padding:18px 0;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:52px minmax(0,1fr);gap:16px;max-width:none;
}
.numlist > li::before{
  counter-increment:n;content:"0" counter(n);
  font-family:var(--mono);font-size:12px;color:var(--brass);letter-spacing:.14em;padding-top:3px;
}
.numlist h3{margin:0 0 7px}
.numlist p{margin:0;font-size:14.6px;color:var(--muted)}

.anchor-rail{
  position:sticky;top:calc(var(--nav-h) + 20px);align-self:start;
  border-left:1px solid var(--line);padding-left:16px;
}
.anchor-rail ul{list-style:none;margin:0;padding:0}
.anchor-rail li{margin:0 0 3px}
.anchor-rail a{
  font-family:var(--mono);font-size:11.6px;color:var(--dim);letter-spacing:.05em;
  display:block;padding:5px 0;transition:color var(--t-micro) var(--latch);
}
.anchor-rail a:hover,.anchor-rail a.active{color:var(--phos);text-decoration:none}
@media (max-width:1000px){.anchor-rail{display:none}}
/* docs layout: rail + content, collapsing to a single column with the rail */
.docgrid{
  display:grid;grid-template-columns:190px minmax(0,1fr);
  gap:44px;padding-top:clamp(40px,5vw,64px);
}
@media (max-width:1000px){
  .docgrid{grid-template-columns:minmax(0,1fr);gap:0}
}

.hopgrid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:0}
@media (max-width:760px){.hopgrid{grid-template-columns:minmax(0,1fr)}}

.metricrow{
  display:flex;flex-wrap:wrap;gap:18px;
  font-family:var(--mono);font-size:12px;color:var(--muted);
  border-top:1px solid var(--line);padding-top:12px;margin-top:4px;
}
.metricrow b{display:block;color:var(--phos);font-size:16px;font-weight:400;margin-bottom:2px;font-variant-numeric:tabular-nums}
.metricrow span{color:var(--dim);font-size:10.6px;letter-spacing:.12em;text-transform:uppercase}

/* section separator rule with brass tick */
.rule{height:1px;background:var(--line);position:relative;margin:0}
.rule::after{content:"";position:absolute;left:0;top:-1px;width:44px;height:3px;background:var(--brass);opacity:.75}

/* ---------- 20a. hero: the seal gate ---------- */
.hero{
  position:relative;overflow:hidden;
  min-height:min(760px,calc(100vh - var(--nav-h)));
  display:flex;align-items:center;
  padding:clamp(48px,7vw,86px) 0 clamp(52px,7vw,90px);
  border-bottom:1px solid var(--line);
}
#sealgate{position:absolute;inset:0;z-index:0;width:100%;height:100%}
.hero-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(78% 62% at 50% 50%,rgba(5,7,13,.90) 0%,rgba(5,7,13,.62) 46%,rgba(5,7,13,.18) 78%,transparent 100%),
    linear-gradient(180deg,rgba(5,7,13,.55),transparent 22%,transparent 74%,rgba(5,7,13,.85));
}
.hero-in{position:relative;z-index:2;width:100%}
.hero h1{
  margin:0 0 20px;max-width:14ch;
  font-size:clamp(38px,7.4vw,72px);letter-spacing:-0.022em;
}
.hero .lede{max-width:58ch;margin:0 0 30px}
.hero .cta-row{margin-bottom:24px}
.hero-cap{
  font-family:var(--mono);font-size:11.6px;color:var(--dim);letter-spacing:.09em;
  margin:20px 0 0;opacity:0;transition:opacity 400ms var(--latch);
}
.hero-cap.show{opacity:1}
.hero-cap i{font-style:normal;color:var(--brass)}

/* ---------- 20b. the Imperial Signet — load ceremony ----------
   The mark is a stamp being made, in the order a stamp is actually made:
     1. the hop-chain dash arrives from both edges   (the route exists)
     2. the steel registration ring DRAWS            (custody registers it)
     3. the tyrian wax DROPS and overshoots          (the seal is poured)
     4. the keyway PUNCHES through the wax           (the seal is struck)
     5. the four arc-cyan ticks latch                (verification reads live)
   One ~700ms ceremony on load. Never loops. r=43 ring -> circumference 271. */
.kmark .km-wax,.kmark .km-key,.kmark .km-ticks,
.kmark .km-hop-l,.kmark .km-hop-r{transform-box:view-box}
.kmark .km-wax{transform-origin:60px 58px}
.kmark .km-key{transform-origin:60px 62px}
.kmark .km-ticks{transform-origin:60px 60px}
.kmark .km-ring{stroke-dasharray:271;stroke-dashoffset:0}
.kmark.attesting .km-hop-l{animation:kmHopL 420ms var(--latch) both}
.kmark.attesting .km-hop-r{animation:kmHopR 420ms var(--latch) both}
.kmark.attesting .km-rim{animation:kmFade 260ms 60ms linear both}
.kmark.attesting .km-ring{animation:kmRing 300ms 60ms var(--latch) both}
.kmark.attesting .km-wax{animation:kmPour 300ms 300ms var(--latch) both}
.kmark.attesting .km-key{animation:kmPunch 200ms 500ms var(--latch) both}
.kmark.attesting .km-ticks{animation:kmTicks 180ms 560ms var(--latch) both}
@keyframes kmHopL{0%{transform:translateX(-9px);opacity:0}70%{opacity:1}100%{transform:none;opacity:1}}
@keyframes kmHopR{0%{transform:translateX(9px);opacity:0}70%{opacity:1}100%{transform:none;opacity:1}}
@keyframes kmFade{from{opacity:0}to{opacity:.45}}
@keyframes kmRing{from{stroke-dashoffset:271;opacity:0}to{stroke-dashoffset:0;opacity:1}}
/* the pour: falls from above, spreads past its footprint, settles back */
@keyframes kmPour{
  0%{transform:translateY(-13px) scale(.34);opacity:0}
  58%{transform:translateY(0) scale(1.24);opacity:1}
  100%{transform:translateY(0) scale(1);opacity:1}
}
/* the punch: the keyway is driven in, so it arrives oversized and seats */
@keyframes kmPunch{
  0%{transform:scale(1.5);opacity:0}
  70%{transform:scale(.95);opacity:1}
  100%{transform:scale(1);opacity:1}
}
@keyframes kmTicks{0%{transform:scale(.7);opacity:0}100%{transform:scale(1);opacity:1}}
.kmark.prelatched .km-ring{stroke-dashoffset:0}
.brandlink:hover .km-rim{stroke:#E4EAF2;opacity:.8}
.brandlink .km-rim{transition:stroke var(--t-micro) var(--latch),opacity var(--t-micro) var(--latch)}

/* ---------- 20c. envelope-anatomy exploded stack ---------- */
.anatomy{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(20px,3vw,40px);align-items:center}
@media (max-width:900px){.anatomy{grid-template-columns:minmax(0,1fr)}}
.anatomy-stage{
  position:relative;border:1px solid var(--line);border-radius:12px;background:var(--glass);
  padding:18px;overflow:hidden;
}
.anatomy-stage svg{width:100%;height:auto}
.alayer{cursor:pointer;transition:transform 280ms var(--latch),opacity 280ms var(--latch)}
.alayer .plate{fill:rgba(160,190,255,.05);stroke:var(--line-2);stroke-width:1}
.alayer .lbl{font-family:var(--mono);font-size:9px;letter-spacing:.14em;fill:var(--muted)}
.anatomy-stage.lift .alayer{opacity:.35}
.anatomy-stage.lift .alayer.on{opacity:1}
.alayer.on .plate{stroke:var(--phos)}
.anatomy-notes{list-style:none;margin:0;padding:0}
.anatomy-notes li{
  margin:0;padding:13px 0;border-bottom:1px solid var(--line);max-width:none;
  transition:opacity 180ms var(--latch);
}
.anatomy-notes li .fld{font-family:var(--mono);font-size:12px;color:var(--phos)}
.anatomy-notes li .txt{display:block;color:var(--muted);font-size:14.2px;margin-top:4px}
.anatomy-notes.focusing li{opacity:.32}
.anatomy-notes.focusing li.on{opacity:1}

/* ---------- 20d. key ceremony scroll scene ---------- */
.ceremony{position:relative;height:300vh}
.ceremony-stage{
  position:sticky;top:0;height:100vh;min-height:560px;
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(16px,3vw,44px);align-items:center;
}
@media (max-width:860px){
  .ceremony{height:auto}
  .ceremony-stage{position:static;height:auto;min-height:0;grid-template-columns:minmax(0,1fr);padding:20px 0}
}
.ceremony-svg{width:100%;height:auto;max-height:74vh}
.ck-line{fill:none;stroke:var(--brass);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ck-ghost{fill:none;stroke:var(--wax);stroke-width:1.4;opacity:0}
.ck-node text{font-family:var(--mono);font-size:9.4px;letter-spacing:.13em;fill:var(--muted)}
.ck-node circle{fill:none;stroke:var(--line-2);stroke-width:1}
.ck-stamp{opacity:0;transform-origin:center}
.ck-stamp rect{fill:none;stroke:var(--wax);stroke-width:2}
.ck-stamp text{font-family:var(--mono);font-size:13px;letter-spacing:.24em;fill:var(--wax)}
.ck-ledger{font-family:var(--mono);font-size:12px;fill:var(--phos);opacity:0}
.ceremony-copy{display:grid;gap:16px}
.ceremony-copy .blk{
  border-left:2px solid var(--line);padding-left:16px;opacity:.28;
  transition:opacity 280ms var(--latch),border-color 280ms var(--latch);
}
.ceremony-copy .blk.on{opacity:1;border-left-color:var(--brass)}
.ceremony-copy h3{margin:0 0 7px;font-size:19px}
.ceremony-copy p{margin:0;font-size:14.6px;color:var(--muted)}
@media (max-width:860px){.ceremony-copy .blk{opacity:1;border-left-color:var(--brass)}}

/* ---------- 20e. usage band explorer ---------- */
.bander{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
@media (max-width:860px){.bander{grid-template-columns:minmax(0,1fr)}}
.rail-field{margin-bottom:30px}
.rail-field label{
  display:block;font-family:var(--mono);font-size:11.4px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);margin-bottom:12px;
}
.rail-field .val{
  font-family:var(--mono);font-size:23px;color:var(--phos);
  font-variant-numeric:tabular-nums;display:block;margin-bottom:14px;
}
.keyrail{position:relative;padding:12px 0 6px}
.keyrail input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;background:transparent;
  height:30px;margin:0;display:block;cursor:pointer;
}
.keyrail input[type=range]::-webkit-slider-runnable-track{
  height:3px;background:linear-gradient(90deg,rgba(196,206,220,.75),rgba(196,206,220,.3));border-radius:2px;
}
.keyrail input[type=range]::-moz-range-track{
  height:3px;background:linear-gradient(90deg,rgba(196,206,220,.75),rgba(196,206,220,.3));border-radius:2px;
}
.keyrail input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:15px;height:22px;margin-top:-9.5px;
  background:linear-gradient(180deg,#E4EAF2,#8C97A8);border:1px solid #5A6472;
  border-radius:3px 3px 5px 5px;cursor:pointer;
  transition:transform 180ms var(--latch);
}
.keyrail input[type=range]::-moz-range-thumb{
  width:15px;height:22px;background:linear-gradient(180deg,#E4EAF2,#8C97A8);
  border:1px solid #5A6472;border-radius:3px 3px 5px 5px;cursor:pointer;
}
.keyrail.tick input[type=range]::-webkit-slider-thumb{transform:rotate(15deg) translateY(-1px)}
.keyrail.tick input[type=range]::-moz-range-thumb{transform:rotate(15deg) translateY(-1px)}
.keyrail .notches{display:flex;justify-content:space-between;margin-top:2px;padding:0 6px}
.keyrail .notches span{
  width:1px;height:7px;background:rgba(196,206,220,.5);display:block;position:relative;
}
.keyrail .labels{display:flex;justify-content:space-between;margin-top:7px;padding:0 2px}
.keyrail .labels span{font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:.04em}
.band-readout{
  border:1px solid var(--line);border-top:2px solid var(--brass);border-radius:12px;
  background:var(--glass);padding:clamp(20px,2.6vw,28px);
}
.band-name{
  font-family:var(--serif);font-size:clamp(28px,4vw,40px);font-weight:600;
  color:var(--ink);margin:0 0 10px;transition:opacity var(--t-micro) var(--latch);
}
.band-who{color:var(--muted);font-size:15px;margin:0 0 20px}
.band-meter{
  border-top:1px solid var(--line);padding-top:16px;margin-top:4px;
  font-family:var(--mono);font-size:12.6px;color:var(--muted);line-height:1.8;
}
.band-meter b{color:var(--phos);font-weight:400}
.band-meter .inc{color:var(--dim)}
.band-foot{
  font-family:var(--mono);font-size:11.4px;color:var(--dim);
  border-top:1px solid var(--line);margin-top:18px;padding-top:14px;line-height:1.7;
}

/* ---------- 20f. billing timeline ---------- */
.timeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;counter-reset:s}
@media (max-width:860px){.timeline{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.timeline{grid-template-columns:minmax(0,1fr)}}
.tstep{border:1px solid var(--line);border-radius:11px;background:var(--glass);padding:20px 18px}
.tstep .env-glyph{width:44px;height:30px;margin-bottom:14px}
.tstep .env-glyph .shell{fill:none;stroke:var(--line-2);stroke-width:1.2}
.tstep .env-glyph .fold{fill:none;stroke:var(--dim);stroke-width:1.2}
.tstep .env-glyph .wax{fill:var(--wax);opacity:0;transform-origin:22px 15px}
.tstep.sealed .env-glyph .shell{stroke:var(--phos)}
.tstep.sealed .env-glyph .wax{animation:waxPop 380ms var(--latch) forwards}
@keyframes waxPop{0%{opacity:0;transform:scale(.4)}70%{opacity:1;transform:scale(1.16)}100%{opacity:1;transform:scale(1)}}
.tstep h3{font-size:17px;margin:0 0 8px}
.tstep p{font-size:14px;color:var(--muted);margin:0}
.tstep .step-n{font-family:var(--mono);font-size:11px;color:var(--brass);letter-spacing:.2em;display:block;margin-bottom:10px}

/* ---------- 20g. origin-strip link→envelope glyph ---------- */
.forge{max-width:420px;width:100%}
.forge .lk{stroke:var(--dim);stroke-width:2;fill:none;transition:opacity 400ms var(--latch)}
.forge .ev{stroke:var(--phos);stroke-width:2;fill:none;stroke-dasharray:220;stroke-dashoffset:220;transition:stroke-dashoffset 400ms var(--latch)}
.forge .sealdot{fill:var(--wax);opacity:0;transform-origin:center;transition:opacity 200ms var(--latch) 260ms}
.forge.on .lk,.forge:hover .lk,.forge:focus-visible .lk{opacity:.16}
.forge.on .ev,.forge:hover .ev,.forge:focus-visible .ev{stroke-dashoffset:0}
.forge.on .sealdot,.forge:hover .sealdot,.forge:focus-visible .sealdot{opacity:1}
.forge .cap{font-family:var(--mono);font-size:9px;letter-spacing:.15em;fill:var(--dim)}
/* a JS-free copy of the forge: already re-forged, replays on hover/focus */
.forge-static .lk{opacity:.16}
.forge-static .ev{stroke-dashoffset:0}
.forge-static .sealdot{opacity:1}
.forge-static:hover .ev,.forge-static:focus-visible .ev{animation:forgeReplay 400ms var(--latch)}
.forge-static:hover .sealdot,.forge-static:focus-visible .sealdot{animation:sealdotReplay 400ms var(--latch)}
@keyframes forgeReplay{from{stroke-dashoffset:220}to{stroke-dashoffset:0}}
@keyframes sealdotReplay{0%,65%{opacity:0}100%{opacity:1}}

/* ---------- 20h. integration chips ---------- */
.intgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:860px){.intgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.intchip{
  border:1px solid var(--line);border-radius:10px;background:var(--glass);
  padding:16px 14px;display:flex;flex-direction:column;gap:11px;
  transition:border-color var(--t-card) var(--latch),transform var(--t-card) var(--latch);
}
.intchip:hover{border-color:rgba(47,212,230,.5);transform:translateY(-2px)}
.intchip svg{width:22px;height:22px;stroke:var(--muted);fill:none;stroke-width:1.2}
.intchip:hover svg{stroke:var(--phos)}
.intchip .nm{font-family:var(--mono);font-size:11.6px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.intchip .ds{font-size:12.6px;color:var(--dim);line-height:1.5}

/* ---------- 20i. sequence diagram ---------- */
.seqwrap{overflow-x:auto;border:1px solid var(--line);border-radius:11px;background:var(--glass);padding:12px}
.seqwrap svg{min-width:660px}
.seq-actor rect{fill:rgba(160,190,255,.05);stroke:var(--line-2)}
.seq-actor text{font-family:var(--mono);font-size:10px;letter-spacing:.13em;fill:var(--muted)}
.seq-life{stroke:var(--line-2);stroke-dasharray:3 5}
.seq-step{opacity:.3;transition:opacity 280ms var(--latch)}
.seq-step.on{opacity:1}
.seq-step line,.seq-step path{stroke:var(--phos);stroke-width:1.2;fill:none}
.seq-step.brasso line,.seq-step.brasso path{stroke:var(--brass)}
.seq-step text{font-family:var(--mono);font-size:9.6px;fill:var(--muted)}
.seq-step.on text{fill:var(--ink)}

/* ---------- 20j. endpoint reference ---------- */
.endp{border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--glass)}
.endp .row{border-bottom:1px solid var(--line)}
.endp .row:last-child{border-bottom:0}
.acc-btn.endp-btn{
  font-family:var(--mono);font-size:12.8px;font-weight:400;
  padding:13px 15px;gap:12px;align-items:center;
}
.acc-btn.endp-btn:hover{color:var(--ink);background:rgba(160,190,255,.03)}
.verb{
  flex:0 0 auto;font-size:10.5px;letter-spacing:.14em;padding:3px 8px;border-radius:5px;
  border:1px solid var(--line-2);color:var(--muted);min-width:52px;text-align:center;
}
.verb.post{color:var(--phos);border-color:rgba(47,212,230,.45)}
.verb.get{color:var(--brass);border-color:rgba(196,206,220,.45)}
.endp-path{flex:0 0 auto;color:var(--ink)}
.endp-sum{flex:1;min-width:0;color:var(--dim);font-size:11.6px;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:680px){
  .acc-btn.endp-btn{flex-wrap:wrap}
  .endp-sum{text-align:left;white-space:normal;width:100%}
}
.endp .acc-panel-in{padding:0}
.endp .acc-panel-in pre{
  margin:0;padding:14px 15px;background:#04060C;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11.9px;line-height:1.72;color:var(--muted);
  overflow-x:auto;white-space:pre;
}

/* ---------- 20k. event & sdk grids ---------- */
.evgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:760px){.evgrid{grid-template-columns:minmax(0,1fr)}}
.evcard{border:1px solid var(--line);border-radius:11px;background:var(--glass);overflow:hidden}
.evcard .h{
  padding:11px 14px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:12.4px;color:var(--phos);
  display:flex;align-items:center;gap:10px;
}
.evcard .h .w{color:var(--dim);font-size:10.6px;letter-spacing:.12em;margin-left:auto;text-transform:uppercase}
.evcard.amberish .h{color:var(--amber)}
.evcard pre{margin:0;padding:13px 14px;font-family:var(--mono);font-size:11.6px;line-height:1.7;color:var(--muted);overflow-x:auto;white-space:pre;background:#04060C}
.sdkrow{display:flex;flex-wrap:wrap;gap:10px}
.sdk{
  display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:9px;
  padding:10px 14px;background:var(--glass);font-family:var(--mono);font-size:12.4px;color:var(--ink);
  transition:border-color var(--t-micro) var(--latch),transform var(--t-micro) var(--latch);
}
.sdk:hover{border-color:rgba(47,212,230,.5);transform:translateY(-2px)}
.sdk .v{color:var(--dim);font-size:11px}

/* ---------- 20l. case-study metrics ---------- */
.caseband{position:relative;overflow:hidden}
.addr{
  border:1px solid rgba(196,206,220,.4);border-radius:10px;padding:0;overflow:hidden;background:var(--glass);
  max-width:460px;
}
.addr .flap{
  height:54px;border-bottom:1px solid var(--line);position:relative;
  background:linear-gradient(160deg,rgba(160,190,255,.04),transparent 60%);
}
.addr .flap::after{
  content:"";position:absolute;inset:0;
  border-bottom:1px solid rgba(160,190,255,.12);
  clip-path:polygon(0 0,100% 0,50% 100%);
}
.addr .body{padding:18px 20px;font-family:var(--mono);font-size:13px;line-height:1.9;color:var(--muted)}
.addr .body a{color:var(--phos)}
.addr .body .lbl{color:var(--dim);font-size:10.6px;letter-spacing:.16em;text-transform:uppercase;display:block;margin-bottom:6px}
.addr .stampdot{
  position:absolute;right:18px;top:14px;width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#CE7BE0,#AE47C2 60%,#5E2370);
}

/* ---------- 20m. service cards that open themselves ---------- */
/* Home's service menu must never hide a service behind an interaction: the
   seal cracks on scroll-in and the flap is already open. These cards are not
   buttons — they carry a real link, so no role/tabindex is applied. */
.wcard-auto{cursor:default}
.wcard-auto .wcard-body{padding-bottom:20px}
.wcard-auto .wcard-face{min-height:300px}
.wcard-auto{min-height:300px}
.wcard-deliv{list-style:none;margin:0 0 14px;padding:0}
.wcard-deliv li{
  margin:0 0 7px;padding-left:16px;position:relative;max-width:none;
  font-size:13.4px;line-height:1.5;color:var(--dim);
}
.wcard-deliv li::before{content:"·";position:absolute;left:4px;color:var(--brass)}
.wcard-link{
  font-family:var(--mono);font-size:11.5px;color:var(--phos);letter-spacing:.06em;
  display:inline-block;
}

/* ---------- 20n. the ten-second proof (condensed seal demo) ---------- */
.mini{
  border:1px solid var(--line);border-top:1px solid var(--brass);border-radius:11px;
  background:var(--glass);overflow:hidden;
}
.mini-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:16px 15px}
.mini-in{
  flex:1 1 260px;min-width:0;background:#04060C;color:var(--ink);
  border:1px solid var(--line);border-radius:8px;padding:12px 13px;
  font-family:var(--mono);font-size:13px;
}
.mini-in:focus-visible{border-color:rgba(47,212,230,.5);outline:2px solid var(--brass);outline-offset:1px}
.mini-out{
  border-top:1px solid var(--line);background:#04060C;padding:13px 15px;
  font-family:var(--mono);font-size:11.6px;line-height:1.6;color:var(--phos);
  word-break:break-all;min-height:56px;
}
.mini-out .lbl{color:var(--dim);display:block;font-size:10.4px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:5px}
.mini-cap{
  margin:0;padding:12px 15px;border-top:1px solid var(--line);
  font-size:13.6px;color:var(--muted);max-width:none;
}
.mini-err{color:var(--amber);font-family:var(--mono);font-size:12px;padding:0 15px 12px;margin:0}

/* ---------- 20o. scenario tiles (who hires us) ---------- */
.scengrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,20px)}
@media (max-width:760px){.scengrid{grid-template-columns:minmax(0,1fr)}}
.scen{
  border:1px solid var(--line);border-radius:12px;background:var(--glass);
  padding:clamp(18px,2.3vw,24px);display:flex;flex-direction:column;
  transition:border-color var(--t-card) var(--latch),transform var(--t-card) var(--latch);
}
.scen:hover{border-color:rgba(47,212,230,.45);transform:translateY(-2px)}
.scen .lbl{
  font-family:var(--mono);font-size:10.8px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);display:block;margin-bottom:12px;
}
.scen .lbl::before{content:"// ";color:var(--brass)}
.scen p{font-size:15px;color:var(--ink);margin:0 0 14px;max-width:none}
.scen .to{
  font-family:var(--mono);font-size:11.6px;color:var(--phos);letter-spacing:.04em;
  margin-top:auto;
}
.scen .to span{color:var(--dim)}

/* ---------- 20p. mono checklist card ---------- */
.checklist{
  list-style:none;margin:0;padding:0;
  border:1px solid var(--line);border-radius:11px;background:var(--glass);
  overflow:hidden;
}
.checklist li{
  margin:0;max-width:none;padding:15px 18px 15px 46px;position:relative;
  border-bottom:1px solid var(--line);font-size:14.6px;color:var(--muted);line-height:1.6;
}
.checklist li:last-child{border-bottom:0}
.checklist li::before{
  content:"✓";position:absolute;left:18px;top:14px;
  font-family:var(--mono);font-size:12.5px;color:var(--phos);
}

/* ---------- 20q. three-beat flow (you send / we carry / they open) ---------- */
.flow3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,22px)}
@media (max-width:760px){.flow3{grid-template-columns:minmax(0,1fr)}}
.flow3 .step{
  border:1px solid var(--line);border-radius:12px;background:var(--glass);
  padding:clamp(18px,2.3vw,24px);position:relative;
}
.flow3 .step .n{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--brass);
  display:block;margin-bottom:10px;
}
.flow3 .step h3{margin:0 0 9px;font-size:20px}
.flow3 .step p{margin:0;font-size:14.6px;color:var(--muted);max-width:none}
.flow3 .step + .step::before{
  content:"";position:absolute;left:-14px;top:50%;width:9px;height:9px;
  border-top:1px solid var(--brass);border-right:1px solid var(--brass);
  transform:translateY(-50%) rotate(45deg);opacity:.7;
}
@media (max-width:760px){
  .flow3 .step + .step::before{left:50%;top:-13px;transform:translateX(-50%) rotate(135deg)}
}

/* ---------- 20r. footer lockup ---------- */
.foot-lock{display:inline-flex;align-items:center;gap:11px}
.foot-lock .kmark{width:30px;height:30px}

/* ==========================================================================
   r3 ADDITIONS
   Every band below must read as finished with its image missing. Images sit
   under scrims, at low opacity, behind a solid or gradient base — never as
   the thing that carries contrast.
   ========================================================================== */

/* ---------- 22a. thin image divider (services | who hires us) ---------- */
.thread-div{
  position:relative;height:140px;overflow:hidden;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,var(--bg-deep),#0B0F1C 50%,var(--bg-deep));
}
.thread-div .thread-img{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.42;
  background-repeat:no-repeat;background-size:cover;background-position:center;
}
.thread-div::after{ /* the edges always fade into the bands above and below */
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,var(--bg-deep),transparent 38%,transparent 62%,var(--bg));
}
@media (max-width:620px){.thread-div{height:96px}}

/* ---------- 22b. service card header plates ---------- */
.wcard-plate{
  position:relative;height:104px;overflow:hidden;flex:0 0 auto;
  border-radius:12px 12px 0 0;border-bottom:1px solid var(--line);
  /* the gradient IS the design; the photograph is a bonus layer on top */
  background:
    radial-gradient(120% 130% at 22% 8%,rgba(206,123,224,.30),transparent 62%),
    linear-gradient(118deg,var(--wax-dark),#0A0C18 68%);
}
.wcard-plate img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:.62;
}
.wcard-plate::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(5,7,13,.86));
}
.wcard-plate .pn{
  position:absolute;left:14px;bottom:9px;z-index:2;
  font-family:var(--mono);font-size:10.6px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--brass);
}
.wcard-lean .wcard-face{min-height:0;display:flex;flex-direction:column}
.wcard-lean,.wcard-lean .wcard-face{min-height:284px}
.wcard-lean .wcard-body{padding:18px 20px 22px;flex:1 1 auto;display:flex;flex-direction:column}
.wcard-lean .wcard-body p{margin-bottom:16px}
.wcard-lean .wcard-link{margin-top:auto}
.wcard-lean .wcard-flap{z-index:4}
.wcard-lean .wseal{top:38%}
/* the homepage service menu is a four-up now that each card carries a plate */
#services .wgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1060px){#services .wgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){#services .wgrid{grid-template-columns:minmax(0,1fr)}}

/* ---------- 22c. scenario chips (who hires us) ---------- */
.scenchips{list-style:none;margin:0;padding:0;display:grid;gap:clamp(12px,1.6vw,16px);grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.scenchips{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.scenchips{grid-template-columns:minmax(0,1fr)}}
.scenchip{
  margin:0;max-width:none;display:flex;flex-direction:column;gap:10px;
  border:1px solid var(--line);border-radius:11px;background:var(--glass);
  padding:16px 16px 14px;
  transition:border-color var(--t-card) var(--latch),transform var(--t-card) var(--latch);
}
.scenchip:hover{border-color:rgba(47,212,230,.45);transform:translateY(-2px)}
.scenchip-glyph{
  width:22px;height:22px;flex:0 0 auto;
  stroke:var(--brass);fill:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;
}
.scenchip-txt{font-size:14px;line-height:1.5;color:var(--ink)}
.scenchip-txt b{font-weight:600;color:var(--ink);display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:5px}
.scenchip-to{font-family:var(--mono);font-size:11.4px;color:var(--phos);letter-spacing:.04em;margin-top:auto}

/* ---------- 22d. engagement timeline (3 nodes on a steel line) ---------- */
.etl{
  list-style:none;margin:0;padding:0;counter-reset:e;position:relative;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px);
}
.etl::before{ /* the steel line the nodes sit on */
  content:"";position:absolute;left:8%;right:8%;top:22px;height:1px;
  background:linear-gradient(90deg,transparent,var(--brass) 12%,var(--brass) 88%,transparent);
  opacity:.5;
}
.etl-step{margin:0;max-width:none;position:relative;padding-top:0}
.etl-node{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--bg);border:1px solid var(--brass);
  font-family:var(--mono);font-size:12.5px;color:var(--brass);letter-spacing:.06em;
  margin-bottom:16px;
}
.etl-node .env-glyph{width:22px;height:15px}
.etl-node .env-glyph .shell{fill:none;stroke:var(--phos);stroke-width:1.3}
.etl-node .env-glyph .fold{fill:none;stroke:var(--dim);stroke-width:1.3}
.etl-node .env-glyph .wax{fill:var(--wax);opacity:0;transform-box:view-box;transform-origin:22px 17px}
.etl.in .etl-node .env-glyph .wax{animation:waxPop 380ms var(--latch) 620ms forwards}
.etl-step h3{margin:0 0 7px;font-size:18px}
.etl-step p{margin:0;font-size:14.4px;color:var(--muted);max-width:34ch}
@media (max-width:760px){
  .etl{grid-template-columns:minmax(0,1fr);gap:0}
  .etl::before{left:21px;right:auto;top:16px;bottom:26px;width:1px;height:auto;
    background:linear-gradient(180deg,transparent,var(--brass) 8%,var(--brass) 92%,transparent)}
  .etl-step{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding-bottom:22px}
  .etl-node{margin-bottom:0}
  .etl-step h3{grid-column:2}
  .etl-step p{grid-column:2;margin-top:7px}
}

/* ---------- 22e. THE PIPELINE STRIP (homepage interactive) ----------
   Drag a document into the conduit and it seals; the docked readout shows
   the complete set of things KryptAPI can see while it is in there. */
.pstrip{border:1px solid var(--line);border-radius:12px;background:var(--glass);overflow:hidden}
.pstrip-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.pstrip-svg{display:block;min-width:940px;width:100%;height:auto;touch-action:pan-y}
.ps-station .plate{fill:rgba(160,190,255,.05);stroke:var(--line-2);stroke-width:1}
.ps-station .t{font-family:var(--mono);font-size:10.4px;letter-spacing:.2em;fill:var(--muted)}
.ps-station .glyph{fill:none;stroke:var(--muted);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.ps-cap{font-family:var(--mono);font-size:10.6px;letter-spacing:.03em;fill:var(--dim)}
.ps-tube{fill:rgba(47,212,230,.05);stroke:var(--line-2);stroke-width:1}
.ps-flow{stroke:var(--phos);stroke-width:1.1;fill:none;opacity:.32;stroke-dasharray:5 10;animation:dashMove 1.7s linear infinite}
.ps-mouth{stroke:var(--brass);stroke-width:1.3;fill:none;opacity:.55}
.ps-token{cursor:grab}
.ps-token .box{fill:#04060C;stroke:var(--brass);stroke-width:1.2;transition:stroke var(--t-micro) var(--latch)}
.ps-token .lbl{font-family:var(--mono);font-size:11.4px;fill:var(--ink);transition:fill var(--t-micro) var(--latch)}
.ps-token .wax{fill:var(--wax);opacity:0}
.ps-token .focusring{fill:none;stroke:var(--brass);stroke-width:1.5;stroke-dasharray:3 3;opacity:0}
.ps-token:focus{outline:none}
.ps-token:focus-visible .focusring{opacity:1}
.pstrip.sealed .ps-token .box{stroke:var(--phos)}
.pstrip.sealed .ps-token .lbl{fill:var(--phos)}
.pstrip.sealed .ps-token .wax{opacity:1}
.ps-read .panel{fill:#04060C;stroke:var(--line-2);stroke-width:1}
.ps-read .h{font-family:var(--mono);font-size:9.6px;letter-spacing:.18em;fill:var(--dim)}
.ps-read .k{font-family:var(--mono);font-size:10.4px;fill:var(--dim)}
.ps-read .v{font-family:var(--mono);font-size:10.4px;fill:var(--brass)}
.ps-read .cap{font-family:var(--mono);font-size:10px;fill:var(--phos);letter-spacing:.04em}
.ps-noise rect{fill:var(--phos);opacity:.26}
.ps-read{opacity:0;transition:opacity 200ms var(--latch)}
.pstrip.inside .ps-read{opacity:1}
.ps-receipt{font-family:var(--mono);font-size:11px;fill:var(--phos);opacity:0;transition:opacity 220ms var(--latch)}
.pstrip.opened .ps-receipt{opacity:1}
.pstrip-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding:11px 14px;background:rgba(160,190,255,.025);
}
.pstrip-btn{
  font-family:var(--mono);font-size:11.4px;letter-spacing:.04em;
  color:var(--muted);background:transparent;border:1px solid var(--line-2);
  border-radius:7px;padding:7px 12px;cursor:pointer;flex:0 0 auto;
  transition:color var(--t-micro) var(--latch),border-color var(--t-micro) var(--latch);
}
.pstrip-btn:hover{color:var(--ink);border-color:rgba(47,212,230,.5)}
.pstrip-btn[disabled]{opacity:.4;cursor:not-allowed}
.pstrip-read{
  flex:1 1 220px;min-width:0;margin:0;max-width:none;
  font-family:var(--mono);font-size:11.4px;color:var(--dim);line-height:1.5;
}
.pstrip-read b{color:var(--phos);font-weight:400}
.pstrip-hint{
  font-family:var(--mono);font-size:11.2px;color:var(--dim);
  margin:14px 0 0;max-width:none;
}

/* ---------- 22f. THE TAMPER CHAIN (audit & compliance interactive) ---------- */
.tchain{border:1px solid var(--line);border-radius:12px;background:var(--glass);overflow:hidden}
.tchain-scroll{overflow-x:auto;padding:20px 18px 8px}
.tchain-track{display:flex;align-items:stretch;min-width:1080px}
/* --d is the per-block cascade delay, written by the module in one pass; the
   90ms-per-block break is therefore pure CSS and can never half-apply */
.tblock{
  flex:0 0 158px;position:relative;
  border:1px solid var(--line);border-radius:10px;background:#04060C;
  padding:12px 12px 11px;
  transition:border-color 180ms var(--latch) var(--d,0ms),background 180ms var(--latch) var(--d,0ms);
}
.tblock + .tblock{margin-left:28px}
.tblock + .tblock::before{ /* the link line into this block */
  content:"";position:absolute;left:-29px;top:50%;width:28px;height:0;
  border-top:1px solid var(--brass);opacity:.7;
  transition:border-color 180ms var(--latch) var(--d,0ms),opacity 180ms var(--latch) var(--d,0ms);
}
.tblock .tk-prev{transition:color 180ms var(--latch) var(--d,0ms)}
.tblock .tk-n{font-family:var(--mono);font-size:9.6px;letter-spacing:.2em;color:var(--dim);display:block;margin-bottom:8px}
.tblock .tk-l{font-family:var(--mono);font-size:9.4px;letter-spacing:.14em;color:var(--dim);display:block;margin-top:8px}
.tblock .tk-v{font-family:var(--mono);font-size:10.6px;color:var(--muted);display:block;word-break:break-all}
.tblock .tk-prev{color:var(--dim)}
.tevent{
  width:100%;background:transparent;color:var(--phos);
  border:0;border-bottom:1px dashed rgba(47,212,230,.5);border-radius:0;
  font-family:var(--mono);font-size:12.4px;padding:2px 0 3px;margin-top:2px;
}
.tevent:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.tblock.broken{border-color:rgba(232,160,61,.55);background:rgba(232,160,61,.05)}
.tblock.broken + .tblock::before,.tblock.broken::before{border-top-style:dashed;border-top-color:var(--amber);opacity:1}
.tblock.broken .tk-prev{color:var(--amber);text-decoration:line-through}
.tblock.edited .tevent{color:var(--amber);border-bottom-color:rgba(232,160,61,.7)}
.tblock .tick{
  position:absolute;right:9px;top:9px;font-family:var(--mono);font-size:11px;
  color:var(--phos);opacity:0;transition:opacity 160ms var(--latch) var(--d,0ms);
}
.tblock.attested .tick{opacity:1}
.tchain-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding:12px 15px;background:rgba(160,190,255,.025);
}
.tchain-cap{
  flex:1 1 240px;min-width:0;margin:0;max-width:none;
  font-family:var(--mono);font-size:11.6px;color:var(--dim);line-height:1.55;
}
.tchain-cap.hot{color:var(--amber)}
.tchain-hint{font-family:var(--mono);font-size:11.4px;color:var(--dim);margin:0 0 16px;max-width:none}

/* ---------- 22g. THE CARRIER X-RAY (security interactive) ---------- */
/* minmax(0,1fr) — without it a max-content child widens the whole grid track
   and the page picks up a horizontal scrollbar at 360px */
.xray{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.xray > *{min-width:0}
.xray-toggle{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line-2);border-radius:9px;overflow:hidden;width:max-content;max-width:100%}
.xray-toggle button{
  font-family:var(--mono);font-size:11.6px;letter-spacing:.06em;
  background:transparent;border:0;color:var(--muted);padding:10px 16px;cursor:pointer;
  transition:color var(--t-micro) var(--latch),background var(--t-micro) var(--latch);
  white-space:nowrap;
}
.xray-toggle button + button{border-left:1px solid var(--line-2)}
.xray-toggle button:hover{color:var(--ink)}
.xray-toggle button[aria-checked="true"]{color:var(--phos);background:rgba(47,212,230,.09)}
.xray-stage{
  position:relative;border:1px solid var(--line);border-radius:12px;
  background:var(--glass);overflow:hidden;touch-action:pan-y;cursor:crosshair;
}
.xray-stage:focus{outline:none}
.xray-stage:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.xray-svg{display:block;width:100%;height:auto}
.xr-env .shell{fill:#04060C;stroke:var(--brass);stroke-width:1.6}
.xr-noise-base{fill:rgba(47,212,230,.07)}
.xr-env .fold{fill:none;stroke:var(--dim);stroke-width:1.3}
.xr-wax{fill:var(--wax)}
.xr-waxrim{fill:none;stroke:var(--brass);stroke-width:1.2;opacity:.8}
.xr-hidden{font-family:var(--mono);font-size:11px;fill:var(--dim);letter-spacing:.14em}
.xr-meta .k{font-family:var(--mono);font-size:11.4px;fill:var(--dim)}
.xr-meta .v{font-family:var(--mono);font-size:11.4px;fill:var(--brass)}
.xr-plain text{font-family:var(--sans);font-size:13.4px;fill:var(--ink)}
.xr-plain .sig{font-family:var(--serif);font-size:15px;fill:var(--muted)}
.xr-layer{transition:opacity 180ms var(--latch)}
.xr-lens{fill:none;stroke:var(--brass);stroke-width:1.6}
.xr-lens-glow{fill:none;stroke:var(--phos);stroke-width:1;opacity:.4}
.xray-cap{
  font-family:var(--mono);font-size:11.8px;color:var(--muted);margin:0;
  border-left:2px solid var(--brass);padding-left:14px;line-height:1.65;max-width:none;
}
.xray-cap b{color:var(--phos);font-weight:400}
.xray-hint{font-family:var(--mono);font-size:11.4px;color:var(--dim);margin:0;max-width:none}
.xray-compact .xray-stage{max-width:640px}
@media (max-width:560px){
  .xray-toggle{width:100%}
  .xray-toggle button{flex:1 1 100%;text-align:left}
  .xray-toggle button + button{border-left:0;border-top:1px solid var(--line-2)}
}

/* ---------- 21. reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:120ms !important;
    scroll-behavior:auto !important;
  }
  .latch{opacity:1;transform:none;transition:opacity 120ms linear}
  /* the rail latches in a 120ms snap; the seal is simply already cracked */
  .crail{transition:width 120ms linear}
  .crail-seal.cracked .nseal .crack{animation:none;stroke-dashoffset:0}
  .flow3 .step + .step::before{transition:none}
  .wcard.open .wcard-flap,.wcard.closing .wcard-flap{animation:none}
  .wcard.open .wcard-flap{opacity:0;transform:none;pointer-events:none}
  .wcard .wcard-body{transition:opacity 120ms linear}
  .wcard.open .wcard-more{transform:none;opacity:1;transition:opacity 120ms linear}
  .edge .flow{animation:none;opacity:.6}
  .ledger-bar .live i{animation:none}
  .dest-out .cursor{animation:none}
  .kmark .km-ring{stroke-dashoffset:0;opacity:1}
  .kmark .km-rim{opacity:.45}
  .tstep .env-glyph .wax{opacity:1}
  .forge .ev{stroke-dashoffset:0}
  .forge .sealdot{opacity:1}
  .forge .lk{opacity:.16}
  .ceremony{height:auto}
  .ceremony-stage{position:static;height:auto;min-height:0}
  .ceremony-copy .blk{opacity:1;border-left-color:var(--brass)}
  .seq-step{opacity:1}
  /* r3 interactives: every state is still reachable, just instantly */
  .ps-flow{animation:none;opacity:.5}
  .ps-read,.ps-receipt{transition:none}
  .etl .etl-node .env-glyph .wax,.etl.in .etl-node .env-glyph .wax{animation:none;opacity:1}
  .xr-layer{transition:none}
  .tblock,.tblock::before,.tblock .tick{transition:none}
}