/* ==================================================================
 * WeLoveMining Pool — shared stylesheet.
 *
 * One file for the whole site. Every page is built from the same layout
 * and the same tokens, so nothing drifts between them.
 *
 * The rule that outranks aesthetics here: ORANGE IS NEVER A STATUS
 * COLOUR. Brand orange marks WeLoveMining's own surfaces and nothing
 * else; machine and network health use --ok / --warn / --bad, which
 * share no hue with it. On a product people check at 2am to find out
 * whether a machine is down, "that panel is orange" must never be
 * confusable with "something is wrong".
 * ================================================================== */
/*
 * WeLoveMining Pool — public site.
 *
 * Single file by decision: every style, script and graphic is inline so there
 * are no relative asset paths to go missing on a static host. The only external
 * request is the Google Fonts stylesheet, and every face has a real fallback.
 *
 * The palette is the product's own token set. One rule outranks aesthetics
 * here: ORANGE IS NEVER A STATUS COLOUR. Brand orange marks WeLoveMining's own
 * surfaces; machine and network health use --ok / --warn / --bad, which share no
 * hue with it, so "that panel is orange" can never read as "something is wrong".
 */
:root {
  --void: #08090a;
  --panel: #101215;
  --panel-2: #171a1e;
  --panel-3: #1e2227;
  --line: #232830;
  --line-bright: #2f363f;
  --steel: #3f4b53;

  --text: #e9ebed;
  --text-2: #9aa2aa;
  --text-3: #6d767f;

  --accent: #ff8400;
  --accent-deep: #de6e00;
  --accent-wash: #2a1a06;

  --ok: #2fbf71;
  --ok-wash: #0d2419;
  --warn: #e8c227;
  --warn-wash: #2a2408;
  --bad: #f0554d;
  --bad-wash: #2c1110;
  --info: #3d8be8;
  --info-wash: #0d1b2c;

  --display: "Rajdhani", "Oswald", "Arial Narrow", system-ui, sans-serif;
  --sans: "Barlow", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --mono: "Share Tech Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --wrap: 1360px;
  --r: 3px;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--void);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

img { max-width: 100%; }
[hidden] { display: none !important; }

h1, h2, h3, .num { font-family: var(--display); text-wrap: balance; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
p { margin: 0; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #140a00; padding: 10px 16px; font-weight: 600;
}
.skip:focus { left: 8px; top: 8px; }

/* ---------- shell ---------- */

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

.rule { border-top: 1px solid var(--line); }

section { scroll-margin-top: 72px; }

.sec { padding-block: 64px; }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}

.sec h2 { font-size: clamp(26px, 4vw, 38px); }

.lede {
  margin-top: 12px;
  max-width: 68ch;
  color: var(--text-2);
  font-size: 16px;
}

.sec-head { margin-bottom: 30px; }

/* ---------- header ---------- */

header.top {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 40;
  background: rgba(8, 9, 10, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.top-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 58px;
  padding-block: 8px;
  flex-wrap: wrap;
}

.mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.mark .emblem {
  width: 46px; aspect-ratio: 320 / 223; flex: none;
  background: url("/assets/emblem.png") center / contain no-repeat;
}
.mark .words {
  font-family: var(--display); font-weight: 700; font-size: 19px;
  letter-spacing: -0.01em; line-height: 1; white-space: nowrap;
}
.mark .words b { color: var(--accent); font-weight: 700; }
/* "Pool" distinguishes this from the hardware business at welovemining.co.za. */
.mark .words .pool { color: var(--text-3); font-weight: 600; }
.footer-mark .emblem { width: 40px; }
.footer-mark .words { font-size: 16px; }

nav.main { display: flex; gap: 20px; margin-left: auto; flex-wrap: wrap; }
nav.main a {
  font-size: 13.5px; color: var(--text-2); text-decoration: none;
  padding-block: 4px; border-bottom: 1px solid transparent;
}
nav.main a:hover { color: var(--text); border-bottom-color: var(--accent); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--display); font-weight: 600; font-size: 15px;
  padding: 9px 18px; border-radius: var(--r);
  border: 1px solid var(--line-bright); background: var(--panel-2); color: var(--text);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--panel-3); border-color: var(--steel); }
