/* ============================================================================
   JIDENKA — site styles.  "jide (hold) + nka (craft)" — hold the craft.
   Shared by the landing page and the privacy page. Fully self-contained:
   no external fonts, scripts, images, or network calls. Token subset mirrors
   docs/brand/tokens.css. Both themes via prefers-color-scheme, with a manual
   [data-theme] override that wins in either direction.
   ========================================================================== */

:root{
  color-scheme: light dark;

  /* Open-source families with strong self-hosted-free fallbacks. Fraunces /
     Hanken Grotesk / JetBrains Mono are the brand faces; the fallbacks keep the
     page fully offline and on-brand (an old-style serif, a humanist sans, a
     developer mono) when the webfonts aren't present. */
  --font-display:"Fraunces","Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  --font-ui:"Hanken Grotesk","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-mono:"JetBrains Mono","Cascadia Code","SF Mono","Roboto Mono",Consolas,"Liberation Mono",monospace;

  /* ---- LIGHT (default) ---- */
  --canvas:#f7f5ef; --surface:#ffffff; --surface-raised:#fbfaf4; --surface-sunken:#efede3;
  --text:#1b1a2e; --text-muted:#56546b; --text-subtle:#6c6a80;
  --border:#e2dfd1; --border-strong:#cfcbbb;
  --accent:#3833a0; --accent-hover:#2c2880; --accent-soft:#eeedfa; --on-accent:#ffffff;
  --brass:#835911; --brass-key:#b98a34;
  --shadow-sm:0 1px 2px rgba(27,26,46,.06),0 1px 1px rgba(27,26,46,.04);
  --shadow-md:0 4px 12px rgba(27,26,46,.08),0 2px 4px rgba(27,26,46,.05);
  --shadow-lg:0 22px 50px rgba(27,26,46,.13),0 6px 16px rgba(27,26,46,.08);
  --ring:0 0 0 1px rgba(27,26,46,.05);
  --glow-a:rgba(74,69,196,.14); --glow-b:rgba(205,162,78,.12); --grid:rgba(27,26,46,.045);

  /* trust layer — light */
  --r0:#ecedef;--r0t:#3c4450;--r0l:#cbd0d7;--r0k:#5b6472;
  --r1:#e4f1e8;--r1t:#1f6b3f;--r1l:#b6dbc2;--r1k:#2e8b57;
  --r2:#f6ebcf;--r2t:#7c5807;--r2l:#e4cb84;--r2k:#b5791a;
  --r3:#f7e4d3;--r3t:#94430f;--r3l:#ebbe98;--r3k:#d2691e;
  --r4:#f8dedc;--r4t:#9e241f;--r4l:#eeb4af;--r4k:#c4342e;
  --r5:#f4d8e0;--r5t:#86133a;--r5l:#dfa7b8;--r5k:#8e1f3d;
  --test-bg:#e0f0f4;--test-t:#0c6a80;--test-l:#6fb7c6;
  --live-bg:#3833a0;--live-t:#ffffff;--live-l:#2c2880;
  --ok:#2e8b57;--warn:#b5791a;--scope:#2563c9;--err:#c4342e;
  --ok-bg:#e4f1e8;--ok-t:#1f6b3f;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --canvas:#0d0c18; --surface:#17162b; --surface-raised:#201f3a; --surface-sunken:#12111f;
  --text:#eceaf7; --text-muted:#a7a4c4; --text-subtle:#8a87a6;
  --border:#34324f; --border-strong:#454269;
  --accent:#8480f0; --accent-hover:#9c97f5; --accent-soft:#201f3a; --on-accent:#0d0c18;
  --brass:#cda24e; --brass-key:#cda24e;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 4px 14px rgba(0,0,0,.45),0 2px 4px rgba(0,0,0,.3);
  --shadow-lg:0 26px 54px rgba(0,0,0,.55),0 6px 16px rgba(0,0,0,.4);
  --ring:0 0 0 1px rgba(255,255,255,.06);
  --glow-a:rgba(132,128,240,.16); --glow-b:rgba(205,162,78,.10); --grid:rgba(255,255,255,.04);
  --r0:#22273a;--r0t:#aeb7c6;--r0l:#3a4152;--r0k:#8b93a3;
  --r1:#15301f;--r1t:#6fcf92;--r1l:#28543a;--r1k:#4fb37a;
  --r2:#332810;--r2t:#e8c069;--r2l:#5a4a22;--r2k:#d6a24a;
  --r3:#37220f;--r3t:#f0a167;--r3l:#5e3e20;--r3k:#e08a4a;
  --r4:#3a1a18;--r4t:#f49a91;--r4l:#5e2e2a;--r4k:#e5645c;
  --r5:#351420;--r5t:#f09ab2;--r5l:#552437;--r5k:#e06b8c;
  --test-bg:#0f2e38;--test-t:#66c9e0;--test-l:#2c6273;
  --live-bg:#8480f0;--live-t:#0d0c18;--live-l:#9c97f5;
  --ok:#4fb37a;--warn:#d6a24a;--scope:#6ea0f0;--err:#e5645c;
  --ok-bg:#15301f;--ok-t:#6fcf92;
}}
/* explicit manual override — wins over the media query in both directions */
[data-theme="dark"]{
  --canvas:#0d0c18;--surface:#17162b;--surface-raised:#201f3a;--surface-sunken:#12111f;
  --text:#eceaf7;--text-muted:#a7a4c4;--text-subtle:#8a87a6;--border:#34324f;--border-strong:#454269;
  --accent:#8480f0;--accent-hover:#9c97f5;--accent-soft:#201f3a;--on-accent:#0d0c18;--brass:#cda24e;--brass-key:#cda24e;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 4px 14px rgba(0,0,0,.45),0 2px 4px rgba(0,0,0,.3);
  --shadow-lg:0 26px 54px rgba(0,0,0,.55),0 6px 16px rgba(0,0,0,.4);
  --ring:0 0 0 1px rgba(255,255,255,.06);
  --glow-a:rgba(132,128,240,.16);--glow-b:rgba(205,162,78,.10);--grid:rgba(255,255,255,.04);
  --r0:#22273a;--r0t:#aeb7c6;--r0l:#3a4152;--r0k:#8b93a3;--r1:#15301f;--r1t:#6fcf92;--r1l:#28543a;--r1k:#4fb37a;
  --r2:#332810;--r2t:#e8c069;--r2l:#5a4a22;--r2k:#d6a24a;--r3:#37220f;--r3t:#f0a167;--r3l:#5e3e20;--r3k:#e08a4a;
  --r4:#3a1a18;--r4t:#f49a91;--r4l:#5e2e2a;--r4k:#e5645c;--r5:#351420;--r5t:#f09ab2;--r5l:#552437;--r5k:#e06b8c;
  --test-bg:#0f2e38;--test-t:#66c9e0;--test-l:#2c6273;--live-bg:#8480f0;--live-t:#0d0c18;--live-l:#9c97f5;
  --ok:#4fb37a;--warn:#d6a24a;--scope:#6ea0f0;--err:#e5645c;--ok-bg:#15301f;--ok-t:#6fcf92;
}
[data-theme="light"]{color-scheme:light}

