/* ==========================================================================
   Calimero /v2 site — design A ("Sealed")
   Paper and ink with one wax-seal red; light by default, dark variant.
   Every page links this file; page-only CSS goes in a small <style> on that page.

   COMPONENT INDEX (class → what it is)
   Variables ..... :root vars (--paper --card --ink --ink-2 --muted --rule --seal --ok --warn,
                   --inv* for inverse panels, --hard offset shadow, --band final CTA)
   Themes ........ light default; dark via prefers-color-scheme (unless data-theme="light")
                   or html[data-theme="dark"] (set by v2.js + the pre-paint script)
   Layout ........ .wrap  .sr (visually hidden)  .skip
   Type .......... h1 (em = red second line)  h2  .lede  .premise  .eyebrow  .kicker  .crumbs
   Status ........ .tag + .tag--ok (Available) | .tag--preview (Preview) | .tag--next (Coming next)
                   .tbd = visible [PLACEHOLDER]
   Buttons ....... .btn + .btn--ink (primary) | .btn--line (secondary)  .link  .ctas (row)
   Nav ........... .site-nav .brand .logo .nav-groups .nav-top .menu .nav-right .signin
                   .theme-btn .menu-btn .mobile-nav   (markup: _partials.html)
   Footer ........ .site-footer .foot-grid .foot-col .foot-bottom .socials
   Sections ...... section.s > .wrap > .s-head (.s-num + h2 + p)  .s-foot  .s-tail
                   .page-hero (.split for text + figure)  .hero (home only)
   Cards/lists ... .link-cards(.cols-4) > li > a.link-card(.dark)  .one-liners  .repos
                   .points (numbered list)  .why (5 struck tiles)  .steps(.four) > .step
                   .modes2 + .sync + .both (Cloud / your servers / both)  .mode(.pick)
                   .uses > .use  .demos > .demo (.demo-media .wins .win)  .tracks .track .gh .sdks
   Figures ....... .fan-figure/.fan (hero bundle SVG)  .compare/.chores/.calm/.ticks (problem)
                   .trail (+ .compact) .trail-note (attestation steps)  .seal-big
                   .slabs > .slab(.you/.hw) (layer stack)  .cmp/.fig2 > .cmp-col (two-column figures)
                   .nd(.tee/.danger/.ok/.hi/.client) .ar(.tall/.short/.bi) .har(.left) .grid2 .grid3
                   .one (attested node box) .shards/.shard/.ctx(.a/.b/.c) .fan3 .addnode .notes
                   .code-card  .browser  .console/.mrows/.mrow  .cx (Cloud console)
   Tables ........ table.vt (td.us = Calimero column; stacks into cards on phones; use data-h)
   Quickstart .... .qs .tabs [role=tab] .panel .copy  (behaviour: v2.js data-tabs / data-copy)
   FAQ ........... .faq > details > summary + p
   Read more ..... details.more > summary + .more-body   (closed by default; v2.js opens it for a URL hash
                   inside it and opens all when printing). Put figures, tables and long text in .more-body.
   Rhythm ........ .split (text + visual, visual RIGHT) + .split--flip (visual LEFT)  > .split-text + .split-visual
                   section.s.s--ink (full-bleed ink band; children recolour themselves)
                   .stats > .stat (big number + label; data-gh fills live GitHub numbers)
                   .pull (big one-line statement)  .punch (kicker + short h2 + lede + .keypoints + Read more)
                   .keypoints (3 key points: <li><b>Point</b> one line</li>)
   Backers ....... section.backers > .wrap > .backers-h + .backers-track > ul.backers-row (two copies; marquee)
   Live data ..... [data-gh="stars:owner/repo" | "release:owner/repo"] hidden until filled by v2.js
   Final CTA ..... section.final (seal-red band)  .band-cta (small inline panel)
   ========================================================================== */

/* ==========================================================================
   FONTS  self-hosted, variable weight (Inter Tight 400–800, JetBrains Mono 400–600)
   ========================================================================== */
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/InterTight-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/InterTight-latin.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: 400 600; font-display: swap; src: url(fonts/JetBrainsMono-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/JetBrainsMono-latin.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; }

/* Direction A — "Sealed". Paper and ink with one wax-seal red. The page
   reads like a certified document: hairline rules, numbered sections,
   mono annotations, and a verification trail as its centrepiece. */
:root {
  --paper: #f4f1ea;
  --paper-2: #ece7dc;
  --card: #fffdf8;
  --ink: #111111;
  --ink-2: #3a3935;
  --muted: #5c5a54;
  --rule: #d6d0c3;
  --seal: #b8261a;
  --seal-soft: #f5e1da;
  --ok: #1c6a43;
  --ok-soft: #dcefe3;
  --warn: #8a5a00;
  --warn-soft: #f6ead0;
  --inv: #111111;
  --inv-text: #f4f1ea;
  --inv-muted: #c9c3b6;
  --inv-rule: #333333;
  --inv-accent: #ff9a8f;
  --tick: #7fd3a4;
  --on-seal: #ffffff;
  --on-seal-muted: #fbe1dc;
  --seal-deep: #8f1d14;
  --on-ok: #ffffff;
  --band: #b8261a;
  --hard: #111111;
  --box-line: #a19c90;
  --sk: #e2dccf;
  --sk-2: #d9d3c6;
  --nav-bg: rgb(244 241 234 / 94%);
  --soft-shadow: rgb(17 17 17 / 35%);
  --gh-tbd: #2a1513;
  color-scheme: light;
  --sans: "Inter Tight", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --max: 1200px;
  --gut: clamp(16px, 4vw, 40px);
}
/* Dark variant: same system, ink ground, paper text, a lighter seal red. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --paper: #121211;
    --paper-2: #191917;
    --card: #1c1b18;
    --ink: #f1ede4;
    --ink-2: #cdc7ba;
    --muted: #a29d91;
    --rule: #34322d;
    --seal: #ef6150;
    --seal-soft: #3a1914;
    --ok: #62c792;
    --ok-soft: #14291d;
    --warn: #e3ac45;
    --warn-soft: #2e2310;
    --inv: #232220;
    --inv-text: #f1ede4;
    --inv-muted: #b5afa3;
    --inv-rule: #3a3833;
    --inv-accent: #ff9a8f;
    --tick: #62c792;
    --on-seal: #121211;
    --on-seal-muted: #2a0e0a;
    --seal-deep: #c9402f;
    --on-ok: #0f1f16;
    --band: #9e2418;
    --hard: #3d3b35;
    --box-line: #5a564e;
    --sk: #2c2a26;
    --sk-2: #34322d;
    --nav-bg: rgb(18 18 17 / 92%);
    --soft-shadow: rgb(0 0 0 / 60%);
    --gh-tbd: #3a1914;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #121211;
  --paper-2: #191917;
  --card: #1c1b18;
  --ink: #f1ede4;
  --ink-2: #cdc7ba;
  --muted: #a29d91;
  --rule: #34322d;
  --seal: #ef6150;
  --seal-soft: #3a1914;
  --ok: #62c792;
  --ok-soft: #14291d;
  --warn: #e3ac45;
  --warn-soft: #2e2310;
  --inv: #232220;
  --inv-text: #f1ede4;
  --inv-muted: #b5afa3;
  --inv-rule: #3a3833;
  --inv-accent: #ff9a8f;
  --tick: #62c792;
  --on-seal: #121211;
  --on-seal-muted: #2a0e0a;
  --seal-deep: #c9402f;
  --on-ok: #0f1f16;
  --band: #9e2418;
  --hard: #3d3b35;
  --box-line: #5a564e;
  --sk: #2c2a26;
  --sk-2: #34322d;
  --nav-bg: rgb(18 18 17 / 92%);
  --soft-shadow: rgb(0 0 0 / 60%);
  --gh-tbd: #3a1914;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--seal); outline-offset: 3px; }
.wrap { 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); white-space: nowrap; }
.skip:focus { position: fixed; left: 12px; top: 12px; z-index: 50; width: auto; height: auto; clip: auto; background: var(--ink); color: var(--paper); padding: 10px 14px; }
code, .mono { font-family: var(--mono); }
.tbd { font-family: var(--mono); font-size: .82em; font-weight: 600; background: var(--seal-soft); color: var(--seal); padding: .1em .4em; border: 1px dashed var(--seal); white-space: nowrap; }

/* Status stamps */
.tag { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 5px 7px; border: 1px solid currentColor; white-space: nowrap; }
.tag::before { content: ""; width: 6px; height: 6px; background: currentColor; }
.tag--ok { color: var(--ok); background: var(--ok-soft); }
.tag--preview { color: var(--warn); background: var(--warn-soft); }
.tag--next { color: var(--seal); background: var(--seal-soft); }
.tag--next::before { background: transparent; border: 1px solid currentColor; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 20px; font: 600 15px/1 var(--sans); text-decoration: none; border: 1px solid var(--ink); cursor: pointer; background: none; color: var(--ink); white-space: nowrap; }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--seal); border-color: var(--seal); }
.btn--line:hover { background: var(--ink); color: var(--paper); }
.link { font: 600 15px/1.4 var(--sans); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.link:hover { color: var(--seal); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Hero */
.hero { padding: clamp(48px, 8vw, 104px) 0 clamp(56px, 8vw, 104px); border-bottom: 1px solid var(--rule); }
.hero .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.pill { display: inline-flex; align-items: center; gap: 10px; font: 500 12.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--seal); border: 1px solid var(--seal); padding: 8px 12px; margin: 0 0 28px; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--seal); }
h1 { font-weight: 800; font-size: clamp(44px, 6.4vw, 84px); line-height: .96; letter-spacing: -.045em; margin: 0 0 26px; }
h1 em { font-style: normal; color: var(--seal); display: block; }
.lede { font-size: clamp(18px, 1.5vw, 20px); color: var(--ink-2); max-width: 40ch; margin: 0 0 34px; }
@media (max-width: 960px) { .hero .wrap { grid-template-columns: 1fr; } }