.btn.primary {
  background: var(--accent); border-color: var(--accent); color: #140a00;
}
.btn.primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn.lg { font-size: 17px; padding: 12px 24px; }

/* ---------- preview notice ---------- */

.notice {
  background: var(--info-wash);
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
  font-size: 13px;
}
.notice .wrap { display: flex; gap: 10px; align-items: baseline; padding-block: 9px; flex-wrap: wrap; }
.notice strong { color: var(--info); font-weight: 600; }

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

.hero { padding-block: 56px 0; }

.hero h1 {
  font-size: clamp(34px, 6.4vw, 62px);
  max-width: 17ch;
  line-height: 1.02;
}
.hero h1 em { font-style: normal; color: var(--accent); }

.hero p.sub {
  margin-top: 18px; max-width: 60ch; color: var(--text-2); font-size: 17px;
}

.hero-cta { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }

/* live readout strip — the farm wall display */

.readout {
  margin-top: 46px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  overflow: hidden;
}

.readout-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-3);
}

.dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); flex: none;
}
.dot.live { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-wash); }
.dot.sample { background: var(--info); box-shadow: 0 0 0 3px var(--info-wash); }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.stat {
  padding: 18px 16px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.stat:last-child { border-right: 0; }

.stat .k {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--text-3);
}
.stat .v {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(24px, 3.2vw, 32px); line-height: 1.1; margin-top: 6px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.stat .u { font-size: 0.55em; color: var(--text-2); margin-left: 3px; }
.stat .n { font-size: 12px; color: var(--text-3); margin-top: 3px; }

.trace { display: block; width: 100%; height: 108px; }

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

.ticker-wrap { border-top: 1px solid var(--line); background: var(--panel); }

.ticker {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--line);
  margin-inline: -1px;
}

.tick {
  background: var(--panel);
  padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  flex: 1 1 178px;
  min-width: 0;
}

.tick .body { min-width: 0; flex: 1; }

.tick .sym {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--text-3);
}
.tick .price {
  font-family: var(--display); font-weight: 600; font-size: 20px; line-height: 1.15;
  font-variant-numeric: tabular-nums; margin-top: 2px;
  overflow-wrap: anywhere;
}
.tick .delta {
  font-family: var(--mono); font-size: 12px; margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
/* Direction only. Brand orange is never used to signal a state. */
.tick .delta.up { color: var(--ok); }
.tick .delta.down { color: var(--bad); }
.tick .delta.flat { color: var(--text-3); }

.tick svg { width: 58px; height: 26px; flex: none; }

.ticker-note {
  flex: 1 1 100%; background: var(--panel);
  padding: 13px 16px; color: var(--text-3); font-size: 13px;
}
.ticker-note.stale { color: var(--warn); }

/* ---------- panels & tables ---------- */

.panel {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
}

.scroll-x { overflow-x: auto; }

table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: 14px; }

th, td {
  text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
th {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-3); font-weight: 400;
  background: var(--panel-2); position: sticky; top: 0;
}
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.mono { font-family: var(--mono); font-size: 13px; }

tr.ours td { background: var(--accent-wash); }
tr.ours td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
tr.ours td strong { color: var(--accent); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  padding: 2px 8px; border-radius: 2px; text-transform: uppercase;
}
.chip.ok { background: var(--ok-wash); color: var(--ok); }
.chip.warn { background: var(--warn-wash); color: var(--warn); }
.chip.bad { background: var(--bad-wash); color: var(--bad); }
.chip.neutral { background: var(--panel-3); color: var(--text-2); }

.foot-note { margin-top: 12px; font-size: 12.5px; color: var(--text-3); max-width: 76ch; }

/* ---------- tiers ---------- */

.tiers { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); overflow: hidden; }

