/* TOON Protocol site: one stylesheet for the landing page, docs/ and ecosystem/.
   build.py copies it inline into index.html so that file stands alone.
   Palette from the icon: cream, charcoal, gold, grey. The only script is the copy button. */

@font-face { font-family:"Archivo"; font-style:normal; font-weight:800; font-display:swap;
  src:url("fonts/archivo-800.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"JetBrains Mono"; font-style:normal; font-weight:100 800; font-display:swap;
  src:url("fonts/jetbrains-mono.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg:#f3efe6; --bg-raised:#faf8f2; --bg-sunken:#eae5d8; --bg-tint:#ece7db;
  --ink:#2b2f36; --ink-soft:#3f444c; --ink-dim:#5c616a; --ink-faint:#7a7f88;
  --line:#d8d2c4; --line-strong:#bdb6a6; --bg-outer:#e9e4d7; --grid:#dcd6c7;
  --gold:#c9a24a; --accent:#a8842c; --accent-ink:#2b2f36; --accent-soft:rgba(201,162,74,.16);
  --good:#3a7d52; --good-soft:rgba(58,125,82,.12); --bad:#a9443b;
  --term:#2b2f36; --term-2:#242830; --term-line:#3b404a; --term-ink:#f3efe6; --term-dim:#9aa0ab; --term-faint:#6f757f;
  --radius:4px; --radius-sm:3px; --measure:68ch; --max:92rem; --gut:clamp(1.5rem, 5vw, 5.5rem);
  --display:"Archivo", "Archivo Black", Impact, "Arial Black", ui-sans-serif, system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --body:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#1c1f24; --bg-raised:#23272d; --bg-sunken:#15181c; --bg-tint:#202429;
    --ink:#f3efe6; --ink-soft:#e6e1d5; --ink-dim:#b6bbc4; --ink-faint:#878d97;
    --line:#31363e; --line-strong:#454b56; --bg-outer:#141619; --grid:#1f2328;
    --gold:#c9a24a; --accent:#d9b65c; --accent-ink:#1c1f24; --accent-soft:rgba(201,162,74,.14);
    --good:#6cc08a; --good-soft:rgba(108,192,138,.12); --bad:#e07067;
    --term:#111317; --term-2:#0d0f12; --term-line:#2a2f37; --term-ink:#f3efe6; --term-dim:#9aa0ab; --term-faint:#6a707a;
    color-scheme:dark; }
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
html { scroll-behavior:smooth; scroll-padding-top:4.5rem; }
body { background:var(--bg-outer); color:var(--ink); overflow-x:clip; min-width:320px; padding-bottom:2.5rem;
  background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size:2.5rem 2.5rem;
  font:16px/1.6 var(--body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
/* The page is one column on the grid, as on herdr.dev: bordered on both sides, the grid
   showing beyond it on a wide screen and beneath it at the bottom. */
.page { max-width:var(--max); margin:0 auto; background:var(--bg); border:0 solid var(--line); border-width:0 1px; min-height:100vh; }
code, pre, kbd { font-family:var(--mono); font-size:0.86em; line-height:1.55; }
a { color:var(--accent); text-underline-offset:3px; text-decoration-thickness:1px; }
a:hover { text-decoration-thickness:2px; }
h1, h2, h3 { margin:0; font-family:var(--display); font-weight:800; letter-spacing:-0.04em; line-height:1.02; color:var(--ink); }
h2 { font-size:clamp(1.9rem, 3.6vw, 2.8rem); text-wrap:balance; }
h3 { font-size:1.15rem; letter-spacing:-0.025em; line-height:1.2; }
h4 { margin:0; font:600 0.74rem/1.3 var(--mono); letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); }
p { margin:0; }
.wrap { width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--gut); }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.mono { font-family:var(--mono); }

/* ===== the mark ===== */
.mark { display:block; flex:none; }
.mark .a { fill:var(--ink); }
.mark .b { fill:var(--gold); }
.mark .c { fill:var(--ink-faint); }
.mark .hole { fill:var(--bg); }

/* ===== header ===== */
.site-header { position:sticky; top:0; z-index:20; border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); }
.site-header .wrap { display:flex; align-items:center; justify-content:space-between; gap:1rem; height:3.5rem; }
.brand { display:inline-flex; align-items:center; gap:0.6rem; color:var(--ink); text-decoration:none; white-space:nowrap;
  font:700 1.05rem/1 var(--mono); letter-spacing:-0.04em; }
.brand .name small { color:var(--ink-faint); font-weight:400; margin-left:0.45rem; letter-spacing:0; }
.site-header nav { display:flex; gap:1.3rem; align-items:center; }
.site-header nav a { color:var(--ink-dim); text-decoration:none; font:600 0.76rem/1 var(--mono); letter-spacing:0.08em; text-transform:uppercase; }
.site-header nav a:hover, .site-header nav a.active { color:var(--ink); }
.site-header nav .button { padding:0 0.9rem; height:2.1rem; font-size:0.76rem; }
.site-header nav .social { display:flex; gap:0.4rem; margin:0 0.2rem; }
.social a { display:inline-flex; align-items:center; justify-content:center; gap:0.45rem; min-width:2.1rem; height:2.1rem; padding:0 0.55rem; border:1px solid var(--line-strong); color:var(--ink-dim); text-decoration:none; }
.social a:hover { color:var(--ink); border-color:var(--gold); }
.social svg { width:0.95rem; height:0.95rem; fill:currentColor; flex:none; }
.social b { font:600 0.74rem/1 var(--mono); letter-spacing:0.02em; color:var(--ink); font-variant-numeric:tabular-nums; }
@media (max-width:980px) { .site-header nav a.hide-m { display:none; } }
@media (max-width:640px) { .site-header nav .social { display:none; } }
@media (max-width:520px) { :root { --gut:1rem; } .site-header nav { gap:0.8rem; }
  .site-header nav a.hide-s { display:none; } .brand .name { display:none; } .site-header nav .button { padding:0 0.7rem; } }

/* ===== buttons, badges, eyebrow ===== */
.button { display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; height:2.6rem; padding:0 1.1rem;
  border-radius:var(--radius); border:1px solid transparent; white-space:nowrap; text-decoration:none;
  font:600 0.8rem/1 var(--mono); letter-spacing:0.06em; text-transform:uppercase; }
.button.primary { background:var(--gold); color:#2b2f36; border-color:var(--gold); }
.button.primary:hover { filter:brightness(1.06); text-decoration:none; }
.button.ghost { border-color:var(--line-strong); color:var(--ink); background:transparent; }
.button.ghost:hover { border-color:var(--gold); color:var(--ink); text-decoration:none; }
.button svg { width:1em; height:1em; }
.badge { display:inline-flex; align-items:center; gap:0.4rem; padding:0.2rem 0.5rem; border-radius:var(--radius-sm);
  font:600 0.68rem/1.3 var(--mono); letter-spacing:0.06em; text-transform:uppercase; border:1px solid var(--line-strong); color:var(--ink-dim); white-space:nowrap; }
.badge.live { border-color:transparent; background:var(--good-soft); color:var(--good); }
.badge.live::before { content:""; width:0.4rem; height:0.4rem; background:var(--good); }
.badge.soon { background:var(--accent-soft); color:var(--accent); border-color:transparent; }
.badge.src { background:var(--bg-sunken); color:var(--ink-dim); border-color:transparent; }
.eyebrow { display:flex; align-items:center; gap:0.75rem; margin:0 0 1.1rem; color:var(--ink-faint);
  font:600 0.72rem/1 var(--mono); letter-spacing:0.14em; text-transform:uppercase; }
.eyebrow::before { content:""; width:2.25rem; height:2px; background:var(--gold); flex:none; }
.label-row { display:flex; justify-content:space-between; gap:1rem; margin-bottom:0.9rem; color:var(--ink-faint);
  font:600 0.72rem/1.3 var(--mono); letter-spacing:0.12em; text-transform:uppercase; }
.lede { max-width:var(--measure); margin:1.25rem 0 0; font-size:1.12rem; line-height:1.6; color:var(--ink-dim); }
.lede strong, .prose strong { color:var(--ink); font-weight:600; }
.prose { max-width:var(--measure); color:var(--ink-dim); }
.prose p + p { margin-top:0.9rem; }
.section-head { max-width:48rem; margin-bottom:2.25rem; }
.section-head p { margin-top:0.9rem; color:var(--ink-dim); font-size:1.05rem; max-width:var(--measure); }
.section-head p.eyebrow { margin:0 0 1.1rem; font-size:0.72rem; }
.note { margin-top:0.8rem; color:var(--ink-faint); font:0.78rem/1.6 var(--mono); }
.note a { color:var(--accent); }

/* ===== sections ===== */
section { padding:4rem 0; }
section + section, section + div { border-top:1px solid var(--line); }
section.tint { background:var(--bg-tint); }
.cta { display:flex; flex-wrap:wrap; gap:0.75rem; margin-top:1.75rem; }

/* ===== terminal: code and the install card ===== */
pre { overflow-x:auto; margin:0; padding:0.9rem 1.1rem; background:var(--bg-raised); color:var(--ink);
  border:1px solid var(--line-strong); border-radius:var(--radius); font-size:0.8rem; line-height:1.75; }
:not(pre) > code { padding:0.08em 0.4em; background:var(--bg-sunken); border:1px solid var(--line); border-radius:var(--radius-sm); font-size:0.85em; color:var(--ink); }
pre .c { color:var(--ink-faint); }
pre .k { color:var(--accent); font-weight:600; }
pre .g { color:var(--accent); }
pre .ok { color:var(--good); }
pre .s { color:var(--good); }
.codeblock { border:1px solid var(--line-strong); border-radius:var(--radius); overflow:hidden; background:var(--bg-raised); margin:1rem 0; }
.codeblock .bar { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:0.55rem 1.1rem;
  border-bottom:1px solid var(--line);
  font:600 0.64rem/1.4 var(--mono); letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-faint); }
.codeblock .bar .tag, .codeblock .bar span + span { color:var(--good); text-transform:none; letter-spacing:0; font-weight:500; }
.codeblock pre { border:0; border-radius:0; margin:0; }
/* The command box, as on herdr.dev: the command, and a button that copies it. The "$" is
   generated content, so it is not part of what gets copied. The button is the one script
   on the site (index.html, at the end of the body). */
.cmd { display:inline-flex; align-items:stretch; max-width:100%; margin-top:2rem; border:1px solid var(--line-strong);
  background:color-mix(in srgb, var(--bg-raised) 82%, transparent); backdrop-filter:blur(6px); }
.cmd code { display:flex; align-items:center; gap:0.7rem; padding:0.85rem 1.2rem; font-size:0.86rem; white-space:nowrap; overflow-x:auto; scrollbar-width:none;
  background:none; border:0; border-radius:0; color:var(--ink); }
.cmd code::before { content:"$"; color:var(--gold); font-weight:600; }
.cmd button { display:flex; align-items:center; padding:0 1rem; border:0; border-left:1px solid var(--line-strong); background:none; cursor:pointer; color:var(--ink-faint);
  font:600 0.66rem/1 var(--mono); letter-spacing:0.14em; text-transform:uppercase; white-space:nowrap; }
.cmd button:hover, .cmd button.done { color:var(--ink); }
/* Evidence panels: every command and example on the landing page sits in one of these,
   the panel herdr draws beside each row. A .l line is a command and gets the prompt; a .o
   line is output; a pre inside keeps its columns. */
.ev { width:100%; padding:0.8rem 1rem 0.9rem; border:1px solid var(--line-strong); background:var(--bg-raised); color:var(--ink-dim); font:0.78rem/1.75 var(--mono); }
.ev .hd { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin:0 0 0.55rem; padding-bottom:0.5rem; border-bottom:1px solid var(--line);
  font:600 0.64rem/1.4 var(--mono); letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-faint); }
