/* roroquantum.com — the rules every hand-written page repeated (R-61, Phase 1).
 *
 * Twenty-one pages each carried their own copy of this block in a <style> in <head>, and the
 * copies had drifted (a kicker at 11.5px on one page, a .btn without white-space on three, two
 * spellings of --bg). This file is the ONE copy; apps/landing/scripts/build-site.py stamps a link to
 * it (with a content hash) into every page in sync-nav.py's PAGES, BEFORE the page's own <style>, so
 * a page rule with the same selector still wins by source order. A page keeps only what is its own.
 *
 * Phase 1 is byte-neutral by rendering: the extraction removed a page's rule only where it equalled
 * this one, and a page whose rule differed kept it (with explicit "as if undeclared" values for any
 * property this file would otherwise add). The screenshot diff over every page at 1280 and 400 wide
 * is the proof. Phase 2 (a template per page) is where the pages converge on one look; the
 * --roro-* tokens (/css/tokens.css) are linked, and the role layer below maps ONE of them: the
 * accent. Everything else still holds its own literals, deliberately.
 *
 * Accent (R-60, K6, W1-rest decision 33): --accent is the brand teal-700 and --accent-hover
 * teal-800, and exactly two things read them — the .kicker labels and the .ilink in-body text links
 * (their underline colour and hover). Before this the landing painted no accent at all while the
 * console, the lab and the copilot each painted one: five products at one stand. CTAs (.btn-primary)
 * and ::selection stay ink, so the accent never competes with the thing the visitor is about to press
 * or has just selected. This sheet paints no focus ring at all: keyboard focus is the browser's default
 * on every page except the three that keep their own ring (/usecases blue, /hardware's range slider
 * violet, /contact's inputs ink), and none of those reads the accent — site.test.mjs names them, so the
 * check is not an empty loop. /usecases keeps its own :root{--accent:#000} and paints each
 * case in a category colour through the same name — a data encoding, not the brand — so a kicker
 * there follows the page's accent, not the site's. teal-700 is 5.07:1 on --bg, 4.85:1 on --panel and
 * 4.61:1 on --panel-2 (site.test.mjs recomputes every pair) but only 4.14:1 on black, so a kicker on
 * a dark section keeps the page-local white it had (index .dark, demo .honest, the solution pages'
 * closing band), and so does the one body link on a dark band (/pricing's .honest .ilink) — the
 * shared rules are never the ones that paint a kicker or a link on a dark ground.
 *
 * Reach: this sheet is linked only by the pages in sync-nav.py's PAGES. /docs/lab/** (fifteen pages),
 * /docs/api, /learn and /watch are outside it. The fifteen docs/lab pages carry their own .ilink and
 * .kicker rules in ink (the other three use neither class), so one click from /docs into /docs/lab
 * changes the link colour until those pages join the template. Removing a .ilink rule from a docs/lab
 * head on the assumption that this sheet reaches it leaves those links unstyled.
 *
 * Source: apps/landing/src/site.css. The served copy is site/css/site.css; build-site.py --check
 * fails if the two differ or if any page's link carries a stale hash.
 *
 * Not here, on purpose: the .reveal / .reveal.in pair (usecases scopes it under a JS-added class and
 * the home and how pages tune it), every @media block, and every chip variant — each differs per
 * page today and converges in Phase 2. */
:root{
  --bg:#ffffff; --panel:#fafafa; --panel-2:#f4f4f4;
  --ink:#000000; --tx:#0a0a0a; --tx-soft:#3a3a3a; --mu:#6b6b6b; --dim:#9a9a9a;
  --line:#e6e6e6; --line-2:#d4d4d4;
  --accent:var(--roro-teal-700); --accent-hover:var(--roro-teal-800);
  --maxw:1140px;
  --shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.05);
  --shadow-lg:0 24px 60px rgba(0,0,0,.13);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--tx);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:'Space Grotesk','Inter',sans-serif}
a{color:inherit;text-decoration:none}
.mono{font-family:'JetBrains Mono',monospace}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
::selection{background:#000;color:#fff}
.kicker{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);font-weight:500}
.ilink{border-bottom:1px solid var(--accent);font-weight:500;color:var(--accent)}
.ilink:hover{color:var(--accent-hover);border-bottom-color:var(--accent-hover)}
.btn{display:inline-flex;align-items:center;gap:9px;padding:11px 19px;border-radius:8px;font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;border:1.5px solid transparent;transition:.16s;white-space:nowrap}
.btn-primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-primary:hover{background:#fff;color:#000;border-color:#000}
.btn-ghost{background:#fff;border-color:var(--line-2);color:var(--ink)}
.btn-ghost:hover{border-color:#000}
.btn-lg{padding:14px 24px;font-size:15.5px}