/* KONTRAV3RSI 2028: heavy-80s vaporwave, mobile-first. Palette = brand/BRAND.md §1 exactly. */
@font-face { font-family: "Audiowide"; src: url("/assets/fonts/audiowide.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Press Start 2P"; src: url("/assets/fonts/pressstart2p.woff2") format("woff2"); font-display: swap; }

:root {
  --neon-pink: #FF3CD2;
  --neon-cyan: #28E6FF;
  --rim-magenta: #FF28DC;
  --rim-cyan: #28DCFF;
  --chrome-outline: #FF28C8;
  --laser-yellow: #FFFF3C;
  --sunset-orange: #FF8C28;
  --scanner-red: #FF1E1E;
  --vice-teal: #14C8C8;
  --chrome-sky: #3C96FF;
  --chrome-white: #FFFFFF;
  --chrome-horizon: #281450;
  --chrome-gold: #FFC85A;
  --chrome-pink: #FF78C8;
  --sun-yellow: #FFE65A;
  --sunset-rose: #FF3C78;
  --deep-violet: #280A50;
  --night-purple: #190823;

  --text: #F6EEFF;          /* body text on night purple: ~17:1 */
  --muted: #D9C8EE;         /* secondary text: ~12:1 */
  --panel: rgba(40, 10, 80, .72);
  --radius: 14px;
  --font-title: "Audiowide", "Trebuchet MS", system-ui, sans-serif;
  --font-pixel: "Press Start 2P", ui-monospace, monospace;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--night-purple); color: var(--text);
  font: 1.0625rem/1.65 var(--font-body);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--neon-cyan); text-underline-offset: .18em; }
a:hover { color: var(--chrome-white); }
:focus-visible { outline: 3px solid var(--laser-yellow); outline-offset: 3px; border-radius: 4px; }
main { flex: 1; }
h1, h2, h3 { font-family: var(--font-title); font-weight: 400; line-height: 1.2; letter-spacing: .01em; }
h1 { font-size: clamp(1.9rem, 6vw, 3.2rem); margin: 0 0 .6rem; }
h2 { font-size: clamp(1.4rem, 4.4vw, 2rem); margin: 2.4rem 0 .8rem; color: var(--text); text-shadow: 0 0 16px rgba(255,60,210,.55); }
h2::after { content: ""; display: block; width: 64px; height: 3px; margin-top: .5rem; background: linear-gradient(90deg, var(--neon-pink), var(--neon-cyan)); border-radius: 2px; }
h3 { font-size: 1.15rem; margin: 1.6rem 0 .5rem; color: var(--neon-cyan); }
p, li { max-width: 68ch; }
.wrap { width: min(100% - 2.5rem, 1080px); margin-inline: auto; }
.narrow { width: min(100% - 2.5rem, 760px); margin-inline: auto; }

.skip { position: absolute; left: .75rem; top: -4rem; z-index: 200; background: var(--laser-yellow); color: var(--night-purple); padding: .6rem 1rem; border-radius: 8px; font-weight: 700; }
.skip:focus { top: .75rem; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Header / nav ─────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--night-purple); border-bottom: 1px solid rgba(40,230,255,.35); box-shadow: 0 0 18px rgba(255,40,220,.25); }
.bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; min-height: 72px; }
.bar-actions { display: flex; align-items: center; gap: .6rem; }
/* Logo: PNG on #190823 only, no effects; clear space >= K height (~20px at this size). */
.brand { display: block; width: 150px; flex: none; padding: 12px 0; }
.brand img { width: 100%; }
.brand-text { display: none; font-family: var(--font-title); color: var(--text); font-size: 1.1rem; }
@media (max-width: 340px) { .brand { width: auto; } .brand img { display: none; } .brand-text { display: inline; } }
.nav-toggle { font: inherit; font-family: var(--font-pixel); font-size: .62rem; color: var(--text); background: transparent; border: 2px solid var(--neon-cyan); border-radius: 8px; padding: .65rem .8rem; min-height: 44px; cursor: pointer; }
.nav-toggle[aria-expanded="true"] { border-color: var(--neon-pink); }
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav a { display: block; padding: .8rem .25rem; color: var(--text); text-decoration: none; font-family: var(--font-title); font-size: 1rem; }
.site-nav a:hover { color: var(--neon-cyan); }
.site-nav a[aria-current="page"] { color: var(--text); text-decoration: underline; text-decoration-color: var(--neon-pink); text-decoration-thickness: 3px; text-underline-offset: .4em; }
/* No JS: the nav is simply always visible (wrapped under the logo). */
.site-nav { flex-basis: 100%; }
.js .site-nav { display: none; }
.js .site-nav.open { display: block; padding-bottom: .8rem; }
.js .site-nav.open li + li { border-top: 1px solid rgba(255,255,255,.08); }
html:not(.js) .nav-toggle { display: none; }
html:not(.js) .bar { flex-wrap: wrap; padding-block: .5rem; }
html:not(.js) .site-nav ul { display: flex; flex-wrap: wrap; gap: 0 1rem; }
@media (min-width: 960px) {
  .bar { flex-wrap: nowrap; }
  .brand { width: 210px; padding: 16px 0; }
  .site-nav { flex-basis: auto; order: 2; margin-left: auto; }
  .bar-actions { order: 3; }
  .nav-toggle { display: none; }
  .js .site-nav, .site-nav { display: block !important; padding: 0 !important; }
  .site-nav ul { display: flex; gap: .2rem 1.1rem; flex-wrap: nowrap; justify-content: flex-end; }
  .site-nav a { white-space: nowrap; }
  .site-nav li + li { border: 0 !important; }
  .site-nav a { padding: .5rem 0; font-size: .95rem; }
}

