/* Strata website: plain CSS, dark only (Graphite). Contrast of the token pairs is checked by tests/site-assets/check-site.js. */
/* Manrope (SIL OFL 1.1, assets/fonts/OFL-Manrope.txt) and Geist Mono for code (assets/fonts/OFL.txt): self-hosted variable fonts, system fonts as the fallback */
@font-face { font-family: "Manrope"; src: url("assets/fonts/Manrope-Variable.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("assets/fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  color-scheme: dark;
  /* Graphite (refero.design style fd36bae9): Obsidian canvas, Charcoal surfaces, Graphite borders, Cloud white text, Signal Orange links, Paper White conversion buttons. Dark only. */
  --bg: #0a0a0a; --bg2: #171717; --fg: #fafafa; --muted: #a1a1a1; --line: #262626; --line2: #464646;
  --accent: #e5e5e5; --accent-fg: #171717; --accent-soft: #171717; --accent-text: #ff8833;
  --good: #6fd08a; --bad: #ff8a80;
  --shadow: rgba(0, 0, 0, .3) 0 8px 10px 0, 0 30px 80px -20px rgba(0, 0, 0, .8);
  --c1: #2e73fc; --c2: #ff8833; --c3: #6fd08a; --c4: #ffb931; --c5: #5ad1c8; --c6: #ff8ab3;
  --win-bar: #171717; --win-bar-fg: #a1a1a1; --win-bg: #0a0a0a;
  --code-bg: #000000; --code-fg: #fafafa; --code-muted: #a1a1a1;
  --font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* type scale (ratio 1.25) and spacing scale */
  --t-xs: .8rem; --t-sm: .9rem; --t-base: 1.0625rem; --t-md: 1.25rem; --t-lg: 1.5625rem; --t-xl: 1.95rem; --t-2xl: 2.44rem; --t-3xl: 3.05rem;
  --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 104px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: var(--bg); color: var(--fg); font: var(--t-base)/1.65 var(--font); -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
img, video, svg { max-width: 100%; }
img, video { height: auto; display: block; }
a { color: var(--accent-text); text-underline-offset: 3px; }
code { font: .88em var(--mono); background: var(--bg2); border: 1px solid var(--line); border-radius: 5px; padding: .05em .35em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--accent); color: var(--accent-fg); padding: 8px 14px; border-radius: 8px; z-index: 60; }
.skip:focus { top: 10px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--s5); }
.wrap.narrow { max-width: 800px; }
.wrap.narrow-l { max-width: 980px; }
section { padding: var(--s9) 0; }
.band { background: var(--bg2); border-block: 1px solid var(--line); }
h1, h2, h3 { line-height: 1.12; letter-spacing: -.025em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 5.4vw, var(--t-3xl)); max-width: 16em; margin-inline: auto; letter-spacing: -1.5px; font-weight: 500; line-height: 1.05; }
h1 em { font-style: normal; background: linear-gradient(90deg, #ffb931 10%, #fff 45%, #2e73fc 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
h2 { font-size: clamp(1.7rem, 3.6vw, var(--t-2xl)); text-align: center; font-weight: 500; letter-spacing: -.02em; }
h3 { font-size: var(--t-md); letter-spacing: 0; font-weight: 600; }
.sub { text-align: center; color: var(--muted); max-width: 58ch; margin: -.2em auto var(--s7); font-size: var(--t-md); line-height: 1.5; text-wrap: balance; }
.note { color: var(--muted); font-size: var(--t-sm); }
.note.center { text-align: center; max-width: 64ch; margin-inline: auto; }
.kicker { margin: 0 0 var(--s2); font-size: var(--t-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent-text); }

/* hero background: a quiet sketch of modelling (tables drawn in), lineage (data flowing along the edges) and governance (shield badges pulsing); decoration only */
.hero > .wrap { position: relative; z-index: 1; }
.lineage { position: absolute; left: 0; top: 0; width: 100%; height: 520px; z-index: 0; pointer-events: none; opacity: .55;
  -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 98%); mask-image: linear-gradient(to bottom, #000 35%, transparent 98%); }
.lineage .n rect { fill: var(--bg); stroke: var(--line); stroke-width: 1.2; }
.lineage .n .hd { stroke: none; opacity: .75; fill: var(--c1); }
.lineage .n-b .hd { fill: var(--c3); } .lineage .n-c .hd, .lineage .n-d .hd { fill: var(--c2); } .lineage .n-e .hd { fill: var(--c4); }
.lineage .n .ln { fill: none; stroke: var(--muted); stroke-width: 2.2; stroke-linecap: round; opacity: .35; }
.lineage .edge { fill: none; stroke: var(--line2); stroke-width: 1.4; opacity: .45; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ln-draw 1.6s .4s ease-out forwards; }
.lineage .dot { fill: var(--c2); offset-rotate: 0deg; opacity: 0; animation: ln-flow 5.5s 2s linear infinite; }
.lineage .d0 { offset-path: path('M128 104 C 145 104, 145 234, 160 234'); } .lineage .d1 { offset-path: path('M128 334 C 145 334, 145 234, 160 234'); }
.lineage .d2 { offset-path: path('M1008 129 C 1035 129, 1035 324, 1050 324'); } .lineage .d3 { offset-path: path('M988 364 C 1020 364, 1020 324, 1050 324'); } .lineage .d4 { offset-path: path('M944 163 C 944 230, 924 250, 924 330'); }
.lineage .d1 { animation-delay: 2.8s; } .lineage .d2 { animation-delay: 3.6s; } .lineage .d3 { animation-delay: 4.4s; } .lineage .d4 { animation-delay: 3.2s; }
.lineage .n { opacity: 0; animation: ln-in .8s ease-out forwards; }
.lineage .n-a { animation-delay: .05s; } .lineage .n-b { animation-delay: .2s; } .lineage .n-c { animation-delay: .5s; }
.lineage .n-d { animation-delay: .3s; } .lineage .n-e { animation-delay: .6s; } .lineage .n-f { animation-delay: .45s; }
.lineage .badge { opacity: 0; animation: ln-in .6s 1.8s ease-out forwards; }
.lineage .badge circle { fill: var(--bg); stroke: var(--c3); stroke-width: 1.4; transform-box: fill-box; transform-origin: center; animation: ln-pulse 4.5s 2.4s ease-in-out infinite; }
.lineage .badge path { fill: var(--c3); }
.lineage .b2 circle { animation-delay: 3.4s; } .lineage .b3 circle { animation-delay: 4.2s; } .lineage .b4 circle { animation-delay: 5s; }
@keyframes ln-draw { to { stroke-dashoffset: 0; } }
@keyframes ln-in { from { opacity: 0; } to { opacity: 1; } } /* opacity only: the nodes and badges are placed with a transform attribute */
@keyframes ln-flow { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: .9; } 90% { opacity: .9; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes ln-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@media (max-width: 860px) { .lineage { opacity: .28; } }
.hero.off .lineage * { animation-play-state: paused; } /* site.js: nothing animates while the hero is off screen */

/* navigation */
.nav { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid var(--line); }
.nav-in { display: flex; align-items: center; justify-content: space-between; height: 58px; }
.nav nav { display: flex; align-items: center; gap: var(--s5); }
.nav nav a:not(.btn) { color: var(--muted); text-decoration: none; font-size: var(--t-sm); font-weight: 500; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav nav a:not(.btn):hover, .nav nav a[aria-current] { color: var(--fg); border-bottom-color: var(--accent); }
.nav nav a, .brand { white-space: nowrap; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; font-weight: 750; font-size: 1.15rem; letter-spacing: -.02em; }
.btn { display: inline-block; padding: 8px 16px; border-radius: 8px; font-weight: 500; text-decoration: none; border: 1px solid transparent; transition: transform .15s, background-color .15s, box-shadow .15s; cursor: pointer; }
.btn.small { padding: 6px 14px; font-size: var(--t-sm); }
.btn.big { padding: 12px 24px; font-size: 1rem; }
.btn.primary { background: var(--accent); color: var(--accent-fg); border-color: rgba(255, 255, 255, .1); box-shadow: #fff 0 1px 0 0 inset, rgba(0, 0, 0, .1) 0 -2px 6px 0 inset; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { border-color: var(--line2); color: var(--fg); background: var(--line); }
.btn.ghost:hover { border-color: var(--muted); color: var(--fg); }

/* hero */
.hero { text-align: center; padding: var(--s8) 0 var(--s8); position: relative; overflow: hidden; background:
  radial-gradient(55% 45% at 12% 0%, color-mix(in srgb, var(--c1) 12%, transparent), transparent),
  radial-gradient(45% 40% at 92% 4%, color-mix(in srgb, var(--c4) 9%, transparent), transparent); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 var(--s4); padding: 5px 14px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--bg) 70%, transparent); font-size: var(--t-xs); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c3); }
.lead { font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--muted); max-width: 38em; margin: var(--s4) auto var(--s5); line-height: 1.55; }
.cta { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; margin: 0 0 var(--s7); }
.stats { list-style: none; padding: 0; margin: var(--s7) auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); max-width: 1000px; text-align: left; }
.stats li { border-top: 1px solid var(--line); padding-top: var(--s3); }
.stats b { display: block; font-size: var(--t-xl); line-height: 1.1; letter-spacing: -.03em; font-weight: 800; }
.stats span { display: block; margin-top: 4px; font-size: var(--t-sm); color: var(--muted); line-height: 1.4; }

/* the product window: a title bar around every clip */
.win { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--win-bg); position: relative; }
.win-bar { display: flex; align-items: center; gap: var(--s3); height: 40px; padding: 0 var(--s3); background: var(--win-bar); border-bottom: 1px solid var(--line); color: var(--win-bar-fg); font-size: var(--t-xs); }
.dots { display: flex; gap: 7px; flex: none; }
.dots i { width: 11px; height: 11px; border-radius: 50%; background: #f38ba8; }
.dots i:nth-child(2) { background: #f9e2af; }
.dots i:nth-child(3) { background: #a6e3a1; }
.win-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-weight: 500; }
.win-title b { margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-weight: 650; }
.win-tools { display: flex; gap: 6px; flex: none; }
.win-tools button { border: 1px solid var(--line); background: var(--bg); color: var(--fg); font: 600 12px var(--font); padding: 4px 10px; border-radius: 999px; cursor: pointer; }
.win-tools button:hover { border-color: var(--accent); color: var(--accent-text); }
.win video { width: 100%; aspect-ratio: 5 / 3; object-fit: cover; background: var(--win-bg); cursor: zoom-in; }
.hero-win { max-width: 1120px; margin: 0 auto; isolation: isolate; overflow: visible; }
.hero-win::before { content: ""; position: absolute; inset: 8% -4% -10%; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--c1) 35%, transparent), transparent); filter: blur(40px); }
.hero-win > * { position: relative; }
.hero-win .win-bar { border-radius: 14px 14px 0 0; }
.hero-win video { border-radius: 0 0 14px 14px; }