.fan { width: 100%; height: auto; display: block; }
.fan text { font-family: var(--sans); }
.fan .m { font-family: var(--mono); }
.fan-figure { margin: 0; background: var(--card); border: 1px solid var(--rule); box-shadow: 0 30px 60px -36px var(--soft-shadow); padding: clamp(14px, 2vw, 24px); }
.fan-figure figcaption { display: flex; justify-content: space-between; gap: 12px; font: 500 11.5px/1.4 var(--mono); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px dashed var(--rule); padding-bottom: 12px; margin-bottom: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .fan .flow { stroke-dasharray: 5 7; animation: flow 1.4s linear infinite; }
  @keyframes flow { to { stroke-dashoffset: -24; } }
  .fan .badge { animation: pop .5s cubic-bezier(.2,.9,.3,1.4) both; transform-box: fill-box; transform-origin: center; }
  .fan .badge.b2 { animation-delay: .25s; } .fan .badge.b3 { animation-delay: .5s; }
  @keyframes pop { from { transform: scale(0); opacity: 0; } }
}

/* Sections */
section.s { padding: clamp(64px, 9vw, 116px) 0; border-bottom: 1px solid var(--rule); }
.s-head { display: grid; grid-template-columns: 200px 1fr; gap: 32px; margin-bottom: 52px; }
.s-num { font: 600 13px/1.6 var(--mono); color: var(--seal); letter-spacing: .08em; text-transform: uppercase; margin: 6px 0 0; }
h2 { font-weight: 800; font-size: clamp(34px, 4.6vw, 58px); line-height: 1; letter-spacing: -.04em; margin: 0 0 18px; max-width: 18ch; }
.s-head p { color: var(--ink-2); max-width: 60ch; margin: 0; font-size: 18px; }
.s-foot { margin-top: 40px; }
@media (max-width: 760px) { .s-head { grid-template-columns: 1fr; gap: 10px; margin-bottom: 36px; } }

/* Problem */
.compare { display: grid; grid-template-columns: 1.1fr .9fr; border: 1px solid var(--ink); }
.compare > div { padding: clamp(22px, 3vw, 36px); }
.compare h3 { font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; margin: 0 0 20px; display: flex; justify-content: space-between; gap: 12px; }
.chores { list-style: none; margin: 0; padding: 0; }
.chores li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 11px 0; border-top: 1px solid var(--rule); color: var(--muted); }
.chores li::before { content: ""; width: 14px; height: 14px; margin-top: 5px; border: 1.5px solid var(--box-line); }
.chores li:last-child { color: var(--ink-2); }
.chores li:last-child::before { border-color: var(--seal); background: repeating-linear-gradient(45deg, var(--seal) 0 2px, transparent 2px 5px); }
.calm { background: var(--inv); color: var(--inv-text); border-left: 1px solid var(--ink); display: flex; flex-direction: column; }
.calm h3 { color: var(--inv-muted); }
.bundle-chip { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--inv-rule); margin-bottom: 18px; }
.bundle-chip svg { flex: none; }
.bundle-chip b { font: 600 15px/1.2 var(--mono); display: block; }
.bundle-chip span { font: 400 12px/1.4 var(--mono); color: var(--inv-muted); }
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--inv-rule); }
.ticks li::before { content: "✓"; font: 700 14px/24px var(--mono); color: var(--tick); }
@media (max-width: 820px) { .compare { grid-template-columns: 1fr; } .calm { border-left: 0; border-top: 1px solid var(--ink); } }


/* Why Calimero */
.why { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 2px solid var(--ink); border-left: 1px solid var(--rule); }
.why li { display: flex; flex-direction: column; gap: 12px; padding: 24px 22px 26px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--card); }
.why .k { font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--seal); }
.why .old { margin: 0; color: var(--muted); font-size: 15px; }
.why .old s { text-decoration-color: var(--seal); text-decoration-thickness: 1.5px; }
.why .new { margin: 0; padding-top: 12px; border-top: 1px dashed var(--rule); color: var(--ink); font-size: 16px; }
@media (max-width: 1180px) { .why { grid-template-columns: 1fr 1fr; } .why li:last-child { grid-column: 1 / -1; } }
@media (max-width: 640px) { .why { grid-template-columns: 1fr; } }