.tier { background: var(--panel); padding: 20px 18px; display: flex; flex-direction: column; gap: 10px; }
.tier.highlight { background: var(--accent-wash); }
.tier h3 { font-size: 20px; }
.tier .rate {
  font-family: var(--display); font-weight: 700; font-size: 32px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tier.highlight .rate { color: var(--accent); }
.tier .req {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-3);
}
.tier p { font-size: 13.5px; color: var(--text-2); }
.tier ul { margin: 0; padding-left: 16px; font-size: 13px; color: var(--text-2); }

/* ---------- connect builder ---------- */

.connect { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .connect { grid-template-columns: 350px minmax(0, 1fr); } }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-3);
}
.field input, .field select {
  font-family: var(--sans); font-size: 14.5px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line-bright); border-radius: var(--r);
  padding: 9px 11px; width: 100%;
}
.field input:focus, .field select:focus { border-color: var(--accent); }

.seg { display: flex; border: 1px solid var(--line-bright); border-radius: var(--r); overflow: hidden; }
.seg button {
  flex: 1; background: var(--panel-2); border: 0; color: var(--text-2);
  font-family: var(--display); font-weight: 600; font-size: 14px;
  padding: 9px 8px; cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--accent); color: #140a00; }

.out { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }

.out-row {
  background: var(--panel); padding: 12px 14px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.out-row .k {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-3); width: 96px; flex: none;
}
.out-row .v {
  font-family: var(--mono); font-size: 14px; color: var(--text);
  flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere;
}
.copy {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--panel-3); color: var(--text-2);
  border: 1px solid var(--line-bright); border-radius: 2px;
  padding: 5px 10px; cursor: pointer; flex: none;
}
.copy:hover { color: var(--text); border-color: var(--steel); }
.copy.done { color: var(--ok); border-color: var(--ok); }

.hint { font-size: 13px; color: var(--text-3); margin-top: 10px; }
.hint code { font-family: var(--mono); color: var(--text-2); }

/* ---------- misc blocks ---------- */

.cols { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 18px; }
.card h3 { font-size: 19px; margin-bottom: 8px; }
.card p { font-size: 14px; color: var(--text-2); }

.kv { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
/* Stacked variant, for rows whose value is a phrase rather than a figure. */
.kv.stack { display: block; }
.kv.stack .k { display: block; font-size: 12px; }
.kv.stack .v { display: block; margin-top: 3px; color: var(--text); }
.kv:last-child { border-bottom: 0; }
.kv .k { color: var(--text-2); }
.kv .v { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.cta { background: var(--panel); }
.cta .wrap { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; padding-block: 52px; }
.cta h2 { font-size: clamp(25px, 3.6vw, 34px); max-width: 20ch; }

footer { color: var(--text-3); font-size: 13px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; padding-block: 38px; }
footer nav { display: flex; gap: 40px; flex-wrap: wrap; }
footer h4 {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-2); margin: 0 0 10px; font-weight: 400;
}
footer nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
footer a { text-decoration: none; }
footer a:hover { color: var(--text); }

.legal { border-top: 1px solid var(--line); }
.legal .wrap { padding-block: 18px; font-size: 12px; color: var(--text-3); }

/* ==================================================================
 * Motion
 *
 * The page powers up like a rack coming online rather than sliding in
 * like a marketing template: a scan across the hero, figures settling
 * into place the way a gauge does, and a trace that draws itself.
 *
 * Two rules hold throughout. Nothing animates from invisible on load —
 * text is opaque in CSS and only its position moves, so the first frame
 * a reader or a link preview gets is already readable. And every one of
 * these is switched off under prefers-reduced-motion at the bottom of
 * this block.
 * ================================================================== */

@keyframes wlm-rise {
  from { transform: translateY(14px); }
  to   { transform: none; }
}

@keyframes wlm-scan {
  0%   { transform: translateY(-2px); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(var(--scan-distance, 520px)); opacity: 0; }
}

@keyframes wlm-drift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 72px 72px, 0 0; }
}

