/* maqpna.com identity: "the checkpoint and its ledger".
   Loaded after styles.css. MAQPNA decides on every agent call and writes it
   down, so the site is set like the desk where that happens: ruled ledger
   paper, black ink, hard offset shadows, rubber stamps (ALLOW / DENY / HOLD),
   receipt tape with hash-chained lines and § numbered sections, as in a
   policy document. Shares the Kosa8 Labs paper-and-ink family with kosa8.com;
   MAQPNA's own colour is ledger teal. No inline styles (CSP style-src 'self').
   Dark mode is the same desk at night: ink paper, chalk text. */

/* ------------------------------------------------------------------ tokens */
:root {
  --bg: #f4f1e8;
  --bg-alt: #ede8dc;
  --surface: #fffdf7;
  --surface-subtle: #f0ebdf;
  --surface-sunk: #e9e3d5;
  --surface-glass: rgba(244, 241, 232, 0.86);
  --text: #16140f;
  --text-2: #46413a;
  --text-3: #7a7366;
  --line: #ddd5c4;
  --line-strong: #c4b9a4;
  --line-input: #8a8170;
  --brand: #16140f;
  --accent: #0b6e66;
  --accent-hover: #08524c;
  --accent-soft: #d3ebe6;
  --hl: #a8ddd3;
  --ink: #16140f;
  --paper: #fffdf7;
  --margin-line: rgba(194, 59, 34, 0.32);
  --rule-line: rgba(11, 110, 102, 0.08);
  --grid-line: rgba(22, 20, 15, 0.07);
  --glow-accent: transparent;
  --glow-violet: transparent;
  --status-allow: #0b6e66;
  --status-allow-soft: #d3ebe6;
  --status-deny: #c23b22;
  --status-deny-soft: #f6dcd4;
  --status-pending: #b7791f;
  --status-pending-soft: #f6e7c8;
  --status-info: #2f5d8a;
  --status-info-soft: #dbe6f1;
  --code-bg: #16140f;
  --code-line: #2c2922;
  --code-text: #f1ece0;
  --code-dim: #a39b8b;
  --code-key: #7fd6c9;
  --code-str: #e8c36a;
  --code-err: #ff9b85;
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --shadow-sm: 2px 2px 0 var(--ink);
  --shadow-md: 4px 4px 0 var(--ink);
  --shadow-lg: 6px 6px 0 var(--ink);
  --focus: #0b6e66;
  --hard: 4px 4px 0 var(--ink);
}
:root[data-theme="dark"] {
  --bg: #11100d;
  --bg-alt: #17150f;
  --surface: #1b1914;
  --surface-subtle: #221f19;
  --surface-sunk: #0d0c0a;
  --surface-glass: rgba(17, 16, 13, 0.86);
  --text: #f1ece0;
  --text-2: #c4bdad;
  --text-3: #8f8878;
  --line: #2c2922;
  --line-strong: #433e34;
  --line-input: #6b6457;
  --brand: #f1ece0;
  --accent: #48c9b7;
  --accent-hover: #7ddccf;
  --accent-soft: #0f2c28;
  --hl: rgba(72, 201, 183, 0.28);
  --ink: #f1ece0;
  --paper: #1b1914;
  --margin-line: rgba(255, 120, 90, 0.22);
  --rule-line: rgba(72, 201, 183, 0.07);
  --grid-line: rgba(241, 236, 224, 0.06);
  --status-allow: #48c9b7;
  --status-allow-soft: #0f2c28;
  --status-deny: #ff7a5c;
  --status-deny-soft: #351710;
  --status-pending: #f0b44c;
  --status-pending-soft: #33260c;
  --status-info: #8ab4e0;
  --status-info-soft: #14212f;
  --code-bg: #0b0a08;
  --code-line: #2c2922;
  --focus: #48c9b7;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #11100d;
    --bg-alt: #17150f;
    --surface: #1b1914;
    --surface-subtle: #221f19;
    --surface-sunk: #0d0c0a;
    --surface-glass: rgba(17, 16, 13, 0.86);
    --text: #f1ece0;
    --text-2: #c4bdad;
    --text-3: #8f8878;
    --line: #2c2922;
    --line-strong: #433e34;
    --line-input: #6b6457;
    --brand: #f1ece0;
    --accent: #48c9b7;
    --accent-hover: #7ddccf;
    --accent-soft: #0f2c28;
    --hl: rgba(72, 201, 183, 0.28);
    --ink: #f1ece0;
    --paper: #1b1914;
    --margin-line: rgba(255, 120, 90, 0.22);
    --rule-line: rgba(72, 201, 183, 0.07);
    --grid-line: rgba(241, 236, 224, 0.06);
    --status-allow: #48c9b7;
    --status-allow-soft: #0f2c28;
    --status-deny: #ff7a5c;
    --status-deny-soft: #351710;
    --status-pending: #f0b44c;
    --status-pending-soft: #33260c;
    --status-info: #8ab4e0;
    --status-info-soft: #14212f;
    --code-bg: #0b0a08;
    --code-line: #2c2922;
    --focus: #48c9b7;
  }
}