/* ── Synthwave grid sunset ────────────────────────────── */
.scene { position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(to bottom, var(--deep-violet) 0%, #3a0f5e 38%, #7a1a6e 58%, var(--night-purple) 58.2%); }
.scene .sun { position: absolute; left: 50%; bottom: 42%; width: min(70vw, 440px); aspect-ratio: 1; transform: translate(-50%, 50%); border-radius: 50%; z-index: -2;
  background: linear-gradient(to bottom, var(--sun-yellow) 0%, var(--chrome-gold) 30%, var(--sunset-orange) 55%, var(--sunset-rose) 80%, var(--neon-pink) 100%);
  -webkit-mask: linear-gradient(to bottom, #000 0 52%, transparent 52% 55%, #000 55% 62%, transparent 62% 66%, #000 66% 72%, transparent 72% 77%, #000 77% 83%, transparent 83% 89%, #000 89%);
          mask: linear-gradient(to bottom, #000 0 52%, transparent 52% 55%, #000 55% 62%, transparent 62% 66%, #000 66% 72%, transparent 72% 77%, #000 77% 83%, transparent 83% 89%, #000 89%);
  filter: drop-shadow(0 0 40px rgba(255,60,120,.55)); }
.scene .grid { position: absolute; left: -50%; right: -50%; bottom: 0; height: 42%; z-index: -1; perspective: 260px; perspective-origin: 50% 0; }
.scene .grid::before { content: ""; position: absolute; inset: 0 0 -60px 0; transform-origin: 50% 0; transform: rotateX(62deg);
  background:
    repeating-linear-gradient(to right, rgba(40,230,255,.85) 0 2px, transparent 2px 60px),
    repeating-linear-gradient(to bottom, rgba(255,40,220,.85) 0 2px, transparent 2px 60px);
  background-color: var(--night-purple);
  animation: grid-run 1.3s linear infinite; }
.scene .grid::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(25,8,35,.95), transparent 45%); }
@keyframes grid-run { to { background-position: 0 0, 0 60px; } }
.scene::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.07) 2px 3px); }
.scene .horizon { position: absolute; left: 0; right: 0; bottom: 42%; height: 2px; background: var(--neon-pink); box-shadow: 0 0 18px 3px var(--rim-magenta); z-index: -1; }

.hero { min-height: min(88vh, 760px); display: grid; align-content: start; padding-block: clamp(2.5rem, 9vh, 5.5rem) 12rem; text-align: center; }

.tagline { font-family: var(--font-pixel); font-size: clamp(.55rem, 2.2vw, .75rem); line-height: 1.9; color: var(--neon-cyan); letter-spacing: .04em; margin: 0 auto 1.4rem; }
.hook { font-family: var(--font-title); font-size: clamp(1.25rem, 4.6vw, 2.1rem); line-height: 1.3; margin: 0 auto 1.8rem; max-width: 26ch; text-shadow: 0 2px 0 var(--night-purple), 0 0 22px rgba(255,60,210,.6); }
.cta-row { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }

.page-hero { padding-block: 2.6rem 5.5rem; }
.page-hero .sun { width: min(50vw, 260px); bottom: 34%; }
.page-hero .grid, .page-hero .grid + .horizon { }
.page-hero .grid { height: 34%; }
.page-hero .horizon { bottom: 34%; }
.page-hero h1 { text-shadow: none; }
.page-hero .lede { font-size: 1.15rem; color: var(--text); max-width: 56ch; text-shadow: 0 1px 3px var(--night-purple); }
.kicker, .label { font-family: var(--font-pixel); font-size: .68rem; color: var(--laser-yellow); letter-spacing: .06em; margin: 0 0 .9rem; }

/* Chrome title treatment (Audiowide, chrome gradient, pink outline glow, italic skew). */
.chrome { font-family: var(--font-title); font-style: normal; display: inline-block; transform: skewX(-10deg);
  background: linear-gradient(to bottom, var(--chrome-sky) 0%, var(--chrome-white) 50%, var(--chrome-horizon) 50%, var(--chrome-horizon) 56%, var(--chrome-gold) 56%, var(--chrome-pink) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 1px var(--chrome-outline); padding: 0 .08em; }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) { .chrome { color: var(--chrome-white); } }

/* ── Buttons ──────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .85rem 1.4rem; border-radius: 999px;
  font: 1rem/1.2 var(--font-title); text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.btn-pink { background: var(--neon-pink); color: var(--night-purple); box-shadow: 0 0 18px rgba(255,60,210,.6); }
.btn-cyan { background: var(--neon-cyan); color: var(--night-purple); box-shadow: 0 0 18px rgba(40,230,255,.55); }
.btn-ghost { background: rgba(25,8,35,.6); color: var(--text); border-color: var(--neon-cyan); }
.btn:hover { transform: translateY(-2px); color: var(--night-purple); }
.btn-ghost:hover { color: var(--chrome-white); }
.btn-sm { min-height: 40px; padding: .5rem .9rem; font: .62rem/1.3 var(--font-pixel); box-shadow: none; }
.btn-xl { font-size: clamp(1.1rem, 4vw, 1.45rem); padding: 1.1rem 2rem; min-height: 60px; }

/* ── Content blocks ───────────────────────────────────── */
.section { padding-block: 1rem 3rem; }
.cards { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 1.2rem; }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(3, 1fr); } .cards.two { grid-template-columns: repeat(2, 1fr); } }
.card { background: var(--panel); border: 1px solid rgba(40,230,255,.35); border-radius: var(--radius); padding: 1.2rem 1.25rem; box-shadow: inset 0 0 0 1px rgba(255,40,220,.12); }
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

/* Placeholder blocks: clearly unfinished content, impossible to mistake for real copy. */
.placeholder { border: 2px dashed var(--laser-yellow); background: repeating-linear-gradient(135deg, rgba(255,255,60,.06) 0 12px, transparent 12px 24px), rgba(25,8,35,.85);
  color: var(--text); border-radius: var(--radius); padding: 1rem 1.15rem; margin: 1rem 0; }
.placeholder::before { content: "PLACEHOLDER"; display: block; font-family: var(--font-pixel); font-size: .6rem; color: var(--laser-yellow); margin-bottom: .55rem; letter-spacing: .08em; }
.placeholder p { margin: .3rem 0; }

.note { border-left: 4px solid var(--neon-cyan); background: rgba(40,230,255,.08); padding: .9rem 1.1rem; border-radius: 0 10px 10px 0; margin: 1.2rem 0; }
.note.warn { border-color: var(--laser-yellow); background: rgba(255,255,60,.08); }
.note strong { color: var(--chrome-white); }
.badge { display: inline-block; font-family: var(--font-pixel); font-size: .6rem; line-height: 1.6; padding: .35rem .6rem; border-radius: 6px; background: var(--laser-yellow); color: var(--night-purple); }

.steps { counter-reset: s; list-style: none; padding: 0; }
.steps li { counter-increment: s; position: relative; padding-left: 3rem; margin: 0 0 1rem; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: .05rem; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: 50%; background: var(--deep-violet); border: 2px solid var(--neon-pink); font-family: var(--font-pixel); font-size: .7rem; color: var(--neon-pink); }