.ev .hd i { font-style:normal; color:var(--good); text-transform:none; letter-spacing:0; font-weight:500; }
.ev .hd button { margin:-0.3rem -0.4rem -0.3rem 0; padding:0.3rem 0.55rem; border:1px solid var(--line); background:none; cursor:pointer; color:var(--ink-faint);
  font:600 0.62rem/1 var(--mono); letter-spacing:0.14em; text-transform:uppercase; }
.ev .hd button:hover, .ev .hd button.done { color:var(--ink); border-color:var(--line-strong); }
.ev .l, .ev .o { display:block; white-space:pre-wrap; overflow-wrap:anywhere; }
.ev .l { color:var(--ink); }
.ev .l::before, .ev .line > b { content:"$"; color:var(--gold); font-weight:600; margin-right:0.7rem; }
.ev .o { color:var(--ink-faint); }
.ev .l + .o { margin-top:0.5rem; }
.ev .o + .l { margin-top:0.5rem; }
.ev pre { margin:0; padding:0; border:0; background:none; color:var(--ink); font-size:inherit; line-height:inherit; overflow-x:auto; }
.ev .k { color:var(--accent); font-weight:600; }
.ev .g, .ev .hi { color:var(--accent); }
.ev .ok { color:var(--good); }
.ev .s { color:var(--good); }
.ev .c { color:var(--ink-faint); }
.meta { margin-top:1rem; color:var(--ink-faint); font:0.76rem/1.7 var(--mono); }
.meta a { color:var(--accent); text-decoration:none; }
.meta a:hover { text-decoration:underline; }
.meta code { background:none; border:0; padding:0; color:var(--ink-dim); font-size:1em; }

