/* ============================================================
   DARK FRONTIER — theme layer over the Hot 'Stacks home.css
   IDENTITY (locked): CRT palette on the ink substrate.
   Blue-black darkness, amber-phosphor line color, blue-white
   phosphor neon wordmark.
   - data-substrate="paper" restores the mothership's light tokens
   - data-palette switches to the exploration palettes
     (ultraviolet / fluorescent / magenta), kept for reference
   ============================================================ */

.df-root {
  /* ── line color: amber phosphor ── */
  --df-accent: #FFB000;
  --on-accent: #10131B;                 /* text on accent-filled chips */
  --magenta: var(--df-accent);
  --magenta-05: color-mix(in srgb, var(--df-accent) 6%, transparent);
  --magenta-07: color-mix(in srgb, var(--df-accent) 8%, transparent);
  --magenta-10: color-mix(in srgb, var(--df-accent) 12%, transparent);

  /* ── neon sign: blue-white phosphor tube ── */
  --neon-glow: #57B7FF;
  --neon-core: #EAF6FF;
  --neon-core-bright: #FFFFFF;
  --neon-cool: rgba(150, 210, 255, 0.6);
  --neon-cool-bright: rgba(175, 222, 255, 0.9);
  --neon-dim: #B8D4E8;
  --sign-bg: #0B0D12;                   /* the SUBSCRIBE sign panel */

  /* ── substrate: CRT blue-black darkness ── */
  --paper: #0B0D12;
  --paper-card: #10131B;
  --paper-page: #07080C;
  --bar-fill: #151925;
  --ink: #EAF2FA;
  --ink-deep: #FFFFFF;
  --body: #C2CCDA;
  --muted: #7E8798;
  --rule: #232A38;
  --rule-box: #EDEAE2;
  --sep: #333C4E;
  --cta-rule: #C9C5BC;
  --cta-body: #5A5850;
  --src-solo: #F07A4A;
  --src-mid: #2BC4B0;
  --src-pub: #EAF2FA;

  background: var(--paper);
  color: var(--body);
  min-height: 100vh;
}

/* ============================================================
   TYPE DELTA — the early-Wired move (locked with the newsletter):
   body voice is Barlow (sans), headlines are Space Grotesk.
   Newsreader is retired for Dark Frontier; --serif is remapped so
   every parent-system serif use follows automatically.
   ============================================================ */
.df-root {
  --hed: 'Space Grotesk', Helvetica, Arial, sans-serif;
  --sans: 'Barlow', Helvetica, Arial, sans-serif;
  --serif: var(--sans);
}
.df-root .banner-hed,
.df-root .banner-hed a {
  font-family: var(--hed);
  letter-spacing: -0.025em;
}
.df-root .tertiary .hed {
  font-family: var(--hed);
  font-weight: 500;
  font-size: 15.5px;
  letter-spacing: -0.01em;
}
.df-root .stack-hed {
  font-family: var(--hed);
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: -0.01em;
}
.df-root .cta-hed {
  font-family: var(--hed);
  font-style: normal;
  letter-spacing: -0.02em;
}
.df-root .cta-confirm { font-style: normal; }

/* ============================================================
   EXPLORATION PALETTES (kept for reference; identity is CRT)
   These share the warm-dark ink substrate the vertical used
   before the CRT lock.
   ============================================================ */
