/* The website, in the dash's own CYBERPUNK look: its colours, dark background, thin red panels with corner
   ticks, letter-spaced mono labels, Rajdhani for words and numbers, Orbitron for the name. Mobile first. */
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/rajdhani-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/rajdhani-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Orbitron'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/orbitron-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2'); }

:root {
  --bg: #07060A; --bg2: #0E0B10; --red: #FF4F4A; --yel: #FCEE0A; --org: #FF9A1F; --cyan: #5EF6FF;
  --text: #F2DCD6; --bright: #FBF5F3; --mute: #948684; --mute2: #C3B1AD; --dim: #6A6060;
  --line: rgba(255, 79, 74, .30); --line2: rgba(255, 79, 74, .16); --fill: rgba(255, 79, 74, .045);
  --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --word: 'Rajdhani', 'Arial Narrow', system-ui, sans-serif;
  --name: 'Orbitron', 'Rajdhani', system-ui, sans-serif;
  --gut: 16px;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 64px; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 500 18px/1.5 var(--word); letter-spacing: .01em;
  background-image: radial-gradient(1200px 500px at 70% -120px, rgba(255, 79, 74, .13), transparent 70%);
  background-repeat: no-repeat; overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
picture { display: contents; }
source { display: none; }   /* with picture's display: contents, a source would take a grid cell */
a { color: var(--cyan); text-underline-offset: 3px; }
a:hover { color: var(--bright); }
:focus-visible { outline: 2px solid var(--yel); outline-offset: 2px; }
b { font-weight: 700; }
h1, h2, h3 { font-family: var(--word); font-weight: 700; line-height: 1.05; margin: 0; color: var(--bright); text-transform: uppercase; letter-spacing: .04em; }
p { margin: 0 0 .8em; }
small { font: 400 12px/1.4 var(--mono); letter-spacing: .06em; color: var(--mute); text-transform: none; display: block; margin-top: 4px; }
[hidden] { display: none !important; }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--yel); color: var(--bg); padding: 8px 12px; font: 400 13px var(--mono); }
.skip:focus { left: 8px; }
/* the dash's faint scanlines over everything */
.scan { position: fixed; inset: 0; pointer-events: none; z-index: 40; opacity: .5;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, .16) 2px 3px); }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--gut); }

/* ---------------------------------------------------------------- labels, chips, buttons */
.hud { font: 400 12px/1.45 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); margin: 0 0 10px; }
.hud-y { color: var(--yel); }
.hud .dot { display: inline-block; width: 7px; height: 7px; background: var(--red); margin-right: 10px; vertical-align: 1px; box-shadow: 0 0 8px var(--red); animation: blink 1.6s steps(2) infinite; }
.chip { font: 400 11px/1 var(--mono); letter-spacing: .16em; padding: 6px 8px; border: 1px solid var(--line); color: var(--mute2); white-space: nowrap; }
.chip-y { background: var(--yel); color: var(--bg); border-color: var(--yel); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px;
  font: 700 17px/1 var(--word); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  background: var(--red); color: var(--bg); border: 1px solid var(--red); border-radius: 0;
  box-shadow: 0 0 22px rgba(255, 79, 74, .28); transition: background .15s, color .15s, box-shadow .15s;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.btn:hover { background: var(--bright); border-color: var(--bright); color: var(--bg); box-shadow: 0 0 26px rgba(255, 79, 74, .45); }
.btn-ghost { background: transparent; color: var(--yel); border-color: var(--yel); box-shadow: none; clip-path: none; }
.btn-ghost:hover { background: var(--yel); color: var(--bg); border-color: var(--yel); box-shadow: 0 0 22px rgba(252, 238, 10, .25); }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: 14px; letter-spacing: .1em; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
.btn-big { width: 100%; min-height: 56px; font-size: 20px; }
.btn[disabled] { opacity: .45; cursor: wait; }

/* ---------------------------------------------------------------- work in progress: the stripe at the top, the tags on every picture */
.wip-stripe { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 12px; padding: 7px var(--gut);
  font: 400 11px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--bg); text-align: center;
  background: repeating-linear-gradient(135deg, var(--yel) 0 14px, #E6D800 14px 28px); }
.wip-stripe b { font-weight: 400; background: var(--bg); color: var(--yel); padding: 2px 7px; letter-spacing: .2em; }
.wip { position: absolute; z-index: 2; top: 6px; right: 6px; padding: 3px 6px; font: 400 9px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--bg); background: var(--yel); pointer-events: none; white-space: nowrap; }
.wip-bar { color: var(--yel); }

/* ---------------------------------------------------------------- the top bar */
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; padding: 10px var(--gut);
  background: rgba(7, 6, 10, .9); border-bottom: 1px solid var(--line2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.brand { font: 700 15px/1 var(--name); letter-spacing: .12em; color: var(--bright); text-decoration: none; white-space: nowrap; }
.brand .mk { color: var(--red); }   /* the wordmark's first part, in red */
.top .chip { margin-left: -2px; }
.top .btn { margin-left: auto; }
.top .wide { display: none; }

/* ---------------------------------------------------------------- panels: thin red border, corner ticks */
.panel { position: relative; border: 1px solid var(--line2); background: linear-gradient(180deg, var(--fill), rgba(255, 79, 74, .012)); }
.panel::before, .panel::after { content: ''; position: absolute; width: 12px; height: 12px; pointer-events: none; }
.panel::before { top: -1px; left: -1px; border-top: 2px solid var(--red); border-left: 2px solid var(--red); }
.panel::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--red); border-right: 2px solid var(--red); }

