/* TELOS Glass Design System v0.2 — canonical stylesheet.
   Extracted VERBATIM from telos-design-system.html (sha e273cef6…).
   Tokens are locked brand DNA (JB Class-4 boundary) — do not edit here. */

/* ============================================================================
   TELOS GLASS DESIGN SYSTEM — living style guide
   Derived from the 2026-07-15 glass-optic exploration. Self-contained.
   Every token and component here is the canonical recipe for site-wide use.
   ========================================================================== */
:root{
  /* — substrate — */
  --bg:#06090a; --bg-2:#0a0f11;
  /* — accent + signal — */
  --emerald:#06e58b;          /* primary brand / EXECUTE / interactive */
  --emerald-dim:#0bbf76;
  --emerald-lt:#8ef0c2;   /* light tint for eyebrows/section labels (ATF-heading pattern, JB 07-24) */
  --amber:#e5c06a;            /* CLARIFY */
  --rose:#e58a8a;             /* ESCALATE */
  /* — ink — */
  --ink:#eaf2ee; --ink-2:#c6d3ce; --muted:#8a9a94; --faint:#7a8a84;
  /* — glass recipe (the core material) — */
  --glass-blur:18px;
  --glass-tint:linear-gradient(155deg,rgba(22,38,32,.16),rgba(10,18,16,.07));
  --glass-tint-solid:linear-gradient(155deg,rgba(14,24,20,.22),rgba(9,16,14,.10));
  --glass-border:1px solid rgba(255,255,255,.14);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(255,255,255,.05),inset 0 24px 48px -24px rgba(255,255,255,.045);
  --glass-shadow:0 24px 70px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.3);
  /* — geometry — */
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-pill:999px;
  --sp:8px;
  /* — type — */
  --sans:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  /* — motion — */
  --ease:cubic-bezier(.22,.61,.36,1);
  --t-fast:140ms; --t-med:240ms;
}
*{box-sizing:border-box}
html,body{margin:0}
html{background:var(--bg);overflow-x:clip}
body{background:transparent;color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;line-height:1.5;}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.02em;line-height:1.08}
p{margin:0}
a{color:var(--emerald);text-decoration:none}
code,.mono{font-family:var(--mono)}

/* ---------- living background: scroll-linked verdict stream + halo ---------- */
/* Substrate vignette. The film carries this and the site had lost it, which is
   why the site read flat and hazy beside the video. Gradient centre sits above
   the top edge, so the corners fall to --bg and the centre lifts to --bg-2:
   the darkened-edge portrait effect. Same values the film uses, via tokens. */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;
  background:radial-gradient(120% 120% at 50% -10%,var(--bg-2) 0%,var(--bg) 60%)}
/* stream stops here: opaque closing sections sit over the fixed stream */
.streamstop{position:relative;z-index:1;background:linear-gradient(to right,transparent 0%,color-mix(in srgb,var(--bg) 70%,transparent) 11%,color-mix(in srgb,var(--bg) 70%,transparent) 89%,transparent 100%)}
.streamstop::before{content:"";position:absolute;left:0;right:0;top:-64px;height:64px;background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--bg) 70%,transparent));pointer-events:none}
.halo{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);width:100%;height:70vh;
  background:radial-gradient(ellipse at center,rgba(6,229,139,.16),rgba(6,229,139,.03) 55%,transparent 74%);
  filter:blur(90px);pointer-events:none}
.ghost{position:absolute;top:0;bottom:0;left:0;right:0;font-family:var(--mono);color:var(--emerald);
  font-size:15px;line-height:2.6;letter-spacing:.02em;opacity:.24;overflow:hidden;filter:blur(1.2px);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent)}
.gstream{position:absolute;top:0;left:0;width:100%;padding:0 4vw}
.ghost .row{display:flex;justify-content:space-between;gap:2.5vw;white-space:nowrap}
.ghost .ex,.ghost .cl,.ghost .es{display:inline-flex;align-items:center;gap:.5em;letter-spacing:.12em}
.ghost .ex::before,.ghost .cl::before,.ghost .es::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ghost .ex{color:var(--emerald)}
.ghost .cl{color:var(--amber)}
.ghost .es{color:var(--rose)}
.ghost .hh{color:var(--faint)}

