/* =============================================================================
   Site styles. Colors come ONLY from css/tokens.css (var(--token)); this file
   carries zero hex (enforced by scripts/check-hex.mjs). Inner element rules are
   qualified under a component root class to avoid collisions (no build-time
   scoping here — it's hand-written native CSS).
   ============================================================================= */

/* ---- Reset + base ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  height: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
}
body {
  min-height: 100%;
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg, video { display: block; max-width: 100%; }
h1, h2, h3, h4 { color: var(--ink-hi); line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: var(--step-6); }
h2 { font-size: var(--step-5); }
h3 { font-size: var(--step-3); }
h4 { font-size: var(--step-2); }
p { text-wrap: pretty; }
a { color: var(--am); text-decoration: none; transition: color 0.12s ease; }
a:hover { color: var(--am-hover); }
p a { text-decoration: underline; text-underline-offset: 0.18em; } /* links in running text must not rely on color */
strong { color: var(--ink-hi); font-weight: 650; }
code, pre { font-family: var(--mono); font-size: 0.9em; }
:focus-visible { outline: 2px solid var(--am); outline-offset: 2px; border-radius: var(--radius); }
::selection { background: var(--am); color: var(--ink-on-am); }

/* ---- Layout helpers ---- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-5); }
.container.narrow { max-width: var(--container-narrow); }
.eyebrow { font-size: var(--step--1); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dom); }
.lead { color: var(--ink); font-size: var(--step-1); margin-top: var(--space-2); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--am); color: var(--ink-on-am); padding: var(--space-2) var(--space-4); border-radius: var(--radius); font-weight: 650; }
.skip:focus { left: var(--space-2); top: var(--space-2); }

/* Shared tick list */
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.ticks li { position: relative; padding-left: var(--space-5); color: var(--ink); }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--dom); box-shadow: 0 0 10px var(--dom); }

/* Gradient text accent (jewel-derived; falls back to amethyst) */
.grad-text { color: var(--am); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .grad-text { background-image: var(--grad-hero); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
}

/* ---- Buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0.72rem 1.3rem; border-radius: var(--radius); font-weight: 650; font-size: var(--step-0); line-height: 1; border: 1px solid transparent; cursor: pointer; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, transform 0.08s ease; white-space: nowrap; }
.btn.primary { background: var(--am); color: var(--ink-on-am); }
.btn.primary:hover { background: var(--am-hover); color: var(--ink-on-am); }
.btn.ghost { background: transparent; color: var(--ink-hi); border-color: var(--rule-strong); }
.btn.ghost:hover { border-color: var(--dom); color: var(--ink-hi); }
.btn:active { transform: translateY(1px); }

/* ---- Header ---- */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--rule); }
.site-header .bar { display: flex; align-items: center; gap: var(--space-5); height: var(--header-h); }
.site-header .brand { font-weight: 800; font-size: var(--step-2); color: var(--ink-hi); letter-spacing: -0.02em; }
.site-header .brand:hover { color: var(--ink-hi); }
.site-header .desktop-nav { display: flex; gap: var(--space-6); margin-left: auto; }
.site-header .desktop-nav a { color: var(--ink-dim); font-weight: 600; }
.site-header .desktop-nav a:hover, .site-header .desktop-nav a.active { color: var(--ink-hi); }
.site-header .desktop-actions { display: flex; }
.site-header .burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; margin-left: auto; }
.site-header .burger span { width: 22px; height: 2px; background: var(--ink); display: block; border-radius: var(--radius-pill); }
.site-header .mobile-nav { display: none; background: var(--panel); border-bottom: 1px solid var(--rule); }
.site-header .mobile-nav nav { display: flex; flex-direction: column; padding: var(--space-4) var(--space-5); gap: var(--space-1); }
.site-header .mobile-nav a { color: var(--ink); padding: var(--space-3) 0; font-weight: 600; border-bottom: 1px solid var(--rule); }
.site-header .mobile-nav a:last-child { border-bottom: 0; }
.site-header .mobile-nav .m-cta { color: var(--am); }
@media (max-width: 820px) {
  .site-header .desktop-nav, .site-header .desktop-actions { display: none; }
  .site-header .burger { display: flex; }
  .site-header .mobile-nav:not([hidden]) { display: block; }
}