/* ------------------------------------------------------------------ paper */
body {
  counter-reset: sec;
  background-color: var(--bg);
  /* paper grain: a tiny noise tile, data URI (img-src data: is allowed) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection { background: var(--hl); color: var(--text); }
h1, h2, h3 { letter-spacing: -0.025em; }
:not(pre) > code { border-radius: var(--radius-xs); background: var(--surface-subtle); border-color: var(--line-strong); }

/* ledger ruling: faint teal lines every 32px and a red margin line */
.hero-bg, .page-hero::before {
  background-image:
    linear-gradient(90deg, transparent calc(var(--margin-x, 48px) - 1px), var(--margin-line) calc(var(--margin-x, 48px) - 1px), var(--margin-line) var(--margin-x, 48px), transparent var(--margin-x, 48px)),
    repeating-linear-gradient(180deg, transparent 0 31px, var(--rule-line) 31px 32px);
}
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.hero-grid, .glow { display: none; }
.hero-bg { -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }

/* crop marks at the top corners of every section */
.section > .wrap { position: relative; }
.section > .wrap::before, .section > .wrap::after {
  content: ""; position: absolute; top: calc(-1 * clamp(36px, 5vw, 64px)); width: 14px; height: 14px; pointer-events: none;
  border: 0 solid var(--line-strong);
}
.section > .wrap::before { left: 8px; border-top-width: 1.5px; border-left-width: 1.5px; }
.section > .wrap::after { right: 8px; border-top-width: 1.5px; border-right-width: 1.5px; }
.section-flush > .wrap::before, .section-flush > .wrap::after { display: none; }
.section-alt { background-color: var(--bg-alt); border-color: var(--line); }

/* § numbered section labels, like clauses in a policy */
.eyebrow { gap: 10px; color: var(--text); font-weight: 500; letter-spacing: 0.12em; }
.eyebrow::before { content: ""; width: 9px; height: 9px; flex: none; background: var(--accent); }
.section .sec-head .eyebrow::before, .section .reveal > .eyebrow::before, .faq-grid .eyebrow::before {
  counter-increment: sec; content: "§" counter(sec, decimal-leading-zero); width: auto; height: auto;
  padding: 1px 6px; background: var(--ink); color: var(--bg); font-size: 0.68rem; letter-spacing: 0.04em;
}
.eyebrow .ic { color: var(--accent); }
.h-label { color: var(--text-2); }
.h-label::before { content: "— "; color: var(--accent); }

/* highlighter: the muted half of a headline is marked, not greyed out */
.muted-h {
  color: var(--text);
  background: linear-gradient(transparent 56%, var(--hl) 56%, var(--hl) 90%, transparent 90%) no-repeat 0 0 / 100% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 0.08em;
}
.js .reveal .muted-h, .js .page-hero .muted-h, .js .hero .muted-h { background-size: 0% 100%; transition: background-size 900ms var(--ease-settle) 250ms; }
.js .reveal.in .muted-h, .js .page-hero .muted-h, .js .hero .muted-h { background-size: 100% 100%; }
.js .page-hero .muted-h, .js .hero .muted-h { animation: mark-in 1100ms var(--ease-settle) 400ms both; }
@keyframes mark-in { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
.grad-text { background: none; color: var(--text); -webkit-text-fill-color: currentColor; }
.lede, .sub { color: var(--text-2); }

/* ------------------------------------------------------------------ buttons: ink, hard shadow */
.btn { border-radius: var(--radius-md); border: 1.5px solid var(--ink); font-weight: 600; letter-spacing: -0.005em;
  transition: transform 160ms var(--ease-standard), box-shadow 160ms var(--ease-standard), background-color 160ms, color 160ms; }
.btn:active { transform: translate(0, 0); box-shadow: none; }
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { background: var(--ink); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--accent); }
.btn-secondary { background: var(--paper); color: var(--text); border-color: var(--ink); }
.btn-secondary:hover { background: var(--paper); border-color: var(--ink); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.btn-ghost { border-color: transparent; }
.btn-ghost:hover { background: transparent; border-color: var(--ink); }
.icon-btn { border-radius: var(--radius-md); }
.icon-btn:hover { background: var(--paper); border-color: var(--ink); }

/* ------------------------------------------------------------------ header and footer */
.hdr.scrolled, .hdr:has(details[open]) { background: var(--surface-glass); border-bottom: 1.5px solid var(--ink); }
.nav-list > li > a, .menu > summary { border-radius: var(--radius-md); color: var(--text-2); }
.nav-list > li > a:hover, .menu > summary:hover, .menu[open] > summary { background: transparent; color: var(--text); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--accent); text-underline-offset: 6px; }
.nav-list a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--accent); text-underline-offset: 6px; }
.menu-panel, .mnav-panel { border: 1.5px solid var(--ink); border-radius: var(--radius-lg); box-shadow: var(--hard); background: var(--paper); }
.menu-grid a, .menu-all { border-radius: var(--radius-md); }
.menu-ic { border-radius: var(--radius-md); border-color: var(--ink); background: var(--bg); }
.ftr { border-top: 1.5px solid var(--ink); background: var(--bg-alt); }
.ftr-h::before { content: "■ "; color: var(--accent); }
.ftr-legal { border-top: 1px dashed var(--line-strong); }