/* ---------- layout ---------- */
main{position:relative;z-index:2}
main section{position:relative;z-index:1}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px}
section{padding:50px 0}
.eyebrow{display:inline-flex;align-items:center;gap:.6em;color:var(--emerald-lt);
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:20px;font-family:var(--mono)}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--emerald);box-shadow:0 0 10px var(--emerald)}
.lede{font-size:18px;color:var(--ink-2);max-width:56ch}
.grid{display:grid;gap:20px}
.g-2{grid-template-columns:repeat(2,1fr)} .g-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.g-2,.g-3{grid-template-columns:1fr}}

/* ============================================================================
   GLASS SURFACE — the core component. Everything visible sits on glass.
   ========================================================================== */
.glass{position:relative;background:var(--glass-tint);border:var(--glass-border);
  border-radius:var(--r-lg);box-shadow:var(--glass-shadow),var(--glass-hi);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(126%);
          backdrop-filter:blur(var(--glass-blur)) saturate(126%);padding:32px}
.glass.solid{background:var(--glass-tint-solid)}   /* higher-contrast variant for dense UI */
.glass .sheen{position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(120deg,transparent 34%,rgba(255,255,255,.05) 48%,transparent 60%)}

/* hero window */
.hero{padding:56px 60px;border-radius:var(--r-lg);max-width:720px}
.hero h1{font-size:clamp(34px,4.6vw,58px)}
.hero .lede{margin-top:20px;font-size:20px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* ============================================================================
   BUTTONS — interactive language. Live below/inside windows.
   ========================================================================== */
.btn{--_bg:transparent;--_fg:var(--ink);--_bd:transparent;
  display:inline-flex;align-items:center;gap:.55em;cursor:pointer;border:1px solid var(--_bd);
  background:var(--_bg);color:var(--_fg);font-family:var(--sans);font-weight:600;font-size:15px;
  letter-spacing:-.01em;padding:12px 22px;border-radius:var(--r-pill);
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(6,229,139,.4)}
.nav .links a:focus-visible,.nav .brand:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(6,229,139,.4);border-radius:8px}
.btn:active{transform:translateY(1px) scale(.99)}
.btn .i{width:16px;height:16px;display:inline-block}
/* primary — emerald, high emphasis */
.btn.primary{--_bg:var(--emerald);--_fg:#04140d;--_bd:transparent;
  box-shadow:0 8px 26px rgba(6,229,139,.28)}
.btn.primary:hover{transform:translateY(-1px);box-shadow:0 12px 34px rgba(6,229,139,.42)}
/* secondary — frosted glass */
.btn.secondary{--_bg:rgba(255,255,255,.05);--_fg:var(--ink);--_bd:rgba(255,255,255,.16)}
.btn.secondary:hover{--_bg:rgba(255,255,255,.09);--_bd:rgba(6,229,139,.5);transform:translateY(-1px)}
/* ghost — text-forward */
.btn.ghost{--_bg:transparent;--_fg:var(--ink-2);--_bd:transparent;padding-left:14px;padding-right:14px}
.btn.ghost:hover{--_fg:var(--emerald)}
/* sizes */
.btn.sm{font-size:13px;padding:8px 16px}
.btn.lg{font-size:17px;padding:15px 30px}
.btn[disabled]{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}

/* ============================================================================
   VERDICT PILLS — canon set EXECUTE / CLARIFY / ESCALATE (no DENY)
   ========================================================================== */
.pill{display:inline-flex;align-items:center;gap:.5em;font-family:var(--mono);font-size:12px;
  letter-spacing:.12em;padding:4px 12px;border-radius:var(--r-pill);border:1px solid currentColor}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ex{color:var(--emerald)} .pill.cl{color:var(--amber)} .pill.es{color:var(--rose)}

/* ============================================================================
   INPUTS
   ========================================================================== */
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:13px;color:var(--muted);font-family:var(--mono);letter-spacing:.03em}
.input{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-sm);
  padding:12px 14px;color:var(--ink);font-family:var(--sans);font-size:15px;
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.input::placeholder{color:var(--faint)}
.input:focus{outline:none;border-color:var(--emerald);box-shadow:0 0 0 3px rgba(6,229,139,.16)}

/* ============================================================================
   MISC — tags, nav, code block, swatches
   ========================================================================== */