/* ---- Footer ---- */
.site-footer { border-top: 1px solid var(--rule); background: var(--panel); padding-block: var(--space-8) var(--space-6); margin-top: var(--space-9); }
.site-footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-7); }
.site-footer .brand { font-weight: 800; font-size: var(--step-2); color: var(--ink-hi); letter-spacing: -0.02em; }
.site-footer .tag { color: var(--ink-dim); margin-top: var(--space-2); max-width: 36ch; }
.site-footer .linkcol { display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer .linkcol h4 { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-dim); font-weight: 700; }
.site-footer .linkcol a { color: var(--ink); font-weight: 500; }
.site-footer .linkcol a:hover { color: var(--ink-hi); }
.site-footer .bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--rule); }
.site-footer .bottom p { color: var(--ink-dim); font-size: var(--step--1); margin: 0; }
@media (max-width: 640px) {
  .site-footer .cols { grid-template-columns: 1fr; gap: var(--space-6); }
  .site-footer .bottom { flex-direction: column; align-items: flex-start; }
}

/* ---- Section + heading ---- */
.section { padding-block: var(--space-9); }
.section.tone-bg { background: var(--bg); }
.section.tone-panel { background: var(--panel); }
@media (max-width: 640px) { .section { padding-block: var(--space-8); } }
.sh { display: flex; flex-direction: column; gap: var(--space-3); max-width: 62ch; }
.sh.align-center { align-items: center; text-align: center; margin-inline: auto; }

/* ---- Pill ---- */
.pill { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0.2rem 0.6rem; border: 1px solid var(--rule-strong); border-radius: var(--radius-pill); font-size: var(--step--1); font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; white-space: nowrap; }
.pill.tone-dom { color: var(--dom); border-color: color-mix(in srgb, var(--dom) 40%, transparent); }
.pill.tone-muted { color: var(--ink-dim); }
.pill.tone-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }

/* ---- App frame (window mock) ---- */
.frame { border: 1px solid var(--rule-strong); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow), 0 0 60px color-mix(in srgb, var(--dom) 10%, transparent); overflow: hidden; }
.frame .bar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--rule); background: var(--raise); }
.frame .bar span { width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--control-well); }
.frame .bar span:nth-of-type(1) { background: color-mix(in srgb, var(--ga) 45%, var(--control-well)); }
.frame .bar span:nth-of-type(2) { background: color-mix(in srgb, var(--ci) 45%, var(--control-well)); }
.frame .bar span:nth-of-type(3) { background: color-mix(in srgb, var(--ok) 45%, var(--control-well)); }
.frame .bar em { margin-left: var(--space-2); color: var(--ink-dim); font-style: normal; font-size: var(--step--1); }
.frame .body { padding: var(--space-4); }
.frame .np-strip { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--rule); }

/* ---- Player seek-bar mock (decorative; wears detected markers) ---- */
.playerbar { display: flex; flex-direction: column; gap: var(--space-2); }
.playerbar .np { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.playerbar .np .title { font-size: var(--step--1); font-weight: 650; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.playerbar .np .skipchip { flex-shrink: 0; font-size: var(--step--1); font-weight: 700; color: var(--dom); border: 1px solid color-mix(in srgb, var(--dom) 45%, transparent); border-radius: var(--radius-pill); padding: 0.1rem 0.55rem; }
.playerbar .track { position: relative; height: 8px; border-radius: var(--radius-pill); background: var(--control-well); }
/* Marker kinds wear the product's locked mapping: intro=sapphire, recap=amethyst, credits=citrine */
.playerbar .seg { position: absolute; top: 0; bottom: 0; border-radius: var(--radius-pill); z-index: 2; }
.playerbar .seg.intro { background: var(--sa); }
.playerbar .seg.recap { background: var(--am); }
.playerbar .seg.credits { background: var(--ci); }
.playerbar .fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: var(--radius-pill); background: var(--dom); box-shadow: 0 0 12px color-mix(in srgb, var(--dom) 50%, transparent); z-index: 1; }
.playerbar .fill::after { content: ""; position: absolute; right: -7px; top: 50%; width: 14px; height: 14px; border-radius: var(--radius-pill); transform: translateY(-50%); background: var(--ink-hi); box-shadow: 0 0 10px color-mix(in srgb, var(--dom) 60%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .playerbar.live .fill { animation: playerbar-seek 26s ease-in-out infinite alternate; }
  @keyframes playerbar-seek { from { width: 22%; } to { width: 62%; } }
}
.playerbar .tick { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: var(--radius-pill); background: var(--rule-strong); z-index: 2; }
.playerbar .legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--step--1); color: var(--ink-dim); }
.playerbar .legend .key { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.playerbar .legend .key::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--rule-strong); }
.playerbar .legend .key.k-intro::before { background: var(--sa); }
.playerbar .legend .key.k-recap::before { background: var(--am); }
.playerbar .legend .key.k-credits::before { background: var(--ci); }
.playerbar .legend .key.k-chapter::before { background: var(--ink-dim); }