/* ------------------------------------------------------------------ cards, tiles: paper slips */
.tile, .card, .plan, .sector a, .asi, .reg, .std li, .contact-list li, .tldr, .dlp, .chain-blk, .arch-col, .tier, .callout, details.os, .stall {
  border-radius: var(--radius-lg); border-color: var(--line-strong); background: var(--paper);
}
.tile::before { display: none; }
.tile, .card:has(> a), .sector a, .asi, .plan {
  transition: transform 180ms var(--ease-standard), box-shadow 180ms var(--ease-standard), border-color 180ms;
}
.tile:hover, .card:has(> a):hover, .sector a:hover, .asi:hover, .plan:hover {
  border-color: var(--ink); transform: translate(-3px, -3px); box-shadow: 4px 4px 0 var(--ink);
}
.tile-ic, .card-ic, .sector-ic { border-radius: var(--radius-md); border: 1.5px solid var(--ink); background: var(--bg); color: var(--text); }
.tile:hover .tile-ic { background: var(--accent); border-color: var(--ink); color: var(--paper); transform: rotate(-4deg); }
.sector a:hover .sector-ic { background: var(--accent); color: var(--paper); }
.tile h3 a { text-decoration: none; color: var(--text); }
.tile h3 a::after { content: " →"; color: var(--accent); }
.story-n { display: inline-block; padding: 1px 6px; background: var(--ink); color: var(--bg); font: 500 0.7rem var(--font-mono); }
.more { text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: 1px; }