.nav{position:sticky;top:16px;z-index:5;display:flex;align-items:center;justify-content:space-between;
  gap:20px;margin:16px auto;max-width:1120px;padding:12px 20px;border-radius:var(--r-pill);
  background:var(--glass-tint-solid);border:var(--glass-border);box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur))}
.nav .brand{font-weight:600;letter-spacing:-.02em;display:flex;align-items:center;gap:9px}
.nav .brand .mk{width:9px;height:9px;border-radius:50%;background:var(--emerald);box-shadow:0 0 12px var(--emerald)}
.nav .links{display:flex;gap:24px;align-items:center}
.nav .links a{color:var(--emerald-lt);font-size:14px} .nav .links a:hover{color:var(--emerald)}
/* Keep navigation on mobile: wrap the links to a second row inside the pill
   rather than hiding them (real, keyboard-accessible anchors, no JS menu). */
@media(max-width:720px){
  .nav{flex-wrap:wrap;gap:8px 16px}
  .nav .links{display:flex;flex-wrap:wrap;width:100%;gap:6px 18px;justify-content:flex-start}
  .nav .links a{font-size:13.5px;padding:3px 0}
}
.tag{display:inline-block;font-family:var(--mono);font-size:11px;color:var(--muted);
  padding:3px 10px;border:1px solid rgba(255,255,255,.12);border-radius:var(--r-pill)}
.codeblock{font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--ink-2);
  background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-md);
  padding:18px 20px;overflow-x:auto}