/* ===== the stat strip ===== */
.stats-band { padding:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stats-band .wrap { max-width:none; padding:0; }
.stats { display:grid; grid-template-columns:repeat(4, 1fr); }
.stats div { padding:1.7rem clamp(1.25rem, 2.5vw, 2.5rem) 1.6rem; border-left:1px solid var(--line); transition:background .12s ease; }
.stats div:first-child { border-left:0; padding-left:var(--gut); }
.stats div:last-child { padding-right:var(--gut); }
.stats div:hover { background:color-mix(in srgb, var(--gold) 5%, transparent); }
.stats b { display:flex; align-items:baseline; gap:0.45rem; font:800 clamp(2.2rem, 3.8vw, 3.1rem)/1 var(--display); letter-spacing:-0.05em; color:var(--ink); font-variant-numeric:tabular-nums; }
.stats b small { font:600 0.78rem/1 var(--mono); letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); }
.stats span { display:flex; gap:0.6rem; align-items:flex-start; margin-top:0.9rem; color:var(--ink-faint); min-width:0;
  font:600 0.66rem/1.5 var(--mono); letter-spacing:0.12em; text-transform:uppercase; }
.stats span svg { position:relative; top:0.05rem; }
.stats span svg { width:0.95rem; height:0.95rem; flex:none; color:var(--gold); }
@media (max-width:860px) { .stats { grid-template-columns:repeat(2, 1fr); } .stats div:nth-child(3) { border-left:0; } .stats div:nth-child(n+3) { border-top:1px solid var(--line); } }
@media (max-width:640px) { .stats b { font-size:1.75rem; } .stats div { padding:1.2rem 1rem 1.1rem; } .stats div:first-child { padding-left:var(--gut); } .stats div:nth-child(2n) { padding-right:var(--gut); } .stats span { font-size:0.6rem; letter-spacing:0.1em; } }

/* ===== numbered rows ===== */
.rows { list-style:none; padding:0; margin:0; border-top:1px solid var(--line); }
.rows li, .rows .cap { display:grid; grid-template-columns:7.5rem minmax(0, 56ch) minmax(0, 1fr); gap:0 2.5rem; align-items:start;
  padding:1.75rem 1rem; margin:0 -1rem; border-bottom:1px solid var(--line); }
.rows li.linked { display:block; padding:0; margin:0; border:0; }
.rows .cap { text-decoration:none; color:inherit; transition:background .12s ease; }
.rows .cap:hover { background:color-mix(in srgb, var(--gold) 6%, transparent); }
.rows .n { font:800 2.75rem/1 var(--display); letter-spacing:-0.05em; color:var(--line-strong); transition:color .12s ease; }
.rows .cap:hover .n { color:var(--ink-faint); }
.rows h3 { font-size:1.3rem; margin-bottom:0.55rem; transition:color .12s ease; }
.rows .cap:hover h3 { color:var(--accent); }
.rows .arw { margin-left:0.3rem; vertical-align:2px; font:400 1rem/1 var(--body); color:var(--ink-faint); transition:color .12s ease, margin-left .12s ease; }
.rows .cap:hover .arw { color:var(--accent); margin-left:0.6rem; }
.rows p { color:var(--ink-dim); font-size:0.95rem; max-width:36rem; }
.rows .codeblock { margin:0; }
.rows .ev { align-self:start; justify-self:end; max-width:36rem; }
@media (max-width:900px) { .rows li, .rows .cap { grid-template-columns:4rem minmax(0, 1fr); } .rows li > :nth-child(3), .rows .cap > :nth-child(3) { grid-column:2; margin-top:1rem; justify-self:start; } }
@media (max-width:520px) { .rows li, .rows .cap { grid-template-columns:2.4rem minmax(0, 1fr); gap:0 0.6rem; padding:1.4rem 0; margin:0; } .rows .n { font-size:1.4rem; padding-top:0.3rem; } .rows h3 { font-size:1.15rem; } .rows li > :nth-child(3), .rows .cap > :nth-child(3) { grid-column:1 / -1; margin-top:1rem; } }

/* The typing tape: the commands are real and in workflow order, so the animation is a
   demo. Each line is one absolutely placed span; `--n` is its length in characters and
   `--i` its turn. One shared timeline per line: type at one step per character, hold,
   erase, then stay hidden until the cycle comes round. Reduced motion holds line one. */
.tape { --slot:4.6s; --cycle:36.8s; }
.tape .line { display:flex; align-items:flex-start; white-space:nowrap; overflow:hidden; }
.tape .line > b { display:block; }
.tape .lines { position:relative; flex:1; min-width:0; height:1.75em; }
.tape .lines span { position:absolute; left:0; top:0; display:block; box-sizing:content-box; max-width:0; overflow:hidden; white-space:nowrap; color:var(--ink-dim);
  border-right:0.55em solid var(--ink-dim); opacity:1;
  animation-name:tape, caret; animation-duration:var(--cycle), 1.05s; animation-timing-function:steps(var(--n), end), steps(1);
  animation-delay:calc(var(--i) * var(--slot) - var(--cycle)), 0s; animation-iteration-count:infinite, infinite; }
@keyframes tape {
  0% { max-width:0; opacity:1; }
  5.7% { max-width:calc(var(--n) * 1ch); }
  10.1% { max-width:calc(var(--n) * 1ch); opacity:1; }
  11.8% { max-width:0; opacity:1; }
  11.9%, 100% { max-width:0; opacity:0; }
}
@keyframes caret { 50% { border-color:transparent; } }
@media (prefers-reduced-motion: reduce) {
  .tape .lines span { animation:none; opacity:0; }
  .tape .lines span:first-child { opacity:1; max-width:none; border-right-color:var(--ink-dim); }
}