/* Demo screenshots: horizontal snap-scroller on phones, grid on desktop. */
.shots { display: grid; grid-auto-flow: column; grid-auto-columns: min(72%, 260px); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .5rem .25rem 1rem; margin: 0; list-style: none; }
.shots li { scroll-snap-align: start; margin: 0; }
.shots figure { margin: 0; }
.shots img { border-radius: 18px; border: 2px solid rgba(40,230,255,.55); box-shadow: 0 0 20px rgba(255,40,220,.3); background: #fff; aspect-ratio: 420 / 900; object-fit: cover; object-position: top; width: 100%; }
.shots figcaption { font-size: .92rem; color: var(--muted); margin-top: .5rem; }
@media (min-width: 960px) { .shots { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; } }

.demo-cta { text-align: center; padding: 2rem 1.2rem; margin: 2rem 0; border-radius: var(--radius); background: radial-gradient(ellipse at 50% 120%, rgba(255,60,120,.35), transparent 60%), var(--panel); border: 1px solid rgba(255,60,210,.5); }
.demo-cta p { margin-inline: auto; }

/* ── Forms ────────────────────────────────────────────── */
form { display: grid; gap: 1.1rem; }
label, legend { font-weight: 600; }
fieldset { border: 1px solid rgba(40,230,255,.35); border-radius: var(--radius); padding: 1rem; margin: 0; }
input[type=text], input[type=email], select, textarea {
  width: 100%; font: inherit; color: var(--text); background: #12051b; border: 2px solid #8a6fb0; border-radius: 10px; padding: .75rem .85rem; min-height: 48px; margin-top: .35rem; }
input:focus, select:focus, textarea:focus { border-color: var(--neon-cyan); }
.checks { display: grid; gap: .4rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.checks label, .consent { font-weight: 400; display: flex; gap: .55rem; align-items: flex-start; min-height: 32px; }
input[type=checkbox] { width: 1.2rem; height: 1.2rem; accent-color: var(--neon-pink); margin-top: .2rem; flex: none; }
.hint { font-size: .92rem; color: var(--muted); font-weight: 400; display: block; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { min-height: 1.5em; font-weight: 600; }

/* ── Lists / tables ───────────────────────────────────── */
.accounts { list-style: none; padding: 0; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.accounts li { background: var(--panel); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: .65rem .85rem; }
.accounts .plat { font-family: var(--font-title); color: var(--neon-cyan); margin-right: .35rem; }
.accounts .todo { color: var(--laser-yellow); font-size: .9rem; display: block; }
.downloads { list-style: none; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.downloads li { background: var(--panel); border-radius: var(--radius); padding: .9rem; border: 1px solid rgba(40,230,255,.3); }
.downloads img { background: var(--night-purple); border-radius: 8px; margin-bottom: .6rem; aspect-ratio: 16/9; object-fit: contain; width: 100%; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .5rem; padding: 0; list-style: none; font-size: .85rem; }
.swatches li { border-radius: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,.15); }
.swatches span { display: block; height: 42px; }
.swatches code { display: block; padding: .3rem .45rem; background: #12051b; }
.avatar { width: min(100%, 320px); border-radius: 50%; border: 3px solid var(--neon-pink); box-shadow: 0 0 26px rgba(255,40,220,.5); margin: 1rem auto; }
.split { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 820px) { .split { grid-template-columns: 1.4fr 1fr; } }

/* ── Footer ───────────────────────────────────────────── */
.site-footer { margin-top: 3rem; padding: 2.2rem 0 2.8rem; background: linear-gradient(to bottom, transparent, rgba(40,10,80,.8)); border-top: 1px solid rgba(255,60,210,.45); font-size: .95rem; color: var(--muted); }
.site-footer .cols { display: grid; gap: 1.5rem; }
@media (min-width: 720px) { .site-footer .cols { grid-template-columns: 1.3fr 1fr 1fr; } }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: .25rem 0; }
.site-footer a { color: var(--text); }
.site-footer .ft { font-family: var(--font-pixel); font-size: .6rem; color: var(--neon-cyan); margin: 0 0 .7rem; line-height: 1.8; }
/* FEC disclaimer box: readable, good contrast, in a box (FEC guidance for printed items, used here too). */
.fec { margin: 1.6rem 0 0; display: inline-block; border: 2px solid var(--chrome-white); background: var(--chrome-white); color: #000; padding: .5rem .8rem; font-weight: 700; }
.fec[hidden] { display: none; }
.legal { margin-top: 1.2rem; font-size: .88rem; }

/* ── Motion preferences ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .btn:hover { transform: none; }
}
/* Respect "more contrast" and forced-colors users: drop decorative glow/scanlines. */
@media (prefers-contrast: more) { body::after { display: none; } .chrome { color: var(--chrome-white); background: none; -webkit-text-stroke: 0; } }
@media (forced-colors: active) { body::after, .scene .grid, .scene .sun { display: none; } .chrome { color: CanvasText; background: none; } }
@media print { body::after, .scene .grid, .scene .sun, .site-header, .nav-toggle { display: none !important; } body { background: #fff; color: #000; } }

.cta-row.start { justify-content: flex-start; margin-top: 1.4rem; }
.badges { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.demo-cta h2 { margin-top: 0; }
.center { text-align: center; }
.sw-ff3cd2 { background: #FF3CD2; }
.sw-28e6ff { background: #28E6FF; }
.sw-ffff3c { background: #FFFF3C; }
.sw-ffe65a { background: #FFE65A; }
.sw-ff3c78 { background: #FF3C78; }
.sw-280a50 { background: #280A50; }
.sw-190823 { background: #190823; }

/* ── Video hero (silent loop; poster only under reduced motion / Data Saver) ── */
.hero-video { position: relative; overflow: hidden; isolation: isolate; background: var(--night-purple); }
.hero-video .media, .hero-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; z-index: -3; }
.hero-video video { z-index: -2; }
/* Dark scrim so the logo and text always sit on near-#190823. */
.hero-video::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(25,8,35,.88) 0%, rgba(25,8,35,.72) 40%, rgba(25,8,35,.80) 70%, rgba(25,8,35,.96) 100%); }
.no-hero-video .hero-video video { display: none; }
@media (prefers-reduced-motion: reduce) { .hero-video video { display: none; } }
.hero-inner { padding-block: 1.2rem 1.6rem; text-align: center; }
.logo-wrap { padding: 1rem 0; max-width: 820px; margin: 0 auto; } /* clear space around the wordmark */
.hero-inner .logo { width: 100%; margin: 0 auto; }
.hero-inner .hook { margin-bottom: 1.1rem; }
@media (min-width: 900px) { .hero-inner { padding-block: 3.5rem 3rem; } .hero-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2.5rem; align-items: center; text-align: left; } .hero-grid .hook { margin-inline: 0; } .hero-grid .cta-row { justify-content: flex-start; } }

/* Email sign-up (in the hero, so it's above the fold on phones). */
.signup { gap: .55rem; text-align: left; background: rgba(25,8,35,.92); border: 1px solid rgba(40,230,255,.5); border-radius: var(--radius); padding: .9rem 1rem; margin: 1.2rem auto 0; max-width: 460px; }
.signup-title { font-family: var(--font-title); margin: 0; font-size: 1.05rem; }
.signup label span { font-size: .9rem; font-weight: 600; }
.signup input { margin-top: .2rem; min-height: 44px; padding: .5rem .7rem; }
.signup-row { display: grid; grid-template-columns: 1.6fr 1fr; gap: .55rem; }
.signup .btn { width: 100%; min-height: 46px; }
.signup-note { margin: 0; font-size: .85rem; }
.signup .form-status { margin: 0; min-height: 0; }
.signup .form-status:empty { display: none; }
@media (min-width: 900px) { .signup { margin: 0; } }

/* MicroVote showpiece on the homepage. */
.showpiece { display: grid; gap: 1.5rem; align-items: center; background: radial-gradient(ellipse at 80% 100%, rgba(255,60,120,.22), transparent 60%), var(--panel); border: 1px solid rgba(255,60,210,.45); border-radius: 20px; padding: 1.4rem; margin-top: 2rem; }
.showpiece h2 { margin-top: .2rem; }
.showpiece .phone { justify-self: center; width: min(78vw, 280px); }
.showpiece .phone img { border-radius: 22px; border: 2px solid rgba(40,230,255,.6); background: #fff; }
.showpiece ul { padding-left: 1.2rem; }
@media (min-width: 820px) { .showpiece { grid-template-columns: 1.5fr 1fr; padding: 2rem 2.4rem; } }

/* Episodes (pastel-neon frame: a light nod, colors only). */
.ep-frame { border-radius: 16px; padding: 3px; background: linear-gradient(135deg, var(--chrome-pink), var(--vice-teal)); }
.yt, .ep-frame .placeholder { border-radius: 13px; overflow: hidden; margin: 0; }
.yt { position: relative; aspect-ratio: 16 / 9; background: #000; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-facade { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text); text-decoration: none; }
.yt-facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .75; }
.yt-play { position: relative; width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; background: var(--neon-pink); color: var(--night-purple); box-shadow: 0 0 24px rgba(255,60,210,.8); }
.yt-label { position: absolute; left: 1rem; bottom: .8rem; font-family: var(--font-title); background: rgba(25,8,35,.9); padding: .3rem .6rem; border-radius: 6px; }
.eps { list-style: none; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: .8rem; overflow-x: auto; }
.ep { display: flex; gap: .6rem; align-items: center; min-height: 64px; padding: .7rem .9rem; border-radius: 12px; background: var(--panel); border: 1px solid rgba(20,200,200,.5); color: var(--text); text-decoration: none; }
.ep-play { color: var(--neon-cyan); }

/* Social icons (only entries with a URL render). */
.social { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0 0 1rem; }
.social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; color: var(--text); border: 1px solid rgba(40,230,255,.4); }
.social a:hover { color: var(--neon-cyan); border-color: var(--neon-cyan); }
.social-head { margin: 0; display: none; }
@media (min-width: 720px) { .social-head { display: flex; } .social-head a { width: 36px; height: 36px; border: 0; } }
.accounts li { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .5rem; }
.accounts svg { color: var(--neon-cyan); flex: none; }
.accounts .todo { flex-basis: 100%; }

/* Platform issue menu. */
.issue-menu { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.issue-menu a { display: inline-block; padding: .55rem .9rem; border-radius: 999px; border: 1px solid rgba(40,230,255,.5); color: var(--text); text-decoration: none; }
.issue-menu a:hover { border-color: var(--neon-pink); }
.issue { scroll-margin-top: 90px; border-top: 1px solid rgba(255,255,255,.1); padding-top: .5rem; margin-top: 2rem; }

/* Easter egg (approved parody homage, colors/motion only): a red scanner sweep under the header.
   Decorative, 2px, never over text; static under reduced motion. */
.scanner { position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; overflow: hidden; pointer-events: none; }
.scanner::before { content: ""; position: absolute; top: 0; left: 0; width: 18%; height: 100%;
  background: linear-gradient(90deg, transparent, var(--scanner-red) 40%, #ff8080 50%, var(--scanner-red) 60%, transparent);
  box-shadow: 0 0 8px var(--scanner-red); animation: scan 3.2s ease-in-out infinite alternate; }
@keyframes scan { to { left: 82%; } }
@media (prefers-reduced-motion: reduce) { .scanner::before { left: 41%; } }
/* Same sweep as a hover accent on the primary buttons. */
.btn-pink { position: relative; overflow: hidden; }
.btn-pink::after { content: ""; position: absolute; left: -30%; bottom: 0; width: 30%; height: 3px; background: var(--scanner-red); opacity: 0; }
.btn-pink:hover::after { opacity: 1; animation: btnscan .7s ease-in-out infinite alternate; }
@keyframes btnscan { to { left: 100%; } }
.signup .opt { font-weight: 400; color: var(--muted); }
.signup .consent span { font-size: .92rem; font-weight: 400; }
/* Phones: keep the header on one row. */
@media (max-width: 959px) {
  .bar { flex-wrap: wrap; gap: 0 .5rem; min-height: 64px; }
  .brand { width: 128px; padding: 10px 0; }
  .bar-actions { gap: .4rem; margin-left: auto; }
  .bar-actions .btn-sm { min-height: 40px; padding: .45rem .6rem; font-size: .55rem; }
  .nav-toggle { padding: .5rem .55rem; min-height: 40px; font-size: .55rem; }
}
@media (max-width: 340px) { .bar-actions .btn-sm { display: none; } }
/* Page heroes: text sits on the plain sky; sun, grid and scanlines stay in a bottom strip, never behind text. */
.page-hero { padding-block: 2.4rem 200px; background: linear-gradient(to bottom, var(--deep-violet) 0%, #2f0c58 60%, #5a1566 calc(100% - 90px), var(--night-purple) calc(100% - 89px)); }
.page-hero .sun { width: 180px; bottom: 90px; }
.page-hero .horizon { bottom: 90px; }
.page-hero .grid { height: 90px; }
.page-hero::after { top: auto; height: 190px; }
.page-hero .lede { text-shadow: none; }
/* Draft crypto page */
.donate-head { display: flex; align-items: center; gap: .6rem; }
.info-btn { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--neon-cyan); background: transparent; color: var(--text); font: 1rem var(--font-title); cursor: pointer; margin-top: 1.6rem; }
.info-btn[aria-expanded="true"] { border-color: var(--neon-pink); }
.info-panel { margin: 1rem 0 1.5rem; }
html:not(.js) .info-panel[hidden] { display: block; }
.wallet-box { margin-top: 1.5rem; }
.wallet code { word-break: break-all; font-size: 1rem; }
.qr { background: #fff; padding: 8px; border-radius: 8px; }
.closed { color: var(--laser-yellow); font-size: 1.1rem; }
.soon { margin: 0; color: var(--laser-yellow); font-weight: 600; }
fieldset > div + div, fieldset .signup-row { margin-top: .7rem; }
.site-footer .btn-pink, .site-header .btn-pink { color: var(--night-purple); }

/* ── Build 2 ─────────────────────────────────────────── */
/* Nav wordmark: live Audiowide text (the PNG logo is reserved for the hero). */
.brand, .brand img { width: auto; }
.brand-text { display: inline !important; font-family: var(--font-title); font-size: 1.15rem; letter-spacing: .02em; color: var(--chrome-white); text-decoration: none; }
.brand { text-decoration: none; }
@media (min-width: 960px) { .brand-text { font-size: 1.3rem; } }

/* Hero: dimmed grid-sunset loop; copy | cutout | form on desktop, stacked on phones. */
.hero-video::before { background: linear-gradient(to bottom, rgba(25,8,35,.82) 0%, rgba(25,8,35,.66) 45%, rgba(25,8,35,.78) 75%, rgba(25,8,35,.95) 100%); }
.hero-3 { display: grid; gap: 1.2rem; justify-items: center; text-align: center; }
.hero-copy { width: 100%; }
h1.logo-wrap { margin: 0 auto; padding: 1rem 0; max-width: 560px; font-size: 1rem; }
.hero-cutout { margin: 0; width: min(68vw, 300px); }
.hero-cutout img { width: 100%; height: auto; }
@media (min-width: 900px) {
  .hero-3 { grid-template-columns: minmax(0, 1.25fr) minmax(220px, .8fr) minmax(300px, 1fr); align-items: end; text-align: left; gap: 1.5rem; padding-bottom: 0; }
  .hero-copy { align-self: center; padding-bottom: 2rem; }
  .hero-3 .hook { margin-inline: 0; }
  .hero-3 .cta-row { justify-content: flex-start; }
  h1.logo-wrap { margin: 0; }
  .hero-cutout { width: 100%; max-width: 320px; align-self: end; }
  .hero-3 .signup { align-self: center; margin-bottom: 2rem; }
}
.chrome-horizon { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--neon-cyan) 15%, var(--chrome-white) 50%, var(--neon-pink) 85%, transparent); opacity: .7; box-shadow: 0 0 10px rgba(255,60,210,.5); }

/* Sign-up while Mailchimp isn't connected: everything disabled, greyed, one clear label. */
.signup-fields { border: 0; padding: 0; margin: 0; display: grid; gap: .55rem; min-width: 0; }
.signup legend.signup-title { padding: 0; margin-bottom: .2rem; }
.signup.is-off input, .signup.is-off .btn { cursor: not-allowed; }
.signup.is-off input { background: #2a2233; border-color: #5d5468; }
.signup.is-off .btn { background: #4a4452; color: #F6EEFF; box-shadow: none; }
.signup.is-off .btn:hover { transform: none; }
.signup.is-off label span, .signup.is-off .opt { color: #CFC4DA; }

/* MicroVote phone mock: dark Night Purple screen, neon frame. */
.showpiece .phone { display: none; }
.phone-mock { margin: 0; justify-self: center; width: min(80vw, 290px); }
.pm-device { position: relative; border-radius: 34px; padding: 12px; background: #0e0414; border: 2px solid var(--neon-cyan);
  box-shadow: 0 0 0 2px rgba(255,60,210,.6), 0 0 22px rgba(40,230,255,.35), 0 0 36px rgba(255,60,210,.25); }
.pm-notch { width: 90px; height: 14px; border-radius: 0 0 10px 10px; background: #0e0414; margin: -12px auto 6px; }
.pm-screen { background: var(--night-purple); border-radius: 24px; padding: .8rem .8rem 1rem; font-size: .8rem; line-height: 1.4; color: var(--text); }
.pm-screen p { margin: 0; }
.pm-bar { font-family: var(--font-title); padding-bottom: .5rem; border-bottom: 1px solid rgba(40,230,255,.25); margin-bottom: .6rem !important; }
.pm-bar span { color: var(--neon-cyan); margin-right: .3rem; }
.pm-warn { font-size: .68rem; color: var(--laser-yellow); border: 1px solid rgba(255,255,60,.5); border-radius: 8px; padding: .3rem .5rem; margin-bottom: .6rem !important; }
.pm-q { font-family: var(--font-title); font-size: .98rem; line-height: 1.25; }
.pm-meta { color: var(--muted); font-size: .7rem; margin: .25rem 0 .6rem !important; }
.pm-card { background: var(--deep-violet); border: 1px solid rgba(40,230,255,.3); border-radius: 12px; padding: .55rem .65rem; margin-top: .5rem; }
.pm-ok strong { display: block; color: var(--neon-cyan); font-size: .78rem; }
.pm-link { color: var(--neon-cyan); text-decoration: underline; font-size: .7rem; }
.pm-h { font-weight: 700; font-size: .74rem; margin-bottom: .3rem !important; }
.pm-row { display: flex; justify-content: space-between; font-size: .72rem; margin-top: .25rem !important; }
.pm-track { height: 7px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; }
.pm-track i { display: block; height: 100%; border-radius: 4px; }

.pm-ballot { font-size: .7rem; display: flex; gap: .35rem; align-items: baseline; padding: .15rem 0; border-top: 1px solid rgba(255,255,255,.06); }
.pm-ballot em { color: var(--neon-cyan); font-style: normal; margin-left: auto; }
.phone-mock figcaption { text-align: center; margin-top: .6rem; }
.ep-title { font-family: var(--font-title); margin-top: -.3rem; }
@media (max-width: 959px) {
  .bar { gap: 0 .4rem; }
  .brand-text { font-size: .92rem; }
  .bar-actions .btn-sm { font-size: .5rem; padding: .45rem .5rem; }
  .nav-toggle { font-size: .5rem; padding: .5rem .45rem; }
}
@media (max-width: 370px) { .brand-text { font-size: .8rem; } }

/* HERO_CUTOUT: "none" -> copy | form, with a bigger wordmark. */
@media (min-width: 900px) {
  .hero-3.no-cutout { grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); align-items: center; gap: 3rem; padding-block: 3.5rem 3.5rem; }
  .hero-3.no-cutout .hero-copy { padding-bottom: 0; }
  .hero-3.no-cutout h1.logo-wrap { max-width: 640px; }
  .hero-3.no-cutout .signup { margin-bottom: 0; }
}
.hero-3.no-cutout .signup { margin-top: .5rem; }

/* Shared phone-mock pieces (homepage + MicroVote gallery). */
.pm-fill { background: linear-gradient(90deg, var(--neon-pink), var(--neon-cyan)); box-shadow: 0 0 8px rgba(255,60,210,.6); width: 0; }
.pm-fill[data-w="100"] { width: 100%; } .pm-fill[data-w="67"] { width: 67%; } .pm-fill[data-w="33"] { width: 33%; }
.pm-body { font-size: .72rem; margin-top: .35rem !important; }
.pm-body strong { color: var(--chrome-white); }
.pm-sm { font-size: .82rem; }
.pm-input { margin-top: .3rem !important; border: 1px solid var(--neon-cyan); border-radius: 8px; padding: .35rem .5rem; font-size: .72rem; background: #12051b; }
.pm-btn { margin-top: .5rem !important; text-align: center; border-radius: 999px; padding: .4rem .5rem; font-family: var(--font-title); font-size: .72rem; background: var(--neon-pink); color: var(--night-purple); }
.pm-chips { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .35rem !important; }
.pm-chips span { font-size: .64rem; padding: .1rem .4rem; border-radius: 999px; border: 1px solid rgba(40,230,255,.5); }
.pm-choices { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-top: .2rem !important; }
.pm-choices span { text-align: center; border: 1px solid rgba(255,255,255,.3); border-radius: 8px; padding: .35rem; font-size: .75rem; }
.pm-choices .on { border-color: var(--neon-cyan); box-shadow: 0 0 8px rgba(40,230,255,.5); color: var(--neon-cyan); }
.pm-ballot em.pm-ign { color: var(--sunset-orange); }
.pm-ok .pm-btn { background: var(--neon-cyan); }
/* Gallery of mocks: same device frame as the homepage. */
.shots.mocks { grid-auto-columns: min(78%, 270px); align-items: start; }
.shots.mocks figure { margin: 0; }
.shots.mocks .pm-device { box-shadow: 0 0 0 2px rgba(255,60,210,.55), 0 0 16px rgba(40,230,255,.3); }
.shots.mocks .pm-screen { min-height: 540px; }
.shots.mocks figcaption { font-size: .92rem; color: var(--muted); margin-top: .6rem; text-align: center; }
@media (min-width: 960px) { .shots.mocks { grid-template-columns: repeat(4, 1fr); } }

/* Credits */
.team { list-style: none; padding: 0; display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .team { grid-template-columns: repeat(3, 1fr); } }
.team li { display: flex; gap: .9rem; align-items: flex-start; }
.team h3 { margin: 0 0 .3rem; }
.team p { margin: 0; }
.team-badge { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font: 1.4rem var(--font-title); color: var(--chrome-white);
  background: var(--deep-violet); border: 2px solid var(--neon-cyan); box-shadow: 0 0 0 2px rgba(255,60,210,.55), 0 0 14px rgba(40,230,255,.35); }

/* ── Follow the Money ─────────────────────────────────────────────── */
.name-notice { border-left-color: var(--neon-pink); background: rgba(255,60,210,.08); font-size: 1.02rem; }
.placeholder-inline { color: var(--laser-yellow); font-style: italic; }
.example-flag { border: 2px dashed var(--laser-yellow); color: var(--text); padding: .7rem 1rem; border-radius: 10px; margin: 1rem 0; }
.example-flag strong { font-family: "Press Start 2P", monospace; font-size: .75rem; color: var(--laser-yellow); margin-right: .6rem; letter-spacing: .05em; }
.money-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; color: var(--muted); font-size: .95rem; }
.money-meta strong { color: var(--text); }
.money-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 1.2rem 0 1.6rem; }
.mcard { background: rgba(40,10,80,.55); border: 1px solid rgba(40,230,255,.45); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: 0 0 18px rgba(40,230,255,.12); }
.mcard p { margin: 0; }
.mlabel { font-family: "Press Start 2P", monospace; font-size: .62rem; color: var(--neon-cyan); letter-spacing: .06em; text-transform: uppercase; }
.mval { font-family: "Audiowide", sans-serif; font-size: clamp(1.5rem, 5vw, 2rem); color: var(--chrome-white); margin-top: .45rem !important; }
.money-empty { border: 1px dashed rgba(255,60,210,.6); border-radius: var(--radius); padding: 1.2rem; text-align: center; margin: 1.2rem 0; }
.mempty { font-family: "Audiowide", sans-serif; font-size: 1.25rem; color: var(--chrome-white); }
.catbars { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: .8rem; }
.catbars li { display: grid; grid-template-columns: 1fr auto; gap: .25rem .8rem; align-items: baseline; }
.catbars .hint { display: inline; }
.catbars .cbar { grid-column: 1 / -1; width: 100%; height: 12px; display: block; }
.catbars .amt { font-variant-numeric: tabular-nums; }
.ledger-filters { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: end; margin: .6rem 0 1rem; }
.ledger-filters label { display: grid; gap: .25rem; font-size: .9rem; color: var(--muted); }
.ledger-filters select { background: var(--night-purple); color: var(--text); border: 1px solid rgba(40,230,255,.55); border-radius: 8px; padding: .45rem .6rem; font: inherit; min-width: 9rem; }
.ledger-filters .hint { margin: 0; }
.table-wrap { overflow-x: auto; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); margin-bottom: 1rem; }
.table-wrap:focus-visible { outline: 3px solid var(--neon-cyan); outline-offset: 2px; }
.ledger { border-collapse: collapse; width: 100%; min-width: 860px; font-size: .93rem; }
.ledger th, .ledger td { padding: .55rem .7rem; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(255,255,255,.08); }
.ledger thead th { background: #280A50; color: var(--chrome-white); position: sticky; top: 0; white-space: nowrap; }
.ledger tbody tr:nth-child(even) { background: rgba(255,255,255,.03); }
.ledger .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger td:first-child { white-space: nowrap; }
.ledger tr[data-type="in"] .num { color: #7DF5FF; }
.ledger .sort { all: unset; cursor: pointer; display: inline-flex; gap: .3rem; align-items: center; color: inherit; font: inherit; font-weight: 700; }
.ledger .sort:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 2px; border-radius: 3px; }
.ledger .sort::after { content: "\2195"; opacity: .55; font-size: .85em; }
.ledger th[aria-sort="ascending"] .sort::after { content: "\2191"; opacity: 1; color: var(--neon-cyan); }
.ledger th[aria-sort="descending"] .sort::after { content: "\2193"; opacity: 1; color: var(--neon-cyan); }
@media (min-width: 960px) and (max-width: 1279px) {
  .site-nav ul { gap: .2rem .8rem; }
  .site-nav a { font-size: .85rem; }
  .site-header .social { display: none; }
}
@media (min-width: 1280px) {
  .site-header .wrap { width: min(100% - 2.5rem, 1320px); }
  .social-head { flex-wrap: nowrap; }
  .bar-actions { flex-shrink: 0; }
  .site-nav { margin-right: 1rem; }
  .bar-actions .btn-sm { white-space: nowrap; }
}
.signup-row > :only-child { grid-column: 1 / -1; }
.mv-note { font-size: .95rem; color: var(--muted); } .mv-note .badge { margin-right: .4rem; } .mv-short { margin-top: .6rem; }

/* Plank 1 title "LOAD....": 80s boot-up. Dots type in one by one, block cursor blinks.
   Screen readers get the sr-only "LOAD...." once; the animated copy is aria-hidden. */
.boot { white-space: nowrap; }
.boot .dot { opacity: 0; animation: boot-dot 4s steps(1, end) infinite; }
.boot .d2 { animation-name: boot-dot2; } .boot .d3 { animation-name: boot-dot3; } .boot .d4 { animation-name: boot-dot4; }
@keyframes boot-dot  { 0%, 12% { opacity: 0; } 12.01%, 92% { opacity: 1; } 92.01%, 100% { opacity: 0; } }
@keyframes boot-dot2 { 0%, 26% { opacity: 0; } 26.01%, 92% { opacity: 1; } 92.01%, 100% { opacity: 0; } }
@keyframes boot-dot3 { 0%, 40% { opacity: 0; } 40.01%, 92% { opacity: 1; } 92.01%, 100% { opacity: 0; } }
@keyframes boot-dot4 { 0%, 54% { opacity: 0; } 54.01%, 92% { opacity: 1; } 92.01%, 100% { opacity: 0; } }
.boot .cursor { display: inline-block; width: .55em; height: .9em; margin-left: .12em; vertical-align: -.08em; background: var(--neon-pink, #FF3CD2); box-shadow: 0 0 8px rgba(255,60,210,.7); animation: boot-blink 1s steps(1, end) infinite; }
@keyframes boot-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .boot .dot, .boot .cursor { animation: none; opacity: 1; } }
.issue .boot-title { color: var(--neon-cyan); text-shadow: 0 0 14px rgba(40,230,255,.55); letter-spacing: .06em; }

/* ── Home "portal" intro (VCR) ─────────────────────────────────────────
   html.intro is set by the early inline script (home page, once per session, never under reduced motion).
   Hidden items fade back on their own after 5.5 s if intro.js never runs (failsafe); with JS, .intro-run
   hands control to the timeline. Only opacity/transform animate, so there's no layout shift. */
.intro .site-header, .intro .hero-copy > *, .intro .hero-cutout, .intro #signup-form,
.intro main > :not(.hero-video), .intro .site-footer { opacity: 0; animation: k3-failsafe 0s linear 5.5s forwards; }
.intro-run .site-header, .intro-run .hero-copy > *, .intro-run .hero-cutout, .intro-run #signup-form,
.intro-run main > :not(.hero-video), .intro-run .site-footer { animation: none; }
.intro .k3-in { opacity: 1; animation: k3-glitch .38s steps(6, end) both !important; }
@keyframes k3-failsafe { to { opacity: 1; } }
@keyframes k3-glitch {
  0% { opacity: 0; transform: translateX(-10px) skewX(10deg); filter: saturate(3) hue-rotate(60deg); }
  25% { opacity: .8; transform: translateX(8px) skewX(-8deg); clip-path: inset(10% 0 55% 0); }
  50% { opacity: 1; transform: translateX(-4px); clip-path: inset(45% 0 15% 0); filter: saturate(2) hue-rotate(-40deg); }
  75% { transform: translateX(2px); clip-path: inset(0 0 0 0); }
  100% { opacity: 1; transform: none; filter: none; clip-path: none; }
}
.k3-portal { position: fixed; inset: 0; z-index: 1000; overflow: hidden; background: var(--night-purple); transition: opacity .45s ease; }
.k3-portal.out { opacity: 0; pointer-events: none; }
.k3-sky { position: absolute; inset: 0 0 45% 0; background: linear-gradient(to bottom, var(--deep-violet) 0%, #3a0f5e 45%, #7a1a6e 85%, var(--sunset-rose) 100%); }
.k3-sun { position: absolute; left: 50%; bottom: 45%; width: min(60vw, 380px); aspect-ratio: 1; transform: translate(-50%, 22%); border-radius: 50%;
  background: linear-gradient(to bottom, var(--sun-yellow) 0%, var(--chrome-gold) 30%, var(--sunset-orange) 55%, var(--sunset-rose) 80%, var(--neon-pink) 100%);
  -webkit-mask: linear-gradient(to bottom, #000 0 52%, transparent 52% 55%, #000 55% 62%, transparent 62% 66%, #000 66% 72%, transparent 72% 77%, #000 77% 83%, transparent 83% 89%, #000 89%);
          mask: linear-gradient(to bottom, #000 0 52%, transparent 52% 55%, #000 55% 62%, transparent 62% 66%, #000 66% 72%, transparent 72% 77%, #000 77% 83%, transparent 83% 89%, #000 89%);
  }
.k3-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 45%; perspective: 260px; perspective-origin: 50% 0; overflow: hidden; background: var(--night-purple); border-top: 2px solid var(--neon-pink); box-shadow: 0 -4px 22px rgba(255,40,220,.6); }
.k3-grid, .k3-hero-grid::before { content: ""; position: absolute; left: -60%; right: -60%; bottom: -44px; height: 400%; transform-origin: 50% 100%; transform: rotateX(72deg); will-change: transform;
  background: repeating-linear-gradient(to bottom, rgba(255,40,220,.85) 0 2px, transparent 2px 44px), repeating-linear-gradient(to right, rgba(40,220,255,.7) 0 2px, transparent 2px 64px);
  animation: k3-roll .7s linear infinite; }
/* transform-only (composited) so the rolling grid costs almost nothing on the main thread */
@keyframes k3-roll { from { transform: rotateX(72deg) translateY(0); } to { transform: rotateX(72deg) translateY(44px); } }
.k3-hero-grid { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; z-index: -2; perspective: 260px; perspective-origin: 50% 0; overflow: hidden; opacity: .55; transition: opacity .45s; pointer-events: none; }
.k3-hero-grid.out { opacity: 0; }
.k3-vcr { position: fixed; inset: 0; z-index: 1001; pointer-events: none; font-family: var(--font-pixel); color: #fff; transition: opacity .4s; }
.k3-vcr.out { opacity: 0; }
.k3-play, .k3-tc { position: absolute; top: calc(var(--k3-top, 76px) + env(safe-area-inset-top)); font-size: clamp(.6rem, 2.2vw, .95rem); text-shadow: 2px 0 0 rgba(255,60,210,.8), -2px 0 0 rgba(40,230,255,.8); }
.k3-play { left: 16px; } .k3-tc { right: 16px; }
.k3-track { position: absolute; left: 50%; bottom: 22%; transform: translateX(-50%); font-size: clamp(.55rem, 2vw, .8rem); letter-spacing: .2em; animation: k3-wobble .12s steps(2) 7, k3-gone 0s .9s forwards; }
@keyframes k3-wobble { 50% { transform: translateX(calc(-50% + 6px)) skewX(-12deg); } }
@keyframes k3-gone { to { visibility: hidden; } }
.k3-band { position: absolute; left: 0; right: 0; height: 7vh; top: -10vh; opacity: .13; will-change: transform; animation: k3-band 1.9s linear infinite; }
@keyframes k3-band { to { transform: translateY(125vh); } }
.k3-lines { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.08) 2px 3px); }
.k3-grain { position: absolute; inset: -60px; opacity: .06; will-change: transform; animation: k3-grain .3s steps(3) infinite; }
@keyframes k3-grain { 33% { transform: translate(30px, 50px); } 66% { transform: translate(-40px, 20px); } }
.k3-skip { position: absolute; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); pointer-events: auto; font: .7rem/1 var(--font-pixel); color: var(--night-purple); background: var(--neon-cyan); border: 0; border-radius: 8px; padding: .8rem 1rem; min-height: 44px; cursor: pointer; box-shadow: 0 0 14px rgba(40,230,255,.6); }
@media (min-width: 720px) { .k3-hero-grid { display: none; } }
/* The glitch jitter must never widen the page on phones. */
html.intro, html.intro body { overflow-x: clip; }
/* Social: "MORE" link in the header, primary accounts first, "Main hubs" cards on /contact/. */
.social .more a { width: auto; padding: 0 .55rem; font: .5rem/1 var(--font-pixel); color: var(--neon-cyan); text-decoration: none; }
.hubs { list-style: none; padding: 0; margin: 0 0 1.6rem; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.hubs li { max-width: none; }
.hub { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; gap: .15rem 1rem; align-items: center; padding: 1.2rem 1.3rem; border-radius: var(--radius);
  background: var(--panel); border: 2px solid var(--neon-pink); box-shadow: 0 0 18px rgba(255,60,210,.3); color: var(--text); text-decoration: none; }
.hub:hover, .hub:focus-visible { border-color: var(--neon-cyan); box-shadow: 0 0 20px rgba(40,230,255,.45); color: var(--text); }
.hub svg { grid-row: 1 / 4; width: 48px; height: 48px; color: var(--neon-cyan); }
.hub-plat { font: 1.5rem/1.1 var(--font-title); color: var(--chrome-white); }
.hub-handle { font-size: 1.05rem; }
.hub-cta { font: .55rem/1.4 var(--font-pixel); color: var(--laser-yellow); margin-top: .3rem; }
/* Account balance panel (/money/) */
.balance-panel { border: 1px solid rgba(255,60,210,.55); border-radius: var(--radius); padding: 1.2rem 1.2rem .6rem; margin: 1.4rem 0 2rem; background: rgba(20,4,45,.55); box-shadow: 0 0 22px rgba(255,60,210,.12); }
.balance-panel h2 { margin: .3rem 0 .2rem; }
.bal-kicker { margin: 0; }
.bal-funds { margin: 0 0 .4rem; color: var(--text); font-weight: 600; }
.bal-cards { margin: .9rem 0 1rem; }
.mcard-total { border-color: rgba(255,230,90,.7); box-shadow: 0 0 18px rgba(255,230,90,.15); }
.mcard .tag { display: inline-block; margin-left: .35rem; padding: .15rem .4rem; border-radius: 6px; background: rgba(255,140,40,.18); color: var(--laser-yellow); font-size: .55rem; letter-spacing: .04em; vertical-align: middle; }
.mcard .hint { margin-top: .5rem !important; }
.bal-note { margin: .6rem 0 .4rem; }