/* untrustsecurity.com — baked from the SecureDev "untrust Website" design.
   Static, JS-free (strict CSP): inline styles extracted to classes, theme via
   prefers-color-scheme, overridable with the header toggle (data-theme on <html>). Self-hosted fonts. */
@font-face { font-family: "IBM Plex Sans"; font-weight: 100 900; font-display: swap; src: url("/fonts/ibm-plex-sans.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 300 700; font-display: swap; src: url("/fonts/space-grotesk.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-mono.woff2") format("woff2"); }

:root {
  --bg-page: #0B1017; --bg-sunken: #0E141C; --bg-surface: #141C27; --bg-inset: #10171F; --bg-elevated: #1B2430;
  --text-primary: #F5F8FB; --text-secondary: #93A2B3; --text-muted: #738294; --text-faint: #586676;
  --border-subtle: #1C2531; --border-default: #2A3645; --border-strong: #38485C;
  --accent: #28E89A; --accent-contrast: #06080B; --accent-wash: rgba(40,232,154,0.10);
  --text-link: #34D2F2; --cyan-400: #34D2F2;
  --sev-critical: #FF4D5E; --sev-high: #FF8A3D; --sev-medium: #FFC53D; --sev-low: #3DA8FF; --sev-info: #8A96A6;
  --sev-critical-a: rgba(255,77,94,0.12); --sev-high-a: rgba(255,138,61,0.12); --sev-medium-a: rgba(255,197,61,0.12);
  --black-950: #06080B; --selection-bg: rgba(40,232,154,0.22);
  --font-display: "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --glow-accent: 0 0 24px rgba(40,232,154,0.28);
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]){
    --bg-page: #F4F7FA; --bg-sunken: #EAEFF4; --bg-surface: #FFFFFF; --bg-inset: #F0F4F8; --bg-elevated: #FFFFFF;
    --text-primary: #0E1620; --text-secondary: #3B4859; --text-muted: #5A6A7B; --text-faint: #7A8899;
    --border-subtle: #E1E8EF; --border-default: #D2DCE6; --border-strong: #B7C4D2;
    --accent: #0FA568; --accent-contrast: #FFFFFF; --accent-wash: rgba(15,165,104,0.10);
    --text-link: #18AFD6; --selection-bg: rgba(15,165,104,0.18);
    --sev-medium: #C08A00; --sev-critical-a: rgba(255,77,94,0.10); --sev-high-a: rgba(255,138,61,0.12); --sev-medium-a: rgba(214,158,0,0.14);
  } :root:not([data-theme="dark"]) .w1{ background: rgba(244,247,250,.75) !important; } :root:not([data-theme="dark"]) .um-card:hover{ border-color: rgba(15,165,104,.5) !important; box-shadow: 0 18px 50px -30px rgba(15,30,50,.35) !important; } }
:root[data-theme="light"]{
    --bg-page: #F4F7FA; --bg-sunken: #EAEFF4; --bg-surface: #FFFFFF; --bg-inset: #F0F4F8; --bg-elevated: #FFFFFF;
    --text-primary: #0E1620; --text-secondary: #3B4859; --text-muted: #5A6A7B; --text-faint: #7A8899;
    --border-subtle: #E1E8EF; --border-default: #D2DCE6; --border-strong: #B7C4D2;
    --accent: #0FA568; --accent-contrast: #FFFFFF; --accent-wash: rgba(15,165,104,0.10);
    --text-link: #18AFD6; --selection-bg: rgba(15,165,104,0.18);
    --sev-medium: #C08A00; --sev-critical-a: rgba(255,77,94,0.10); --sev-high-a: rgba(255,138,61,0.12); --sev-medium-a: rgba(214,158,0,0.14);
  } :root[data-theme="light"] .w1{ background: rgba(244,247,250,.75) !important; } :root[data-theme="light"] .um-card:hover{ border-color: rgba(15,165,104,.5) !important; box-shadow: 0 18px 50px -30px rgba(15,30,50,.35) !important; }

* { box-sizing: border-box; }
html, body { margin: 0; scroll-behavior: smooth; }
body { background: var(--bg-page); color: var(--text-primary); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
::selection { background: var(--selection-bg); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

.um-navlink { color: var(--text-muted); font-size: 14px; transition: color 140ms var(--ease-out); }
.um-navlink:hover { color: var(--text-primary); }
.um-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 14px; transition: transform 180ms var(--ease-out), border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out); }
.um-card:hover { transform: translateY(-3px); border-color: rgba(40,232,154,.4); box-shadow: 0 18px 50px -24px rgba(0,0,0,.7); }
.um-btn-primary { background: var(--accent); color: var(--accent-contrast); transition: filter 140ms var(--ease-out), box-shadow 140ms var(--ease-out); }
.um-btn-primary:hover { filter: brightness(1.08); box-shadow: var(--glow-accent); }
.um-btn-ghost { border: 1px solid var(--border-default); color: var(--text-primary); transition: border-color 140ms var(--ease-out), background 140ms var(--ease-out); }
.um-btn-ghost:hover { border-color: var(--accent); background: var(--accent-wash); }
@keyframes um-pulse { 0% { box-shadow: 0 0 0 0 rgba(40,232,154,.5); } 70% { box-shadow: 0 0 0 7px rgba(40,232,154,0); } 100% { box-shadow: 0 0 0 0 rgba(40,232,154,0); } }
.um-live-dot { animation: um-pulse 2s var(--ease-out) infinite; }
@keyframes um-blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
.um-cursor { animation: um-blink 1s step-end infinite; }
@media (max-width: 860px) { .um-nav-links { display: none !important; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .um-live-dot, .um-cursor { animation: none; } .um-card:hover { transform: none; } }

/* ---- Layout classes extracted from the design's inline styles ---- */
.w0{background:var(--bg-page); color:var(--text-primary); overflow-x:clip}
.w1{position:sticky; top:0; z-index:50; backdrop-filter:blur(12px); background:rgba(11,16,23,.72); border-bottom:1px solid var(--border-subtle)}
.w2{max-width:1200px; margin:0 auto; height:66px; display:flex; align-items:center; gap:16px; padding:0 24px}
.w3{display:flex; align-items:center; gap:11px}
.w4{width:34px; height:34px; border-radius:9px; background:var(--accent-wash); border:1px solid rgba(40,232,154,.4); display:flex; align-items:center; justify-content:center; color:var(--accent)}
.w5{display: block; flex: 0 0 auto}
.w6{font-family:var(--font-display); font-weight:700; font-size:19px; letter-spacing:-0.02em}
.w7{color:var(--accent)}
.w8{display:flex; align-items:center; gap:26px; margin-left:26px}
.w9{margin-left:auto; display:flex; align-items:center; gap:12px}
.w10{display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 16px; border-radius:8px; font-weight:600; font-size:14px}
.w11{position:relative; overflow:hidden}
.w12{position:absolute; inset:0; background-image:linear-gradient(var(--border-subtle) 1px, transparent 1px), linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px); background-size:52px 52px; opacity:.25; pointer-events:none}
.w13{position:absolute; inset:0; background-image:radial-gradient(circle at 76% 18%, rgba(40,232,154,.16), transparent 44%), radial-gradient(circle at 12% 88%, rgba(52,210,242,.08), transparent 40%); pointer-events:none}
.w14{position:relative; max-width:1200px; margin:0 auto; padding:88px 24px 84px}
.w15{display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.08em; color:var(--accent); background:var(--accent-wash); border:1px solid rgba(40,232,154,.3); padding:7px 14px; border-radius:999px}
.w16{width:7px; height:7px; border-radius:999px; background:var(--accent)}
.w17{font-family:var(--font-display); font-weight:700; font-size:clamp(40px, 6.4vw, 82px); line-height:1.02; letter-spacing:-0.035em; margin:26px 0 0; max-width:16ch}
.w18{font-size:clamp(16px,1.7vw,20px); line-height:1.6; color:var(--text-secondary); max-width:680px; margin:28px 0 0; text-wrap:pretty}
.w19{color:var(--text-primary)}
.w20{display:flex; flex-wrap:wrap; gap:28px; margin-top:40px; align-items:flex-start}
.w21{flex:1 1 380px; min-width:0; background:var(--bg-inset); border:1px solid var(--border-default); border-radius:12px; padding:20px 22px; font-family:var(--font-mono); font-size:14px}
.w22{color:var(--text-faint)}
.w23{margin-top:8px}
.w24{margin-top:8px; color:var(--accent)}
.w25{display:flex; gap:12px; flex-wrap:wrap; padding-top:6px}
.w26{display:inline-flex; align-items:center; gap:9px; height:48px; padding:0 20px; border-radius:9px; font-weight:600; font-size:15px}
.w27{display:inline-flex; align-items:center; gap:9px; height:48px; padding:0 22px; border-radius:9px; font-weight:600; font-size:15px}

.w32{max-width:1200px; margin:0 auto; padding:96px 24px}
.w33{font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent)}
.w34{font-family:var(--font-display); font-weight:700; font-size:clamp(28px,4vw,46px); letter-spacing:-0.03em; margin:18px 0 0; max-width:20ch}
.w35{font-size:17px; line-height:1.65; color:var(--text-secondary); max-width:760px; margin:24px 0 0; text-wrap:pretty}

.w37{padding:28px}

.w40{font-size:14.5px; line-height:1.6; color:var(--text-muted); margin:0}
.w41{border-top:1px solid var(--border-subtle); background:var(--bg-sunken)}
.w42{font-size:17px; line-height:1.65; color:var(--text-secondary); max-width:720px; margin:22px 0 0}
.w43{font-family:var(--font-mono); color:var(--accent)}
.w44{font-family:var(--font-mono); color:var(--sev-critical)}
.w45{font-family:var(--font-mono); color:var(--text-muted)}
.w46{display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:18px; margin-top:44px}
.w47{padding:28px; display:flex; flex-direction:column}
.w48{display:flex; align-items:center; justify-content:space-between}
.w49{font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-faint)}