@keyframes wlm-breathe {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.06); }
}

@keyframes wlm-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(47, 191, 113, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(47, 191, 113, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 191, 113, 0); }
}

@keyframes wlm-sheen {
  from { transform: translateX(-130%) skewX(-18deg); }
  to   { transform: translateX(240%) skewX(-18deg); }
}

@keyframes wlm-flash-up {
  from { background-color: var(--ok-wash); }
  to   { background-color: transparent; }
}

@keyframes wlm-flash-down {
  from { background-color: var(--bad-wash); }
  to   { background-color: transparent; }
}

@keyframes wlm-slide-in {
  from { transform: translateX(22px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* --- hero: ambient ground ------------------------------------------ */

.hero { position: relative; overflow: hidden; }

/* A slow-drifting technical grid, kept faint enough to read as texture
   rather than decoration. */
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto;
  height: 150%;
  pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px, 72px 72px;
  opacity: 0.35;
  mask-image: radial-gradient(120% 80% at 18% 0%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 80% at 18% 0%, #000 0%, transparent 72%);
  animation: wlm-drift 46s linear infinite;
}

/* A single warm pool of light behind the headline, breathing slowly. */
.hero::after {
  content: "";
  position: absolute;
  top: -180px; left: -140px;
  width: 620px; height: 620px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 132, 0, 0.11) 0%, transparent 62%);
  animation: wlm-breathe 11s ease-in-out infinite;
}

.hero .wrap { position: relative; z-index: 1; }

/* The scan line that sweeps once as the page loads. */
.scanline {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  animation: wlm-scan 1400ms cubic-bezier(0.22, 0.61, 0.36, 1) 120ms 1 both;
}

/* --- boot sequence -------------------------------------------------
   Transform only. The text is opaque from the first frame; it settles
   rather than appearing. */

.boot { animation: wlm-rise 620ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.boot-1 { animation-delay: 60ms; }
.boot-2 { animation-delay: 150ms; }
.boot-3 { animation-delay: 240ms; }
.boot-4 { animation-delay: 340ms; }

/* --- readout ------------------------------------------------------- */

.stat { position: relative; transition: background-color 180ms ease; }
.stat::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.stat:hover { background: var(--panel-2); }
.stat:hover::after { transform: scaleX(1); }

.stat .v { transition: color 200ms ease; }

.dot.live { animation: wlm-pulse-ring 2.4s ease-out infinite; }

/* The trace draws itself once the figures have settled. */
#trace-line {
  stroke-dasharray: var(--trace-length, 2400);
  stroke-dashoffset: var(--trace-length, 2400);
  animation: wlm-draw 1500ms cubic-bezier(0.33, 0.9, 0.44, 1) 420ms both;
}
@keyframes wlm-draw { to { stroke-dashoffset: 0; } }

#trace-fill { opacity: 0; animation: wlm-fade-in 900ms ease 1000ms both; }
#trace-dot  { opacity: 0; animation: wlm-fade-in 500ms ease 1750ms both; }
@keyframes wlm-fade-in { to { opacity: 1; } }

/* --- promotional banners ------------------------------------------- */

.banner-strip:not(:empty) { border-bottom: 1px solid var(--line); }
.banners { display: flex; flex-direction: column; }
.banners:empty { display: none; }

.banner {
  position: relative;
  overflow: hidden;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, var(--accent-wash), transparent 52%);
  padding: 9px 0 9px 14px;
  box-shadow: inset 3px 0 0 var(--accent);
  animation: wlm-rise 520ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.banner:last-child { border-bottom: 0; }

/* A slow sheen crossing the banner, so it reads as live without blinking. */
.banner::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 42%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.055), transparent);
  animation: wlm-sheen 5.5s ease-in-out infinite;
}