/* chips, tags, framework list: ticket stubs */
.chips li, .fw li, .pillar-nav a, .toc-chips a, .chip-link, .tag, .badge, .cmd-cloud code {
  border-radius: var(--radius-sm); border-color: var(--line-strong); background: var(--paper);
}
.pillar-nav a:hover, .chip-link:hover, .fw li:hover, .cmd-cloud code:hover { border-color: var(--ink); box-shadow: 2px 2px 0 var(--ink); transform: translate(-1px, -1px); color: var(--text); }

/* ------------------------------------------------------------------ stamps: decisions */
.pill {
  padding: 2px 8px; border-radius: var(--radius-xs); border: 1.5px solid currentColor; background: transparent !important;
  font: 600 0.68rem/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; transform: rotate(-2deg);
}
.pill::before { display: none; }
.stamp {
  --st: var(--status-allow);
  display: inline-grid; place-items: center; padding: 6px 14px; border: 3px solid var(--st); border-radius: 6px;
  color: var(--st); font: 700 1.05rem/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase;
  transform: rotate(-8deg); box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3.5px var(--st);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -0.6 1.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -0.6 1.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.stamp-deny { --st: var(--status-deny); transform: rotate(6deg); }
.stamp-hold { --st: var(--status-pending); transform: rotate(-4deg); }
.stamp.slam { animation: slam 420ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
@keyframes slam { 0% { opacity: 0; transform: scale(2.4) rotate(-18deg); } 60% { opacity: 1; transform: scale(0.94) rotate(var(--rot, -8deg)); } 100% { opacity: 1; transform: scale(1) rotate(var(--rot, -8deg)); } }
.stamp-deny.slam { --rot: 6deg; } .stamp-hold.slam { --rot: -4deg; }

/* ------------------------------------------------------------------ terminals and code: ink blocks */
.term, .code, .code-card, .win, .gw, .desk-win, .video-frame {
  border-radius: var(--radius-lg); border: 1.5px solid var(--ink); box-shadow: 6px 6px 0 var(--line-strong);
}
:root[data-theme="dark"] .term, :root[data-theme="dark"] .code, :root[data-theme="dark"] .win, :root[data-theme="dark"] .gw, :root[data-theme="dark"] .desk-win { box-shadow: 6px 6px 0 var(--line-strong); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .term, :root:not([data-theme="light"]) .code, :root:not([data-theme="light"]) .win, :root:not([data-theme="light"]) .gw, :root:not([data-theme="light"]) .desk-win { box-shadow: 6px 6px 0 var(--line-strong); } }
.term-bar i, .code-bar i { border-radius: 0; width: 10px; height: 10px; background: transparent; border: 1.5px solid var(--code-dim); }
.term-bar i:first-child, .code-bar i:first-child { background: var(--status-deny); border-color: var(--status-deny); }
.t-cmd::before { color: var(--code-key); }
.caret { background: var(--code-key); }
.install-cmd, .cmd { border-radius: var(--radius-md); border: 1.5px solid var(--ink); background: var(--paper); color: var(--text); box-shadow: 4px 4px 0 var(--accent); }
.install-cmd code, .cmd code { color: var(--text); }
.install-cmd .prompt, :root:not([data-theme="dark"]) .install-cmd .prompt { color: var(--accent); }
.install-tabs, .seg, .code-tabs .tabs { border-radius: var(--radius-md); border-color: var(--line-strong); background: var(--surface-subtle); }
.install-tabs [role="tab"], .seg [role="tab"], .code-tabs [role="tab"] { border-radius: var(--radius-sm); }
.install-ind, .seg-ind, .tabs-ind { border-radius: var(--radius-sm); background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink); }
.copy { border-radius: var(--radius-sm); }

/* ------------------------------------------------------------------ tables: ledger pages */
.table-wrap { border: 1.5px solid var(--ink); border-radius: var(--radius-lg); background: var(--paper); box-shadow: 6px 6px 0 var(--line-strong); }
thead th { background: var(--ink); color: var(--bg); }
th, td { border-bottom: 1px dashed var(--line-strong); }
tbody tr { counter-increment: row; }
tbody tr:hover { background: var(--accent-soft); }
.yes { border-radius: var(--radius-xs); background: transparent; border: 1.5px solid var(--accent); }

/* ------------------------------------------------------------------ FAQ: ruled entries */
.faq { counter-reset: q; }
.faq-item { border-bottom: 1px dashed var(--line-strong); counter-increment: q; }
.faq-item:first-child { border-top: 1.5px solid var(--ink); }
.faq-item summary { padding-left: 52px; }
.faq-item summary::before { content: "Q." counter(q, decimal-leading-zero); position: absolute; left: 0; top: 25px; font: 500 0.72rem var(--font-mono); color: var(--accent); }
.faq-a { padding-left: 52px; }

/* ------------------------------------------------------------------ plans: price tags */
.plan { border: 1.5px solid var(--line-strong); }
.plan-hi { border-color: var(--ink); box-shadow: 6px 6px 0 var(--accent); }
.plan-tag { top: -14px; left: auto; right: 14px; border-radius: var(--radius-xs); background: transparent; color: var(--status-deny); border: 2px solid var(--status-deny); font: 700 0.66rem/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; transform: rotate(4deg); background-color: var(--paper); }
.plan-price { font-family: var(--font-mono); letter-spacing: -0.03em; }

/* ------------------------------------------------------------------ stats and CTA */
.stats { border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.stat + .stat { border-left: 1px dashed var(--line-strong); }
.stat-n { font-family: var(--font-mono); font-weight: 500; letter-spacing: -0.06em; }
.cta-card { border-radius: var(--radius-lg); border: 1.5px solid var(--ink); background: var(--paper); box-shadow: 10px 10px 0 var(--ink); }
.cta-glow { display: none; }
.cta-card::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(180deg, transparent 0 31px, var(--rule-line) 31px 32px); }
.cta-card::after { content: "APPROVED"; position: absolute; right: clamp(16px, 4vw, 48px); top: clamp(16px, 3vw, 36px); padding: 6px 12px;
  border: 3px solid var(--status-allow); border-radius: 6px; color: var(--status-allow); font: 700 0.9rem/1 var(--font-mono); letter-spacing: 0.16em;
  transform: rotate(9deg); opacity: 0.85; }
.cta-card h2 .muted-h { background-size: 100% 100%; }

/* ------------------------------------------------------------------ hero: the checkpoint */
.hero-ck { padding-top: clamp(40px, 6vw, 80px); }
.hero-ck .hero-in { text-align: left; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.hero-ck .hero-h { margin-top: 18px; font-size: clamp(2.8rem, 6.6vw, 5.6rem); letter-spacing: -0.05em; line-height: 0.95; }
.hero-ck .hero-sub { margin: 22px 0 0; max-width: 520px; }
.hero-ck .cta-row { justify-content: flex-start; margin-top: 30px; }
.hero-ck .install { margin: 26px 0 0; }
.kicker { display: inline-flex; align-items: center; gap: 10px; font: 500 0.74rem/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-2); }
.kicker b { padding: 2px 7px; background: var(--ink); color: var(--bg); font-weight: 500; }
.js .hero-ck .kicker { animation: rise 700ms var(--ease-enter) 100ms both; }

.ck { position: relative; display: grid; gap: 16px; }
.ck-desk { position: relative; padding: 18px; border: 1.5px solid var(--ink); border-radius: var(--radius-lg); background: var(--paper); box-shadow: 8px 8px 0 var(--ink); }
.ck-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px dashed var(--line-strong); font: 500 0.72rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-2); }
.ck-head .mark { width: 22px; fill: var(--brand); }
.ck-head span { display: inline-flex; align-items: center; gap: 8px; }
.ck-live { color: var(--status-allow); }
.ck-lane { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 196px; padding: 18px 0; }
.ck-lane::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 0; border-top: 1.5px dashed var(--line-strong); }
.ck-gate { position: relative; z-index: 1; display: grid; gap: 5px; padding: 10px 8px; border: 1.5px solid var(--ink); border-radius: var(--radius-md); background: var(--bg); box-shadow: 3px 3px 0 var(--ink); }
.ck-gate strong { font: 600 0.66rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; text-align: center; }
.ck-gate li { display: flex; align-items: center; gap: 6px; font: 400 0.68rem var(--font-mono); color: var(--text-3); }
.ck-gate li::before { content: ""; width: 7px; height: 7px; flex: none; border: 1.5px solid var(--line-strong); transition: background-color 120ms, border-color 120ms; }
.ck-gate li.on { color: var(--text); }
.ck-gate li.on::before { background: var(--accent); border-color: var(--accent); }
.ck-gate li.on-deny::before { background: var(--status-deny); border-color: var(--status-deny); }
.ck-gate li.on-hold::before { background: var(--status-pending); border-color: var(--status-pending); }
.ck-slot { position: relative; z-index: 1; min-height: 132px; display: grid; align-items: center; }
.slip { position: relative; display: grid; gap: 4px; padding: 12px 12px 12px 14px; border: 1.5px solid var(--ink); border-radius: var(--radius-md); background: var(--paper); box-shadow: 3px 3px 0 var(--ink); font-size: 0.8rem; }
.slip::before { content: ""; position: absolute; left: -1.5px; top: 10px; bottom: 10px; width: 4px; background: var(--accent); }
.slip-k { font: 500 0.62rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); }
.slip code { padding: 0; border: 0; background: none; font-size: 0.8rem; font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.slip small { font: 400 0.7rem var(--font-mono); color: var(--text-2); overflow-wrap: anywhere; }
.slip.in-left { animation: slip-in 520ms var(--ease-enter) both; }
.slip.out-right { animation: slip-out 520ms var(--ease-exit) both; }
@keyframes slip-in { from { opacity: 0; transform: translateX(-40px) rotate(-3deg); } to { opacity: 1; transform: none; } }
@keyframes slip-out { to { opacity: 0; transform: translateX(46px) rotate(2deg); } }
.ck-out { position: relative; display: grid; place-items: center; min-height: 132px; }
.ck-out .stamp { font-size: 1.2rem; }

/* receipt tape: the ledger prints here */
.receipt {
  position: relative; padding: 16px 18px 14px; background: var(--paper); border-left: 1.5px solid var(--ink); border-right: 1.5px solid var(--ink);
  font: 400 0.74rem/1.55 var(--font-mono); color: var(--text-2);
  -webkit-mask: radial-gradient(circle at 6px 0, transparent 5px, #000 5.5px) 0 0 / 12px 51% repeat-x, radial-gradient(circle at 6px 100%, transparent 5px, #000 5.5px) 0 100% / 12px 51% repeat-x;
  mask: radial-gradient(circle at 6px 0, transparent 5px, #000 5.5px) 0 0 / 12px 51% repeat-x, radial-gradient(circle at 6px 100%, transparent 5px, #000 5.5px) 0 100% / 12px 51% repeat-x;
  filter: drop-shadow(5px 5px 0 var(--line-strong));
}
.receipt-h { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px dashed var(--line-strong); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.66rem; }
.receipt ol { height: 116px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.receipt li { display: grid; grid-template-columns: 62px 52px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 2px 0; white-space: nowrap; }
.receipt li > * { overflow: hidden; text-overflow: ellipsis; }
.receipt li.new { animation: print 380ms steps(6) both; }
@keyframes print { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.receipt .d-allow { color: var(--status-allow); font-weight: 600; }
.receipt .d-deny { color: var(--status-deny); font-weight: 600; }
.receipt .d-hold { color: var(--status-pending); font-weight: 600; }
.receipt .h { color: var(--text-3); }
.receipt-f { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line-strong); color: var(--text-3); font-size: 0.66rem; }
.receipt-f b { color: var(--status-allow); font-weight: 600; }

/* ticker: decisions scrolling past */
.ticker { position: relative; overflow: hidden; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); background: var(--ink); color: var(--bg); }
.ticker-track { display: flex; width: max-content; animation: tick 60s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker ul { display: flex; flex: none; }
.ticker li { display: inline-flex; align-items: center; gap: 10px; padding: 10px 22px; font: 400 0.76rem var(--font-mono); white-space: nowrap; border-right: 1px solid rgba(255, 255, 255, 0.14); }
.ticker li b { font-weight: 600; letter-spacing: 0.08em; }
.ticker .a { color: #7fd6c9; } .ticker .x { color: #ff9b85; } .ticker .h { color: #f0c26a; }
:root[data-theme="dark"] .ticker .a, :root[data-theme="dark"] .ticker .x, :root[data-theme="dark"] .ticker .h { filter: brightness(0.7) saturate(1.4); }
@keyframes tick { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------------ approver game */
.game { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.game-card { position: relative; padding: 22px; border: 1.5px solid var(--ink); border-radius: var(--radius-lg); background: var(--paper); box-shadow: 8px 8px 0 var(--ink); min-height: 340px; }
.game-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 500 0.7rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); }
.game-score b { color: var(--text); }
.game-req { display: grid; gap: 10px; margin-top: 18px; padding: 16px; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); background: var(--bg); }
.game-req dl { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 6px 12px; font-size: 0.86rem; }
.game-req dt { font: 500 0.66rem/1.9 var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); }
.game-req dd code { font-size: 0.8rem; overflow-wrap: anywhere; }
.game-req.in { animation: slip-in 420ms var(--ease-enter) both; }
.game-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.game-btns .btn { flex: 1 1 140px; }
.btn-deny { background: var(--paper); color: var(--status-deny); border-color: var(--status-deny); }
.btn-deny:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--status-deny); }
.btn-approve { background: var(--status-allow); color: var(--paper); border-color: var(--ink); }
.btn-approve:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.game-verdict { position: absolute; right: 22px; top: 64px; pointer-events: none; }
.game-why { margin-top: 16px; min-height: 3.2em; color: var(--text-2); font-size: 0.92rem; }
.game-why strong { color: var(--text); }
.game-end { display: grid; gap: 10px; place-items: start; }
.game-end h3 { font-size: 1.4rem; }
.game .receipt ol { height: 168px; }
.kbd { display: inline-block; min-width: 20px; padding: 0 5px; border: 1.5px solid currentColor; border-radius: 3px; font: 600 0.68rem/1.5 var(--font-mono); text-align: center; opacity: 0.8; }

/* ------------------------------------------------------------------ reveal: settle like a slip of paper */
.js .reveal { transform: translateY(16px) rotate(-0.4deg); }
.js .reveal.in { transform: none; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 980px) {
  .hero-ck .hero-in, .game { grid-template-columns: minmax(0, 1fr); }
  .section > .wrap::before, .section > .wrap::after { display: none; }
}
@media (max-width: 640px) {
  .hero-bg, .page-hero::before { --margin-x: 10px; }
  .ck-lane { grid-template-columns: minmax(0, 1fr) 88px; grid-template-rows: auto auto; }
  .ck-out { grid-column: 1 / -1; min-height: 64px; }
  .ck-lane { min-height: 0; padding: 12px 0; }
  .ck-slot { min-height: 112px; }
  .receipt li { grid-template-columns: 52px minmax(0, 1fr) auto; }
  .receipt li .t { display: none; }
  .cta-card::after { display: none; }
  .game-req dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .game-req dt { margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .js .reveal .muted-h, .js .page-hero .muted-h, .js .hero .muted-h { background-size: 100% 100%; animation: none; }
}

/* live gateway demo: same paper and ink */
.gw-node, .gw-checks li, .tgl { border-radius: var(--radius-sm); }
.gw-node { border-color: var(--line-strong); background: var(--paper); }
.gw-gate { border: 1.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.gw-bar, .gw-foot { border-color: var(--ink); }
.trust li, .trust { color: var(--text-2); }
.game-wrap { display: grid; gap: 22px; }
.game h2 { font-size: var(--text-4xl); letter-spacing: var(--tracking-display); line-height: 1.08; margin-top: 14px; }
.game .sub { margin-top: 18px; }
.game .fine { margin-top: 14px; }