.w53{font-family:var(--font-display); font-weight:600; font-size:22px; margin:14px 0 18px}
.w54{display:flex; flex-direction:column; gap:11px; flex:1}
.w55{display:flex; gap:11px; align-items:flex-start}
.w56{color:var(--accent); flex:none; margin-top:2px}
.w57{font-size:14px; color:var(--text-secondary); line-height:1.5}
.w58{margin-top:22px; font-family:var(--font-mono); font-size:12.5px; color:var(--text-muted); background:var(--bg-inset); border:1px solid var(--border-subtle); border-radius:8px; padding:11px 14px}
.w59{font-family:var(--font-display); font-weight:700; font-size:clamp(28px,4vw,46px); letter-spacing:-0.03em; margin:18px 0 44px; max-width:22ch}

.w64{font-family:var(--font-display); font-weight:600; font-size:22px; margin:0 0 8px}
.w65{margin:0; min-width:0; background:var(--bg-inset); border:1px solid var(--border-subtle); border-radius:10px; padding:16px 18px; font-family:var(--font-mono); font-size:12.5px; line-height:1.6; color:var(--text-secondary); white-space:pre-wrap; overflow-x:auto}
.w66{font-family:var(--font-display); font-weight:700; font-size:clamp(28px,4vw,46px); letter-spacing:-0.03em; margin:18px 0 0; max-width:22ch}
.w67{font-size:17px; line-height:1.65; color:var(--text-secondary); max-width:720px; margin:22px 0 44px}
.w68{display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:18px; align-items:start}
.w69{padding:32px; display:flex; flex-direction:column; border-color:var(--border-subtle)}
.w70{width:42px; height:42px; border-radius:11px; background:var(--accent-wash); border:1px solid rgba(40,232,154,.35); display:flex; align-items:center; justify-content:center; color:var(--accent)}
.w71{font-family:var(--font-display); font-weight:700; font-size:22px}
.w72{font-family:var(--font-mono); font-size:12px; color:var(--text-faint)}
.w73{margin-left:auto; font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; padding:4px 10px; border-radius:999px; background:var(--accent-wash); color:var(--accent); border:1px solid rgba(40,232,154,.35)}
.w74{font-size:15px; line-height:1.6; color:var(--text-secondary); margin:18px 0 20px}
.w75{display:inline-flex; align-items:center; justify-content:center; gap:9px; height:48px; padding:0 22px; border-radius:9px; font-weight:600; font-size:15px; margin-top:26px}
.w76{padding:32px; display:flex; flex-direction:column; border-color:rgba(40,232,154,.35)}
.w77{font-family:var(--font-mono); font-size:12.5px; color:var(--text-faint); margin:26px 0 0; text-align:center}

.w90{width:10px; height:10px; border-radius:999px; background:var(--sev-critical)}
.w91{width:10px; height:10px; border-radius:999px; background:var(--sev-medium)}
.w92{width:10px; height:10px; border-radius:999px; background:var(--accent)}
.w93{margin-left:8px; font-family:var(--font-mono); font-size:12px; color:var(--text-faint)}

.w104{font-family:var(--font-display); font-weight:700; font-size:clamp(28px,4vw,46px); letter-spacing:-0.03em; margin:18px 0 0; max-width:24ch}
.w105{font-size:17px; line-height:1.65; color:var(--text-secondary); max-width:780px; margin:22px 0 44px; text-wrap:pretty}
.w106{display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:18px}
.w107{font-family:var(--font-display); font-weight:600; font-size:20px; margin:18px 0 10px}
.w108{max-width:1200px; margin:0 auto; padding:0 24px 96px}
.w109{position:relative; overflow:hidden; border:1px solid rgba(40,232,154,.3); border-radius:20px; background:linear-gradient(160deg, rgba(40,232,154,.09), rgba(40,232,154,0) 55%); padding:clamp(40px,6vw,72px); text-align:center}
.w110{position:absolute; inset:0; background-image:linear-gradient(var(--border-subtle) 1px, transparent 1px), linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px); background-size:48px 48px; opacity:.2; pointer-events:none}
.w111{position:relative; font-family:var(--font-display); font-weight:700; font-size:clamp(26px,3.6vw,42px); letter-spacing:-0.03em; margin:0; max-width:20ch; margin-inline:auto}
.w112{position:relative; font-size:17px; color:var(--text-secondary); margin:18px auto 32px; max-width:520px}
.w113{position:relative; display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.w114{display:inline-flex; align-items:center; gap:9px; height:50px; padding:0 26px; border-radius:10px; font-weight:600; font-size:15.5px}
.w115{display:inline-flex; align-items:center; gap:9px; height:50px; padding:0 24px; border-radius:10px; font-weight:600; font-size:15.5px}
.w116{max-width:1200px; margin:0 auto; padding:44px 24px; display:flex; flex-wrap:wrap; align-items:center; gap:18px}
.w117{width:30px; height:30px; border-radius:8px; background:var(--accent-wash); border:1px solid rgba(40,232,154,.4); display:flex; align-items:center; justify-content:center; color:var(--accent)}
.w118{font-family:var(--font-display); font-weight:700; font-size:17px}
.w119{display:flex; gap:22px; flex-wrap:wrap; margin-left:8px}
.w120{margin-left:auto; font-family:var(--font-mono); font-size:12.5px; color:var(--text-faint)}

/* 404 */
.u404{min-height:82vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:24px}
.u404 .box{max-width:560px}

/* Product tour, screenshots, lab matrix (2026-10). */
.shot{display:block; margin:0; padding:0; overflow:hidden; border-radius:14px; border:1px solid var(--border-default); background:var(--bg-surface); box-shadow:0 40px 100px -50px rgba(0,0,0,.85)}
.shot img{display:block; width:100%; height:auto; aspect-ratio:16/10}
.shot-bar{display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--border-subtle); background:var(--bg-inset)}
.shot-cap{font-size:13px; color:var(--text-faint); margin-top:12px; text-align:center}
.hero-shot{margin-top:64px}

.tour-h{font-family:var(--font-display); font-weight:700; font-size:clamp(24px,2.6vw,32px); letter-spacing:-0.02em; margin:12px 0 14px; line-height:1.15}
.tour-p{font-size:16px; line-height:1.65; color:var(--text-secondary); margin:0 0 20px; text-wrap:pretty}

.badge-new{display:inline-block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); border:1px solid rgba(40,232,154,.4); background:var(--accent-wash); border-radius:999px; padding:2px 8px; margin-left:8px; vertical-align:middle}
.matrix-wrap{margin-top:40px; overflow-x:auto; border:1px solid var(--border-subtle); border-radius:14px; background:var(--bg-surface)}
.matrix{width:100%; border-collapse:collapse; font-size:14.5px; min-width:640px}
.matrix th{font-family:var(--font-mono); font-size:11px; font-weight:400; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-faint); text-align:left; padding:14px 18px; border-bottom:1px solid var(--border-subtle)}
.matrix td{padding:14px 18px; border-bottom:1px solid var(--border-subtle); color:var(--text-secondary); vertical-align:top}
.matrix tr:last-child td{border-bottom:0}
.matrix td:first-child{color:var(--text-primary); font-weight:500}
.matrix code{font-family:var(--font-mono); font-size:12.5px; color:var(--text-muted)}
.st{font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; white-space:nowrap}
.st-ok{color:var(--accent)} .st-wait{color:var(--sev-medium)} .st-plan{color:var(--text-faint)}
@media (max-width: 960px) {
  .tour-row{grid-template-columns:1fr; gap:28px}
  .tour-row:nth-child(even) .tour-text{order:0}
  .tour{gap:72px}
  .lifecycle{grid-template-columns:repeat(4, minmax(0,1fr))}
  .w61{grid-template-columns:1fr; gap:16px}
}
@media (max-width: 520px) {
  .lifecycle{grid-template-columns:repeat(2, minmax(0,1fr))}
  .w14{padding:64px 16px 64px} .w32{padding:72px 16px}
}
#platforms .w46{grid-template-columns:repeat(auto-fit, minmax(250px, 1fr))}
#research .w106{grid-template-columns:repeat(auto-fit, minmax(min(100%, 440px), 1fr))}
#platforms .w58{white-space:nowrap; overflow-x:auto}
/* Hardware section */

.hw-note{font-size:13.5px; color:var(--text-faint); margin:40px 0 0; max-width:820px; line-height:1.6}
@media (max-width: 960px) { .hw-top,.hw-bottom{grid-template-columns:1fr; gap:32px} }

/* Deployment-agnostic positioning */
.where{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px; margin-top:32px}
.where-i{background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:12px; padding:16px 18px}
.where-i b{display:block; font-family:var(--font-display); font-weight:600; font-size:16px}
.where-i span{display:block; font-size:13.5px; color:var(--text-muted); margin-top:6px; line-height:1.45}

.um-navlink,.um-btn-primary{white-space:nowrap}
@media (max-width: 1080px) { .um-nav-links { display: none !important; } }
/* Isometric diagrams (inline SVG, CSS-only animation; no script under the CSP). */
.viz{margin-top:48px; border:1px solid var(--border-subtle); border-radius:16px; background:radial-gradient(circle at 50% 40%, var(--viz-glow), transparent 60%), var(--bg-page); overflow-x:auto}
.viz .iso-svg{display:block; width:100%; height:auto; min-width:760px}