/* ---------------------------------------------------------------- hero */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 44px; overflow-x: clip; padding-top: 24px; padding-bottom: 36px;
  grid-template-areas: "label" "title" "screen" "lede" "voice" "list" "cta" "status" "track"; }
.hero-copy { display: contents; }
.hero .h-label { grid-area: label; } .hero .title { grid-area: title; } .hero .lede { grid-area: lede; } .hero .hud-list { grid-area: list; }
.hero .cta { grid-area: cta; } .hero .status { grid-area: status; } .hero .hero-screen { grid-area: screen; }
.hero .voice { grid-area: voice; } .hero .track { grid-area: track; }
.voice { font-size: 18px; line-height: 1.45; color: var(--mute2); max-width: 34em; border-left: 2px solid var(--red); padding-left: 12px; }
.track { margin: 12px 0 0; color: var(--mute2); }
.title { font-family: var(--name); font-size: clamp(38px, 11.4vw, 76px); letter-spacing: .06em; line-height: .98; margin: 6px 0 18px; }
.title .glitch:first-child { color: var(--red); text-shadow: 0 0 24px rgba(255, 79, 74, .45); }
.title .glitch { display: inline-block; }
.lede { font-size: 21px; line-height: 1.4; color: var(--text); max-width: 34em; }
.hud-list { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }   /* the features as tags */
.hud-list li { font: 400 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute2); white-space: nowrap;
  padding: 7px 9px; border: 1px solid var(--line2); background: rgba(255, 79, 74, .04); }