/* ===== cards ===== */
.cards { list-style:none; padding:1px; margin:0; display:grid; gap:1px; grid-template-columns:repeat(auto-fit, minmax(16rem, 1fr)); }
.cards li, .card { padding:1.4rem 1.4rem 1.5rem; background:var(--bg-raised); color:var(--ink-dim); font-size:0.95rem; box-shadow:0 0 0 1px var(--line); }
.cards li h3 { margin-bottom:0.5rem; }
.cards li .num { display:block; color:var(--gold); font:600 0.72rem/1 var(--mono); letter-spacing:0.12em; margin-bottom:1rem; }
.cards li .ico { display:block; width:1.4rem; height:1.4rem; margin-bottom:1rem; color:var(--gold); }
.cards.three { grid-template-columns:repeat(auto-fit, minmax(14rem, 1fr)); }
.cards li > p { margin:0; }
.cards .top { display:flex; justify-content:space-between; align-items:center; gap:0.6rem; margin-bottom:0.6rem; }
.cards .top a { font:700 0.98rem/1.2 var(--mono); letter-spacing:-0.02em; color:var(--ink); text-decoration:none; }
.cards .top a:hover { color:var(--accent); }
.cards .foot, .apps .price { margin-top:1rem; padding-top:0.7rem; border-top:1px dashed var(--line); color:var(--ink-faint); font:0.76rem/1.6 var(--mono); }
.cards .foot b, .apps .price b { color:var(--accent); font-weight:600; }
.cards .foot a { color:var(--ink-dim); }
.cards li.next { background:transparent; }
.cards li.next .top a { color:var(--accent); }

/* ===== apps grid (landing) ===== */
.apps { list-style:none; padding:1px; margin:0; display:grid; gap:1px; grid-template-columns:repeat(auto-fill, minmax(16rem, 1fr)); }
.apps li { padding:1.3rem 1.4rem; background:var(--bg-raised); box-shadow:0 0 0 1px var(--line); display:flex; flex-direction:column; font-size:0.93rem; color:var(--ink-dim); }
.apps li > p { margin:0; }
.apps .top { display:flex; justify-content:space-between; align-items:center; gap:0.6rem; margin-bottom:0.6rem; }
.apps .top a { font:700 0.98rem/1.2 var(--mono); letter-spacing:-0.02em; color:var(--ink); text-decoration:none; }
.apps .top a:hover { color:var(--accent); }
.apps .price { margin-top:auto; }
.rails { display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:1.75rem; }
.rails span { display:inline-flex; align-items:center; gap:0.5rem; padding:0.45rem 0.8rem; border-radius:var(--radius);
  border:1px solid var(--line-strong); background:var(--bg-raised); color:var(--ink); font:600 0.74rem/1.3 var(--mono); letter-spacing:0.04em; }
.rails span i { width:0.55rem; height:0.55rem; display:inline-block; }
.rails .dev { color:var(--ink-dim); font-weight:500; border-style:dashed; }

/* ===== two columns, stacks, steps ===== */
.twocol { display:grid; gap:2.5rem; grid-template-columns:1fr 1fr; align-items:start; }
.twocol.wide-left { grid-template-columns:1.1fr 0.9fr; }
@media (max-width:900px) { .twocol, .twocol.wide-left, .pay { grid-template-columns:1fr; } }
.stack { display:grid; gap:1rem; }
.stack .codeblock { margin:0; }
.twocol > .codeblock { margin:0; }

/* ===== tables ===== */
table { width:100%; border-collapse:collapse; font-size:0.92rem; }
.tablewrap { border:1px solid var(--line); border-radius:var(--radius); overflow:auto; background:var(--bg-raised); margin:1rem 0; }
th, td { padding:0.75rem 1rem; text-align:left; vertical-align:top; border-top:1px solid var(--line); }
thead th { border-top:0; background:var(--bg-sunken); font:600 0.68rem/1.4 var(--mono); letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); white-space:nowrap; }
td { color:var(--ink-dim); }
td strong { color:var(--ink); font-weight:600; }
td code { white-space:nowrap; }
td.num { font-family:var(--mono); font-size:0.84rem; white-space:nowrap; }
.compare td:first-child strong { display:block; }
.compare td:first-child span { display:block; font-size:0.83rem; color:var(--ink-faint); margin-top:0.2rem; }
.compare tr.toon td { background:var(--accent-soft); }

/* ===== callouts, details ===== */
.callout { margin:1.25rem 0; padding:0.9rem 1.1rem; border-left:3px solid var(--gold); background:var(--accent-soft);
  border-radius:0 var(--radius) var(--radius) 0; color:var(--ink-dim); font-size:0.95rem; }
.callout.warn { border-color:var(--bad); background:rgba(169,68,59,.08); }
.callout strong { color:var(--ink); }
.callout p + p { margin-top:0.6rem; }
details { border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-raised); }
details summary { cursor:pointer; padding:0.9rem 1.15rem; font-weight:600; color:var(--ink); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
details summary::-webkit-details-marker { display:none; }
details summary::after { content:"+"; color:var(--gold); font:600 1rem/1 var(--mono); }
details[open] summary::after { content:"−"; }
details > *:not(summary) { padding:0 1.15rem 1rem; color:var(--ink-dim); font-size:0.95rem; }
details > p { max-width:var(--measure); }
details pre { margin:0 1.15rem 1.15rem; }
.faq { display:grid; gap:0.6rem; max-width:52rem; }

/* ===== receipts ===== */
.receipts { list-style:none; padding:0; margin:0; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-raised); }
.receipts li { display:grid; grid-template-columns:4rem 6.5rem 1fr auto; gap:1rem; align-items:center; padding:0.6rem 1rem;
  border-top:1px solid var(--line); font:0.8rem/1.5 var(--mono); color:var(--ink-dim); }
.receipts li:first-child { border-top:0; }
.receipts li b { color:var(--ink); font-weight:600; }
.receipts li code { font-size:0.76rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:none; border:0; padding:0; color:var(--ink-dim); }
.receipts li.live { border-left:3px solid var(--good); }
@media (max-width:700px) { .receipts li { grid-template-columns:1fr 1fr; } .receipts li code { grid-column:1 / -1; } }

