/* ============================================================
   MERLIN VA -- founder's licence landing page
   Console aesthetic: dim grade-suite rack, phosphor readouts.
   Single committed dark theme (the product is a colour-critical
   tool; a light ground would misrepresent it). Every colour is
   painted explicitly so the page holds on any host background.
   ============================================================ */

:root {
  color-scheme: dark;

  --ground:      #08090b;
  --ground-deep: #050506;
  --panel:       #101116;
  --raised:      #171921;
  --engrave:     #24262f;
  --engrave-hi:  #3a3d4a;

  --ink:         #eceef2;
  --ink-muted:   #a3a7b5;
  --ink-faint:   #6b6f7e;

  --phosphor:      #f97316;
  --phosphor-hot:  #ffb066;
  --phosphor-dim:  #a44c0c;
  --phosphor-wash: rgba(249,115,22,0.10);

  --iris:      #8b5cf6;
  --iris-wash: rgba(139,92,246,0.12);

  --signal-ok:   #4ade80;
  --signal-info: #38bdf8;
  --signal-warn: #fbbf24;

  --rule: 1px solid var(--engrave);

  --f-display: "Chakra Petch", "Bahnschrift", "DIN Alternate", system-ui, sans-serif;
  --f-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", "SF Mono", ui-monospace, Menlo, monospace;

  --shell: 1140px;
  --pad: clamp(18px, 4vw, 40px);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Ambient: a very faint horizon glow behind the whole rack. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(249,115,22,0.10), transparent 60%),
    radial-gradient(90% 60% at 85% 8%, rgba(139,92,246,0.09), transparent 62%);
}

.shell { position: relative; z-index: 1; overflow-x: clip; }

h1, h2, h3, .display {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--phosphor);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- shared structure ---------- */

.wrap {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad);
}

section { position: relative; }

/* Rack rail: the hairline that separates every panel, with screw heads. */
.rail {
  border-top: var(--rule);
  position: relative;
}
.rail::before, .rail::after {
  content: "";
  position: absolute;
  top: -3.5px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--engrave-hi), #0a0b0e 70%);
}
.rail::before { left: max(calc(50% - var(--shell) / 2 + 14px), 14px); }
.rail::after  { right: max(calc(50% - var(--shell) / 2 + 14px), 14px); }

/* Engraved panel header: LED + channel label + rule to the right edge. */
.panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(22px, 3.4vw, 38px);
}
.led {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--phosphor);
  box-shadow: 0 0 8px 1px rgba(249,115,22,0.75);
}
.led.violet { background: var(--iris); box-shadow: 0 0 8px 1px rgba(139,92,246,0.7); }
.led.green  { background: var(--signal-ok); box-shadow: 0 0 8px 1px rgba(74,222,128,0.6); }
.led.blue   { background: var(--signal-info); box-shadow: 0 0 8px 1px rgba(56,189,248,0.6); }

.chan {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.panel-head .line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--engrave), transparent);
}

.sec-title {
  font-size: clamp(1.75rem, 3.6vw, 2.7rem);
  line-height: 1.08;
}
.sec-lede {
  margin-top: 14px;
  max-width: 62ch;
  color: var(--ink-muted);
  font-size: clamp(1rem, 1.6vw, 1.09rem);
}

.pad-y { padding-block: clamp(56px, 8vw, 104px); }

/* Colour rail. Was an SMPTE bar pattern; now it sweeps cyan -> yellow -> red,
   the hues of the Resolve wheel. Kept in seven segments so it still reads as a
   reference strip, but each one blends into the next, so the rail as a whole is
   a single continuous gradient rather than seven flat chips. */