.hud-list li:last-child { border-style: dashed; color: var(--mute); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 18px; }
.cta .btn { flex: 1 1 180px; }
.status { font: 400 11px/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); border-left: 2px solid var(--yel); padding: 2px 0 2px 10px; margin: 0; }
.status span { color: var(--yel); margin-right: 8px; }
.status i { font-style: normal; white-space: nowrap; }   /* each item whole on a line */
/* the floor grid under the hero, like the dash's */
.hero::after { content: ''; position: absolute; left: -50%; right: -50%; bottom: 0; height: 260px; transform: perspective(260px) rotateX(62deg);
  transform-origin: 50% 100%; pointer-events: none; z-index: -1; opacity: .35;
  background-image: linear-gradient(rgba(255, 79, 74, .5) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 79, 74, .5) 1px, transparent 1px);
  background-size: 48px 48px; -webkit-mask-image: linear-gradient(to top, transparent 0, #000 30%, transparent 90%); mask-image: linear-gradient(to top, transparent 0, #000 30%, transparent 90%); }

/* glitch: a red and a cyan copy jump for a moment every few seconds */
.glitch { position: relative; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; }
.glitch::before { color: var(--cyan); animation: gl1 7s infinite steps(1); }
.glitch::after { color: var(--yel); animation: gl2 7s infinite steps(1); }
@keyframes gl1 { 0%, 91%, 100% { opacity: 0; transform: none; } 92% { opacity: .9; transform: translate(-3px, 1px); clip-path: inset(10% 0 55% 0); } 94% { opacity: .9; transform: translate(3px, -1px); clip-path: inset(60% 0 8% 0); } 96% { opacity: 0; } }
@keyframes gl2 { 0%, 92%, 100% { opacity: 0; transform: none; } 93% { opacity: .7; transform: translate(4px, 0); clip-path: inset(35% 0 40% 0); } 95% { opacity: .7; transform: translate(-2px, 1px); clip-path: inset(5% 0 80% 0); } 97% { opacity: 0; } }
@keyframes blink { 50% { opacity: .15; } }

/* ---------------------------------------------------------------- screens: the clips and their frames */
.screen { margin: 0; }
.screen-bar { display: flex; align-items: center; gap: 10px; font: 400 11px/1 var(--mono); letter-spacing: .08em; color: var(--mute); padding: 0 0 8px; white-space: nowrap; }
.screen-bar .rec { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px var(--red); animation: blink 1.2s steps(2) infinite; }
.screen-bar .sep { flex: 1; height: 1px; background: var(--line2); min-width: 8px; }
.screen-bar .now { color: var(--mute2); }
.frame { position: relative; aspect-ratio: 1280 / 832; background: #000; border: 1px solid var(--line); box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 18px 60px rgba(255, 79, 74, .12); overflow: hidden; }
.frame::before, .frame::after { content: ''; position: absolute; width: 18px; height: 18px; z-index: 3; pointer-events: none; }
.frame::before { top: 6px; left: 6px; border-top: 2px solid var(--red); border-left: 2px solid var(--red); }
.frame::after { bottom: 6px; right: 6px; border-bottom: 2px solid var(--red); border-right: 2px solid var(--red); }
.frame .poster, .frame .vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame .vid { opacity: 0; transition: opacity .35s; }
.frame.playing .vid { opacity: 1; }
.play { position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; z-index: 2; border: 1px solid var(--yel); background: rgba(7, 6, 10, .7); color: var(--yel); font-size: 26px; cursor: pointer; }
.hero-screen { margin: 2px calc(-1 * var(--gut)) 22px; }
.hero-screen .screen-bar { padding-left: var(--gut); padding-right: var(--gut); }
.hero-screen .frame { border-left: 0; border-right: 0; }

/* ---------------------------------------------------------------- sections */
.block { padding-top: 56px; padding-bottom: 8px; }
.sec-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.sec-head::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); align-self: center; min-width: 20px; }
.sec-no { font: 700 15px/1 var(--name); color: var(--red); letter-spacing: .1em; }
.sec-head h2 { font-size: clamp(28px, 8vw, 46px); }
.sec-lede { font-size: 20px; line-height: 1.45; max-width: 40em; color: var(--text); }
.fine { font: 400 12px/1.6 var(--mono); color: var(--mute); letter-spacing: .02em; margin-top: 14px; }
.sub { font-size: 24px; margin: 40px 0 14px; }

/* the changelog: under the hero, above 01, unnumbered. A panel: its title, then a date and a line per entry, newest
   first. The newest three show; the rest sit in a <details> ("Show all"), which works with no JavaScript */
.block.log { padding-top: 0; }
.log-box { padding: 12px 14px 4px; }
.log-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 8px; }
.log-head h2 { font-size: 22px; letter-spacing: .08em; }
.log-head .hud { margin: 0 0 0 auto; font-size: 11px; letter-spacing: .18em; }
.log-dot { width: 7px; height: 7px; background: var(--red); box-shadow: 0 0 8px var(--red); animation: blink 1.6s steps(2) infinite; }
.log-list { list-style: none; margin: 0; padding: 0; }
.log-list li { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; gap: 2px 14px; padding: 10px 0; border-top: 1px dashed var(--line2); }
.log-list time { font: 400 12px/1.4 var(--mono); letter-spacing: .08em; color: var(--red); white-space: nowrap; }
.log-list span { font-size: 18px; line-height: 1.35; color: var(--bright); overflow-wrap: anywhere; }
.log-more { border-top: 1px dashed var(--line2); }
.log-more summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 10px 0; padding: 0 14px; cursor: pointer; list-style: none;
  font: 400 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--yel); border: 1px solid rgba(252, 238, 10, .45); }
.log-more summary::-webkit-details-marker { display: none; }
.log-more summary::after { content: '+'; font-size: 16px; }
.log-more[open] summary::after { content: '−'; }
.log-more summary:hover { border-color: var(--yel); color: var(--bright); }
.log-more .log-less, .log-more[open] .log-all { display: none; }
.log-more[open] .log-less { display: inline; }

/* the clip player: the theme switch (its label above three equal buttons), then a tab for every page */
.themes { margin-bottom: 10px; }
.themes .hud { margin: 0 0 8px; text-align: center; }
.theme-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.themes button { min-width: 0; min-height: 40px; font: 400 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--yel);
  background: transparent; border: 1px solid rgba(252, 238, 10, .45); cursor: pointer; }