/* ===== landing: hero ===== */
.hero { position:relative; padding:4.5rem 0 4rem; overflow:hidden; }
.hero .wrap { position:relative; }
.hero h1 { position:relative; font-size:clamp(2rem, 7.8vw, 6.6rem); letter-spacing:-0.025em; line-height:0.93; max-width:14ch; }
.hero h1 span { display:block; color:var(--accent); white-space:nowrap; }
.hero .lede { font-size:clamp(1.05rem, 1.6vw, 1.22rem); max-width:36rem; }
.hero-meta { display:grid; grid-template-columns:minmax(0, 1fr); justify-items:start; gap:0.9rem; margin-top:1.5rem; }
.hero-meta .meta { margin:0; }
.hero-meta .meta span + span::before { content:"·"; margin:0 0.5rem; color:var(--line-strong); }
.hero-meta .new { display:inline-flex; align-items:center; gap:0.8rem; color:var(--ink); text-decoration:none; font-size:0.95rem; white-space:nowrap; }
.hero-meta .new b { padding:0.25rem 0.5rem; background:var(--gold); color:#2b2f36; font:700 0.64rem/1 var(--mono); letter-spacing:0.14em; text-transform:uppercase; }
.hero-meta .new code { background:none; border:0; padding:0; font-size:0.95em; color:var(--ink); }
.hero-meta .new i { font-style:normal; color:var(--ink-faint); transition:margin-left .12s ease; }
.hero-meta .new:hover i { margin-left:0.3rem; color:var(--accent); }
.hero .lede strong { color:var(--ink); }
/* The mark's drawing starts 24.6% down its square box. Its top edge is put level with the lede, so the headline runs clear above it. */
.hero .bigmark { --mw:min(42rem, 60vw); position:absolute; right:-6rem; top:calc(20rem - var(--mw) * 0.246); width:var(--mw); height:auto; pointer-events:none; }
@media (max-width:1200px) { .hero .bigmark { display:none; } }
.bigmark rect { fill:none; stroke:var(--ink); stroke-width:5; opacity:0.16; }
.bigmark .b { fill:var(--gold); fill-opacity:0.35; stroke:var(--gold); opacity:0.5; }
.bigmark .hole { stroke:var(--ink); opacity:0.16; }
.hero.split .wrap { display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); gap:3rem; align-items:center; }
.hero.split h1 { font-size:clamp(2.4rem, 4.8vw, 3.6rem); }
@media (max-width:900px) { .hero.split .wrap { grid-template-columns:1fr; gap:2.5rem; } .hero .bigmark { display:none; } }

/* ===== landing: the mechanics frame, the specs, the pay block ===== */
.frame { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); border:1px solid var(--line); background:var(--bg-raised); }
.frame > figure { margin:0; padding:1.5rem 1.5rem 1rem; align-self:center; }
.frame > .ev { border:0; border-left:1px solid var(--line); padding:1.25rem 1.5rem; }
@media (max-width:900px) { .frame { grid-template-columns:1fr; } .frame > .ev { border-left:0; border-top:1px solid var(--line); } }
.specs { margin:1px 0 0; padding:1px; display:grid; gap:1px; grid-template-columns:repeat(3, 1fr); }
.specs > div { padding:1.1rem 1.25rem; background:var(--bg-raised); box-shadow:0 0 0 1px var(--line); font-size:0.9rem; color:var(--ink-dim); }
.specs dt { font:600 0.68rem/1.4 var(--mono); letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:0.4rem; }
.specs dd { margin:0; }
.specs dd a { white-space:nowrap; }
@media (max-width:900px) { .specs { grid-template-columns:1fr 1fr; } }
.specs.rails3 { margin-top:0.5rem; }
.specs.rails3 > div { padding:0.9rem 1rem; font-size:0.86rem; }
.specs.rails3 dt { margin-bottom:0.35rem; }
.specs.rails3 dd b { display:block; color:var(--ink); font-weight:600; }
.specs.rails3 dd span { display:block; margin-top:0.15rem; color:var(--ink-faint); font:0.72rem/1.6 var(--mono); }
@media (max-width:900px) { .specs.rails3 { grid-template-columns:1fr; } }
.hero.split figure .meta { margin-top:0.8rem; }
@media (max-width:520px) { .specs { grid-template-columns:1fr; } }
#run { padding-top:0; }
#run .rows { border-top:0; }
.pay { margin-top:3rem; padding-top:2.5rem; border-top:1px solid var(--line); align-items:start; grid-template-columns:0.8fr 1.2fr; }
.pay .eyebrow { margin-top:0.2rem; }
.pay .ev pre { padding-top:0.2rem; }
@media (max-width:900px) { .pay { grid-template-columns:1fr; } }
@media (max-width:640px) { .pay .ev pre { white-space:pre-wrap; overflow-wrap:anywhere; } }
.pay h3 { font-size:1.5rem; margin-bottom:0.7rem; }
.pay p { color:var(--ink-dim); max-width:34rem; }
.pay .eyebrow { margin-bottom:0.9rem; }