.df-root[data-palette="ultraviolet"],
.df-root[data-palette="fluorescent"],
.df-root[data-palette="magenta"] {
  --on-accent: #F5F2ED;
  --paper: #131311;
  --paper-card: #1A1A18;
  --paper-page: #0C0C0B;
  --bar-fill: #1F1F1D;
  --ink: #F5F2ED;
  --ink-deep: #FFFFFF;
  --body: #CDCAC2;
  --muted: #8A877F;
  --rule: #2C2C2A;
  --sep: #3F3F3A;
  --src-solo: #E8632C;
  --src-mid: #14BFA6;
  --src-pub: #F5F2ED;
  --neon-glow: var(--df-accent);
  --neon-core: #FFFDF6;
  --neon-core-bright: #FFFFFF;
  --neon-cool: rgba(214, 230, 255, 0.55);
  --neon-cool-bright: rgba(224, 238, 255, 0.85);
  --neon-dim: #E4DFD4;
  --sign-bg: #131311;
}
.df-root[data-palette="ultraviolet"] { --df-accent: #A02DFF; }
.df-root[data-palette="magenta"]     { --df-accent: #FF2D78; }
.df-root[data-palette="fluorescent"] {
  --df-accent: #39FF14;
  --on-accent: #0D110D;
  --neon-core: #F4FFF2;
  --neon-cool: rgba(190, 255, 200, 0.55);
  --neon-cool-bright: rgba(214, 255, 220, 0.85);
  --neon-dim: #CFE8CC;
}

/* ── paper substrate (the mothership's light tokens) ── */
.df-root[data-substrate="paper"] {
  --paper: #F5F2ED;
  --paper-card: #FBF9F4;
  --paper-page: #E8E4DC;
  --bar-fill: #EBE6DA;
  --ink: #111111;
  --ink-deep: #0A0A0A;
  --body: #2A2A28;
  --muted: #76746E;
  --rule: #D8D4CC;
  --rule-box: #1F1F1D;
  --sep: #C9C5BC;
  --cta-rule: #2C2C2A;
  --cta-body: #B9B4A9;
  --src-solo: #C84300;
  --src-mid: #008276;
  --src-pub: #111111;
}
/* acid green is unreadable as small text on paper — darken it */
.df-root[data-palette="fluorescent"][data-substrate="paper"] {
  --df-accent: #1FA800;
  --neon-glow: #39FF14;
}

/* ============================================================
   Text on accent fills — rides --on-accent so amber (dark text)
   and the neon palettes (light text) both stay legible.
   ============================================================ */
.df-root .banner-flag,
.df-root .live-bar .sub-cta,
.df-root .live-bar .sub-cta:hover,
.df-root .stack-move.new,
.df-root .btn-primary,
.df-root .btn-primary:hover,
.df-root .cta-form button {
  color: var(--on-accent);
}

/* ============================================================
   Ink-mode fixups — home.css hardcodes a few light-substrate
   literals (#F5F2ED etc). Re-aim them when we're on ink.
   ============================================================ */
.df-root:not([data-substrate="paper"]) .live-bar { color: var(--paper); }
.df-root:not([data-substrate="paper"]) .btn-ghost:hover { color: var(--paper); }
/* Footer runs on true ink — the light-blue inversion was too cheery */
.df-root:not([data-substrate="paper"]) .cta {
  background: #07080C;
  color: #F5F2ED;
}
.df-root:not([data-substrate="paper"]) .cta-hed { color: #EAF6FF; }
.df-root:not([data-substrate="paper"]) .cta-hed .hl { color: #111111; }
.df-root:not([data-substrate="paper"]) .cta-body { color: #8E99AB; }
.df-root:not([data-substrate="paper"]) .cta-fine { color: #7E8798; }
.df-root:not([data-substrate="paper"]) .cta-form input {
  background: #10131B;
  border-color: #EAF2FA;
  color: #EAF6FF;
}
.df-root:not([data-substrate="paper"]) .cta-form input::placeholder { color: #7E8798; }
.df-root:not([data-substrate="paper"]) .cta-form input:focus { border-color: var(--df-accent); }
.df-root:not([data-substrate="paper"]) .cta-confirm { color: var(--yellow); }
.df-root:not([data-substrate="paper"]) .colophon {
  background: #07080C;
  border-top-color: #232A38;
  color: #7E8798;
}

/* Photo banner: the scrim is always dark, so the knockout hed is
   always light regardless of substrate. */
.df-root .banner-band:has(.banner-hero) .banner-hed,
.df-root .banner-band:has(.banner-hero) .banner-hed a { color: #F5F2ED; }

/* ============================================================
   Lead photo slot — <image-slot> fills the banner band
   ============================================================ */
.df-root .banner-hero { line-height: 0; }
.df-root .banner-hero x-import,
.df-root .banner-hero image-slot {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* ============================================================
   TODAY'S WIRE — the center column runs in reverse: a faithful
   INVERSE of the CRT theme. Cold blue-white paper (the negative
   of the blue-black page), cool gray chrome, same amber line
   color, CRT-family source coding darkened for light ground.
   ============================================================ */
.df-root .col-wire {
  background: #EDF2F9;
  --paper: #EDF2F9;
  --paper-card: #F5F8FD;
  --bar-fill: #DDE5F0;
  --ink: #10131B;
  --ink-deep: #07080C;
  --body: #2A3140;
  --muted: #5F6B7E;
  --rule: #C7D1E0;
  --sep: #B4C0D2;
  --src-solo: #C25415;
  --src-mid: #0B8F7E;
  --src-pub: #10131B;
}
/* wire discipline: every source name in hed ink, no tinted rows —
   the ★ alone marks the picks */
.df-root .col-wire .wall-src.solo,
.df-root .col-wire .wall-src.mid,
.df-root .col-wire .wall-src.pub { color: var(--ink); }
.df-root .col-wire .wall-row.pick {
  background: transparent;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

/* ============================================================
   NEON — the pub sign treatment (.df-neon), shared by the
   wordmark and the SUBSCRIBE FREE sign. Four brightness levels
   the logic class toggles per letter:
   nl-off (dead tube) · nl-dim · nl-on (even glow) · nl-bright.
   ============================================================ */
.df-root .wordmark { font-weight: 800; }

.df-root .df-neon .nl {
  transition: opacity 0.05s linear, text-shadow 0.05s linear, color 0.05s linear;
}
.df-root .df-neon .nl-on {
  color: var(--neon-core);
  opacity: 1;
  text-shadow:
    0 0 4px var(--neon-cool),
    0 0 16px color-mix(in srgb, var(--neon-glow) 55%, transparent),
    0 0 40px color-mix(in srgb, var(--neon-glow) 38%, transparent);
}
.df-root .df-neon .nl-bright {
  color: var(--neon-core-bright);
  opacity: 1;
  text-shadow:
    0 0 5px var(--neon-cool-bright),
    0 0 20px color-mix(in srgb, var(--neon-glow) 85%, transparent),
    0 0 48px color-mix(in srgb, var(--neon-glow) 60%, transparent),
    0 0 90px color-mix(in srgb, var(--neon-glow) 40%, transparent);
}
.df-root .df-neon .nl-dim {
  color: var(--neon-dim);
  opacity: 0.58;
  text-shadow: 0 0 8px color-mix(in srgb, var(--neon-glow) 30%, transparent);
}
.df-root .df-neon .nl-off {
  opacity: 0.13;
  text-shadow: none;
}
/* The accent mark keeps its color at every level (its halo is
   already the glow). 4-class specificity beats the level rules. */
.df-root .df-neon .nl.apos { color: var(--magenta); }

/* Marquee-sign bulbs: small amber "lightbulb" dots between words,
   flickering on the same .nl levels as the neon letters. */
.df-root .df-neon .nl.bulb {
  color: var(--df-accent);
  font-size: 0.62em;
  vertical-align: 0.12em;
  margin: 0 0.6em;
}
.df-root .df-neon .nl.bulb.nl-on {
  text-shadow: 0 0 4px rgba(255,220,150,0.6), 0 0 14px rgba(255,176,0,0.6), 0 0 30px rgba(255,176,0,0.4);
}
.df-root .df-neon .nl.bulb.nl-bright {
  text-shadow: 0 0 6px rgba(255,235,190,0.9), 0 0 20px rgba(255,176,0,0.85), 0 0 44px rgba(255,176,0,0.55);
}
.df-root .df-neon .nl.bulb.nl-dim {
  color: var(--df-accent);
  text-shadow: 0 0 6px rgba(255,176,0,0.3);
}

/* Paper substrate: the WORDMARK inverts to ink letters with a
   backlit halo (white tubes can't read on paper). The SUBSCRIBE
   sign keeps the tube treatment — its panel is always dark. */
.df-root[data-substrate="paper"] .wordmark .nl-on {
  color: var(--ink);
  text-shadow:
    0 0 14px color-mix(in srgb, var(--neon-glow) 45%, transparent),
    0 0 34px color-mix(in srgb, var(--neon-glow) 25%, transparent);
}
.df-root[data-substrate="paper"] .wordmark .nl-bright {
  color: var(--ink);
  text-shadow:
    0 0 16px color-mix(in srgb, var(--neon-glow) 70%, transparent),
    0 0 44px color-mix(in srgb, var(--neon-glow) 42%, transparent);
}
.df-root[data-substrate="paper"] .wordmark .nl-dim {
  color: var(--ink);
  opacity: 0.45;
  text-shadow: none;
}
.df-root[data-substrate="paper"] .wordmark .nl-off {
  opacity: 0.12;
  text-shadow: none;
}

/* ============================================================
   SUBSCRIBE SIGN — the mid-wire CTA: a dark lit sign hanging
   in the paper column.
   ============================================================ */
.df-root .df-sign-cta {
  background: var(--sign-bg);
  border-color: var(--sign-bg);
  text-align: center;
  padding: 24px 22px 22px;
}
.df-root .df-sign-cta .feature-eyebrow { justify-content: center; }
.df-root .df-sign-hed {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(46px, 4.6vw, 74px);
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--neon-core);
  margin: 4px 0 12px;
}
.df-root .df-sign-cta .feature-dek { color: #C2CCDA; }
.df-root .df-sign-cta .feature-actions { justify-content: center; }
.df-root .df-sign-cta .feature-meta { color: #7E8798; }

/* ============================================================
   LEADERBOARD — wider Δ column for dollar moves
   ============================================================ */
.df-root .df-lead .stack-item {
  grid-template-columns: 28px 62px 1fr;
}

/* ============================================================
   WEALTH LADDER — the "World's Richest" board as a net-worth
   bar chart; each man's face (a drop-in slot) is the marker at
   the end of his bar, so the faces staircase from Musk (far
   right) down to the little guys. Then the gag: a dashed break
   to #84.
   ============================================================ */
.df-root .df-wealth { list-style: none; margin: 0; padding: 0; }
.df-root .df-wealth-row { padding: 11px 0 12px; border-bottom: 1px solid var(--rule); }
.df-root .df-wealth-row:last-child { border-bottom: none; }
.df-root .df-wealth-top { display: flex; align-items: baseline; gap: 8px; }
.df-root .df-wealth-rank {
  font-family: var(--mono); font-weight: 700; font-size: 11px;
  color: var(--muted); font-variant-numeric: tabular-nums; min-width: 20px;
}
.df-root .df-wealth-name {
  font-family: var(--hed); font-weight: 700; font-size: 15px;
  letter-spacing: -0.01em; color: var(--ink);
}
.df-root .df-wealth-worth {
  margin-left: auto; font-family: var(--hed); font-weight: 700; font-size: 15px;
  letter-spacing: -0.01em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.df-root .df-wealth-coline {
  font-family: var(--mono); font-weight: 700; font-size: 8.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 3px;
}
.df-root .df-wealth-delta.up { color: var(--df-accent); }
.df-root .df-wealth-delta.down { color: var(--src-mid); }
.df-root .df-wealth-sep { color: var(--sep); }
.df-root .df-wealth-track { position: relative; height: 46px; margin-top: 10px; }
.df-root .df-wealth-bar {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  height: 9px; background: var(--df-accent); box-shadow: 0 0 10px rgba(255,176,0,0.5);
}
.df-root .df-wealth-face {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid var(--df-accent); box-shadow: 0 0 12px rgba(255,176,0,0.5);
  background: var(--paper-card); overflow: hidden;
}
.df-root .df-wealth-face x-import,
.df-root .df-wealth-face image-slot { display: block; width: 100%; height: 100%; }
.df-root .df-wealth-row.is-outlier {
  border-top: 1px dashed var(--df-accent); margin-top: 8px; padding-top: 11px; position: relative;
}

/* ============================================================
   THE RED BUTTON — subscribe actions: neon red, white trim
   ============================================================ */
.df-root .btn-primary.df-red-btn,
.df-root .cta-form button.df-red-btn {
  background: #E0242E;
  border: 2px solid #F5F2ED;
  color: #FFFFFF;
  box-shadow: 0 0 18px rgba(224, 36, 46, 0.45);
}
.df-root .btn-primary.df-red-btn { font-size: 16px; padding: 13px 26px; letter-spacing: 0.06em; }
.df-root .cta-form button.df-red-btn { font-size: 19px; padding: 0 28px; }
.df-root .btn-primary.df-red-btn:hover,
.df-root .cta-form button.df-red-btn:hover { filter: brightness(1.1); color: #FFFFFF; }

/* the pointing arrow in “Find out more:” */
.df-root .cta-body .df-arrow {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.5em;
  line-height: 0;
  color: #E0242E;
  vertical-align: -0.12em;
  padding-left: 7px;
  display: inline-block;
}

/* ============================================================
   VITAL STATISTICS SIZES — data-stats on .signal-strip.
   compact (default): CNBC-style label / value / delta cells.
   ticker: WSJ-style one-line run.
   full: the original deep-dive cards (sparkline + flip back).
   ============================================================ */

/* anything not "full" drops the deep-dive apparatus */
.df-root .signal-strip:not([data-stats="full"]) { padding: 8px 22px 9px; }
.df-root .signal-strip:not([data-stats="full"]) .signal-strip-head { margin-bottom: 7px; }
.df-root .signal-strip:not([data-stats="full"]) .sig-chart,
.df-root .signal-strip:not([data-stats="full"]) .sig-xax,
.df-root .signal-strip:not([data-stats="full"]) .note,
.df-root .signal-strip:not([data-stats="full"]) .sig-flip-hint,
.df-root .signal-strip:not([data-stats="full"]) .sig-back,
.df-root .signal-strip:not([data-stats="full"]) .sig-top { display: none; }
.df-root .signal-strip:not([data-stats="full"]) .sig { cursor: default; }
.df-root .signal-strip:not([data-stats="full"]) .sig-inner { transform: none !important; }

/* compact (also the default while loading) */
.df-root .signal-strip:not([data-stats="full"]):not([data-stats="ticker"]) .sig-front {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 10px;
  align-items: baseline;
  padding: 8px 12px 9px;
}
.df-root .signal-strip:not([data-stats="full"]):not([data-stats="ticker"]) .label {
  grid-column: 1 / -1;
  min-height: auto;
  font-size: 9px;
}
.df-root .signal-strip:not([data-stats="full"]):not([data-stats="ticker"]) .val { font-size: 21px; }
.df-root .signal-strip:not([data-stats="full"]):not([data-stats="ticker"]) .delta { justify-self: end; }

/* ticker */
.df-root .signal-strip[data-stats="ticker"] .signals {
  display: flex;
  flex-wrap: wrap;
}
.df-root .signal-strip[data-stats="ticker"] .sig {
  background: transparent;
  border-right: 1px solid var(--rule);
  border-top: none !important;
}
.df-root .signal-strip[data-stats="ticker"] .sig:last-child { border-right: none; }
.df-root .signal-strip[data-stats="ticker"] .sig-front {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  padding: 5px 13px 6px;
}
.df-root .signal-strip[data-stats="ticker"] .label {
  min-height: auto;
  white-space: nowrap;
  font-size: 9px;
}
.df-root .signal-strip[data-stats="ticker"] .val { font-size: 15px; }
.df-root .signal-strip[data-stats="ticker"] .delta { font-size: 9.5px; white-space: nowrap; }

/* ============================================================
   MARQUEE — the Times Square board. A continuous right-to-left
   scroll of the seven stats; phosphor-glowing values, hairline
   dividers, faint scanlines, pause on hover. data-stats="marquee".
   ============================================================ */
.df-root .signal-strip[data-stats="marquee"] .signals { display: none; }
.df-root .signal-strip:not([data-stats="marquee"]) .df-ticker { display: none; }

/* ============================================================
   CHART — clean 7-day sparkline cells, blue-white phosphor.
   label / value / 1-day delta / 7-day spark / source per metric.
   data-stats="chart" (the DF default). No deep-dive flip.
   ============================================================ */
.df-root .signal-strip[data-stats="chart"] .df-ticker { display: none; }
.df-root .signal-strip[data-stats="chart"] .signals { grid-template-columns: repeat(5, 1fr); }
.df-root .signal-strip[data-stats="chart"] .sig { cursor: default; }
.df-root .signal-strip[data-stats="chart"] .sig-inner { transform: none !important; }
.df-root .signal-strip[data-stats="chart"] .sig .sig-front { display: block; padding: 10px 13px 11px; }
.df-root .signal-strip[data-stats="chart"] .sig .label {
  min-height: auto; font-size: 9px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.df-root .signal-strip[data-stats="chart"] .sig .val {
  font-size: 20px; margin-top: 3px; color: #EAF6FF;
  text-shadow: 0 0 8px rgba(150,210,255,0.5), 0 0 20px rgba(87,183,255,0.30);
}
.df-root .signal-strip[data-stats="chart"] .sig .delta { font-size: 10px; margin-top: 1px; }
.df-root .signal-strip[data-stats="chart"] .sig .sig-chart { display: block; margin-top: 8px; padding-right: 0; }
.df-root .signal-strip[data-stats="chart"] .sig .spark { height: 30px; }
.df-root .signal-strip[data-stats="chart"] .spark-line {
  stroke: #BFE3FF; stroke-width: 1.4;
  filter: drop-shadow(0 0 2px #57B7FF);
}
.df-root .signal-strip[data-stats="chart"] .spark-fill { fill: #57B7FF; opacity: 0.13; }
.df-root .signal-strip[data-stats="chart"] .spark-dot {
  fill: #EAF6FF; filter: drop-shadow(0 0 3px #57B7FF);
}
.df-root .signal-strip[data-stats="chart"] .sig .note {
  display: flex; justify-content: space-between; margin-top: 7px;
  font-family: var(--mono); font-size: 8px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
@media (max-width: 900px) {
  .df-root .signal-strip[data-stats="chart"] .signals { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .df-root .signal-strip[data-stats="chart"] .signals { grid-template-columns: 1fr; }
}

.df-root .df-ticker {
  position: relative;
  overflow: hidden;
  background: #05060A;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 11px 0;
  margin: 8px -22px -9px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3.5%, #000 96.5%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 3.5%, #000 96.5%, transparent 100%);
}
.df-root .df-ticker::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.16) 2px 3px);
}
.df-root .df-ticker-track {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  will-change: transform;
  animation: df-ticker-scroll 52s linear infinite;
}
.df-root .df-ticker:hover .df-ticker-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .df-root .df-ticker-track { animation: none; }
}
.df-root .df-tick-item {
  display: inline-flex;
  align-items: baseline;
  gap: 11px;
  padding: 0 26px;
  border-right: 1px solid #1A2233;
}
.df-root .df-tick-label {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.df-root .df-tick-val {
  font-family: var(--hed);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: #EAF6FF;
  text-shadow: 0 0 8px rgba(150, 210, 255, 0.5), 0 0 20px rgba(87, 183, 255, 0.35);
  font-variant-numeric: tabular-nums;
}
.df-root .df-tick-delta {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--df-accent);
  text-shadow: 0 0 8px rgba(255, 176, 0, 0.45);
  font-variant-numeric: tabular-nums;
}
.df-root .df-tick-delta.down {
  color: var(--src-mid);
  text-shadow: 0 0 8px rgba(43, 196, 176, 0.45);
}

/* ============================================================
   MOBILE — the banner's phone rules lived in the mothership's
   separate mobile tree; ported here as plain breakpoints.
   Everything else rides home.css's existing 1180/900/560 rules.
   ============================================================ */
@media (max-width: 1024px) {
  .df-root .banner-band:has(.banner-hero) {
    min-height: 400px;
    padding: 0 18px 24px;
  }
  .df-root .banner-band:has(.banner-hero) .banner-hed {
    font-size: clamp(32px, 8.2vw, 48px);
    line-height: 1.02;
  }
}
@media (max-width: 560px) {
  .df-root .banner-band:has(.banner-hero) { min-height: 340px; }
  .df-root .df-sign-hed { font-size: clamp(30px, 10.5vw, 44px); }
  .df-root .signal-strip:not([data-stats="full"]) .signal-strip-head .sub { display: none; }
}

/* Signal strip: 7-up needs slightly tighter cells at laptop width */
@media (max-width: 1420px) {
  .df-root .sig .label { font-size: 9px; }
}