.banner .tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent); flex: none;
}
.banner .msg { flex: 1 1 18rem; min-width: 0; font-size: 13.5px; }
.banner .msg strong { font-family: var(--display); font-size: 15px; }
.banner .msg span { color: var(--text-2); }
.banner .dismiss {
  background: none; border: 0; color: var(--text-2); cursor: pointer;
  font-size: 17px; line-height: 1; padding: 2px 8px; flex: none;
}
.banner .dismiss:hover { color: var(--text); }

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

.btn { position: relative; overflow: hidden; }
.btn.primary::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 0; width: 38%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: translateX(-130%) skewX(-18deg);
  pointer-events: none;
}
.btn.primary:hover::after { animation: wlm-sheen 850ms ease-out; }
.btn:active { transform: translateY(1px); }

/*
 * A call to action whose destination is not live yet. Kept legible and clearly
 * still a button — the offer is the point of the page — but visibly not ready,
 * so nobody clicks expecting a sign-up form.
 */
.btn.pending {
  background: var(--panel-2);
  border-color: var(--line-bright);
  border-style: dashed;
  color: var(--text-2);
  cursor: default;
}
.btn.pending::after { content: none; }
.btn.pending:hover { background: var(--panel-3); }
a.pending:not(.btn) { color: var(--text-3); cursor: default; }

/* --- tables and cards ---------------------------------------------- */

tbody tr { transition: background-color 160ms ease; }
tbody tr:hover td { background: var(--panel-2); }
tr.ours:hover td { background: var(--accent-wash); }

tr.fresh td { animation: wlm-flash-up 2.2s ease-out both; }

.card, .tier {
  transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 220ms ease;
}
.card:hover { transform: translateY(-3px); border-color: var(--line-bright); }

.tier { position: relative; }
.tier::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.tier:hover::before { transform: scaleX(1); }
.tier:hover { transform: translateY(-3px); }

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

.tick { transition: background-color 200ms ease; }
.tick:hover { background: var(--panel-2); }
.tick.up   { animation: wlm-flash-up 1.6s ease-out; }
.tick.down { animation: wlm-flash-down 1.6s ease-out; }

/* --- scroll reveal --------------------------------------------------
   The pre-animation state is applied by script, never in this file, so a
   page without JavaScript renders every section visible. */