/* ===== diagrams ===== */
.diagram { width:100%; height:auto; display:block; }
.diagram .box { fill:var(--bg-raised); stroke:var(--line-strong); stroke-width:1.2; }
.diagram .box.app { stroke:var(--good); }
.diagram .box.node { stroke:var(--gold); }
.diagram .t { fill:var(--ink); font:600 13px var(--body); }
.diagram .t.sm { font-size:12.5px; }
.diagram .s { fill:var(--ink-dim); font:12px var(--body); }
.diagram .s.cap { font:600 10.5px var(--mono); letter-spacing:0.12em; text-transform:uppercase; fill:var(--ink-faint); }
.diagram .m { fill:var(--ink-dim); font:11.5px var(--mono); }
.diagram .m.sm { font-size:10px; }
.diagram .m.hi { fill:var(--accent); }
.diagram .m.ok { fill:var(--good); }
.diagram .m.ac { fill:var(--accent); }
.diagram .arrow { stroke:var(--ink-dim); stroke-width:1.5; fill:none; marker-end:url(#ah); }
.diagram .arrow.gold { stroke:var(--gold); }
.diagram .arrow.ok { stroke:var(--good); }
.diagram .arrow.dash { stroke-dasharray:4 4; }
.diagram .pill { fill:var(--bg-sunken); stroke:var(--line); }
.diagram .pill.gold { stroke:var(--gold); fill:var(--accent-soft); }
.diagram .pill.chain { stroke:var(--gold); fill:var(--accent-soft); }
.diagram .wire { stroke:var(--line-strong); stroke-width:1.2; fill:none; }
.diagram .glow { fill:var(--accent-soft); }
.diagram .chip { fill:var(--bg-raised); stroke:var(--line-strong); }
.diagram .chip.on { stroke:var(--good); }
.diagram .chip.dash { stroke:var(--gold); stroke-dasharray:4 3; fill:transparent; }

/* ===== landing: the end ===== */
.end { position:relative; overflow:hidden; padding:6rem 0; border-top:1px solid var(--line); background:var(--bg-tint); }
.end h2 { font-size:clamp(2.6rem, 5.4vw, 4.6rem); letter-spacing:-0.025em; line-height:0.95; max-width:21ch; }
.end p { margin-top:1.4rem; max-width:34rem; color:var(--ink-dim); font-size:1.08rem; }
.end .bigmark { position:absolute; right:-5rem; bottom:-6rem; width:min(34rem, 50vw); height:auto; pointer-events:none; }
.end .meta { margin-top:1rem; max-width:none; font-size:0.78rem; }
.end .eyebrow { font-size:0.72rem; max-width:none; }
.end .cta { margin-top:1.75rem; }
@media (max-width:900px) { .end .bigmark { display:none; } }

/* ===== footer ===== */
footer { border-top:1px solid var(--line); padding:1.3rem 0; color:var(--ink-faint); font:0.74rem/1.7 var(--mono); }
footer .wrap { display:flex; flex-wrap:wrap; gap:0.8rem 1.4rem; align-items:center; }
footer nav { display:flex; flex-wrap:wrap; gap:1.1rem; }
footer a { color:var(--ink-dim); text-decoration:none; }
footer a:hover { color:var(--ink); }
footer .brand .mark { width:1.1rem; height:1.1rem; }
footer .fact { color:var(--ink-faint); }
footer .out { margin-left:auto; }
@media (max-width:700px) { footer .out { margin-left:0; } }

/* ===== docs layout ===== */
.docs { display:grid; grid-template-columns:15rem minmax(0, 1fr) 13rem; gap:3rem; padding-top:2.5rem; padding-bottom:5rem; }
@media (max-width:1180px) { .docs { grid-template-columns:15rem minmax(0, 1fr); } .toc { display:none; } }
@media (max-width:860px) { .docs { grid-template-columns:1fr; gap:1.5rem; } .sidebar { display:none; } .docs .mobilenav { display:block; } }
.mobilenav { display:none; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-raised); }
.mobilenav summary { cursor:pointer; padding:0.8rem 1rem; list-style:none; display:flex; justify-content:space-between; font:600 0.76rem/1.4 var(--mono); letter-spacing:0.1em; text-transform:uppercase; }
.mobilenav summary::-webkit-details-marker { display:none; }
.mobilenav summary::after { content:"+"; color:var(--gold); }
.mobilenav[open] summary::after { content:"−"; }
.mobilenav .group { padding:0 0.6rem 0.8rem; }
.sidebar { position:sticky; top:4.5rem; align-self:start; max-height:calc(100vh - 5.5rem); overflow:auto; font-size:0.9rem; padding-right:0.5rem; }
.sidebar .group, .mobilenav .group { margin-bottom:1.4rem; }
.sidebar h4, .mobilenav h4, .toc h4 { margin:0 0.75rem 0.5rem; }
.sidebar a, .mobilenav a { display:block; padding:0.3rem 0.75rem; border-left:2px solid transparent; color:var(--ink-dim); text-decoration:none; }
.sidebar a:hover, .mobilenav a:hover { color:var(--ink); }
.sidebar a.active, .mobilenav a.active { color:var(--ink); border-color:var(--gold); background:var(--accent-soft); font-weight:600; }
.toc { position:sticky; top:4.5rem; align-self:start; font-size:0.84rem; }
.toc a { display:block; padding:0.25rem 0.75rem; color:var(--ink-dim); text-decoration:none; border-left:1px solid var(--line); }
.toc a:hover { color:var(--ink); border-color:var(--gold); }

.doc { min-width:0; }
.doc .eyebrow { margin-bottom:1rem; }
.doc h1 { font-size:clamp(2rem, 4vw, 2.8rem); margin-bottom:0.8rem; }
.doc .lede { font-size:1.12rem; margin:0 0 2rem; }
.doc h2 { font-size:1.6rem; margin:2.75rem 0 0.9rem; padding-top:0.5rem; }
.doc h3 { font-size:1.12rem; margin:1.8rem 0 0.6rem; }
.doc h2 a.anchor, .doc h3 a.anchor { color:inherit; text-decoration:none; }
.doc h2 a.anchor:hover::after { content:" #"; color:var(--gold); font-weight:400; }
.doc p, .doc li { color:var(--ink-dim); }
.doc p { max-width:var(--measure); margin:0 0 0.9rem; }
.doc ul, .doc ol { max-width:var(--measure); padding-left:1.4rem; margin:0 0 1rem; }
.doc li { margin-bottom:0.4rem; }
.doc strong { color:var(--ink); font-weight:600; }
.doc hr { border:0; border-top:1px solid var(--line); margin:2rem 0; }
.doc pre, .doc .codeblock { margin:1rem 0; }
.doc .steps { list-style:none; padding:1px; margin:1rem 0 1.5rem; display:grid; gap:1px; grid-template-columns:repeat(auto-fit, minmax(10rem, 1fr)); max-width:none; }
.doc .steps li { padding:1rem 1.1rem; background:var(--bg-raised); font-size:0.92rem; margin:0; box-shadow:0 0 0 1px var(--line); }
.doc .steps li b { display:block; color:var(--gold); font:600 0.7rem/1 var(--mono); letter-spacing:0.12em; margin-bottom:0.5rem; }
.doc .steps li strong { display:block; margin-bottom:0.3rem; }
.paths { list-style:none; padding:1px; margin:1.5rem 0; display:grid; gap:1px; grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr)); max-width:none; }
.paths li { padding:1.2rem 1.3rem; background:var(--bg-raised); font-size:0.93rem; margin:0; box-shadow:0 0 0 1px var(--line); }
.paths li a.title { display:block; font:800 1.05rem/1.2 var(--display); letter-spacing:-0.03em; color:var(--ink); text-decoration:none; margin-bottom:0.45rem; }
.paths li a.title:hover { color:var(--accent); }
.pager { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:3.5rem; padding-top:1.5rem; border-top:1px solid var(--line); }
.pager a { display:block; padding:0.9rem 1.1rem; border:1px solid var(--line); border-radius:var(--radius); text-decoration:none; color:var(--ink); background:var(--bg-raised); font-weight:600; }
.pager a:hover { border-color:var(--gold); }
.pager a small { display:block; margin-bottom:0.25rem; color:var(--ink-faint); font:600 0.68rem/1.4 var(--mono); letter-spacing:0.12em; text-transform:uppercase; }
.pager a.next { text-align:right; }
.doc .source { margin-top:2.5rem; color:var(--ink-faint); font:0.78rem/1.6 var(--mono); }
.doc .path { list-style:none; padding:0; margin:1rem 0 0; max-width:none; border-top:1px solid var(--line); }
.doc .path li { display:grid; grid-template-columns:4rem minmax(0, 1fr); gap:0 1rem; padding:1.75rem 0; margin:0; border-bottom:1px solid var(--line); }
.doc .path .n { font:800 2.2rem/1 var(--display); letter-spacing:-0.05em; color:var(--line-strong); }
.doc .path h3 { margin:0.2rem 0 0.5rem; font-size:1.25rem; }
.doc .path h3 code { font-size:0.85em; }
.doc .path p { margin:0 0 1rem; }
.doc .path .ev { margin:0; }
.doc .see { margin:0.9rem 0 0; color:var(--ink-dim); font-size:0.92rem; }
.doc .see b { color:var(--ink); font-weight:600; }
.doc .ev + .see { margin-top:0.9rem; }
.doc .ev { margin:1rem 0; }
.doc .specs { margin:1rem 0 1.5rem; max-width:none; }
.doc .specs dd { font-size:0.9rem; }
@media (max-width:520px) { .doc .path li { grid-template-columns:2.4rem minmax(0, 1fr); gap:0 0.6rem; } .doc .path .n { font-size:1.4rem; padding-top:0.25rem; } .doc .path h3 { font-size:1.15rem; } }