.bars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  height: 4px;
  opacity: 0.85;
}
.bars i { display: block; }
.bars i:nth-child(1) { background: linear-gradient(90deg, #1ec8e0, #37c4bd); }
.bars i:nth-child(2) { background: linear-gradient(90deg, #37c4bd, #6fc78d); }
.bars i:nth-child(3) { background: linear-gradient(90deg, #6fc78d, #b6c95a); }
.bars i:nth-child(4) { background: linear-gradient(90deg, #b6c95a, #f5c518); }
.bars i:nth-child(5) { background: linear-gradient(90deg, #f5c518, #f0951f); }
.bars i:nth-child(6) { background: linear-gradient(90deg, #f0951f, #e75f26); }
.bars i:nth-child(7) { background: linear-gradient(90deg, #e75f26, #d9282c); }

/* ---------- top rail / nav ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(8,9,11,0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: var(--rule);
}
.topbar .wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 58px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: none;
}
.brand svg { display: block; }
.brand b {
  font-family: var(--f-display);
  font-size: 15px;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.brand b span { color: var(--phosphor); }

.navlinks {
  display: flex;
  gap: 26px;
  margin-left: auto;
}
.navlinks a {
  font-size: 13.5px;
  color: var(--ink-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.navlinks a:hover { color: var(--ink); }

.nav-cta {
  flex: none;
  margin-left: 8px;
}

@media (max-width: 780px) {
  .navlinks { display: none; }
  .nav-cta { margin-left: auto; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 13px 24px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s, color 0.16s, transform 0.16s;
  /* chamfered corners: console hardware, not a rounded web card */
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}
.btn-primary {
  background: var(--phosphor);
  color: #140800;
  box-shadow: 0 0 0 0 rgba(249,115,22,0.5);
}
.btn-primary:hover {
  background: var(--phosphor-hot);
  transform: translateY(-1px);
}
.btn-ghost {
  border-color: var(--engrave-hi);
  color: var(--ink);
  background: transparent;
}
.btn-ghost:hover { border-color: var(--phosphor); color: var(--phosphor-hot); }
.btn-sm { padding: 9px 16px; font-size: 13px; }
.btn-lg { padding: 17px 34px; font-size: 17px; }

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

.hero { padding-top: clamp(44px, 7vw, 86px); padding-bottom: clamp(46px, 7vw, 88px); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: clamp(32px, 5vw, 62px);
  align-items: center;
}
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--phosphor-hot);
  background: var(--phosphor-wash);
  border: 1px solid rgba(249,115,22,0.32);
  padding: 6px 13px 6px 10px;
  margin-bottom: 22px;
}
.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--phosphor);
  animation: blink 2.4s ease-in-out infinite;
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

h1 {
  font-size: clamp(2.4rem, 5.6vw, 4.05rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
}
h1 em {
  font-style: normal;
  color: var(--phosphor);
}
.hero-sub {
  margin-top: 20px;
  font-size: clamp(1.05rem, 1.9vw, 1.22rem);
  color: var(--ink-muted);
  max-width: 46ch;
}
.hero-sub strong { color: var(--ink); font-weight: 600; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
}
.hero-note {
  margin-top: 16px;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
}
.hero-note b { color: var(--ink-muted); font-weight: 500; }

/* ---------- console (hero demo) ---------- */

.console {
  background: linear-gradient(180deg, var(--panel), #0c0d11);
  border: 1px solid var(--engrave);
  position: relative;
  overflow: hidden;
}
.console::after {
  /* CRT scanlines, barely there */
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,0.028) 0 1px, transparent 1px 3px);
}
.console-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: var(--rule);
  background: #0b0c10;
}
.console-bar .chan { font-size: 10px; }
.console-bar .right {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--signal-ok);
  text-transform: uppercase;
}
.console-body {
  padding: 20px 20px 22px;
  display: grid;
  gap: 16px;
  min-height: 340px;
  grid-template-rows: auto 1fr auto;
}

.prompt-line {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-family: var(--f-mono);
  font-size: 14.5px;
  border: 1px solid var(--engrave);
  background: #0a0b0f;
  padding: 12px 14px;
}
.prompt-line .caret-mark { color: var(--phosphor); flex: none; }
#typed { color: var(--ink); }
.cursor {
  display: inline-block;
  width: 8px;
  height: 1.05em;
  background: var(--phosphor);
  vertical-align: text-bottom;
  animation: blink 1s steps(1) infinite;
}

.plan {
  border: 1px solid var(--engrave);
  background: rgba(139,92,246,0.045);
  padding: 14px 16px;
  display: grid;
  gap: 10px;
  align-content: start;
  transition: opacity 0.28s ease;
}
.plan.pending { opacity: 0; }
.plan-head {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--iris);
}
#plan-rows {
  display: grid;
  gap: 10px;
  align-content: start;
}
.plan-row {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--ink-muted);
  opacity: 0;
  transform: translateY(4px);
}
.plan-row.in { animation: rowin 0.34s ease forwards; }
@keyframes rowin { to { opacity: 1; transform: none; } }
.plan-row .tick {
  color: var(--signal-ok);
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1.5;
  flex: none;
}
.plan-row b { color: var(--ink); font-weight: 500; }

.scope-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  border-top: var(--rule);
  padding-top: 16px;
}
#scope { display: block; flex: none; }
.scope-read {
  font-family: var(--f-mono);
  font-size: 11px;
  line-height: 1.75;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.scope-read b { color: var(--ink-muted); font-weight: 500; }
.scope-read .ok { color: var(--signal-ok); }

/* ---------- ticker ---------- */

.ticker {
  border-block: var(--rule);
  background: var(--ground-deep);
  overflow: hidden;
  padding-block: 11px;
}
.ticker-track {
  display: flex;
  gap: 46px;
  width: max-content;
  animation: slide 42s linear infinite;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.ticker-track span em { font-style: normal; color: var(--phosphor); }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- generic panel cards ---------- */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 1px;
  background: var(--engrave);
  border: var(--rule);
}
.cell {
  background: var(--panel);
  padding: 26px 24px 28px;
  position: relative;
  transition: background 0.18s;
}
.cell:hover { background: var(--raised); }
.cell h3 {
  font-size: 1.16rem;
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cell p { color: var(--ink-muted); font-size: 14.6px; }
.cell ul {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.cell li {
  font-size: 13.6px;
  color: var(--ink-muted);
  padding-left: 17px;
  position: relative;
  line-height: 1.5;
}
.cell li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 6px; height: 1px;
  background: var(--phosphor);
}
.cell .quote {
  font-family: var(--f-mono);
  color: var(--phosphor-hot);
  font-size: 13px;
}

/* ---------- problem section ---------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 60px);
  align-items: start;
}
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }

.tally {
  border: var(--rule);
  background: var(--panel);
}
.tally-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 15px 20px;
  border-bottom: var(--rule);
}
.tally-row:last-child { border-bottom: 0; }
.tally-row .job { flex: 1; font-size: 14.6px; color: var(--ink-muted); }
.tally-row .was {
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--ink-faint);
  text-decoration: line-through;
  text-decoration-color: var(--phosphor-dim);
}
.tally-row .now {
  font-family: var(--f-mono);
  font-size: 14px;
  color: var(--phosphor-hot);
  min-width: 74px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- steps ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--engrave);
  border: var(--rule);
  counter-reset: step;
}
.step {
  background: var(--panel);
  padding: 28px 24px;
}
.step .num {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--phosphor);
  display: block;
  margin-bottom: 14px;
}
.step h3 { font-size: 1.1rem; margin-bottom: 8px; }
.step p { font-size: 14.4px; color: var(--ink-muted); }

/* ---------- local-first ---------- */

.local {
  border: var(--rule);
  background:
    radial-gradient(80% 120% at 12% 0%, var(--iris-wash), transparent 62%),
    var(--panel);
  padding: clamp(28px, 4.4vw, 46px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
}
@media (max-width: 880px) { .local { grid-template-columns: 1fr; } }

.wire {
  display: grid;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 12.6px;
}
.wire div {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border: 1px solid var(--engrave);
  background: #0a0b0f;
  color: var(--ink-muted);
}
.wire div .k { color: var(--signal-ok); }
.wire div.off { color: var(--ink-faint); }
.wire div.off .k { color: var(--phosphor); }

/* The optional-key note. Deliberately small: local-first is the promise, and
   this is the escape hatch for people who want more, not a second headline. */
.wire-note {
  margin-top: 14px;
  font-size: 12.2px;
  line-height: 1.6;
  color: var(--ink-faint);
  border-left: 2px solid var(--iris);
  padding-left: 12px;
}
.wire-note b { color: var(--ink-muted); font-weight: 550; }

/* ---------- honesty ---------- */

.honest {
  display: grid;
  /* Six items: auto-fit lands on four columns at this width and leaves two
     empty cells showing as blank panels. Divisors of six only. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--engrave);
  border: var(--rule);
}
.honest div {
  background: var(--panel);
  padding: 20px 20px 22px;
}
.honest .no {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal-warn);
  display: block;
  margin-bottom: 8px;
}
.honest p { font-size: 13.8px; color: var(--ink-muted); }

/* ---------- pricing ---------- */

#pricing { scroll-margin-top: 70px; }

/* The ladder. Three rungs, and the price only ever goes one way, so the rung
   you are standing on is lit and the ones ahead of it are dimmed. */
.ladder {
  display: grid;
  /* Four stages. Below 1040px four rungs squeeze the price out of shape, so
     they fold to two columns before folding to one at the 780px rule below. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--engrave);
  border: var(--rule);
  margin-bottom: 26px;
}
@media (max-width: 1040px) { .ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 780px)  { .ladder { grid-template-columns: 1fr; } }

.rung {
  background: var(--panel);
  padding: 22px 22px 24px;
}
.rung .stage {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 14px;
}
.rung .rung-price {
  font-family: var(--f-display);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.rung .rung-qty {
  margin-top: 9px;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
}
.rung p {
  margin-top: 12px;
  font-size: 13.4px;
  color: var(--ink-faint);
  line-height: 1.55;
}
.rung.now {
  background: linear-gradient(180deg, #191a20, #101116);
  box-shadow: inset 0 2px 0 0 var(--phosphor);
}
.rung.now .stage { color: var(--phosphor); }
.rung.now .rung-price { color: var(--phosphor); text-shadow: 0 0 26px rgba(249,115,22,0.4); }
.rung.now .rung-qty { color: var(--ink-muted); }
.rung.now p { color: var(--ink-muted); }

/* Licence terms: the engraved plate on the back of the unit. The conditions
   people actually need before paying, in the words we would use out loud. */
.terms {
  margin-top: 26px;
  border: var(--rule);
  background: var(--panel);
}
.terms-head {
  padding: 16px 22px;
  border-bottom: var(--rule);
  background: #0b0c10;
  display: flex;
  align-items: center;
  gap: 12px;
}
.terms dl { margin: 0; }
.terms-row {
  display: grid;
  grid-template-columns: minmax(0, 215px) minmax(0, 1fr);
  gap: 6px 26px;
  padding: 18px 22px;
  border-bottom: var(--rule);
}
.terms-row:last-child { border-bottom: 0; }
@media (max-width: 700px) { .terms-row { grid-template-columns: 1fr; } }
.terms-row dt {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 14.8px;
  color: var(--ink);
}
.terms-row dd {
  margin: 0;
  font-size: 14px;
  color: var(--ink-muted);
  line-height: 1.62;
}
.terms-row dd b { color: var(--ink); font-weight: 550; }
.terms-row.caution dt { color: var(--signal-warn); }

.price-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 1px;
  background: var(--engrave);
  border: 1px solid var(--engrave-hi);
  box-shadow: 0 0 0 1px rgba(249,115,22,0.14), 0 30px 90px -50px rgba(249,115,22,0.55);
}
@media (max-width: 880px) { .price-grid { grid-template-columns: 1fr; } }

.price-main {
  background: linear-gradient(180deg, #14151b, #0d0e12);
  padding: clamp(28px, 4vw, 44px);
}
.price-tag {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 6px 0 4px;
}
.price-tag .amount {
  font-family: var(--f-display);
  font-size: clamp(3.6rem, 9vw, 5.6rem);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--phosphor);
  text-shadow: 0 0 34px rgba(249,115,22,0.4);
  font-variant-numeric: tabular-nums;
}
.price-tag .once {
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.price-sub { color: var(--ink-muted); font-size: 15px; margin-top: 10px; max-width: 44ch; }

.includes {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 11px;
}
.includes li {
  display: flex;
  gap: 11px;
  font-size: 14.6px;
  color: var(--ink-muted);
  align-items: flex-start;
}
.includes li .k { color: var(--signal-ok); font-family: var(--f-mono); font-size: 12px; line-height: 1.6; flex: none; }
.includes li b { color: var(--ink); font-weight: 550; }

.price-side {
  background: var(--panel);
  padding: clamp(26px, 3.4vw, 36px);
  display: grid;
  align-content: start;
  gap: 22px;
}

.meter-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.meter-head b {
  color: var(--phosphor-hot);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.meter {
  margin-top: 10px;
  height: 10px;
  background: #0a0b0f;
  border: 1px solid var(--engrave);
  display: flex;
  gap: 2px;
  padding: 2px;
}
.meter i {
  flex: 1;
  background: #1c1e26;
  transition: background 0.5s;
}
.meter i.lit { background: var(--phosphor); box-shadow: 0 0 6px rgba(249,115,22,0.6); }
.meter-note { margin-top: 10px; font-size: 12.6px; color: var(--ink-faint); }

.after {
  border: 1px solid var(--engrave);
  background: #0a0b0f;
  padding: 18px;
}
.after .chan { margin-bottom: 10px; display: block; }
.after .then {
  font-family: var(--f-display);
  font-size: 1.5rem;
  color: var(--ink);
}
.after .then span { color: var(--ink-faint); font-size: 0.85rem; font-family: var(--f-mono); }
.after p { font-size: 13.4px; color: var(--ink-muted); margin-top: 9px; }

.maths {
  border: 1px solid rgba(249,115,22,0.3);
  background: var(--phosphor-wash);
  padding: 16px 18px;
  font-family: var(--f-mono);
  font-size: 12.8px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  display: grid;
  gap: 5px;
}
.maths div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
}
.maths b { color: var(--phosphor-hot); font-weight: 500; white-space: nowrap; }
.maths .rule { height: 1px; background: rgba(249,115,22,0.28); margin: 5px 0; display: block; }

/* Numbered plate -- an engraved instrument label, and the licence number is
   real information: they are issued in the order they are claimed. */
.plate {
  border: 1px solid var(--engrave);
  background: linear-gradient(160deg, #12131a, #0a0b0f);
  padding: 18px;
  text-align: center;
}
.plate .chan { display: block; margin-bottom: 12px; }
.plate .no {
  font-family: var(--f-display);
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--phosphor);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.plate .no small {
  color: var(--ink-faint);
  font-size: 0.9rem;
  font-family: var(--f-mono);
  letter-spacing: 0;
}
.plate p {
  margin-top: 11px;
  font-size: 12.4px;
  color: var(--ink-muted);
  line-height: 1.55;
}

.price-foot {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.price-foot .fine {
  font-size: 12.6px;
  color: var(--ink-faint);
  max-width: 34ch;
}

/* ---------- faq ---------- */

.faq {
  border: var(--rule);
  background: var(--panel);
}
details {
  border-bottom: var(--rule);
}
details:last-child { border-bottom: 0; }
summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 15.5px;
  transition: color 0.15s;
}
summary::-webkit-details-marker { display: none; }
summary:hover { color: var(--phosphor-hot); }
summary .sign {
  margin-left: auto;
  font-family: var(--f-mono);
  color: var(--phosphor);
  font-size: 16px;
  flex: none;
  transition: transform 0.2s;
}
details[open] summary .sign { transform: rotate(45deg); }
details p {
  padding: 0 22px 20px 22px;
  color: var(--ink-muted);
  font-size: 14.6px;
  max-width: 74ch;
}

/* ---------- specs ---------- */

.specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--engrave);
  border: var(--rule);
  font-family: var(--f-mono);
}
.specs div { background: var(--panel); padding: 18px 20px; }

@media (max-width: 900px) {
  .honest, .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .honest, .specs { grid-template-columns: 1fr; }
}

/* Narrow screens: the mono readouts are the only fixed-width things on the
   page, so they are the only ones that need holding in. */
@media (max-width: 460px) {
  /* .chan is nowrap by default so the LED/rule/label row never breaks apart.
     At phone widths the longest label ("What you are buying...") is 325px on
     its own and pushed the page 10px sideways. Let it wrap here only. */
  .terms-head { gap: 10px; padding: 14px 16px; }
  .terms-head .chan { white-space: normal; letter-spacing: 0.14em; }
  .scope-read { font-size: 10px; }
  #scope { width: 84px !important; height: 84px !important; }
  .prompt-line { font-size: 13px; }
  .console-body { padding: 16px; }
  .ticker-track { font-size: 10.5px; gap: 30px; }
}
.specs dt {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 7px;
}
.specs dd { margin: 0; font-size: 14px; color: var(--ink); line-height: 1.5; }
.specs dd small { color: var(--ink-faint); font-size: 12px; display: block; margin-top: 3px; }

/* ---------- closing ---------- */

.closer {
  text-align: center;
  padding-block: clamp(64px, 9vw, 116px);
  background:
    radial-gradient(70% 100% at 50% 100%, rgba(249,115,22,0.13), transparent 68%);
}
.closer h2 { font-size: clamp(2rem, 5vw, 3.3rem); line-height: 1.05; }
.closer p { margin: 18px auto 0; max-width: 52ch; color: var(--ink-muted); }
.closer .btn { margin-top: 32px; }

/* ---------- sticky buy bar ---------- */

.buybar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: rgba(10,11,15,0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--engrave-hi);
  transform: translateY(105%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.buybar.up { transform: none; }
.buybar .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 11px;
}
.buybar .txt {
  font-family: var(--f-mono);
  font-size: 12.4px;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
}
.buybar .txt b { color: var(--phosphor-hot); font-weight: 500; }
.buybar .btn { margin-left: auto; flex: none; }
@media (max-width: 560px) {
  .buybar .txt span { display: none; }
}

/* ---------- footer ---------- */

footer {
  border-top: var(--rule);
  padding-block: 34px 96px;
  background: var(--ground-deep);
}
.foot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 32px;
  align-items: center;
  font-size: 12.8px;
  color: var(--ink-faint);
}
.foot-grid .brand { margin-right: auto; }
footer .legal {
  margin-top: 20px;
  font-size: 11.8px;
  color: var(--ink-faint);
  max-width: 78ch;
  line-height: 1.65;
}

/* ---------- reveal on scroll ---------- */

.rv {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.rv.seen { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .rv { opacity: 1; transform: none; }
  .ticker-track { animation: none; }
}