/* SPDX-License-Identifier: Apache-2.0 */
/* SPDX-FileCopyrightText: 2026 Signal Slot, Inc. */
/* YakoGL website: one stylesheet, no build step, no external resources.
   Light by default, dark through prefers-color-scheme. */

:root {
  --bg: #fbfaf7;
  --bg-2: #f1eee7;
  --fg: #1b1d22;
  --muted: #5a606a;
  --line: #dcd8cf;
  --accent: #23706a;
  --accent-2: #6a4fb3;
  --code-bg: #efece5;
  --pass: #1f7a3d;
  --warn: #8a5a00;
  --fail: #b3261e;
  --info: #3d5a80;
  --pass-bg: #e6f3ea;
  --warn-bg: #fbf0d9;
  --fail-bg: #fbe5e3;
  --info-bg: #e7edf5;
  --paper: #f1eee7;
  --night: #0e0f13;
  --night-2: #17191f;
  --night-text: #ebe8e2;
  --night-mute: #9fa3ac;
  --night-line: #2c2f36;
  --nacre-1: #5fc4b6;
  --nacre-2: #9d86ea;
  --nacre-3: #eaa6c0;
  --nacre-4: #e6cf8f;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121418;
    --bg-2: #1a1d23;
    --fg: #e7e5e0;
    --muted: #a0a5ad;
    --line: #2f333a;
    --accent: #6cc7bb;
    --accent-2: #a995ef;
    --code-bg: #1d2027;
    --pass: #6fcf8e;
    --warn: #f0c062;
    --fail: #ff8a80;
    --info: #9ab8e0;
    --pass-bg: #16261b;
    --warn-bg: #2a2415;
    --fail-bg: #2c1817;
    --info-bg: #182231;
    --paper: #16181d;
    --night: #08090b;
    --night-2: #111318;
    --night-line: #262930;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  overflow-wrap: break-word;
}
img, svg, canvas { max-width: 100%; }
a { color: var(--accent); }
a:hover { color: var(--accent-2); }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

.wrap { max-width: 960px; margin: 0 auto; padding: 0 16px; }

/* Header */
.site-header { border-bottom: 1px solid var(--line); background: var(--bg); }
.site-header .wrap {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px;
  padding-top: 14px; padding-bottom: 14px;
}
.brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 1.2rem; color: var(--fg); text-decoration: none;
}
.brand img { width: 24px; height: 24px; }
.site-nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.site-nav a { text-decoration: none; color: var(--muted); }
.site-nav a:hover { color: var(--accent); }
.site-nav a[aria-current="page"] { color: var(--fg); font-weight: 600; }

.cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.button {
  display: inline-block; padding: 9px 16px; border-radius: 6px;
  border: 1px solid var(--accent); color: var(--accent); text-decoration: none; font-weight: 600;
  background: var(--bg);
}
.button.primary { background: var(--accent); color: var(--bg); }
.button:hover { filter: brightness(1.08); }
.button.primary:hover { color: var(--bg); }

/* Text */
main { padding-bottom: 24px; }
h1 { font-size: 1.9rem; line-height: 1.25; margin: 32px 0 10px; }
h2 { font-size: 1.4rem; line-height: 1.3; margin: 44px 0 10px; }
h3 { font-size: 1.1rem; margin: 24px 0 6px; }
p.lead { font-size: 1.12rem; color: var(--muted); margin-top: 0; }
.muted { color: var(--muted); }
code, pre, kbd { font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 0.9em; }
code { background: var(--code-bg); padding: 1px 4px; border-radius: 4px; }
pre {
  background: var(--code-bg); padding: 12px 14px; border-radius: 6px;
  overflow-x: auto; line-height: 1.5; font-size: 0.88rem;
}
pre code { background: none; padding: 0; }
ul, ol { padding-left: 1.4em; }
li { margin: 4px 0; }