/* ===== apps and agents: the marketplace shape ===== */
.ph { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:2rem 4rem; align-items:end; padding:4rem var(--gut) 3rem; max-width:var(--max); margin:0 auto; }
.ph h1 { font-size:clamp(2.6rem, 5.4vw, 4.4rem); letter-spacing:-0.025em; line-height:0.95; max-width:22ch; }
.ph .lede { max-width:40rem; }
.ph .trust { display:flex; gap:0.6rem; align-items:baseline; } .ph .trust code { white-space:nowrap; }
.ph .trust-x { margin-top:1.25rem; max-width:40rem; color:var(--ink-dim); font-size:0.95rem; }
.ph .dot { flex:none; width:0.5rem; height:0.5rem; border-radius:50%; position:relative; top:-1px; }
.ph .dot.live { background:var(--good); }
.ph .dot.idle { background:none; box-shadow:inset 0 0 0 2px var(--ink-faint); }
.ph-side { display:flex; flex-direction:column; align-items:flex-end; text-align:right; gap:0.5rem; color:var(--ink-faint); font:600 0.68rem/1.5 var(--mono); letter-spacing:0.14em; text-transform:uppercase; }
.ph-side b { font:800 3.4rem/1 var(--display); letter-spacing:-0.04em; color:var(--ink); }
.ph-side a { color:var(--accent); text-decoration:none; letter-spacing:0; text-transform:none; font:0.95rem/1.4 var(--body); margin-top:0.5rem; }
.ph-side a:hover { text-decoration:underline; }
@media (max-width:800px) { .ph { grid-template-columns:1fr; align-items:start; } .ph-side { align-items:flex-start; text-align:left; } }
.shelf { max-width:var(--max); margin:0 auto; padding:2.5rem var(--gut) 0; }
.shelf:last-child { padding-bottom:4rem; }
.shelf-head { padding-top:2rem; margin-bottom:1.5rem; border-top:1px solid var(--line); }
.shelf-head h2 { font-size:1.5rem; letter-spacing:-0.03em; }
.shelf-head p { margin-top:0.3rem; color:var(--ink-faint); font-size:0.9rem; }
.appgrid { list-style:none; padding:1px; margin:0; display:grid; gap:1px; grid-template-columns:repeat(auto-fill, minmax(21rem, 1fr)); }
.appgrid li { position:relative; display:flex; flex-direction:column; gap:0.75rem; padding:1.2rem 1.3rem 1.1rem; background:var(--bg-raised); box-shadow:0 0 0 1px var(--line); color:var(--ink-dim); font-size:0.92rem; transition:background .12s ease; }
.appgrid li:hover { background:color-mix(in srgb, var(--gold) 5%, var(--bg-raised)); }
.appgrid .head { display:flex; align-items:center; gap:0.7rem; color:var(--ink); text-decoration:none; min-width:0; }
.appgrid .head::after { content:""; position:absolute; inset:0; }
.appgrid .av { flex:none; width:2rem; height:2rem; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line-strong); background:var(--bg); overflow:hidden; }
.appgrid .av svg { width:1.25rem; height:1.25rem; display:block; }
/* The spaceturtle avatar is the Omarchy bar's TurtleIcon, drawing 1 and its stroke, held
   450 ms each as the panel holds them, so it paddles. Reduced motion holds drawing 1. */
.appgrid .av.turtle svg { width:1.4rem; height:1.4rem; fill:var(--ink); }
.appgrid .av.turtle .a { animation:paddle 0.9s steps(1) infinite; }
.appgrid .av.turtle .b { animation:paddle 0.9s steps(1) infinite; animation-delay:-0.45s; }
@keyframes paddle { 0%, 49.9% { opacity:1; } 50%, 100% { opacity:0; } }
@media (prefers-reduced-motion: reduce) { .appgrid .av.turtle .a, .appgrid .av.turtle .b { animation:none; } .appgrid .av.turtle .b { opacity:0; } }
.appgrid .av.letter { font:700 0.95rem/1 var(--mono); color:var(--gold); }
.appgrid .title { font:400 0.95rem/1.25 var(--mono); letter-spacing:-0.01em; min-width:0; overflow-wrap:anywhere; }
.appgrid .title .owner { color:var(--ink-faint); }
.appgrid .title b { font-weight:700; color:var(--ink); }
.appgrid .go { margin-left:auto; color:var(--ink-faint); font:400 1rem/1 var(--body); transition:color .12s ease; }
.appgrid li:hover .title b, .appgrid li:hover .go { color:var(--accent); }
.appgrid .badge { align-self:flex-start; }
.appgrid p { margin:0; }
.appgrid .meta { display:flex; flex-wrap:wrap; gap:0.4rem 1rem; margin-top:auto; padding-top:0.8rem; color:var(--ink-dim); font:0.76rem/1.5 var(--mono); }
.appgrid .stat { display:inline-flex; align-items:center; gap:0.4rem; }
.appgrid .star { font-style:normal; color:var(--gold); }
.appgrid .lang { width:0.6rem; height:0.6rem; border-radius:50%; display:inline-block; }
.appgrid .ver { color:var(--ink-faint); }
.appgrid .foot { padding-top:0.7rem; border-top:1px dashed var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:0.3rem 1rem; color:var(--ink-faint); font:0.74rem/1.6 var(--mono); }
.appgrid .foot b { color:var(--accent); font-weight:600; }
.appgrid .foot a, .appgrid p a { position:relative; z-index:1; }
.appgrid .foot a { color:var(--accent); text-decoration:none; }
.appgrid .foot code { background:none; border:0; padding:0; color:var(--ink-dim); font-size:1em; }
.publish { padding:1.8rem 2rem 2rem; border:1px solid var(--line-strong); background:var(--bg-raised); }
.publish .kicker { color:var(--gold); font:600 0.78rem/1.4 var(--mono); margin-bottom:0.8rem; }
.publish h3 { font-size:1.6rem; letter-spacing:-0.03em; margin-bottom:0.8rem; }
.publish p { color:var(--ink-dim); max-width:var(--measure); }
.publish .cta { margin-top:1.4rem; }