/* ---- Scrub-preview strip mock (decorative) ---- */
.scrubstrip { display: flex; gap: var(--space-2); }
.scrubstrip .thumb { flex: 1; aspect-ratio: 16 / 9; border-radius: var(--radius); border: 1px solid var(--rule); background: linear-gradient(150deg, color-mix(in srgb, var(--dom) 34%, var(--control-well)), color-mix(in srgb, var(--dom) 8%, var(--control-well)) 75%); }
.scrubstrip .thumb:nth-child(2n) { background: linear-gradient(205deg, color-mix(in srgb, var(--dom) 26%, var(--control-well)) 20%, var(--control-well) 80%); }
.scrubstrip .thumb:nth-child(3n) { background: linear-gradient(115deg, var(--control-well) 20%, color-mix(in srgb, var(--dom) 30%, var(--control-well))); }
.scrubstrip .thumb.on { border-color: var(--dom); box-shadow: 0 0 14px color-mix(in srgb, var(--dom) 40%, transparent); background: linear-gradient(150deg, color-mix(in srgb, var(--dom) 50%, var(--control-well)), color-mix(in srgb, var(--dom) 16%, var(--control-well))); }

/* ---- Poster mock with painted badges (decorative) ---- */
.posterwall { display: flex; gap: var(--space-4); justify-content: center; }
.posterwall .poster { position: relative; width: 112px; aspect-ratio: 2 / 3; border-radius: var(--radius-lg); border: 1px solid var(--rule-strong); background: linear-gradient(160deg, color-mix(in srgb, var(--dom) 30%, var(--panel)), var(--control-well) 75%); box-shadow: var(--shadow-soft); }
.posterwall .badge { position: absolute; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; line-height: 1; padding: 0.22rem 0.4rem; border-radius: var(--radius); background: color-mix(in srgb, var(--bg) 82%, transparent); border: 1px solid var(--dom); color: var(--dom); }
.posterwall .badge.ok { border-color: var(--ok); color: var(--ok); }
.posterwall .badge.tl { top: 6px; left: 6px; }
.posterwall .badge.tr { top: 6px; right: 6px; }
.posterwall .badge.bl { bottom: 6px; left: 6px; }
.posterwall .badge.free { top: 38%; right: -14px; box-shadow: 0 0 14px color-mix(in srgb, var(--dom) 35%, transparent); }

/* ---- Guide demo ---- */
.guide { display: flex; flex-direction: column; gap: var(--space-3); }
.guide .ch { display: grid; grid-template-columns: 150px 1fr; gap: var(--space-3); align-items: center; }
.guide .chname { display: flex; align-items: center; gap: var(--space-2); font-size: var(--step--1); font-weight: 650; color: var(--ink); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guide .dot { width: 9px; height: 9px; border-radius: var(--radius-pill); background: var(--dom); box-shadow: 0 0 10px var(--dom); flex-shrink: 0; }
.guide .progs { display: flex; gap: var(--space-2); }
.guide .prog { flex: 1; padding: var(--space-3) var(--space-2); text-align: center; font-size: var(--step--1); color: var(--ink-dim); background: var(--control-well); border: 1px solid var(--rule); border-radius: var(--radius); transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.guide .prog.on { color: var(--ink-on-am); background: var(--dom); border-color: var(--dom); font-weight: 650; }
@media (max-width: 560px) {
  .guide .ch { grid-template-columns: 1fr; gap: var(--space-1); }
  .guide .prog:nth-child(n + 3) { display: none; }
}

/* ---- Pillar ---- */
.pillar { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border-left: 2px solid var(--dom); background: linear-gradient(90deg, color-mix(in srgb, var(--dom) 8%, transparent), transparent 65%); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.pillar .mark { width: 26px; height: 26px; border-radius: var(--radius); background: color-mix(in srgb, var(--dom) 22%, transparent); border: 1px solid var(--dom); box-shadow: 0 0 16px color-mix(in srgb, var(--dom) 35%, transparent); }
.pillar h3 { font-size: var(--step-1); }
.pillar p { color: var(--ink-dim); }

/* ---- Feature card ---- */
.feature-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); height: 100%; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius-lg); transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease; }
.feature-card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--dom), transparent 72%); opacity: 0.45; transition: opacity 0.15s ease; }
.feature-card:hover { border-color: color-mix(in srgb, var(--dom) 45%, transparent); transform: translateY(-3px); background: var(--raise); }
.feature-card:hover::after { opacity: 1; }
.feature-card .top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 20px; }
.feature-card .dot { width: 12px; height: 12px; border-radius: var(--radius-pill); background: var(--dom); box-shadow: 0 0 16px color-mix(in srgb, var(--dom) 55%, transparent); }
.feature-card h3 { font-size: var(--step-2); }
.feature-card p { color: var(--ink-dim); }
.feature-card .more { color: var(--dom); font-weight: 650; font-size: var(--step--1); margin-top: auto; }