[data-revealed="pending"] {
  opacity: 0;
  transform: translateY(18px);
}
[data-revealed="shown"] {
  opacity: 1;
  transform: none;
  transition: opacity 620ms ease, transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- block-found toast ---------------------------------------------- */

.toast-stack {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex; flex-direction: column; gap: 10px;
  max-width: min(360px, calc(100vw - 32px));
}

.toast {
  border: 1px solid var(--line-bright);
  border-left: 3px solid var(--ok);
  border-radius: var(--r);
  background: var(--panel-2);
  padding: 12px 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  animation: wlm-slide-in 380ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.toast .t {
  font-family: var(--display); font-weight: 600; font-size: 15px;
}
.toast .b { font-size: 13px; color: var(--text-2); margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after, .scanline,
  .banner, .banner::after, .btn.primary::after,
  .dot.live, #trace-line, #trace-fill, #trace-dot,
  .boot, .toast, .tick.up, .tick.down, tr.fresh td {
    animation: none !important;
  }
  #trace-line { stroke-dashoffset: 0; }
  #trace-fill, #trace-dot { opacity: 1; }
  .card:hover, .tier:hover { transform: none; }
  [data-revealed] { opacity: 1 !important; transform: none !important; }
}

/* ==================================================================
 * Multi-page chrome
 * ================================================================== */

/* --- navigation ----------------------------------------------------- */

nav.main a.here {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.nav-toggle {
  display: none;
  margin-left: auto;
  background: var(--panel-2);
  border: 1px solid var(--line-bright);
  border-radius: var(--r);
  color: var(--text);
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  nav.main {
    order: 3;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    margin-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 6px;
  }
  nav.main[hidden] { display: none; }
  nav.main a {
    padding: 11px 2px;
    border-bottom: 1px solid var(--line);
    font-size: 15px;
  }
  .top-inner > .btn { order: 2; }
}

/* --- page header ---------------------------------------------------- */

.page-head {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  padding-block: 54px 42px;
}

.page-head::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto;
  height: 220%;
  pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px, 72px 72px;
  opacity: 0.3;
  mask-image: radial-gradient(110% 90% at 12% 0%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(110% 90% at 12% 0%, #000 0%, transparent 70%);
  animation: wlm-drift 52s linear infinite;
}

.page-head .wrap { position: relative; z-index: 1; }

.page-head h1 {
  font-size: clamp(30px, 5vw, 50px);
  max-width: 20ch;
  line-height: 1.04;
}
.page-head h1 em { font-style: normal; color: var(--accent); }

.page-head .lede { margin-top: 14px; font-size: 17px; }

.crumbs {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 12px;
}
.crumbs a { color: var(--text-3); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs span { color: var(--line-bright); margin: 0 7px; }

/* --- prose, for the long-form pages --------------------------------- */

.prose { max-width: 70ch; }
.prose h2 {
  font-size: clamp(22px, 3vw, 29px);
  margin-top: 40px;
  margin-bottom: 12px;
}
.prose h3 {
  font-size: 19px;
  margin-top: 28px;
  margin-bottom: 8px;
}
.prose p { margin-bottom: 14px; color: var(--text-2); }
.prose p strong { color: var(--text); }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 20px; color: var(--text-2); }
.prose li { margin-bottom: 7px; }
.prose a { color: var(--accent); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 34px 0; }
.prose code {
  font-family: var(--mono);
  font-size: 0.92em;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 1px 5px;
}
.prose blockquote {
  margin: 0 0 16px;
  padding: 2px 0 2px 16px;
  border-left: 2px solid var(--accent);
  color: var(--text-2);
}

/* --- accordion ------------------------------------------------------- */

.faq { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }

.faq details { border-bottom: 1px solid var(--line); background: var(--panel); }
.faq details:last-child { border-bottom: 0; }

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 18px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background-color 160ms ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--panel-2); }

.faq summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--mono);
  font-size: 18px;
  color: var(--accent);
  transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.faq details[open] summary::after { transform: rotate(45deg); }

.faq .answer { padding: 0 18px 18px; color: var(--text-2); font-size: 14.5px; max-width: 74ch; }
.faq .answer p { margin-bottom: 11px; }
.faq .answer p:last-child { margin-bottom: 0; }

/* --- calculator ------------------------------------------------------ */

.calc { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .calc { grid-template-columns: 360px minmax(0, 1fr); } }

.calc-out {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  overflow: hidden;
}

.calc-cell { background: var(--panel); padding: 17px 16px; }
.calc-cell .k {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-3);
}
.calc-cell .v {
  font-family: var(--display); font-weight: 600; font-size: 26px;
  margin-top: 5px; font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.calc-cell .n { font-size: 12px; color: var(--text-3); margin-top: 3px; }
.calc-cell.accent .v { color: var(--accent); }

/* --- step list ------------------------------------------------------- */

.steps { counter-reset: step; display: flex; flex-direction: column; gap: 1px;
         background: var(--line); border: 1px solid var(--line);
         border-radius: var(--r); overflow: hidden; }

.step {
  background: var(--panel);
  padding: 20px 20px 20px 62px;
  position: relative;
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 20px; top: 20px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent);
}
.step h3 { font-size: 18px; margin-bottom: 6px; }
.step p { font-size: 14px; color: var(--text-2); }

/* --- comparison marks ------------------------------------------------ */

.mark-yes { color: var(--ok); font-family: var(--mono); }
.mark-no  { color: var(--text-3); font-family: var(--mono); }

/* --- misc ------------------------------------------------------------ */

.lead-stat {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(38px, 7vw, 64px); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.lead-stat .u { font-size: 0.42em; color: var(--text-2); margin-left: 5px; }

.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }

.split { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 44px; } }

.muted { color: var(--text-3); }
.nowrap { white-space: nowrap; }