/* ===== ecosystem ===== */
.priced { list-style:none; padding:1px; margin:0; display:grid; gap:1px; grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr)); }
.priced li { padding:1.4rem 1.4rem 1.3rem; background:var(--bg-raised); box-shadow:0 0 0 1px var(--line); display:flex; flex-direction:column; gap:0.55rem; font-size:0.93rem; color:var(--ink-dim); position:relative; }
.priced li::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--gold); }
.priced li > b { font:800 2rem/1 var(--display); letter-spacing:-0.04em; color:var(--ink); }
.priced li > b small { font:500 0.85rem/1 var(--body); letter-spacing:0; color:var(--ink-dim); margin-left:0.2rem; }
.priced .what { color:var(--ink-faint); font:600 0.7rem/1.4 var(--mono); letter-spacing:0.12em; text-transform:uppercase; margin-top:-0.25rem; }
.priced .top { display:flex; justify-content:space-between; align-items:center; gap:0.6rem; margin-top:0.5rem; padding-top:0.8rem; border-top:1px solid var(--line); }
.priced .top a { font:700 0.98rem/1.2 var(--mono); letter-spacing:-0.02em; color:var(--ink); text-decoration:none; }
.priced .top a:hover { color:var(--accent); }
.priced li > p { margin:0; }
.priced .foot { margin-top:auto; padding-top:0.5rem; color:var(--ink-faint); font:0.76rem/1.6 var(--mono); }
.live-grid { display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr); gap:1.5rem; align-items:start; }
.live-grid .tablewrap { margin:0; }
.live-grid .codeblock { margin:0 0 1rem; }
@media (max-width:980px) { .live-grid { grid-template-columns:1fr; } }
.roles { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
@media (max-width:860px) { .roles { grid-template-columns:1fr; } }
.role { border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-raised); overflow:hidden; }
.role h3 { padding:0.75rem 1.3rem; background:var(--bg-sunken); border-bottom:1px solid var(--line); font:600 0.7rem/1.4 var(--mono); letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-faint); }
.role ul { list-style:none; padding:0; margin:0; }
.role li { padding:1.1rem 1.3rem; display:flex; flex-direction:column; gap:0.5rem; font-size:0.93rem; color:var(--ink-dim); }
.role li + li { border-top:1px solid var(--line); }
.role .top { display:flex; justify-content:space-between; align-items:center; gap:0.6rem; }
.role .top a { font:700 0.98rem/1.2 var(--mono); letter-spacing:-0.02em; color:var(--ink); text-decoration:none; }
.role .top a:hover { color:var(--accent); }
.role li > p { margin:0; }
.role strong { color:var(--ink); }
.role .more { color:var(--ink-faint); font:0.76rem/1.6 var(--mono); }
.role a.more { color:var(--accent); text-decoration:none; }
.role a.more:hover { text-decoration:underline; }
.railrows { list-style:none; padding:0; margin:0; border-top:1px solid var(--line); }
.railrows li { display:grid; grid-template-columns:13rem minmax(0, 1fr) 11rem; gap:1.5rem; padding:1.4rem 0; border-bottom:1px solid var(--line); font-size:0.93rem; color:var(--ink-dim); }
.railrows .who { display:flex; flex-direction:column; align-items:flex-start; gap:0.5rem; }
.railrows .who a { display:flex; align-items:center; gap:0.6rem; font:700 0.98rem/1.2 var(--mono); letter-spacing:-0.02em; color:var(--ink); text-decoration:none; }
.railrows .who a:hover { color:var(--accent); }
.railrows .who i { width:0.6rem; height:0.6rem; display:inline-block; flex:none; border:1px solid var(--line-strong); }
.railrows .how h4 { font:800 1rem/1.25 var(--display); letter-spacing:-0.025em; text-transform:none; color:var(--ink); margin-bottom:0.45rem; }
.railrows .how p { margin:0; max-width:var(--measure); }
.railrows .link { display:flex; flex-direction:column; gap:0.3rem; color:var(--ink-faint); font:0.76rem/1.6 var(--mono); overflow-wrap:anywhere; }
.railrows .link a { color:var(--accent); text-decoration:none; }
.railrows .link a:hover { text-decoration:underline; }
.railrows .link code { white-space:normal; }
@media (max-width:900px) { .railrows li { grid-template-columns:1fr; gap:0.7rem; } .railrows .link { flex-direction:row; flex-wrap:wrap; gap:0.3rem 1rem; } }
.cta-band { padding:4rem 0; border-top:1px solid var(--line); background:var(--bg-tint); text-align:center; }
.cta-band h2 { font-size:clamp(2rem, 4.4vw, 3.2rem); margin:0 auto; }
.cta-band p { margin:1rem auto 0; max-width:40rem; color:var(--ink-dim); font-size:1.05rem; }
.cta-band .cta { justify-content:center; }
@media (max-width:640px) { .cmd { display:flex; flex-wrap:wrap; width:100%; } .cmd code { flex:1 1 100%; white-space:pre-wrap; overflow-wrap:anywhere; align-items:flex-start; font-size:0.8rem; }
  .cmd button { flex:1 1 100%; justify-content:flex-start; border-left:0; border-top:1px solid var(--line-strong); padding:0.7rem 1.2rem; } }
@media (max-width:460px) { .ev .hd i { display:none; } .hero h1 { font-size:9vw; } }