/* The monolith is back */
.s-head .kicker, .kicker { display: inline-block; font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--on-seal); background: var(--seal); padding: 6px 9px; margin: 0 0 16px; font-size: 12px; }
.stack-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.slabs { list-style: none; margin: 0; padding: 0; border: 1px solid var(--ink); background: var(--card); box-shadow: 10px 10px 0 var(--hard); }
.slab { display: grid; grid-template-columns: 34px 1fr auto; gap: 4px 14px; align-items: baseline; padding: 15px 18px; border-top: 1px solid var(--rule); }
.slab:first-child { border-top: 0; }
.slab .n { font: 600 12px/1.6 var(--mono); color: var(--muted); grid-row: span 2; }
.slab b { font-size: 18px; letter-spacing: -.015em; }
.slab span.d { grid-column: 2 / -1; color: var(--ink-2); font-size: 14.5px; }
.slab em { font: 600 10.5px/1 var(--mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.slab.you { background: var(--seal); color: var(--on-seal); border-top-color: var(--seal-deep); }
.slab.you .n, .slab.you span.d, .slab.you em { color: var(--on-seal-muted); }
.slab.hw { background: var(--inv); color: var(--inv-text); }
.slab.hw .n, .slab.hw span.d, .slab.hw em { color: var(--inv-muted); }
.slab-cap { display: flex; justify-content: space-between; gap: 12px; font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 10px 18px; border-bottom: 1px solid var(--ink); background: var(--paper); }
.slab-cap span:first-child { color: var(--seal); }
.usual { border: 1px solid var(--rule); background: var(--paper-2); padding: 22px; }
.usual h3, .ours h3 { margin: 0 0 14px; font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.scatter { position: relative; display: flex; flex-wrap: wrap; gap: 10px; }
.scatter span { font: 500 12.5px/1 var(--mono); background: var(--card); border: 1px dashed var(--box-line); padding: 9px 10px; color: var(--ink-2); }
.scatter span:nth-child(odd) { transform: rotate(-1.5deg); }
.scatter span:nth-child(3n) { transform: rotate(1.5deg); }
.vs-mark { text-align: center; font: 600 12px/1 var(--mono); letter-spacing: .12em; color: var(--muted); padding: 14px 0; }
.ours { border: 1px solid var(--ink); background: var(--card); padding: 22px; }
.ours h3 { color: var(--seal); }
.onenode { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--ink); background: var(--inv); color: var(--inv-text); }
.onenode b { font: 600 15px/1.2 var(--mono); display: block; }
.onenode small { font: 400 12px/1.4 var(--mono); color: var(--inv-muted); }
.closing-line { margin: 44px 0 0; padding-top: 22px; border-top: 2px solid var(--ink); font-weight: 800; font-size: clamp(24px, 3vw, 36px); letter-spacing: -.035em; line-height: 1.1; }
.closing-line em { font-style: normal; color: var(--seal); }
@media (max-width: 980px) { .stack-grid { grid-template-columns: 1fr; } }
/* DIY enclaves vs one attested node */
.stack-solo { max-width: 760px; }
.cmp-title { font-size: clamp(24px, 2.8vw, 34px); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; margin: 64px 0 24px; max-width: 26ch; }
.cmp { margin: 0; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--ink); background: var(--card); }
.cmp-col { padding: 22px 22px 24px; min-width: 0; }
.cmp-col + .cmp-col { border-left: 1px solid var(--ink); }
.cmp-col.diy { background: var(--paper-2); }
.cmp-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); font: 600 11.5px/1.35 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.cmp-h span:last-child { color: var(--muted); white-space: nowrap; }
.cmp-col.cal .cmp-h span:first-child { color: var(--seal); }
.flow { display: flex; flex-direction: column; align-items: stretch; }
.nd { position: relative; border: 1px solid var(--ink); background: var(--card); padding: 9px 11px; min-width: 0; }
.nd b { display: block; font-size: 14px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.nd small { display: block; margin-top: 3px; font: 400 11px/1.35 var(--mono); color: var(--muted); }
.nd.tee::after { content: "TEE"; position: absolute; top: -1px; right: -1px; font: 600 9px/1 var(--mono); letter-spacing: .08em; padding: 3px 4px; background: var(--ink); color: var(--paper); }
.nd.danger { border: 1.5px dashed var(--seal); background: var(--seal-soft); }
.nd.danger small { color: var(--seal); font-weight: 600; }
.nd.client { align-self: center; padding: 7px 16px; font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; }
.ar { position: relative; height: 26px; }
.ar::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 6px; border-left: 1px solid var(--ink); }
.ar::after { content: ""; position: absolute; left: calc(50% - 4px); bottom: 0; border: 4px solid transparent; border-top: 6px solid var(--ink); border-bottom: 0; }
.ar.tall { height: 52px; }
.cal .ar.tall:last-of-type { margin-top: 8px; }
.ar .lab { position: absolute; left: calc(50% + 12px); top: 50%; transform: translateY(-60%); font: 500 11px/1.2 var(--mono); color: var(--ink-2); max-width: calc(50% - 14px); }
.ar.bi::before { top: 6px; }
.cal .ar.bi { margin-top: 16px; }
.ar.bi > i { position: absolute; left: calc(50% - 4px); top: 0; border: 4px solid transparent; border-bottom: 6px solid var(--ink); border-top: 0; }
.grid3 { display: grid; grid-template-columns: 1fr 18px 1fr 18px 1fr; align-items: stretch; }
.har { position: relative; }
.har::before { content: ""; position: absolute; left: 0; right: 5px; top: 50%; border-top: 1px solid var(--ink); }
.har::after { content: ""; position: absolute; right: 0; top: calc(50% - 4px); border: 4px solid transparent; border-left: 6px solid var(--ink); border-right: 0; }
.har.left::before { left: 5px; right: 0; }
.har.left::after { right: auto; left: 0; border-left: 0; border-right: 6px solid var(--ink); }
.grid3 .ar { grid-column: 1; }
.span3 { grid-column: 3 / -1; }
.span-all { grid-column: 1 / -1; }
.cmp-cap { margin: 18px 0 0; padding-top: 12px; border-top: 1px dashed var(--rule); font-size: 14px; color: var(--ink-2); }
.legend { display: flex; align-items: center; gap: 8px; margin-top: 8px; font: 500 11.5px/1.3 var(--mono); color: var(--muted); }
.legend i { flex: none; width: 22px; height: 12px; border: 1.5px dashed var(--seal); background: var(--seal-soft); }
.one { border: 1px solid var(--ink); background: var(--card); box-shadow: 8px 8px 0 var(--hard); }
.one-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; background: var(--seal); color: var(--on-seal); font: 600 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.one-h span:last-child { white-space: nowrap; }
.one ul { list-style: none; margin: 0; padding: 12px; display: grid; gap: 8px; }
.one li.r { border: 1px solid var(--ink); padding: 10px 12px; font-size: 14px; font-weight: 700; letter-spacing: -.01em; background: var(--paper); }
.one li.r small { display: block; font: 400 11px/1.35 var(--mono); color: var(--muted); font-weight: 400; margin-top: 2px; }
.one .proof { margin: 0 12px 12px; padding-top: 10px; border-top: 1px dashed var(--rule); display: grid; gap: 6px; }
.one .proof p { margin: 0; font: 500 11.5px/1.4 var(--mono); color: var(--ink-2); display: grid; grid-template-columns: 16px 1fr; gap: 6px; }
.one .proof p::before { content: "✓"; color: var(--ok); font-weight: 700; }
@media (max-width: 900px) {
  .cmp { grid-template-columns: 1fr; }
  .cmp-col + .cmp-col { border-left: 0; border-top: 1px solid var(--ink); }
}
@media (max-width: 420px) {
  .cmp-col { padding: 18px 14px 20px; }
  .nd { padding: 8px 8px; }
  .nd b { font-size: 12.5px; }
  .nd small { font-size: 10px; }
  .grid3 { grid-template-columns: 1fr 14px 1fr 14px 1fr; }
  .cmp-h { flex-direction: column; gap: 6px; }
  .one { box-shadow: 5px 5px 0 var(--hard); }
}

@media (max-width: 520px) {
  .slab { grid-template-columns: 26px 1fr; padding: 13px 14px; }
  .slab em { grid-column: 2; grid-row: 3; }
  .slab b { font-size: 16.5px; }
  .slabs { box-shadow: 6px 6px 0 var(--hard); }
  .slab-cap { padding: 10px 14px; font-size: 10px; }
}

/* The UI ships inside the app */
.fe-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.fe-vis { display: grid; gap: 16px; min-width: 0; }
.code-card { border: 1px solid var(--ink); background: var(--inv); color: var(--inv-text); min-width: 0; }
.code-card .bar { font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--inv-muted); padding: 10px 16px; border-bottom: 1px solid var(--inv-rule); }
.code-card pre { margin: 0; padding: 18px 16px; overflow-x: auto; font: 400 13.5px/1.85 var(--mono); }
.code-card .p { color: var(--inv-accent); user-select: none; }
.code-card .o { color: var(--inv-muted); }
.code-card .ok { color: var(--tick); }
.browser { border: 1px solid var(--ink); background: var(--card); box-shadow: 10px 10px 0 var(--ink); min-width: 0; }
.browser .bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--rule); }
.browser .dots { display: flex; gap: 6px; } .browser .dots i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--box-line); }
.browser .addr { flex: 1; display: flex; align-items: center; gap: 8px; font: 500 12.5px/1 var(--mono); background: var(--paper); border: 1px solid var(--rule); padding: 7px 10px; min-width: 0; overflow: hidden; white-space: nowrap; }
.browser .addr::before { content: ""; flex: none; width: 9px; height: 9px; background: var(--ok); }
.browser .page { padding: 22px; display: grid; grid-template-columns: 120px 1fr; gap: 18px; }
.browser .side i { display: block; height: 9px; background: var(--sk); margin-bottom: 12px; width: 80%; }
.browser .side i:first-child { background: var(--seal); width: 60%; }
.browser .main b { display: block; font-size: 20px; letter-spacing: -.02em; margin-bottom: 12px; }
.browser .main i { display: block; height: 9px; background: var(--sk); margin-bottom: 10px; }
.browser .main i:nth-child(3) { width: 85%; } .browser .main i:nth-child(4) { width: 65%; }
.browser .served { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 10px 14px; border-top: 1px dashed var(--rule); font: 500 11.5px/1.4 var(--mono); color: var(--muted); }
.browser .served span::before { content: "✓ "; color: var(--ok); }
@media (max-width: 980px) { .fe-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .browser .page { grid-template-columns: 1fr; } .browser .side { display: none; } .browser { box-shadow: 6px 6px 0 var(--hard); } .code-card pre { font-size: 12.5px; } }