/* Tables: always inside .scroll, so a phone never scrolls the page sideways. */
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 8px 0 16px; }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
th, td { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
thead th { font-size: 0.85rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
tbody th { font-weight: 600; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.status-table { min-width: 680px; }
.status-table tbody th { width: 17%; }
.status-table td.prov { width: 30%; }
.unit { color: var(--muted); font-size: 0.9rem; }
.fnote { color: var(--muted); font-size: 0.85rem; margin-top: 4px; }

/* Provenance: visible, unobtrusive. */
.prov { color: var(--muted); font-size: 0.8rem; line-height: 1.45; }
.prov code { font-size: 0.95em; }
.dag { margin-left: 1px; cursor: help; }
.unv {
  color: var(--warn); font-weight: 600; font-size: 0.78rem;
  border: 1px solid currentColor; border-radius: 3px; padding: 0 3px; cursor: help;
}

/* Status colours */
.badge {
  display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; padding: 1px 6px; border-radius: 3px; vertical-align: 1px;
}
.st-pass .badge { color: var(--pass); background: var(--pass-bg); }
.st-warn .badge { color: var(--warn); background: var(--warn-bg); }
.st-fail .badge { color: var(--fail); background: var(--fail-bg); }
.st-info .badge { color: var(--info); background: var(--info-bg); }

/* Cards and tiles */
.cards, .tiles {
  display: grid; gap: 14px; margin: 12px 0 8px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.card, .tile { border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; background: var(--bg-2); }
.card h3 { margin: 0 0 4px; }
.card p { margin: 6px 0; }
.card dl { margin: 6px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: 0.92rem; }
.card dt { color: var(--muted); }
.card dd { margin: 0; }
.tile { border-top: 3px solid var(--line); }
.tile.st-pass { border-top-color: var(--pass); }
.tile.st-warn { border-top-color: var(--warn); }
.tile.st-fail { border-top-color: var(--fail); }
.tile-board { font-weight: 600; }
.tile-gpu { color: var(--muted); font-weight: 400; font-size: 0.85rem; }
.tile-big { font-size: 1.9rem; font-weight: 700; line-height: 1.2; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.tile-sub { font-size: 0.92rem; margin-bottom: 8px; }

.note {
  border-left: 4px solid var(--warn); background: var(--warn-bg);
  padding: 10px 14px; margin: 16px 0; border-radius: 0 6px 6px 0;
}
.note p { margin: 4px 0; }
.js-only { display: none; }
.has-data .js-only { display: revert; }

/* Architecture diagram */
figure { margin: 16px 0; }
figure svg { display: block; width: 100%; height: auto; }
figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 6px; }
.dg-core { fill: var(--info-bg); stroke: var(--info); stroke-width: 1.5; }
.dg-be { fill: var(--pass-bg); stroke: var(--pass); stroke-width: 1.5; }
.dg-sh { fill: var(--warn-bg); stroke: var(--warn); stroke-width: 1.5; }
.dg-os { fill: var(--bg-2); stroke: var(--muted); stroke-width: 1.5; }
.dg-app { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 4; }
.dg-t { fill: var(--fg); font: 600 15px system-ui, sans-serif; }
.dg-s { fill: var(--muted); font: 12.5px system-ui, sans-serif; }
.dg-line { stroke: var(--muted); stroke-width: 1.5; fill: none; }
.dg-arrow { fill: var(--muted); }

/* Footer */
.site-footer { border-top: 1px solid var(--line); margin-top: 48px; color: var(--muted); font-size: 0.88rem; }
.site-footer .wrap { padding-top: 16px; padding-bottom: 32px; }
.site-footer p { margin: 4px 0; }

@media (max-width: 480px) {
  h2 { font-size: 1.25rem; }
  .tile-big { font-size: 1.6rem; }
}

/* Shared navigation and the presentation pages. */
:root { --display: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; --nacre: linear-gradient(100deg, var(--nacre-1), var(--nacre-2), var(--nacre-3), var(--nacre-4)); }
[hidden] { display: none !important; }
[id] { scroll-margin-top: 100px; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 16px; color: var(--bg); background: var(--fg); transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.site-header .wrap { justify-content: space-between; max-width: 1160px; min-height: 76px; }
.site-nav { gap: 8px 24px; font-size: 0.9rem; }
.home .wrap { max-width: 1160px; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.home main { padding-bottom: 0; }
.home .site-header { position: sticky; top: 0; z-index: 10; background: var(--bg); }
.eyebrow, .tag, .kicker { font: 600 0.69rem/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 15px; }
.home h2.display { font: 650 clamp(2rem, 3.5vw, 3rem)/1.12 var(--display); letter-spacing: -0.045em; margin: 0 0 20px; text-wrap: balance; }
.small { font-size: 0.84rem; }
.text-link, .text-links a, .text-link-light { font-weight: 650; text-underline-offset: 5px; }
.text-links { display: flex; flex-wrap: wrap; gap: 12px 26px; margin: 24px 0; }
.home .button { padding: 12px 19px; border-radius: 5px; border-color: var(--fg); color: var(--fg); background: transparent; font-size: 0.9rem; }
.home .button.primary { color: var(--bg); background: var(--fg); }
.home .button:hover { color: var(--bg); background: var(--fg); }
.home .button.primary:hover { background: var(--accent); border-color: var(--accent); }
.h-hero .wrap { padding-top: 64px; padding-bottom: 0; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.95fr; align-items: center; gap: 48px; }
.h-title { font: 650 clamp(3rem, 5.5vw, 4.7rem)/1.06 var(--display); letter-spacing: -0.06em; margin: 18px 0 26px; }
.iridescent { color: var(--accent); background: linear-gradient(100deg, #26796d, #7860b6 68%, #b17189); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.h-lead { font-size: 1.09rem; line-height: 1.75; max-width: 48ch; color: var(--muted); }
.hero-copy .cta { gap: 10px; margin-top: 28px; }
.hero-footnote { font-size: 0.78rem; color: var(--muted); margin: 20px 0 0; }
.hero-footnote code { background: transparent; padding: 0; font-size: 1em; }
.hero-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 28px; align-items: center; border-top: 1px solid var(--line); padding: 25px 0 27px; margin-top: 54px; font-size: 0.85rem; }
.hero-bottom > span { color: var(--muted); font-size: 0.74rem; }
.hero-bottom a { color: var(--fg); text-decoration: none; font-weight: 600; }
.hero-bottom a:hover { color: var(--accent); text-decoration: underline; }
.stack-figure { margin: 0; padding: 29px; border: 1px solid #353747; border-radius: 16px; background: radial-gradient(ellipse at 90% 0%, #283439 0, transparent 50%), radial-gradient(ellipse at 0% 100%, #2b223a 0, transparent 55%), #10151c; color: #f3f2f6; box-shadow: 0 18px 40px #15202712; }
.stack-label { font: 500 0.64rem/1.4 ui-monospace, monospace; letter-spacing: 0.17em; text-transform: uppercase; color: #b0b4c1; margin-bottom: 22px; }
.stack-app { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 15px 10px; border: 1px solid #41454f; border-radius: 7px; background: #ffffff04; text-align: center; }
.stack-app > span { color: #aab0bf; font-size: 0.73rem; }
.stack-app strong { font-size: 0.86rem; font-weight: 500; }
.stack-fork { position: relative; width: 50%; height: 26px; margin: 0 auto; border-bottom: 1px solid #727c96; }
.stack-fork::before { content: ""; position: absolute; left: 50%; top: 0; height: 14px; border-left: 1px solid #85bebc; }
.stack-fork::after { content: ""; position: absolute; left: 0; right: 0; bottom: -13px; height: 13px; border-left: 1px solid #727c96; border-right: 1px solid #727c96; }
.stack-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.stack-path { display: flex; min-width: 0; min-height: 125px; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 16px 10px; border: 1px solid #545967; border-radius: 8px; text-align: center; }
.stack-path strong { font: 600 1.7rem/1.1 var(--display); letter-spacing: -0.04em; }
.stack-path strong span { color: #a29cdb; }
.stack-path > span:not(.stack-tag) { color: #c3c9d3; font-size: 0.67rem; line-height: 1.45; }
.stack-path .stack-tag { color: #aab0bf; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.56rem; }
.stack-cpu { background: linear-gradient(145deg, #78b5c012, #ffffff02); }
.stack-gpu { background: linear-gradient(145deg, #77cab620, #ad91da20); border-color: #8b9fbd; }
.stack-down { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stack-down span { width: 1px; height: 20px; margin: 0 auto; background: linear-gradient(#727c96, #85bebc); }
.stack-hardware { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 13px; border: 1px solid #687080; border-radius: 10px; background: #ffffff03; }
.stack-hw { display: flex; min-width: 0; min-height: 92px; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 13px 8px; border: 1px solid #4d5260; border-radius: 8px; background: #ffffff04; text-align: center; }
.stack-hw > strong { font: 650 1rem/1.1 ui-monospace, monospace; letter-spacing: 0.08em; }
.stack-hw > span { color: #aab0bf; font-size: 0.65rem; }
.stack-hw-gpu { border-color: #6e6781; }
.stack-gpus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; width: 100%; margin-top: 2px; }
.stack-gpus > span { border: 1px solid #4d485d; border-radius: 4px; padding: 6px 3px; text-align: center; font-size: 0.56rem; line-height: 1.25; color: #dedbe9; background: #ffffff04; }
.stack-gpus > span.wip { border-style: dashed; color: #f0c062; }
.stack-soc-label small { color: #f0c062; font: 600 0.54rem/1 ui-monospace, monospace; letter-spacing: 0.08em; }
.stack-soc-label { grid-column: 1 / -1; display: flex; justify-content: center; gap: 9px; align-items: baseline; padding-top: 1px; color: #d5d9e1; }
.stack-soc-label span { color: #aab0bf; font: 600 0.56rem/1.4 ui-monospace, monospace; letter-spacing: 0.16em; text-transform: uppercase; }
.stack-soc-label strong { font-size: 0.67rem; font-weight: 600; }
.stack-figure figcaption { color: #a6adbb; font-size: 0.65rem; line-height: 1.55; margin-top: 18px; text-align: center; }
.section .wrap, .band .wrap { padding-top: 78px; padding-bottom: 78px; }
.section-paper { background: var(--paper); }
.section-heading { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: end; margin-bottom: 30px; }
.section-heading > p { color: var(--muted); margin: 0 0 20px; max-width: 50ch; }
.split, .demo-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 68px; align-items: start; }
.section-head > p { max-width: 47ch; }
.demo-layout { grid-template-columns: 1fr 1fr; }
.demo-copy > p:first-child { margin-top: 0; font-size: 1.03rem; }
.scope-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 36px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.scope-grid > div { padding: 24px 26px; border-left: 1px solid var(--line); }
.scope-grid > div:first-child { border-left: 0; padding-left: 0; }
.scope-grid > div:last-child { padding-right: 0; }
.scope-grid strong { display: block; font-size: 1rem; margin-bottom: 7px; }
.scope-grid p { margin: 0; color: var(--muted); font-size: 0.84rem; }
.scope-grid .tag { margin-bottom: 7px; font-size: 0.6rem; }
.scope-grid b { color: var(--fg); font-weight: 650; }
.board-list { border-top: 1px solid var(--line); }
.board-row { display: grid; grid-template-columns: 34px minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--line); }
.board-index { font: 500 0.78rem ui-monospace, monospace; color: var(--muted); }
.board-row h3 { font-size: 1.16rem; margin: 2px 0 5px; }
.board-row p { margin: 0; }
.board-row .tag { font-size: 0.61rem; margin: 0 0 3px; }
.board-gpu, .board-detail { font-size: 0.82rem; }
.board-gpu { color: var(--muted); }
.board-detail p + p { margin-top: 5px; }
.board-cta { font-size: 0.81rem; font-weight: 650; white-space: nowrap; text-decoration: none; }
.board-cta:hover { text-decoration: underline; }
.board-note { color: var(--muted); font-size: 0.84rem; max-width: 88ch; margin: 26px 0 0; }
.board-note strong { color: var(--fg); }
.board-row-wip .tag { color: var(--warn); }
.board-row-wip { background: linear-gradient(90deg, transparent, var(--warn-bg) 50%, transparent); }
.band { background: var(--night); color: var(--night-text); }
.band a { color: var(--nacre-1); }
.band a:hover { color: var(--nacre-3); }
.band .eyebrow, .band .prov, .band .muted { color: #aeb3be; }
.band .section-heading > p { color: #c1c5cd; }
.band code { background: var(--night-2); color: var(--night-text); }
.band .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--night-line); }
.band .tile { background: transparent; border: 0; border-left: 1px solid var(--night-line); border-radius: 0; padding: 24px; }
.band .tile:first-child { border-left: 0; padding-left: 0; }
.band .tile-gpu { display: block; color: #aeb3be; font-size: 0.74rem; margin-top: 4px; }
.band .tile-big { font: 600 3.2rem/1.15 var(--display); letter-spacing: -0.04em; margin: 20px 0 8px; color: var(--nacre-1); }
.band .tile-sub { color: #c1c5cd; margin-bottom: 15px; }
.band .prov { font-size: 0.72rem; }
.proof-caption { color: #b7bcc6; font-size: 0.8rem; max-width: 89ch; margin: 28px 0 24px; }
.reasons { list-style: none; margin: 0; padding: 0; }
.reasons li { display: grid; grid-template-columns: 42px 1fr; gap: 20px; border-top: 1px solid var(--line); padding: 24px 0; margin: 0; }
.reasons li:first-child { border-top: 0; padding-top: 0; }
.reasons .n { font: 500 1.05rem/1.7 ui-monospace, monospace; color: var(--muted); }
.reasons h3 { font-size: 1.14rem; line-height: 1.35; margin: 0 0 10px; }
.reasons p { margin: 0; color: var(--muted); }
.reasons .tag { margin-bottom: 6px; }
.doclist { list-style: none; margin: 0; padding: 0; }
.doclist li { display: grid; grid-template-columns: minmax(9rem, 1fr) 2fr; gap: 20px; border-top: 1px solid var(--line); padding: 18px 0; margin: 0; }
.doclist li:first-child { padding-top: 0; border-top: 0; }
.doclist a { font-weight: 600; text-decoration: none; }
.doclist a:hover { text-decoration: underline; }
.doclist span { color: var(--muted); font-size: 0.87rem; }
.about-strip { background: var(--night); color: var(--night-text); }
.about-grid { display: grid; grid-template-columns: 1fr 1.8fr; gap: 40px; align-items: center; padding-top: 60px; padding-bottom: 60px; }
.about-name { color: #bbb3ca; font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif CJK JP", serif; font-size: clamp(2.6rem, 6vw, 4.5rem); margin: 0; letter-spacing: 0.15em; }
.about-grid h2 { font-size: 1.05rem; margin: 0 0 10px; }
.about-grid p:not(.about-name) { font-size: 0.85rem; color: #b8bdc7; margin: 8px 0; }
.about-strip a, .home .site-footer a { color: var(--nacre-1); }
.home .site-footer { background: var(--night); color: #aeb3be; margin-top: 0; border-top-color: var(--night-line); font-size: 0.76rem; }
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 30px; }
.page-intro { padding-top: 52px; padding-bottom: 30px; }
.page-intro h1 { font: 600 clamp(2.4rem, 4.5vw, 3.9rem)/1.15 var(--display); letter-spacing: -0.045em; margin: 14px 0 20px; }
.technical-page .section .wrap { padding-top: 58px; padding-bottom: 58px; }
.technical-page .sub { font-weight: 600; }
.board-picker { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; padding: 20px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; margin: 22px 0; }
.board-picker label { font-weight: 650; }
.board-picker select { font: inherit; color: var(--fg); background: var(--bg); padding: 8px 12px; border: 1px solid var(--muted); border-radius: 5px; max-width: 100%; }
.board-picker p { flex-basis: 100%; margin: 0; font-size: 0.85rem; color: var(--muted); }
.try-nav { display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: 0.9rem; }
@media (prefers-color-scheme: dark) {
  .iridescent { background-image: linear-gradient(100deg, #7ad7c7, #b2a2f1 65%, #e3a8bf); }
}
@media (max-width: 1000px) {
  .hero-grid { gap: 28px; }
  .h-title { font-size: clamp(2.7rem, 5.5vw, 4.7rem); }
  .stack-figure { padding: 23px; }
  .board-row { grid-template-columns: 24px 1.2fr 1fr; gap: 18px; }
  .board-cta { grid-column: 2 / -1; }
}
@media (max-width: 760px) {
  [id] { scroll-margin-top: 145px; }
  .site-header .wrap { min-height: 0; gap: 12px; padding-top: 14px; padding-bottom: 14px; }
  .site-nav { gap: 8px 18px; font-size: 0.82rem; }
  .home .wrap { padding-left: 22px; padding-right: 22px; }
  .hero-grid, .split, .demo-layout, .section-heading { grid-template-columns: minmax(0, 1fr); }
  .scope-grid { grid-template-columns: minmax(0, 1fr); }
  .scope-grid > div, .scope-grid > div:first-child, .scope-grid > div:last-child { border-left: 0; border-top: 1px solid var(--line); padding: 20px 0; }
  .scope-grid > div:first-child { border-top: 0; }
  .hero-grid { gap: 35px; }
  .h-hero .wrap { padding-top: 35px; }
  .h-title { font-size: clamp(2.9rem, 9vw, 4rem); }
  .h-lead { max-width: 54ch; }
  .stack-figure { max-width: 500px; width: 100%; }
  .hero-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 36px; }
  .hero-bottom > span { grid-column: 1 / -1; }
  .section .wrap, .band .wrap { padding-top: 53px; padding-bottom: 53px; }
  .section-heading { gap: 0; }
  .split, .demo-layout { gap: 26px; }
  .board-row { grid-template-columns: 20px minmax(0, 1fr); gap: 15px; }
  .board-detail, .board-cta { grid-column: 2; }
  .band .tiles { grid-template-columns: minmax(0, 1fr); }
  .band .tile, .band .tile:first-child { border-left: 0; border-top: 1px solid var(--night-line); padding: 25px 0; }
  .band .tile:first-child { border-top: 0; }
  .band .tile-big { margin-top: 12px; font-size: 2.8rem; }
  .about-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .reasons li { grid-template-columns: 25px 1fr; gap: 15px; }
}
@media (max-width: 450px) {
  .site-nav { gap: 8px 14px; }
  .hero-copy .cta { flex-direction: column; align-items: stretch; }
  .hero-copy .button { text-align: center; }
  .hero-bottom { grid-template-columns: 1fr; }
  .doclist li { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .stack-figure { padding: 21px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }