/* ZIONX v3 (Studio, 05.11.2026). Tokens from the Stitch design system "Nocturnal Precision" (project 4507322829916186437):
   amber = the human (Levi, the one call to action), cyan = the machine (AI seats, links, focus). No shadows, 12px corners.
   Fonts fall back to system faces until Space Grotesk / IBM Plex are self-hosted (CSP allows only our own files). */
:root {
  --page: #070B14; --card: #0F1626; --line: #2A3550; --ink: #EEF1F7; --muted: #A3AEC2;
  --amber: #FFB547; --cyan: #3DD9F0; --radius: 12px;
  --accent: var(--amber); --accent-2: var(--cyan);   /* the brand pair: a rebrand changes the two lines above */
  --on-accent: #070B14; --danger: #FF6B6B; --backdrop: rgba(7, 11, 20, .7); --comic-bg: #07060c;
  --glow-amber: rgba(255, 181, 71, .45); --halo-amber: rgba(255, 181, 71, .5); --halo-cyan: rgba(61, 217, 240, .5); --scan: rgba(61, 217, 240, .06);
  --head: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
  color-scheme: dark;
  /* neon scenes (Studio): every neon colour as a token, for Levi's rebrand */
  --neon-amber: #ffb23e; --neon-amber-25: rgba(255, 178, 62, .25); --neon-amber-55: rgba(255, 178, 62, .55); --neon-amber-6: rgba(255, 178, 62, .6); --neon-cyan: #36e7ff; --neon-cyan-25: rgba(54, 231, 255, .25); --neon-cyan-55: rgba(54, 231, 255, .55); --neon-cyan-6: rgba(54, 231, 255, .6); --neon-green: #39ff88; --neon-green-6: rgba(57, 255, 136, .6); --neon-ink: #fff7ea; --neon-panel: #0c0a14; --neon-pink: #ff4f9a; --neon-pink-6: rgba(255, 79, 154, .6); --neon-teal: #00f0d0; --neon-teal-6: rgba(0, 240, 208, .6); --neon-term-6: rgba(61, 217, 240, .6); --neon-violet: #b98cff; --neon-violet-6: rgba(185, 140, 255, .6);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --page: #F7F8FB; --card: #FFFFFF; --line: #D7DFED; --ink: #0B1430; --muted: #4B5670; --cyan: #0B7285; --danger: #C92A2A; color-scheme: light; }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 17px/1.65 var(--body); }
a { color: var(--cyan); text-underline-offset: 4px; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--head); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(34px, 5vw, 56px); }
h2 { font-size: clamp(24px, 3vw, 32px); }
h3 { font-size: 20px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 clamp(16px, 5vw, 80px); }

/* top bar */
.bar { border-bottom: 1px solid var(--line); }
.bar .wrap { display: flex; align-items: center; gap: 28px; min-height: 72px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font: 600 22px var(--head); }
.logo-slot { width: 40px; height: 40px; border: 1px dashed var(--muted); border-radius: 6px; display: grid; place-items: center; font: 9px var(--mono); color: var(--muted); }
.nav { display: flex; gap: 22px; flex-wrap: wrap; margin-inline-start: auto; }
.nav a { color: var(--muted); text-decoration: none; padding: 10px 0; }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; }
.cta { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 28px; border-radius: var(--radius); background: var(--amber); color: var(--on-accent); font-weight: 500; text-decoration: none; }
.cta:hover { opacity: .92; }