/* How it works */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--ink); list-style: none; margin: 0; padding: 0; }
.step { padding: 28px 28px 8px 0; }
.step + .step { padding-left: 28px; border-left: 1px solid var(--rule); }
.step .n { font: 800 56px/1 var(--sans); letter-spacing: -.05em; color: var(--seal); }
.step h3 { font-size: 26px; letter-spacing: -.02em; margin: 14px 0 8px; }
.step p { color: var(--ink-2); margin: 0 0 18px; }
.hint { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font: 400 13px/1.4 var(--mono); color: var(--muted); padding-top: 14px; border-top: 1px dashed var(--rule); }
.hint code { background: var(--card); border: 1px solid var(--rule); padding: 4px 8px; color: var(--ink); }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } .step + .step { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); } }

/* Three ways to run */
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mode { background: var(--card); border: 1px solid var(--rule); padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.mode.pick { border-color: var(--ink); box-shadow: 6px 6px 0 var(--hard); }
.mode .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.mode h3 { font-size: 26px; letter-spacing: -.02em; margin: 0; }
.mode p { color: var(--ink-2); margin: 0; }
.mode .next { margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--rule); display: grid; gap: 8px; font-size: 14.5px; color: var(--muted); justify-items: start; }
.modes2 { display: grid; grid-template-columns: 1fr 64px 1fr; align-items: stretch; }
.sync { position: relative; display: flex; align-items: center; justify-content: center; }
.sync::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--ink); }
.sync span { position: relative; width: 42px; height: 42px; display: grid; place-items: center; background: var(--paper); border: 1px solid var(--ink); font: 600 17px/1 var(--mono); }
.both { margin-top: 24px; display: grid; grid-template-columns: 220px 1fr; gap: 12px 32px; align-items: baseline; background: var(--inv); color: var(--inv-text); padding: 24px 28px; border: 1px solid var(--ink); }
.both h3 { margin: 0; font-size: 22px; letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; }
.both h3::before { content: "⇄"; font: 600 16px/1 var(--mono); color: var(--inv-accent); }
.both p { margin: 0; color: var(--inv-muted); }
@media (max-width: 920px) {
  .modes2 { grid-template-columns: 1fr; }
  .sync { height: 64px; }
  .sync::before { left: 50%; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 1px dashed var(--ink); }
  .both { grid-template-columns: 1fr; }
}

/* Calimero Cloud */
.cloud-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.points { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.points li { display: grid; grid-template-columns: 44px 1fr; gap: 4px 12px; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.points .pn { grid-row: span 2; font: 600 13px/1.6 var(--mono); color: var(--seal); }
.points h3 { margin: 0; font-size: 21px; letter-spacing: -.02em; }
.points p { margin: 0; color: var(--ink-2); font-size: 16px; }
.console { margin: 0; background: var(--card); border: 1px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); min-width: 0; }
.console-bar { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--rule); }
.console-bar .dots { display: flex; gap: 6px; }
.console-bar .dots i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--box-line); }
.console-bar .url { flex: 1; text-align: center; font: 500 12px/1 var(--mono); color: var(--muted); background: var(--paper); border: 1px solid var(--rule); padding: 6px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.console-nav { display: flex; gap: 2px; padding: 0 14px; border-bottom: 1px solid var(--rule); font: 600 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; overflow-x: auto; }
.console-nav span { padding: 13px 12px; color: var(--muted); white-space: nowrap; border-bottom: 2px solid transparent; }
.console-nav span.on { color: var(--ink); border-bottom-color: var(--seal); }
.console-body { padding: 20px; }
.console-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.console-head b { font-size: 22px; letter-spacing: -.02em; }
.console-head span { font: 500 12px/1 var(--mono); color: var(--muted); }
.mrows { border: 1px solid var(--rule); }
.mrow { display: grid; grid-template-columns: 1.15fr .95fr 1.7fr .7fr; gap: 10px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--rule); font-size: 14px; }
.mrow:first-child { border-top: 0; }
.mrow.th { background: var(--paper); font: 600 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mrow .id { font: 600 13px/1.3 var(--mono); }
.mrow .where { color: var(--ink-2); }
.att { display: inline-flex; align-items: center; gap: 6px; font: 500 11.5px/1.35 var(--mono); color: var(--ok); }
.att::before { content: "✓"; flex: none; display: grid; place-items: center; width: 16px; height: 16px; background: var(--ok); color: var(--on-ok); font-size: 10px; }
.att.own { color: var(--ink-2); }
.att.own::before { content: "⇄"; background: none; color: var(--ink); border: 1px solid var(--ink); }
.hb { font: 500 11.5px/1 var(--mono); color: var(--ok); display: inline-flex; align-items: center; gap: 6px; }
.hb::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.mrow.yours { background: var(--paper); }
.console-foot { margin-top: 12px; font: 400 11.5px/1.4 var(--mono); color: var(--muted); }
.plans-line { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 44px; padding: 20px 22px; border: 1px solid var(--ink); background: var(--card); }
.explore { margin: 22px 0 0; }
.plans-line b { font-size: 20px; letter-spacing: -.02em; }
.plans-line .ctas { margin-left: auto; }
@media (max-width: 980px) { .cloud-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .mrow { grid-template-columns: 1fr auto; gap: 6px 10px; }
  .mrow.th { display: none; }
  .mrow .where { grid-column: 1; grid-row: 2; font-size: 13px; color: var(--muted); }
  .mrow .att { grid-column: 1 / -1; }
  .mrow .hb { grid-column: 2; grid-row: 1; }
  .console { box-shadow: 6px 6px 0 var(--hard); }
  .plans-line .ctas { margin-left: 0; }
}

/* Verify */
.verify { background: var(--card); }
.trail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.trail::before { content: ""; position: absolute; left: 0; right: 0; top: 33px; border-top: 1px dashed var(--ink); }
.trail li { position: relative; padding: 0 16px 0 0; }
.trail .dot { position: relative; z-index: 1; width: 66px; height: 66px; display: grid; place-items: center; background: var(--card); border: 1px solid var(--ink); font: 700 14px/1 var(--mono); }
.trail h3 { font-size: 19px; letter-spacing: -.01em; margin: 18px 0 6px; }
.trail p { margin: 0; color: var(--ink-2); font-size: 15px; }
.trail .sig { display: block; margin-top: 10px; font: 400 11.5px/1.4 var(--mono); color: var(--muted); }
.trail li.last .dot { background: var(--seal); border-color: var(--seal); color: var(--on-seal); font-size: 22px; }
.trail li.last h3 { color: var(--seal); }
.trail li.last .sig { color: var(--seal); }
.trail-note { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; margin-top: 44px; padding: 20px 22px; border: 1px solid var(--ink); background: var(--paper); }
.trail-note p { margin: 0; max-width: 62ch; color: var(--ink-2); }
.trail-note b { color: var(--ink); }
.verify-body { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: start; }
.seal-big { width: 132px; height: 132px; color: var(--seal); transform: rotate(-10deg); }
.seal-visual { display: grid; }
.verify .tbd { background: var(--card); }
@media (max-width: 980px) {
  .trail { grid-template-columns: 1fr; gap: 0; }
  .trail::before { left: 33px; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 1px dashed var(--ink); }
  .trail li { display: grid; grid-template-columns: 66px 1fr; gap: 0 18px; padding: 0 0 22px; }
  .trail h3 { margin: 6px 0 4px; }
  .verify-body { grid-template-columns: 1fr; } .seal-big, .seal-visual { display: none; }
}

/* Showcase */
.demos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.demo { background: var(--card); border: 1px solid var(--rule); display: flex; flex-direction: column; }
.demo-media { position: relative; display: block; width: 100%; border: 0; border-bottom: 1px solid var(--rule); background: var(--paper-2); padding: 18px; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.wins { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.win { display: block; background: var(--card); border: 1px solid var(--rule); height: 96px; }
.win i { display: block; height: 14px; border-bottom: 1px solid var(--rule); background: radial-gradient(circle, var(--box-line) 2.5px, transparent 3px) 4px 50% / 9px 9px repeat-x; background-size: 9px 9px; background-repeat: no-repeat, no-repeat; }
.win b { display: block; margin: 10px 10px 6px; height: 6px; background: var(--sk-2); width: 70%; }
.win b + b { width: 50%; } .win b + b + b { width: 60%; }
.demo-media .tbd { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--card); }
.demo-media:hover .tbd { background: var(--seal); color: var(--on-seal); }
.demo-body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.demo h3 { margin: 0; font-size: 21px; letter-spacing: -.02em; }
.demo p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.demo .links { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--rule); display: flex; gap: 18px; font: 500 13px/1 var(--mono); }
.demo .links a { text-decoration: none; }
.demo .links a:hover { color: var(--seal); text-decoration: underline; }
@media (max-width: 980px) { .demos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .demos { grid-template-columns: 1fr; } }

/* Use cases */
.uses { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--ink); }
.use { padding: 28px 28px 30px 0; border-bottom: 1px solid var(--rule); }
.use:nth-child(2n) { padding-left: 28px; padding-right: 0; border-left: 1px solid var(--rule); }
.use .k { font: 600 12px/1 var(--mono); color: var(--seal); letter-spacing: .1em; }
.use h3 { font-size: 23px; letter-spacing: -.02em; margin: 12px 0 8px; max-width: 26ch; }
.use p { margin: 0; color: var(--ink-2); }
.use .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
@media (max-width: 760px) { .uses { grid-template-columns: 1fr; } .use:nth-child(2n) { padding-left: 0; border-left: 0; } }