/* ---- base ---- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--font-ui); color:var(--text); background:var(--canvas);
  line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; position:relative; min-height:100vh;
}
/* atmosphere: two soft brand glows + a faint craftsman's grid + fine grain */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60% 45% at 12% -5%, var(--glow-a), transparent 70%),
    radial-gradient(45% 40% at 100% 8%, var(--glow-b), transparent 70%),
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0/ 100% 92px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0/ 92px 100%;
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='0.5'/></svg>");
}
a{color:var(--accent); text-decoration:none}
a:hover{color:var(--accent-hover)}
:focus-visible{outline:none; box-shadow:0 0 0 2px var(--canvas),0 0 0 4px var(--accent); border-radius:6px}
img,svg{max-width:100%}
.wrap{width:min(1120px,100% - 3rem); margin-inline:auto}
.narrow{width:min(760px,100% - 3rem); margin-inline:auto}
.mono{font-family:var(--font-mono)}
.eyebrow{font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-subtle)}
.skip{position:absolute; left:-999px; top:0; background:var(--accent); color:var(--on-accent); padding:.6rem 1rem; border-radius:8px; z-index:60}
.skip:focus{left:1rem; top:1rem}

/* ---- reveal on load ---- */
.rise{opacity:0; transform:translateY(14px); animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes rise{to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.rise{animation:none; opacity:1; transform:none}}

/* ---- top bar ---- */
header.site{position:sticky; top:0; z-index:20; backdrop-filter:saturate(1.2) blur(10px);
  background:color-mix(in srgb, var(--canvas) 82%, transparent); border-bottom:1px solid var(--border)}
.bar{display:flex; align-items:center; gap:1.25rem; height:64px}
.brand{display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:600; font-size:1.35rem; letter-spacing:-.01em; color:var(--text)}
.brand svg{display:block; width:30px; height:30px; flex:none}
.nav{margin-left:auto; display:flex; align-items:center; gap:1.4rem}
.nav a.link{color:var(--text-muted); font-size:.9rem; font-weight:500}
.nav a.link:hover{color:var(--text)}
.tgl{display:inline-grid; place-items:center; width:38px; height:38px; border-radius:10px; border:1px solid var(--border); background:var(--surface); color:var(--text-muted); cursor:pointer}
.tgl:hover{color:var(--text); border-color:var(--border-strong)}
.tgl svg{width:18px; height:18px}
.tgl .moon{display:none}
[data-theme="dark"] .tgl .sun{display:none} [data-theme="dark"] .tgl .moon{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tgl .sun{display:none} :root:not([data-theme="light"]) .tgl .moon{display:block}}

.btn{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-ui); font-weight:600; font-size:.925rem;
  padding:.6rem 1.05rem; border-radius:10px; border:1px solid transparent; cursor:pointer;
  transition:transform .12s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease}
