/* Store design "Matrix": a green-phosphor terminal. Falling code behind the page
   (designs/matrix.js), monospace type, glowing readouts, square edges, inverted selection.
   Loaded after app.css, only on stores using it. Every green derives from the store's accent
   (--signal), so another accent gives another phosphor (amber, cyan…). */

@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --mx: var(--signal, #00FF41);
  --mx-hi: color-mix(in srgb, var(--mx) 38%, #ffffff);
  --mx-text: color-mix(in srgb, var(--mx) 62%, #ffffff);
  --mx-mid: color-mix(in srgb, var(--mx) 72%, #000000);
  --mx-dim: color-mix(in srgb, var(--mx) 52%, #000000);
  --mx-line: color-mix(in srgb, var(--mx) 34%, #000000);
  --mx-faint: color-mix(in srgb, var(--mx) 14%, #000000);
  --mx-wash: color-mix(in srgb, var(--mx) 7%, transparent);
  --mx-glow: color-mix(in srgb, var(--mx) 55%, transparent);
  --mx-pane: color-mix(in srgb, color-mix(in srgb, var(--mx) 3%, #000000) 88%, transparent);
  --mx-ink: var(--on-signal, #000000);     /* text on a filled accent */
  --mx-alert: var(--signal-alert, #FF4D6D); /* errors: never the same colour as the accent */

  --ground: #000000;
  --surface: #000000;
  --ink: var(--mx-hi);
  --ink-2: var(--mx-text);
  --muted: var(--mx-mid);
  --faint: var(--mx-dim);
  --rule: var(--mx-line);
  --rule-strong: var(--mx-dim);

  --board: #000000;
  --board-edge: var(--mx-line);
  --tile-top: var(--mx-faint);
  --tile-bot: color-mix(in srgb, var(--mx) 10%, #000000);
  --tile-split: transparent;
  --glyph: var(--mx-hi);
  --board-label: var(--mx-mid);
  --go: var(--mx);
  --hold: var(--mx-hi);
  --stop: var(--mx-alert);
  --error: var(--mx-alert);
  --ok: var(--mx);

  --ui: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --flap: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r-card: 2px;
  --r-control: 2px;
  color-scheme: dark;
}

/* ------------------------------------------------------------------ the screen */

html { background: #000; }
body {
  background: #000;
  color: var(--ink-2);
  font-size: 1rem;
  letter-spacing: .01em;
}
::selection { background: var(--mx); color: var(--mx-ink); }
a { color: var(--mx); }
:focus-visible { outline: 2px solid var(--mx); outline-offset: 3px; border-radius: 0; }
.skip { background: var(--mx); color: var(--mx-ink); border-radius: 0; }

/* falling code (matrix.js) — sits behind everything, strongest top-left */
.mx-rain {
  position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none;
  opacity: .5;
  /* strongest in the top-right corner, faint behind the headline and the order form */
  -webkit-mask-image: radial-gradient(85% 75% at 92% 4%, #000 0%, rgba(0,0,0,.5) 48%, rgba(0,0,0,.16) 100%);
  mask-image: radial-gradient(85% 75% at 92% 4%, #000 0%, rgba(0,0,0,.5) 48%, rgba(0,0,0,.16) 100%);
}
/* CRT scanlines and vignette, over everything but never in the way */
body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50; }
body::before { background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, .16) 2px 3px); }
body::after { background: radial-gradient(140% 110% at 50% 45%, transparent 62%, rgba(0, 0, 0, .55) 100%); }
.top, .stage, .foot, .doc, .test-banner, .sold-bar { position: relative; z-index: 1; }
.skip { z-index: 60; }

/* ------------------------------------------------------------------ top bar */

.top { padding-bottom: 1.1rem; border-bottom: 1px dashed var(--mx-line); max-width: 84rem; }
.mark { gap: .8rem; color: var(--mx-hi); }
.mark-tile {
  width: 2.4rem; height: 2.4rem; border-radius: 0; background: #000;
  border: 1px solid var(--mx); color: var(--mx);
  font-family: var(--ui); font-size: 1.25rem; font-weight: 700;
  box-shadow: 0 0 14px -2px var(--mx-glow), inset 0 0 10px -4px var(--mx-glow);
  text-shadow: 0 0 8px var(--mx-glow);
}
.mark-tile::after { display: none; }
.mark-logo { border-radius: 0; border: 1px solid var(--mx-line); background: #000; }
.mark-name { font-weight: 700; font-size: 1.02rem; text-transform: uppercase; letter-spacing: .18em; text-shadow: 0 0 10px var(--mx-glow); }
.top-status { font-size: .78rem; text-transform: uppercase; letter-spacing: .16em; color: var(--mx); }
.top-status::before { content: "sys:"; content: "sys:" / ""; color: var(--mx-dim); letter-spacing: .08em; }
.lamp { border-radius: 0; width: .5rem; height: .5rem; background: var(--mx); box-shadow: 0 0 10px var(--mx); animation: mx-pulse 1.6s steps(2, end) infinite; }
body.is-closed .lamp { background: var(--mx-alert); box-shadow: 0 0 10px var(--mx-alert); }
body.is-closed .top-status { color: var(--mx-alert); }

/* ------------------------------------------------------------------ hero */

.stage::before {
  content: "> establishing secure line ··· ok"; content: "> establishing secure line ··· ok" / "";
  display: block; grid-column: 1 / -1; margin-bottom: 1.4rem;
  font-size: .78rem; color: var(--mx-dim); letter-spacing: .14em; text-transform: uppercase;
}
h1 {
  font-family: var(--ui); font-weight: 700;
  font-size: clamp(2.1rem, 4.3vw, 3.9rem); line-height: 1.06; letter-spacing: -.035em;
  max-width: 21ch; color: var(--mx-hi);
  text-shadow: 0 0 2px #000, 0 2px 14px #000, 0 0 18px var(--mx-glow), 0 0 2px var(--mx);
}
h1::after {
  content: ""; content: "" / ""; display: inline-block; width: .55em; height: .9em; margin-left: .12em;
  vertical-align: -.08em; background: var(--mx); box-shadow: 0 0 14px var(--mx);
  animation: mx-blink 1.05s steps(2, start) infinite;
}
.lede { text-shadow: 0 0 2px #000, 0 1px 8px #000; color: var(--mx-text); font-size: 1.02rem; line-height: 1.7; max-width: 44rem; }
.lede::before { content: "// "; content: "// " / ""; color: var(--mx-dim); }

.assure { flex-direction: column; gap: .35rem; font-size: .88rem; font-weight: 500; color: var(--mx-text); margin-top: 1.4rem; }
.assure svg { display: none; }
.assure li::before { content: "[ OK ]"; content: "[ OK ]" / ""; color: var(--mx); font-weight: 700; margin-right: .4rem; text-shadow: 0 0 8px var(--mx-glow); }

/* ------------------------------------------------------------------ order console */

.steps {
  border: 1px solid var(--mx-line); background: var(--mx-pane);
  box-shadow: 0 0 0 1px #000, 0 30px 80px -40px var(--mx-glow);
  padding: 0 1.4rem 1.4rem;
  backdrop-filter: blur(2px);
}
.steps::before {
  content: "order.sh — secure session"; content: "order.sh — secure session" / "";
  display: flex; align-items: center; margin: 0 -1.4rem 1.4rem; padding: .55rem 1.4rem;
  border-bottom: 1px solid var(--mx-line); background: var(--mx-faint);
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mx-mid);
}
.steps > * + * { margin-top: 1.7rem; }
.step-head { font-size: .86rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--mx-hi); gap: .55rem; }
.step-no {
  display: inline-flex; align-items: center; white-space: nowrap;
  width: auto; height: auto; background: none; color: var(--mx); border-radius: 0;
  font-family: var(--ui); font-size: .86rem; text-shadow: 0 0 8px var(--mx-glow);
}
.step-no::before { content: "[0"; content: "[0" / ""; }
.step-no::after { content: "]"; content: "]" / ""; }
.step.is-done .step-no { background: none; color: var(--mx-hi); }
.step.is-done .step-no::after { content: "]·ok"; content: "]·ok" / ""; color: var(--mx-dim); }
.step:focus-within .step-title::after { content: "_"; content: "_" / ""; color: var(--mx); animation: mx-blink 1s steps(2, start) infinite; }

.msg { font-size: .82rem; color: var(--mx-mid); }
.msg.is-ok { color: var(--mx); }
.msg.is-error { color: var(--mx-alert); }

/* carriers: a menu, the chosen line inverted */
.carriers { grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: .45rem; }
.carrier-card {
  min-height: 3.7rem; padding: .6rem .75rem; gap: .75rem;
  background: rgba(0, 0, 0, .75); border: 1px solid var(--mx-line); border-radius: 0; box-shadow: none;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.carrier-card img {
  width: 2.2rem; height: 2.2rem; border-radius: 0;
  /* logos in phosphor: light logo, green tint */
  filter: grayscale(1) invert(1) sepia(1) saturate(var(--signal-sat, 4)) hue-rotate(var(--signal-rot, 96deg)) brightness(.95) contrast(1.1);
  mix-blend-mode: screen;
}
.carrier-name { font-size: .86rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mx-hi); }
.carrier-price { font-size: .86rem; color: var(--mx); }
.carrier-check { display: none; }
.carrier:hover .carrier-card { transform: none; background: var(--mx-wash); border-color: var(--mx-dim); box-shadow: inset 3px 0 0 var(--mx); }
.carrier input:checked + .carrier-card {
  background: var(--mx); border-color: var(--mx);
  box-shadow: 0 0 22px -4px var(--mx-glow);
}
.carrier input:checked + .carrier-card .carrier-name,
.carrier input:checked + .carrier-card .carrier-price { color: var(--mx-ink); font-weight: 700; }
.carrier input:checked + .carrier-card img { filter: grayscale(1) contrast(1.6); mix-blend-mode: multiply; }
.carrier input:focus-visible + .carrier-card { outline: 2px solid var(--mx-hi); outline-offset: 2px; }

/* prompts */
.steps input[type="text"], .steps input[type="email"] {
  background: #000; color: var(--mx-hi); caret-color: var(--mx);
  border: 1px solid var(--mx-line); border-radius: 0; font-family: var(--ui);
}
.steps input::placeholder { color: var(--mx-dim); }
.steps input:hover { border-color: var(--mx-dim); }
.steps input:focus, .stepper:focus-within { border-color: var(--mx); box-shadow: 0 0 0 1px var(--mx), 0 0 18px -2px var(--mx-glow); }
.steps #area { font-size: 2rem; letter-spacing: .32em; text-shadow: 0 0 12px var(--mx-glow); width: 9.5rem; }
.steps #email { font-size: 1.02rem; }
.stepper { background: #000; border: 1px solid var(--mx-line); border-radius: 0; height: 3.6rem; }
.steps .stepper input#qty { background: transparent; font-size: 1.6rem; color: var(--mx-hi); text-shadow: 0 0 10px var(--mx-glow); }
.step-btn { color: var(--mx); }
.step-btn:hover:not(:disabled) { background: var(--mx-wash); }
.step-btn:disabled { color: var(--mx-faint); }

/* ------------------------------------------------------------------ readout (the board) */

.board {
  background: color-mix(in srgb, color-mix(in srgb, var(--mx) 2%, #000000) 92%, transparent); border: 1px solid var(--mx-line); border-radius: 0;
  box-shadow: 0 0 0 1px #000, 0 0 50px -18px var(--mx-glow), inset 0 0 50px -30px var(--mx-glow);
  color: var(--mx-hi);
}
.board-head { border-bottom: 1px dashed var(--mx-line); }
.board-title { font-size: .76rem; text-transform: uppercase; letter-spacing: .18em; color: var(--mx-mid); }
.board-title::before { content: "▮ "; content: "▮ " / ""; color: var(--mx); animation: mx-pulse 1.6s steps(2, end) infinite; }
.board-clock .flap { --tone: var(--mx-mid); }
.b-row + .b-row { border-top: 1px solid rgba(0, 0, 0, 0); }
.b-row.is-group-start { border-top: 1px dashed var(--mx-line); }
.b-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; }
.flap { border-radius: 0; font-weight: 700; text-shadow: 0 0 9px var(--mx-glow); }
.flap::before, .flap::after { display: none; }
.f-top, .f-fold, .f-bot, .f-fall { border-radius: 0; box-shadow: none; }
.f-fold { background: var(--tile-top); }
.f-fall { background: var(--tile-bot); }
.b-row.tone-stop { text-shadow: none; }
.b-row.is-dim { --tone: var(--mx-line); }

/* ------------------------------------------------------------------ payment + results */

.panel { background: var(--mx-pane); border: 1px solid var(--mx-line); border-radius: 0; box-shadow: none; }
.panel-head h2 { font-size: .84rem; text-transform: uppercase; letter-spacing: .18em; color: var(--mx-hi); }
.secure { font-size: .74rem; letter-spacing: .06em; color: var(--mx-mid); }
.send-to b { color: var(--mx-hi); }
.pay-wait, .fine { color: var(--mx-mid); font-size: .8rem; }
.pay-btn {
  border-radius: 0; background: var(--mx); color: var(--mx-ink);
  font-family: var(--ui); font-size: 1rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  box-shadow: 0 0 26px -4px var(--mx-glow);
}
.pay-btn:hover:not(:disabled) { background: var(--mx-hi); }
.pay-btn:disabled { background: transparent; color: var(--mx-dim); border: 1px dashed var(--mx-line); box-shadow: none; }
.pay-btn.is-busy { background: var(--mx-mid); }
.pay-btn.is-busy::before { border-color: color-mix(in srgb, var(--mx-ink) 30%, transparent); border-top-color: var(--mx-ink); }
.pay-error { color: var(--mx-alert); }

.line-card { border: 1px solid var(--mx-line); border-radius: 0; background: #000; }
.line-card .lc-num { color: var(--mx-hi); text-shadow: 0 0 10px var(--mx-glow); }
.line-card .lc-sub { color: var(--mx-mid); }
.btn-copy { border-radius: 0; background: transparent; color: var(--mx); border: 1px solid var(--mx); text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; }
.btn-copy:hover { background: var(--mx); color: var(--mx-ink); }
.btn-copy.is-done { background: var(--mx); color: var(--mx-ink); }
.btn-dark { border-radius: 0; background: transparent; color: var(--mx); border: 1px solid var(--mx); text-transform: uppercase; letter-spacing: .12em; }
.btn-dark:hover { background: var(--mx); color: var(--mx-ink); }
.btn-ghost, .top-back {
  border-radius: 0; background: transparent; color: var(--mx); border: 1px solid var(--mx);
  text-transform: uppercase; letter-spacing: .12em; font-size: .8rem;
}
.btn-ghost:hover, .top-back:hover { background: var(--mx); color: var(--mx-ink); }

/* ------------------------------------------------------------------ footer, banners, policy pages */

.foot-links { border-top: 1px dashed var(--mx-line); font-size: .76rem; text-transform: uppercase; letter-spacing: .14em; }
.foot-links a { color: var(--mx-mid); }
.foot-links a::before { content: "/"; content: "/" / ""; color: var(--mx-dim); margin-right: .25rem; }
.foot-links a:hover, .foot-links a[aria-current="page"] { color: var(--mx-hi); }

.test-banner {
  background: #000; color: var(--mx); border-bottom: 1px dashed var(--mx-line);
  font-size: .76rem; text-transform: uppercase; letter-spacing: .12em;
}
.test-banner strong { color: var(--mx-hi); }

.doc { background: color-mix(in srgb, color-mix(in srgb, var(--mx) 2%, #000000) 86%, transparent); box-shadow: 0 0 0 1px var(--mx-faint), 0 40px 90px -40px var(--mx-glow); padding-left: clamp(1.25rem, 3vw, 2.5rem); padding-right: clamp(1.25rem, 3vw, 2.5rem); }
.is-doc .top { background: rgba(0, 0, 0, .7); }
.doc h1 { font-size: clamp(2rem, 4vw, 3rem); }
.doc h1::after { display: none; }
.doc-updated { color: var(--mx-dim); }
.doc-body { border-top: 1px dashed var(--mx-line); }
.doc-body h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .12em; color: var(--mx-hi); }
.doc-body h2::before { content: "## "; content: "## " / ""; color: var(--mx-dim); }
.doc-body p, .doc-body li { color: var(--mx-text); font-size: .95rem; line-height: 1.75; }
.doc-body li::marker { color: var(--mx); }
.doc-body a { color: var(--mx); text-decoration-color: var(--mx-dim); }
.doc-body code { background: var(--mx-faint); color: var(--mx-hi); border-radius: 0; }
.trustbox a { color: var(--mx-mid); }

/* ------------------------------------------------------------------ layout: full-width hero, then console + readout */

@media (min-width: 961px) {
  .stage {
    max-width: 84rem;
    grid-template-columns: minmax(0, 1fr) minmax(21rem, 25.5rem);
    column-gap: clamp(1.5rem, 3vw, 2.75rem);
    padding-top: clamp(2rem, 4.5vw, 3.75rem);
  }
  .intro { display: contents; }
  h1, .lede, .assure, .trustbox, .order-again { grid-column: 1 / -1; }
  .steps { grid-column: 1; max-width: none; margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }
  .rail { grid-column: 2; margin-top: clamp(1.75rem, 3.5vw, 2.75rem); top: 1.25rem; }
  body.has-order .rail { grid-column: 1 / -1; max-width: 40rem; }
}
@media (max-width: 960px) {
  .trustbox { order: 3; }
  .steps { padding: 0 1rem 1.1rem; }
  .steps::before { margin: 0 -1rem 1.1rem; padding: .5rem 1rem; }
}
@media (max-width: 520px) {
  .mark-name { font-size: .9rem; letter-spacing: .12em; }
  .top-status::before { content: none; }
  .carriers { grid-template-columns: minmax(0, 1fr); }
  .steps #area { width: 100%; }
}

@keyframes mx-blink { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes mx-pulse { 0% { opacity: 1; } 100% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  h1::after, .lamp, .board-title::before, .step:focus-within .step-title::after { animation: none; }
  .mx-rain { display: none; }
}