/* page parts */
.head { padding: 72px 0 40px; max-width: 820px; }
.band { padding: 40px 0 72px; }
.grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; position: relative; }
.card.star { padding: 32px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font: 500 13px var(--mono); color: var(--cyan); border: 1px solid var(--muted); border-radius: 6px; padding: 3px 10px; } /* chip edge 3:1+, never the hairline */
.chip.human { color: var(--amber); }
.chip.pending { color: var(--muted); border-style: dashed; }
.portrait { width: 96px; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 10px; display: grid; place-items: center; font: 600 32px var(--mono); color: var(--muted); margin-bottom: 16px; text-align: center; padding: 6px; }
.star .portrait { width: 160px; }
.big { font: 600 40px/1.1 var(--mono); font-variant-numeric: tabular-nums; }
.row { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding: 10px 0; }
.ask { border-top: 1px solid var(--line); padding: 56px 0 72px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.foot { border-top: 1px solid var(--line); padding: 28px 0 40px; font-size: 14px; color: var(--muted); }

/* stats bars: the number is always written, never colour alone */
.bars { list-style: none; padding: 0; margin: 0; }
.bars li { display: grid; grid-template-columns: 180px 1fr 48px; gap: 12px; align-items: center; padding: 6px 0; }
.bars .track { height: 12px; border-radius: 4px; background: var(--line); overflow: hidden; }
.bars .fill { display: block; height: 100%; background: var(--cyan); transform-origin: left; }
.w0{width:0%}.w2{width:2%}.w4{width:4%}.w6{width:6%}.w8{width:8%}.w10{width:10%}.w12{width:12%}.w14{width:14%}.w16{width:16%}.w18{width:18%}.w20{width:20%}.w22{width:22%}.w24{width:24%}.w26{width:26%}.w28{width:28%}.w30{width:30%}.w32{width:32%}.w34{width:34%}.w36{width:36%}.w38{width:38%}.w40{width:40%}.w42{width:42%}.w44{width:44%}.w46{width:46%}.w48{width:48%}.w50{width:50%}.w52{width:52%}.w54{width:54%}.w56{width:56%}.w58{width:58%}.w60{width:60%}.w62{width:62%}.w64{width:64%}.w66{width:66%}.w68{width:68%}.w70{width:70%}.w72{width:72%}.w74{width:74%}.w76{width:76%}.w78{width:78%}.w80{width:80%}.w82{width:82%}.w84{width:84%}.w86{width:86%}.w88{width:88%}.w90{width:90%}.w92{width:92%}.w94{width:94%}.w96{width:96%}.w98{width:98%}.w100{width:100%}


/* history */
.counters { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.timeline { list-style: none; padding: 0; margin: 0; border-inline-start: 1px solid var(--line); }
.timeline li { padding-block: 10px; padding-inline: 20px 0; position: relative; }
.timeline li::before { content: ""; position: absolute; inset-inline-start: -5px; top: 18px; width: 9px; height: 9px; border-radius: 2px; background: var(--card); border: 1px solid var(--cyan); }

/* the live build log */
.log { font: 13px/1.6 var(--mono); color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; min-height: 7.2em; overflow: hidden; }
.log b { color: var(--cyan); font-weight: 500; }

/* alive layer (v2): sections fade and slide 8 px in 300 ms as they scroll in; still with reduced motion */
.alive [data-build] { opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease; }
.alive [data-build].built { opacity: 1; transform: none; }
.alive .card::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--cyan); border-radius: var(--radius); clip-path: inset(0 100% 100% 0); transition: clip-path .7s ease; pointer-events: none; opacity: .5; }
.alive .card.built::after { clip-path: inset(0 0 0 0); opacity: 0; transition: clip-path .7s ease, opacity .6s .7s ease; }
.alive .bars .fill { transform: scaleX(0); transition: transform .9s ease; }
.alive .built .bars .fill, .alive .bars.built .fill { transform: scaleX(1); }
.caret::after { content: "\258C"; color: var(--cyan); margin-inline-start: 2px; }
/* typing without layout shift: the invisible full text holds the size, the typed text sits on top of it */
.typing { position: relative; }
.typing .type-ghost { visibility: hidden; }
.typing .type-shown { position: absolute; inset: 0; }
/* live touches (v2, Levi 06.11.2026 "it is still not alive"): the hero cursor blinks (1 per second, no flashing), the one
   .glow per screen breathes, new log lines slide in. Nothing animates under the reader's pointer: the glow rests while
   the button is pointed at or focused; the log holds while pointed at (alive.js). */
.alive .caret::after { animation: blink 1.1s ease-in-out infinite; }
.alive :hover > .caret::after, .alive .caret:hover::after { animation: none; opacity: 1; }   /* rests under the pointer (Freekazoid, II.2) */
@keyframes blink { 0%, 45% { opacity: 1; } 55%, 100% { opacity: .15; } }
/* the glow is a fixed shadow on a layer whose opacity breathes: opacity runs on the compositor, so no repaint per frame */
.glow { position: relative; }
.glow::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 22px 2px var(--glow-amber); opacity: 0; pointer-events: none; will-change: opacity; }
.alive .glow::after { animation: glow 3.2s ease-in-out infinite; }
.alive .glow:hover::after, .alive .glow:focus-visible::after, .alive .glow:active::after { animation: none; opacity: 0; }
@keyframes glow { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.alive .log li:not(:has(time)) { animation: logIn .3s ease both; }
@keyframes logIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.log[data-lines] { height: calc(6 * 1.6em + 28px); }               /* room for all 6 lines from the start: no shift */
.log[data-lines] li:not(:has(time)) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* written lines: one line each */
@media (max-width: 720px) { .log[data-lines] { height: calc(10 * 1.6em + 28px); } }   /* phones: the 3 first lines wrap */
/* the footer walker (Levi 06.11.2026: the small heads read "cheap"): the neon Lantern figure from All Hands, stepping
   along the footer's top edge with two stride frames; decoration only (aria-hidden, no pointer events) */
.walkers { position: relative; height: 0; pointer-events: none; }
.walkers .walker { position: absolute; bottom: 0; left: 0; width: 34px; height: 56px; opacity: 0; }
.walkers .walker img { position: absolute; inset: 0; width: 34px; height: 56px; }
.alive .walkers .walker { opacity: 1; animation: walk 44s linear infinite; }
.alive .walkers .walker img:last-child { animation: stride .6s steps(1) infinite; }
.alive .walkers .walker img:first-child { animation: stride .6s steps(1) infinite reverse; }
@keyframes stride { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes walk {                                                   /* transform only: no layout shift, no sideways scroll */
  0% { transform: translateX(0); opacity: 0; } 4% { opacity: 1; } 96% { opacity: 1; }
  100% { transform: translateX(calc(100vw - 60px)); opacity: 0; } }
@keyframes bob { 50% { translate: 0 -2px; } }
/* the seats strip: one dot per seat, a slow soft pulse (opacity only) */
.seats-strip { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 0 0 16px; }
.seats-strip .seat { display: inline-flex; gap: 6px; align-items: center; font: 13px var(--mono); color: var(--muted); }
.seats-strip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); }
.alive .seats-strip .dot { animation: pulse 2.4s ease-in-out infinite; }
.alive .seats-strip .seat:nth-child(2n) .dot { animation-delay: -.8s; }
.alive .seats-strip .seat:nth-child(3n) .dot { animation-delay: -1.6s; }
@keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .alive [data-build] { opacity: 1; transform: none; transition: none; }
  .alive .card::after { display: none; }
  .alive .bars .fill { transform: none; transition: none; }
  .caret::after, .alive .caret::after, .alive .glow::after, .alive .log li, .alive .seats-strip .dot { animation: none; }
  .walkers { display: none; }
}