.btn-primary{background:var(--accent); color:var(--on-accent); box-shadow:var(--shadow-md)}
.btn-primary:hover{background:var(--accent-hover); color:var(--on-accent); transform:translateY(-1px)}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--border-strong)}
.btn-ghost:hover{background:var(--surface); border-color:var(--text-subtle)}
@media(max-width:640px){.nav a.link{display:none}}

/* ---- hero ---- */
.hero{padding:5.5rem 0 3.5rem; position:relative}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:3.5rem; align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr; gap:2.5rem}}
.tag{display:inline-flex; align-items:center; gap:.55rem; padding:.3rem .7rem; border:1px solid var(--border); border-radius:999px; background:var(--surface); font-size:.75rem; color:var(--text-muted)}
.tag .k{width:.5rem; height:.5rem; border-radius:50%; background:var(--brass-key); box-shadow:0 0 0 4px color-mix(in srgb,var(--brass-key) 22%, transparent)}
h1{font-family:var(--font-display); font-weight:600; letter-spacing:-.022em; line-height:1.04;
  font-size:clamp(2.5rem,6vw,3.85rem); margin:1.1rem 0 0}
h1 .hold{font-style:italic; color:var(--accent)}
h1 .brassword{color:var(--brass)}
.lede{font-size:1.15rem; color:var(--text-muted); max-width:44ch; margin-top:1.25rem}
.cta{display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; margin-top:2rem}
.microcopy{font-size:.8rem; color:var(--text-subtle); margin-top:.95rem}
.microcopy code,.microcopy .mono{font-family:var(--font-mono); font-size:.75rem; color:var(--text-muted)}