/* Open source */
.os { display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; align-items: start; }
.gh { background: var(--inv); color: var(--inv-text); border: 1px solid var(--ink); padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.gh .repo { display: flex; align-items: center; gap: 12px; font: 600 18px/1.2 var(--mono); overflow-wrap: anywhere; }
.gh dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-top: 1px solid var(--inv-rule); }
.gh dt { font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--inv-muted); padding-top: 16px; }
.gh dd { margin: 8px 0 0; }
.gh .tbd { background: var(--gh-tbd); color: var(--inv-accent); border-color: var(--inv-accent); }
.gh .btn { border-color: var(--inv-text); color: var(--inv-text); align-self: flex-start; }
.gh .btn:hover { background: var(--inv-text); color: var(--inv); }
.tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.track { display: block; text-decoration: none; background: var(--card); border: 1px solid var(--rule); padding: 20px; }
.track:hover { border-color: var(--ink); }
.track b { display: flex; justify-content: space-between; font-size: 19px; letter-spacing: -.01em; }
.track b::after { content: "→"; font-family: var(--mono); color: var(--seal); }
.track span { color: var(--muted); font-size: 15px; }
.sdks { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 8px; font: 500 12px/1 var(--mono); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.sdks span { font: 500 14px/1 var(--mono); text-transform: none; letter-spacing: 0; color: var(--ink); border: 1px solid var(--rule); background: var(--card); padding: 8px 10px; }
@media (max-width: 860px) { .os { grid-template-columns: 1fr; } }
@media (max-width: 340px) { .tracks { grid-template-columns: 1fr; } }

/* Quickstart */
.qs { border: 1px solid var(--ink); background: var(--card); }
.tabs { display: flex; border-bottom: 1px solid var(--ink); }
.tabs button { font: 600 13px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 16px 22px; background: none; border: 0; border-right: 1px solid var(--rule); cursor: pointer; color: var(--muted); }
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.tabs .copy { margin-left: auto; border-right: 0; border-left: 1px solid var(--rule); color: var(--ink); }
.tabs .copy:hover { color: var(--seal); }
.tabs .copy[hidden] { display: none; }
.panel[hidden] { display: none; }
.panel pre { margin: 0; padding: 24px; overflow-x: auto; font: 400 14px/1.9 var(--mono); color: var(--ink); }
.panel pre .p { color: var(--seal); user-select: none; }
.panel .cloud { padding: 28px 24px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.panel .cloud p { margin: 0; max-width: 52ch; font-size: 18px; }
@media (max-width: 520px) { .tabs button { padding: 14px 14px; } .panel pre { font-size: 12.5px; padding: 18px; } }

/* Final CTA */
.final { background: var(--band); color: #fff; padding: clamp(72px, 10vw, 128px) 0; }
.final h2 { color: #fff; font-size: clamp(40px, 6.4vw, 80px); max-width: 15ch; margin-bottom: 18px; }
.final p { font-size: 20px; margin: 0 0 32px; color: #fbe6e2; }
.final .btn { border-color: #fff; color: #fff; }
.final .btn--ink { background: #fff; color: var(--band); }
.final .btn--ink:hover { background: #111; color: #fff; border-color: #111; }
.final .btn--line:hover { background: #fff; color: var(--band); }
.final .link { color: #fff; }
.final .link:hover { color: #111; }


/* Brief 2: hero premise, comparison tables, upgrade and shard figures */
.premise { font: 600 13px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--seal); margin: 0 0 22px; max-width: 52ch; }
.cmp-h span:only-child { white-space: normal; }
.hero .pill { margin: 26px 0 0; padding: 6px 10px; font-size: 11px; }
.fig-title { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin: 0 0 22px; max-width: 32ch; }
.s-tail { margin-top: 44px; }
.honest { margin: 28px 0 0; padding: 16px 18px; border-left: 3px solid var(--seal); background: var(--card); color: var(--ink-2); max-width: 72ch; }
.honest b { color: var(--ink); }

/* Comparison table: a ruled document on wide screens, stacked cards on phones */
.vt { width: 100%; border-collapse: collapse; margin-top: 40px; font-size: 15.5px; background: var(--card); border: 1px solid var(--ink); }
.vt caption { text-align: left; padding: 0 0 12px; font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); caption-side: top; }
.vt th, .vt td { text-align: left; vertical-align: top; padding: 14px 16px; border-top: 1px solid var(--rule); }
.vt thead th { font: 600 11.5px/1.35 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-top: 0; border-bottom: 2px solid var(--ink); background: var(--paper); }
.vt thead th.us { color: var(--seal); }
.vt tbody th { width: 22%; font-weight: 700; color: var(--ink); }
.vt td { color: var(--ink-2); width: 39%; }
.vt td.us { color: var(--ink); background: var(--paper); border-left: 1px solid var(--rule); position: relative; }
.vt td.us::before { content: "✓"; color: var(--ok); font-weight: 700; margin-right: 8px; font-family: var(--mono); }
@media (max-width: 760px) {
  .vt, .vt tbody, .vt tr, .vt th, .vt td { display: block; width: auto; }
  .vt { border: 0; background: none; }
  .vt thead { display: none; }
  .vt caption { display: block; }
  .vt tr { border: 1px solid var(--ink); background: var(--card); margin-bottom: 12px; }
  .vt tbody th { border-top: 0; padding: 12px 14px 4px; font-size: 16px; }
  .vt td { border-top: 1px dashed var(--rule); padding: 10px 14px; font-size: 14.5px; }
  .vt td[data-h]::before { content: attr(data-h); display: block; margin: 0 0 4px; font: 600 10.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .vt td.us[data-h]::before { content: "✓ " attr(data-h); color: var(--seal); }
  .vt td.us { border-left: 0; }
  .vt tbody th, .vt td { width: auto; }
}

/* Shared two-column figure shell (also used by the DIY figure) */
.fig2 { margin: 0; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--ink); background: var(--card); }
.fig2 > .cmp-col + .cmp-col { border-left: 1px solid var(--ink); }
.fig2 > .cmp-col:first-child { background: var(--paper-2); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nd.ok { border-color: var(--ok); background: var(--ok-soft); }
.nd.ok b { color: var(--ink); }
.nd.ok small { color: var(--ok); font-weight: 600; }
.nd.hi { border: 1px solid var(--ink); box-shadow: 6px 6px 0 var(--hard); }
.nd.hi b::before { content: "→ "; color: var(--seal); font-family: var(--mono); }
.notes { margin: 18px 0 0; padding: 12px 0 0; border-top: 1px dashed var(--rule); list-style: none; display: grid; gap: 6px; }
.notes li { font: 500 11.5px/1.45 var(--mono); color: var(--ink-2); display: grid; grid-template-columns: 16px 1fr; gap: 6px; }
.notes li::before { content: "§"; color: var(--seal); }
.notes.warn li::before { content: "!"; font-weight: 700; }
.seq .nd b { font-size: 13.5px; }
.seq .nd .k { font: 600 10px/1 var(--mono); color: var(--muted); letter-spacing: .08em; margin-right: 6px; }
.ar.short { height: 18px; }

/* Sharded monolith */
.shards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.shard { border: 1px solid var(--ink); background: var(--card); min-width: 0; }
.shard-h { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 7px 9px; background: var(--inv); color: var(--inv-text); font: 600 10.5px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.shard-h span:last-child { font-size: 9px; padding: 2px 4px; border: 1px solid var(--inv-muted); color: var(--inv-muted); }
.shard small { display: block; padding: 7px 9px 2px; font: 400 10.5px/1.3 var(--mono); color: var(--muted); }
.shard ul { list-style: none; margin: 0; padding: 6px 9px 10px; display: grid; gap: 6px; }
.ctx { font: 600 11.5px/1 var(--mono); padding: 7px 8px; border: 1px solid; display: flex; align-items: center; gap: 6px; }
.ctx::before { content: ""; width: 8px; height: 8px; flex: none; }
.ctx.a { border-color: var(--seal); color: var(--seal); } .ctx.a::before { background: var(--seal); }
.ctx.b { border-color: var(--ok); color: var(--ok); } .ctx.b::before { background: var(--ok); }
.ctx.c { border-color: var(--ink); color: var(--ink); } .ctx.c::before { background: var(--ink); }
.fan3 { position: relative; height: 34px; }
.fan3::before { content: ""; position: absolute; left: 16.66%; right: 16.66%; top: 14px; border-top: 1px solid var(--ink); }
.fan3 i { position: absolute; top: 14px; bottom: 0; width: 0; border-left: 1px solid var(--ink); }
.fan3 i::after { content: ""; position: absolute; left: -5px; bottom: -1px; border: 4px solid transparent; border-top: 6px solid var(--ink); border-bottom: 0; }
.fan3 i:nth-child(1) { left: 16.66%; } .fan3 i:nth-child(2) { left: 50%; } .fan3 i:nth-child(3) { left: 83.33%; }
.fan3::after { content: ""; position: absolute; left: 50%; top: 0; height: 14px; border-left: 1px solid var(--ink); }
.addnode { border: 1.5px dashed var(--ink); background: var(--paper); padding: 10px 12px; display: flex; align-items: center; gap: 10px; }
.addnode b { font-size: 14px; }
.addnode span { font: 700 18px/1 var(--mono); color: var(--seal); }
.inside-h { margin: 56px 0 18px; font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 900px) {
  .fig2 { grid-template-columns: 1fr; }
  .fig2 > .cmp-col + .cmp-col { border-left: 0; border-top: 1px solid var(--ink); }
}
@media (max-width: 420px) {
  .shards { gap: 6px; }
  .shard-h { flex-direction: column; align-items: flex-start; font-size: 9.5px; padding: 6px; }
  .shard small { display: none; }
  .shard ul { padding: 6px; }
  .ctx { font-size: 10px; padding: 6px 5px; gap: 4px; }
  .ctx::before { width: 6px; height: 6px; }
  .grid2 { gap: 6px; }
}

/* ==========================================================================
   CLOUD CONSOLE  .cx (window) .cx-tabs .tiles .rows/.row .get .tiers .faq
   ========================================================================== */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 12.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--seal); margin: 0 0 22px; }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--seal); }
.c-hero { padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 8vw, 104px); border-bottom: 1px solid var(--rule); }
.c-hero .wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.c-hero h1 em { display: inline; }
@media (max-width: 1040px) { .c-hero .wrap { grid-template-columns: 1fr; } }

/* Console (shared by hero and the interactive section) */
.cx { background: var(--card); border: 1px solid var(--ink); box-shadow: 12px 12px 0 var(--hard); min-width: 0; }
.cx-bar { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--rule); }
.cx-bar .dots { display: flex; gap: 6px; } .cx-bar .dots i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--box-line); }
.cx-bar .url { flex: 1; min-width: 0; text-align: center; font: 500 12px/1 var(--mono); color: var(--muted); background: var(--paper); border: 1px solid var(--rule); padding: 6px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.cx-top .logo { width: 84px; color: var(--ink); }
.cx-top .who { font: 500 11.5px/1 var(--mono); color: var(--muted); display: flex; gap: 10px; align-items: center; }
.cx-top .who b { font-weight: 600; color: var(--ink); border: 1px solid var(--rule); padding: 5px 7px; }
.cx-tabs { display: flex; gap: 0; padding: 0 10px; border-bottom: 1px solid var(--rule); overflow-x: auto; }
.cx-tabs [role="tab"], .cx-tabs span { font: 600 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 14px 12px; color: var(--muted); background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.cx-tabs [aria-selected="true"], .cx-tabs span.on { color: var(--ink); border-bottom-color: var(--seal); }
.cx-tabs [role="tab"]:hover { color: var(--ink); }
.cx-body { padding: 22px; }
.cx-body[hidden] { display: none; }
.cx-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 16px; }
.cx-h b { font-size: 24px; letter-spacing: -.025em; }
.cx-h span { font: 500 12px/1 var(--mono); color: var(--muted); }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.tile { border: 1px solid var(--rule); background: var(--paper); padding: 14px; }
.tile small { display: block; font: 600 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.tile b { font-size: 28px; letter-spacing: -.03em; line-height: 1; }
.tile span { display: block; margin-top: 6px; font: 500 11.5px/1.4 var(--mono); color: var(--ok); }
.tile span.n { color: var(--muted); }
.rows { border: 1px solid var(--rule); }
.row { display: grid; grid-template-columns: 1.15fr .95fr 1.6fr .7fr; gap: 10px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--rule); font-size: 14px; }
.row:first-child { border-top: 0; }
.row.th { background: var(--paper); font: 600 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.row .id { font: 600 13px/1.3 var(--mono); }
.row .sub { color: var(--ink-2); }
.row.yours { background: var(--paper); }
.rows.apps .row { grid-template-columns: 1.2fr .9fr .8fr .8fr; }
.rows.accts .row { grid-template-columns: 1.6fr .8fr 1fr; }
.ver { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1 var(--mono); color: var(--ok); }
.ver::before { content: "✓"; display: grid; place-items: center; width: 15px; height: 15px; background: var(--ok); color: var(--on-ok); font-size: 9.5px; }
.ok-line { margin-top: 14px; padding: 12px 14px; border: 1px dashed var(--rule); font: 500 12px/1.4 var(--mono); color: var(--ink-2); }
.ok-line::before { content: "✓ "; color: var(--ok); }
.cx-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 14px; }
.fake-btn { font: 600 12.5px/1 var(--sans); padding: 10px 14px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); }
.cx-note { margin: 14px 0 0; font: 400 11.5px/1.4 var(--mono); color: var(--muted); }
.role { font: 600 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--rule); padding: 5px 7px; justify-self: start; }
.role.owner { color: var(--seal); border-color: var(--seal); }
@media (max-width: 640px) {
  .tiles { grid-template-columns: 1fr 1fr; }
  .tiles .tile:last-child { grid-column: 1 / -1; }
  .row, .rows.apps .row, .rows.accts .row { grid-template-columns: 1fr auto; gap: 6px 10px; }
  .row.th { display: none; }
  .row .sub { grid-column: 1; font-size: 13px; color: var(--muted); }
  .row .att, .row .wide { grid-column: 1 / -1; }
  .cx { box-shadow: 6px 6px 0 var(--hard); }
  .cx-body { padding: 16px; }
  .cx-top .who span { display: none; }
}

/* What you get */
.get { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--ink); list-style: none; margin: 0; padding: 0; }
.get li { padding: 26px 24px 28px 0; }
.get li + li { padding-left: 24px; border-left: 1px solid var(--rule); }
.get .n { font: 600 13px/1 var(--mono); color: var(--seal); }
.get h3 { font-size: 23px; letter-spacing: -.02em; margin: 14px 0 8px; }
.get p { margin: 0; color: var(--ink-2); }
@media (max-width: 980px) { .get { grid-template-columns: 1fr 1fr; } .get li:nth-child(3) { padding-left: 0; border-left: 0; } .get li:nth-child(n+3) { border-top: 1px solid var(--rule); } }
@media (max-width: 600px) { .get { grid-template-columns: 1fr; } .get li, .get li + li { padding-left: 0; border-left: 0; } .get li + li { border-top: 1px solid var(--rule); } }

.steps.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .steps.four { grid-template-columns: 1fr 1fr; } .steps.four .step:nth-child(3) { padding-left: 0; border-left: 0; } .steps.four .step:nth-child(n+3) { border-top: 1px solid var(--rule); } }
@media (max-width: 600px) { .steps.four { grid-template-columns: 1fr; } .steps.four .step { padding-left: 0; border-left: 0; } .steps.four .step + .step { border-top: 1px solid var(--rule); } }