.themes button:hover { border-color: var(--yel); color: var(--bright); }
.themes button[aria-pressed="true"] { background: var(--yel); border-color: var(--yel); color: var(--bg); }
.player .tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-bottom: 12px; }
.tabs button { min-height: 40px; padding: 0 2px; font: 400 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute2);
  background: transparent; border: 1px solid var(--line2); cursor: pointer; white-space: nowrap; }
.tabs button:hover { border-color: var(--red); color: var(--bright); }
.tabs button[aria-selected="true"] { background: var(--red); border-color: var(--red); color: var(--bg); }
.player .tabs .tab-wide { grid-column: 1 / -1; }

/* 02: every page, a card each (on phones a row: the picture left, the words right) */
.feats { display: grid; gap: 10px; }
.feat { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); align-items: center; }   /* the picture centred on its text */
.feat-img { position: relative; background: #000; }
.feat-img img { width: 100%; height: auto; aspect-ratio: 1280 / 832; object-fit: cover; display: block; }
.feat-img .wip { top: 4px; right: 4px; font-size: 8px; padding: 2px 4px; }
.feat .wip-more { display: none; }   /* a phone's small card: just WIP (the band burned into the picture says the rest) */
.feat-txt { padding: 8px 10px 10px 12px; }
.feat h3 { font-size: 19px; padding: 0 0 4px; }
.feat p { margin: 0; color: var(--text); font-size: 15px; line-height: 1.4; }

/* 03: the three themes */
.theme-grid { display: grid; gap: 14px; }
.theme { margin: 0; }
.theme .feat-img img { border-bottom: 1px solid var(--line2); }
.theme figcaption { display: grid; gap: 6px; padding: 12px 14px 14px; }
.theme figcaption .hud { margin: 0; color: var(--yel); font-size: 13px; }
.theme figcaption span { color: var(--text); }
.theme figcaption .btn { justify-self: start; margin-top: 4px; }
.safe { margin-top: 26px; padding: 18px 18px 8px; border-color: rgba(252, 238, 10, .35); background: linear-gradient(180deg, rgba(252, 238, 10, .05), transparent); }
.safe::before { border-color: var(--yel); }
.safe::after { border-color: var(--yel); }
.safe h3 { font-size: 26px; margin-bottom: 8px; }

/* the plan */
.kit { display: grid; gap: 10px; margin: 20px 0; }
.part { padding: 14px 16px 6px; }
.part .hud { color: var(--red); margin-bottom: 6px; }
.track-list { padding: 16px 16px 6px; margin-top: 14px; }
.planned { display: grid; gap: 10px; }
.plan-item { padding: 14px 16px 8px; border-color: rgba(252, 238, 10, .3); }
.plan-item::before, .plan-item::after { border-color: var(--yel); }
.plan-item .hud { margin-bottom: 4px; }
.plan-item h4 { font: 700 21px/1.1 var(--word); text-transform: uppercase; letter-spacing: .04em; color: var(--bright); margin: 0 0 6px; }
.beyond { margin-top: 14px; padding: 16px 16px 4px; }
.say { list-style: none; margin: 0; padding: 0; }
.say li { position: relative; padding: 4px 0 8px 22px; font-size: 20px; line-height: 1.35; color: var(--bright); }
.say li::before { content: '▸'; position: absolute; left: 0; top: 4px; color: var(--red); }
.notice { border: 1px solid rgba(252, 238, 10, .45); background: rgba(252, 238, 10, .05); padding: 12px 14px; font-size: 17px; line-height: 1.45; color: var(--text); }
.notice b { color: var(--yel); }
.steps { list-style: none; margin: 0 0 6px; padding: 0; counter-reset: s; }
.steps li { position: relative; padding: 8px 0 8px 34px; border-bottom: 1px dashed var(--line2); color: var(--mute2); font-size: 17px; }
.steps li:last-child { border-bottom: 0; }
.steps li b { display: block; color: var(--bright); text-transform: uppercase; letter-spacing: .06em; }
.steps li::before { content: ''; position: absolute; left: 4px; top: 13px; width: 14px; height: 14px; border: 1px solid var(--dim); }
.steps li.done::before { background: var(--red); border-color: var(--red); box-shadow: 0 0 10px rgba(255, 79, 74, .5); }
.steps li.now::before { border-color: var(--yel); background: repeating-linear-gradient(45deg, var(--yel) 0 2px, transparent 2px 5px); animation: blink 1.6s steps(2) infinite; }
.steps li.now b { color: var(--yel); }

/* the story */
.story { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.story-copy p { font-size: 20px; line-height: 1.5; }
.photos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.story > *, .photos > *, .feats > *, .kit > *, .row2 > *, .follow > *, .hero > *, .theme-grid > *, .planned > * { min-width: 0; }
.photo { position: relative; }
.photos > :first-child { grid-column: 1 / -1; }
.photo-note { grid-column: 1 / -1; margin: 0; }
.photos img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border: 1px solid var(--line); }
.photo-stock img { aspect-ratio: 4 / 3; object-position: 50% 42%; }   /* the cubby, above the radio */
.photo-mecha img { object-position: 50% 45%; }   /* the dash's screen */
.photo-night img { object-position: 50% 65%; }
.photo-mecha .wip-more, .photo-night .wip-more { display: none; }   /* a phone's small photo: just WIP, like 02's cards */

/* ---------------------------------------------------------------- the waitlist form */
.join-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.join-grid > * { min-width: 0; }
.next { padding: 16px 16px 6px; display: none; }
.formbox { padding: 18px 16px; }
.wl { display: grid; gap: 18px; }
.step-no { margin: 0; color: var(--red); }
.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.field > label, legend { display: block; font: 700 18px/1.25 var(--word); letter-spacing: .03em; color: var(--bright); padding: 0; margin-bottom: 10px; }
legend small, label small { font-weight: 400; }
input[type="email"], input[type="text"], select, textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; font: 500 18px/1.3 var(--word); letter-spacing: .02em; color: var(--bright);
  background: rgba(7, 6, 10, .8); border: 1px solid var(--line); border-radius: 0; -webkit-appearance: none; appearance: none;
}
textarea { min-height: 96px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--dim); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--yel); box-shadow: 0 0 0 1px var(--yel); }
select { background-image: linear-gradient(45deg, transparent 50%, var(--red) 50%), linear-gradient(135deg, var(--red) 50%, transparent 50%);
  background-position: calc(100% - 22px) 22px, calc(100% - 16px) 22px; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
select option { background: var(--bg2); color: var(--bright); }
.row2 { display: grid; gap: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label, .list label, .check label { position: relative; cursor: pointer; }
.chips input, .list input, .check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; font: 400 13px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--mute2); border: 1px solid var(--line); background: rgba(7, 6, 10, .6); transition: background .12s, color .12s; }
.chips label:hover span { border-color: var(--red); color: var(--bright); }
.chips input:checked + span { background: var(--red); border-color: var(--red); color: var(--bg); }
.chips input:focus-visible + span, .list input:focus-visible + span, .check input:focus-visible + span { outline: 2px solid var(--yel); outline-offset: 2px; }
.list { display: grid; gap: 8px; }
.list span, .check span { display: block; padding: 12px 14px 12px 46px; border: 1px solid var(--line2); background: rgba(7, 6, 10, .6); font-size: 17px; line-height: 1.35; color: var(--text); position: relative; }
.list span::before, .check span::before { content: ''; position: absolute; left: 14px; top: 13px; width: 18px; height: 18px; border: 1px solid var(--red); }
.list input:checked + span, .check input:checked + span { border-color: var(--red); color: var(--bright); }
.list input:checked + span::before, .check input:checked + span::before { background: var(--red); box-shadow: inset 0 0 0 3px var(--bg); }
.check span { border: 0; background: transparent; padding-left: 34px; font-size: 16px; color: var(--mute2); }
.check span::before { left: 2px; top: 14px; }
.brand-in { margin-top: 10px; }
.bad > label, .bad legend { color: var(--org); }
.bad input, .bad select, .bad .chips span, .bad .check span::before { border-color: var(--org); }
html:not(.js) .formbox .wl, .js .formbox .nojs { display: none; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ts-box { min-height: 65px; }
.ts-sim { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 14px; border: 1px dashed var(--cyan); color: var(--cyan); font: 400 13px/1.4 var(--mono); }
.ts-sim label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.ts-sim input { width: 20px; height: 20px; accent-color: var(--cyan); }
.ts-sim button { background: none; border: 0; color: var(--mute); font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }
.msg { margin: 0; min-height: 1.2em; font: 400 13px/1.5 var(--mono); color: var(--mute2); }
.msg-err { color: var(--org); }
.field-err { margin: 6px 0 0; font: 400 13px/1.5 var(--mono); color: var(--org); }
.ok-line { display: flex; align-items: center; gap: 12px; font: 700 26px/1.1 var(--word); text-transform: uppercase; letter-spacing: .05em; color: var(--bright); margin: 0; }
.tick { display: inline-grid; place-items: center; width: 34px; height: 34px; background: var(--cyan); color: var(--bg); font-size: 20px; box-shadow: 0 0 18px rgba(94, 246, 255, .45); }
.hint { margin: -8px 0 0; color: var(--mute2); }
.done-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: -6px; }
.ok-sub { margin: 0; font: 700 20px/1.2 var(--word); letter-spacing: .03em; color: var(--cyan); }   /* finished, in the tick's colour */
.two-btn { display: grid; gap: 10px; }
.done { display: grid; gap: 10px; }
.done:focus { outline: none; }