/* hero visual: the gateway envelope card */
.gateway{position:relative; background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow-lg); overflow:hidden}
.gateway .gw-top{display:flex; align-items:center; gap:.6rem; padding:.85rem 1rem; border-bottom:1px solid var(--border); background:var(--surface-raised)}
.gw-dot{width:.55rem; height:.55rem; border-radius:50%; flex:none}
.gw-body{padding:1.1rem 1.15rem 1.25rem}
.envelope{font-family:var(--font-mono); font-size:.78rem; line-height:1.7; white-space:pre; background:var(--surface-sunken); border:1px solid var(--border); border-radius:12px; padding:.85rem 1rem; color:var(--text-muted); overflow-x:auto}
.envelope .key{color:var(--accent)}
.envelope .str{color:var(--brass)}
.envelope .ok{color:var(--ok)}
.envelope .cm{color:var(--text-subtle)}
.gw-caption{display:flex; align-items:center; gap:.5rem; margin-top:.9rem; font-size:.8rem; color:var(--text-subtle)}
.gw-caption svg{flex:none}

/* ---- section scaffold ---- */
section{padding:4.5rem 0}
.sec-head{max-width:52ch}
.sec-head h2{font-family:var(--font-display); font-weight:600; letter-spacing:-.02em; font-size:clamp(1.9rem,4vw,2.6rem); line-height:1.1; margin:.6rem 0 0}
.sec-head p{color:var(--text-muted); margin-top:.9rem; font-size:1.05rem; max-width:60ch}