.codeblock .k{color:var(--emerald)}
.swatch{height:64px;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:flex-end;padding:8px;font-family:var(--mono);font-size:11px;color:#04140d;font-weight:600}
.spec{font-family:var(--mono);font-size:12.5px;color:var(--muted);line-height:2}
.spec b{color:var(--ink);font-weight:500}
.note{font-size:13px;color:var(--muted);margin-top:10px}
.divider{height:1px;background:linear-gradient(to right,transparent,rgba(255,255,255,.12),transparent);margin:0}
.typescale > *{margin:0 0 6px}
.t-hero{font-size:clamp(34px,4.6vw,58px);font-weight:600;letter-spacing:-.02em}
.t-h2{font-size:34px;font-weight:600;letter-spacing:-.02em}
.t-h3{font-size:22px;font-weight:600}
.t-body{font-size:16px;color:var(--ink-2)}
.t-mono{font-family:var(--mono);font-size:13px;color:var(--muted)}
/* ====== COMPONENTS II — data, controls, feedback ====== */
.tabs{display:inline-flex;gap:4px;padding:4px;border-radius:var(--r-pill);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.tab{border:none;background:transparent;color:var(--ink-2);font-family:var(--sans);font-weight:600;font-size:14px;padding:8px 18px;border-radius:var(--r-pill);cursor:pointer;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.tab[aria-selected="true"]{background:var(--emerald);color:#04140d}
.tab:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(6,229,139,.4)}
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th,.table td{text-align:left;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.07)}
.table th{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500}
.table td{color:var(--ink-2)} .table tr:last-child td{border-bottom:none}
.table td.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.table tr:hover td{background:rgba(255,255,255,.03)}
/* Narrow viewports: a wide table gets its OWN scroll container rather than
   letting the page clip it. html carries overflow-x:clip, which would hide the
   right hand columns entirely; containing a clip is not fixing it. Keeping the
   table scrollable locally means every cell stays reachable on a phone. */
@media(max-width:720px){
  .table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
}
.meter{display:flex;align-items:center;gap:12px}
.meter .track{flex:1;height:6px;border-radius:var(--r-pill);background:rgba(255,255,255,.08);overflow:hidden}
.meter .fill{height:100%;border-radius:var(--r-pill);background:var(--emerald)}
.meter .fill.cl{background:var(--amber)} .meter .fill.es{background:var(--rose)}
.meter .val{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink);min-width:3.2em;text-align:right}
.select{position:relative;display:inline-block}
.select select{appearance:none;-webkit-appearance:none;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-sm);color:var(--ink);font-family:var(--sans);font-size:15px;padding:11px 40px 11px 14px;cursor:pointer}
.select select:focus{outline:none;border-color:var(--emerald);box-shadow:0 0 0 3px rgba(6,229,139,.16)}
.select .chev{position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--muted)}
.tt{position:relative;border-bottom:1px dashed var(--muted);cursor:help}
.tt::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%) translateY(4px);white-space:nowrap;background:var(--glass-tint-solid);border:var(--glass-border);color:var(--ink);font-family:var(--sans);font-size:12.5px;padding:8px 12px;border-radius:var(--r-sm);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);opacity:0;pointer-events:none;transition:opacity var(--t-fast),transform var(--t-fast)}
.tt:hover::after,.tt:focus::after{opacity:1;transform:translateX(-50%) translateY(0)}
.toast{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:var(--r-md);background:var(--glass-tint-solid);border:var(--glass-border);box-shadow:var(--glass-shadow),var(--glass-hi);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));max-width:420px}
.toast .bar{width:3px;align-self:stretch;border-radius:var(--r-pill);background:var(--emerald)}
.toast.cl .bar{background:var(--amber)} .toast.es .bar{background:var(--rose)}
.toast .body{font-size:14px} .toast .body b{font-weight:600}
.modal-scrim{position:fixed;inset:0;z-index:50;background:rgba(3,6,5,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:24px}
.modal-scrim.open{display:flex}
.modal{max-width:460px;width:100%}
.status{display:inline-flex;align-items:center;gap:.5em;font-size:13px;color:var(--ink-2)}
.status .d{width:8px;height:8px;border-radius:50%;background:var(--emerald);box-shadow:0 0 8px var(--emerald)}
.status.cl .d{background:var(--amber);box-shadow:0 0 8px var(--amber)} .status.es .d{background:var(--rose);box-shadow:0 0 8px var(--rose)}
.footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:center}
.footer .links{display:flex;gap:22px} .footer a{color:var(--muted);font-size:14px} .footer a:hover{color:var(--emerald)}
/* a11y: optional text scrim for glass placed over bright background clusters */
.glass.scrim::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse at 32% 30%,rgba(6,9,10,.55),transparent 72%);pointer-events:none}
.glass.scrim > *{position:relative}
/* mobile: lighter backdrop-blur for perf */
@media(max-width:720px){:root{--glass-blur:16px}.hero{padding:36px 24px}section{padding:38px 0}.wrap{padding:0 20px}.ghost{font-size:12px}}
/* ====== cross-browser + responsive hardening ====== */
/* backdrop-filter fallback (Firefox<103 / unsupported): solid tint so glass still reads, never invisible */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .glass,.nav,.toast{background:linear-gradient(155deg,rgba(16,26,22,.93),rgba(10,17,15,.9))}
  .btn{background:rgba(20,32,27,.9)} .btn.primary{background:var(--emerald)}
  .tt::after{background:rgba(16,26,22,.96)} .modal-scrim{background:rgba(3,6,5,.82)}
}
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:720px){
  .nav{flex-wrap:wrap;border-radius:var(--r-lg);top:8px}
  .tabs{max-width:100%;overflow-x:auto} .hero h1,.t-h2{font-size:clamp(26px,7vw,40px)}
  .lede,.hero .lede{font-size:16px} .toast{max-width:100%}
  .footer{flex-direction:column;align-items:flex-start}
}
@media(max-width:400px){.wrap{padding:0 16px}.glass{padding:22px}}
@media (prefers-reduced-motion:reduce){.gstream{transform:none!important}}

/* ============================================================================
   SITE LAYER — additions on top of the verbatim system (fonts, pages, player)
   ========================================================================== */

/* Figtree, self-hosted variable (latin + latin-ext), system-sans fallback */
@font-face{font-family:"Figtree";src:url("figtree-2.woff2") format("woff2");
  font-weight:300 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2192,U+2212}
@font-face{font-family:"Figtree";src:url("figtree-1.woff2") format("woff2");
  font-weight:300 900;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0}

/* display face — Instrument Serif on marketing display headings (JB pick "C", 2026-07-16).
   Display-ONLY (hero H1, .t-hero, section .t-h2); body/eyebrow/mono untouched.
   Palette + geometry tokens are NOT changed — this is an additive type layer.
   Self-hosted woff2, no CDN. Single weight (400); serifs take normal tracking, so the
   locked -.02em heading tracking is neutralized to 0 for these three selectors only. */
@font-face{font-family:"Instrument Serif";src:url("instrument-serif.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
:root{--display:"Instrument Serif",Georgia,"Times New Roman",serif}
h1,.t-hero,.t-h2{font-family:var(--display);font-weight:400;letter-spacing:0}
/* serif headlines hold a headline measure — a long, light display line must not run
   full container width over the narrower body column (reads top-heavy). Wraps to a block. */
.t-h2{max-width:34rem;text-wrap:balance}

/* brand: the TELOS doorway seal (master geometry 1369x1455) in the nav.
   Replaces the placeholder dot; carries the same emerald glow. */
.nav .brand .mk-logo{width:16px;height:17px;display:block;flex:0 0 auto;
  filter:drop-shadow(0 0 7px rgba(6,229,139,.55))}

/* brand lockup: "Purpose In. Proof Out." rides beside the wordmark as the
   tagline of the mark itself (JB 2026-07-16). Hairline divider, mono, quiet. */
.brandlock{display:flex;align-items:center;gap:14px}
.nav-tag{font-size:14px;color:var(--emerald-lt);
  padding-left:14px;border-left:1px solid rgba(255,255,255,.12);white-space:nowrap}
/* Hide the tagline below 900, not 720. Measured at 768: the brandlock is 246px
   wide with the tagline shown, and brandlock plus the seven links overflows the
   nav to 789 against a 768 viewport. Hiding the tagline earlier reclaims enough
   width to fit, and it is the smallest change that works: no link is removed,
   and the deliberate two-row link wrap on phones is untouched. */
@media (max-width:900px){ .nav-tag{display:none} }

/* hero optic (the ONE moment, index only): centered window over the stream */
.optic{min-height:72vh;display:flex;align-items:center;justify-content:flex-start}
.optic .hero{max-width:660px}
.optic > .wrap{width:100%;display:flex;justify-content:flex-start}
@media(max-width:860px){.optic{justify-content:center;min-height:0;padding:40px 0}.optic .hero{max-width:none}}

/* generic page hero (non-optic pages) */
.pagehead{padding-top:56px}

/* footer bar */
.footmeta{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
  font-family:var(--mono);font-size:12px;color:var(--faint);padding:26px 0 40px}

/* stamp */
.stamp{text-align:center}
.stamp .sig{font-size:clamp(26px,4vw,40px);font-weight:600;letter-spacing:-.02em}
.stamp .sig .pur{color:var(--emerald)}
.stamp .sup{margin-top:10px;color:var(--muted)}
.stamp a{display:inline-block;margin-top:20px;font-family:var(--mono);font-size:13px;color:var(--ink-2);border-bottom:1px solid var(--emerald);padding-bottom:2px}

/* ---------- the moment player, glass skin (same class names as rev2 JS) ---------- */
.player{margin-top:44px}
.player .frame{padding:0;overflow:hidden}
.pl-bar{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.08);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pl-bar .pip{width:8px;height:8px;border-radius:50%;background:var(--emerald);box-shadow:0 0 8px var(--emerald)}
.pl-cap{padding:16px 24px;border-bottom:1px solid rgba(255,255,255,.07)}
.pl-caption{text-align:center;font-size:15.5px;line-height:1.6;color:var(--ink-2);max-width:70ch;margin:0 auto;min-height:48px}
.pl-calib{font-size:11px;line-height:1.5;color:var(--faint);margin:12px 0 0;max-width:34ch}
.pl-caption b{color:var(--ink);font-weight:600}
.player .stage{display:grid;grid-template-columns:minmax(230px,.9fr) minmax(300px,1.2fr) minmax(230px,.9fr);min-height:380px}
.player .stage>*{padding:22px;min-width:0}
.player .stage .colmid{border-left:1px solid rgba(255,255,255,.07);border-right:1px solid rgba(255,255,255,.07)}
.pl-action .lab,.pl-checks .lab{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:14px;display:block}
.pl-tool{font-family:var(--mono);font-size:14px;color:var(--ink);padding:9px 14px;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-sm);display:inline-block}
.pl-desc{margin-top:14px;font-size:14.5px;line-height:1.6;color:var(--ink-2);min-height:92px}
.pl-caught{margin-top:14px;font-family:var(--mono);font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:9px}
.pl-caught .pip{width:7px;height:7px;border-radius:50%;background:var(--faint);flex:0 0 auto;transition:background .3s var(--ease),box-shadow .3s var(--ease)}
.pl-caught.held .pip{background:var(--emerald);box-shadow:0 0 9px var(--emerald)}
.pl-caught.released .pip{background:var(--emerald)}
.pl-field svg{width:100%;height:auto;display:block}
.pl-field .ring{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1}
.pl-field .ring.outer{stroke:rgba(255,255,255,.07)}
.pl-field .anchor{fill:var(--emerald)}
.pl-field .anchor-glow{fill:none;stroke:rgba(6,229,139,.5);stroke-width:1.5}
.pl-field .action-pt{fill:var(--ink)}
.pl-field .dist{stroke:var(--emerald);stroke-width:1.2;stroke-dasharray:3 4}
.pl-field text{font-family:var(--mono);font-size:10.5px;fill:var(--muted)}
.pl-field .fieldcap{text-anchor:middle}
.pl-readout{margin-top:6px;text-align:center;font-family:var(--mono);font-size:12.5px;color:var(--muted);min-height:20px}
.pl-readout b{color:var(--ink);font-weight:600}
.pl-meters{display:grid;gap:11px}
.pl-meter{display:grid;grid-template-columns:7.5ch 1fr 5.5ch;gap:9px;align-items:center}
.pl-meter .ml{font-family:var(--mono);font-size:11px;color:var(--faint)}
.pl-meter .track{height:5px;background:rgba(255,255,255,.08);border-radius:var(--r-pill);overflow:hidden}
.pl-meter .fill{height:100%;width:0;background:var(--emerald);border-radius:var(--r-pill)}
.pl-meter .fill.cl{background:var(--amber)}
.pl-meter .fill.es{background:var(--rose)}
.pl-meter .mv{font-family:var(--mono);font-size:11px;color:var(--ink-2);font-variant-numeric:tabular-nums;text-align:right}
.pl-bounds{margin:18px 0 0;list-style:none;padding:0}
.pl-bounds li{display:flex;align-items:center;gap:10px;padding:7px 0;font-family:var(--mono);font-size:11.5px;color:var(--faint);border-bottom:1px solid rgba(255,255,255,.06);transition:color .25s var(--ease)}
.pl-bounds li:last-child{border-bottom:none}
.pl-bounds li .bx{width:7px;height:7px;transform:rotate(45deg);border:1px solid rgba(255,255,255,.22);flex:0 0 auto;transition:background .25s var(--ease),border-color .25s var(--ease)}
.pl-bounds li.scan{color:var(--ink-2)} .pl-bounds li.scan .bx{border-color:var(--emerald)}
.pl-bounds li.clear .bx{background:rgba(6,229,139,.35);border-color:var(--emerald)}
.pl-bounds li.at-line{color:var(--ink)} .pl-bounds li.at-line .bx{background:rgba(229,192,106,.4);border-color:var(--amber)}
.pl-read{border-top:1px solid rgba(255,255,255,.07);padding:16px 24px;min-height:84px}
.pl-decision{font-weight:600;font-size:16px;color:var(--ink);opacity:0}
.pl-decision::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--emerald);margin-right:10px;vertical-align:2px}
.pl-decision.cl::before{background:var(--amber)}
.pl-decision.es::before{background:var(--rose)}
.pl-disclosure{margin-top:8px;font-family:var(--mono);font-size:12.5px;line-height:1.7;color:var(--muted);min-height:22px}
.pl-record{border-top:1px solid rgba(255,255,255,.07);padding:14px 24px 18px}
.pl-record .rlab{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:10px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pl-record .rhash{color:var(--muted);text-transform:none;letter-spacing:.04em}
.pl-chain{display:flex;gap:3px;align-items:center}
.pl-chain .tk{flex:1 1 0;height:12px;min-width:5px;border-radius:3px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);transition:background .3s var(--ease),border-color .3s var(--ease)}
.pl-chain .tk.done{background:rgba(6,229,139,.30);border-color:rgba(6,229,139,.45)}
.pl-chain .tk.now{background:var(--emerald);border-color:var(--emerald);box-shadow:0 0 10px rgba(6,229,139,.5)}
.pl-chain .tk.bound{border-style:dashed}
/* Narrow viewports: these tick strips are flex rows of many items, each with a
   min-width floor, so their minimum row width far exceeds a phone viewport and
   the last ticks push past the right edge. Wrapping keeps every tick visible at
   a glance, which is the point of a progress chain. A horizontal scroll would
   hide the end of the chain behind a gesture. */