/* the problem: before / after */
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); max-width: 1000px; margin: 0 auto; }
.vs { border-radius: 16px; padding: var(--s6); border: 1px solid var(--line); background: var(--bg); }
.vs h3 { font-size: var(--t-sm); letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--s4); }
.vs.today h3 { color: var(--bad); }
.vs.with { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); box-shadow: 0 16px 40px -20px color-mix(in srgb, var(--good) 50%, transparent); }
.vs.with h3 { color: var(--good); }
.vs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.vs li { display: grid; grid-template-columns: 22px 1fr; gap: var(--s3); line-height: 1.5; color: var(--muted); font-size: 1rem; }
.vs li b { color: var(--fg); font-weight: 650; }
.ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.vs .ic { width: 22px; height: 22px; margin-top: 2px; }
.vs.today .ic { color: var(--bad); }
.vs.with .ic { color: var(--good); }

/* how it works: tabs */
.tabs { background: var(--bg); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.tablist { display: flex; background: var(--bg2); border-bottom: 1px solid var(--line); }
.tablist button { flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--s3); padding: var(--s4) var(--s3); border: 0; border-bottom: 3px solid transparent; background: none; color: var(--muted); font: 650 var(--t-base) var(--font); cursor: pointer; }
.tablist button[aria-selected="true"] { color: var(--fg); background: var(--bg); border-bottom-color: var(--accent); }
.tablist button:hover { color: var(--fg); }
.tablist .n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-size: .85rem; font-weight: 800; }
.pans > [role="tabpanel"] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s6); padding: var(--s6); align-items: center; min-height: 250px; }
.pans > [hidden] { display: none; }
.pans h3 { font-size: var(--t-lg); }
.pans p { color: var(--muted); margin: 0; }
.pans .code { margin: 0; padding-right: var(--s5); }
.levels { display: flex; flex-wrap: wrap; gap: var(--s2); }
.lv { padding: 8px 16px; border-radius: 8px; font-weight: 650; font-size: var(--t-sm); border: 1px solid var(--line); border-left-width: 4px; background: var(--bg2); }
.lv-g { border-left-color: var(--c4); } .lv-d { border-left-color: var(--c3); } .lv-c { border-left-color: var(--c2); } .lv-l { border-left-color: var(--c5); } .lv-p { border-left-color: var(--c1); } .lv-s { border-left-color: var(--c6); }