/* ---- Feature section (deep dive) ---- */
.feature-section { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-7); align-items: center; padding-block: var(--space-6); }
.feature-section + .feature-section { border-top: 1px solid var(--rule); }
.feature-section.align-right .copy { order: 2; }
.feature-section .head { display: flex; align-items: center; gap: var(--space-3); min-height: 22px; margin-bottom: var(--space-3); }
.feature-section .head .dot { width: 12px; height: 12px; border-radius: var(--radius-pill); background: var(--dom); box-shadow: 0 0 16px color-mix(in srgb, var(--dom) 55%, transparent); }
.feature-section .copy h3 { font-size: var(--step-4); margin-bottom: var(--space-3); }
.feature-section .copy .body { color: var(--ink-dim); margin-top: var(--space-3); max-width: 56ch; }
.feature-section .panel { position: relative; overflow: hidden; padding: var(--space-6); border-radius: var(--radius-lg); background: radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--dom) 16%, transparent), transparent 60%), var(--panel); border: 1px solid color-mix(in srgb, var(--dom) 30%, var(--rule-strong)); min-height: 200px; display: flex; flex-direction: column; gap: var(--space-4); }
.feature-section .glyph { width: 44px; height: 44px; border-radius: var(--radius); background-image: linear-gradient(135deg, var(--dom), color-mix(in srgb, var(--dom) 30%, var(--bg))); box-shadow: 0 0 26px color-mix(in srgb, var(--dom) 40%, transparent); }
@media (max-width: 820px) {
  .feature-section { grid-template-columns: 1fr; gap: var(--space-5); }
  .feature-section.align-right .copy { order: 0; }
  .feature-section .art { order: 2; }
}

/* ---- Steps ---- */
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); padding: 0; margin: 0; }
.steps li { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius-lg); }
.steps .num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--dom) 18%, transparent); border: 1px solid var(--dom); color: var(--dom); font-weight: 800; font-size: var(--step-1); }
.steps h3 { font-size: var(--step-2); }
.steps p { color: var(--ink-dim); }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }

/* ---- Pricing teaser ---- */
.pricing-teaser .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.pricing-teaser .mini { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-5); background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius-lg); position: relative; }
.pricing-teaser .mini.featured { border-color: var(--am); box-shadow: 0 0 0 1px var(--am), 0 0 30px var(--glow-am); }
.pricing-teaser .tag { position: absolute; top: 0; right: var(--space-4); transform: translateY(-50%); background: var(--am); color: var(--ink-on-am); font-size: var(--step--1); font-weight: 700; padding: 0.15rem 0.55rem; border-radius: var(--radius-pill); }
.pricing-teaser .mini h3 { font-size: var(--step-2); }
.pricing-teaser .cap { color: var(--ink-dim); font-size: var(--step--1); }
.pricing-teaser .price { color: var(--ink-hi); font-weight: 700; font-size: var(--step-1); margin-top: var(--space-2); }
.pricing-teaser .incl { color: var(--ok); font-size: var(--step--1); }
.pricing-teaser .foot { display: flex; justify-content: center; margin-top: var(--space-6); }
@media (max-width: 860px) { .pricing-teaser .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .pricing-teaser .grid { grid-template-columns: 1fr; } }