/* ---------------------------------------------------------------- questions, follow, footer */
.faq details { border-top: 1px solid var(--line2); }
.faq details:last-child { border-bottom: 1px solid var(--line2); }
.faq summary { cursor: pointer; list-style: none; padding: 16px 36px 16px 0; position: relative; font: 700 19px/1.3 var(--word); letter-spacing: .03em; color: var(--bright); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 12px; font: 400 22px var(--mono); color: var(--red); }
.faq details[open] summary::after { content: '−'; }
.faq details p { color: var(--text); padding-bottom: 8px; }
.follow { display: grid; gap: 12px; }
.soc { display: grid; gap: 4px; padding: 18px; text-decoration: none; color: var(--bright); }
.soc .hud { margin: 0; color: var(--red); }
.soc b { font-size: 24px; }
.soc .go { font: 400 12px var(--mono); letter-spacing: .18em; color: var(--yel); text-transform: uppercase; }
.soc:hover { border-color: var(--red); }
.foot { margin-top: 64px; padding: 28px 0 40px; border-top: 1px solid var(--line2); color: var(--mute); font-size: 15px; }
.foot p { max-width: 60em; }
.foot a { color: var(--mute2); }
.brand-sm { font-size: 14px; margin-bottom: 14px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; font: 400 12px var(--mono); letter-spacing: .08em; }

