/*
  OpenBEAM — Design tokens + page styles
  Source of truth: the OpenBEAM design language LOCK (v1.0), ratified prototype snapshot.
  Self-hosted fonts only — ZERO external requests (CR-A012-2 invariant).
*/

/* ---------- self-hosted fonts (IBM Plex, latin subset) ---------- */
@font-face{
  font-family:'IBM Plex Sans';
  src:url('fonts/IBMPlexSans-Variable.woff2') format('woff2');
  font-weight:100 700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('fonts/IBMPlexMono-Medium.woff2') format('woff2');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('fonts/IBMPlexMono-SemiBold.woff2') format('woff2');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

/* ---------- design tokens (D1 Blueprint + Redline, T1 type) ---------- */
:root{
  --deep:#1D3E5E; --blueprint:#2C5F8A; --tint:#DCE7F0; --paper:#F8F9F7; --ink:#1B242D;
  --red:#C7402D; --red-lift:#E06A54; --muted:#5C6670; --line:#E2E5E1; --card:#FFFFFF;
  --wood:#A87C4F; --pvc:#939BA3; --alum:#A8B4BE; --glass:#8FB8CE; --ceramic:#DDD6C8; --textile:#C4A48E;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'IBM Plex Sans',-apple-system,'Segoe UI',sans-serif;background:var(--paper);color:var(--ink);font-size:15px;line-height:1.6}
.mono{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums}
a{color:var(--blueprint)}
.wrap{max-width:1060px;margin:0 auto;padding:0 28px}

header{position:sticky;top:0;background:rgba(248,249,247,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);z-index:50}
header .wrap{display:flex;align-items:center;gap:26px;height:58px}
.wm{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:19px;letter-spacing:-.6px;color:var(--ink);text-decoration:none}
.wm i{font-style:normal;color:var(--red)}
header nav{display:flex;gap:20px;margin-left:auto}
header nav a{font-size:13.5px;color:var(--muted);text-decoration:none}
header nav a:hover{color:var(--ink)}
.chip{display:inline-flex;align-items:center;background:var(--deep);border-radius:7px;padding:4px 11px;gap:7px;white-space:nowrap}
.chip .t{color:var(--paper);font-family:'IBM Plex Mono',monospace;font-size:12px}
.chip .t i{font-style:normal;color:var(--red-lift)}

.hero{padding:84px 0 66px;border-bottom:1px solid var(--line)}
.hero h1{font-size:42px;font-weight:600;letter-spacing:-1px;line-height:1.16;max-width:16ch;text-wrap:balance}
.hero .lede{font-size:17.5px;color:var(--muted);max-width:56ch;margin:20px 0 30px}
.hero .lede b{color:var(--ink);font-weight:600}
.cta{display:inline-block;background:var(--deep);color:#fff;text-decoration:none;font-weight:500;font-size:14.5px;padding:11px 22px;border-radius:8px}
.cta.ghost{background:transparent;color:var(--deep);border:1.5px solid var(--deep);margin-left:10px}
.tokstrip{display:flex;gap:9px;flex-wrap:wrap;margin-top:38px}
.tok{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--blueprint);background:var(--tint);border-radius:6px;padding:4px 10px}

section{padding:64px 0;border-bottom:1px solid var(--line)}
.eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--blueprint);margin-bottom:12px}
h2{font-size:27px;font-weight:600;letter-spacing:-.5px;margin-bottom:14px;text-wrap:balance}
.prose{font-size:15.5px;color:var(--muted);max-width:64ch}
.prose b{color:var(--ink)}

.cols3{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:30px}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 22px}
.pcard .who{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.pcard .say{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--ink);margin-bottom:8px}
.pcard p{font-size:13px;color:var(--muted)}

.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:26px}
table.spec{width:100%;min-width:560px;border-collapse:collapse;background:var(--card);border:1px solid var(--line)}
table.spec th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);padding:9px 13px;border-bottom:2px solid var(--deep);font-weight:600}
table.spec td{padding:10px 13px;border-bottom:1px solid #EEF0EE;font-size:13.5px;vertical-align:top}
.code{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--blueprint);font-variant-numeric:tabular-nums}
.src{font-size:11.5px;color:var(--muted);margin-top:8px}

.honest{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--deep);border-radius:10px;padding:22px 26px;margin-top:26px;max-width:720px}
.honest ul{margin:10px 0 0 18px;font-size:14px;color:var(--muted)}
.honest li{margin-bottom:6px}
.honest b{color:var(--ink)}

/* ---------- demo (static shell — CR-A012-3 activates the interaction) ---------- */
#demo{background:#F2F4F1}
.demo-shell{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;margin-top:30px}
.planbox{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;position:relative}
.planbox svg{width:100%;height:auto;display:block}
.planmeta{display:flex;justify-content:space-between;align-items:center;padding:0 4px 12px}
.planmeta .ttl{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--muted)}
.counter{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--deep);font-weight:600}
.counter b{color:var(--red)}

.hs .hit{fill:transparent;stroke:transparent;stroke-width:14}
.hs .hl{pointer-events:none;opacity:0}
.hs.untagged .hl{opacity:1;animation:shimmer 1.9s ease-in-out infinite}
@keyframes shimmer{0%,100%{opacity:.15}50%{opacity:.75}}
@media (prefers-reduced-motion: reduce){.hs.untagged .hl{animation:none;opacity:.5}}
.hs.tagged .hl{opacity:0;animation:none}

.tablebox{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 18px 8px}
.tablebox h3{font-size:14px;font-weight:600;padding:0 4px 4px}
.tablebox .sub2{font-size:12px;color:var(--muted);padding:0 4px 12px}
table.take{width:100%;min-width:520px;border-collapse:collapse}
table.take th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);padding:8px 10px;border-bottom:2px solid var(--deep);font-weight:600}
table.take td{padding:8px 10px;border-bottom:1px solid #EEF0EE;font-size:13px;vertical-align:middle}
table.take td.num{text-align:right}
table.take .tokcell{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink);display:inline-flex;align-items:center;gap:7px}
table.take .tokcell .dotm{width:9px;height:9px;border-radius:3px}
table.take .ghost td{color:#B9BFB9;font-style:italic;font-size:12.5px}

.done{display:none;margin-top:14px;background:var(--deep);border-radius:11px;padding:18px 22px;color:var(--paper);align-items:center;gap:18px;flex-wrap:wrap}
.done b{font-size:15.5px}
.done .cta{background:var(--paper);color:var(--deep);font-size:13.5px;padding:9px 16px}
.done a.reset{color:var(--tint);font-size:12.5px;margin-left:auto}

footer{padding:44px 0 60px}
footer .wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
footer .fine{font-size:12.5px;color:var(--muted)}
footer .fine a{color:var(--muted)}

@media (max-width: 620px){
  .hero{padding:56px 0 44px}
  .hero h1{font-size:32px;max-width:none}
  header nav{display:none}
  footer .wrap{flex-direction:column;align-items:flex-start}
  footer .chip{margin-left:0 !important}
}