/* feature rows */
.feat { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.6fr); gap: var(--s7); align-items: center; margin: var(--s8) 0 0; }
.feat.rev { grid-template-columns: minmax(0, 1.6fr) minmax(0, .72fr); }
.feat.rev .txt { order: 2; }
.feat.ai { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; margin-top: 0; }
.feat.ai .win { position: sticky; top: 84px; }
.feat h3 { font-size: var(--t-xl); font-weight: 600; }
.feat p { color: var(--muted); }
.feat .txt > p:not(.kicker):not(.note):first-of-type { font-size: 1.08rem; }

/* capabilities */
.caps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.caps li { border: 1px solid var(--line); border-radius: 14px; padding: var(--s5); background: var(--bg); transition: border-color .2s, transform .2s; }
.caps li:hover { border-color: var(--accent); transform: translateY(-2px); }
.caps .ic { width: 32px; height: 32px; padding: 6px; box-sizing: content-box; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); margin-bottom: var(--s3); }
.caps h3 { font-size: var(--t-base); margin: 0 0 4px; }
.caps p { margin: 0; color: var(--muted); font-size: var(--t-sm); line-height: 1.5; }

/* AI chart: rows of label, value and an inline SVG bar, one linear scale */
.chart { margin: 0 0 var(--s4); }
.chart figcaption { font-weight: 700; padding-bottom: var(--s3); }
.chart ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.chart li { display: grid; grid-template-columns: 1fr auto; column-gap: var(--s3); row-gap: 5px; align-items: baseline; font-size: var(--t-sm); }
.chart .lbl { color: var(--muted); }
.chart .lbl code { font-size: .92em; }
.chart b { font-variant-numeric: tabular-nums; font-size: 1.02rem; }
.chart .bar { grid-column: 1 / -1; width: 100%; height: 10px; display: block; background: var(--bg); border-radius: 5px; }
.chart .bar rect { fill: var(--accent); }
.chart .base .bar rect { fill: var(--muted); }
.chart li:last-child b { color: var(--good); }