/* ---- how it works ---- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-top:2.5rem}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{position:relative; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:1.5rem 1.4rem; box-shadow:var(--shadow-md)}
.step:hover{border-color:var(--border-strong)}
.step .idx{font-family:var(--font-mono); font-size:.7rem; letter-spacing:.12em; color:var(--text-subtle)}
.step .ic{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; margin:.35rem 0 1rem; background:var(--accent-soft); color:var(--accent)}
.step .ic svg{width:24px; height:24px}
.step h3{font-family:var(--font-display); font-weight:600; font-size:1.3rem; letter-spacing:-.01em}
.step p{color:var(--text-muted); font-size:.95rem; margin-top:.5rem}
.step .arrow{position:absolute; right:-.85rem; top:50%; transform:translateY(-50%); color:var(--border-strong); z-index:2}
@media(max-width:820px){.step .arrow{display:none}}

/* ---- security / trust layer ---- */
.trust{background:
   linear-gradient(180deg, color-mix(in srgb,var(--accent) 5%, transparent), transparent 30%),
   var(--canvas); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.ladder{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.75rem}
.grade{display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .6rem .4rem .5rem; border-radius:8px; border:1px solid; font-size:.8rem}
.grade .num{font-family:var(--font-mono); font-weight:600; font-size:.72rem; letter-spacing:.02em}
.grade .nm{font-weight:600}
.grade .meter{display:inline-flex; gap:2px; align-items:flex-end; height:14px}
.grade .meter i{width:3px; height:100%; border-radius:1px; background:currentColor; opacity:.22}
.grade .meter i.on{opacity:1}
.g0{background:var(--r0);color:var(--r0t);border-color:var(--r0l)} .g0 .meter{color:var(--r0k)}
.g1{background:var(--r1);color:var(--r1t);border-color:var(--r1l)} .g1 .meter{color:var(--r1k)}
.g2{background:var(--r2);color:var(--r2t);border-color:var(--r2l)} .g2 .meter{color:var(--r2k)}
.g3{background:var(--r3);color:var(--r3t);border-color:var(--r3l)} .g3 .meter{color:var(--r3k)}
.g4{background:var(--r4);color:var(--r4t);border-color:var(--r4l)} .g4 .meter{color:var(--r4k)}
.g5{background:var(--r5);color:var(--r5t);border-color:var(--r5l)} .g5 .meter{color:var(--r5k)}

/* honest security feature grid */
.features{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:2.25rem}
@media(max-width:920px){.features{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.features{grid-template-columns:1fr}}
.feat{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:1.35rem 1.35rem; box-shadow:var(--shadow-sm)}
.feat:hover{border-color:var(--border-strong)}
.feat .fic{width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); margin-bottom:.9rem}
.feat .fic svg{width:22px; height:22px}
.feat h3{font-size:1.02rem; font-weight:600; letter-spacing:-.005em}
.feat p{color:var(--text-muted); font-size:.9rem; margin-top:.4rem; line-height:1.55}
.feat p .tt{font-family:var(--font-mono); font-size:.8em; color:var(--text); background:var(--surface-sunken); border:1px solid var(--border); border-radius:5px; padding:.05em .35em}

/* connection + approval example cards */
.cards{display:grid; grid-template-columns:1fr 1fr 1.15fr; gap:1.1rem; margin-top:2rem}
@media(max-width:920px){.cards{grid-template-columns:1fr}}
.card{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:1.15rem 1.2rem; box-shadow:var(--shadow-md); display:flex; flex-direction:column; gap:.75rem}
.card .row{display:flex; align-items:center; gap:.6rem}
.card .title{font-weight:600; font-size:.98rem}
.card .sub{font-family:var(--font-mono); font-size:.72rem; color:var(--text-subtle)}
.chip{font-family:var(--font-mono); font-size:.66rem; font-weight:600; letter-spacing:.06em; padding:.16rem .5rem; border-radius:5px; border:1px solid; text-transform:uppercase}
.chip-live{background:var(--live-bg); color:var(--live-t); border-color:var(--live-l)}
.chip-test{background:var(--test-bg); color:var(--test-t); border:1px dashed var(--test-l)}
.health{display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; color:var(--text-muted)}
.health .d{width:.6rem; height:.6rem; border-radius:50%; box-shadow:var(--ring); flex:none}
.d-ok{background:var(--ok)} .d-warn{background:var(--warn)} .d-scope{background:var(--scope)} .d-err{background:var(--err)}
.card .line{height:1px; background:var(--border)}
.act{display:flex; align-items:center; justify-content:space-between; gap:.6rem; font-size:.85rem; color:var(--text-muted)}
.act .name{font-family:var(--font-mono); font-size:.76rem; color:var(--text)}
.mini{display:inline-flex; align-items:center; gap:.35rem; font-family:var(--font-mono); font-size:.68rem; font-weight:600; padding:.12rem .42rem; border-radius:5px; border:1px solid; white-space:nowrap}
.mini.g2{background:var(--r2);color:var(--r2t);border-color:var(--r2l)}
.mini.g4{background:var(--r4);color:var(--r4t);border-color:var(--r4l)}

.approve .cap{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-subtle)}
.approve .impact{background:var(--surface-sunken); border:1px solid var(--border); border-radius:10px; padding:.7rem .8rem; font-family:var(--font-mono); font-size:.74rem; color:var(--text-muted); line-height:1.7; white-space:pre-wrap}
.approve .impact b{color:var(--text); font-weight:600}
.approve .impact .amt{color:var(--r4t)}
.approve .actions{display:flex; gap:.55rem; margin-top:.2rem}
.approve .actions .abtn{flex:1; font-family:var(--font-ui); font-weight:600; font-size:.82rem; padding:.5rem; border-radius:9px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text); text-align:center}
.approve .actions .abtn.ok{background:var(--accent); color:var(--on-accent); border-color:transparent}
.legend{margin-top:1.5rem; font-size:.82rem; color:var(--text-subtle); display:flex; flex-wrap:wrap; gap:1.25rem; align-items:center}
.legend span{display:inline-flex; align-items:center; gap:.45rem}
.legend .d{width:.6rem;height:.6rem;border-radius:50%;display:inline-block;flex:none}

/* ---- honest status note ---- */
.status{margin-top:2.75rem; background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--brass-key);
  border-radius:14px; padding:1.35rem 1.5rem; display:flex; gap:1rem; align-items:flex-start; box-shadow:var(--shadow-sm)}
