/* arcade.css — the cabinet skin. Loads AFTER site.css and deliberately overrides it.
 *
 * Colton, round 3: "the panels and ui are flat rectangles, they should feel like arcade
 * cabinets." A cabinet reads as a cabinet because of four things, and not one of them is
 * a border:
 *   1. a bevel — the top edge catches the room light, the bottom edge goes black;
 *   2. a laminate — the surface is never one flat colour;
 *   3. screws — where two panels actually meet;
 *   4. screens set BELOW the bezel, not painted on top of it.
 * Everything in this file is one of those four.
 */

:root {
  --hi: rgba(240,232,208,.15);      /* the lamp hitting a top edge */
  --hi-soft: rgba(240,232,208,.08);
  --seam: rgba(0,0,0,.55);          /* the dark line where two panels meet */
  --plate: linear-gradient(180deg, #1b241d 0%, #151d18 48%, #0f1613 100%);
  /* Two very low-contrast weaves. Enough that the eye reads texture instead of a filled
     rectangle; not enough for anyone to notice a pattern. */
  --laminate:
    repeating-linear-gradient(112deg, rgba(255,255,255,.015) 0 3px, transparent 3px 8px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0 1px, transparent 1px 4px);
  --screw:
    radial-gradient(circle, #4a5147 0 32%, #171c17 34% 46%, rgba(0,0,0,.55) 48% 58%, transparent 60%);
}

/* ── the instruction cabinet ──────────────────────────────────────────── */
.cab {
  position: relative; margin-top: 32px; border: 0; border-radius: var(--r-3);
  background: var(--laminate), var(--plate);
  box-shadow:
    inset 0 1px 0 var(--hi),
    inset 0 0 0 1px var(--seam),
    inset 0 -3px 0 rgba(0,0,0,.62),         /* the lip underneath */
    inset 4px 0 8px -5px rgba(0,0,0,.7),
    inset -4px 0 8px -5px rgba(0,0,0,.7),
    0 26px 52px -20px rgba(0,0,0,.9);       /* it stands off the wall */
}
.cab::before {                               /* four screws, one per corner */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 3;
  background-image: var(--screw), var(--screw), var(--screw), var(--screw);
  background-size: 15px 15px;
  background-position: 9px 9px, right 9px top 9px, 9px bottom 9px, right 9px bottom 9px;
  background-repeat: no-repeat;
}
/* the marquee strip: a lit header panel, not a coloured bar */
.cab .cab-head {
  position: relative; z-index: 2;
  padding: 15px 46px; border: 0; border-radius: var(--r-3) var(--r-3) 0 0;
  background:
    linear-gradient(180deg, rgba(242,169,59,.14), rgba(242,169,59,.03) 58%, transparent),
    repeating-linear-gradient(135deg, #202b22 0 10px, #1a241d 10px 20px);
  box-shadow:
    inset 0 1px 0 rgba(255,222,160,.22),
    inset 0 -1px 0 rgba(0,0,0,.6);
  font: 800 15.5px/1.35 var(--type); letter-spacing: .14em;
  text-transform: uppercase; color: #ffca79;
  text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 16px rgba(242,169,59,.45);
}
ol.steps { padding: 26px 24px 28px; }
ol.steps li { padding: 0 0 26px 66px; }
ol.steps li:last-child { padding-bottom: 6px; }
ol.steps li::before {                        /* a lit numeral recessed into the panel */
  width: 44px; height: 44px; top: -3px; border: 0; border-radius: var(--r-1);
  background: linear-gradient(180deg, #0d1410, #121a14);
  color: #b6e084; font: 800 19px/1 var(--type);
  text-shadow: 0 0 12px rgba(120,163,85,.75);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.85),
    inset 0 0 0 1px rgba(120,163,85,.5),
    0 1px 0 var(--hi-soft);
}

/* ── plain cards: control-panel plates bolted to the cabinet ──────────── */
.plain-card {
  position: relative; border: 0; border-radius: var(--r-2); padding: 24px 24px 26px;
  background: var(--laminate), linear-gradient(180deg, #1a231d, #121a15);
  border-left: 3px solid var(--bill);
  box-shadow:
    inset 0 1px 0 var(--hi),
    inset 0 0 0 1px var(--seam),
    inset 0 -2px 0 rgba(0,0,0,.55),
    0 16px 32px -16px rgba(0,0,0,.85);
  transition: transform .18s ease, box-shadow .18s ease;
}
.plain-card:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(240,232,208,.22),
    inset 0 0 0 1px var(--seam),
    inset 0 -2px 0 rgba(0,0,0,.55),
    0 22px 42px -16px rgba(0,0,0,.92);
}
.plain-card h3 { text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 14px rgba(242,169,59,.28); }

/* ── the wall: cameo cards in real frames ─────────────────────────────── */
.pin {
  border: 0; border-radius: var(--r-1); background: #14120b;
  box-shadow:
    inset 0 0 0 1px rgba(240,232,208,.18),
    inset 0 1px 0 rgba(240,232,208,.1),
    0 18px 34px -16px rgba(0,0,0,.9);
  transition: box-shadow .2s ease;
}
.pin:hover {
  box-shadow:
    inset 0 0 0 1px rgba(240,232,208,.32),
    0 24px 44px -16px rgba(0,0,0,.95);
}
.pin .no { border-radius: var(--r-1); box-shadow: 0 4px 12px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.4); }

/* ── the contract slot: cream paper set INTO the cabinet ──────────────── */
.ca-box {
  position: relative; border-radius: var(--r-1);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.35),
    0 0 0 3px #0c120f,
    0 0 0 4px rgba(240,232,208,.15),
    0 14px 28px -14px rgba(0,0,0,.85);
}
.ca-box button, .ca-copy {
  border-radius: var(--r-1);
  box-shadow: 0 3px 0 rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.14);
  transition: transform .1s ease, box-shadow .1s ease;
}
.ca-box button:active, .ca-copy:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.14);
}