/* the privacy page and the 404 */
.doc { max-width: 760px; padding-top: 32px; }
.doc h1 { font-size: clamp(32px, 9vw, 52px); margin: 6px 0 22px; }
.doc h2 { font-size: 22px; margin: 30px 0 10px; color: var(--red); }
.doc ul { padding-left: 20px; }
.doc li { margin-bottom: 6px; }

/* ---------------------------------------------------------------- wider screens */
@media (min-width: 560px) {
  .top .chip { display: inline-block; }
  .top .wide { display: inline; }
  .player .tabs { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .feat { display: block; padding: 0 0 14px; }
  .feat-img img { border-bottom: 1px solid var(--line2); }
  .feat-img .wip { top: 6px; right: 6px; font-size: 9px; padding: 3px 6px; }
  .feat .wip-more { display: inline; }
  .photo-mecha .wip-more, .photo-night .wip-more { display: inline; }
  .wip-stripe { letter-spacing: .12em; }
  .screen-bar { letter-spacing: .2em; }
  .feat-txt { padding: 12px 16px 0; }
  .feat h3 { font-size: 22px; }
  .feat p { font-size: 16px; }
  .row2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two-btn { grid-template-columns: 2fr 1fr; }
  .follow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 720px) {
  :root { --gut: 24px; }
  .kit { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .theme-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .planned { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-wide { grid-column: 1 / -1; }
  .tabs button { font-size: 11.5px; letter-spacing: .1em; }
  .formbox { padding: 28px 28px; }
  .log-box { padding: 16px 24px 6px; }
  .log-head h2 { font-size: 24px; }
  .log-list li { gap: 2px 20px; }
  .hero-screen { margin: 0; }
  .hero-screen .screen-bar { padding-left: 0; padding-right: 0; }
  .hero-screen .frame { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}
@media (min-width: 960px) {
  .hero { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: 1fr repeat(8, auto) 1fr; padding-top: 56px; padding-bottom: 64px;
    grid-template-areas: ". screen" "label screen" "title screen" "lede screen" "voice screen" "list screen" "cta screen" "status screen" "track screen" ". screen"; }
  .hero .hero-screen { align-self: center; margin: 0; }
  .title { font-size: clamp(48px, 5.2vw, 70px); }
  .story { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .plan-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .join-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px; align-items: start; }
  .next { display: block; margin-top: 10px; }
  .faq { max-width: 860px; }
}
@media (min-width: 1100px) {
  .feats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kit { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}