/* Pricing */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tier { background: var(--card); border: 1px solid var(--rule); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.tier.pick { border-color: var(--ink); box-shadow: 6px 6px 0 var(--hard); }
.tier h3 { margin: 0; font: 600 12.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--seal); }
.tier .amt { font-size: 30px; font-weight: 800; letter-spacing: -.03em; margin: 4px 0; }
.tier p { margin: 0; color: var(--ink-2); }
.tier .btn { margin-top: auto; }
@media (max-width: 900px) { .tiers { grid-template-columns: 1fr; } }

/* FAQ */
.faq { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 44px 22px 0; font-size: 20px; font-weight: 700; letter-spacing: -.015em; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 18px; font: 400 26px/1 var(--mono); color: var(--seal); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 24px; color: var(--ink-2); max-width: 70ch; }

.mini-trail { margin-top: 8px; }
.trail.compact .dot { width: 52px; height: 52px; }
.trail.compact::before { top: 26px; }
@media (max-width: 980px) { .trail.compact::before { left: 26px; } .trail.compact li { grid-template-columns: 52px 1fr; } }

/* ==========================================================================
   NAV  .site-nav  (markup: site/_partials.html)
   ========================================================================== */
.site-nav { position: sticky; top: 0; z-index: 30; background: var(--nav-bg); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); }
.site-nav > .wrap { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; flex: none; }
.brand .logo { width: 110px; height: auto; display: block; }
.nav-groups { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-groups > li { position: relative; }
.nav-top { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; font: 500 15px/1 var(--sans); color: var(--ink-2); background: none; border: 0; cursor: pointer; text-decoration: none; }
.nav-top:hover, .nav-top[aria-expanded="true"] { color: var(--ink); }
.nav-top[aria-expanded] .caret { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.nav-top[aria-expanded="true"] .caret { transform: translateY(1px) rotate(-135deg); }
.nav-top.is-current { color: var(--ink); box-shadow: inset 0 -2px 0 var(--seal); }
.ext::after { content: "↗"; font: 500 .85em/1 var(--mono); color: var(--muted); margin-left: 4px; }
.menu { position: absolute; top: calc(100% + 10px); left: 0; min-width: 320px; background: var(--card); border: 1px solid var(--ink); box-shadow: 8px 8px 0 var(--hard); list-style: none; margin: 0; padding: 8px; }
.menu[hidden] { display: none; }
.menu a { display: grid; gap: 3px; padding: 12px 14px; text-decoration: none; border: 1px solid transparent; }
.menu a:hover, .menu a:focus-visible { background: var(--paper); border-color: var(--rule); }
.menu a b { font-size: 15.5px; letter-spacing: -.01em; }
.menu a span { font: 400 12.5px/1.4 var(--mono); color: var(--muted); }
.menu a[aria-current="page"] b { color: var(--seal); }
.menu a[aria-current="page"] b::before { content: "● "; font-size: 10px; vertical-align: 2px; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.signin { font: 600 15px/1 var(--sans); text-decoration: none; color: var(--ink-2); }
.signin:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.theme-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: none; border: 1px solid var(--rule); cursor: pointer; }
.theme-btn:hover { border-color: var(--ink); }
.theme-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.theme-btn i { width: 12px; height: 12px; border: 1.5px solid currentColor; border-radius: 50%; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.menu-btn { display: none; width: 44px; height: 44px; border: 1px solid var(--ink); background: none; cursor: pointer; align-items: center; justify-content: center; }
.menu-btn span, .menu-btn span::before, .menu-btn span::after { display: block; width: 18px; height: 2px; background: var(--ink); position: relative; content: ""; }
.menu-btn span::before { position: absolute; top: -6px; } .menu-btn span::after { position: absolute; top: 6px; }
.menu-btn[aria-expanded="true"] span { background: transparent; }
.menu-btn[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }
.mobile-nav { border-top: 1px solid var(--rule); background: var(--paper); max-height: calc(100vh - 68px); overflow-y: auto; }
.mobile-nav[hidden] { display: none; }
.mobile-nav .wrap { padding-top: 8px; padding-bottom: 24px; }
.mobile-nav h2 { font: 600 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--seal); margin: 22px 0 6px; max-width: none; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav li a { display: block; padding: 12px 0; border-bottom: 1px solid var(--rule); text-decoration: none; font-size: 18px; font-weight: 600; }
.mobile-nav li a span { display: block; font: 400 12.5px/1.4 var(--mono); color: var(--muted); font-weight: 400; margin-top: 2px; }
.mobile-nav li a[aria-current="page"] { color: var(--seal); }
.mobile-nav .ctas { margin-top: 20px; }
.mobile-nav .ctas .btn { flex: 1; }
@media (max-width: 1080px) {
  .nav-groups, .nav-right .signin, .nav-right .btn { display: none; }
  .menu-btn { display: inline-flex; }
}
@media (max-width: 420px) { .theme-btn span { display: none; } .theme-btn { padding: 0 12px; } }

/* ==========================================================================
   FOOTER  .site-footer
   ========================================================================== */
.site-footer { border-top: 1px solid var(--rule); padding: 56px 0 40px; font-size: 14.5px; color: var(--ink-2); }
.foot-grid { display: grid; grid-template-columns: 1.2fr repeat(4, 1fr); gap: 32px; }
.foot-brand .logo { width: 110px; display: block; color: var(--ink); }
.foot-brand p { margin: 14px 0 0; max-width: 30ch; color: var(--muted); font-size: 14px; }
.foot-col h2 { font: 600 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--seal); margin: 4px 0 14px; max-width: none; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.site-footer a[aria-current="page"] { color: var(--seal); }
.foot-bottom { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; align-items: center; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 13.5px; }
.socials { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; font: 500 13px/1 var(--mono); }
@media (max-width: 980px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 420px) { .foot-grid { gap: 28px 16px; } }

/* ==========================================================================
   PAGE PARTS  shared by sub-pages
   ========================================================================== */
/* .page-hero: a sub-page's first screen (eyebrow, h1, lede, ctas, optional figure) */
.page-hero { padding: clamp(48px, 7vw, 96px) 0 clamp(52px, 7vw, 92px); border-bottom: 1px solid var(--rule); }
.page-hero .wrap { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.page-hero.split .wrap { grid-template-columns: .9fr 1.1fr; }
.page-hero h1 em { display: inline; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 12.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--seal); margin: 0 0 22px; }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--seal); }
.crumbs { font: 500 12px/1 var(--mono); color: var(--muted); margin: 0 0 18px; letter-spacing: .04em; }
.crumbs a { text-decoration: none; } .crumbs a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 1040px) { .page-hero.split .wrap { grid-template-columns: 1fr; } }