/* works with */
.pills { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 0; margin: 0 0 var(--s5); }
.pills li { border: 1px solid var(--line); background: var(--bg); border-radius: 999px; padding: 8px 16px; font-weight: 600; font-size: var(--t-sm); }

/* install */
.install-tabs .pans > [role="tabpanel"] { align-items: start; }
.install-tabs h4 { margin: 0 0 var(--s2); font-size: var(--t-base); font-weight: 600; }
.install-tabs [id^="install-"], .install-tabs #npm-source { margin-bottom: var(--s4); }
.install-tabs .code { padding: 48px var(--s4) var(--s4); margin: 0 0 var(--s3); } /* the Copy button sits above the first line, not over a long one */
.install-tabs .mini { margin: var(--s3) 0 0; }
.soon { opacity: .6; } /* a route that is not published yet: its commands are shown, dimmed, and cannot be copied */
.soon .copy { display: none; }
.install-tabs .soon .code { padding-top: var(--s4); }
.center-h { text-align: center; margin: var(--s7) 0 var(--s3); font-size: var(--t-base); color: var(--muted); }
.tag { font: 650 .7rem var(--font); background: var(--accent-soft); color: var(--accent-text); border-radius: 999px; padding: 3px 9px; vertical-align: middle; margin-left: 6px; letter-spacing: .03em; }
.code { position: relative; margin: 1em 0; padding: 20px 88px 20px 22px; background: var(--code-bg); color: var(--code-fg); border-radius: 12px; font: .9rem/1.75 var(--mono); overflow-x: auto; border: 1px solid #262b36; }
.code code { background: none; border: 0; padding: 0; font: inherit; color: inherit; white-space: pre; }
.code .c { color: var(--code-muted); }
.copy { position: absolute; right: 10px; top: 10px; background: #313244; color: #cdd6f4; border: 1px solid #45475a; border-radius: 8px; padding: 6px 12px; font: 600 12px var(--font); cursor: pointer; }
.copy:hover { background: #45475a; }
.mini { color: var(--muted); padding-left: 1.2em; }
.mini li { margin: .35em 0; }

/* faq */
details { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; margin: 10px 0; padding: 0 var(--s5); }
summary { cursor: pointer; font-weight: 650; padding: 16px 0; }
details[open] summary { border-bottom: 1px solid var(--line); margin-bottom: 12px; }
details p { margin: 0 0 16px; color: var(--muted); }

footer { border-top: 1px solid var(--line); padding: var(--s7) 0 var(--s8); color: var(--muted); font-size: var(--t-sm); }
.foot { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.foot p { margin: 0; }

/* lightbox */
dialog#lightbox { border: 0; padding: 0; background: transparent; width: min(96vw, calc(90vh * 5 / 3)); max-width: none; max-height: none; overflow: visible; }
dialog#lightbox::backdrop { background: rgba(17, 17, 27, .88); backdrop-filter: blur(4px); }
#lightbox video { width: 100%; aspect-ratio: 5 / 3; border-radius: 12px; background: #000; box-shadow: 0 30px 90px rgba(0, 0, 0, .7); cursor: default; }
.lb-close { position: absolute; right: 0; top: -46px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: rgba(20, 22, 28, .8); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.lb-close:hover { background: #000; }

/* scroll reveal: only armed by site.js for blocks below the fold, never with reduced motion */
.rv-hide { opacity: 0; transform: translateY(18px); }
.rv-in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }

@media (max-width: 1120px) { .hide-m { display: none; } .nav nav { gap: var(--s4); } } /* the header has ten items: AI-ready and FAQ wait for a wider screen (the footer has them) */
@media (max-width: 960px) {
  section { padding: var(--s8) 0; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .caps { grid-template-columns: repeat(2, 1fr); }
  .versus, .pans > [role="tabpanel"] { grid-template-columns: minmax(0, 1fr); } /* minmax: a long command line scrolls inside its block instead of widening the column */
  .feat, .feat.rev, .feat.ai { grid-template-columns: 1fr; gap: var(--s5); margin-top: var(--s7); }
  .feat.rev .txt { order: 0; }
  .feat.ai .win { position: static; }
  .hide-s { display: none; }
}
@media (max-width: 600px) {
  .wrap { padding: 0 var(--s4); }
  section { padding: var(--s7) 0; }
  .hero { padding-top: var(--s6); }
  .hide-xs { display: none; }
  .nav nav { gap: var(--s3); }
  .brand { font-size: .98rem; gap: 8px; }
  .eyebrow { font-size: .68rem; letter-spacing: .03em; text-align: left; }
  .btn.big { padding: 12px 22px; font-size: 1rem; }
  .caps { grid-template-columns: 1fr; }
  .tablist button { font-size: var(--t-sm); padding: var(--s3) 4px; flex-direction: column; gap: 4px; }
  .pans > [role="tabpanel"] { padding: var(--s4); }
  .win-title { display: none; }
  .win-bar { justify-content: space-between; }
  .code { padding-right: var(--s4); padding-top: 52px; font-size: .8rem; }
  .pans .code { padding-top: var(--s4); }
  .install-tabs .code { padding-top: 48px; }
  .install-tabs .soon .code { padding-top: var(--s4); }
  .stats b { font-size: var(--t-lg); }
  .vs { padding: var(--s4); }
}
@media (prefers-reduced-motion: reduce) {
  .lineage .edge { stroke-dashoffset: 0; } .lineage .n, .lineage .badge { opacity: 1; } .lineage .dot { display: none; }
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  .rv-hide { opacity: 1; transform: none; }
}
/* code: no ligatures (Geist Mono would join "--" into a dash); a code block inside a clip window fills it */
code, pre, .win-title { font-variant-ligatures: none; }
.win > .code { margin: 0; border: 0; border-radius: 0 0 14px 14px; }

/* documentation (docs/index.html renders the docs/*.md files) */
.docs { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: var(--s7); padding-top: var(--s6); padding-bottom: var(--s8); align-items: start; }
.docs-side { position: sticky; top: 76px; }
.docs-side nav { display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--line); }
.docs-side a { color: var(--muted); text-decoration: none; font-size: var(--t-sm); font-weight: 500; padding: 6px 14px; margin-left: -1px; border-left: 2px solid transparent; }
.docs-side a:hover { color: var(--fg); }
.docs-side a[aria-current] { color: var(--fg); border-left-color: var(--accent-text); }
.docs-main { min-width: 0; max-width: 780px; }
#docs-article h1 { font-size: var(--t-2xl); text-align: left; margin: 0 0 .4em; max-width: none; letter-spacing: -.02em; }
#docs-article h2 { font-size: var(--t-xl); text-align: left; margin: 1.8em 0 .5em; letter-spacing: -.01em; padding-top: .4em; border-top: 1px solid var(--line); }
#docs-article h3 { font-size: var(--t-md); margin: 1.5em 0 .4em; }
#docs-article h2, #docs-article h3 { scroll-margin-top: 76px; }
#docs-article .anchor { margin-left: .4em; color: var(--muted); text-decoration: none; font-weight: 400; opacity: 0; }
#docs-article :is(h2, h3):hover .anchor, #docs-article .anchor:focus { opacity: 1; }
#docs-article p, #docs-article li { color: var(--fg); }
#docs-article ul, #docs-article ol { padding-left: 1.3em; }
#docs-article li { margin: .25em 0; }
#docs-article blockquote { margin: 1em 0; padding: .2em 1em; border-left: 3px solid var(--line2); color: var(--muted); }
#docs-article hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
#docs-article .code { margin: 1em 0; padding: 16px 18px; overflow-x: auto; }
#docs-article .tbl { overflow-x: auto; margin: 1em 0; border: 1px solid var(--line); border-radius: 10px; }
#docs-article table { border-collapse: collapse; width: 100%; font-size: var(--t-sm); }
#docs-article th, #docs-article td { text-align: left; vertical-align: top; padding: 9px 14px; border-bottom: 1px solid var(--line); }
#docs-article th { background: var(--bg2); font-weight: 600; }
#docs-article tr:last-child td { border-bottom: 0; }
.toc { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 1.4em; padding: 12px 16px; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; font-size: var(--t-sm); }
.toc strong { flex-basis: 100%; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.toc a { text-decoration: none; }
.pager { display: flex; justify-content: space-between; gap: var(--s4); margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); }
.pager a { text-decoration: none; font-weight: 600; }
@media (max-width: 820px) {
  .docs { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .docs-side { position: static; }
  .docs-side nav { flex-direction: row; flex-wrap: wrap; border-left: 0; gap: 4px 8px; }
  .docs-side a { border: 1px solid var(--line); border-radius: 999px; margin: 0; padding: 4px 12px; }
  .docs-side a[aria-current] { border-color: var(--accent-text); }
}

/* the live demo links: a pulsing green dot (and a slow glow on the big button) say "this is running"; reduced motion keeps the dot still */
.live::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .55em; border-radius: 50%; background: var(--good); vertical-align: middle; animation: live-pulse 2s ease-out infinite; }
.btn.live.big { animation: live-glow 3s ease-in-out infinite; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 65%, transparent); } 70%, 100% { box-shadow: 0 0 0 .6em transparent; } }
@keyframes live-glow { 0%, 100% { border-color: var(--line2); box-shadow: 0 0 0 0 transparent; } 50% { border-color: color-mix(in srgb, var(--good) 70%, var(--line2)); box-shadow: 0 0 18px -4px color-mix(in srgb, var(--good) 55%, transparent); } }

/* products page: the card grid is the capabilities grid, with a logo, a row of links and a quiet placeholder card */
.pg-title { font-size: clamp(1.9rem, 4vw, var(--t-2xl)); text-align: center; }
.products { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 440px)); justify-content: center; } /* a card keeps its width, so one product is not stretched across the page and the next ones flow beside it */
.products .logo { margin-bottom: var(--s3); }
.products .links { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s4) 0 0; }