@media(max-width:720px){
  .pl-chain,.xp-strip{flex-wrap:wrap}
}
.pl-end{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:32px;background:rgba(4,7,6,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .5s var(--ease);z-index:3;border-radius:inherit}
.pl-end.show{opacity:1;pointer-events:auto}
.pl-end .big{font-weight:600;font-size:clamp(19px,2.4vw,25px);color:var(--ink);max-width:30ch;text-wrap:balance}
.pl-end .row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.pl-transport{display:flex;align-items:center;gap:14px;padding:14px 20px;border-top:1px solid rgba(255,255,255,.08);flex-wrap:wrap}
.pl-btn{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-pill);padding:9px 18px;cursor:pointer;transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);min-width:86px}
.pl-btn:hover{border-color:rgba(6,229,139,.5);background:rgba(255,255,255,.08)}
.pl-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(6,229,139,.4)}
.pl-scrub{flex:1;min-width:150px;appearance:none;-webkit-appearance:none;height:5px;border-radius:var(--r-pill);background:linear-gradient(to right,var(--emerald) var(--p,0%),rgba(255,255,255,.1) var(--p,0%));cursor:pointer}
.pl-scrub::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:15px;height:15px;border-radius:50%;background:var(--ink);border:1px solid var(--emerald)}
.pl-scrub::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--ink);border:1px solid var(--emerald)}
.pl-scrub:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(6,229,139,.3)}
.pl-chapters{display:flex;gap:7px}
.pl-ch{width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:transparent;color:var(--muted);font-family:var(--mono);font-size:10.5px;cursor:pointer;transition:all var(--t-fast) var(--ease)}
.pl-ch:hover{color:var(--ink);border-color:rgba(255,255,255,.3)}
.pl-ch.on{color:#04140d;background:var(--emerald);border-color:var(--emerald)}
.pl-ch:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(6,229,139,.4)}
.pl-time{font-family:var(--mono);font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums;min-width:84px;text-align:right}
.pl-cut b{color:var(--ink-2);font-weight:600}
.pl-note{margin-top:14px;font-family:var(--mono);font-size:13px;color:var(--ink-2);text-align:center}
@media(max-width:980px){.player .stage{grid-template-columns:1fr 1fr}.player .stage .colmid{border:none;border-top:1px solid rgba(255,255,255,.07);grid-column:1/-1;order:3}}
@media(max-width:720px){.player .stage{grid-template-columns:1fr;min-height:0}.pl-time{min-width:0}}

