/* Achilles — Obsidian Signal (2026-08-31 redesign)
   Technical product site: zinc + violet signal, cyan secondary, amber critical.
   Inspiration: linear/ vercel/ socket — dark, precise, glass + grid + gradient orbs
   Craft: hairline zinc, glass panels, scan beam, staggered reveals, tabular ledger */

:root{
  --bg:#0a0a0a;
  --bg-soft:#0e0e0e;
  --panel:#121212;
  --panel-2:#161616;
  --panel-3:#1c1c1c;
  --border:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.13);
  --border-soft:rgba(255,255,255,.055);
  --text:#f5f5f7;
  --text-dim:#a3a6b0;
  --text-mute:#7d808c;
  --text-faint:#5b5e6a;
  --violet:#BF9B00;
  --violet-2:#D0A800;
  --violet-soft:rgba(191,155,0,.15);
  --cyan:#22d3ee;
  --cyan-soft:rgba(34,211,238,.14);
  --amber:#f59e0b;
  --amber-soft:rgba(245,158,11,.14);
  --red:#ef4444;
  --green:#22c55e;
  --mono:"Fragment Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:"Instrument Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  --mark:Cinzel, Palatino, "Palatino Linotype", "Times New Roman", serif;
  --radius:8px;
  --radius-sm:4px;
  --radius-lg:10px;
  --ease:cubic-bezier(.22,.8,.24,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

@font-face{
  font-family:Cinzel;
  src:url("../fonts/cinzel-mark.woff2?v=3") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
html,body{margin:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit}
code{font-family:var(--mono); font-size:.9em; background:rgba(255,255,255,.07); padding:.14em .42em; border-radius:4px; border:1px solid rgba(255,255,255,.06)}
.mono{font-family:var(--mono)}
.dim{color:var(--text-mute)}
.small{font-size:.9rem; color:var(--text-dim)}
.hl{color:var(--violet-2)}
::selection{background:var(--violet); color:var(--bg)}
:focus-visible{outline:2px solid var(--violet); outline-offset:2px}

/* progress */
.progress{position:fixed; top:0; left:0; right:0; height:2px; z-index:100; pointer-events:none}
.progress i{display:block; height:100%; background:linear-gradient(90deg,var(--violet),var(--cyan)); transform:scaleX(var(--p,0)); transform-origin:0 50%}

/* announce */
.announce{background:#0a0a0a; border-bottom:1px solid var(--border); color:var(--text-dim); font-size:.83rem; letter-spacing:.02em}
.announce-inner{max-width:1440px; margin:0 auto; padding:8px 20px; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.announce-badge{display:inline-flex; align-items:center; gap:7px; background:rgba(234,179,8,.12); border:1px solid rgba(234,179,8,.28); color:#fde68a; padding:4px 10px; border-radius:4px; font-weight:600; font-size:.78rem}
.announce-badge i{width:7px; height:7px; border-radius:50%; background:var(--violet); box-shadow:0 0 10px var(--violet)}
.announce-sep{opacity:.35}
.announce-text b,.announce-arrav b{color:var(--text)}
.announce-arrav{color:#a9f0ff}
.announce-link{margin-left:auto; color:var(--text); font-weight:600; text-decoration:none; border:1px solid var(--border); padding:4px 10px; border-radius:4px; background:rgba(255,255,255,.04)}
.announce-link:hover{border-color:var(--border-strong); background:rgba(255,255,255,.07)}

/* nav */
.nav{position:sticky; top:0; z-index:50; backdrop-filter:blur(16px) saturate(1.2); background:rgba(10,10,10,.78); border-bottom:1px solid var(--border)}
.nav-inner{max-width:1440px; margin:0 auto; padding:0 20px; height:64px; display:flex; align-items:center; gap:22px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text); flex-shrink:0; white-space:nowrap}
.brand-word{font-family:var(--mark); font-weight:700; font-size:1.18rem; line-height:1; text-transform:uppercase; white-space:nowrap}
.brand-word .lam{display:inline-block; width:auto; height:1.12em; margin-right:.14em; vertical-align:baseline; overflow:visible}
.brand-word .rest{letter-spacing:.18em}
.brand-sub{font-family:var(--mono); font-size:.74rem; letter-spacing:.18em; color:var(--text-mute); border-left:1px solid var(--border); padding-left:10px; font-weight:700}
.preview-pill{font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; background:linear-gradient(135deg,var(--violet),#fde68a); color:var(--bg); padding:4px 8px; border-radius:4px}
.nav-links{display:flex; gap:4px; margin-left:14px}
.nav-links a{padding:7px 12px; border-radius:4px; font-size:.88rem; color:var(--text-dim); text-decoration:none; font-weight:500}
.nav-links a:hover{color:var(--text); background:rgba(255,255,255,.06)}
.nav-actions{margin-left:auto; display:flex; align-items:center; gap:10px}
.nav-ghost{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--border); padding:8px 12px; border-radius:4px; font-size:.86rem; color:var(--text-dim); text-decoration:none; background:rgba(255,255,255,.03)}
.nav-ghost:hover{color:var(--text); border-color:var(--border-strong)}
.nav-cta{background:var(--text); color:var(--bg); font-weight:700; font-size:.9rem; padding:9px 16px; border-radius:4px; text-decoration:none}
.nav-cta:hover{background:white}
.nav-menu{display:none; border:1px solid var(--border); background:rgba(255,255,255,.04); color:var(--text); padding:8px 12px; border-radius:4px; font-weight:600}
.nav-drawer{display:none; border-top:1px solid var(--border); background:rgba(12,12,12,.98); padding:12px 16px 16px; flex-direction:column; gap:4px}
.nav-drawer a{padding:10px 8px; border-radius:4px; text-decoration:none; color:var(--text-dim)}
.nav-drawer a:hover{background:rgba(255,255,255,.06); color:var(--text)}
.drawer-cta{background:var(--violet) !important; color:var(--bg) !important; text-align:center; font-weight:700; margin-top:8px}
html.nav-open .nav-drawer{display:flex}

/* hero */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--border)}
.hero-bg{position:absolute; inset:0; pointer-events:none}
.hero-bg .orb{position:absolute; border-radius:50%; filter:blur(44px); opacity:.55}
.orb-a{width:720px; height:720px; left:-120px; top:-220px; background:radial-gradient(circle at 30% 30%, rgba(234,179,8,.32), transparent 62%)}
.orb-b{width:640px; height:640px; right:-160px; top:-100px; background:radial-gradient(circle at 30% 30%, rgba(34,211,238,.28), transparent 65%)}
.grid{position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size:32px 32px; mask-image:radial-gradient(ellipse 95% 78% at 50% 0%, black 52%, transparent 88%); opacity:.425}
.noise{position:absolute; inset:0; opacity:.06; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E")}

.hero-shell{position:relative; max-width:1440px; margin:0 auto; padding:42px 20px 28px; display:grid; grid-template-columns: 0.92fr 1.08fr; gap:32px; align-items:start}
.hero-visual{transform:scale(1.02); transform-origin:top center}
.hero-copy{display:flex; flex-direction:column; gap:14px; padding-top:8px}
.eyebrow{display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.8rem; color:var(--text-dim); border:1px solid var(--border); background:rgba(255,255,255,.04); backdrop-filter:blur(10px); padding:7px 12px; border-radius:4px; width:fit-content}
.eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 10px rgba(34,197,94,.7)}
.eyebrow-sep{opacity:.4}
.eyebrow-free{color:var(--text)}
.hero-copy h1{font-size:clamp(2.6rem, 5vw, 4.2rem); line-height:.92; letter-spacing:-.04em; font-weight:700; margin:0}
.hero-copy h1 span{display:block}
.h-accent{background:linear-gradient(135deg, var(--violet-2), var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent}
.lede{font-size:1.08rem; line-height:1.65; color:var(--text-dim); max-width:56ch}
.lede b{color:var(--text); font-weight:600}
.lede em{color:var(--text); font-style:normal; border-bottom:1px solid rgba(234,179,8,.38)}
.hero-ctas{display:flex; flex-wrap:wrap; gap:10px; margin-top:4px}
.btn{display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:4px; font-weight:700; font-size:.92rem; text-decoration:none; border:1px solid transparent; transition:transform .15s var(--ease), border-color .2s, background .2s, color .2s}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--violet); color:var(--bg); border-color:rgba(0,0,0,.12); box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.22)}
.btn.primary:hover{background:var(--violet-2)}
.btn.ghost{background:rgba(255,255,255,.06); color:var(--text); border-color:var(--border)}
.btn.ghost:hover{background:rgba(255,255,255,.1); border-color:var(--border-strong)}
.btn-icon{width:22px; height:22px; display:grid; place-items:center; background:var(--bg); color:var(--text); border-radius:50%; font-size:.75rem; flex-shrink:0}
.btn-icon svg{display:block}
.hero-meta{display:flex; flex-direction:column; gap:6px; font-size:.88rem; color:var(--text-mute); border-top:1px solid var(--border-soft); padding-top:12px; margin-top:2px}
.hero-meta b{color:var(--text)}
.check{width:16px; height:16px; display:inline-grid; place-items:center; background:rgba(34,197,94,.15); color:var(--green); border-radius:50%; font-size:.65rem; border:1px solid rgba(34,197,94,.25)}
.trust-row{display:flex; flex-wrap:wrap; gap:8px}
.trust-pill{font-size:.78rem; color:var(--text-mute); border:1px solid var(--border); background:rgba(255,255,255,.03); padding:6px 10px; border-radius:4px; display:inline-flex; align-items:center; gap:7px}
.trust-dot{width:6px; height:6px; border-radius:50%; background:var(--violet)}
.trust-pill b{color:var(--text)}
.trust-pill code{padding:1px 6px}
.pair-note{border:none; background:transparent; border-radius:0; padding:12px; display:flex; flex-direction:column; gap:6px}
.pair-badge{font-size:.68rem; letter-spacing:.08em; background:transparent; border:none; color:#fde68a; padding:0; width:fit-content; font-weight:700; text-transform:uppercase}
.pair-note p{margin:0; color:var(--text-dim); font-size:.88rem; line-height:1.6}
.pair-note p b{color:var(--text)}
.pair-banner{border:1px solid var(--border); background:rgba(255,255,255,.02); border-radius:3px; padding:12px 14px; display:flex; flex-direction:column; gap:8px; margin-bottom:14px}
.pair-banner-head{font-size:.68rem; letter-spacing:.08em; font-weight:700; color:var(--text-mute); text-transform:uppercase}
.pair-banner p{margin:0; color:var(--text-dim); font-size:.92rem; line-height:1.6}
.pair-banner p b{color:var(--text)}
.pair-clients{display:flex; gap:8px; flex-wrap:wrap; font-size:.68rem; color:var(--text-mute); margin-top:2px}
.pair-clients span{border:1px solid var(--border); background:rgba(255,255,255,.04); padding:4px 8px; border-radius:4px; color:var(--text)}

/* hero visual — native desktop window (cropped chrome) */
.hero-visual{display:flex; flex-direction:column; gap:14px; min-width:0; position:relative}
.hero-window-stack{position:relative; isolation:isolate}
.hero-window{position:relative; background:#111111; border:1px solid rgba(255,255,255,.12); border-radius:6px; overflow:hidden; box-shadow:0 40px 100px rgba(0,0,0,.82), 0 12px 40px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.08) inset, 0 0 0 1px rgba(0,0,0,.5) inset}
.hero-compare{position:relative; aspect-ratio:16/9.4; background:#0a0a0a; overflow:hidden; touch-action:none; user-select:none}
.compare-stage{position:relative; width:100%; height:100%; --pos:50%; cursor:ew-resize}
.compare-stage.is-dragging{cursor:grabbing}
.compare-stage.is-dragging .compare-grip{transform:translate(-50%,-50%) scale(1.06)}
.compare-img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block; background:#0a0a0a; margin-top:-26px; height:calc(100% + 26px); pointer-events:none}
.compare-after{position:absolute; inset:0}
.compare-overlay{position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--pos)) 0 0); overflow:hidden}
.compare-before{position:absolute; inset:0; width:100%; height:calc(100% + 26px)}
.compare-handle{position:absolute; top:0; bottom:0; left:var(--pos); transform:translateX(-50%); width:28px; z-index:5; cursor:ew-resize; touch-action:none}
.compare-line{position:absolute; top:0; bottom:0; left:50%; width:2px; transform:translateX(-50%); background:var(--cyan); box-shadow:0 0 14px rgba(34,211,238,.55)}
.compare-grip{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:34px; height:34px; border-radius:50%; background:rgba(10,10,10,.94); border:2px solid var(--cyan); color:var(--text); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 24px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06); transition:transform .15s var(--ease)}
.compare-grip svg{opacity:.9}
.compare-label{position:absolute; top:10px; z-index:4; font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-mute); padding:4px 8px; border-radius:4px; background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.07); backdrop-filter:blur(6px); pointer-events:none}
.compare-label-left{left:10px}
.compare-label-right{right:10px}
.compare-hint{position:absolute; left:50%; bottom:10px; transform:translateX(-50%); z-index:4; font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); padding:4px 10px; border-radius:999px; background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.06); backdrop-filter:blur(6px); pointer-events:none; opacity:.85}
.compare-handle:focus-visible .compare-grip{outline:2px solid var(--violet); outline-offset:3px}
.hero-window::before{content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); pointer-events:none; z-index:3}
.hero-window.is-main{position:relative; z-index:2; border:none; border-radius:3px; box-shadow:0 32px 80px rgba(0,0,0,.72), 0 8px 28px rgba(0,0,0,.45)}
.hero-window.is-main::before{display:none}
.hero-window.is-main::after{content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 0.5px rgba(191,155,0,.68); pointer-events:none; z-index:4}
.win-bar{height:32px; display:flex; align-items:center; gap:10px; padding:0 12px; background:linear-gradient(180deg, #1a1a1a 0%, #141414 100%); border-bottom:1px solid rgba(255,255,255,.08); flex-shrink:0; position:relative}
.win-bar::after{content:""; position:absolute; bottom:0; left:0; right:0; height:1px; background:rgba(0,0,0,.35); pointer-events:none}
.traffic{display:flex; gap:5px; flex-shrink:0}
.traffic i{width:8px; height:8px; border-radius:50%; border:1px solid rgba(0,0,0,.18); display:block; box-shadow:inset 0 1px 0 rgba(255,255,255,.38), 0 1px 2px rgba(0,0,0,.22); position:relative}
.traffic i:nth-child(1){background:#ff5f57; border-color:rgba(95, 12, 12,.22)}
.traffic i:nth-child(2){background:#ffbd2e; border-color:rgba(108, 82, 8,.22)}
.traffic i:nth-child(3){background:#28c840; border-color:rgba(12, 76, 18,.22)}
.window-title{flex:1; text-align:center; font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.01em; color:#d6d8df; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.95}
.window-badge{margin-left:auto; font-size:.50rem; letter-spacing:.06em; background:rgba(234,179,8,.10); border:1px solid rgba(234,179,8,.22); color:#fde68a; padding:2px 6px; border-radius:999px; white-space:nowrap; flex-shrink:0; display:inline-flex; align-items:center; gap:4px; font-weight:600}
.badge-dot{width:4px; height:4px; border-radius:50%; background:var(--green); box-shadow:0 0 6px rgba(34,197,94,.55); flex-shrink:0}
.win-screen{display:block; background:#0a0a0a; line-height:0}
.win-screen-btn{display:block; width:100%; border:0; padding:0; margin:0; background:#0a0a0a; cursor:zoom-in; line-height:0; position:relative; overflow:hidden}
.win-screen-btn img{width:100%; height:auto; display:block; object-fit:contain; background:#0a0a0a; transition:opacity .18s, transform .18s}
.win-screen-btn:hover img{opacity:.985}
.win-screen-btn::after{content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); pointer-events:none}
.win-screen-btn.cropped{overflow:hidden; background:#0a0a0a}
.win-screen-btn.cropped img{margin-top:-26px; margin-bottom:-1px; width:100%; height:auto}
.win-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:.66rem; color:var(--text-mute); padding:8px 12px; border-top:1px solid rgba(255,255,255,.07); background:#111111; letter-spacing:.02em}
.win-foot-left{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.win-foot-left b{color:var(--text)}
.foot-dot{width:7px; height:7px; border-radius:50%; flex-shrink:0}
.foot-dot.open{background:var(--violet); box-shadow:0 0 8px rgba(234,179,8,.45)}
.sep{opacity:.35}
.foot-tag{font-size:.60rem; letter-spacing:.08em; font-weight:700; background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.22); color:#86efac; padding:2px 6px; border-radius:999px}
.win-foot-action{color:var(--text-dim); border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.05); padding:4px 9px; border-radius:999px; font-size:.62rem; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; font-family:inherit; cursor:pointer; transition:background .15s, border-color .15s, color .15s}
.win-foot-action:hover{color:var(--text); background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16)}
.win-foot-action:focus-visible{outline:2px solid var(--violet); outline-offset:2px}
.zoom-mark{opacity:.7}
.hero-caption{border-left:2px solid rgba(234,179,8,.42); background:rgba(255,255,255,.015); border-radius:0 10px 10px 0; padding:12px 14px; display:flex; flex-direction:column; gap:7px}
.hero-caption-kicker{font-size:.62rem; letter-spacing:.11em; font-weight:700; text-transform:uppercase; color:#fde68a; display:inline-flex; align-items:center; gap:7px}
.kicker-dot{width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 8px rgba(34,197,94,.55)}
.hero-caption p{margin:0; color:var(--text-dim); font-size:.86rem; line-height:1.6}
.hero-caption code{font-size:.78em}
/* hero window — clean native, no overlay */
.win-screen-btn.cropped{position:relative; overflow:hidden}
.win-screen-btn.cropped::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), inset 0 1px 0 rgba(255,255,255,.04)}
@media (max-width:1100px){
  .hero-visual{transform:none}
  .hero-compare{aspect-ratio:16/10}
  .hero-window-stack{padding-right:0}
  .hero-window.ghost{right:0; left:12px}
}
@media (max-width:560px){
  .hero-window.ghost{display:none}
  .win-bar{height:30px; padding:0 10px}
  .window-title{font-size:.68rem}
  .window-badge{font-size:.46rem; padding:2px 5px}
  .win-foot{flex-direction:column; align-items:flex-start; gap:8px}
  .nav-inner{gap:12px; padding:0 16px}
}

/* tape — As seen on + Works with, seamless 50% */
.tape{border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:rgba(255,255,255,.02); overflow:hidden}
.tape-track{display:flex; gap:0; align-items:center; animation:tape 36s linear infinite; width:max-content; will-change:transform}
.tape-track span{padding:10px 14px; font-family:var(--mono); font-size:.74rem; letter-spacing:.09em; color:var(--text-mute); border-right:1px solid var(--border-soft); white-space:nowrap; display:inline-flex; align-items:center; gap:7px}
.tape-track b{color:var(--text)}
.tape-label{color:var(--text-faint) !important; font-size:.66rem !important; letter-spacing:.16em !important; font-weight:700 !important; border-right:none !important; background:rgba(255,255,255,.02); padding:10px 14px !important}
.tape-dot{padding:10px 6px !important; border-right:none !important; color:var(--text-faint); opacity:.35; font-size:.85rem}
.tape-sep{width:1px !important; padding:0 !important; margin:0 2px; align-self:stretch; background:var(--border); border-right:none !important; opacity:1}
.tape-track .brand, .tape-track .model{border:none !important; background:none !important; border-radius:0 !important; padding:10px 8px !important; margin:0 !important; display:inline-flex; align-items:center; gap:0}
.tape-track .brand i{display:none !important}
.tape-track .model{font-family:var(--mono) !important; font-size:.66rem !important; letter-spacing:.10em !important; text-transform:uppercase !important; opacity:.9}
.tape-track .model b{font-weight:600; color:var(--text-mute) !important}
.brand-ph{font-family:"Instrument Sans", system-ui, sans-serif !important; font-weight:700 !important; letter-spacing:-.01em !important; font-size:.74rem !important; text-transform:none !important}
.brand-at{font-family:"Fragment Mono", ui-monospace, monospace !important; font-weight:400 !important; letter-spacing:.04em !important; font-size:.70rem !important; text-transform:none !important}
.brand-ih{font-family:"Newsreader", serif !important; font-style:italic !important; font-weight:400 !important; letter-spacing:-.01em !important; font-size:.78rem !important; text-transform:none !important}
.brand-bl{font-family:"Instrument Sans", system-ui, sans-serif !important; font-weight:600 !important; letter-spacing:.10em !important; font-size:.68rem !important; text-transform:uppercase !important}
.brand-sh{font-family:Cinzel, serif !important; font-weight:700 !important; letter-spacing:.14em !important; font-size:.66rem !important; text-transform:uppercase !important}
@keyframes tape{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* sections */
.section{border-bottom:1px solid var(--border)}
.section-inner{max-width:1240px; margin:0 auto; padding:72px 20px}
.kicker{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-mute); display:flex; align-items:center; gap:8px; margin-bottom:12px}
.k-dot{width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 10px rgba(34,197,94,.5)}
.k-dot.violet{background:var(--violet); box-shadow:0 0 10px var(--violet)}
.kicker.subtle{color:var(--text-faint)}
.section h2{font-size:clamp(1.9rem,3.2vw,2.75rem); line-height:1; letter-spacing:-.03em; font-weight:700; margin:0 0 12px}
.section h2 em{font-family:"Newsreader", serif; font-weight:400; font-style:italic; letter-spacing:-.02em; color:var(--text-dim)}
.section-lede{color:var(--text-dim); max-width:64ch; font-size:1.02rem; line-height:1.65; margin:0 0 28px}
.section-lede.wide{max-width:none}

/* screens — real screenshots gallery */
.screens{background:linear-gradient(180deg, rgba(255,255,255,.015), transparent)}
.screens-head{display:flex; justify-content:space-between; gap:16px; align-items:flex-start; flex-wrap:wrap; margin-bottom:18px}
.screens-head .section-lede{max-width:78ch}
.gallery{display:grid; grid-template-columns: 1.42fr .88fr; border:1px solid var(--border); border-radius:8px; overflow:hidden; background:rgba(255,255,255,.02); box-shadow:0 24px 60px rgba(0,0,0,.45); align-items:stretch}
.gallery-main{position:relative; background:#0a0a0a; display:block; overflow:hidden}
.gallery-stage{position:relative; width:100%; display:block; border:0; padding:0; background:#0a0a0a; cursor:zoom-in; line-height:0; overflow:hidden}
.gallery-stage img{width:100%; height:auto; display:block; background:#0a0a0a}
.gallery-hint{position:absolute; left:12px; bottom:10px; font-size:.62rem; color:rgba(255,255,255,.7); background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.12); padding:5px 8px; border-radius:4px; backdrop-filter:blur(6px); z-index:2}
.gallery-side{display:flex; flex-direction:column; border-left:1px solid var(--border); background:rgba(255,255,255,.015); min-width:0}
.gallery-copy{padding:16px; display:flex; flex-direction:column; gap:8px; flex:1; border-bottom:1px solid var(--border)}
.gallery-copy h3{margin:0; font-size:1.05rem; line-height:1.2}
.gallery-copy h3 em{font-family:"Newsreader", serif; font-weight:400; font-style:italic; color:var(--text-dim)}
.gallery-copy p{margin:0; color:var(--text-dim); font-size:.9rem; line-height:1.6}
.gallery-copy ul{margin:0; padding-left:16px; display:flex; flex-direction:column; gap:4px; color:var(--text-dim); font-size:.86rem}
.gallery-copy li b{color:var(--text)}
.gallery-copy .copy-meta{font-family:var(--mono); font-size:.62rem; letter-spacing:.06em; color:var(--text-mute); display:flex; gap:6px; flex-wrap:wrap; margin-top:4px}
.gallery-copy .copy-meta span{border:1px solid var(--border); background:rgba(255,255,255,.04); padding:3px 7px; border-radius:4px}
.gallery-thumbs{display:flex; flex-direction:column; gap:8px; padding:12px; overflow:visible; align-content:start}
.thumb{width:100%; display:grid; grid-template-columns:112px 1fr; gap:0; align-items:center; border:1px solid var(--border); border-radius:6px; overflow:hidden; background:rgba(255,255,255,.03); padding:0; cursor:pointer; text-align:left; transition:border-color .2s, background .2s, transform .15s; flex-shrink:0}
.thumb-shot{width:112px; overflow:hidden; background:#0a0a0a; border-right:1px solid var(--border); flex-shrink:0; line-height:0}
.thumb-shot img{width:100%; height:auto; display:block; opacity:.9; vertical-align:top}
.thumb span{font-size:.74rem; line-height:1.35; color:var(--text-dim); padding:6px 10px}
.thumb span b{color:var(--text); display:block; font-size:.74rem}
.thumb:hover{border-color:var(--border-strong); background:rgba(255,255,255,.06); transform:translateY(-1px)}
.thumb.on{border-color:rgba(234,179,8,.46); background:rgba(234,179,8,.10); box-shadow:0 0 0 1px rgba(234,179,8,.18) inset}
.thumb.on .thumb-shot img{opacity:1}
.screens-foot{margin-top:12px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:.72rem; color:var(--text-mute); border:1px dashed var(--border); background:rgba(255,255,255,.02); padding:10px 12px; border-radius:6px}
.screens-foot b{color:var(--text)}
.screens-count{font-family:var(--mono); font-size:.62rem; letter-spacing:.06em; border:1px solid var(--border); background:rgba(255,255,255,.04); padding:4px 8px; border-radius:4px}
/* lightbox */
.lightbox{position:fixed; inset:0; z-index:90; display:none; place-items:center; padding:24px; background:rgba(4,5,10,.82); backdrop-filter:blur(10px) saturate(1.1)}
.lightbox.open{display:grid}
.lightbox img{max-width:min(96vw, 1600px); max-height:92vh; width:auto; height:auto; object-fit:contain; border-radius:6px; border:1px solid var(--border-strong); box-shadow:0 40px 100px rgba(0,0,0,.7); background:#0a0a0a; display:block}
.lightbox-caption{position:fixed; bottom:18px; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:.7rem; color:var(--text-dim); background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.12); padding:7px 12px; border-radius:4px; backdrop-filter:blur(8px); text-align:center; max-width:90vw}
.lightbox-close{position:fixed; top:18px; right:18px; width:40px; height:40px; display:grid; place-items:center; border-radius:4px; background:rgba(255,255,255,.08); border:1px solid var(--border); color:var(--text); cursor:pointer; font-size:1.1rem}
.lightbox-close:hover{background:rgba(255,255,255,.12)}
@media (max-width:1100px){
  .gallery{grid-template-columns:1fr}
  .gallery-side{border-left:0; border-top:1px solid var(--border)}
  .gallery-thumbs{flex-direction:row; overflow-x:auto; overflow-y:hidden; max-height:none; scrollbar-width:none}
  .gallery-thumbs::-webkit-scrollbar{display:none}
  .thumb{flex:0 0 260px}
  .gallery-main{min-height:0}
}
@media (max-width:640px){
  .gallery-thumbs{padding:10px; gap:8px}
  .thumb{flex:0 0 220px; grid-template-columns:96px 1fr}
  .thumb-shot{width:96px}
}

/* for everyone */
.every-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:20px; align-items:start}
.every-steps{display:flex; flex-direction:column; gap:14px}
.step{display:grid; grid-template-columns:44px 1fr; gap:14px; padding:16px; border:1px solid var(--border); border-radius:6px; background:rgba(255,255,255,.02)}
.step-n{width:36px; height:36px; display:grid; place-items:center; border-radius:999px; background:var(--text); color:var(--bg); font-family:var(--mono); font-weight:700; font-size:.78rem}
.step h3{margin:0 0 6px; font-size:1.05rem; line-height:1.25}
.step p{margin:0; color:var(--text-dim); font-size:.95rem}
.four-list{margin:6px 0 0; padding-left:16px; color:var(--text-dim); font-size:.94rem; display:flex; flex-direction:column; gap:4px}
.four-list b{color:var(--text)}
.every-card{position:sticky; top:84px; border:1px solid var(--border); border-radius:8px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)); padding:14px; display:flex; flex-direction:column; gap:14px; backdrop-filter:blur(14px) saturate(1.15); overflow:hidden}
.every-card::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none}
.every-card.pro{position:sticky}
.pro-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:2px 2px 2px}
.pro-head-main{display:flex; gap:10px; align-items:center}
.pro-icon{width:32px; height:32px; display:grid; place-items:center; border-radius:4px; background:rgba(255,255,255,.06); border:1px solid var(--border); color:var(--violet-2); font-size:.82rem; flex-shrink:0}
.pro-title{font-weight:700; font-size:.92rem; line-height:1.1; display:block}
.pro-sub{font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-mute); display:block; margin-top:2px}
.pro-badge{display:inline-flex; align-items:center; gap:6px; font-size:.62rem; letter-spacing:.08em; font-weight:700; background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.24); color:#86efac; padding:5px 9px; border-radius:999px; white-space:nowrap; flex-shrink:0}
.live-dot{width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px rgba(34,197,94,.7); animation:livePulse 1.6s ease-in-out infinite}
.pro-providers{display:grid; grid-template-columns:1fr 1fr; gap:7px}
.ai-pill{position:relative; border:1px solid var(--border); background:rgba(255,255,255,.045); padding:8px 9px; border-radius:5px; font-size:.74rem; font-weight:600; text-align:center; color:var(--text-dim); display:flex; align-items:center; justify-content:center; gap:6px; transition:border-color .2s, background .2s, transform .15s, color .2s; overflow:hidden}
.ai-pill i{width:5px; height:5px; border-radius:50%; background:var(--border-strong); flex-shrink:0; opacity:.7}
.ai-pill:hover{border-color:var(--border-strong); background:rgba(255,255,255,.07); color:var(--text); transform:translateY(-1px)}
html.motion .pro-providers .ai-pill{opacity:0; transform:translateY(4px); animation:pillIn .45s var(--ease) both}
html.motion .pro-providers .ai-pill:nth-child(1){animation-delay:.02s}
html.motion .pro-providers .ai-pill:nth-child(2){animation-delay:.08s}
html.motion .pro-providers .ai-pill:nth-child(3){animation-delay:.14s}
html.motion .pro-providers .ai-pill:nth-child(4){animation-delay:.20s}
html.motion .pro-providers .ai-pill:nth-child(5){animation-delay:.26s}
html.motion .pro-providers .ai-pill:nth-child(6){animation-delay:.32s}
.pro-doctrine{border:1px solid var(--border); background:rgba(255,255,255,.03); border-radius:6px; padding:10px 11px; display:flex; gap:10px; align-items:flex-start}
.doctrine-bar{width:2px; align-self:stretch; border-radius:999px; background:rgba(255,255,255,.08); position:relative; overflow:hidden; flex-shrink:0}
.doctrine-bar i{position:absolute; inset:0; background:linear-gradient(180deg, var(--violet), var(--cyan)); transform:scaleY(var(--h,1)); transform-origin:top; opacity:.9}
html.motion .doctrine-bar i{animation:doctrineGrow 1.2s var(--ease) .45s both}
.pro-doctrine p{margin:0; font-size:.82rem; line-height:1.55; color:var(--text-dim)}
.pro-doctrine b{color:var(--text)}
.pro-arrav{position:relative; border:1px solid rgba(234,179,8,.24); background:linear-gradient(180deg, rgba(234,179,8,.11), rgba(234,179,8,.04)); border-radius:6px; padding:12px; overflow:hidden}
.pro-arrav::after{content:""; position:absolute; inset:-1px; background:radial-gradient(320px 120px at 30% 0%, rgba(234,179,8,.18), transparent 65%); pointer-events:none}
.arrav-top{display:flex; align-items:center; justify-content:space-between; gap:8px; position:relative}
.arrav-name{font-size:.78rem; font-weight:700; color:#fde68a; letter-spacing:.01em}
.arrav-soon{font-size:.60rem; letter-spacing:.08em; text-transform:uppercase; background:rgba(0,0,0,.22); border:1px solid rgba(234,179,8,.18); color:#fde68a; padding:3px 7px; border-radius:999px; white-space:nowrap}
.pro-arrav p{margin:7px 0 0; font-size:.82rem; line-height:1.55; color:var(--text-dim); position:relative}
.arrav-foot{margin-top:8px; display:flex; align-items:center; gap:6px; font-size:.62rem; letter-spacing:.08em; color:var(--text-mute); border-top:1px solid rgba(234,179,8,.14); padding-top:8px; position:relative}
.arrav-foot i{width:6px; height:6px; border-radius:50%; background:var(--amber); box-shadow:0 0 8px var(--amber); animation:livePulse 1.6s ease-in-out infinite}
.pro-sched{border-top:1px solid var(--border-soft); padding-top:12px}
.sched-head{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:.62rem; letter-spacing:.10em; text-transform:uppercase; color:var(--text-mute); font-weight:700}
.sched-pulse{width:28px; height:2px; border-radius:999px; background:rgba(255,255,255,.08); position:relative; overflow:hidden}
.sched-pulse::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, var(--violet), transparent); transform:translateX(-100%); animation:schedSweep 2.2s linear infinite}
.pro-sched p{margin:7px 0 0; font-size:.82rem; line-height:1.55; color:var(--text-dim)}
.sched-timeline{display:flex; gap:6px; flex-wrap:wrap; margin-top:9px}
.sched-timeline span{font-size:.60rem; letter-spacing:.05em; border:1px solid var(--border); background:rgba(255,255,255,.04); color:var(--text-mute); padding:4px 7px; border-radius:999px; white-space:nowrap}
.sched-timeline span:nth-child(1){color:var(--text); border-color:rgba(234,179,8,.22); background:rgba(234,179,8,.08)}
@keyframes livePulse{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.45; transform:scale(.85)}}
@keyframes pillIn{to{opacity:1; transform:none}}
@keyframes doctrineGrow{from{transform:scaleY(0)} to{transform:scaleY(1)}}
@keyframes schedSweep{to{transform:translateX(100%)}}

/* finds */
.finds .finds-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.find-card{border:1px solid var(--border); border-radius:8px; background:rgba(255,255,255,.02); padding:18px; display:flex; flex-direction:column; gap:10px; transition:border-color .2s, transform .2s, background .2s}
.find-card:hover{border-color:var(--border-strong); transform:translateY(-1px); background:rgba(255,255,255,.035)}
.find-icon{width:36px; height:36px; display:grid; place-items:center; border-radius:4px; background:rgba(255,255,255,.06); border:1px solid var(--border); color:var(--text)}
.find-card:nth-child(1) .find-icon{color:var(--amber)}
.find-card:nth-child(2) .find-icon{color:var(--violet-2)}
.find-card:nth-child(3) .find-icon{color:var(--cyan)}
.find-card:nth-child(4) .find-icon{color:#a3a6b0}
.find-kicker{font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; color:var(--text-mute); font-weight:700}
.find-card h3{margin:0; font-size:1.15rem; line-height:1.2}
.find-card p{margin:0; color:var(--text-dim); font-size:.92rem; line-height:1.6}
.find-meta{font-size:.68rem; color:var(--text-mute); border-top:1px solid var(--border-soft); padding-top:8px}
.find-meta b{color:var(--text)}
.intel-strip{margin-top:14px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; border:1px dashed var(--border); border-radius:6px; padding:12px 14px; background:rgba(255,255,255,.02)}
.intel-title{font-size:.68rem; letter-spacing:.08em; font-weight:700; background:rgba(34,211,238,.14); border:1px solid rgba(34,211,238,.22); color:#a5e6f5; padding:4px 8px; border-radius:4px}
.intel-strip span:last-child{font-size:.88rem; color:var(--text-dim)}
.intel-strip b{color:var(--text)}

/* how — walking light, no dot */
.loop-diagram{position:relative; display:flex; align-items:center; gap:8px; padding:14px; border:1px solid var(--border); border-radius:6px; background:rgba(255,255,255,.02); overflow:auto; scrollbar-width:none}
.loop-node{min-width:150px; flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px; padding:12px 8px; border-radius:6px; border:1px solid var(--border); background:rgba(255,255,255,.03); will-change:border-color, background, box-shadow, transform}
.loop-node:nth-child(1){animation:nodeWalk1 9s ease-in-out infinite both}
.loop-node:nth-child(3){animation:nodeWalk2 9s ease-in-out infinite both}
.loop-node:nth-child(5){animation:nodeWalk3 9s ease-in-out infinite both}
.loop-node:nth-child(7){animation:nodeWalk4 9s ease-in-out infinite both}
.loop-node:nth-child(9){animation:nodeWalk5 9s ease-in-out infinite both}
.loop-node:nth-child(11){animation:nodeWalk6 9s ease-in-out infinite both}
.node-n{font-size:.62rem; letter-spacing:.1em; color:var(--text-mute); transition:color .3s}
.loop-node b{font-size:.78rem; letter-spacing:.12em; transition:color .3s}
.node-sub{font-size:.68rem; color:var(--text-mute); transition:color .3s}
.loop-arrow{color:var(--text-faint); font-size:1.1rem; opacity:.45}
.loop-arrow:nth-child(2){animation:arrowWalk1 9s ease-in-out infinite both}
.loop-arrow:nth-child(4){animation:arrowWalk2 9s ease-in-out infinite both}
.loop-arrow:nth-child(6){animation:arrowWalk3 9s ease-in-out infinite both}
.loop-arrow:nth-child(8){animation:arrowWalk4 9s ease-in-out infinite both}
.loop-arrow:nth-child(10){animation:arrowWalk5 9s ease-in-out infinite both}
/* building sequence — each stays lit until reset, distinct colors, slower 9s */
@keyframes nodeWalk1{0%{border-color:var(--border); background:rgba(255,255,255,.03); box-shadow:none; transform:translateY(0)} 8%{border-color:rgba(34,197,94,.48); background:rgba(34,197,94,.13); box-shadow:0 0 16px rgba(34,197,94,.18), 0 1px 0 rgba(255,255,255,.05) inset; transform:translateY(-1px)} 85%{border-color:rgba(34,197,94,.48); background:rgba(34,197,94,.13); box-shadow:0 0 16px rgba(34,197,94,.14)} 92%,100%{border-color:var(--border); background:rgba(255,255,255,.03); box-shadow:none; transform:translateY(0)}}
@keyframes nodeWalk2{0%,12%{border-color:var(--border); background:rgba(255,255,255,.03); box-shadow:none} 20%{border-color:rgba(34,211,238,.48); background:rgba(34,211,238,.13); box-shadow:0 0 16px rgba(34,211,238,.18)} 85%{border-color:rgba(34,211,238,.48); background:rgba(34,211,238,.13); box-shadow:0 0 16px rgba(34,211,238,.14)} 92%,100%{border-color:var(--border); background:rgba(255,255,255,.03); box-shadow:none}}
@keyframes nodeWalk3{0%,26%{border-color:var(--border); background:rgba(255,255,255,.03); box-shadow:none} 34%{border-color:rgba(234,179,8,.52); background:rgba(234,179,8,.13); box-shadow:0 0 16px rgba(234,179,8,.18)} 85%{border-color:rgba(234,179,8,.52); background:rgba(234,179,8,.13); box-shadow:0 0 16px rgba(234,179,8,.14)} 92%,100%{border-color:var(--border); background:rgba(255,255,255,.03); box-shadow:none}}
@keyframes nodeWalk4{0%,40%{border-color:var(--border); background:rgba(255,255,255,.03); box-shadow:none} 48%{border-color:rgba(245,158,11,.52); background:rgba(245,158,11,.13); box-shadow:0 0 18px rgba(245,158,11,.18)} 85%{border-color:rgba(245,158,11,.52); background:rgba(245,158,11,.13); box-shadow:0 0 16px rgba(245,158,11,.14)} 92%,100%{border-color:var(--border); background:rgba(255,255,255,.03); box-shadow:none}}
@keyframes nodeWalk5{0%,54%{border-color:var(--border); background:rgba(255,255,255,.03); box-shadow:none} 62%{border-color:rgba(34,211,238,.46); background:rgba(34,211,238,.12); box-shadow:0 0 16px rgba(34,211,238,.16)} 85%{border-color:rgba(34,211,238,.46); background:rgba(34,211,238,.12); box-shadow:0 0 14px rgba(34,211,238,.13)} 92%,100%{border-color:var(--border); background:rgba(255,255,255,.03); box-shadow:none}}
@keyframes nodeWalk6{0%,68%{border-color:var(--border); background:rgba(255,255,255,.03); box-shadow:none} 76%{border-color:rgba(167,139,250,.48); background:rgba(167,139,250,.12); box-shadow:0 0 18px rgba(167,139,250,.18)} 85%{border-color:rgba(167,139,250,.48); background:rgba(167,139,250,.12); box-shadow:0 0 16px rgba(167,139,250,.14)} 92%,100%{border-color:var(--border); background:rgba(255,255,255,.03); box-shadow:none}}
@keyframes arrowWalk1{0%,8%{color:var(--text-faint); opacity:.45} 12%,85%{color:#4ade80; opacity:1; text-shadow:0 0 8px rgba(34,197,94,.35)} 92%,100%{color:var(--text-faint); opacity:.45}}
@keyframes arrowWalk2{0%,20%{color:var(--text-faint); opacity:.45} 24%,85%{color:#22d3ee; opacity:1; text-shadow:0 0 8px rgba(34,211,238,.35)} 92%,100%{color:var(--text-faint); opacity:.45}}
@keyframes arrowWalk3{0%,34%{color:var(--text-faint); opacity:.45} 38%,85%{color:#facc15; opacity:1; text-shadow:0 0 8px rgba(234,179,8,.35)} 92%,100%{color:var(--text-faint); opacity:.45}}
@keyframes arrowWalk4{0%,48%{color:var(--text-faint); opacity:.45} 52%,85%{color:#f59e0b; opacity:1; text-shadow:0 0 8px rgba(245,158,11,.35)} 92%,100%{color:var(--text-faint); opacity:.45}}
@keyframes arrowWalk5{0%,62%{color:var(--text-faint); opacity:.45} 66%,85%{color:#7dd3fc; opacity:1; text-shadow:0 0 8px rgba(34,211,238,.3)} 92%,100%{color:var(--text-faint); opacity:.45}}
@media (prefers-reduced-motion:reduce){
  .loop-node, .loop-arrow{animation:none !important}
  .flow-dots{ display:none}
  .engine-flow svg animate, .engine-flow svg animateMotion, .engine-flow svg animateTransform{ display:none}
}
.how-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:14px; margin-top:14px}
.how-card{border:1px solid var(--border); border-radius:8px; background:rgba(255,255,255,.02); padding:18px; display:flex; flex-direction:column; gap:12px}
.how-card h3{margin:0; font-size:1.1rem}
.how-card p{margin:0; color:var(--text-dim); font-size:.92rem}
.ledger-table{display:flex; flex-direction:column; border:1px solid var(--border); border-radius:6px; overflow:hidden; background:rgba(0,0,0,.18)}
.ledger-table div{display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:8px 10px; border-bottom:1px solid var(--border-soft); font-size:.72rem}
.ledger-table div:last-child{border:0}
.ledger-table span:last-child{color:var(--text-mute); text-align:right}
.engine-flow{border:1px solid var(--border); border-radius:6px; background:rgba(0,0,0,.22); padding:16px; overflow:hidden}
.engine-flow svg{width:100%; height:auto; display:block}
.eng rect{transition:fill .25s, stroke .25s}
.eng.e1 rect{animation:engBlue1 5s ease-in-out infinite}
.eng.e2 rect{animation:engBlue2 5s ease-in-out infinite}
.eng.e3 rect{animation:engBlue3 5s ease-in-out infinite}
.eng.e4 rect{animation:engBlue4 5s ease-in-out infinite}
.eng.e5 rect{animation:engBlue5 5s ease-in-out infinite}
.eng.e1 text, .eng.e2 text, .eng.e3 text, .eng.e4 text, .eng.e5 text{transition:fill .25s}
.eng.e1 text{animation:engText1 5s ease-in-out infinite}
.eng.e2 text{animation:engText2 5s ease-in-out infinite}
.eng.e3 text{animation:engText3 5s ease-in-out infinite}
.eng.e4 text{animation:engText4 5s ease-in-out infinite}
.eng.e5 text{animation:engText5 5s ease-in-out infinite}
@keyframes engBlue1{0%,3%{fill:rgba(255,255,255,.04); stroke:rgba(255,255,255,.09)} 7%,85%{fill:rgba(34,211,238,.18); stroke:rgba(34,211,238,.44)} 92%,100%{fill:rgba(255,255,255,.04); stroke:rgba(255,255,255,.09)}}
@keyframes engBlue2{0%,15%{fill:rgba(255,255,255,.04); stroke:rgba(255,255,255,.09)} 19%,85%{fill:rgba(34,211,238,.18); stroke:rgba(34,211,238,.44)} 92%,100%{fill:rgba(255,255,255,.04); stroke:rgba(255,255,255,.09)}}
@keyframes engBlue3{0%,27%{fill:rgba(255,255,255,.04); stroke:rgba(255,255,255,.09)} 31%,85%{fill:rgba(34,211,238,.18); stroke:rgba(34,211,238,.44)} 92%,100%{fill:rgba(255,255,255,.04); stroke:rgba(255,255,255,.09)}}
@keyframes engBlue4{0%,39%{fill:rgba(255,255,255,.04); stroke:rgba(255,255,255,.09)} 43%,85%{fill:rgba(34,211,238,.18); stroke:rgba(34,211,238,.44)} 92%,100%{fill:rgba(255,255,255,.04); stroke:rgba(255,255,255,.09)}}
@keyframes engBlue5{0%,51%{fill:rgba(255,255,255,.04); stroke:rgba(255,255,255,.09)} 55%,85%{fill:rgba(34,211,238,.18); stroke:rgba(34,211,238,.44)} 92%,100%{fill:rgba(255,255,255,.04); stroke:rgba(255,255,255,.09)}}
@keyframes engText1{0%,3%{fill:#a3a6b0} 7%,85%{fill:#a5e6f5} 92%,100%{fill:#a3a6b0}}
@keyframes engText2{0%,15%{fill:#a3a6b0} 19%,85%{fill:#a5e6f5} 92%,100%{fill:#a3a6b0}}
@keyframes engText3{0%,27%{fill:#a3a6b0} 31%,85%{fill:#a5e6f5} 92%,100%{fill:#a3a6b0}}
@keyframes engText4{0%,39%{fill:#a3a6b0} 43%,85%{fill:#a5e6f5} 92%,100%{fill:#a3a6b0}}
@keyframes engText5{0%,51%{fill:#7d808c} 55%,85%{fill:#a5e6f5} 92%,100%{fill:#7d808c}}
@media (prefers-reduced-motion:reduce){ .eng rect, .eng text{animation:none !important} }
.flow-legend{display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:center; font-size:.62rem; letter-spacing:.06em; color:var(--text-mute); margin-top:8px; border-top:1px solid var(--border-soft); padding-top:8px}
.flow-legend span{display:inline-flex; align-items:center; gap:6px}
.ldot{width:6px; height:6px; border-radius:50%; flex-shrink:0}
.ldot.y{background:var(--violet); box-shadow:0 0 8px var(--violet)}
.ldot.c{background:var(--cyan); box-shadow:0 0 8px var(--cyan)}
.ldot.w{background:var(--text); box-shadow:0 0 8px rgba(255,255,255,.4)}
.how-shots figcaption{font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; color:var(--text-mute); margin-top:6px; text-align:center}
.acp-card{border:1px solid rgba(34,211,238,.22); background:rgba(34,211,238,.06); border-radius:4px; padding:10px}
.acp-kicker{font-size:.68rem; letter-spacing:.08em; color:#a5e6f5; font-weight:700}
.acp-card code{background:rgba(0,0,0,.25); display:block; margin-top:6px; padding:8px; font-size:.66rem; line-height:1.5; white-space:pre-wrap; word-break:break-all}
.walk-depth{display:grid; grid-template-columns:.9fr 1.1fr; gap:14px; margin-top:14px}
.walk-card,.depth-card{border:1px solid var(--border); border-radius:8px; background:rgba(255,255,255,.02); padding:18px}
.walk-card h3,.depth-card h3{margin:0 0 10px; font-size:1.05rem}
.walk-list{margin:0; padding-left:16px; display:flex; flex-direction:column; gap:6px; color:var(--text-dim); font-size:.9rem}
.walk-list b{color:var(--text)}
.depth-rows{display:flex; flex-direction:column; gap:8px}
.depth-row{display:grid; grid-template-columns:110px 1fr auto; gap:10px; align-items:center; padding:10px; border:1px solid var(--border); border-radius:6px; background:rgba(255,255,255,.03)}
.depth-row.on{border-color:rgba(34,197,94,.35); background:rgba(34,197,94,.08)}
.depth-name{font-weight:700; font-size:.9rem}
.depth-meta{font-size:.82rem; color:var(--text-dim)}
.depth-badge{font-family:var(--mono); font-size:.62rem; letter-spacing:.06em; background:rgba(255,255,255,.06); border:1px solid var(--border); padding:4px 7px; border-radius:4px; color:var(--text-mute); white-space:nowrap}

/* engines */
.eng-table{border:1px solid var(--border); border-radius:8px; overflow:hidden; background:rgba(255,255,255,.02)}
.eng-head,.eng-row{display:grid; grid-template-columns:170px 1.6fr .9fr .9fr; gap:12px; padding:12px 14px; font-size:.86rem; align-items:start}
.eng-head{background:rgba(255,255,255,.04); color:var(--text-mute); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.68rem}
.eng-row{border-top:1px solid var(--border-soft)}
.eng-row:nth-child(even){background:rgba(255,255,255,.015)}
.eng-name{font-weight:700; color:var(--text)}
.eng-name .opt{font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; background:rgba(255,255,255,.07); border:1px solid var(--border); padding:2px 6px; border-radius:4px; color:var(--text-mute); margin-left:6px}
.muted{color:var(--text-dim); font-size:.84rem}
.dim{color:var(--text-mute); font-size:.84rem}
.eng-note{margin-top:10px; font-size:.78rem; color:var(--text-mute); border:1px dashed var(--border); padding:10px 12px; border-radius:4px; background:rgba(255,255,255,.02)}

/* codemap */
.codemap{background:linear-gradient(180deg, rgba(255,255,255,.012), transparent)}
.codemap-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; align-items:stretch}
.codemap-card{border:1px solid var(--border); border-radius:8px; background:rgba(255,255,255,.02); padding:18px; display:flex; flex-direction:column; gap:10px; transition:border-color .2s, transform .2s, background .2s; height:100%}
.codemap-card:hover{border-color:var(--border-strong); transform:translateY(-1px); background:rgba(255,255,255,.035)}
.codemap-icon{width:36px; height:36px; display:grid; place-items:center; border-radius:4px; background:rgba(255,255,255,.06); border:1px solid var(--border); color:var(--text)}
.codemap-card:nth-child(1) .codemap-icon{color:var(--cyan)}
.codemap-card:nth-child(2) .codemap-icon{color:var(--violet-2)}
.codemap-card:nth-child(3) .codemap-icon{color:#a3a6b0}
.codemap-kicker{font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; color:var(--text-mute); font-weight:700}
.codemap-card h3{margin:0; font-size:1.08rem; line-height:1.2}
.codemap-card p{margin:0; color:var(--text-dim); font-size:.9rem; line-height:1.6; flex:1 0 auto}
.codemap-meta{font-size:.66rem; color:var(--text-mute); border-top:1px solid var(--border-soft); padding-top:8px; letter-spacing:.02em; margin-top:auto}
.codemap-meta b{color:var(--text)}
.codemap-strip{margin-top:14px; display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; border:1px solid var(--border); border-radius:6px; padding:12px 14px; background:rgba(255,255,255,.02)}
.codemap-strip-label{font-size:.68rem; letter-spacing:.08em; font-weight:700; background:rgba(234,179,8,.14); border:1px solid rgba(234,179,8,.24); color:#fde68a; padding:4px 8px; border-radius:4px; white-space:nowrap; flex-shrink:0}
.codemap-strip span:last-child{font-size:.88rem; color:var(--text-dim); line-height:1.6; flex:1; min-width:220px}
.codemap-strip b{color:var(--text)}
.codemap-note{margin-top:10px; font-size:.72rem; color:var(--text-mute); border:1px dashed var(--border); padding:8px 10px; border-radius:4px; background:rgba(255,255,255,.02); line-height:1.5}
.codemap-note b{color:var(--text)}
.codemap-note a{color:var(--text-dim)}
.codemap-note a:hover{color:var(--text)}

/* integrate */
.int-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:12px}
.int-card{border:1px solid var(--border); border-radius:3px; background:rgba(255,255,255,.02); padding:14px; display:flex; flex-direction:column; gap:9px}
.int-card.mcp{border-color:var(--border); background:rgba(255,255,255,.02); box-shadow:none}
.int-head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.int-title{font-weight:700}
.int-badge{font-size:.66rem; letter-spacing:.08em; background:rgba(255,255,255,.04); border:1px solid var(--border); padding:3px 7px; border-radius:3px; color:var(--text-mute)}
.int-card.mcp .int-badge{color:var(--text-mute); border-color:var(--border); background:rgba(255,255,255,.04)}
.int-card p{margin:0; color:var(--text-dim); font-size:.92rem}
.mcp-clients{display:flex; flex-wrap:wrap; gap:6px}
.mcp-pill{display:inline-flex; align-items:center; border:1px solid var(--border); background:rgba(255,255,255,.03); padding:5px 9px; border-radius:3px; font-size:.78rem; font-weight:600; color:var(--text-dim)}
.mcp-pill.dim{color:var(--text-mute)}
.code-block{background:rgba(0,0,0,.28); border:1px solid var(--border); border-radius:3px; padding:9px 11px; font-size:.72rem; line-height:1.65; color:var(--text-dim); overflow:auto}

/* mcp terminal — scan-style config output */
.mcp-terminal{
  border:1px solid rgba(72,62,48,.5);
  border-radius:3px;
  background:#050506;
  overflow:hidden;
}
.mcp-terminal-bar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 11px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:#070809;
}
.mcp-terminal-traffic{display:flex; gap:6px; align-items:center; flex-shrink:0}
.mcp-terminal-traffic i{
  width:8px; height:8px; border-radius:50%; display:block;
  border:1px solid rgba(0,0,0,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.mcp-terminal-traffic i:nth-child(1){background:#6b6348}
.mcp-terminal-traffic i:nth-child(2){background:#4a4f54}
.mcp-terminal-traffic i:nth-child(3){background:#5a6a68}
.mcp-terminal-title{
  font-size:.66rem;
  color:rgba(163,166,176,.92);
  letter-spacing:.02em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mcp-terminal-body{
  display:flex;
  flex-direction:column;
  gap:11px;
  padding:12px 12px 13px;
  background:#050506;
}
.term-line{
  display:grid;
  grid-template-columns:16px 1fr;
  gap:8px;
  align-items:start;
  font-size:.7rem;
  line-height:1.45;
  color:rgba(163,166,176,.9);
}
.term-line--stack{align-items:start}
.term-glyph{display:inline-block; width:16px; text-align:left; flex-shrink:0}
.term-glyph--cmd{color:#c9b46a}
.term-glyph--ok{color:rgba(201,180,106,.88)}
.term-glyph--out{color:#c9b46a}
.term-copy{min-width:0}
.term-path{color:rgba(232,228,220,.92)}
.term-meta{color:rgba(125,128,140,.92); margin-left:.45em}
.term-stack{display:flex; flex-direction:column; gap:6px; min-width:0}
.term-nest{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding-left:2px;
}
.term-nest-line{
  display:flex;
  align-items:baseline;
  gap:7px;
  font-size:.66rem;
  color:rgba(125,128,140,.95);
  line-height:1.4;
}
.term-bullet{color:rgba(125,128,140,.75); flex-shrink:0}
.term-line--out{color:rgba(163,166,176,.88)}
.int-card.efficiency{padding:14px}
.eff-metric{border:1px solid var(--border); background:rgba(0,0,0,.22); border-radius:3px; padding:10px 12px}
.metric-n{font-weight:700; font-size:.9rem; color:var(--text)}
.metric-sub{font-size:.84rem; color:var(--text-dim); display:block; margin-top:4px}

/* hook panel — token mode steps (inspiration: edit hook tracker) */
.hook-panel{
  border:1px solid rgba(201,180,106,.48);
  border-radius:3px;
  background:#050506;
  overflow:hidden;
}
.hook-panel-bar{
  display:grid;
  grid-template-columns:52px 1fr auto;
  align-items:center;
  gap:8px;
  padding:11px 14px;
  border-bottom:1px solid rgba(201,180,106,.14);
  background:#050506;
}
.hook-traffic{display:flex; gap:6px; align-items:center}
.hook-traffic i{
  width:9px; height:9px; border-radius:50%; display:block;
  border:1px solid rgba(0,0,0,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
.hook-traffic i:nth-child(1){background:#ff5f57}
.hook-traffic i:nth-child(2){background:#febc2e}
.hook-traffic i:nth-child(3){background:#28c840}
.hook-panel-title{
  font-size:.68rem;
  color:rgba(245,245,247,.82);
  text-align:center;
  letter-spacing:.02em;
}
.hook-panel-badge{
  font-size:.54rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-mute);
  border:1px solid var(--border);
  background:#070809;
  padding:4px 9px;
  border-radius:999px;
  white-space:nowrap;
}
.hook-steps{
  list-style:none;
  margin:0;
  padding:16px 16px 14px;
  display:flex;
  flex-direction:column;
  gap:18px;
  background:#050506;
}
.hook-step{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:12px;
  align-items:start;
}
.hook-step-n{
  width:34px; height:34px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.08);
  background:#101114;
  display:grid;
  place-items:center;
  font-size:.68rem;
  color:rgba(163,166,176,.9);
  line-height:1;
}
.hook-step:nth-child(1) .hook-step-n{
  color:#86efac;
  border-color:rgba(74,222,128,.42);
  background:#101114;
}
.hook-step:nth-child(2) .hook-step-n{
  color:#fbbf24;
  border-color:rgba(251,191,36,.44);
  background:#101114;
}
.hook-step:nth-child(3) .hook-step-n{
  color:#fb923c;
  border-color:rgba(249,115,22,.42);
  background:#101114;
}
.hook-step--done .hook-step-n{
  color:#4ade80;
  border-color:rgba(74,222,128,.44);
  background:#101114;
  font-size:.72rem;
}
.hook-step-copy{display:flex; flex-direction:column; gap:4px; min-width:0; padding-top:2px}
.hook-step-title{
  font-size:.84rem;
  font-weight:600;
  color:rgba(245,245,247,.92);
  line-height:1.25;
}
.hook-step-sub{
  font-size:.74rem;
  color:rgba(163,166,176,.88);
  line-height:1.45;
}
.hook-panel-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:11px 16px;
  border-top:1px solid rgba(201,180,106,.12);
  font-size:.64rem;
  color:rgba(125,128,140,.95);
  background:#050506;
}
.hook-panel-foot span:last-child{color:var(--text-dim)}
.skill-gallery{margin-top:28px}
.skill-gallery-head{display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-bottom:16px}
.skill-gallery-head h3{margin:0; font-size:1.15rem; line-height:1.2}
.skill-count{
  display:inline-block;
  padding:.04em .42em;
  border-radius:4px;
  font-size:.92em;
  font-weight:700;
  color:#fde68a;
  background:rgba(245,158,11,.14);
  border:1px solid rgba(245,158,11,.28);
  vertical-align:baseline;
}
.skill-gallery-head p{margin:0; max-width:62ch; color:var(--text-dim)}

/* category mode board */
.skill-modes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
  background:var(--border);
}
.skill-mode{
  --mode-accent:var(--text-mute);
  --mode-soft:rgba(255,255,255,.02);
  background:linear-gradient(180deg, var(--mode-soft), rgba(10,10,10,.98));
  padding:16px 18px 18px;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}
.skill-mode[data-family="review"]{--mode-accent:#d0a800; --mode-soft:rgba(191,155,0,.06); grid-column:1 / -1}
.skill-mode[data-family="orient"]{--mode-accent:#22d3ee; --mode-soft:rgba(34,211,238,.05)}
.skill-mode[data-family="intel"]{--mode-accent:#f59e0b; --mode-soft:rgba(245,158,11,.06)}
.skill-mode[data-family="pipeline"]{--mode-accent:#fb923c; --mode-soft:rgba(251,146,60,.06)}
.skill-mode[data-family="remediate"]{--mode-accent:#22c55e; --mode-soft:rgba(34,197,94,.06)}
.skill-mode-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding-bottom:10px;
  border-bottom:1px solid color-mix(in srgb, var(--mode-accent) 16%, var(--border-soft));
}
.skill-mode-name{
  margin:0;
  font-size:.82rem;
  font-weight:700;
  color:color-mix(in srgb, var(--mode-accent) 72%, var(--text));
  letter-spacing:.02em;
}
.skill-mode-tag{
  font-family:var(--mono);
  font-size:.64rem;
  color:var(--text-mute);
  letter-spacing:.02em;
}
.skill-mode-body{
  flex:1;
  min-height:0;
}
.skill-mode .skill{
  --skill-accent:var(--mode-accent);
  border:1px solid color-mix(in srgb, var(--mode-accent) 20%, var(--border));
  border-radius:6px;
  background:rgba(0,0,0,.22);
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height:0;
  transition:border-color .2s, background .2s;
}
.skill-mode .skill:hover{
  border-color:color-mix(in srgb, var(--mode-accent) 34%, var(--border-strong));
  background:rgba(0,0,0,.32);
}
.skill-mode .skill-name{
  margin:0;
  font-size:.76rem;
  font-weight:700;
  color:var(--text);
  line-height:1.25;
}
.skill-mode .skill p{
  margin:0;
  font-size:.76rem;
  color:var(--text-dim);
  line-height:1.45;
}
.skill-mode .skill-meta{
  font-size:.58rem;
  color:var(--text-mute);
  margin-top:auto;
  padding-top:6px;
  border-top:1px solid color-mix(in srgb, var(--mode-accent) 12%, var(--border-soft));
}

/* review — 2×2 card grid */
.skill-mode-body--grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

/* orient — numbered trail */
.skill-mode-body--trail{
  display:flex;
  flex-direction:column;
  gap:0;
  position:relative;
}
.skill-mode-body--trail::before{
  content:"";
  position:absolute;
  left:11px;
  top:14px;
  bottom:14px;
  width:1px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--mode-accent) 40%, transparent), color-mix(in srgb, var(--mode-accent) 12%, transparent));
}
.skill-mode-body--trail .skill{
  flex-direction:row;
  align-items:flex-start;
  gap:10px;
  border:none;
  border-radius:0;
  background:transparent;
  padding:10px 0 10px 4px;
}
.skill-mode-body--trail .skill:hover{background:rgba(255,255,255,.02)}
.skill-trail-idx{
  width:22px;
  flex-shrink:0;
  font-size:.58rem;
  color:color-mix(in srgb, var(--mode-accent) 70%, var(--text-faint));
  text-align:center;
  padding-top:2px;
  position:relative;
  z-index:1;
}
.skill-trail-copy{display:flex; flex-direction:column; gap:4px; min-width:0}

/* intel — data bars */
.skill-mode-body--intel{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.skill-intel-bar{
  display:flex;
  gap:4px;
  margin-bottom:2px;
}
.skill-intel-bar i{
  display:block;
  height:3px;
  border-radius:2px;
  background:color-mix(in srgb, var(--mode-accent) 55%, transparent);
}
.skill-intel-bar i:nth-child(1){width:42%}
.skill-intel-bar i:nth-child(2){width:28%; opacity:.55}
.skill-intel-bar i:nth-child(3){width:18%; opacity:.3}

/* pipeline — workflow strip */
.skill-mode-body--pipeline .skill{
  gap:8px;
  background:linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.18));
}
.skill-pipe-steps{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  font-size:.58rem;
  color:var(--text-mute);
}
.skill-pipe-steps span{
  padding:3px 7px;
  border:1px solid color-mix(in srgb, var(--mode-accent) 24%, var(--border));
  border-radius:3px;
  background:rgba(255,255,255,.03);
}
.skill-pipe-steps span:not(:last-child)::after{
  content:"→";
  margin-left:6px;
  color:color-mix(in srgb, var(--mode-accent) 50%, var(--text-faint));
  border:none;
  background:none;
  padding:0;
}

/* remediate — action rows */
.skill-mode-body--actions{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.skill-mode-body--actions .skill{
  flex-direction:row;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
}
.skill-action{
  color:color-mix(in srgb, var(--mode-accent) 75%, var(--text-faint));
  font-size:.72rem;
  line-height:1.6;
  flex-shrink:0;
}
.skill-mode-body--actions .skill-meta{border-top:none; padding-top:4px; margin-top:4px}
/* recipes — 2×2 quadrant grid */
.recipe-shell{
  margin-top:22px;
}
.recipe-shell-head{
  padding:0 0 16px;
}
.recipe-shell-head h3{margin:0 0 8px; font-size:1.15rem; line-height:1.2}
.recipe-shell-head p{margin:0; max-width:62ch; color:var(--text-dim); line-height:1.6}
.recipe-quadrants{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  grid-template-rows:repeat(2, minmax(0, 1fr));
  gap:2px;
  background:rgba(255,255,255,.115);
}
.recipe-quadrant{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:20px 22px 22px;
  min-height:220px;
  background:var(--bg);
  min-width:0;
  transition:background .22s var(--ease);
}
.recipe-quadrant:hover{background:rgba(255,255,255,.018)}
.recipe-quadrant-copy{display:flex; flex-direction:column; gap:6px}
.recipe-quadrant-title{
  margin:0;
  font-size:.95rem;
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.2;
  color:var(--text);
}
.recipe-quadrant-lede{
  margin:0;
  font-size:.82rem;
  color:var(--text-mute);
  line-height:1.5;
  max-width:36ch;
}
.recipe-quadrant-panel{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:auto;
  border:1px solid rgba(255,255,255,.1);
  border-radius:6px;
  background:rgba(0,0,0,.34);
  padding:12px 13px;
  min-height:112px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.recipe-quadrant:hover .recipe-quadrant-panel{
  border-color:rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.recipe-quadrant-panel p{
  margin:0;
  font-size:.82rem;
  color:var(--text-dim);
  line-height:1.55;
}
.recipe-detail{
  font-size:.76rem !important;
  color:var(--text-mute) !important;
  line-height:1.5 !important;
}
.recipe-quadrant--scheduler .recipe-quadrant-title{
  display:flex;
  align-items:center;
  gap:8px;
}
.recipe-quadrant--scheduler .recipe-quadrant-title::after{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 10px rgba(34,211,238,.55);
  flex-shrink:0;
}
.recipe-quadrant--scheduler .recipe-quadrant-panel{
  border-color:rgba(34,211,238,.18);
  box-shadow:inset 0 1px 0 rgba(34,211,238,.1), inset 0 -12px 28px rgba(34,211,238,.03);
}
.recipe-quadrant--scheduler:hover .recipe-quadrant-panel{
  border-color:rgba(34,211,238,.28);
  box-shadow:inset 0 1px 0 rgba(34,211,238,.14), inset 0 -12px 28px rgba(34,211,238,.05);
}
.recipe-schedule{
  list-style:none;
  margin:4px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.recipe-schedule li{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:.68rem;
  letter-spacing:.04em;
  color:var(--text-mute);
  border-top:1px solid rgba(255,255,255,.06);
  padding-top:6px;
}
.recipe-schedule li:first-child{border-top:0; padding-top:0}
.recipe-schedule span:first-child{
  color:rgba(34,211,238,.82);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:.62rem;
}
.recipe-schedule span:last-child{color:var(--text-dim); text-align:right}

/* model */
.model-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start}
.model-pills{display:flex; flex-wrap:wrap; gap:7px; margin:12px 0}
.model-pills span{border:1px solid var(--border); background:rgba(255,255,255,.04); padding:6px 10px; border-radius:4px; font-size:.78rem; font-weight:600; color:var(--text-dim)}
.arrav-card{position:relative; overflow:hidden; border:1px solid rgba(234,179,8,.26); border-radius:8px; background:linear-gradient(180deg, rgba(234,179,8,.11), rgba(14,14,14,.95)); padding:20px; display:flex; flex-direction:column; gap:10px}
.arrav-glow{position:absolute; inset:-60px; background:radial-gradient(ellipse 70% 50% at 70% 10%, rgba(234,179,8,.22), transparent 60%); pointer-events:none}
.arrav-head{display:flex; align-items:center; justify-content:space-between}
.arrav-label{font-weight:700; display:flex; align-items:center; gap:7px}
.lamp{width:8px; height:8px; border-radius:50%; border:1px solid var(--border); display:inline-block}
.lamp.on{background:var(--green); border-color:var(--green); box-shadow:0 0 8px var(--green)}
.arrav-badge{font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; background:rgba(255,255,255,.08); border:1px solid var(--border); padding:4px 8px; border-radius:4px; color:var(--text-mute)}
.arrav-card h3{margin:0; font-size:1.2rem; line-height:1.2; position:relative}
.arrav-card p{margin:0; color:var(--text-dim); font-size:.92rem; position:relative}
.arrav-points{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:4px; color:var(--text-dim); font-size:.88rem; position:relative}
.arrav-pending{font-size:.68rem; letter-spacing:.08em; color:var(--text-mute); border-top:1px solid var(--border-soft); padding-top:10px; display:flex; align-items:center; gap:8px; position:relative}
.arrav-pending i{width:6px; height:6px; border-radius:50%; background:var(--amber); box-shadow:0 0 8px var(--amber)}

/* download — unified install panel */
.download-inner{padding-top:56px; padding-bottom:56px}
.download-shell{
  max-width:920px;
  margin:0 auto;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.012));
  overflow:hidden;
  text-align:center;
}
.download-head{padding:32px 28px 24px; border-bottom:1px solid var(--border-soft)}
.download-head h2{margin:0 0 8px}
.download-head p{margin:0 auto; max-width:54ch; color:var(--text-dim); font-size:.95rem; line-height:1.6}
.download-head p a{color:var(--text); text-decoration:underline; text-underline-offset:2px}
.download-head .kicker{justify-content:center; margin-bottom:10px}
.download-grid{display:grid; grid-template-columns:repeat(3,1fr); align-items:stretch}
.dl-col{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:24px 18px 22px;
  border-right:1px solid var(--border-soft);
  min-height:168px;
}
.dl-col:last-child{border-right:0}
.dl-col[data-os].active{background:rgba(191,155,0,.06); box-shadow:inset 0 0 0 1px rgba(191,155,0,.14)}
.dl-platform{font-weight:700; font-size:1.05rem; letter-spacing:-.01em}
.dl-meta{font-size:.68rem; color:var(--text-mute); min-height:2.2em; line-height:1.45}
.dl-actions{display:flex; flex-direction:column; align-items:center; gap:8px; width:100%; margin-top:auto}
.dl-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 16px;
  border-radius:4px;
  font-weight:700;
  font-size:.82rem;
  text-decoration:none;
  border:1px solid transparent;
  white-space:nowrap;
  transition:background .2s, border-color .2s, color .2s;
}
.dl-cta.primary{background:var(--text); color:var(--bg)}
.dl-cta.primary:hover{background:#fff}
.dl-cta.ghost{background:rgba(255,255,255,.06); color:var(--text); border-color:var(--border)}
.dl-cta.ghost:hover{background:rgba(255,255,255,.1); border-color:var(--border-strong)}
.dl-col[data-os].active .dl-cta.primary{background:var(--violet); color:var(--bg)}
.dl-col[data-os].active .dl-cta.primary:hover{background:var(--violet-2)}
.dl-split{display:flex; gap:8px; width:100%}
.dl-split .dl-cta{flex:1; min-width:0}
.dl-sub{font-size:.62rem; color:var(--text-mute); line-height:1.4}
.dl-sub a{color:var(--text-dim); text-decoration:underline; text-underline-offset:2px}
.download-foot{
  margin:0;
  padding:14px 20px;
  border-top:1px solid var(--border-soft);
  font-size:.72rem;
  color:var(--text-mute);
  text-align:center;
}

/* legacy os-grid (hero / other surfaces) */
.download-note{font-size:.72rem; color:var(--text-mute); border:1px solid var(--border); padding:8px 10px; border-radius:4px; background:rgba(255,255,255,.02)}
.os-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; align-items:stretch}
.os-grid.four{grid-template-columns:1fr 1fr 1fr 1fr}
.os-card{display:flex; flex-direction:column; gap:6px; align-items:center; text-align:center; padding:18px 14px; border:1px solid var(--border); border-radius:8px; background:rgba(255,255,255,.02); text-decoration:none; transition:transform .18s var(--ease), border-color .2s, background .2s}
.os-card:hover{transform:translateY(-2px); border-color:var(--border-strong); background:rgba(255,255,255,.04)}
.os-card[data-os].active{border-color:rgba(191,155,0,.42); background:rgba(191,155,0,.08); box-shadow:0 0 0 1px rgba(191,155,0,.14) inset}
.os-ico{width:44px; height:44px; display:grid; place-items:center; border-radius:6px; background:rgba(255,255,255,.06); border:1px solid var(--border); font-size:1.1rem; color:var(--text)}
.os-name{font-weight:700; font-size:1.05rem}
.os-meta{font-size:.68rem; color:var(--text-mute)}
.os-cta{margin-top:6px; background:var(--text); color:var(--bg); font-weight:700; font-size:.82rem; padding:8px 14px; border-radius:4px; text-decoration:none}
.os-sub{font-size:.62rem; color:var(--text-mute); margin-top:4px}
.os-sub a{color:var(--text-dim); text-decoration:underline; text-underline-offset:2px}
.os-split{display:flex; gap:8px; width:100%; margin-top:auto}
.os-split .os-cta{flex:1; text-align:center; text-decoration:none}
.os-split .os-cta.ghost{background:rgba(255,255,255,.06); color:var(--text); border:1px solid var(--border)}
.os-card.active .os-cta{background:var(--violet); color:var(--bg)}

/* faq */
.faq-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.qa{border:1px solid var(--border); border-radius:6px; background:rgba(255,255,255,.02); padding:16px}
.qa h3{margin:0 0 6px; font-size:1rem}
.qa p{margin:0; color:var(--text-dim); font-size:.92rem}

/* footer */
.foot{border-top:1px solid var(--border); color:var(--text-mute); font-size:.82rem}
.foot-inner{max-width:1240px; margin:0 auto; padding:20px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
.foot a{color:var(--text-dim); text-decoration:none}
.foot a:hover{color:var(--text)}
.foot .sep{opacity:.3}

/* reveals — opacity only. transform on a tall section (e.g. #for-everyone
   card-table on iPhone) promotes a compositor layer bigger than iOS texture
   limits, so WebKit drops the whole layer and the section never paints. */
html.motion .section{opacity:0; transition:opacity .55s var(--ease)}
html.motion .section.in{opacity:1}
html.motion .section.is-tall{opacity:1; transition:none}

/* keyframes */
@keyframes pulse{0%,100%{opacity:1} 50%{opacity:.35}}
@keyframes rowIn{to{opacity:1; transform:none}}
@keyframes tape{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* responsive */
@media (max-width:1100px){
  .hero-shell{grid-template-columns:1fr; gap:20px}
  .every-grid{grid-template-columns:1fr}
  .every-card{position:relative; backdrop-filter:none}
  .finds .finds-grid{grid-template-columns:1fr}
  .codemap-grid{grid-template-columns:1fr 1fr}
  .how-grid{grid-template-columns:1fr}
  .walk-depth{grid-template-columns:1fr}
  .int-grid{grid-template-columns:1fr}
  .skill-modes{grid-template-columns:1fr}
  .skill-mode[data-family="review"]{grid-column:1}
  .skill-mode-body--grid{grid-template-columns:1fr}
  .model-grid{grid-template-columns:1fr}
  .os-grid.four{grid-template-columns:1fr 1fr}
  .brand-sub{display:none}
  .nav-links{display:none}
  .nav-actions .nav-ghost{display:none}
  .nav-menu{display:block}
}
/* fit-check — comparison inside #for-everyone */
.fit-wrap{margin-top:18px; border:1px solid var(--border); border-radius:8px; background:rgba(255,255,255,.02); padding:18px; display:flex; flex-direction:column; gap:12px}
.fit-head h3{margin:6px 0 4px; font-size:1.15rem; line-height:1.2}
.fit-head p{margin:0; color:var(--text-dim); font-size:.9rem}
.fit-head p b{color:var(--text)}
.fit-kicker{font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:#fde68a; font-weight:700}
.fit-toolbar{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.fit-view-hint{font-size:.64rem; letter-spacing:.06em; color:var(--text-mute)}
.fit-hint-mobile{display:none}
.fit-actions{display:flex; gap:8px; flex-shrink:0}
.fit-btn{display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:4px; border:1px solid var(--border); background:rgba(255,255,255,.04); color:var(--text-dim); font-family:var(--mono); font-size:.68rem; letter-spacing:.04em; cursor:pointer; transition:background .15s, border-color .15s, color .15s}
.fit-btn:hover:not(:disabled){background:rgba(255,255,255,.08); border-color:var(--border-strong); color:var(--text)}
.fit-btn:disabled{opacity:.55; cursor:wait}
.fit-btn svg{opacity:.75; flex-shrink:0}
.cmp-scroll{overflow-x:auto; border:1px solid var(--border); border-radius:6px; background:rgba(0,0,0,.18); -webkit-overflow-scrolling:touch}
.cmp-scroll.is-exporting{overflow:visible}
.cmp{width:100%; min-width:880px; border-collapse:collapse; font-size:.82rem}
.cmp th{font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-mute); text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); background:rgba(255,255,255,.04); white-space:nowrap}
.cmp th span{display:block; font-weight:400; letter-spacing:.04em; opacity:.7}
.cmp th.hot{color:#fde68a; border-left:2px solid rgba(234,179,8,.5); border-right:2px solid rgba(234,179,8,.5)}
.cmp td{padding:8px 12px; border-bottom:1px solid var(--border-soft); color:var(--text-dim); vertical-align:top}
.cmp tr:last-child td{border-bottom:0}
.cmp tr.grp td{font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-mute); background:rgba(255,255,255,.03); padding:7px 12px}
.cmp td.y{color:var(--text); font-weight:700; background:rgba(234,179,8,.07); border-left:2px solid rgba(234,179,8,.5); border-right:2px solid rgba(234,179,8,.5)}
.cmp td.neg{color:var(--text-faint)}
.cost-line{border-top:1px solid var(--border-soft); padding-top:12px; display:flex; flex-direction:column; gap:4px}
.cost-line p{margin:0; color:var(--text-dim); font-size:.9rem; line-height:1.6}
.cost-line p b{color:var(--text)}
.cost-line span{font-size:.84rem; color:var(--text-mute)}
.fit-note{font-size:.68rem; color:var(--text-mute); border:1px dashed var(--border); padding:8px 10px; border-radius:4px; background:rgba(255,255,255,.02); line-height:1.55; margin:0}
.cmp-cards{display:none; flex-direction:column; gap:8px}
.cmp-card-grp{margin:10px 0 2px; padding:0 2px 4px; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-mute)}
.cmp-card-grp:first-child{margin-top:0}
.cmp-card{border:1px solid var(--border); border-radius:6px; background:rgba(255,255,255,.02); overflow:hidden}
.cmp-card h4{margin:0; padding:8px 12px 6px; font-size:.84rem; font-weight:600; line-height:1.45; color:var(--text); border-bottom:1px solid var(--border-soft); background:rgba(255,255,255,.03)}
.cmp-card dl{margin:0}
.cmp-card dl > div{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:8px 12px; border-bottom:1px solid var(--border-soft)}
.cmp-card dl > div:last-child{border-bottom:0}
.cmp-card dt{font-family:var(--mono); font-size:.58rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-mute); flex:0 0 auto; max-width:42%; line-height:1.35}
.cmp-card dd{margin:0; text-align:right; font-size:.8rem; color:var(--text-dim); line-height:1.35}
.cmp-card dl > div.hot{background:rgba(234,179,8,.09)}
.cmp-card dl > div.hot dt{color:#fde68a}
.cmp-card dl > div.hot dd{color:var(--text); font-weight:700}
.cmp-card dl > div.neg dd{color:var(--text-faint)}
/* comparison table preview lightbox */
.cmp-lightbox{position:fixed; inset:0; z-index:91; display:none; flex-direction:column; align-items:center; justify-content:center; padding:56px 20px 52px; background:rgba(4,5,10,.88); backdrop-filter:blur(10px) saturate(1.1)}
.cmp-lightbox.open{display:flex}
.cmp-lightbox-stage{flex:0 1 auto; width:fit-content; max-width:min(96vw, 100%); max-height:100%; overflow:auto; margin:0; border:1px solid var(--border-strong); border-radius:6px; background:#0a0a0a; box-shadow:0 40px 100px rgba(0,0,0,.7); -webkit-overflow-scrolling:touch}
.cmp-lightbox-sheet{padding:22px 24px 20px; width:max-content; min-width:min(920px, calc(96vw - 48px)); margin:0 auto}
.cmp-lightbox-sheet .fit-kicker,
.cmp-lightbox-sheet .cmp-preview-kicker{font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:#fde68a; font-weight:700; margin:0 0 6px}
.cmp-lightbox-sheet h3{margin:0 0 4px; font-size:1.15rem; line-height:1.25; color:var(--text)}
.cmp-lightbox-sheet .cmp-preview-sub{margin:0 0 14px; font-size:.9rem; color:var(--text-dim); line-height:1.45; max-width:52rem}
.cmp-lightbox-sheet .cmp-scroll{overflow:visible; border:1px solid var(--border); border-radius:6px; background:rgba(0,0,0,.18)}
.cmp-lightbox-sheet .cmp{min-width:920px; display:table}
.cmp-lightbox-sheet .cmp thead{display:table-header-group}
.cmp-lightbox-sheet .cmp tbody{display:table-row-group}
.cmp-lightbox-sheet .cmp tr{display:table-row}
.cmp-lightbox-sheet .cmp th,
.cmp-lightbox-sheet .cmp td{display:table-cell; text-align:left}
.cmp-lightbox-sheet .cmp tr:not(.grp) td.cap{display:table-cell; font-weight:inherit; font-size:inherit; border-bottom:1px solid var(--border-soft); background:transparent}
.cmp-lightbox-sheet .cmp tr:not(.grp) td:not(.cap)::before{content:none}
.cmp-lightbox-sheet .cmp tr:not(.grp) td:not(.cap){text-align:left; justify-content:flex-start}
.cmp-lightbox-caption{position:fixed; bottom:18px; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:.7rem; color:var(--text-dim); background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.12); padding:7px 12px; border-radius:4px; backdrop-filter:blur(8px); text-align:center; max-width:90vw}
.cmp-lightbox-close{position:fixed; top:18px; right:18px; width:40px; height:40px; display:grid; place-items:center; border-radius:4px; background:rgba(255,255,255,.08); border:1px solid var(--border); color:var(--text); cursor:pointer; font-size:1.1rem; z-index:1}
.cmp-lightbox-close:hover{background:rgba(255,255,255,.12)}
.lightbox-caption a{color:#fde68a; text-decoration:underline; margin-left:8px}
.lightbox-caption a:hover{color:#fff}
@media (max-width:720px){
  html.motion .for-everyone{opacity:1; transition:none}
  .fit-hint-desktop{display:none}
  .fit-hint-mobile{display:inline}
  .fit-toolbar{align-items:flex-start}
  .fit-wrap.has-cmp-cards .cmp-scroll{display:none}
  .fit-wrap.has-cmp-cards .cmp-cards{display:flex}
}
@media (max-width:860px){
  .download-grid{grid-template-columns:1fr}
  .dl-col{border-right:0; border-bottom:1px solid var(--border-soft)}
  .dl-col:last-child{border-bottom:0}
  .fit-wrap{padding:14px}
  .codemap-grid{grid-template-columns:1fr}
  .eng-head,.eng-row{grid-template-columns:1fr 1fr; gap:8px}
  .eng-head{ display:none}
  .depth-row{grid-template-columns:1fr auto; gap:6px}
  .depth-meta{grid-column:1 / -1}
  .recipe-quadrants{grid-template-columns:1fr; grid-template-rows:auto; gap:2px}
  .os-grid{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
  .announce-inner{font-size:.78rem}
  .announce-arrav{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .tape-track{animation:none}
  .loop-pulse{display:none}
  .live i{animation:none}
}