/* ---- Pricing card ---- */
.pricing-card { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); height: 100%; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius-lg); }
.pricing-card.featured { border-color: var(--am); box-shadow: 0 0 0 1px var(--am), 0 0 36px var(--glow-am); }
.pricing-card .tag { position: absolute; top: 0; left: var(--space-6); transform: translateY(-50%); background: var(--am); color: var(--ink-on-am); font-size: var(--step--1); font-weight: 700; padding: 0.15rem 0.6rem; border-radius: var(--radius-pill); }
.pricing-card h3 { font-size: var(--step-3); }
.pricing-card .cap { color: var(--ink-hi); font-weight: 600; }
.pricing-card .tagline { color: var(--ink-dim); font-size: var(--step--1); }
.pricing-card .prices { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-4) 0; }
.pricing-card .price { display: flex; flex-direction: column; gap: 2px; }
.pricing-card .line { display: flex; align-items: baseline; gap: var(--space-1); }
.pricing-card .amt { font-size: var(--step-4); font-weight: 800; color: var(--ink-hi); letter-spacing: -0.02em; }
.pricing-card .unit { color: var(--ink-dim); font-weight: 600; white-space: nowrap; }
.pricing-card .note { color: var(--ink-dim); font-size: var(--step--1); }
.pricing-card .btn { width: 100%; margin-top: auto; }
.pricing-card .everything { color: var(--ok); font-size: var(--step--1); text-align: center; }

/* ---- FAQ ---- */
.faq { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) 0; color: var(--ink-hi); font-weight: 650; font-size: var(--step-1); }
.faq summary::-webkit-details-marker { display: none; }
.faq .chev { width: 12px; height: 12px; border-right: 2px solid var(--ink-dim); border-bottom: 2px solid var(--ink-dim); transform: rotate(45deg); transition: transform 0.15s ease; flex-shrink: 0; }
.faq[open] .chev { transform: rotate(-135deg); }
.faq .ans { padding: 0 0 var(--space-5); color: var(--ink-dim); max-width: 70ch; }

/* ---- CTA ---- */
.cta { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; padding: var(--space-9) var(--space-5); border: 1px solid transparent; border-radius: var(--radius-lg); background: radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--am) 14%, var(--panel)), var(--panel) 62%) padding-box, linear-gradient(135deg, color-mix(in srgb, var(--am) 55%, transparent), color-mix(in srgb, var(--lp) 40%, transparent) 55%, color-mix(in srgb, var(--sa) 45%, transparent)) border-box; }
.cta p { color: var(--ink); max-width: 54ch; }
.cta .row { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; margin-top: var(--space-2); }

/* ---- Platform card ---- */
.platform-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-5); height: 100%; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius-lg); transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease; }
a.platform-card:hover { border-color: color-mix(in srgb, var(--dom) 45%, transparent); transform: translateY(-3px); background: var(--raise); }
.platform-card .glyph { width: 34px; height: 34px; border-radius: var(--radius); background-image: linear-gradient(135deg, var(--dom), color-mix(in srgb, var(--dom) 25%, var(--bg))); box-shadow: 0 0 18px color-mix(in srgb, var(--dom) 40%, transparent); }
.platform-card .name { font-size: var(--step-1); font-weight: 650; color: var(--ink-hi); }
.platform-card .cta-link { color: var(--dom); font-weight: 650; font-size: var(--step--1); margin-top: auto; }
.platform-card.disabled .glyph { opacity: 0.5; }
.platform-card.disabled .name { color: var(--ink); }

/* =========================== PAGE: Home =========================== */
.hero { position: relative; overflow: hidden; padding-block: var(--space-10) var(--space-9); }
.hero::before { content: ""; position: absolute; inset: -10%; z-index: 0; pointer-events: none; opacity: 0.55; background: radial-gradient(55% 50% at 12% 8%, var(--glow-am), transparent 60%), radial-gradient(45% 45% at 88% 18%, var(--glow-sa), transparent 60%), radial-gradient(55% 60% at 72% 95%, var(--glow-lp), transparent 60%); animation: hero-aura 18s ease-in-out infinite alternate; }
@keyframes hero-aura { from { transform: translate3d(0, 0, 0) scale(1); opacity: 0.48; } to { transform: translate3d(-2.5%, 1.5%, 0) scale(1.12); opacity: 0.62; } }
.hero .container { position: relative; z-index: 1; }
.hero .hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--space-8); align-items: center; }
.hero .hero-copy h1 { margin-bottom: var(--space-4); }
.hero .sub { font-size: var(--step-1); color: var(--ink); max-width: 54ch; }
.hero .cta-row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }
.hero .micro { margin-top: var(--space-4); color: var(--ink-dim); font-size: var(--step--1); }
@media (max-width: 900px) { .hero .hero-grid { grid-template-columns: 1fr; gap: var(--space-7); } .hero { padding-block: var(--space-8); } }