/* bots that escape (escape.js); moved here because the CSP blocks injected <style> */
.zx-bot { position: fixed; left: 0; top: 0; width: 72px; height: 72px; z-index: 50; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .45s ease, opacity .3s ease; opacity: 0; will-change: transform; }
.zx-bot img { width: 100%; height: 100%; border-radius: 12px; }
.zx-card { position: fixed; z-index: 51; max-width: 260px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--ink); font: 15px/1.4 var(--body); }
.zx-card b { display: block; margin-bottom: 4px; }

@media (max-width: 640px) {
  .bars li { grid-template-columns: 110px 1fr 40px; }
  .nav { gap: 14px; margin-inline-start: 0; }
}
.linked { border-color: var(--cyan) !important; }
@media print { .alive [data-build] { opacity: 1 !important; transform: none !important; } .zx-bot, .zx-card, .log { display: none; } }

/* languages: switcher in list order, each name in its own language; right-to-left mirrors through logical properties */
.langs { display: flex; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.langs a { color: var(--muted); text-decoration: none; padding: 12px 2px; min-height: 44px; display: inline-flex; align-items: center; }
.langs a[aria-current="true"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--cyan); }
[dir="rtl"] .bars .fill { transform-origin: right; }
[dir="rtl"] .mono, [dir="rtl"] [data-since], [dir="rtl"] [data-count] { direction: ltr; unicode-bidi: isolate; }

/* the cartoons switch (WCAG 2.2.2) and the catch card's Close button: 44px targets */
.cartoons { font: inherit; color: var(--muted); background: none; border: 1px solid var(--muted); border-radius: 8px; min-height: 44px; padding: 8px 14px; cursor: pointer; }
.cartoons[aria-pressed="false"] { border-style: dashed; }
.zx-close { display: block; margin-top: 8px; min-height: 44px; padding: 8px 14px; font: inherit; color: var(--ink); background: none; border: 1px solid var(--muted); border-radius: 8px; cursor: pointer; }
.zx-card a { display: inline-block; min-height: 44px; padding: 10px 0; }