:root{
  --viz-glow:rgba(40,232,154,.07);
  --iso-grid:rgba(147,162,179,.10); --iso-lead:#38485C;
  --g-t:#2A3645; --g-l:#151D27; --g-r:#1C2531;
  --sil-t:#3A4656; --sil-l:#1A222D; --sil-r:#232D3A;
  --tee-t:#1E5E6E; --tee-l:#0F2F38; --tee-r:#16424E;
  --att-t:#4A3F7A; --att-l:#231E3C; --att-r:#332B57;
  --img-t:#2C4A6E; --img-l:#142337; --img-r:#1D3350;
  --wrk-t:#1F6B4E; --wrk-l:#0E3325; --wrk-r:#154B37;
  --core-t:#28E89A; --core-l:#139463; --core-r:#1BB97B;
  --in-t:#5A2A33; --in-l:#2C1418; --in-r:#3F1D23;
  --ven-t:#5B4A1E; --ven-l:#2D240E; --ven-r:#403417;
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]){
  --viz-glow:rgba(15,165,104,.08);
  --iso-grid:rgba(59,72,89,.10); --iso-lead:#B7C4D2;
  --g-t:#FFFFFF; --g-l:#D2DCE6; --g-r:#E1E8EF;
  --sil-t:#E9EEF3; --sil-l:#B7C4D2; --sil-r:#CDD7E1;
  --tee-t:#D4F1F8; --tee-l:#8FCBDA; --tee-r:#B1DFEA;
  --att-t:#E6E0FA; --att-l:#B2A6E0; --att-r:#CBC2EE;
  --img-t:#DCE8F7; --img-l:#9FB8D6; --img-r:#BFD0E6;
  --wrk-t:#D3F4E5; --wrk-l:#86CDAE; --wrk-r:#ACE0C8;
  --core-t:#20C985; --core-l:#0B7A4F; --core-r:#0FA568;
  --in-t:#FBE0E3; --in-l:#E39AA3; --in-r:#F0BCC2;
  --ven-t:#FBEFCF; --ven-l:#D9B964; --ven-r:#EAD39A;
} }
:root[data-theme="light"]{
  --viz-glow:rgba(15,165,104,.08);
  --iso-grid:rgba(59,72,89,.10); --iso-lead:#B7C4D2;
  --g-t:#FFFFFF; --g-l:#D2DCE6; --g-r:#E1E8EF;
  --sil-t:#E9EEF3; --sil-l:#B7C4D2; --sil-r:#CDD7E1;
  --tee-t:#D4F1F8; --tee-l:#8FCBDA; --tee-r:#B1DFEA;
  --att-t:#E6E0FA; --att-l:#B2A6E0; --att-r:#CBC2EE;
  --img-t:#DCE8F7; --img-l:#9FB8D6; --img-r:#BFD0E6;
  --wrk-t:#D3F4E5; --wrk-l:#86CDAE; --wrk-r:#ACE0C8;
  --core-t:#20C985; --core-l:#0B7A4F; --core-r:#0FA568;
  --in-t:#FBE0E3; --in-l:#E39AA3; --in-r:#F0BCC2;
  --ven-t:#FBEFCF; --ven-l:#D9B964; --ven-r:#EAD39A;
}
.iso-svg .ft,.iso-svg .fl,.iso-svg .fr{stroke:rgba(255,255,255,.06); stroke-width:.8; stroke-linejoin:round}
  
  
.t-attest .ft{fill:var(--att-t)} .t-attest .fl{fill:var(--att-l)} .t-attest .fr{fill:var(--att-r)}
  
.t-work .ft{fill:var(--wrk-t)} .t-work .fl{fill:var(--wrk-l)} .t-work .fr{fill:var(--wrk-r)}
.t-core .ft{fill:var(--core-t)} .t-core .fl{fill:var(--core-l)} .t-core .fr{fill:var(--core-r)}
  
  
.t-vendor .ft{fill:var(--ven-t)} .t-vendor .fl{fill:var(--ven-l)} .t-vendor .fr{fill:var(--ven-r)}
.iso-svg .grid{stroke:var(--iso-grid); stroke-width:1}

.iso-svg .lead-dot{fill:var(--accent)}
.iso-svg .lbl{fill:var(--text-secondary); font-family:var(--font-body); font-size:13px}

.iso-svg .lbl-mono{font-family:var(--font-mono); font-size:11.5px; fill:var(--text-muted)}
.iso-svg .flow{fill:none; stroke-width:2; stroke-linecap:round; stroke-dasharray:6 8; animation:viz-flow 1.6s linear infinite}
.iso-svg .flow-bad{stroke:var(--sev-critical)}
.iso-svg .flow-ok{stroke:var(--accent)}
.iso-svg .flow-cy{stroke:var(--cyan-400)}
.iso-svg .flow-ven{stroke:var(--sev-medium)}
.iso-svg .flow-off{stroke:var(--text-faint); animation:none; stroke-dasharray:2 6}

.iso-svg .pulse{animation:viz-pulse 2.4s ease-in-out infinite; transform-box:fill-box; transform-origin:center}
.iso-svg .node-ring{fill:none; stroke:var(--accent); stroke-width:1.5; opacity:.5; animation:viz-ring 2.6s ease-out infinite; transform-box:fill-box; transform-origin:center}

 
@keyframes viz-flow{to{stroke-dashoffset:-28}}
@keyframes viz-scan{0%{transform:translateY(0); opacity:0} 10%{opacity:1} 85%{opacity:1} 100%{transform:translateY(var(--scan-rise, -168px)); opacity:0}}
@keyframes viz-pulse{50%{opacity:.75}}
@keyframes viz-ring{0%{transform:scale(.6); opacity:.7} 100%{transform:scale(1.6); opacity:0}}
@media (prefers-reduced-motion: reduce){ .iso-svg .flow,.iso-svg .scan,.iso-svg .pulse,.iso-svg .node-ring{animation:none} .iso-svg .scan{opacity:0} }
@media (max-width: 860px){ .viz{border-radius:12px} }

/* How it works: five steps, switched with radio inputs (no script under the CSP). */
.how{position:relative}
.how-r{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.how-tabs{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:10px}
.how-tab{display:flex; flex-direction:column; gap:6px; padding:16px 18px; border:1px solid var(--border-subtle); border-radius:12px; background:var(--bg-surface); cursor:pointer; transition:border-color 160ms var(--ease-out), background 160ms var(--ease-out)}
.how-tab:hover{border-color:var(--border-strong)}
.how-num{font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--text-faint); letter-spacing:-0.02em}
.how-tt{font-family:var(--font-display); font-weight:600; font-size:15.5px; color:var(--text-secondary); line-height:1.25}
.how-panels{margin-top:20px}
.how-panel{display:none; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:40px; align-items:center}
.how-viz{margin-top:0}
.how-copy .w40{margin:0 0 20px}
#how1:checked ~ .how-panels .hp1, #how2:checked ~ .how-panels .hp2, #how3:checked ~ .how-panels .hp3,
#how4:checked ~ .how-panels .hp4, #how5:checked ~ .how-panels .hp5{display:grid; animation:how-in 320ms var(--ease-out)}
#how1:checked ~ .how-tabs [for=how1], #how2:checked ~ .how-tabs [for=how2], #how3:checked ~ .how-tabs [for=how3],
#how4:checked ~ .how-tabs [for=how4], #how5:checked ~ .how-tabs [for=how5]{border-color:rgba(40,232,154,.55); background:var(--accent-wash)}
#how1:checked ~ .how-tabs [for=how1] .how-num, #how2:checked ~ .how-tabs [for=how2] .how-num, #how3:checked ~ .how-tabs [for=how3] .how-num,
#how4:checked ~ .how-tabs [for=how4] .how-num, #how5:checked ~ .how-tabs [for=how5] .how-num{color:var(--accent)}
#how1:checked ~ .how-tabs [for=how1] .how-tt, #how2:checked ~ .how-tabs [for=how2] .how-tt, #how3:checked ~ .how-tabs [for=how3] .how-tt,
#how4:checked ~ .how-tabs [for=how4] .how-tt, #how5:checked ~ .how-tabs [for=how5] .how-tt{color:var(--text-primary)}
#how1:focus-visible ~ .how-tabs [for=how1], #how2:focus-visible ~ .how-tabs [for=how2], #how3:focus-visible ~ .how-tabs [for=how3],
#how4:focus-visible ~ .how-tabs [for=how4], #how5:focus-visible ~ .how-tabs [for=how5]{outline:2px solid var(--accent); outline-offset:2px}
@keyframes how-in{from{opacity:0; transform:translateY(6px)}}
@media (max-width: 960px){ .how-panel{grid-template-columns:1fr; gap:20px} .how-tabs{grid-template-columns:repeat(5, minmax(120px,1fr)); overflow-x:auto} }
@media (prefers-reduced-motion: reduce){ .how-panel{animation:none !important} }
.how-viz .iso-svg{min-width:0}

.iso-svg .docline{stroke:var(--text-faint); stroke-width:2; stroke-linecap:round}
 
  
.t-ghost .ft,.t-ghost .fl,.t-ghost .fr{fill:none; stroke:var(--border-strong); stroke-dasharray:3 3}

.t-post .ft{fill:var(--sil-t)} .t-post .fl{fill:var(--sil-l)} .t-post .fr{fill:var(--sil-r)}
.viz{margin-left:0; margin-right:0} .how-panel{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
/* Detailed isometric illustrations */
:root{ --desk-t:#2B3542; --desk-l:#151C25; --desk-r:#1D2631; --dev-t:#5B6878; --dev-l:#2A333F; --dev-r:#3A4553; --scr:#081018;
  --zone-t:#121A23; --zone-l:#0B1118; --zone-r:#0E151D; --ped-t:#2C3746; --ped-l:#141B24; --ped-r:#1C2530;
  --srv-t:#3A4656; --srv-l:#18202A; --srv-r:#222C38; --bay:#0E141B; --bkt-t:#3B6A9A; --bkt-l:#1C3550; --bkt-r:#264666; --doc-t:#C9D4E0; --doc-l:#7D8B9B; --doc-r:#A4B1C0;
  --shade:rgba(0,0,0,.55); --edge:rgba(255,255,255,.22); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]){ --desk-t:#FFFFFF; --desk-l:#C9D3DD; --desk-r:#DCE3EA; --dev-t:#E4E9EF; --dev-l:#9AA7B5; --dev-r:#BAC5D0; --scr:#0E1620;
  --zone-t:#FFFFFF; --zone-l:#D7DFE7; --zone-r:#E6ECF1; --ped-t:#F3F6F9; --ped-l:#B7C3CF; --ped-r:#D3DCE4;
  --srv-t:#E9EEF3; --srv-l:#A9B6C3; --srv-r:#C6D0DA; --bay:#5E6C7B; --bkt-t:#CFE2F6; --bkt-l:#7FA7CF; --bkt-r:#A6C3E2; --doc-t:#FFFFFF; --doc-l:#B7C3CF; --doc-r:#D7DFE7;
  --shade:rgba(30,45,65,.22); --edge:rgba(255,255,255,.7); } }