.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-7); }
@media (max-width: 900px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pillars { grid-template-columns: 1fr; } }

/* Two ways to watch */
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-top: var(--space-7); }
.way { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); background: var(--panel); border: 1px solid var(--rule); border-top: 3px solid var(--dom); border-radius: var(--radius-lg); }
.way .mark { width: 32px; height: 32px; border-radius: var(--radius); background: color-mix(in srgb, var(--dom) 22%, transparent); border: 1px solid var(--dom); box-shadow: 0 0 18px color-mix(in srgb, var(--dom) 35%, transparent); }
.way h3 { font-size: var(--step-3); }
.way p { color: var(--ink-dim); }
@media (max-width: 720px) { .ways { grid-template-columns: 1fr; } }

/* Rolling capabilities marquee (decorative) */
.marquee { overflow: hidden; border-block: 1px solid var(--rule); background: var(--panel); padding-block: var(--space-3); display: grid; gap: var(--space-3); -webkit-mask-image: linear-gradient(90deg, transparent, black 7%, black 93%, transparent); mask-image: linear-gradient(90deg, transparent, black 7%, black 93%, transparent); }
.marquee-track { display: inline-flex; flex-wrap: nowrap; gap: var(--space-3); width: max-content; will-change: transform; }
.marquee-track.left { animation: marquee-left 40s linear infinite; }
.marquee-track.right { animation: marquee-right 46s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee .chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.4rem 0.9rem; border: 1px solid var(--rule-strong); border-radius: var(--radius-pill); color: var(--ink); font-weight: 600; font-size: var(--step--1); white-space: nowrap; }
.marquee .chip::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--dom); box-shadow: 0 0 10px var(--dom); flex-shrink: 0; }
@keyframes marquee-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* Two-up showcase (Guide, media analysis) */
.showcase { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
.showcase .body { color: var(--ink-dim); margin-top: var(--space-3); }
.showcase .ticks { margin-top: var(--space-5); }
.showcase .modes { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.showcase.flip .show-copy { order: 2; }
.showcase .show-aside { min-width: 0; }
@media (max-width: 900px) { .showcase { grid-template-columns: 1fr; } .showcase .show-aside { order: -1; } .showcase.flip .show-copy { order: 0; } }

.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-top: var(--space-7); }
@media (max-width: 1040px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .feature-grid { grid-template-columns: 1fr; } }

.steps-wrap, .teaser-wrap, .list-wrap { margin-top: var(--space-7); }

.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-7); }
.why-item { padding: var(--space-5); background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius-lg); }
.why-item .bar { display: block; width: 36px; height: 3px; border-radius: var(--radius-pill); background: var(--dom); margin-bottom: var(--space-4); box-shadow: 0 0 12px var(--dom); }
.why-item h3 { font-size: var(--step-2); margin-bottom: var(--space-2); }
.why-item p { color: var(--ink-dim); }
@media (max-width: 820px) { .why-grid { grid-template-columns: 1fr; } }

/* =========================== PAGE: Features =========================== */
.feature-list { margin-top: var(--space-6); }

/* Compact expectations grid — table-stakes features, one card each */
.expect-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
.mini-card { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius-lg); scroll-margin-top: calc(var(--header-h) + var(--space-4)); transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; }
.mini-card:hover { border-color: color-mix(in srgb, var(--dom) 40%, transparent); background: var(--raise); transform: translateY(-2px); }
.mini-card::before { content: ""; width: 28px; height: 3px; border-radius: var(--radius-pill); background: var(--dom); box-shadow: 0 0 12px color-mix(in srgb, var(--dom) 55%, transparent); margin-bottom: var(--space-1); }
.mini-card h3 { font-size: var(--step-1); }
.mini-card p { color: var(--ink-dim); font-size: var(--step--1); }
@media (max-width: 900px) { .expect-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .expect-grid { grid-template-columns: 1fr; } }