/* .link-cards: a grid of linked cards (products row, teasers). Add .cols-3 / .cols-4 */
.link-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; list-style: none; margin: 0; padding: 0; }
.link-cards.cols-4 { grid-template-columns: repeat(4, 1fr); }
.link-card { position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 24px; background: var(--card); border: 1px solid var(--rule); text-decoration: none; color: inherit; }
.link-card:hover { border-color: var(--ink); box-shadow: 6px 6px 0 var(--hard); }
.link-card .k { font: 600 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--seal); }
.link-card h3 { margin: 0; font-size: 23px; letter-spacing: -.02em; }
.link-card p { margin: 0; color: var(--ink-2); }
.link-card code { font-size: 12.5px; background: var(--paper); border: 1px solid var(--rule); padding: 6px 8px; overflow-x: auto; white-space: nowrap; display: block; }
.link-card .go { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--rule); font: 600 13px/1 var(--mono); color: var(--ink); }
.link-card .go::after { content: " →"; color: var(--seal); }
.link-card.dark { background: var(--inv); color: var(--inv-text); border-color: var(--ink); }
.link-card.dark p, .link-card.dark .go { color: var(--inv-muted); }
.link-card.dark .k { color: var(--inv-accent); }
.link-card.dark code { background: transparent; border-color: var(--inv-rule); color: var(--inv-text); }
@media (max-width: 1080px) { .link-cards.cols-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) { .link-cards, .link-cards.cols-4 { grid-template-columns: 1fr; } }