:root[data-theme="light"]{ --desk-t:#FFFFFF; --desk-l:#C9D3DD; --desk-r:#DCE3EA; --dev-t:#E4E9EF; --dev-l:#9AA7B5; --dev-r:#BAC5D0; --scr:#0E1620;
  --zone-t:#FFFFFF; --zone-l:#D7DFE7; --zone-r:#E6ECF1; --ped-t:#F3F6F9; --ped-l:#B7C3CF; --ped-r:#D3DCE4;
  --srv-t:#E9EEF3; --srv-l:#A9B6C3; --srv-r:#C6D0DA; --bay:#5E6C7B; --bkt-t:#CFE2F6; --bkt-l:#7FA7CF; --bkt-r:#A6C3E2; --doc-t:#FFFFFF; --doc-l:#B7C3CF; --doc-r:#D7DFE7;
  --shade:rgba(30,45,65,.22); --edge:rgba(255,255,255,.7); }
.t-desk .ft{fill:var(--desk-t)} .t-desk .fl{fill:var(--desk-l)} .t-desk .fr{fill:var(--desk-r)}
.t-device .ft{fill:var(--dev-t)} .t-device .fl{fill:var(--dev-l)} .t-device .fr{fill:var(--dev-r)}
.t-screen .ft,.t-screen .fl,.t-screen .fr{fill:var(--scr)}
.t-zone .ft{fill:var(--zone-t)} .t-zone .fl{fill:var(--zone-l)} .t-zone .fr{fill:var(--zone-r)}
.t-pedestal .ft{fill:var(--ped-t)} .t-pedestal .fl{fill:var(--ped-l)} .t-pedestal .fr{fill:var(--ped-r)}
.t-server .ft{fill:var(--srv-t)} .t-server .fl{fill:var(--srv-l)} .t-server .fr{fill:var(--srv-r)}
.t-bucket .ft{fill:var(--bkt-t)} .t-bucket .fl{fill:var(--bkt-l)} .t-bucket .fr{fill:var(--bkt-r)}
.t-doc .ft{fill:var(--doc-t)} .t-doc .fl{fill:var(--doc-l)} .t-doc .fr{fill:var(--doc-r)}
.iso-detail .ft,.iso-detail .fl,.iso-detail .fr{stroke:none}
.iso-detail .edge-hl{fill:none; stroke:var(--edge); stroke-width:1; stroke-linejoin:round}
.iso-detail .shade{fill:var(--shade)}
.iso-detail .bay{fill:var(--bay)}
.iso-detail .led{fill:var(--accent); animation:led-blink 1.8s steps(2) infinite}
.iso-detail .led:nth-child(3n){animation-delay:-.6s} .iso-detail .led:nth-child(3n+1){animation-delay:-1.1s}
.iso-detail .band{fill:none; stroke:rgba(255,255,255,.12); stroke-width:1.2}
.iso-detail .rim{fill:none; stroke:rgba(0,0,0,.25); stroke-width:1}
.iso-detail .zone-line{fill:none; stroke:var(--border-strong); stroke-width:1.2; stroke-dasharray:6 5}
.iso-detail .zone-t{fill:var(--text-faint); font-family:var(--font-mono); font-size:11px; letter-spacing:.12em}
.iso-detail .ico{fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.iso-detail .ico-acc{stroke:var(--accent)} .iso-detail .ico-dim{stroke:var(--text-faint)} .iso-detail .ico-key{stroke:var(--sev-medium)} .iso-detail .ico-bad{stroke:var(--sev-critical)} .iso-detail .ico-cy{stroke:var(--cyan-400)}
.iso-detail .flow{stroke-width:1.8; stroke-dasharray:5 7; opacity:.75}
.iso-detail .pkt{filter:drop-shadow(0 0 4px currentColor)}
.iso-detail .pkt-flow-ok{fill:var(--accent); color:var(--accent)} .iso-detail .pkt-flow-cy{fill:var(--cyan-400); color:var(--cyan-400)}
.iso-detail .pkt-flow-bad{fill:var(--sev-critical); color:var(--sev-critical)} .iso-detail .pkt-flow-ven{fill:var(--sev-medium); color:var(--sev-medium)}
.iso-detail .leader{stroke:var(--border-strong); stroke-width:1}
.iso-detail .anchor{fill:var(--bg-page); stroke:var(--text-muted); stroke-width:1.5}
.iso-detail .chip rect{fill:var(--bg-elevated); stroke:var(--border-default)}
.iso-detail .chip-e{fill:var(--text-faint); font-family:var(--font-mono); font-size:10px; letter-spacing:.1em}
.iso-detail .chip-t{fill:var(--text-primary); font-family:var(--font-body); font-size:12.5px; font-weight:600}
.iso-detail .chip-bad rect{stroke:rgba(255,77,94,.55)} .iso-detail .chip-bad .chip-e{fill:var(--sev-critical)}
.iso-detail .chip-acc rect{stroke:rgba(40,232,154,.5)} .iso-detail .chip-acc .chip-e{fill:var(--accent)}
.iso-detail .chip-ven rect{stroke:rgba(255,197,61,.5)} .iso-detail .chip-ven .chip-e{fill:var(--sev-medium)}
.iso-detail .stat circle{stroke-width:1.5} .iso-detail .stat path{fill:none; stroke-width:4; stroke-linecap:round; stroke-linejoin:round}
.iso-detail .stat-ok circle{fill:var(--accent-wash); stroke:var(--accent)} .iso-detail .stat-ok path{stroke:var(--accent)}
.iso-detail .stat-bad circle{fill:var(--sev-critical-a); stroke:var(--sev-critical)} .iso-detail .stat-bad path{stroke:var(--sev-critical)}
.iso-detail .pin{stroke:var(--border-strong); stroke-width:1}
@keyframes led-blink{50%{opacity:.25}}
@media (prefers-reduced-motion: reduce){ .iso-detail .pkt{display:none} .iso-detail .led{animation:none} }
:root{ --belt-t:#1C2531; --belt-l:#0D1219; --belt-r:#141B24; --post-t:#5B6878; --post-l:#2A333F; --post-r:#3A4553; --gan-t:#2B3542; --gan-l:#151C25; --gan-r:#1D2631;
  --vp-t:#5B4A1E; --vp-l:#2D240E; --vp-r:#403417; --log-t:#3D3470; --log-l:#1D1838; --log-r:#2B2552; --fin:#4A3F7A; --tk-t:#5A2A33; --tk-l:#2C1418; --tk-r:#3F1D23; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]){ --belt-t:#E3E9EF; --belt-l:#B7C3CF; --belt-r:#CDD7E1; --post-t:#F3F6F9; --post-l:#9AA7B5; --post-r:#BAC5D0; --gan-t:#FFFFFF; --gan-l:#B7C3CF; --gan-r:#D3DCE4;
  --vp-t:#FBEFCF; --vp-l:#D9B964; --vp-r:#EAD39A; --log-t:#E6E0FA; --log-l:#B2A6E0; --log-r:#CBC2EE; --fin:#B2A6E0; --tk-t:#FBE0E3; --tk-l:#E39AA3; --tk-r:#F0BCC2; } }
:root[data-theme="light"]{ --belt-t:#E3E9EF; --belt-l:#B7C3CF; --belt-r:#CDD7E1; --post-t:#F3F6F9; --post-l:#9AA7B5; --post-r:#BAC5D0; --gan-t:#FFFFFF; --gan-l:#B7C3CF; --gan-r:#D3DCE4;
  --vp-t:#FBEFCF; --vp-l:#D9B964; --vp-r:#EAD39A; --log-t:#E6E0FA; --log-l:#B2A6E0; --log-r:#CBC2EE; --fin:#B2A6E0; --tk-t:#FBE0E3; --tk-l:#E39AA3; --tk-r:#F0BCC2; }
.t-belt .ft{fill:var(--belt-t)} .t-belt .fl{fill:var(--belt-l)} .t-belt .fr{fill:var(--belt-r)}
.t-post .ft{fill:var(--post-t)} .t-post .fl{fill:var(--post-l)} .t-post .fr{fill:var(--post-r)}
.t-gantry .ft{fill:var(--gan-t)} .t-gantry .fl{fill:var(--gan-l)} .t-gantry .fr{fill:var(--gan-r)}
  
.t-logstore .ft{fill:var(--log-t)} .t-logstore .fl{fill:var(--log-l)} .t-logstore .fr{fill:var(--log-r)}

  
.t-stripe-a .ft,.t-stripe-a .fl,.t-stripe-a .fr{fill:var(--sev-critical)} .t-stripe-b .ft,.t-stripe-b .fl,.t-stripe-b .fr{fill:#F5F8FB}
  
  
.iso-detail .belt-line{fill:rgba(255,255,255,.05)}
.iso-detail .laser{fill:rgba(40,232,154,.18); stroke:rgba(40,232,154,.6); stroke-width:1; animation:laser 1.6s ease-in-out infinite}
.iso-detail .beacon{fill:var(--sev-critical); filter:drop-shadow(0 0 6px var(--sev-critical)); animation:led-blink 1s steps(2) infinite}

@keyframes laser{50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){ .iso-detail .laser,.iso-detail .beacon,.iso-detail .alert-ring{animation:none} .iso-detail .carry{display:none} }
.iso-detail .t-ghost .ft,.iso-detail .t-ghost .fl,.iso-detail .t-ghost .fr{fill:rgba(147,162,179,.06); stroke:var(--text-faint); stroke-width:1; stroke-dasharray:4 3}
/* How it works: full-width illustration, copy beneath */
.how-panel{grid-template-columns:1fr !important; gap:24px}
.how-copy{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:32px; align-items:start}
.how-copy .w40{margin:0}
.how-viz .iso-svg{min-width:720px}
@media (max-width: 860px){ .how-copy{grid-template-columns:1fr; gap:16px} }
:root{ --cage:rgba(52,210,242,.10); --cage-s:rgba(52,210,242,.55); --inb-t:#5A2A33; --inb-l:#2C1418; --inb-r:#3F1D23; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]){ --cage:rgba(24,175,214,.10); --cage-s:rgba(24,175,214,.6); --inb-t:#FBE0E3; --inb-l:#E39AA3; --inb-r:#F0BCC2; } }
:root[data-theme="light"]{ --cage:rgba(24,175,214,.10); --cage-s:rgba(24,175,214,.6); --inb-t:#FBE0E3; --inb-l:#E39AA3; --inb-r:#F0BCC2; }
.iso-detail .t-cage .ft,.iso-detail .t-cage .fl,.iso-detail .t-cage .fr{fill:var(--cage); stroke:var(--cage-s); stroke-width:1}
  

@keyframes viz-scan-big{0%{transform:translateY(0); opacity:0} 10%{opacity:1} 85%{opacity:1} 100%{transform:translateY(-300px); opacity:0}}
@media (prefers-reduced-motion: reduce){ .iso-detail .scan-big{animation:none; opacity:0} }
/* Product tour tabs (radio inputs; no script under the CSP) */
.tabs{position:relative; margin-top:48px}
.tab-r{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.tab-ls{display:flex; flex-wrap:wrap; gap:8px; border-bottom:1px solid var(--border-subtle); padding-bottom:16px}
.tab-l{font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--text-muted); padding:9px 16px; border-radius:999px; border:1px solid var(--border-subtle); background:var(--bg-surface); cursor:pointer; transition:color 160ms var(--ease-out), border-color 160ms var(--ease-out)}
.tab-l:hover{color:var(--text-primary); border-color:var(--border-strong)}
.tab-ps{margin-top:28px}
.tab-p{display:none; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:44px; align-items:center}
.tab-copy .tour-h{margin-top:0}
#tour1:checked ~ .tab-ps .tp1, #tour2:checked ~ .tab-ps .tp2, #tour3:checked ~ .tab-ps .tp3, #tour4:checked ~ .tab-ps .tp4, #tour5:checked ~ .tab-ps .tp5, #tour6:checked ~ .tab-ps .tp6{display:grid; animation:how-in 320ms var(--ease-out)}
#tour1:checked ~ .tab-ls [for=tour1], #tour2:checked ~ .tab-ls [for=tour2], #tour3:checked ~ .tab-ls [for=tour3], #tour4:checked ~ .tab-ls [for=tour4], #tour5:checked ~ .tab-ls [for=tour5], #tour6:checked ~ .tab-ls [for=tour6]{color:var(--accent-contrast); background:var(--accent); border-color:var(--accent)}
#tour1:focus-visible ~ .tab-ls [for=tour1], #tour2:focus-visible ~ .tab-ls [for=tour2], #tour3:focus-visible ~ .tab-ls [for=tour3], #tour4:focus-visible ~ .tab-ls [for=tour4], #tour5:focus-visible ~ .tab-ls [for=tour5], #tour6:focus-visible ~ .tab-ls [for=tour6]{outline:2px solid var(--accent); outline-offset:2px}
@media (max-width: 960px){ .tab-p{grid-template-columns:1fr; gap:24px} .tab-ls{flex-wrap:nowrap; overflow-x:auto} .tab-l{white-space:nowrap} }
@media (prefers-reduced-motion: reduce){ .tab-p{animation:none !important} }
/* Architecture legend, edition buttons, collapsible labs */

   
.ed-btns{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:26px}
.ed-btns .w75{margin-top:0}
.labs-more{margin-top:28px}
.labs-more summary{cursor:pointer; font-family:var(--font-mono); font-size:13px; color:var(--accent); letter-spacing:.04em; list-style:none; display:inline-flex; align-items:center; gap:8px}
.labs-more summary::-webkit-details-marker{display:none}
.labs-more summary::before{content:"+"; display:inline-block; width:18px; height:18px; line-height:16px; text-align:center; border:1px solid currentColor; border-radius:5px}
.labs-more[open] summary::before{content:"−"}
.labs-more .matrix-wrap{margin-top:18px}
.shot picture{display:block}

/* Theme toggle and theme-specific screenshots */
:root{color-scheme:dark}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){color-scheme:light} }
:root[data-theme="light"]{color-scheme:light}
.theme-btn{display:none; width:40px; height:40px; align-items:center; justify-content:center; border-radius:9px; border:1px solid var(--border-default); background:var(--bg-surface); color:var(--text-secondary); cursor:pointer; padding:0; transition:color 160ms var(--ease-out), border-color 160ms var(--ease-out)}

.theme-btn:hover{color:var(--text-primary); border-color:var(--border-strong)}
.theme-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.theme-btn .ico-sun{display:block} .theme-btn .ico-moon{display:none}
.w9{display:flex; align-items:center; gap:10px}
.shot img.only-light{display:none}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .theme-btn .ico-sun{display:none} :root:not([data-theme="dark"]) .theme-btn .ico-moon{display:block}
  :root:not([data-theme="dark"]) .shot img.only-light{display:block} :root:not([data-theme="dark"]) .shot img.only-dark{display:none}
}
:root[data-theme="light"] .theme-btn .ico-sun{display:none} :root[data-theme="light"] .theme-btn .ico-moon{display:block}
:root[data-theme="light"] .shot img.only-light{display:block} :root[data-theme="light"] .shot img.only-dark{display:none}
.iso-detail .chip-ic-bg{fill:var(--bg-inset); stroke:var(--border-subtle)}
.iso-detail .chip-ic{fill:none; stroke:var(--text-secondary); stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round}
.iso-detail .chip-bad .chip-ic{stroke:var(--sev-critical)} .iso-detail .chip-acc .chip-ic{stroke:var(--accent)} .iso-detail .chip-ven .chip-ic{stroke:var(--sev-medium)}
.iso-detail .chip-bad .chip-ic-bg{fill:var(--sev-critical-a)} .iso-detail .chip-acc .chip-ic-bg{fill:var(--accent-wash)}
.iso-detail .win{fill:rgba(255,226,140,.35)}
.iso-detail .leader{fill:none}
.iso-detail .vent{fill:rgba(0,0,0,.22)}
/* Edition tags on How it works steps */
.ed{display:inline-block; font-family:var(--font-mono); font-style:normal; font-size:10.5px; font-weight:400; letter-spacing:.06em; text-transform:uppercase; border-radius:999px; padding:2px 8px; border:1px solid; vertical-align:middle}
.ed-oss{color:var(--text-muted); border-color:var(--border-strong)}
.ed-cloud{color:var(--accent); border-color:rgba(40,232,154,.45); background:var(--accent-wash)}
.how-num{display:flex; align-items:center; justify-content:space-between; gap:8px}
.how-num .ed{font-size:9.5px; padding:1px 7px}
.how-copy .ed{margin-bottom:10px}
.hero-shot{margin-top:56px}
#platforms .w58{font-size:11.5px; padding:10px 12px}
/* detail pass */
:root{--rim-t:#202A36; --rim-l:#0A0F15; --rim-r:#0D131A}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){--rim-t:#E9EEF3; --rim-l:#BAC5D0; --rim-r:#CDD7E1} }
:root[data-theme="light"]{--rim-t:#E9EEF3; --rim-l:#BAC5D0; --rim-r:#CDD7E1}
.t-rim .ft{fill:var(--rim-t)} .t-rim .fl{fill:var(--rim-l)} .t-rim .fr{fill:var(--rim-r)}
.iso-detail .corner{fill:none; stroke:var(--accent); stroke-width:1.6; opacity:.7}
.iso-detail .bay{fill:rgba(0,0,0,.28)} .iso-detail .bay-slot{fill:rgba(255,255,255,.07)}
.iso-detail .rail{stroke:rgba(255,255,255,.12); stroke-width:1}
.iso-detail .vent{fill:rgba(0,0,0,.25)}
.iso-detail .key{fill:rgba(0,0,0,.28)}
.iso-detail .fin-top{fill:rgba(255,255,255,.1)}
.iso-detail .ftxt{fill:var(--text-muted); font-family:var(--font-mono); font-weight:600; letter-spacing:.08em}
.iso-detail .ftxt-acc{fill:var(--accent)}
 
.iso-detail .ui-row{fill:rgba(147,162,179,.35)}  
.iso-detail .ico-core{stroke:#06281A; stroke-width:2}
.iso-detail .conduit{fill:none; stroke:var(--border-default); stroke-width:6; stroke-linecap:round; stroke-linejoin:round; opacity:.55}
.iso-detail .socket{fill:var(--bg-elevated); stroke-width:1.5}
.iso-detail .sk-flow-ok{stroke:var(--accent)} .iso-detail .sk-flow-cy{stroke:var(--cyan-400)} .iso-detail .sk-flow-bad{stroke:var(--sev-critical)} .iso-detail .sk-flow-ven{stroke:var(--sev-medium)} .iso-detail .sk-flow-off{stroke:var(--text-faint)}
.pk-flow-ok .ft{fill:#7CF5C4} .pk-flow-ok .fl{fill:#139463} .pk-flow-ok .fr{fill:#1BB97B}
.pk-flow-cy .ft{fill:#9BE8F8} .pk-flow-cy .fl{fill:#1689A3} .pk-flow-cy .fr{fill:#22AFCF}
.pk-flow-bad .ft{fill:#FF9AA4} .pk-flow-bad .fl{fill:#A8202E} .pk-flow-bad .fr{fill:#D93445}
.pk-flow-ven .ft{fill:#FFE29A} .pk-flow-ven .fl{fill:#9A7418} .pk-flow-ven .fr{fill:#C99A26}
.iso-detail .pkt{filter:none}
.iso-detail .orbit{fill:none; stroke:var(--accent); stroke-width:1.4; stroke-dasharray:3 9; opacity:.75; animation:orbit 6s linear infinite}
.iso-detail .orbit-2{stroke-dasharray:14 22; opacity:.45; animation-duration:9s; animation-direction:reverse}
@keyframes orbit{to{stroke-dashoffset:-120}}
@media (prefers-reduced-motion: reduce){ .iso-detail .orbit{animation:none} }
:root{--wall-t:#2B3542; --wall-l:#151C25; --wall-r:#1D2631; --vault-t:#1E4E5E; --vault-l:#0E2730; --vault-r:#163A46; --ten-t:#1F6B4E; --ten-l:#0E3325; --ten-r:#154B37}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){--wall-t:#FFFFFF; --wall-l:#C6D0DA; --wall-r:#DCE3EA; --vault-t:#D4F1F8; --vault-l:#8FCBDA; --vault-r:#B1DFEA; --ten-t:#D3F4E5; --ten-l:#86CDAE; --ten-r:#ACE0C8} }
:root[data-theme="light"]{--wall-t:#FFFFFF; --wall-l:#C6D0DA; --wall-r:#DCE3EA; --vault-t:#D4F1F8; --vault-l:#8FCBDA; --vault-r:#B1DFEA; --ten-t:#D3F4E5; --ten-l:#86CDAE; --ten-r:#ACE0C8}
  
.t-vault .ft{fill:var(--vault-t)} .t-vault .fl{fill:var(--vault-l)} .t-vault .fr{fill:var(--vault-r)}
  
  
  

/* iteration 2 */
.iso-detail .plate-grid{stroke:var(--iso-grid); stroke-width:1}
.iso-detail .halo{fill:var(--accent); opacity:.22}
.iso-detail .halo-bad{fill:var(--sev-critical); opacity:.22}

.iso-detail .fold{fill:rgba(0,0,0,.18)}
.iso-detail .seam{fill:none; stroke:rgba(0,0,0,.35); stroke-width:1.2}
.iso-detail .handle{fill:var(--cyan-400); opacity:.8}

:root{--dimm-t:#3B6A9A}
  
.iso-detail .ui-dot-c{fill:var(--accent)} .iso-detail .ui-dot-bad-c{fill:var(--sev-critical)}
/* Platform cards: keep flags on one line, show the whole command */
.w43,.w44,.w45{white-space:nowrap}
#platforms .w58{white-space:normal; overflow-x:visible; overflow-wrap:anywhere; word-break:normal; line-height:1.55}
.st-note{display:block; font-size:12px; color:var(--text-faint); margin-top:3px}
/* untrust-runs-here marker */
.iso-detail .umark-bg{fill:var(--accent); filter:drop-shadow(0 4px 10px rgba(40,232,154,.45))}
.iso-detail .umark-t{fill:var(--accent-contrast); font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:-.01em}
.iso-detail .umark-ic{fill:none; stroke:var(--accent-contrast); stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.iso-detail .umark-stem{stroke:var(--accent); stroke-width:1.5}
.iso-detail .umark-dot{fill:var(--accent)}
.iso-detail .umark{animation:umark 2.8s ease-in-out infinite}
@keyframes umark{50%{transform:translateY(-3px)}}
@media (prefers-reduced-motion: reduce){ .iso-detail .umark{animation:none} }
:root{--bad-t:#6B2630; --bad-l:#341217; --bad-r:#4A1A21; --good-t:#1F6B4E; --good-l:#0E3325; --good-r:#154B37}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){--bad-t:#FBD5DA; --bad-l:#E08A95; --bad-r:#EDAFB7; --good-t:#D3F4E5; --good-l:#86CDAE; --good-r:#ACE0C8} }
:root[data-theme="light"]{--bad-t:#FBD5DA; --bad-l:#E08A95; --bad-r:#EDAFB7; --good-t:#D3F4E5; --good-l:#86CDAE; --good-r:#ACE0C8}
.t-bad .ft{fill:var(--bad-t)} .t-bad .fl{fill:var(--bad-l)} .t-bad .fr{fill:var(--bad-r)}
.t-good .ft{fill:var(--good-t)} .t-good .fl{fill:var(--good-l)} .t-good .fr{fill:var(--good-r)}
.iso-detail .flow-fz{stroke:#B48CFF}
.iso-detail .sk-flow-fz{stroke:#B48CFF}
.pk-flow-fz .ft{fill:#D9C6FF} .pk-flow-fz .fl{fill:#6E4BC2} .pk-flow-fz .fr{fill:#8D69E0}
.iso-detail .zone-band{fill:rgba(147,162,179,.05); stroke:var(--border-strong); stroke-width:1.2; stroke-dasharray:6 5}
.iso-detail .ftag rect{fill:var(--bg-elevated); stroke-width:1.2}
.iso-detail .ftag text{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.02em}
.iso-detail .ftag-ok rect{stroke:var(--accent)} .iso-detail .ftag-ok text{fill:var(--accent)}
.iso-detail .ftag-cy rect{stroke:var(--cyan-400)} .iso-detail .ftag-cy text{fill:var(--cyan-400)}
.iso-detail .ftag-ven rect{stroke:var(--sev-medium)} .iso-detail .ftag-ven text{fill:var(--sev-medium)}
.iso-detail .ftag-bad rect{stroke:var(--sev-critical)} .iso-detail .ftag-bad text{fill:var(--sev-critical)}
/* How it works: let the illustration use more of the screen */
@media (min-width: 1100px){

}
:root{--bp-t:#1D4E89; --bp-l:#0E2747; --bp-r:#163A66}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){--bp-t:#CFE2FA; --bp-l:#7FA7D8; --bp-r:#A6C3E8} }
:root[data-theme="light"]{--bp-t:#CFE2FA; --bp-l:#7FA7D8; --bp-r:#A6C3E8}
.t-blueprint .ft{fill:var(--bp-t)} .t-blueprint .fl{fill:var(--bp-l)} .t-blueprint .fr{fill:var(--bp-r)}
.iso-detail .bp-line{fill:none; stroke:#8EC5FF; stroke-width:1.2; stroke-dasharray:3 2}

/* How it works: illustration left, explanation and command right; every frame the same size */
.how-panels{--bleed:min(calc(100vw - 48px), 1560px)}
#how1:checked ~ .how-panels .hp1, #how2:checked ~ .how-panels .hp2, #how3:checked ~ .how-panels .hp3,
#how4:checked ~ .how-panels .hp4, #how5:checked ~ .how-panels .hp5{display:grid}
.how-panel{grid-template-columns:minmax(0,1fr) 340px !important; gap:28px !important; align-items:center}
.how-viz{aspect-ratio:2.15 / 1; margin:0}
.how-viz .iso-svg{width:100%; height:100%; min-width:0 !important; display:block}
.how-copy{display:flex !important; flex-direction:column; gap:20px}
.how-copy .w65{font-size:12px; white-space:pre-wrap; overflow-wrap:anywhere}
@media (min-width: 1100px){
}
@media (max-width: 1099px){
  .how-panel{grid-template-columns:1fr !important}
  .how-viz{aspect-ratio:auto}
  .how-viz .iso-svg{height:auto; min-width:720px !important}
  .how-viz{overflow-x:auto}
}

.iso-detail .ftag:not(.ftag-ok):not(.ftag-bad):not(.ftag-cy):not(.ftag-ven) rect{stroke:var(--border-strong)} .iso-detail .ftag:not(.ftag-ok):not(.ftag-bad):not(.ftag-cy):not(.ftag-ven) text{fill:var(--text-muted)}

/* Why this exists: with / without untrust toggle (radio inputs; no script needed) */
.cov{position:relative; margin-top:40px}
.cov-r{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.cov-switch{display:inline-flex; padding:4px; border-radius:999px; background:var(--bg-surface); border:1px solid var(--border-default); gap:4px}
.cov-switch label{font-family:var(--font-display); font-weight:600; font-size:14.5px; color:var(--text-muted); padding:9px 18px; border-radius:999px; cursor:pointer; transition:background 160ms var(--ease-out), color 160ms var(--ease-out)}
#cov0:checked ~ .cov-switch [for=cov0]{background:rgba(52,210,242,.14); color:var(--cyan-400)}
#cov1:checked ~ .cov-switch [for=cov1]{background:var(--accent); color:var(--accent-contrast)}
#cov0:focus-visible ~ .cov-switch [for=cov0], #cov1:focus-visible ~ .cov-switch [for=cov1]{outline:2px solid var(--accent); outline-offset:2px}
.cov-viz{margin-top:20px} .cov-on,.cov-cap-on{display:none}
#cov1:checked ~ .cov-on, #cov1:checked ~ .cov-cap-on{display:block; animation:how-in 320ms var(--ease-out)}
#cov1:checked ~ .cov-off, #cov1:checked ~ .cov-cap-off{display:none}
.t-glass .ft,.t-glass .fl,.t-glass .fr{stroke:rgba(255,255,255,.5); stroke-width:1}
.g-sil .fr{fill:rgba(147,162,179,.38)} .g-sil .fl,.g-sil .ft{fill:rgba(147,162,179,.6)}
.g-tee .fr{fill:rgba(52,210,242,.30)} .g-tee .fl,.g-tee .ft{fill:rgba(52,210,242,.55)}
.g-key .fr{fill:rgba(160,130,255,.30)} .g-key .fl,.g-key .ft{fill:rgba(160,130,255,.55)}
.g-img .fr{fill:rgba(80,140,230,.30)} .g-img .fl,.g-img .ft{fill:rgba(80,140,230,.55)}
.g-wrk .fr{fill:rgba(40,232,154,.30)} .g-wrk .fl,.g-wrk .ft{fill:rgba(40,232,154,.55)}
.iso-detail .g-trace{fill:none; stroke:rgba(255,255,255,.55); stroke-width:1.1}
.iso-detail .g-ico{stroke:#fff; stroke-width:2.2; opacity:.9}
.iso-detail .g-lab{fill:#fff; opacity:.9}
.iso-detail .g-frame{fill:none; stroke:var(--accent); stroke-width:2.2; filter:drop-shadow(0 0 6px var(--accent))}
.iso-detail .axis{stroke:var(--sev-critical); stroke-width:2; stroke-dasharray:4 6; opacity:.6}
.iso-detail .axis-on{stroke:var(--accent); opacity:.9; filter:drop-shadow(0 0 5px var(--accent))}
.iso-detail .g-dim{opacity:.22}
.iso-detail .g-frame-bad{stroke:var(--sev-critical); filter:drop-shadow(0 0 6px var(--sev-critical))}
.iso-detail .axis-att{stroke:var(--cyan-400); opacity:.35}
.iso-detail .ftag-dim rect{stroke:var(--border-strong)} .iso-detail .ftag-dim text{fill:var(--text-faint)}
.iso-detail .chip-cy rect{stroke:rgba(52,210,242,.55)} .iso-detail .chip-cy .chip-e{fill:var(--cyan-400)} .iso-detail .chip-cy .chip-ic{stroke:var(--cyan-400)}

/* glass layers in light theme */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .iso-detail .g-ico{stroke:#2B3A4C}
  :root:not([data-theme="dark"]) .iso-detail .g-lab{fill:#2B3A4C}
  :root:not([data-theme="dark"]) .iso-detail .g-trace{stroke:rgba(43,58,76,.35)}
  :root:not([data-theme="dark"]) .t-glass .ft,:root:not([data-theme="dark"]) .t-glass .fl,:root:not([data-theme="dark"]) .t-glass .fr{stroke:rgba(43,58,76,.35)}
  :root:not([data-theme="dark"]) .g-sil .fr{fill:rgba(147,162,179,.45)}
  :root:not([data-theme="dark"]) .g-tee .fr{fill:rgba(24,175,214,.28)}
  :root:not([data-theme="dark"]) .g-key .fr{fill:rgba(130,100,230,.28)}
  :root:not([data-theme="dark"]) .g-img .fr{fill:rgba(60,120,210,.28)}
  :root:not([data-theme="dark"]) .g-wrk .fr{fill:rgba(15,165,104,.28)}
}
:root[data-theme="light"] .iso-detail .g-ico{stroke:#2B3A4C}
:root[data-theme="light"] .iso-detail .g-lab{fill:#2B3A4C}
:root[data-theme="light"] .iso-detail .g-trace{stroke:rgba(43,58,76,.35)}
:root[data-theme="light"] .t-glass .ft,:root[data-theme="light"] .t-glass .fl,:root[data-theme="light"] .t-glass .fr{stroke:rgba(43,58,76,.35)}
:root[data-theme="light"] .g-sil .fr{fill:rgba(147,162,179,.45)}
:root[data-theme="light"] .g-tee .fr{fill:rgba(24,175,214,.28)}
:root[data-theme="light"] .g-key .fr{fill:rgba(130,100,230,.28)}
:root[data-theme="light"] .g-img .fr{fill:rgba(60,120,210,.28)}
:root[data-theme="light"] .g-wrk .fr{fill:rgba(15,165,104,.28)}
.iso-detail .host-wall{fill:rgba(147,162,179,.10); stroke:var(--border-strong); stroke-width:1}
.iso-detail .host-glass{fill:rgba(147,162,179,.05); stroke:var(--text-faint); stroke-width:1.2; stroke-dasharray:5 4}

 

 
.iso-detail .ftxt-name{fill:var(--text-primary); font-family:var(--font-display); font-weight:700; letter-spacing:.12em; opacity:.85}
.iso-detail .ftxt-enc{fill:#0E8FB0}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .iso-detail .ftxt-enc{fill:var(--cyan-400)} }
:root[data-theme="dark"] .iso-detail .ftxt-enc{fill:var(--cyan-400)}
.flat-svg{display:block; width:100%; height:auto}
.flat-svg text{font-family:var(--font-body)}
.flat-svg .fcard rect:first-child{fill:var(--bg-surface); stroke:var(--border-default); stroke-width:1.2}
.flat-svg .fcard-acc rect:first-child{stroke:rgba(40,232,154,.5); fill:var(--bg-surface)}
.flat-svg .f-eb{fill:var(--text-faint); font-family:var(--font-mono); font-size:11.5px; letter-spacing:.14em}
.flat-svg .f-t{fill:var(--text-primary); font-size:14.5px; font-weight:600}
.flat-svg .f-t-bad{fill:var(--sev-critical)}
.flat-svg .f-s{fill:var(--text-muted); font-size:12.5px}
.flat-svg .f-field{fill:var(--text-secondary); font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; font-weight:600}
.flat-svg .f-val{fill:var(--text-primary); font-family:var(--font-mono); font-size:13px}
.flat-svg .f-row{fill:var(--bg-inset); stroke:var(--border-subtle)}
.flat-svg .f-row-bad{stroke:rgba(255,77,94,.55); fill:var(--sev-critical-a)}
.flat-svg .f-chk{fill:var(--accent-wash); stroke:rgba(40,232,154,.35)}
.flat-svg .f-chk-bad{fill:var(--sev-critical-a); stroke:rgba(255,77,94,.55)}
.flat-svg .f-dot{fill:var(--accent)} .flat-svg .f-dot-bad{fill:var(--sev-critical)}
.flat-svg .f-link{fill:none; stroke:var(--accent); stroke-width:1.6; stroke-dasharray:4 5; animation:viz-flow 1.6s linear infinite}
.flat-svg .f-link-bad{stroke:var(--sev-critical)}
.flat-svg .f-flow{fill:none; stroke-width:2; stroke-dasharray:5 6; animation:viz-flow 1.4s linear infinite}
.flat-svg .f-cy{stroke:var(--cyan-400)} .flat-svg .f-ok{stroke:var(--accent)} .flat-svg .f-ven{stroke:var(--sev-medium)}
.flat-svg .f-tag{font-family:var(--font-mono); font-size:11px} .flat-svg .f-tag-cy{fill:var(--cyan-400)}
.flat-svg .f-chip{fill:var(--bg-elevated); stroke:var(--border-strong); stroke-width:1.5}
.flat-svg .f-die{fill:var(--bg-inset); stroke:var(--sev-medium); stroke-width:1.5}
.flat-svg .f-pin{stroke:var(--border-strong); stroke-width:3; stroke-linecap:round}
.flat-svg .fi{fill:none; stroke:var(--text-secondary); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.flat-svg .fi-key{stroke:var(--sev-medium)} .flat-svg .fi-ok{stroke:var(--accent); stroke-width:2.6} .flat-svg .fi-bad{stroke:var(--sev-critical); stroke-width:2.6}
.flat-svg .fi-inv{stroke:var(--accent-contrast); stroke-width:2.6}
.flat-svg .f-badge{fill:var(--accent)} .flat-svg .f-badge-t{fill:var(--accent-contrast); font-family:var(--font-display); font-weight:700; font-size:13.5px}
.flat-svg .f-cert{fill:var(--bg-surface); stroke:rgba(255,197,61,.55)}
@media (prefers-reduced-motion: reduce){ .flat-svg .f-link,.flat-svg .f-flow{animation:none} }
.flat-svg .f-tag-ok{fill:var(--accent)}
.flat-viz{padding:12px; background:var(--bg-page)}
.flat-viz .flat-svg{min-width:760px}
.inl{color:var(--text-link); text-decoration:underline; text-underline-offset:3px}
/* readability: small diagram tags */
.iso-detail .ftag text{font-size:11.5px; font-weight:600}
.iso-detail .chip-e{font-size:10.5px}
.iso-detail .lbl-mono{fill:var(--text-muted)}

.js .theme-btn{display:inline-flex}
/* product tour: seventh tab */
#tour7:checked ~ .tab-ps .tp7{display:grid; animation:how-in 320ms var(--ease-out)}
#tour7:checked ~ .tab-ls [for=tour7]{color:var(--accent-contrast); background:var(--accent); border-color:var(--accent)}
#tour7:focus-visible ~ .tab-ls [for=tour7]{outline:2px solid var(--accent); outline-offset:2px}
/* Labs: stats, real-hardware cards, cloud matrix */
.lb-stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; margin-top:36px; background:var(--border-subtle); border:1px solid var(--border-subtle); border-radius:14px; overflow:hidden}
.lb-stats div{background:var(--bg-surface); padding:20px 22px}
.lb-stats b{display:block; font-family:var(--font-display); font-weight:700; font-size:34px; color:var(--accent); line-height:1; letter-spacing:-.02em}
.lb-stats span{display:block; font-size:13.5px; color:var(--text-muted); margin-top:8px}
.lb-h{font-family:var(--font-display); font-weight:600; font-size:20px; margin:44px 0 16px}
.lb-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px}
.lb-card{background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:14px; padding:20px; display:flex; flex-direction:column; gap:12px}
.lb-card-h{display:flex; gap:12px; align-items:center}
.lb-ic{width:42px; height:42px; flex:none; border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--accent); background:var(--accent-wash); border:1px solid rgba(40,232,154,.3)}
.lb-chip{font-family:var(--font-display); font-weight:600; font-size:15.5px; color:var(--text-primary); line-height:1.25}
.lb-where{font-family:var(--font-mono); font-size:12px; color:var(--text-muted); margin-top:3px}
.lb-what{font-size:14px; line-height:1.55; color:var(--text-secondary); margin:0; flex:1}
.lb-foot{display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap}
.lb-date{font-family:var(--font-mono); font-size:11.5px; color:var(--text-faint)}
.lb-st{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em; border-radius:999px; padding:4px 10px; border:1px solid; white-space:nowrap}
.lb-st::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.lb-ok{color:var(--accent); background:var(--accent-wash); border-color:rgba(40,232,154,.4)}
.lb-hw{color:var(--cyan-400); background:rgba(52,210,242,.10); border-color:rgba(52,210,242,.4)}
.lb-wait{color:var(--sev-medium); background:var(--sev-medium-a); border-color:rgba(255,197,61,.45)}
.lb-plan{color:var(--text-faint); border-color:var(--border-strong)}
@media (max-width: 760px){ .lb-stats{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .lb-hw{color:#0B7896; background:rgba(14,143,176,.10); border-color:rgba(14,143,176,.45)} }
:root[data-theme="light"] .lb-hw{color:#0B7896; background:rgba(14,143,176,.10); border-color:rgba(14,143,176,.45)}
/* In-page links land with the section heading just under the sticky header */
section[id]{scroll-margin-top:-4px}

/* How it works: diagram full column width, explanation underneath */
.how-panel{grid-template-columns:1fr !important; gap:22px !important}
.how-viz .iso-svg{min-width:0}
.how-copy{display:grid !important; grid-template-columns:minmax(0,280px) minmax(0,1fr); gap:8px 40px; align-items:start}
.how-copy > div{display:contents}
.how-copy .ed{grid-column:1; justify-self:start}
.how-copy .w64{grid-column:1; margin:0}
.how-copy .w40{grid-column:2; grid-row:1 / span 2; margin:0; font-size:15.5px; line-height:1.65; max-width:760px}
@media (max-width: 860px){ .how-copy{grid-template-columns:1fr} .how-copy .w40{grid-column:1; grid-row:auto} }
.how-copy{grid-template-rows:auto 1fr}

/* ---------- Phone menu ---------- */
.mnav{display:none; position:relative}
.mnav summary{list-style:none; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:9px; border:1px solid var(--border-default); background:var(--bg-surface); color:var(--text-secondary); cursor:pointer}
.mnav summary::-webkit-details-marker{display:none}
.mnav .mnav-close{display:none} .mnav[open] .mnav-close{display:block} .mnav[open] .mnav-open{display:none}
.mnav-p{position:absolute; right:0; top:48px; min-width:220px; display:flex; flex-direction:column; padding:8px; border-radius:12px; background:var(--bg-elevated); border:1px solid var(--border-default); box-shadow:0 20px 50px -20px rgba(0,0,0,.6); z-index:60}
.mnav-l{padding:12px 14px; border-radius:8px; font-size:15.5px; color:var(--text-secondary)}
.mnav-l:hover,.mnav-l:focus-visible{background:var(--bg-inset); color:var(--text-primary)}
@media (max-width: 1080px){ .mnav{display:block} }

/* ---------- Proof: coverage grid ---------- */
.cg{display:grid; grid-template-columns:minmax(150px,1.1fr) repeat(4,minmax(0,1fr)); gap:10px; margin-top:40px}
.cg-h{font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--text-primary); padding:0 4px 4px}
.cg-r{display:flex; flex-direction:column; justify-content:center; gap:3px}
.cg-r b{font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--text-primary)}
.cg-r span{font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--text-faint); text-transform:uppercase}
.cg-c{border-radius:11px; border:1px solid var(--border-subtle); padding:12px 14px; min-height:66px; display:flex; flex-direction:column; justify-content:center; gap:4px}
.cg-c b{display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--text-primary)}
.cg-c b i{width:9px; height:9px; border-radius:50%; flex:none}
.cg-c span{font-size:12.5px; color:var(--text-muted)}
.cg-ev{margin-left:auto; font-style:normal; font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.04em; color:#06202A; background:var(--cyan-400); border-radius:999px; padding:2px 8px}
.cg-na{background:var(--bg-inset)} .cg-na span{color:var(--text-faint)}
.cg-lab{background:var(--accent-wash); border-color:rgba(40,232,154,.45)} .cg-lab b i{background:var(--accent)}
.cg-hw{background:rgba(52,210,242,.10); border-color:rgba(52,210,242,.6); border-width:1.5px} .cg-hw b i{background:var(--cyan-400)}
.cg-sup{border-color:rgba(40,232,154,.45)} .cg-sup b i{border:2px solid var(--accent)}
.cg-quota{background:var(--sev-medium-a); border-color:rgba(255,197,61,.5)} .cg-quota b i{background:var(--sev-medium)}
.cg-plan{border-style:dashed; border-color:var(--border-strong)} .cg-plan b i{background:var(--text-faint)} .cg-plan b{color:var(--text-muted)}
.cg-legend{display:flex; flex-wrap:wrap; gap:10px 24px; margin-top:18px; font-size:13px; color:var(--text-muted)}
.cg-legend span{display:inline-flex; align-items:center; gap:8px}
.cg-dot{width:9px; height:9px; border-radius:50%; display:inline-block}
.cg-dot.cg-lab{background:var(--accent)} .cg-dot.cg-hw{background:var(--cyan-400)} .cg-dot.cg-sup{border:2px solid var(--accent)} .cg-dot.cg-quota{background:var(--sev-medium)} .cg-dot.cg-plan{background:var(--text-faint)}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .cg-hw{background:rgba(14,143,176,.08); border-color:rgba(14,143,176,.55)} }
:root[data-theme="light"] .cg-hw{background:rgba(14,143,176,.08); border-color:rgba(14,143,176,.55)}
@media (max-width: 860px){
  .cg{grid-template-columns:1fr 1fr; gap:8px}
  .cg-h{display:none}
  .cg-r{grid-column:1 / -1; margin-top:14px; flex-direction:row; align-items:baseline; gap:10px}
  .cg-c{min-height:0; padding:10px 12px}
  .cg-c::before{content:attr(data-col); font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint)}
  .cg-na{display:none}
}

/* ---------- Phones: diagrams fit the screen, steps and tabs wrap ---------- */
@media (max-width: 860px){
  .viz .iso-svg, .how-viz .iso-svg, .flat-viz .flat-svg, .viz .flat-svg{min-width:0 !important; width:100%; height:auto}
  .viz, .how-viz{overflow:visible}
  .how-tabs{display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; overflow:visible !important; gap:8px}
  .how-tab{padding:12px 14px}
  .how-num .ed{display:none}
  .how-tt{font-size:14.5px}
  .tab-ls{flex-wrap:wrap !important; overflow:visible !important}
  .tab-l{padding:8px 13px; font-size:14px}
  .cov-switch label{padding:8px 12px; font-size:13.5px}
}
.mnav-p{position:fixed; left:16px; right:16px; top:64px; min-width:0}
.mnav-cta{display:none; margin-top:6px; background:var(--accent); color:var(--accent-contrast) !important; font-weight:600; text-align:center}
@media (max-width: 560px){
  .w9 > .um-btn-primary{display:none}
  .mnav-cta{display:block}
}
@media (max-width: 860px){ .cg-r{justify-content:flex-start} .cg-ev{margin-left:0} .cg-c b{flex-wrap:wrap} }
.cg-legend .cg-dot.cg-hw{background:var(--cyan-400); border:0} .cg-legend .cg-dot.cg-lab{background:var(--accent); border:0} .cg-legend .cg-dot.cg-quota{background:var(--sev-medium); border:0} .cg-legend .cg-dot.cg-plan{background:var(--text-faint); border:0}

/* ---------- Hero on phones: actions first, tighter, shorter copy ---------- */
.ph-short{display:none}
@media (max-width: 560px){
  .ph-long{display:none} .ph-short{display:inline}
  .w14{padding:28px 16px 48px !important}
  .w15{font-size:11.5px; padding:6px 12px}
  .w17{margin-top:18px; font-size:38px}
  .w18{margin-top:16px; font-size:16px; line-height:1.55}
  .w20{flex-direction:column; align-items:stretch; gap:14px; margin-top:24px}
  .w25{order:-1; display:grid; grid-template-columns:1fr; gap:10px; padding-top:0}
  .w25 .w27{order:-1}
  .w26,.w27{justify-content:center; width:100%; height:50px}
  .w21{flex:none; padding:14px 16px; font-size:12.5px}
  .hero-shot{margin-top:32px}
}

/* ---------- Phones: tap a diagram to open it full screen (CSS :target, no script) ---------- */
.enl,.enl-x{display:none}
.fig-anchor{display:block; position:relative; top:-80px; height:0}
@media (max-width: 860px){
  .viz{position:relative}
  .enl{display:inline-flex; align-items:center; gap:6px; position:absolute; right:10px; bottom:10px; z-index:2; padding:7px 11px; border-radius:999px; font-size:12.5px; font-weight:600; color:var(--accent-contrast); background:var(--accent); box-shadow:0 6px 18px -8px rgba(0,0,0,.5)}
  .viz:target{position:fixed !important; inset:0; z-index:300; margin:0 !important; border-radius:0; border:0; padding:60px 0 16px; overflow:auto !important; background:var(--bg-page); display:block !important; animation:none}
  .viz:target .iso-svg, .viz:target .flat-svg{width:960px !important; max-width:none !important; min-width:960px !important; height:auto}
  .viz:target .enl{display:none}
  .viz:target .enl-x{display:flex; align-items:center; justify-content:center; position:fixed; top:12px; right:12px; width:44px; height:44px; border-radius:999px; font-size:20px; color:var(--text-primary); background:var(--bg-elevated); border:1px solid var(--border-default); z-index:301}
}

/* ---------- Phones: collapse long sections behind "show more" ---------- */
.mm-r{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.mm-l{display:none}
@media (max-width: 860px){
  .mm-l{display:inline-flex; align-items:center; min-height:44px; margin:6px 0 2px; font-size:14px; font-weight:600; color:var(--text-link); cursor:pointer}
  .mm-l .mm-c{display:none}
  .mm-r:checked + .mm-l .mm-o{display:none} .mm-r:checked + .mm-l .mm-c{display:inline}
  .mm-r:focus-visible + .mm-l{outline:2px solid var(--accent); outline-offset:2px}
  .mm-t{display:none !important}
  .mm-r:checked + .mm-l + .mm-t{display:flex !important}
  .mm-r:checked + .mm-l + p.mm-t, .mm-r:checked + .mm-l + .mm-blk{display:block !important}
  .mm-t3 > .w55:nth-child(n+4){display:none}
  .mm-r:checked + .mm-l + .mm-t3 > .w55{display:flex}
  /* in edition cards the toggle sits under the list */
  .w69,.w76{display:flex; flex-direction:column}
  .w69 .mm-t3,.w76 .mm-t3{order:2} .w69 .mm-l,.w76 .mm-l{order:3} .w69 .w75,.w76 .ed-btns{order:4}
  /* bigger tap targets and badges */
  .cov-switch label{min-height:44px; display:inline-flex; align-items:center}
  .tab-l{min-height:44px; display:inline-flex; align-items:center}
  .w73,.badge-new,.cg-ev{font-size:11.5px}
  .w49{font-size:12px}
}
@media (max-width: 860px){
  #platforms .w53{margin:10px 0 0}
  #platforms .w47 .mm-l{margin:4px 0 0}
  #platforms .w47 .w58{margin-top:10px}
  #platforms .w47{padding:22px}
}