/* ---------- record explorer (glass) ---------- */
.xp-strip{display:flex;gap:4px;align-items:center;margin-top:32px}
.xp-strip .tk{flex:1 1 0;height:26px;min-width:9px;border-radius:5px;padding:0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);cursor:pointer;transition:all var(--t-fast) var(--ease)}
.xp-strip .tk:hover{border-color:rgba(255,255,255,.3)}
.xp-strip .tk.bound{border-style:dashed}
.xp-strip .tk[aria-selected="true"]{background:var(--emerald);border-color:var(--emerald)}
.xp-strip .tk:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(6,229,139,.4)}
.xp-top{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.xp-step{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.xp-type{font-family:var(--mono);font-size:11.5px;color:var(--faint)}
.xp-title{font-weight:600;font-size:20px;color:var(--ink);margin:0 0 8px}
.xp-desc{font-size:15px;line-height:1.65;color:var(--ink-2);max-width:64ch;margin:0 0 16px}
.xp-read{border-top:1px solid rgba(255,255,255,.07);padding-top:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px 30px}
.xp-verdict{align-self:start}
.xp-decision{font-weight:600;font-size:15px;color:var(--ink);margin:0 0 8px}
.xp-decision::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--emerald);margin-right:9px;vertical-align:1px}
.xp-decision.cl::before{background:var(--amber)}
.xp-decision.es::before{background:var(--rose)}
.xp-disclosure{margin:0;color:var(--muted);font-size:12px;line-height:1.65;font-family:var(--mono)}
.xp-hashline{border-top:1px solid rgba(255,255,255,.07);margin-top:14px;padding-top:12px;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;font-family:var(--mono);font-size:11.5px;color:var(--faint)}
.xp-hashline .this-hash{color:var(--ink-2)}
.xp-rawtoggle{margin-top:14px;background:none;border:none;padding:0;font-family:var(--mono);font-size:12px;color:var(--emerald);cursor:pointer}
.xp-rawtoggle:hover{text-decoration:underline;text-underline-offset:3px}
.xp-rawtoggle:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(6,229,139,.3)}
.xp-raw{margin:14px 0 0;padding:14px 16px;background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-sm);max-height:300px;overflow:auto;font-size:11.5px;line-height:1.6;color:var(--ink-2);font-family:var(--mono)}
.xp-hint{font-family:var(--mono);font-size:11.5px;color:var(--faint);margin-top:10px}
.honest{font-size:14.5px;color:var(--ink-2);line-height:1.65}
.honest b{color:var(--ink)}
.tag-coming{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;border:1px dashed rgba(255,255,255,.2);border-radius:var(--r-pill);color:var(--muted);padding:3px 9px;margin-right:10px}
.vf-status{margin-top:18px;font-family:var(--mono);font-size:13px;line-height:1.8;color:var(--ink-2);max-width:80ch;word-break:break-word}
.vf-status .ok{color:var(--emerald);font-weight:600}
.vf-status .broken{color:var(--rose);font-weight:600}