/* ── the drive-in screen: glass below the bezel ───────────────────────── */
.screen {
  border: 0; border-radius: var(--r-3);
  box-shadow:
    inset 0 0 0 2px #0a0f0c,
    inset 0 0 0 5px #1e2620,
    inset 0 0 0 6px rgba(240,232,208,.16),
    inset 0 10px 34px rgba(0,0,0,.8),
    inset 0 -8px 26px rgba(0,0,0,.7),
    0 24px 48px -20px rgba(0,0,0,.9);
}
.screen::before {                            /* the sheen sitting on the glass */
  content: ""; position: absolute; inset: 6px; border-radius: calc(var(--r-3) - 2px);
  pointer-events: none; z-index: 2;
  background: linear-gradient(196deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.02) 22%, transparent 46%);
}

/* ── buttons you can actually press ───────────────────────────────────── */
.btn { border-radius: var(--r-1); position: relative; }
.btn-primary {
  background: linear-gradient(180deg, #ffc65f 0%, #f2a93b 48%, #dd9426 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.2),
    0 4px 0 #8c5b13,
    0 14px 26px -12px rgba(242,169,59,.6);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #ffd27c, #f7b44c 48%, #e29c2b);
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 1px 0 #8c5b13;
}
.btn-ghost {
  background: var(--laminate), linear-gradient(180deg, #1e2822, #141c17);
  border: 2px solid rgba(234,223,196,.42);
  box-shadow: inset 0 1px 0 var(--hi), 0 4px 0 rgba(0,0,0,.55), 0 12px 24px -14px rgba(0,0,0,.9);
}
.btn-ghost:hover {
  border-color: var(--cream);
  background: var(--laminate), linear-gradient(180deg, #243029, #18201a);
}
.btn-ghost:active {
  transform: translateY(3px);
  box-shadow: inset 0 1px 0 var(--hi), 0 1px 0 rgba(0,0,0,.55);
}
.menu-btn { box-shadow: inset 0 1px 0 var(--hi), 0 3px 0 rgba(0,0,0,.5); }
.menu-btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 var(--hi), 0 1px 0 rgba(0,0,0,.5); }

/* ── the swap shell is a cabinet too ──────────────────────────────────── */
.swap-shell {
  border: 0; border-radius: var(--r-3); position: relative;
  background: var(--laminate), var(--plate);
  box-shadow:
    inset 0 1px 0 var(--hi), inset 0 0 0 1px var(--seam),
    inset 0 -3px 0 rgba(0,0,0,.62), 0 26px 52px -20px rgba(0,0,0,.9);
}
.swap-head {
  border: 0; border-radius: var(--r-3) var(--r-3) 0 0; padding: 14px 20px;
  background:
    linear-gradient(180deg, rgba(242,169,59,.14), rgba(242,169,59,.03) 58%, transparent),
    repeating-linear-gradient(135deg, #202b22 0 10px, #1a241d 10px 20px);
  box-shadow: inset 0 1px 0 rgba(255,222,160,.22), inset 0 -1px 0 rgba(0,0,0,.6);
  color: #ffc165; text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 16px rgba(242,169,59,.45);
}

/* ── the contract-address vs recovery-phrase panel (buy.html) ─────────
   Colour does the teaching here before anyone reads a word: green plate =
   public and safe to paste, red plate = secret and never leaves paper. */
.two-up {
  display: grid; gap: 1px; padding: 1px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  background: rgba(240,232,208,.12);
}
.tu { padding: 22px 22px 24px; background: #101813; }
.tu h3 { margin: 0; font: 800 20.5px/1.3 var(--type); color: #f6eed6; }
.tu p { margin: 10px 0 0; font-size: 17.5px; line-height: 1.62; color: #e2d9c1; max-width: 52ch; }
.tu-tag {
  margin: 0 0 10px !important; font: 800 15px/1 var(--type) !important;
  letter-spacing: .16em; text-transform: uppercase;
}
.tu-ok { box-shadow: inset 4px 0 0 var(--bill); }
.tu-ok .tu-tag { color: #9ecb6e !important; }
.tu-no { box-shadow: inset 4px 0 0 var(--red); background: #150f0d; }
.tu-no .tu-tag { color: #f0806a !important; }
.tu-no h3 { color: #ffd9cf; }
.tu-no b { color: #ffb9a8; }

/* a row of real destination links, sized like buttons so a thumb can hit them */
.links-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 13px !important; }
.lnk {
  display: inline-flex; align-items: center; min-height: 44px; padding: 9px 15px;
  border-radius: var(--r-1); font: 700 16px/1.2 var(--type); color: #ffc165;
  background: linear-gradient(180deg, #1c2620, #131a16);
  box-shadow: inset 0 1px 0 var(--hi), inset 0 0 0 1px rgba(242,169,59,.34),
    0 3px 0 rgba(0,0,0,.55);
  text-decoration: none; transition: transform .1s ease, box-shadow .1s ease;
}
.lnk:hover { color: #ffc165; box-shadow: inset 0 1px 0 var(--hi), inset 0 0 0 1px rgba(242,169,59,.7), 0 3px 0 rgba(0,0,0,.55); }
.lnk:active { transform: translateY(3px); box-shadow: inset 0 0 0 1px rgba(242,169,59,.7); }

/* ══════════════════════════════════════════════════════════════════════
   THE BOARD — the live $20 ticker (ticker.js).
   Built as the cabinet's own CRT readout: a recessed glass panel with the
   numbers glowing behind it. The values are whatever DexScreener says they
   are. If they are small, the board shows them small.
   ══════════════════════════════════════════════════════════════════════ */
.board {
  position: relative; margin-top: 30px; border-radius: var(--r-3);
  background: var(--laminate), var(--plate);
  box-shadow:
    inset 0 1px 0 var(--hi), inset 0 0 0 1px var(--seam),
    inset 0 -3px 0 rgba(0,0,0,.62), 0 26px 52px -20px rgba(0,0,0,.9);
}
.board::before {                             /* screws again — same machine */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 4;
  background-image: var(--screw), var(--screw), var(--screw), var(--screw);
  background-size: 15px 15px;
  background-position: 9px 9px, right 9px top 9px, 9px bottom 9px, right 9px bottom 9px;
  background-repeat: no-repeat;
}
.board-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0; padding: 14px 46px; border-radius: var(--r-3) var(--r-3) 0 0;
  background:
    linear-gradient(180deg, rgba(242,169,59,.14), rgba(242,169,59,.03) 58%, transparent),
    repeating-linear-gradient(135deg, #202b22 0 10px, #1a241d 10px 20px);
  box-shadow: inset 0 1px 0 rgba(255,222,160,.22), inset 0 -1px 0 rgba(0,0,0,.6);
  font: 800 15.5px/1.35 var(--type); letter-spacing: .14em;
  text-transform: uppercase; color: #ffca79;
  text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 16px rgba(242,169,59,.45);
}
.board-live { display: inline-flex; align-items: center; gap: 7px; margin-left: auto;
  font-size: 14px; letter-spacing: .14em; color: #9ecb6e; text-shadow: 0 1px 2px rgba(0,0,0,.85); }
.board-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #78a355;
  box-shadow: 0 0 9px #9ecb6e; animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
[data-state="down"] .board-dot { background: var(--red); box-shadow: 0 0 9px var(--red); animation: none; }
[data-state="down"] .board-live { color: #e2917f; }

/* the glass */
.board-glass {
  position: relative; margin: 16px; padding: 22px 20px; border-radius: var(--r-2);
  background:
    radial-gradient(120% 140% at 50% -20%, rgba(120,163,85,.1), transparent 62%),
    linear-gradient(180deg, #0a1009, #070c07);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.85),
    inset 0 0 0 3px #1c241d,
    inset 0 0 0 4px rgba(240,232,208,.12),
    inset 0 8px 26px rgba(0,0,0,.85);
}
.board-glass::after {                        /* CRT scanlines, on the glass only */
  content: ""; position: absolute; inset: 4px; border-radius: var(--r-1); pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px),
    linear-gradient(198deg, rgba(255,255,255,.055) 0%, transparent 34%);
}
.board-price {
  margin: 0; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
}
.board-price .v {
  font: 700 clamp(32px, 6vw, 52px)/1 var(--mono); color: #b9e88a; letter-spacing: -.01em;
  text-shadow: 0 0 22px rgba(158,203,110,.5), 0 2px 0 rgba(0,0,0,.8);
  transition: color .3s ease;
}
.board-price .c { font: 700 19px/1 var(--mono); }
.board-lbl {
  margin: 0 0 10px; font: 800 15px/1 var(--type); letter-spacing: .18em;
  text-transform: uppercase; color: var(--smoke);
}
/* the grid of everything else */
.board-grid {
  display: grid; gap: 1px; margin: 20px 0 0;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  background: rgba(240,232,208,.1);
  border: 1px solid rgba(240,232,208,.1);
}
.board-grid > div { background: #080d08; padding: 13px 14px; }
.board-grid dt {
  margin: 0 0 6px; font: 800 15px/1 var(--type); letter-spacing: .1em;
  text-transform: uppercase; color: var(--smoke);
}
.board-grid dd { margin: 0; font: 700 19px/1.25 var(--mono); color: #f6eed6; word-break: break-word; }
.board-grid dd.up, .board-price .c.up { color: #8fdc63; }
.board-grid dd.down, .board-price .c.down { color: #f0705a; }
/* an empty window is not a direction — it stays neutral and smaller */
.board-grid dd.flat, .board-price .c.flat { color: var(--smoke); font-size: 15px; }
.board-foot {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  margin: 0; padding: 0 20px 18px; font-size: 15px; color: var(--smoke);
}
.board-foot a { color: var(--amber); }
.board-note { margin: 0; padding: 0 20px 18px; font-size: 16px; color: #ffc165; }
[data-state="live"] .board-note { display: none; }

/* ── the honest-math calculator: same glass board, two inputs, three outputs ─ */
.calc-row { display: grid; gap: 14px; padding: 0 20px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.calc-field { display: flex; flex-direction: column; gap: 7px; }
.calc-field span {
  font: 800 14px/1 var(--type); letter-spacing: .1em; text-transform: uppercase; color: var(--smoke);
}
.calc-field input {
  width: 100%; padding: 12px 14px; background: #080d08; color: #f6eed6; font: 700 20px/1.2 var(--mono);
  border: 1px solid rgba(240,232,208,.18); border-radius: 3px;
}
.calc-field input:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.calc-out {
  display: grid; gap: 1px; margin: 18px 20px 0;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  background: rgba(240,232,208,.1); border: 1px solid rgba(240,232,208,.1);
}
.calc-out > div { background: #080d08; padding: 13px 14px; }
.calc-out dt {
  margin: 0 0 6px; font: 800 14px/1.25 var(--type); letter-spacing: .06em;
  text-transform: uppercase; color: var(--smoke);
}
.calc-out dd { margin: 0; font: 700 22px/1.25 var(--mono); color: #b9e88a; word-break: break-word; }
.calc-note { margin: 14px 20px 18px; font-size: 16px; color: var(--smoke); }
[data-state="loading"] .calc-out dd, [data-state="down"] .calc-out dd { color: var(--smoke); }
@media (max-width: 640px) { .calc-row, .calc-out { padding-left: 16px; padding-right: 16px; margin-left: 0; margin-right: 0; } }

/* a value that just moved */
@keyframes tickUp   { 0% { color: #d4ffa8; text-shadow: 0 0 34px rgba(143,220,99,.9); } 100% {} }
@keyframes tickDown { 0% { color: #ffb4a4; text-shadow: 0 0 34px rgba(240,112,90,.9); } 100% {} }
.tick-up   { animation: tickUp .7s ease-out; }
.tick-down { animation: tickDown .7s ease-out; }

/* the compact strip that rides in the hero */
.board.board-mini { margin-top: 24px; max-width: 440px; }
.board.board-mini .board-glass { margin: 12px; padding: 16px; }
.board.board-mini .board-price .v { font-size: clamp(26px, 5vw, 34px); }
.board.board-mini .board-grid { margin-top: 14px; grid-template-columns: repeat(2, 1fr); }

@media (max-width: 720px) {
  ol.steps li { padding-left: 58px; }
  .cab .cab-head, .board-head { padding-left: 20px; padding-right: 20px; }
  .cab::before, .board::before { display: none; }   /* screws are noise at this size */
}
@media (prefers-reduced-motion: reduce) {
  .plain-card:hover, .btn:hover, .btn:active { transform: none; }
  .board-dot { animation: none; }
  .tick-up, .tick-down { animation: none; }
}

/* ── tap targets ──────────────────────────────────────────────────────────
   WCAG 2.2 AA 2.5.8 exempts links sitting INSIDE a sentence — their height is
   set by the surrounding line-height and padding them out would wreck the
   prose. Every link that is NOT inline in a sentence gets a real 44px target. */
.skip { min-height: 44px; display: inline-flex; align-items: center; }
.foot li a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 0; }
.pin .by a, .pin .src a { display: inline-flex; align-items: center; min-height: 44px; }
.board-foot a { display: inline-flex; align-items: center; min-height: 44px; }
.board-foot { padding-bottom: 12px; }

/* ══════════════════════════════════════════════════════════════════════
   THE TOP BAR — round 4.
   Colton: "the taskbar at the top looks very plain with just those little
   texts clicking to each page, we can do better than that by a lot."
   So it becomes the cabinet's control panel: a backlit marquee strip, the
   brand as a lit badge, and the nav as real illuminated buttons with the
   current page switched ON.
   ══════════════════════════════════════════════════════════════════════ */
body.page .top, body.home.solid-nav .top::after {
  background:
    linear-gradient(180deg, rgba(242,169,59,.07), rgba(0,0,0,0) 46%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, #16201b 0%, #101814 100%);
  border-bottom: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,222,160,.16),
    inset 0 -1px 0 rgba(0,0,0,.8),
    0 1px 0 rgba(242,169,59,.22),          /* the lit strip under the marquee */
    0 10px 26px -12px rgba(0,0,0,.9);
}
body.page .top { height: 76px; gap: 24px; }

/* the brand as a stamped badge */
.brand {
  gap: 13px; padding: 7px 14px 7px 10px; border-radius: var(--r-1);
  background: linear-gradient(180deg, #1d2721, #131b16);
  box-shadow:
    inset 0 1px 0 rgba(240,232,208,.16),
    inset 0 0 0 1px rgba(0,0,0,.6),
    0 2px 0 rgba(0,0,0,.6);
  transition: box-shadow .16s ease;
}
.brand:hover {
  box-shadow:
    inset 0 1px 0 rgba(240,232,208,.24),
    inset 0 0 0 1px rgba(242,169,59,.45),
    0 2px 0 rgba(0,0,0,.6);
}
.brand-name { color: #f6eed6; }
.cell { border-color: #c9d2bd; box-shadow: inset 0 0 8px rgba(0,0,0,.7); }

/* the nav as lit cabinet buttons */
body.page .links { gap: 8px; }
body.page .links a {
  position: relative; padding: 14px 16px; border-radius: var(--r-1); border-bottom: 0;
  font: 700 16px/1 var(--type); letter-spacing: .01em; color: #cfd8c6;
  background: linear-gradient(180deg, #19221d, #111815);
  box-shadow:
    inset 0 1px 0 rgba(240,232,208,.1),
    inset 0 0 0 1px rgba(0,0,0,.55),
    0 2px 0 rgba(0,0,0,.6);
  transition: color .16s ease, box-shadow .16s ease, background .16s ease, transform .1s ease;
}
body.page .links a:hover {
  color: #ffd489; background: linear-gradient(180deg, #24302a, #16201b);
  box-shadow:
    inset 0 1px 0 rgba(255,222,160,.2),
    inset 0 0 0 1px rgba(242,169,59,.5),
    0 2px 0 rgba(0,0,0,.6),
    0 0 18px -4px rgba(242,169,59,.45);
}
body.page .links a:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px rgba(242,169,59,.5); }

/* the page you are on is the one that is switched ON */
body.page .links a[aria-current="page"] {
  color: #1d1406;
  background: linear-gradient(180deg, #ffc65f, #eda233);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 2px 0 #8c5b13,
    0 0 22px -5px rgba(242,169,59,.75);
  text-shadow: none;
}
body.page .links a[aria-current="page"]:hover { color: #1d1406; background: linear-gradient(180deg, #ffd27c, #f5ad3c); }

/* the mobile menu button matches the nav buttons */
body.page .menu-btn {
  border: 0; border-radius: var(--r-1); padding: 0 18px; min-height: 46px;
  font: 800 16px/1 var(--type); letter-spacing: .06em; text-transform: uppercase;
  color: #ffd489; background: linear-gradient(180deg, #24302a, #16201b);
  box-shadow:
    inset 0 1px 0 rgba(255,222,160,.18),
    inset 0 0 0 1px rgba(242,169,59,.4),
    0 3px 0 rgba(0,0,0,.65);
}
body.page.menu-open .menu-btn { color: #1d1406; background: linear-gradient(180deg, #ffc65f, #eda233); }

/* ── the phone menu ───────────────────────────────────────────────────────
   Colton, round 7: "the menu could be better on the phone."
   It was a bare list dropped under the bar: small rows, no layer behind it, and
   no way out except finding the MENU key again. Now it is a panel — the page
   dims behind it, the rows are full-width arcade keys at a real thumb size, the
   page you are on is lit like the desktop nav, and tapping anywhere off it
   closes it (ui.js). */
@media (max-width: 979px), (max-aspect-ratio: 19/20) {
  body.page .top { height: 68px; }

  body.page.menu-open::before {
    content: ""; position: fixed; inset: 68px 0 0; z-index: 8;
    background: rgba(6, 10, 8, .62);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  }

  body.page.menu-open .links {
    top: 68px; gap: 10px; padding: 14px 14px 20px; z-index: 9;
    background: linear-gradient(180deg, #16201b, #0e1512);
    border-bottom: 0;
    box-shadow: inset 0 1px 0 rgba(242,169,59,.22), 0 22px 34px -14px rgba(0,0,0,.95);
    max-height: calc(100svh - 68px); overflow-y: auto;
  }
  body.page.menu-open .links a {
    display: flex; align-items: center; min-height: 54px;
    font: 800 19px/1 var(--type); letter-spacing: .04em; text-transform: uppercase;
    padding: 0 18px; border-bottom: 0; border-radius: var(--r-1);
    color: #ffd489; background: linear-gradient(180deg, #24302a, #16201b);
    box-shadow:
      inset 0 1px 0 rgba(255,222,160,.18),
      inset 0 0 0 1px rgba(242,169,59,.34),
      0 3px 0 rgba(0,0,0,.6);
  }
  body.page.menu-open .links a:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px rgba(242,169,59,.5); }
  /* the page you are already on, lit, exactly as the desktop bar does it */
  body.page.menu-open .links a[aria-current="page"] {
    color: #1d1406; background: linear-gradient(180deg, #ffd27c, #f5ad3c);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 3px 0 rgba(0,0,0,.6);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   PANELS, round 4 — figure and ground.
   Colton: "the panel boxes dont look great they could look much better."
   The real fault was not the bevel, it was VALUE. Every panel sat within a
   few percent of the page behind it, so no amount of edge detail could make
   it read as an object sitting in a room. Fix: drop the room, lift the
   furniture, and let the marquee above spill a little amber onto each top
   edge — which is also the colour-theory answer, warm light on cool ground.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --room: #0a1210;          /* the wall, pushed DOWN */
  --panel-hi: #232f27;      /* the panel, pushed UP */
  --panel-lo: #161f1a;
  --plate: linear-gradient(180deg, var(--panel-hi) 0%, #1b241e 46%, var(--panel-lo) 100%);
}
body.page {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(242,169,59,.10), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 2px, transparent 2px 4px),
    var(--room);
}

/* the amber spill from the marquee onto whatever is directly beneath it */
.cab, .board, .swap-shell, .plain-card, .screen {
  --spill: linear-gradient(180deg, rgba(255,190,96,.07) 0%, rgba(255,190,96,.02) 14%, transparent 34%);
}
.cab, .board, .swap-shell {
  background: var(--spill), var(--laminate), var(--plate);
  box-shadow:
    inset 0 1px 0 rgba(255,222,160,.2),       /* warm top edge, not white */
    inset 0 0 0 1px rgba(0,0,0,.6),
    inset 0 -3px 0 rgba(0,0,0,.72),
    inset 5px 0 10px -6px rgba(0,0,0,.75),
    inset -5px 0 10px -6px rgba(0,0,0,.75),
    0 30px 60px -22px rgba(0,0,0,.95);
}
.plain-card {
  background: var(--spill), var(--laminate),
    linear-gradient(180deg, #212c25, #161f1a);
  border-left: 3px solid #6f9a4c;
  box-shadow:
    inset 0 1px 0 rgba(255,222,160,.17),
    inset 0 0 0 1px rgba(0,0,0,.55),
    inset 0 -2px 0 rgba(0,0,0,.6),
    0 18px 36px -16px rgba(0,0,0,.9);
}
.plain-card:hover {
  transform: translateY(-2px);
  border-left-color: #8fc067;
  box-shadow:
    inset 0 1px 0 rgba(255,222,160,.26),
    inset 0 0 0 1px rgba(0,0,0,.55),
    inset 0 -2px 0 rgba(0,0,0,.6),
    0 26px 46px -16px rgba(0,0,0,.95);
}
/* the cards on the wall lift off the darker room too */
.pin { background: #191710; }
.two-up { background: rgba(240,232,208,.14); }
.tu { background: #16201a; }
.tu-no { background: #1d1310; }
.board-grid { background: rgba(240,232,208,.13); }
.board-grid > div { background: #0a110a; }

/* a hairline of light along the very top of each cabinet, like a machine under a marquee */
.cab::after, .board::after, .swap-shell::after {
  content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 1px;
  pointer-events: none; z-index: 4;
  background: linear-gradient(90deg, transparent, rgba(255,201,110,.6), transparent);
}

/* spacing rhythm — round 6, now entirely on the --s-* scale.
   Measured before: 34 / 28,26,30 / 28,68 / 20,30 / 70. Five neighbouring
   values doing one job is what made the page read as stacked boxes rather
   than a composed column. */
.cab { margin-top: var(--s-4); }
ol.steps { padding: var(--s-4) 26px var(--s-4); }
ol.steps li { padding: 0 0 var(--s-4) 68px; }
.plain-grid { gap: var(--s-3); margin-top: var(--s-4); }
section.block { padding: clamp(var(--s-5), 5.5vw, var(--s-6)) 0 0; }
.board { margin-top: var(--s-4); }
.plain-card { padding: 24px 24px var(--s-3); }

/* ══════════════════════════════════════════════════════════════════════
   ROUND 5 — "the white text on that green is still tough to read."
   The ratios already passed AA, so the fault was not contrast, it was HUE.
   Warm cream sitting on a SATURATED green is the muddiest pairing on the
   colour wheel for small text: the two are near-complementary, so the eye
   gets edge vibration instead of a clean figure/ground read.
   The fix is colour theory, not more shadow — pull the saturation out of
   every surface that carries body text, and spend the green where it
   belongs: on accents, spines, numerals and rules, never under a paragraph.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  /* near-neutral, barely green — reads as "dark room", not "green panel" */
  --panel-hi: #23262a;
  --panel-lo: #15181b;
  --plate: linear-gradient(180deg, var(--panel-hi) 0%, #1b1f22 46%, var(--panel-lo) 100%);
  --room: #0b0d0f;
  /* text on those surfaces goes brighter and cooler-neutral so it sits ON the
     panel instead of blending into its hue */
  --ink-hi: #f7f3ea;      /* headings inside panels */
  --ink-body: #e9e4d8;    /* paragraphs inside panels */
}

.plain-card {
  background: var(--spill), var(--laminate), linear-gradient(180deg, #22262a, #15181b);
  border-left: 3px solid #7fb054;
}
.plain-card p { color: var(--ink-body); }
.plain-card h3 { color: #ffc978; }

ol.steps p { color: var(--ink-body); }
ol.steps b { color: var(--ink-hi); }

.tu { background: #17191c; }
.tu p { color: var(--ink-body); }
.tu h3 { color: var(--ink-hi); }
.tu-no { background: #1f1614; }
.tu-no h3 { color: #ffdccf; }

.pin { background: #16151a; }
.pin blockquote { color: var(--ink-hi); }

.board-grid > div { background: #0c0e10; }
.board-glass {
  background:
    radial-gradient(120% 140% at 50% -20%, rgba(150,196,108,.07), transparent 62%),
    linear-gradient(180deg, #0a0c0a, #070807);
}
.screen { background: radial-gradient(90% 120% at 50% 0%, #1e262a, #0b0d0f 70%); }
.screen .sub { color: var(--ink-body); }

/* the page body copy gets the same treatment */
.block .lede, .marquee p { color: #ece6d8; }
.street-copy p { color: #f3eee0; }

/* green now earns its keep as an ACCENT only */
.block h2 .num { color: #8fc45f; }
.foot h3, .marquee .kicker { color: #9fd06f; }
.pin .by { color: #9fd06f; }
ol.steps li::before { color: #bce88c; box-shadow:
  inset 0 2px 5px rgba(0,0,0,.85), inset 0 0 0 1px rgba(143,196,95,.55), 0 1px 0 var(--hi-soft); }

/* ══════════════════════════════════════════════════════════════════════
   ROUND 6 — the finish pass. Everything below is detail craft: states,
   affordances, and the places a page admits it is not done yet.
   Nothing here changes what ticker.js fetches or what street.js moves.
   ══════════════════════════════════════════════════════════════════════ */

/* ── the board before the chain answers ───────────────────────────────
   ticker.js ships the board as data-state="loading" and only swaps to
   "live" or "down" after the fetch. Nothing styled "loading", so for the
   first second or two the board pulsed a green LIVE lamp over six em
   dashes — it claimed to be live before it had a single number, and the
   dashes read as an empty table rather than a pending one. Measured: no
   layout shift when the values land (421px before and after), so this is
   purely about telling the truth while you wait. */
[data-state="loading"] .board-dot {
  background: var(--smoke); box-shadow: none; opacity: .5; animation: none;
}
[data-state="loading"] .board-live { color: var(--smoke); }
[data-state="loading"] .board-price .v, [data-state="loading"] .board-price .c,
[data-state="loading"] .board-grid dd,
[data-state="down"] .board-price .v, [data-state="down"] .board-price .c,
[data-state="down"] .board-grid dd {
  color: var(--smoke); opacity: .38; text-shadow: none;
}
/* only the pending state breathes. A board that is DOWN is not waiting for
   anything, so its placeholders sit still — they just stop pretending to be
   live numbers. */
[data-state="loading"] .board-price .v, [data-state="loading"] .board-grid dd {
  animation: wait 1.5s ease-in-out infinite;
}
@keyframes wait { 0%, 100% { opacity: .38; } 50% { opacity: .16; } }
[data-state="loading"] .board-note { color: var(--smoke); }
/* a value with no trades in the window is not a direction. It stays neutral,
   but 15px next to 19px siblings read as a rendering fault rather than a
   decision — 16px keeps the distinction without looking broken. */
.board-grid dd.flat, .board-price .c.flat { font-size: 16px; letter-spacing: .01em; }

/* ── the copy button actually confirms ────────────────────────────────
   ui.js already swaps the label to "copied", but a word change alone is
   easy to miss on a button you just pushed. It now also turns the button
   green for the 1.8s the label is held. */
.ca-box button.is-copied, .ca-copy.is-copied {
  background: #2a5a22; color: #dcf5c4;
}
.ca-box button.is-failed, .ca-copy.is-failed { background: #6d2418; color: #ffdfd8; }

/* ── focus, hover and press ───────────────────────────────────────────
   The ring was already on every control. What was missing: a ring that
   survives a dark panel AND a cream one, and anchors on the sticky bar so
   a focused target never lands underneath it. */
:focus-visible { outline-offset: 3px; }
.btn:focus-visible, body.page .links a:focus-visible, .lnk:focus-visible,
.menu-btn:focus-visible, .flip:focus-visible {
  outline: 3px solid var(--cream); outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(12,16,14,.9);
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
:target, [id] { scroll-margin-top: 92px; }

/* the wall cards were the only interactive-looking thing with no pointer
   affordance at all — the image sat dead while the frame lit up */
.pin { transition: box-shadow .2s ease, transform .2s ease; }
.pin img { transition: filter .2s ease; }
.pin:hover img { filter: brightness(1.06); }
.flip:active { transform: translateX(-50%) translateY(2px); }

/* ── type finishing ───────────────────────────────────────────────────
   Widows and orphans were the last thing making the prose look typed
   rather than set. `balance` is for short display lines, `pretty` keeps a
   single word off the last line of a paragraph. Both degrade to normal
   wrapping in engines that do not have them. */
.cab-head, .board-head, .swap-head, .plain-card h3, .tu h3, ol.steps b, .screen .on,
.street-copy h2, .marquee .kicker, .foot h3 { text-wrap: balance; }
.plain-card p, ol.steps p, .tu p, .pin blockquote, .street-copy p, .risk, .risk-line,
.board-note, .board-foot { text-wrap: pretty; }

/* ── the footer mark ──────────────────────────────────────────────────
   Same stamped-badge treatment as the brand in the top bar, so the page
   opens and closes on the same object. */
.foot-mark .cell { border-color: #9aa593; box-shadow: inset 0 0 8px rgba(0,0,0,.7); }

/* ── tap targets, round 6 ─────────────────────────────────────────────
   The desktop nav keys measured 38px tall. Padding 11px -> 14px puts them
   at a real 44px without moving the 76px bar. */
.foot-end { min-height: 44px; }