.status svg{flex:none; color:var(--brass); margin-top:.15rem}
.status h3{font-size:1rem; font-weight:600}
.status p{color:var(--text-muted); font-size:.92rem; margin-top:.35rem; max-width:70ch}

/* ---- final cta ---- */
.finalcta{text-align:center; padding:5rem 0}
.finalcta h2{font-family:var(--font-display); font-weight:600; font-size:clamp(2rem,5vw,3rem); letter-spacing:-.02em; line-height:1.08}
.finalcta .hold{font-style:italic; color:var(--accent)}
.finalcta p{color:var(--text-muted); margin:1rem auto 0; max-width:48ch}
.finalcta .cta{justify-content:center; margin-top:2rem}

/* ---- footer ---- */
footer.site{border-top:1px solid var(--border); padding:2.75rem 0 3rem; background:var(--surface-raised)}
.foot{display:flex; flex-wrap:wrap; gap:1.5rem; align-items:center; justify-content:space-between}
.foot .brand{font-size:1.1rem}
.foot .tagline{font-family:var(--font-display); font-style:italic; color:var(--text-subtle); font-size:1.05rem}
.foot nav{display:flex; flex-wrap:wrap; gap:1.25rem; font-size:.88rem}
.foot nav a{color:var(--text-muted); font-weight:500}
.foot nav a:hover{color:var(--text)}
.foot .meta{width:100%; margin-top:1.75rem; padding-top:1.5rem; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; justify-content:space-between; font-size:.78rem; color:var(--text-subtle)}
.foot .meta .mono{font-size:.72rem}

/* ---- long-form (privacy) ---- */
.doc{padding:3.5rem 0 4.5rem}
.doc-head{border-bottom:1px solid var(--border); padding-bottom:1.75rem; margin-bottom:2.25rem}
.doc-head h1{font-family:var(--font-display); font-weight:600; font-size:clamp(2rem,5vw,2.9rem); letter-spacing:-.02em; line-height:1.06; margin:0}
.doc-head .meta{margin-top:1rem; display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; font-size:.82rem; color:var(--text-subtle)}
.doc-head .meta .mono{font-family:var(--font-mono); font-size:.76rem}
.doc h2{font-family:var(--font-display); font-weight:600; font-size:1.45rem; letter-spacing:-.01em; margin:2.5rem 0 .35rem}
.doc h2:first-of-type{margin-top:0}
.doc h3{font-size:1.02rem; font-weight:600; margin:1.5rem 0 .3rem}
.doc p{color:var(--text-muted); margin-top:.7rem; font-size:1rem; line-height:1.7}
.doc ul{color:var(--text-muted); margin:.7rem 0 0 1.2rem; line-height:1.7}
.doc li{margin-top:.4rem}
.doc li b,.doc p b{color:var(--text); font-weight:600}
.doc a{text-decoration:underline; text-underline-offset:2px}
.callout{background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--brass-key); border-radius:12px; padding:1.1rem 1.3rem; margin:1.5rem 0; box-shadow:var(--shadow-sm)}
.callout p{margin-top:0; color:var(--text-muted); font-size:.92rem}
.toc{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:1.1rem 1.3rem; margin-bottom:2.25rem; box-shadow:var(--shadow-sm)}
.toc .eyebrow{display:block; margin-bottom:.6rem}
.toc ol{margin:0 0 0 1.2rem; columns:2; column-gap:2rem; font-size:.9rem}
@media(max-width:600px){.toc ol{columns:1}}
.toc li{margin:.25rem 0}
.doc table{width:100%; border-collapse:collapse; margin-top:1rem; font-size:.9rem; display:block; overflow-x:auto}
.doc th,.doc td{text-align:left; padding:.6rem .8rem; border-bottom:1px solid var(--border); vertical-align:top}
.doc th{font-weight:600; color:var(--text); background:var(--surface-sunken)}
.doc td{color:var(--text-muted)}