/* showcase page bits */
.stage-wrap{position:relative}
.statlist{list-style:none;margin:14px 0 0;padding:0;max-width:66ch}
.statlist li{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:15px;color:var(--ink-2)}
.statlist li:last-child{border-bottom:none}
.statlist .m{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:var(--r-pill);flex:0 0 auto;margin-top:2px}
.m.live{color:var(--emerald);border:1px solid rgba(6,229,139,.35)}
.m.soon{color:var(--muted);border:1px solid rgba(255,255,255,.16)}
.rs-disp{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:4px 11px;border:1px solid rgba(255,255,255,.16);border-radius:var(--r-pill);color:var(--ink-2);white-space:nowrap}
.rs-disp .pip{width:7px;height:7px;border-radius:50%;background:var(--emerald)}
.rs-disp.drift .pip{background:var(--amber)}
.rs-disp.cnr{border-style:dashed;color:var(--muted)} .rs-disp.cnr .pip{display:none}
.mech-svg{width:100%;height:auto;display:block;max-width:760px}
.mech-svg .ring{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1}
.mech-svg .ring-outer{fill:none;stroke:rgba(255,255,255,.07);stroke-width:1}
.mech-svg .anchor{fill:var(--emerald)}
.mech-svg .action{fill:var(--ink-2)}
.mech-svg .l1{stroke:rgba(255,255,255,.2);stroke-width:1}
.mech-svg .l2{stroke:rgba(255,255,255,.2);stroke-width:1;stroke-dasharray:4 4}
.mech-svg .l3{stroke:rgba(255,255,255,.2);stroke-width:1;stroke-dasharray:2 5}
.mech-svg text{fill:var(--muted);font-family:var(--mono);font-size:11.5px;text-anchor:middle}
.mech-svg .tend{text-anchor:end}

/* JB 2026-07-26: multi-sentence display headings break per sentence,
   so the written rhythm survives the viewport. */
.ln{display:block;text-wrap:balance}

/* site footer (lane-a public readiness, 2026-07-27) */
.site-footer{padding:6px 0 56px}
.site-footer .foot-links{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:baseline;padding:16px 0;border-top:1px solid rgba(255,255,255,.08)}
.site-footer .foot-links a{color:var(--muted);font-size:14px;text-decoration:none}
.site-footer .foot-links a:hover{color:var(--ink)}
.site-footer .foot-id{padding:14px 0 0;display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline}
.site-footer .foot-id .who{color:var(--ink-2);font-size:14px}
.site-footer .foot-id a{color:var(--muted);font-size:14px;text-decoration:none}
.site-footer .foot-id a:hover{color:var(--ink)}
.site-footer .foot-follow{padding:12px 0 0;color:var(--muted);font-size:14px}
.site-footer .foot-follow a{color:var(--emerald);text-decoration:none}
.site-footer .foot-gtc{padding:10px 0 0;color:var(--muted);font-size:13px}
.site-footer .footmeta{padding:12px 0 0}
@media (max-width:640px){.site-footer .foot-links{gap:8px 18px}.site-footer .foot-id{flex-direction:column;gap:6px}}