/* v4 page parts */
.skip { position: absolute; inset-inline-start: -9999px; }
.skip:focus { inset-inline-start: 16px; top: 8px; z-index: 60; background: var(--card); padding: 10px 14px; border-radius: 8px; }
.lede { font-size: 19px; max-width: 760px; }
.small { font-size: 14px; }
.grid.four { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.hero { display: grid; grid-template-columns: 1fr minmax(160px, 260px); gap: 40px; align-items: center; max-width: none; }
.xmark { width: 100%; height: auto; }
.xmark path { fill: none; stroke-linecap: round; }
.xmark .human { stroke: var(--amber); stroke-width: 22; }
.xmark .machine { stroke: var(--cyan); stroke-width: 6; }
.tile { display: block; color: var(--ink); text-decoration: none; }
.tile:hover, .botslink:hover { border-color: var(--cyan); }
.tile .big { font-size: 26px; }
.log.static { list-style: none; margin: 0 0 12px; }
summary { cursor: pointer; min-height: 44px; }
.offer summary { list-style: none; }
.offer dl { margin: 12px 0 0; }
.offer dt { font-weight: 600; margin-top: 8px; }
.offer dd { margin: 0; color: var(--muted); }
.faq { border-top: 1px solid var(--line); padding: 10px 0; }
.faq summary { font-weight: 600; padding: 10px 0; }
.steps { list-style: none; padding: 0; }
.pyramid { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.apex { width: min(420px, 100%); }
.trays { display: grid; gap: 16px; width: 100%; }
.tray > summary { list-style: none; }
.tray[open] > summary { border-color: var(--cyan); }
.tray > .grid { margin-top: 16px; }
.botslink { display: block; width: 100%; color: var(--ink); text-decoration: none; }
.seat .model { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.chip.pending { border-style: dashed; color: var(--muted); }
button.link { font: inherit; color: var(--cyan); background: none; border: 0; padding: 10px 0; min-height: 44px; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.drawer { max-width: 640px; width: calc(100% - 32px); background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.drawer::backdrop { background: var(--backdrop); }
table.bars { width: 100%; border-collapse: collapse; }
table.bars caption { text-align: start; color: var(--muted); padding-bottom: 12px; }
table.bars th, table.bars td { text-align: start; padding: 6px 8px 6px 0; font-weight: 400; }
table.bars thead th { color: var(--muted); font-size: 14px; }
table.bars td { display: flex; align-items: center; gap: 12px; }
table.bars .track { flex: 1; height: 12px; border-radius: 4px; background: var(--line); overflow: hidden; display: block; }
table.bars tbody.apart tr.apart th, table.bars tbody.apart tr.apart td { opacity: .85; }
table.bars tbody.apart tr.apart .fill { background: none; outline: 1px dashed var(--cyan); outline-offset: -1px; }
.alive table.bars .fill { transform: scaleX(0); transition: transform .9s ease; }
.alive .built table.bars .fill { transform: scaleX(1); }
.contact-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 24px; }
.meets { list-style: none; padding: 0; margin: 0; }
.meet { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; min-height: 44px; }
.meet span:not(.mono) { grid-column: 1 / -1; color: var(--muted); }
.meet .link { color: var(--cyan); text-decoration: underline; }
.pair { display: flex; gap: 16px; flex-wrap: wrap; }
a.cartoons { display: inline-flex; align-items: center; text-decoration: none; }
.address { font-size: 18px; user-select: all; }
.facts { padding-inline-start: 18px; }
.prose p { max-width: 760px; }
@media (max-width: 900px) { .contact-grid, .hero { grid-template-columns: 1fr; } .xmark { max-width: 180px; } }
@media (prefers-reduced-motion: reduce) { .alive table.bars .fill { transform: none; transition: none; } }
/* one amber button per view (copy v4): the top-bar "Book a call" is the quiet outlined one */
.bar .cta { background: none; color: var(--ink); border: 1px solid var(--muted); }
.bar .cta:hover { border-color: var(--amber); opacity: 1; }

/* Stitch look, merged 05.11.2026 (stitch-export/*-dark.html): real fonts, more air, numbered section labels,
   a bolder smaller top menu, the X mark with its meeting ring. */
body { counter-reset: band; }
h1 { font-weight: 600; letter-spacing: -0.03em; }
.nav a { font: 600 14px var(--head); }
.bar .wrap { min-height: 76px; }
.head { padding: 104px 0 56px; }
.band { padding: 56px 0 96px; border-top: 1px solid var(--line); }
.band.card { border: 1px solid var(--line); margin: 0 0 96px; padding: 32px; }
.band > h2::before, .band > .card > h2:first-child::before { counter-increment: band; content: counter(band, decimal-leading-zero) " / "; display: block; font: 500 12px/1 var(--mono); letter-spacing: .12em; color: var(--muted); margin-bottom: 14px; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip > span[aria-hidden] { display: none; }
.xmark .human { stroke-width: 14; }
.xmark .machine { stroke-width: 2; }
.xmark::after { content: none; }
.card { padding: 32px; }
.ask { padding: 96px 0; }
.ask h2 { font-size: clamp(28px, 3.4vw, 40px); }
.xmark .meet { fill: var(--page); stroke: var(--cyan); stroke-width: 2; }

/* consent banner (06.11.2026): fixed, so nothing on the page moves when it appears; two equal buttons */
.consent { position: fixed; inset-inline: 16px; bottom: 16px; z-index: 50; max-width: 640px; margin-inline: auto;
  background: var(--card); border: 1px solid var(--muted); border-radius: 12px; padding: 14px 16px; }
.consent p { margin: 0 0 8px; } .consent .pair { display: flex; gap: 12px; margin: 0; } .consent .pair .cartoons { flex: 1; }
.free b { font-weight: 600; }

/* the brief guide and template (06.11.2026) */
pre#brief-template { white-space: pre-wrap; font: 14px/1.5 var(--mono); border: 1px solid var(--line); border-radius: 10px; padding: 14px; overflow-x: auto; }
ol.brief { list-style: none; padding: 0; }

/* the phone header (06.11.2026): one row, ZIONX + Book a call + Menu; the links open over the page, nothing moves */
.menu { display: none; }
@media (max-width: 768px) {
  .bar .wrap { flex-wrap: nowrap; gap: 12px; min-height: 60px; }
  .bar .nav, .bar .langs { display: none; }
  .bar .cta { margin-inline-start: auto; min-height: 44px; padding: 10px 14px; font-size: 15px; white-space: nowrap; }
  .menu { display: block; position: relative; }
  .menu > summary { list-style: none; display: flex; align-items: center; min-height: 44px; min-width: 44px; padding: 10px 14px;
    border: 1px solid var(--muted); border-radius: 8px; cursor: pointer; }
  .menu > summary::-webkit-details-marker { display: none; }
  .menu > summary:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
  .menu[open] .nav-m { position: absolute; inset-inline-end: 0; top: 52px; z-index: 40; display: flex; flex-direction: column;
    min-width: 220px; padding: 8px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
  .nav-m a { display: flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
  .nav-m a[aria-current="page"] { font-weight: 600; text-decoration: underline; text-decoration-color: var(--amber); }
  .langs-m { display: flex; min-height: 44px; align-items: center; color: var(--muted); border-top: 1px solid var(--line); }
}

/* ---- one spacing scale (06.11.2026, Levi: "spacing between text and buttons is a bit off") ----
   Stitch's 4 px steps as tokens; every rule below snaps an off-scale value to the nearest step. Last in the file, so it wins. */
:root { --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px; --s12: 48px; --s16: 64px; --s24: 96px; }
main :is(p, ul, ol, pre, blockquote, table, details) { margin: 0 0 var(--s4); }
main h1, main h2 { margin: 0 0 var(--s4); }
main h3 { margin: 0 0 var(--s3); }
main :is(.card, section, details, dialog) > :last-child { margin-bottom: 0; }
/* text -> controls: always 24 px, and 12 px between controls in a row */
main p:has(> .cta, > .cartoons, > button) { margin-top: var(--s6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
main :is(.card, section, dialog) > :is(button, a.cta, a.cartoons) { margin-top: var(--s2); }
main .pair, .consent .pair { gap: var(--s3); }
.ask > div > p:last-child { margin-bottom: 0; }
/* the off-scale values, snapped */
.head { padding: var(--s24) 0 var(--s12); }
.band { padding: var(--s16) 0 var(--s24); }
.band > h2::before, .band > .card > h2:first-child::before { margin-bottom: var(--s3); }
.chip { gap: var(--s2); padding: var(--s1) var(--s3); }
.row { padding: var(--s3) 0; }
.foot { padding: var(--s8) 0 var(--s12); }
.bar .wrap { gap: var(--s6); }
.nav { gap: var(--s6); }
.consent { padding: var(--s4); }
.card.soon { border-style: dashed; }
@media (max-width: 640px) {
  .head { padding: var(--s16) 0 var(--s8); }
  .band { padding: var(--s12) 0 var(--s16); }
  .band.card { margin-bottom: var(--s16); padding: var(--s6); }
  .card { padding: var(--s6); }
  .ask { padding: var(--s16) 0; }
}
main .ask > a.cta { margin-top: 0; }   /* the ask's own 24 px gap is the spacing */
.row .big { font-size: 32px; white-space: nowrap; }   /* a score stays on one line in a narrow card */

/* the team map (06.11.2026): pixel heads, crisp at any size */
img.portrait.head { padding: 0; object-fit: contain; image-rendering: pixelated; background: var(--page); }
.botslink .faces { display: flex; gap: var(--s2); margin-bottom: var(--s3); }
.botslink .faces .portrait { width: 40px; margin: 0; font-size: 16px; }
/* Bots and Hired Swords: one block on Team; the swords open on click (the 3-4 rule) */
.botslink > summary { list-style: none; cursor: pointer; min-height: 44px; }
.botslink > summary::-webkit-details-marker { display: none; }
.botslink[open] > summary { margin-bottom: var(--s4); }

/* one smooth scroll (06.11.2026): each team group is its own section, every face in view; FAQ as plain Q and A */
.team-group .grid { margin-top: var(--s4); }
.faq { border-top: 1px solid var(--line); padding: var(--s4) 0; }
.faq h3 { font-size: 19px; margin-bottom: var(--s2); }

/* the consent bar on a phone (Gen Z check, 06.11.2026): compact, so it never sits on the first screen's button for long */
@media (max-width: 640px) {
  .consent { inset-inline: 8px; bottom: 8px; padding: var(--s3); font-size: 14px; }
  .consent p { margin-bottom: var(--s2); }
  .consent .pair .cartoons { min-height: 44px; padding: 6px 10px; }
}
/* the team on a phone: two compact face cards per row, so the whole team is a short, smooth scroll */
@media (max-width: 640px) {
  .team-group .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
  .team-group .card { padding: var(--s3); }
  .team-group .portrait { width: 64px; margin-bottom: var(--s2); }
  .team-group h3 { font-size: 17px; }
  .team-group .card p { font-size: 14px; }
}
.team-group > .grid + p { margin-top: var(--s4); }

/* in their own words (06.11.2026): the seats' verses and lines on Team and Songs */
.voice { margin-top: var(--s4); border-top: 1px solid var(--line); padding-top: var(--s4); }
.voice .label { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s2); }
.voice blockquote, .verse blockquote { margin: 0 0 var(--s2); padding-inline-start: var(--s3); border-inline-start: 2px solid var(--cyan); }
.voice .chorus, .verse .chorus { font-style: italic; color: var(--muted); }
.voice blockquote.line { border-color: var(--amber); }

/* neon scenes (scenes.js, Studio 06.11.2026): in the empty strip above a section heading, one at a time; decoration only.
   Transform/opacity only; the strip is padding that was always there, so nothing shifts. */
.zx-scene { position: absolute; z-index: 5; pointer-events: none; display: flex; align-items: center; opacity: 0; animation: sceneIn .4s ease forwards; }
.zx-scene.out { animation: sceneOut .35s ease forwards; }
@keyframes sceneIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes sceneOut { from { opacity: 1; } to { opacity: 0; } }
/* neon figures (Levi: bigger, brighter, the strips' tube style): the character's head on a tube-lit body (static glow) */
.zx-scene .fig { display: inline-flex; flex-direction: column; align-items: center; width: 60px; flex: none; }
.zx-scene .fig .fhead { width: 44px; height: 44px; image-rendering: pixelated; border-radius: 8px; margin-bottom: -6px; position: relative; z-index: 1; }
.zx-scene .fig .fbody { width: 42px; height: 76px; }               /* the body file is cropped tight: thick, bright tubes */
.zx-scene .fig.amber .fhead { filter: drop-shadow(0 0 3px var(--neon-amber)) drop-shadow(0 0 9px var(--neon-amber-6)); }
.zx-scene .fig.cyan .fhead { filter: drop-shadow(0 0 3px var(--neon-cyan)) drop-shadow(0 0 9px var(--neon-cyan-6)); }
.zx-scene .fig.teal .fhead { filter: drop-shadow(0 0 3px var(--neon-teal)) drop-shadow(0 0 9px var(--neon-teal-6)); }
.zx-scene .fig.pink .fhead { filter: drop-shadow(0 0 3px var(--neon-pink)) drop-shadow(0 0 9px var(--neon-pink-6)); }
.zx-scene .fig.green .fhead { filter: drop-shadow(0 0 3px var(--neon-green)) drop-shadow(0 0 9px var(--neon-green-6)); }
.zx-scene .fig.violet .fhead { filter: drop-shadow(0 0 3px var(--neon-violet)) drop-shadow(0 0 9px var(--neon-violet-6)); }
.zx-scene .side { display: inline-flex; align-items: flex-start; gap: 10px; }
.zx-scene .side.right { margin-inline-start: auto; }
.zx-scene .bubble { font: 15px/1.3 'Hand', var(--mono); color: var(--neon-ink); background: var(--neon-panel); border: 2px solid var(--neon-cyan); box-shadow: 0 0 8px var(--neon-cyan-55), inset 0 0 6px var(--neon-cyan-25); border-radius: 14px; padding: 6px 12px; white-space: nowrap; width: 31ch; box-sizing: content-box; overflow: hidden;   /* fixed width: a new line never moves a face */ text-overflow: ellipsis; opacity: 0; transition: opacity .3s ease; }
.zx-scene .right .bubble { border-color: var(--neon-amber); box-shadow: 0 0 8px var(--neon-amber-55), inset 0 0 6px var(--neon-amber-25); text-align: end; }
.zx-scene.sleep .bubble.z { width: auto; }
.zx-scene .bubble.on { opacity: 1; }
.zx-scene.sleep { gap: 8px; }
.zx-scene.sleep .bubble.z { opacity: 1; border: 0; background: none; color: var(--muted); animation: doze 2.6s ease-in-out infinite; }
@keyframes doze { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: .9; transform: translateY(-4px); } }
.zx-scene.walk .fig { animation: stroll 9s linear forwards; }
.zx-scene.walk .fig .fbody { animation: bob .5s steps(2) infinite; }
@keyframes stroll { from { transform: translateX(0); } to { transform: translateX(var(--w, 300px)); } }
.zx-scene.term { font: 12px/1 var(--mono); color: var(--cyan); }
.zx-scene.term .term-line { padding: 2px 6px; background: linear-gradient(transparent 50%, var(--scan) 50%) 0 0 / 100% 3px; text-shadow: 0 0 6px var(--neon-term-6); }
.zx-scene.term.dissolve .term-line { animation: dissolve .8s steps(6) forwards; }
@keyframes dissolve { 0% { opacity: 1; transform: none; } 40% { opacity: .6; transform: translateX(2px); } 70% { opacity: .3; transform: translateX(-1px); } 100% { opacity: 0; transform: none; } }
@media (prefers-reduced-motion: reduce) { .zx-scene { display: none; } }

/* how we run the team (06.11.2026): the four signals and the drawn mock (marked Illustration) */
.sig { display: inline-flex; align-items: center; justify-content: center; inline-size: 24px; block-size: 24px; border-radius: 6px; font: 600 13px var(--mono); border: 1px solid currentColor; }
.sig1 { color: var(--amber); } .sig2 { color: var(--cyan); } .sig3 { color: var(--ink); } .sig4 { color: var(--danger); }
.mobile-band { display: grid; gap: var(--s6); grid-template-columns: 1fr minmax(0, 420px); align-items: start; }
.mock ul { list-style: none; margin: 0 0 var(--s3); padding: 0; display: grid; gap: var(--s3); }
.mock li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); border-bottom: 1px solid var(--line); padding-bottom: var(--s3); }
.mock .m-ask { flex: 1 1 180px; font-size: 14px; }
.mock .m-btns { display: flex; gap: var(--s2); }
.mock .m-btn { font: 500 13px var(--mono); border: 1px solid var(--muted); border-radius: 6px; padding: 4px 10px; }
.mock .m-strip { font-size: 13px; margin-bottom: var(--s3); }
@media (max-width: 760px) { .mobile-band { grid-template-columns: 1fr; } }

/* Levi's portrait is painted, not an icon: smooth scaling, filled frame */
img.portrait.head.photo { image-rendering: auto; object-fit: cover; height: auto; aspect-ratio: 1; }
.head > picture img.portrait.head.photo { width: 160px; }

/* the verb bar (verbs.js, Studio 06.11.2026): a homage to point-and-click games in our own pixel look; no motion,
   the answer line has its room reserved (no layout shift) */
.verbs { margin: var(--s6, 24px) 0 0; border: 2px solid var(--line); border-radius: 8px; padding: 12px; background: var(--card); font: 14px/1.4 var(--mono); max-width: 640px; }
.verb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.verbs button { font: 600 14px/1.2 var(--mono); color: var(--ink); background: var(--page); border: 2px solid var(--line); border-radius: 4px; padding: 8px 6px; min-height: 44px; cursor: pointer; }
.verbs button:hover { border-color: var(--cyan); }
.verbs button[aria-pressed="true"] { border-color: var(--amber); color: var(--amber); box-shadow: inset 0 0 0 2px var(--amber); }
.verbs button[aria-pressed="true"]::before { content: "\25B6 "; }      /* not colour alone: a marker on the chosen verb */
.verb-things { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.verb-things button { font-weight: 500; color: var(--cyan); }
.verbs.armed [data-verb-thing] { border-style: dashed; border-color: var(--cyan); }
.verb-say { margin: 10px 0 0; min-height: calc(2 * 1.4em); color: var(--ink); }
.armed ~ * [data-verb], [data-verb] { cursor: default; }
.monkeys-line { display: flex; gap: 12px; align-items: center; }
.monkeys-line img { image-rendering: pixelated; border-radius: 8px; flex: none; }
@media (max-width: 600px) { .verb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .verb-say { min-height: calc(3 * 1.4em); } }

/* All Hands, our comic (comics.js, Studio 06.11.2026): the neon strips inline; fonts are the comic's own (OFL, subset) */
@font-face { font-family: 'Hand'; src: url('fonts/comic-hand.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Term'; src: url('fonts/comic-term.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Tube'; src: url('fonts/comic-tube.woff2') format('woff2'); font-display: swap; }
.comic { margin: var(--s6, 24px) 0; }
.comic-scroll { border-radius: 12px; background: var(--comic-bg); aspect-ratio: 1200 / 540; }
.neon-strip { display: block; width: 100%; height: 100%; }
.comic figcaption .swipe { display: none; }
@media (max-width: 720px) {                    /* phones: the strip at reading size, the three panels swiped sideways */
  .comic-scroll { overflow-x: auto; aspect-ratio: auto; height: 90vw; overscroll-behavior-x: contain; }
  .comic-scroll .neon-strip { width: 200vw; height: 90vw; }        /* exactly the strip's 1200:540: no empty margin */
  .comic figcaption .swipe { display: block; margin-top: 8px; font: 13px var(--mono); }
}
.comic-scroll:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
/* the power-up: panels light like a neon sign (two dips, under three flashes a second), bubbles appear as they type */
.neon-wait .np, .neon-wait .nh, .neon-wait .nf { opacity: 0; }
.neon-wait .np.on, .neon-wait .nh.on, .neon-wait .nf.on { animation: power .5s steps(1) forwards; }
@keyframes power { 0% { opacity: .55; } 20% { opacity: .12; } 45% { opacity: .8; } 60% { opacity: .3; } 100% { opacity: 1; } }
.neon-wait .nb { opacity: 0; }
.neon-wait .nb.on { opacity: 1; transition: opacity .15s ease; }
@media (prefers-reduced-motion: reduce) { .neon-wait .np, .neon-wait .nh, .neon-wait .nf, .neon-wait .nb { opacity: 1; animation: none; } }
/* text for screen readers and agents only (the comic's transcript): in the page, not on screen */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* visual pass (06.11.2026): stat tiles (big number, label, neighbour, source behind the i), charts, the flow, the money */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.stat { display: flex; flex-direction: column; gap: var(--s2); }
.stat-big { font: 600 clamp(26px, 3vw, 36px)/1.1 var(--mono); white-space: nowrap; color: var(--ink); margin: 0; padding-inline-start: var(--s3); border-inline-start: 3px solid var(--accent); }   /* ink, not amber: AA on both themes */
.stat-label { margin: 0; font-weight: 500; }
.stat-nb { margin: 0; font-size: 15px; }
.stat-src { margin: auto 0 0; display: flex; gap: var(--s2); align-items: baseline; }
.stat-src .i { flex: none; display: inline-grid; place-items: center; inline-size: 20px; block-size: 20px; border: 1px solid var(--muted); border-radius: 50%; font: 600 12px var(--mono); color: var(--accent-2); }
.chart { margin: var(--s6) 0 0; }
.chart figcaption { margin-top: var(--s3); }
.viz-pair { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); margin-top: var(--s6); align-items: start; }
.flowchart { margin: var(--s6) 0 0; }
.flow-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.flow-steps li { position: relative; display: flex; flex-direction: column; gap: var(--s1); padding: var(--s3); border: 1px solid var(--line); border-radius: var(--radius); }
.flow-steps li:nth-child(4) { border-color: var(--accent); }   /* Levi: the one human step */
.flow-steps li + li::before { content: "\2192"; position: absolute; inset-inline-start: -12px; top: 50%; transform: translateY(-50%); color: var(--accent-2); font: 600 14px var(--mono); }
.flow-steps .step-n { color: var(--muted); font-size: 13px; }
.flow-steps span:last-child { font-size: 15px; color: var(--muted); }
.money-bar { display: flex; gap: 4px; margin: var(--s4) 0; }
.money-bar .seg { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s3); border-radius: 8px; min-width: 0; }
.money-bar .seg-a { background: var(--accent); color: var(--on-accent); }
.money-bar .seg-b { border: 1px solid var(--accent-2); }
.money-bar .seg b { font-size: 22px; }
.money-back { margin: 0; color: var(--muted); }
@media (max-width: 600px) { .flow-steps li + li::before { content: "\2193"; inset-inline-start: 50%; top: -14px; transform: translateX(-50%); } }

/* the first screen on Home (Levi 06.11.2026): order, or follow the story. The answer line and the brief keep their room. */
.order { padding-block: var(--s8) var(--s6); }
.order h1 { margin-bottom: var(--s6); }
.order-grid { display: grid; gap: var(--s6); grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
.order-q { display: block; font: 600 clamp(22px, 2.6vw, 30px)/1.25 var(--head); margin-bottom: var(--s3); }
.order textarea { width: 100%; min-height: 9em; resize: vertical; font: 19px/1.5 var(--body); color: var(--ink); background: var(--card);
  border: 2px solid var(--accent-2); border-radius: var(--radius); padding: var(--s4); }
.order textarea::placeholder { color: var(--muted); }
.order-do { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-top: var(--s6); }
.order-out { height: calc(6 * 1.65em); overflow-y: auto; margin: var(--s4) 0 0; }   /* room for the longest answer: nothing moves when it lands */
.order-brief { height: 300px; overflow: auto; margin: 0; padding: var(--s4); font: 13px/1.5 var(--mono); white-space: pre-wrap;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); }
.order-side .label { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s2); }
.story-link { display: inline-flex; gap: var(--s2); font: 600 18px var(--head); margin-top: var(--s4); }
@media (max-width: 900px) { .order-grid { grid-template-columns: 1fr; } .order-brief { height: 220px; } }

/* All Hands: the paper-trading caption under every strip (Lantern 06.11.2026) */
.comic figcaption .paper { display: block; font-weight: 600; margin-bottom: var(--s1); }

/* the accountant audition (06.11.2026): a wide table scrolls inside its card on phones, never the page */
.table-scroll { overflow-x: auto; margin-top: var(--s6); }
table.acc { width: 100%; min-width: 640px; border-collapse: collapse; }
table.acc caption { text-align: start; color: var(--muted); padding-bottom: var(--s3); }
table.acc th, table.acc td { text-align: start; vertical-align: top; padding: var(--s2) var(--s3) var(--s2) 0; border-bottom: 1px solid var(--line); font-weight: 400; }
table.acc thead th { color: var(--muted); font-size: 14px; }
table.acc tbody th { font-weight: 600; white-space: nowrap; }

/* the line under the Home box names this visitor's AI provider once the worker answers: room for 3 lines, so nothing moves */
#order-note { min-height: calc(3 * 1.5em); }