/* .one-liners: compact linked list (use-cases teaser) */
.one-liners { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.one-liners a { display: grid; grid-template-columns: 40px 1fr auto; gap: 16px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.one-liners a:hover b { color: var(--seal); }
.one-liners .n { font: 600 12px/1 var(--mono); color: var(--seal); }
.one-liners b { font-size: 19px; letter-spacing: -.015em; }
.one-liners span.d { display: block; color: var(--ink-2); font-size: 15.5px; margin-top: 4px; }
.one-liners i { font: 600 13px/1 var(--mono); font-style: normal; color: var(--seal); }
@media (max-width: 600px) { .one-liners a { grid-template-columns: 28px 1fr; } .one-liners i { display: none; } }

/* .repos: open-source repo strip */
.repos { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.repos a { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1 var(--mono); padding: 11px 13px; border: 1px solid var(--rule); background: var(--card); text-decoration: none; }
.repos a::before { content: "/"; color: var(--seal); }
.repos a:hover { border-color: var(--ink); }

/* .band-cta: small inline call-to-action panel between sections */
.band-cta { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; padding: 24px 26px; border: 1px solid var(--ink); background: var(--card); }
.band-cta p { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; max-width: 40ch; }


/* ==========================================================================
   READ MORE  details.more  (native disclosure, works without JS)
   ========================================================================== */
.more { margin-top: 28px; border-top: 1px dashed var(--rule); }
.more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; margin-top: -1px; padding: 12px 16px 12px 0; font: 600 13px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::before { content: "+"; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--ink); font: 600 15px/1 var(--mono); color: var(--seal); }
.more > summary .less { display: none; }
.more[open] > summary::before { content: "−"; }
.more[open] > summary .open-label { display: none; }
.more[open] > summary .less { display: inline; }
.more > summary:hover { color: var(--seal); }
.more > summary:focus-visible { outline: 2px solid var(--seal); outline-offset: 3px; }
.more-body { padding-top: 12px; }
.more-body > :first-child { margin-top: 0; }
@media print { .more > summary { display: none; } }

/* ==========================================================================
   RHYTHM  .split  .s--ink  .stats  .pull  .punch  .keypoints
   ========================================================================== */
/* :not(.page-hero): the page hero also carries .split, but lays out its .wrap
   (see PAGE HERO); without this it became a two-column grid itself. */
.split:not(.page-hero) { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.split--flip .split-visual { order: -1; }
.split-text > :last-child { margin-bottom: 0; }
.split-visual { min-width: 0; }
@media (max-width: 960px) { .split:not(.page-hero) { grid-template-columns: 1fr; } .split--flip .split-visual { order: 0; } }

/* Section header for a .split column (no side label column) */
.punch .s-num { margin: 0 0 14px; }
.punch h2 { margin-bottom: 14px; }
.punch .lede { margin: 0 0 22px; max-width: 46ch; }
.keypoints { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.keypoints li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); font-size: 16px; }
.keypoints li::before { content: "✓"; font: 700 14px/1.6 var(--mono); color: var(--seal); }
.keypoints b { color: var(--ink); }
.keypoints.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 28px; }
@media (max-width: 860px) { .keypoints.cols { grid-template-columns: 1fr; } }

/* Full-bleed ink band: re-declares the dark variables so everything inside recolours */
.s--ink {
  --paper: #121211; --paper-2: #191917; --card: #1c1b18; --ink: #f1ede4; --ink-2: #cdc7ba; --muted: #a29d91; --rule: #34322d;
  --seal: #ef6150; --seal-soft: #3a1914; --ok: #62c792; --ok-soft: #14291d; --warn: #e3ac45; --warn-soft: #2e2310;
  --inv: #232220; --inv-text: #f1ede4; --inv-muted: #b5afa3; --inv-rule: #3a3833; --tick: #62c792; --on-seal: #121211;
  --on-seal-muted: #2a0e0a; --seal-deep: #c9402f; --on-ok: #0f1f16; --hard: #3d3b35; --box-line: #5a564e; --sk: #2c2a26; --sk-2: #34322d;
  background: #111110; color: var(--ink); border-bottom-color: #2a2925;
}
:root[data-theme="dark"] .s--ink { background: #0a0a09; box-shadow: inset 0 1px 0 #2a2925; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .s--ink { background: #0a0a09; box-shadow: inset 0 1px 0 #2a2925; } }
.s--ink h2 em, .s--ink .pull em { color: var(--seal); }

/* Number strip */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); }
.stat { padding: 22px 20px 22px 0; }
.stat + .stat { padding-left: 20px; border-left: 1px solid var(--rule); }
.stat b { display: block; font-weight: 800; font-size: clamp(38px, 4.6vw, 60px); line-height: 1; letter-spacing: -.045em; color: var(--seal); }
.stat span { display: block; margin-top: 10px; font: 500 12.5px/1.4 var(--mono); color: var(--ink-2); letter-spacing: .02em; }
.stats-band { padding: clamp(28px, 4vw, 44px) 0; border-bottom: 1px solid var(--rule); }
@media (max-width: 860px) { .stats { grid-template-columns: 1fr 1fr; } .stat:nth-child(3) { padding-left: 0; border-left: 0; } .stat:nth-child(n+3) { border-top: 1px solid var(--rule); } }

/* Big statement line */
.pull { font-weight: 800; font-size: clamp(36px, 5.6vw, 76px); line-height: .98; letter-spacing: -.045em; margin: 0 0 22px; max-width: 18ch; }
.pull em { font-style: normal; color: var(--seal); }
.pull + .lede { margin: 0 0 26px; max-width: 54ch; }

/* Live GitHub numbers: hidden until filled */
[data-gh]:not(.is-filled) { display: none !important; }

/* ==========================================================================
   BACKERS  .backers  (investor logo strip; slow marquee, static under reduced motion)
   markup: section.backers > .wrap > p.backers-h + .backers-track > ul.backers-row (x2, second aria-hidden)
   ========================================================================== */
.backers { padding: 26px 0 30px; border-bottom: 1px solid var(--rule); overflow: hidden; }
.backers .wrap { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; }
.backers-h { margin: 0; font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.backers-track { position: relative; overflow: hidden; display: flex; min-width: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.backers-row { display: flex; align-items: center; gap: 44px; padding: 0 22px; margin: 0; list-style: none; flex: none; animation: backers-scroll 46s linear infinite; }
.backers-row img { display: block; height: 30px; width: auto; filter: brightness(0); opacity: .6; }
.backers-track:hover .backers-row, .backers-track:focus-within .backers-row { animation-play-state: paused; }
@keyframes backers-scroll { to { transform: translateX(-100%); } }
:root[data-theme="dark"] .backers-row img { filter: brightness(0) invert(1); opacity: .62; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .backers-row img { filter: brightness(0) invert(1); opacity: .62; } }
@media (prefers-reduced-motion: reduce) {
  .backers-track { -webkit-mask-image: none; mask-image: none; }
  .backers-row { animation: none; flex-wrap: wrap; flex: 1; justify-content: center; gap: 20px 36px; padding: 0; }
  .backers-row[aria-hidden="true"] { display: none; }
}
@media (max-width: 700px) { .backers .wrap { grid-template-columns: 1fr; gap: 14px; } .backers-row img { height: 24px; } .backers-row { gap: 32px; } }

/* Touch: small text links get a 44px tap height (the logo, .link CTAs, the
   "View code" and "Repo" rows). Padding, not font size, so the look holds. */
@media (pointer: coarse) {
  .brand, .link, .demo .links a, .tool-links a, figcaption a { display: inline-flex; align-items: center; min-height: 44px; }
  .demo .links, .tool-links { row-gap: 0; }
}