/* Roadmap strip — honest coming-soon, visually distinct (dashed) from shipped */
.roadmap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-top: var(--space-6); }
.roadmap-card { padding: var(--space-6); background: var(--panel); border: 1px dashed var(--rule-strong); border-radius: var(--radius-lg); scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
.roadmap-card .head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.roadmap-card .dot { width: 12px; height: 12px; border-radius: var(--radius-pill); background: var(--dom); box-shadow: 0 0 16px color-mix(in srgb, var(--dom) 55%, transparent); }
.roadmap-card h3 { font-size: var(--step-3); margin-bottom: var(--space-2); }
.roadmap-card p { color: var(--ink-dim); max-width: 56ch; }
@media (max-width: 820px) { .roadmap-grid { grid-template-columns: 1fr; } }

/* Watch-party room mock (decorative) */
.party { display: flex; flex-direction: column; gap: var(--space-4); }
.party .members { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.party .member { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.3rem 0.7rem; border: 1px solid var(--rule-strong); border-radius: var(--radius-pill); font-size: var(--step--1); font-weight: 650; color: var(--ink); }
.party .member::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.party .member.host { border-color: color-mix(in srgb, var(--dom) 45%, transparent); color: var(--ink-hi); }
.party .member.waiting::before { background: var(--ink-dim); box-shadow: none; }
.party .status { font-size: var(--step--1); color: var(--ink-dim); }
.party .status strong { color: var(--ok); }

/* =========================== PAGE: Pricing =========================== */
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); margin-top: var(--space-7); align-items: stretch; }
.billing { text-align: center; color: var(--ink-dim); font-size: var(--step--1); margin-top: var(--space-5); }
.callouts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-top: var(--space-8); }
.callout { padding: var(--space-6); background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius-lg); }
.callout .bar { display: block; width: 40px; height: 3px; border-radius: var(--radius-pill); background: var(--dom); margin-bottom: var(--space-4); box-shadow: 0 0 12px var(--dom); }
.callout h3 { font-size: var(--step-2); margin-bottom: var(--space-2); }
.callout p { color: var(--ink-dim); }
.faqs { margin-top: var(--space-6); max-width: 820px; }
@media (max-width: 980px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .pricing-grid { grid-template-columns: 1fr; } .callouts { grid-template-columns: 1fr; } }

/* =========================== PAGE: Download =========================== */
.platform-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-7); }
.platform-note { color: var(--ink-dim); font-size: var(--step--1); margin-top: var(--space-5); text-align: center; }
.server-head { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.install-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-top: var(--space-6); }
.install-card { padding: var(--space-6); background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius-lg); }
.install-card h3 { font-size: var(--step-2); margin-bottom: var(--space-2); }
.install-card > p { color: var(--ink-dim); }
.install-card .micro { color: var(--ink-dim); font-size: var(--step--1); margin-top: var(--space-3); }
pre { margin-top: var(--space-4); padding: var(--space-4); background: var(--control-well); border: 1px solid var(--rule); border-radius: var(--radius); overflow-x: auto; color: var(--ink); line-height: 1.55; }
pre code { background: none; border: 0; padding: 0; font-size: var(--step--1); white-space: pre; color: var(--ink); }
.reqs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-top: var(--space-6); }
.req { padding: var(--space-6); background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius-lg); border-left: 2px solid var(--dom); }
.req h3 { font-size: var(--step-2); margin-bottom: var(--space-3); }
.req ul { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-2); }
.req li { color: var(--ink-dim); }
@media (max-width: 860px) { .platform-grid { grid-template-columns: repeat(2, 1fr); } .install-grid, .reqs-grid { grid-template-columns: 1fr; } }
@media (max-width: 460px) { .platform-grid { grid-template-columns: 1fr; } }

/* ---- Reduced motion: every pure-CSS animation degrades to static ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero::before, .marquee-track.left, .marquee-track.right { animation: none; }
}

/* =========================== PAGE: Legal + 404 =========================== */
.legal .head { display: flex; align-items: center; gap: var(--space-4); }
.legal h2 { font-size: var(--step-2); margin-top: var(--space-7); margin-bottom: var(--space-2); }
.legal p { color: var(--ink-dim); }
.legal .muted { font-size: var(--step--1); margin-top: var(--space-3); }
.nf { padding-block: var(--space-10); }
.nf .container { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); }
.nf p { color: var(--ink-dim); margin-bottom: var(--space-4); }