/* Lander B - test sheet. Loads after styles.css, so it wins ties. Declares
   nothing global: no :root, no reset, no body. Rewritten flat after an edit
   truncated it - one block per thing, final values only. */

/* ------------------------------------------------------------- test rig --- */
.testbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 9px 16px; background: #14181e; border-bottom: 1px solid var(--rule);
  font: 600 11px/1 var(--f-head); letter-spacing: .06em; color: var(--dim);
}
.testbar b { color: var(--paper); }
.testbar label { display: flex; align-items: center; gap: 8px; }
.testbar input { width: 180px; accent-color: var(--alert); }
.testbar a { margin-left: auto; border-bottom: 1px solid var(--rule-2); padding-bottom: 2px; }

/* ----------------------------------------------------------- the hero ----- */
.lb {
  position: relative; overflow: hidden;
  min-height: max(520px, calc(100svh - var(--topbar-h, 128px)));
  display: grid; grid-template-columns: minmax(0, 1fr);
  align-content: end; justify-items: stretch;
  border-bottom: 1px solid var(--rule);
}

/* ------------------------------------------------- the wall of a hundred --- */
.lb-board {
  position: absolute; inset: 0 0 var(--lt-h, 0) 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: flex-start;
  gap: var(--row-gap, 10px); padding: var(--row-gap, 10px) 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
/* the map turning behind it: equirectangular, so tiling wraps at the date line */
.lb-board::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--dotmap) 0 center / 130% auto repeat-x;
  filter: grayscale(1) contrast(1.45); opacity: .26;
  animation: spin-map 180s linear infinite;
}
@keyframes spin-map { from { background-position: 0 center; } to { background-position: -130% center; } }

.lb-row {
  flex: none; height: var(--row-h, 44px); overflow: hidden;
  border-block: 1px solid rgba(255,255,255,.09);
}
.lb-run {
  display: flex; align-items: stretch; width: 200%; height: 100%;
  animation: crawl var(--dur, 60s) linear infinite;
  animation-delay: var(--delay, 0s);
}
.lb-row.rev .lb-run { animation-direction: reverse; }
.lb-row:hover .lb-run, .lb-row:focus-within .lb-run { animation-play-state: paused; }
/* one set is exactly one row wide, so its ten are always all visible */
.lb-set { display: flex; align-items: stretch; width: 50%; gap: 0; padding: 0; }

/* a hairline divider is the whole frame - a box per slot read as filler */
.ad {
  flex: 1 1 0; min-width: 0; position: relative;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 5px 14px; cursor: pointer; font: inherit;
  border: 0; border-right: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(110deg, rgba(255,255,255,.012), rgba(255,255,255,.05));
  color: #f1f1f1; white-space: nowrap; overflow: hidden;
  transition: background .12s, color .12s;
}
.ad:hover { background: rgba(255,255,255,.1); color: #fff; }
.ad:hover .slot-no { color: rgba(255,255,255,.6); }
.ad:focus-visible { outline: 2px solid var(--alert); outline-offset: -2px; }
.ad.open { background: none; }
.ad.open:hover .ad-name { color: #fff; }
.slot-no {
  flex: none; font: 500 10px/1 var(--f-head); font-style: normal;
  letter-spacing: .06em; color: rgba(255,255,255,.34);
}
.ad-mark { width: 18px; height: 18px; flex: none; filter: brightness(0) invert(1); opacity: .95; }
.ad-name {
  font: 600 13px/1 var(--f-head); letter-spacing: -.01em; color: #f1f1f1;
  overflow: hidden; text-overflow: ellipsis;
}
.ad.open .ad-name { color: rgba(255,255,255,.3); font-weight: 500; }
.ad-plus { font-style: normal; color: rgba(255,255,255,.28); font-size: 13px; }

/* ---------------------------------------------------------- the anchor ---- */
.lb-fish, .lb-fish-grain, .lb-smoke {
  position: absolute; bottom: calc(var(--hero-banner-height, 0px) - 2px); left: 27%;
  transform: translateX(-50%); height: 80%; width: auto;
  pointer-events: none;
}
.lb-fish { z-index: 2; max-width: 94vw; filter: contrast(1.03) drop-shadow(0 26px 50px rgba(0,0,0,.8)); }
.lb-fish-grain {
  z-index: 2; max-width: 94vw; aspect-ratio: 1199 / 1200;
  background: var(--grain);
  -webkit-mask: url('/assets/anchor-laptop-user-final-960.webp') bottom center / contain no-repeat;
  mask: url('/assets/anchor-laptop-user-final-960.webp') bottom center / contain no-repeat;
  mix-blend-mode: hard-light; opacity: .2;
}
/* the cutout kept the cigarette but lost what came off it */
.lb-smoke { z-index: 3; aspect-ratio: 1199 / 1200; }
.lb-smoke i {
  position: absolute; left: 79.2%; top: 40.1%;
  width: clamp(9px, 1vw, 15px); aspect-ratio: 1; margin: -6px 0 0 -6px;
  border-radius: 50%; opacity: 0; filter: blur(3px);
  background: radial-gradient(circle, rgba(228,234,242,.6), rgba(228,234,242,0) 70%);
  animation: smoke 7.5s linear infinite;
}
.lb-smoke i:nth-child(2) { animation-delay: 2.5s; }
.lb-smoke i:nth-child(3) { animation-delay: 5s; }
@keyframes smoke {
  0%   { opacity: 0; transform: translate(0, 0) scale(.5); }
  14%  { opacity: .48; }
  100% { opacity: 0; transform: translate(-22px, -158px) scale(3.6); }
}

/* =============================================== the lower third =========== */
/* A broadcast banner: ident block down the left across every row, then flash
   strip, headline plate, the rail of slots, and the tape. Full bleed on the
   floor of the hero, so the wall runs behind it untouched. */
.lower-third {
  position: relative; max-width: 100%; z-index: 5; width: 100%; align-self: end;
  display: block;
}

.lt-flash {
  display: flex; align-items: center;
  background: linear-gradient(90deg, #c9141d 0%, #e0242e 38%, #7d0b12 100%);
  border-bottom: 1px solid rgba(0,0,0,.4);
}
.lt-kicker {
  padding: 6px clamp(14px, 2vw, 24px);
  font: 900 italic clamp(12px, 1.25vw, 17px)/1 var(--f-head);
  letter-spacing: .01em; text-transform: uppercase; color: #fff;
}
.lt-plate {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #f6f7f8 0%, #dcdfe3 100%);
  padding: clamp(4px, .7vw, 9px) clamp(14px, 2vw, 26px);
}
.lt-plate::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--dotmap) right center / auto 190% no-repeat;
  filter: invert(1) grayscale(1) contrast(1.5);
  opacity: .3;
  -webkit-mask-image: linear-gradient(90deg, transparent 34%, #000 76%);
  mask-image: linear-gradient(90deg, transparent 34%, #000 76%);
}
.lt-head { position: relative; }
.lt-head {
  margin: 0; color: #0b0c0e;
  font: 900 clamp(28px, 5.2vw, 72px)/.94 var(--f-head);
  letter-spacing: -.035em; text-transform: uppercase;
}
/* the rail the reference fills with sponsors, filled here with the slots */
.lt-rail, .lt-rail.tape {
  overflow: hidden; background: #13171d;
  border-top: 1px solid rgba(255,255,255,.22);
  border-bottom: 1px solid rgba(255,255,255,.22);
}
.lt-rail .lb-row { border: 0; height: auto; }
.lt-rail .ad { padding: 7px 14px; }
.lt-rail .ad-name { font-size: 12px; }
.lt-tape {
  display: flex; align-items: center; gap: clamp(14px, 2.4vw, 36px);
  padding: clamp(9px, 1.2vw, 15px) clamp(14px, 2vw, 26px);
  background: #050609;
}
.lt-sub {
  margin: 0; flex: 1 1 auto;
  font: 700 clamp(13px, 1.15vw, 17px)/1.4 var(--f-head); letter-spacing: -.015em;
  color: var(--ink);
}
.lt-actions { display: flex; align-items: center; gap: 10px; flex: none; }

/* ------------------------------------------------- calls and the floor ---- */
/* Equal width: sized by label, the secondary ran ~2x the primary. */
.lb-path {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; min-width: 218px; height: 38px; padding: 0 18px;
  font: 800 12px/1 var(--f-head); letter-spacing: -.01em;
  text-transform: uppercase; text-align: center;
}
.lb-path.is-buy, .nav-cta, .btn-primary, .slam-cta {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.4),
    0 2px 0 rgba(0,0,0,.5), 0 4px 10px rgba(0,0,0,.45);
  border-color: rgba(0,0,0,.45);
}
/* a quote, not a label: live dot, tabular figures, a tick when it moves */
.lb-floor { display: inline-flex; align-items: baseline; gap: 8px; margin: 0; flex: none; }
.lb-floor i, .floor i {
  font: 700 9px/1 var(--f-head); font-style: normal;
  letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
}
.lb-floor b {
  font: 900 clamp(18px, 1.7vw, 24px)/1 var(--f-head); letter-spacing: -.03em;
  color: var(--ink); font-variant-numeric: tabular-nums; transition: color .3s;
}
.lb-floor em {
  font: 700 9px/1 var(--f-head); font-style: normal;
  letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
}
.floor { display: inline-flex; flex-direction: column; justify-content: center; gap: 3px;
  padding: 0 14px 0 0; margin-right: 12px; white-space: nowrap;
  border: 0; background: none; box-shadow: none; }
.floor b {
  font: 800 13px/1 var(--f-head); letter-spacing: -.01em; color: var(--ink);
  font-variant-numeric: tabular-nums; transition: color .3s;
}
.claim-group { display: inline-flex; align-items: stretch; margin-left: clamp(6px, 1vw, 14px); }
.claim-group .nav-cta { margin: 0; }
.live-dot {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--up); margin-right: 6px; vertical-align: middle;
  box-shadow: 0 0 7px var(--up); animation: live-pulse 2s ease-in-out infinite;
}
.lb-floor .live-dot { width: 6px; height: 6px; margin-right: 7px; }
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.floor.ticked b, .lb-floor.ticked b { color: var(--up); }

/* --------------------------------------------------- the auction pages ---- */
.auc { max-width: var(--maxw); margin: 0 auto; padding: clamp(38px, 5vw, 76px) var(--gut) clamp(30px, 4vw, 54px); }
.auc-ix { display: block; margin-bottom: 14px; font: 800 11px/1 var(--f-head); letter-spacing: .12em; text-transform: uppercase; color: var(--alert); }
.auc-title { margin: 0 0 18px; font: 900 clamp(36px, 6vw, 84px)/.94 var(--f-head); letter-spacing: -.025em; }
.auc-line { margin: 0; max-width: 64ch; font: 400 clamp(15px, 1.25vw, 18px)/1.6 var(--f-head); color: var(--ink-2); }
.auc-stats { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; margin: clamp(26px, 3.4vw, 44px) 0 clamp(22px, 2.6vw, 34px); }
.auc-stat { display: flex; flex-direction: column; gap: 7px; justify-content: center; padding: 14px 20px; min-width: 150px; background: var(--card); border: 1px solid var(--rule); }
.auc-stat b { font: 800 clamp(20px, 2vw, 30px)/1 var(--f-head); color: var(--ink); font-variant-numeric: tabular-nums; }
.auc-stat i { font-style: normal; color: var(--alert); }
.auc-os { display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; border: 1px solid var(--rule-2); color: var(--ink); font: 800 12px/1 var(--f-head); letter-spacing: -.01em; }
.auc-os:hover { border-color: var(--chrome); background: var(--card); }
.auc-board { margin-top: clamp(8px, 1.4vw, 18px); }

.ad-echo { margin-bottom: clamp(34px, 4vw, 58px); }
.ad-echo-head { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: baseline; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--rule); font: 700 11px/1 var(--f-head); letter-spacing: .1em; }
.ad-echo-label { color: var(--ink); }
.ad-echo-read { color: var(--dim); }
.ad-echo-read b { color: var(--alert); font-weight: 700; }
.ad-echo-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; margin-top: 16px; }
.ad-echo-grid .ad {
  height: clamp(30px, 3.2vw, 42px); gap: 8px; padding: 0 10px;
  border: 1px solid rgba(255,255,255,.1);
}
.ad-echo-grid .ad-name { font-size: 11px; }
.ad-echo-note { margin: 14px 0 0; max-width: 62ch; font: 400 13px/1.6 var(--f-head); color: var(--ink-2); }

.own { margin-top: clamp(20px, 2.6vw, 34px); }
.own-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.own-grid:empty { display: none; }
.own-empty { margin: 16px 0 0; max-width: 62ch; font: 400 14px/1.6 var(--f-head); color: var(--ink-2); }
#slot-locked { margin-top: 18px; }

/* ------------------------------------------------------- the white plate -- */
.slam { background: #fff; color: #050505; position: relative; }
.slam-in { max-width: var(--maxw); margin: 0 auto; padding: clamp(30px, 4vw, 58px) var(--gut) clamp(26px, 3.4vw, 46px); }
.slam-ix { margin: 0 0 clamp(12px, 1.6vw, 20px); font: 800 12px/1 var(--f-head); letter-spacing: .12em; text-transform: uppercase; color: var(--alert); }
.slam-head { margin: 0 0 clamp(22px, 2.6vw, 36px); font: 900 clamp(32px, 5.4vw, 84px)/.86 var(--f-head); letter-spacing: -.035em; text-transform: uppercase; color: #050505; }
.slam-sub { margin: clamp(18px, 2.2vw, 28px) 0 0; max-width: 58ch; font: 400 clamp(15px, 1.2vw, 18px)/1.55 var(--f-head); color: #4d525a; }
.slam-rail { display: flex; align-items: center; gap: clamp(10px, 1.4vw, 20px); flex-wrap: wrap; margin-top: clamp(24px, 3vw, 38px); }
.slam-cta { display: inline-flex; align-items: center; height: 54px; padding: 0 clamp(20px, 2.4vw, 34px); background: var(--alert); color: #fff; font: 900 clamp(13px, 1.2vw, 17px)/1 var(--f-head); letter-spacing: -.01em; text-transform: uppercase; }
.slam-cta:hover { background: #050505; }
.slam-alt { font: 700 14px/1 var(--f-head); letter-spacing: -.01em; color: #050505; border-bottom: 2px solid rgba(5,5,5,.3); padding-bottom: 4px; }
.slam-alt:hover { border-bottom-color: #050505; }

/* ------------------------------------------------------------- the proof -- */
.proof { border-top: 1px solid var(--rule); background: var(--grain), var(--page); }
.proof-in { max-width: var(--maxw); margin: 0 auto; padding: clamp(34px, 4.2vw, 62px) var(--gut); }
.proof-ix { margin: 0 0 clamp(18px, 2.2vw, 28px); font: 800 11px/1 var(--f-head); letter-spacing: .08em; text-transform: uppercase; color: var(--alert); }
.proof .reelstrip { margin: 0; padding: 0; border: 0; }

.nav-mine { font: 800 12px/1 var(--f-head); letter-spacing: -.01em; text-transform: uppercase; color: var(--ink); white-space: nowrap; align-self: center; height:38px; padding:0 16px; display:inline-flex; align-items:center; justify-content:center; }
.nav-mine:hover { color: var(--ink); }
.lb-label { font: 700 9px/1 var(--f-head); letter-spacing: .14em; color: var(--dim); }

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 980px) { .floor { display: none; } }
@media (max-width: 900px) {
  .lt-tape { flex-wrap: wrap; gap: 10px 14px; }
  .lt-sub { flex: 1 1 100%; order: 3; }
  .lt-actions { flex: 1 1 100%; }
  .lb-path { flex: 1 1 0; min-width: 0; }
  .lb-fish, .lb-fish-grain, .lb-smoke { left: 50%; height: 88%; max-width: 96vw; }
  .nav-mine { display: none; }
}
@media (max-width: 760px) {
  .ad-name { display: none; }
  .ad { gap: 8px; padding: 4px 8px; }
  .bars { width: 3px; }
}
@media (max-width: 700px) { .ad-echo-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; } }
@media (prefers-reduced-motion: reduce) {
  .lb-run, .lb-board::before, .live-dot { animation: none; }
  .lb-smoke { display: none; }
}

/* The tape rides in the lower third until that scrolls away, then takes over
   the top of the screen. A collapsed copy inside the sticky bar rather than a
   fixed element, so nothing jumps and the masthead keeps its own height. */
.tape-stuck { height: 0; overflow: hidden; border: 0; transition: height .18s ease; }
.tape-stuck[data-on] { height: 34px; border-top: 1px solid var(--rule); }


/* Floor and act are one control here too, matching the masthead. */
.lb-path.is-buy {
  flex-direction: column; align-items: center; justify-content: center;
  height: auto; gap: 3px; padding: 8px 20px; line-height: 1;
}
.lb-path.is-buy b { font: 800 13px/1 var(--f-head); letter-spacing: -.01em; text-transform: uppercase; }
.lb-path.is-buy i {
  display: flex; align-items: center;
  font: 700 9px/1 var(--f-head); font-style: normal; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.84); font-variant-numeric: tabular-nums;
}
.lb-path.is-buy .live-dot { background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.8); width: 4px; height: 4px; margin-right: 5px; }
.lb-path:not(.is-buy) { height: 44px; }

/* ------------------------------------------- the banner as a page header --- */
/* Same four bands on every page. On the lander it sits on the floor of the
   hero; elsewhere it is the header, so it needs its own top rule. */
.page-third { border-top: 1px solid var(--rule); }
.lt-stats { display: flex; align-items: stretch; gap: clamp(10px, 1.6vw, 24px); flex: none; }
.lt-stat {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding-left: clamp(10px, 1.6vw, 22px); border-left: 1px solid var(--rule);
  white-space: nowrap;
}
.lt-stat span {
  font: 700 9px/1 var(--f-head); letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim);
}
.lt-stat b {
  font: 800 clamp(13px, 1.2vw, 17px)/1 var(--f-head); letter-spacing: -.02em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.lt-stat i { font-style: normal; color: var(--alert); }
@media (max-width: 900px) {
  .lt-stats { flex: 1 1 100%; order: 2; }
  .lt-stat:first-child { padding-left: 0; border-left: 0; }
}

/* the page body under it drops the old oversized head block */
.page-third + .auc { padding-top: clamp(26px, 3.2vw, 46px); }

/* the holdings grid uses the same cell */
.own-grid .ad { height: 44px; border: 1px solid rgba(255,255,255,.1); }

/* -------------------------------------------- the hero on inner pages ----- */
/* Same construction as the lander's, minus the anchor: the rail runs behind,
   the banner sits on the floor of it. Shorter, because these pages have work
   below them. */
.page-hero { min-height: clamp(360px, 52vh, 520px); }
.page-hero .lb-board { opacity: .8; }

/* ------------------------------------------------------- the two ways ----- */
.ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1px; background: var(--rule); }
.way { background: var(--page); padding: clamp(24px, 2.8vw, 38px); }
.way-ix { margin: 0 0 14px; font: 800 11px/1 var(--f-head); letter-spacing: .12em; text-transform: uppercase; color: var(--alert); }
.way h3 { margin: 0 0 14px; font: 900 clamp(20px, 2.2vw, 30px)/1.02 var(--f-head); letter-spacing: -.03em; text-transform: uppercase; color: var(--ink); }
.way p { margin: 0; font: 400 14px/1.6 var(--f-head); color: var(--ink-2); }
.way-facts { display: grid; gap: 1px; margin: clamp(20px, 2.4vw, 30px) 0 0; background: var(--rule); border-top: 1px solid var(--rule); }
.way-facts > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; background: var(--page); }
.way-facts dt { font: 700 10px/1.4 var(--f-head); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.way-facts dd { margin: 0; font: 800 13px/1.4 var(--f-head); letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------- the steps ---- */
.steps { counter-reset: step; list-style: none; margin: 0 0 clamp(28px, 3.4vw, 44px); padding: 0; display: grid; gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
.steps li { counter-increment: step; background: var(--page); padding: 16px 0 16px 46px; position: relative; font: 400 14px/1.6 var(--f-head); color: var(--ink-2); }
.steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 16px; font: 800 11px/1.6 var(--f-head); letter-spacing: .1em; color: var(--alert); }
.steps b { color: var(--ink); font-weight: 800; }

.wallet-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: clamp(20px, 2.4vw, 30px); }
.wallet-row .fineprint { margin: 0; }
.fineprint a { color: var(--ink); border-bottom: 1px solid var(--rule-2); }

/* ===========================================================================
   AD SPACE - a market page. Opens on a quote, not a poster: the numbers, then
   the book, then the comparison, then the act. Same type and controls as the
   lander; none of its furniture.
   =========================================================================== */
.mkt-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(20px, 4vw, 60px); flex-wrap: wrap;
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(30px, 4vw, 58px) var(--gut) clamp(18px, 2vw, 26px);
}
.mkt-ix { margin: 0 0 8px; font: 800 11px/1 var(--f-head); letter-spacing: .14em; text-transform: uppercase; color: var(--alert); }
.mkt-title h1 { margin: 0; font: 900 clamp(34px, 5vw, 68px)/.94 var(--f-head); letter-spacing: -.035em; text-transform: uppercase; color: var(--ink); }
.mkt-quote { display: flex; align-items: stretch; gap: 1px; margin: 0; background: var(--rule); border: 1px solid var(--rule); }
.mkt-cell { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 12px 18px; background: var(--page); min-width: 104px; }
.mkt-cell dt { font: 700 9px/1 var(--f-head); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.mkt-cell dd { margin: 0; display: flex; align-items: baseline; gap: 4px; font: 800 clamp(15px, 1.5vw, 20px)/1 var(--f-head); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.mkt-cell dd span:not(.live-dot) { font-size: .68em; color: var(--dim); }
.mkt-cell i { font-style: normal; }
.mkt-cell.is-lead { background: #0f1218; }
.mkt-cell.is-lead dd { color: #fff; }
.mkt-cell.is-lead .live-dot { align-self: center; }

.book { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut) clamp(34px, 4vw, 58px); }
.book-bar {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 0 0 12px; border-bottom: 1px solid var(--rule);
}
.book-bar p { margin: 0; font: 400 13px/1.5 var(--f-head); color: var(--ink-2); max-width: 68ch; }
.book-read { font: 700 11px/1 var(--f-head); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.book-read b { color: var(--alert); }
.book-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 1px; }
.book-grid .ad { height: clamp(38px, 4vw, 52px); border: 0; background: var(--page); gap: 7px; padding: 0 8px; }
.book-grid .ad:hover { background: #171b21; }
.book-grid .ad-name { font-size: 11px; }
@media (max-width: 900px) { .book-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.cmp { max-width: var(--maxw); margin: 0 auto; padding: clamp(34px, 4vw, 58px) var(--gut); border-top: 1px solid var(--rule); }
.cmp-title { margin: 0 0 clamp(20px, 2.4vw, 30px); font: 900 clamp(24px, 3vw, 40px)/1 var(--f-head); letter-spacing: -.035em; text-transform: uppercase; color: var(--ink); }
.cmp-table { width: 100%; border-collapse: collapse; }
.cmp-table th, .cmp-table td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.cmp-table thead th { font: 800 12px/1 var(--f-head); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); border-bottom: 2px solid var(--rule-2); }
.cmp-table thead th:first-child { width: 22%; }
.cmp-table tbody th { font: 700 10px/1.4 var(--f-head); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.cmp-table td { font: 400 14px/1.5 var(--f-head); color: var(--ink-2); }
.cmp-table tbody tr:hover td, .cmp-table tbody tr:hover th { background: #0f1218; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.claim {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 4vw, 64px);
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(34px, 4vw, 58px) var(--gut) clamp(46px, 6vw, 84px);
  border-top: 1px solid var(--rule);
}
.claim-copy h2 { margin: 0 0 14px; font: 900 clamp(24px, 3vw, 40px)/1 var(--f-head); letter-spacing: -.035em; text-transform: uppercase; color: var(--ink); }
.claim-copy > p { margin: 0 0 clamp(22px, 2.6vw, 32px); max-width: 60ch; font: 400 15px/1.6 var(--f-head); color: var(--ink-2); }
.claim-panel { align-self: start; padding: clamp(20px, 2.4vw, 30px); border: 1px solid var(--rule-2); background: var(--card); display: flex; flex-direction: column; gap: 12px; }
.claim-kicker { margin: 0; font: 700 10px/1.4 var(--f-head); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.claim-state { margin: 0 0 6px; font: 400 13px/1.5 var(--f-head); color: var(--ink-2); }
.claim-panel .btn, .claim-panel .nav-wallet { width: 100%; justify-content: center; }
.claim-panel .fineprint { margin: 4px 0 0; font-size: 12px; }
@media (max-width: 860px) { .claim { grid-template-columns: 1fr; } }

/* ===========================================================================
   YOUR SLOTS - an account screen. Wallet first, then what it holds, then the
   one thing a holder came to do.
   =========================================================================== */
.acct {
  display: grid; grid-template-columns: 1.5fr 1fr; align-items: start;
  gap: clamp(24px, 4vw, 60px);
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(34px, 4.4vw, 64px) var(--gut) clamp(28px, 3.2vw, 44px);
}
.acct-ix { margin: 0 0 10px; font: 800 11px/1 var(--f-head); letter-spacing: .14em; text-transform: uppercase; color: var(--alert); }
.acct h1 { margin: 0 0 14px; font: 900 clamp(28px, 4vw, 54px)/.98 var(--f-head); letter-spacing: -.035em; text-transform: uppercase; color: var(--ink); font-variant-numeric: tabular-nums; }
.acct-note { margin: 0 0 clamp(18px, 2.2vw, 26px); max-width: 54ch; font: 400 14px/1.6 var(--f-head); color: var(--ink-2); }
.acct-figures { display: grid; gap: 1px; margin: 0; background: var(--rule); border: 1px solid var(--rule); }
.acct-figures > div { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 14px 18px; background: var(--page); }
.acct-figures dt { font: 700 10px/1.4 var(--f-head); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.acct-figures dd { margin: 0; font: 800 clamp(15px, 1.5vw, 20px)/1 var(--f-head); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .acct { grid-template-columns: 1fr; } }

.holds { max-width: var(--maxw); margin: 0 auto; padding: clamp(26px, 3vw, 40px) var(--gut); border-top: 1px solid var(--rule); }
.holds-title { margin: 0 0 18px; font: 900 clamp(20px, 2.4vw, 32px)/1 var(--f-head); letter-spacing: -.035em; text-transform: uppercase; color: var(--ink); }
.holds .own-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1px; background: var(--rule); }
.holds .own-grid:not(:empty) { border: 1px solid var(--rule); }
.holds .own-grid .ad { background: var(--page); border: 0; height: 52px; }

.studio {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(24px, 4vw, 60px);
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(30px, 3.6vw, 50px) var(--gut) clamp(46px, 6vw, 84px);
  border-top: 1px solid var(--rule);
}
.studio-copy h2 { margin: 0 0 14px; font: 900 clamp(22px, 2.8vw, 36px)/1 var(--f-head); letter-spacing: -.035em; text-transform: uppercase; color: var(--ink); }
.studio-copy p { margin: 0 0 14px; font: 400 14px/1.6 var(--f-head); color: var(--ink-2); }
.studio-form { padding: clamp(20px, 2.4vw, 30px); border: 1px solid var(--rule-2); background: var(--card); }
@media (max-width: 860px) { .studio { grid-template-columns: 1fr; } }


/* the quote strip sits directly under the ad space header */
.mkt-quote { max-width: var(--maxw); margin: 0 auto; padding: clamp(18px, 2.2vw, 28px) var(--gut) 0; border: 0; background: none; }
.mkt-quote { display: flex; align-items: stretch; gap: 1px; }
.mkt-quote .mkt-cell:first-child { border-left: 1px solid var(--rule); }
.mkt-cell { border: 1px solid var(--rule); border-left: 0; }
@media (max-width: 760px) { .mkt-quote { flex-wrap: wrap; } .mkt-cell { flex: 1 1 40%; } }

/* ===========================================================================
   SECTIONS - quiet and editorial. The red strip and the white plate belong to
   the hero and appear once; below it a section is a hairline, a small red
   eyebrow and white type on the ground. Variety comes from the layouts, not
   from repeating the banner.
   =========================================================================== */
.s { border-top: 1px solid var(--rule); }
.s-in { max-width: var(--maxw); margin: 0 auto; padding: clamp(34px, 4.4vw, 72px) var(--gut); }
.s-eyebrow {
  margin: 0 0 clamp(10px, 1.2vw, 16px);
  font: 800 11px/1 var(--f-head); letter-spacing: .16em; text-transform: uppercase; color: var(--alert);
}
.s-title {
  margin: 0; max-width: 22ch;
  font: 900 clamp(26px, 3.4vw, 46px)/1 var(--f-head);
  letter-spacing: -.035em; color: var(--ink);
}
.s-lede {
  margin: clamp(14px, 1.6vw, 20px) 0 0; max-width: 62ch;
  font: 400 clamp(14px, 1.15vw, 17px)/1.6 var(--f-head); color: var(--ink-2);
}

/* ---- A: the reels, edge to edge, no headline competing with them ---- */
.airing .s-in { padding-bottom: clamp(26px, 3vw, 42px); }
.airing-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(18px, 2vw, 28px); }
.airing-head p { margin: 0; }
.airing-count { font: 700 11px/1 var(--f-head); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }

/* ---- B: the set beside the making-of ---- */
.made { display: grid; grid-template-columns: minmax(0, 340px) 1fr; gap: clamp(26px, 4vw, 68px); align-items: start; }
.made-list { margin: 0; }
.made-item { display: grid; grid-template-columns: auto 1fr; gap: 14px 18px; padding: clamp(14px, 1.6vw, 20px) 0; border-top: 1px solid var(--rule); }
.made-item:first-child { border-top: 0; padding-top: 0; }
.made-item dt { grid-column: 1 / -1; font: 900 clamp(15px, 1.4vw, 19px)/1.1 var(--f-head); letter-spacing: -.03em; color: var(--ink); }
.made-item dd { grid-column: 1 / -1; margin: 0; font: 400 14px/1.6 var(--f-head); color: var(--ink-2); }
.made-n { font: 800 10px/1 var(--f-head); letter-spacing: .14em; color: var(--alert); }
@media (max-width: 820px) { .made { grid-template-columns: 1fr; } }

/* ---- C: the case, as four statements ---- */
.case-list { list-style: none; margin: 0; padding: 0; }
.case-item { display: grid; grid-template-columns: 56px 1fr; gap: clamp(14px, 2vw, 28px); padding: clamp(20px, 2.4vw, 32px) 0; border-top: 1px solid var(--rule); }
.case-item:first-child { border-top: 0; }
.case-n { font: 900 clamp(20px, 2vw, 28px)/1 var(--f-head); letter-spacing: -.04em; color: #22262d; }
.case-item h3 { margin: 0 0 8px; font: 900 clamp(19px, 2.1vw, 30px)/1.05 var(--f-head); letter-spacing: -.035em; color: var(--ink); max-width: 26ch; }
.case-item p { margin: 0; max-width: 64ch; font: 400 14px/1.6 var(--f-head); color: var(--ink-2); }
@media (max-width: 640px) { .case-item { grid-template-columns: 1fr; gap: 8px; } }

/* ---- D: the closing statement ---- */
.pitch { border-top: 1px solid var(--rule); background: var(--grain), #08090d; }
.pitch-in { max-width: var(--maxw); margin: 0 auto; padding: clamp(46px, 6vw, 100px) var(--gut); display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(24px, 4vw, 70px); align-items: end; }
.pitch h2 { margin: 0; max-width: 18ch; font: 900 clamp(30px, 4.6vw, 66px)/.96 var(--f-head); letter-spacing: -.04em; color: var(--ink); }
.pitch p { margin: 16px 0 0; max-width: 54ch; font: 400 clamp(14px, 1.15vw, 17px)/1.6 var(--f-head); color: var(--ink-2); }
.pitch-act { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
@media (max-width: 860px) { .pitch-in { grid-template-columns: 1fr; } }

/* ---- ad space header: a reading, not a poster ---- */
.mkt { border-bottom: 1px solid var(--rule); }
.mkt-in {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(34px, 4.4vw, 68px) var(--gut) clamp(24px, 3vw, 38px);
  display: grid; grid-template-columns: 1fr auto; gap: clamp(24px, 4vw, 60px); align-items: end;
}
.mkt-h { margin: 0; font: 900 clamp(34px, 5.4vw, 74px)/.94 var(--f-head); letter-spacing: -.04em; color: var(--ink); }
.mkt-quote { display: flex; align-items: stretch; gap: 0; margin: 0; }
.mkt-cell { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 12px 18px; min-width: 100px; border: 1px solid var(--rule); border-left: 0; }
.mkt-cell:first-child { border-left: 1px solid var(--rule); }
.mkt-cell dt { font: 700 9px/1 var(--f-head); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.mkt-cell dd { margin: 0; display: flex; align-items: baseline; gap: 4px; font: 800 clamp(15px, 1.5vw, 20px)/1 var(--f-head); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.mkt-cell dd span:not(.live-dot) { font-size: .68em; color: var(--dim); }
.mkt-cell i { font-style: normal; }
.mkt-cell.is-lead { background: #12161c; }
.mkt-cell.is-lead dd { color: #fff; }
@media (max-width: 900px) { .mkt-in { grid-template-columns: 1fr; } .mkt-quote { flex-wrap: wrap; } .mkt-cell { flex: 1 1 40%; border-left: 1px solid var(--rule); } }

/* ---- account header ---- */
.acct h1 { font-size: clamp(30px, 5vw, 62px); }

/* ===========================================================================
   FOOTER - a sign-off, not a statement panel. Navigation, then a status strip
   saying what is actually on the wire. Compact; the page ends, it does not
   make one last speech.
   =========================================================================== */
.ft { border-top: 1px solid var(--rule); background: #05070a; }
.ft-in {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(30px, 3.6vw, 52px) var(--gut) clamp(24px, 2.8vw, 36px);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr);
  gap: clamp(24px, 4vw, 70px);
}
.ft-id .wordmark {
  display: block; width: clamp(120px, 11vw, 158px); aspect-ratio: 5.329 / 1;
  background: url('/assets/lntv-wordmark-800.webp') left center / contain no-repeat;
  margin-bottom: 14px;
}
.ft-id p { margin: 0; max-width: 40ch; font: 400 13px/1.6 var(--f-head); color: var(--ink-2); }

.ft-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.ft-cols h2 {
  margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--rule);
  font: 800 10px/1 var(--f-head); letter-spacing: .16em; text-transform: uppercase; color: var(--dim);
}
.ft-cols a {
  display: block; padding: 5px 0;
  font: 700 13px/1.4 var(--f-head); letter-spacing: -.01em; color: var(--ink-2);
}
.ft-cols a:hover { color: var(--ink); }

.ft-status {
  border-top: 1px solid var(--rule); background: #0b0d11;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px clamp(14px, 2.2vw, 30px);
  padding: 12px var(--gut);
  font: 700 10px/1 var(--f-head); letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
}
.ft-status span { display: flex; align-items: center; }
.ft-status .live-dot { margin-right: 7px; }
.ft-copy { margin-left: auto; }
@media (max-width: 820px) {
  .ft-in { grid-template-columns: 1fr; }
  .ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft-copy { margin-left: 0; }
}

/* ===========================================================================
   AD SPACE - the argument is supply. It opens on the number that never moves,
   shows the unit on air, says why it is not a media buy, then lists which
   hundred and how to take one.
   =========================================================================== */
.supply-page { display: block; }
.thesis {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(40px, 6vw, 96px) var(--gut) clamp(28px, 3.4vw, 46px);
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(28px, 5vw, 80px); align-items: end;
}
.thesis-k { margin: 0 0 clamp(12px, 1.4vw, 18px); font: 800 11px/1 var(--f-head); letter-spacing: .18em; text-transform: uppercase; color: var(--alert); }
.thesis-h { margin: 0; font: 900 clamp(38px, 6.4vw, 92px)/.9 var(--f-head); letter-spacing: -.045em; color: var(--ink); }
.thesis-p { margin: clamp(18px, 2vw, 26px) 0 0; max-width: 46ch; font: 400 clamp(14px, 1.2vw, 17px)/1.6 var(--f-head); color: var(--ink-2); }

/* the number that never moves, drawn as a bar rather than a stat card */
.supply { display: flex; flex-direction: column; gap: 14px; }
.supply-bar { height: 10px; background: #14181e; border: 1px solid var(--rule); overflow: hidden; }
.supply-bar span { display: block; height: 100%; width: 6%; background: var(--alert); }
.supply-read { display: flex; gap: clamp(18px, 3vw, 40px); }
.supply-read p { margin: 0; display: flex; flex-direction: column; gap: 5px; }
.supply-read b { display: flex; align-items: center; font: 900 clamp(22px, 2.6vw, 36px)/1 var(--f-head); letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.supply-read span { font: 700 10px/1 var(--f-head); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
@media (max-width: 880px) { .thesis { grid-template-columns: 1fr; } }

.proofshot { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut) clamp(30px, 3.6vw, 50px); }
.proofshot figure { margin: 0; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: end; }
.proofshot img { display: block; width: 100%; border: 1px solid var(--rule); }
.proofshot figcaption { font: 400 clamp(13px, 1.1vw, 16px)/1.6 var(--f-head); color: var(--ink-2); }
@media (max-width: 780px) { .proofshot figure { grid-template-columns: 1fr; } }

.why { border-top: 1px solid var(--rule); }
.why-in { max-width: var(--maxw); margin: 0 auto; padding: clamp(30px, 3.6vw, 54px) var(--gut); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule); }
.why article { background: var(--page); padding: clamp(20px, 2.2vw, 30px) clamp(18px, 2vw, 28px); }
.why h2 { margin: 0 0 10px; font: 900 clamp(16px, 1.6vw, 22px)/1.12 var(--f-head); letter-spacing: -.032em; color: var(--ink); max-width: 18ch; }
.why p { margin: 0; font: 400 13px/1.6 var(--f-head); color: var(--ink-2); }
@media (max-width: 820px) { .why-in { grid-template-columns: 1fr; } }

.ledger { max-width: var(--maxw); margin: 0 auto; padding: clamp(30px, 3.6vw, 54px) var(--gut); border-top: 1px solid var(--rule); }
.ledger-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: clamp(16px, 2vw, 24px); }
.ledger-head h2 { margin: 0; font: 900 clamp(20px, 2.2vw, 30px)/1 var(--f-head); letter-spacing: -.035em; color: var(--ink); }
.ledger-head p { margin: 0; font: 400 13px/1.5 var(--f-head); color: var(--ink-2); }

.how { border-top: 1px solid var(--rule); background: var(--grain), #08090d; }
.how-in { max-width: var(--maxw); margin: 0 auto; padding: clamp(34px, 4.4vw, 70px) var(--gut); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.how-copy h2 { margin: 0 0 12px; font: 900 clamp(22px, 2.6vw, 34px)/1 var(--f-head); letter-spacing: -.04em; color: var(--ink); }
.how-copy p { margin: 0 0 12px; max-width: 46ch; font: 400 14px/1.6 var(--f-head); color: var(--ink-2); }
.how-sig { border-left: 2px solid var(--alert); padding-left: 14px; color: var(--ink) !important; font-weight: 700 !important; }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
.how-steps li { display: grid; grid-template-columns: 42px 1fr; gap: 4px 14px; padding: 14px 0; background: #08090d; align-items: baseline; }
.how-steps span { font: 800 10px/1.6 var(--f-head); letter-spacing: .12em; color: var(--alert); }
.how-steps b { font: 900 15px/1.4 var(--f-head); letter-spacing: -.02em; color: var(--ink); }
.how-steps em { grid-column: 2; font-style: normal; font: 400 13px/1.55 var(--f-head); color: var(--ink-2); }
.how-act { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: clamp(18px, 2vw, 26px); }
.how-state { margin: 0; flex: 1 1 200px; font: 400 12px/1.5 var(--f-head); color: var(--ink-3); }
@media (max-width: 860px) { .how-in { grid-template-columns: 1fr; } }
.hidden-count { display: none; }

/* ===========================================================================
   YOUR POSITION - a holder screen. It opens on the size of the position, not
   on a wallet prompt.
   =========================================================================== */
.position-page { display: block; }
.pos { max-width: var(--maxw); margin: 0 auto; padding: clamp(40px, 5.4vw, 88px) var(--gut) clamp(26px, 3vw, 40px); }
.pos-k { margin: 0 0 10px; font: 800 11px/1 var(--f-head); letter-spacing: .18em; text-transform: uppercase; color: var(--alert); }
.pos-figure { display: flex; align-items: baseline; gap: 16px; margin: 0; }
.pos-figure b { font: 900 clamp(56px, 11vw, 150px)/.82 var(--f-head); letter-spacing: -.05em; color: var(--ink); font-variant-numeric: tabular-nums; }
.pos-figure span { font: 800 clamp(14px, 1.5vw, 20px)/1 var(--f-head); letter-spacing: -.02em; color: var(--dim); }
.pos-share { margin: clamp(16px, 2vw, 24px) 0 0; max-width: 54ch; font: 400 clamp(14px, 1.15vw, 17px)/1.6 var(--f-head); color: var(--ink-2); }
.pos-act { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: clamp(20px, 2.4vw, 30px); }
.pos-addr { margin: 0; font: 700 12px/1 var(--f-head); letter-spacing: .04em; color: var(--dim); word-break: break-all; }

.units { max-width: var(--maxw); margin: 0 auto; padding: clamp(26px, 3vw, 44px) var(--gut); border-top: 1px solid var(--rule); }
.units-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: clamp(14px, 1.8vw, 22px); }
.units-head h2 { margin: 0; font: 900 clamp(19px, 2vw, 27px)/1 var(--f-head); letter-spacing: -.035em; color: var(--ink); }
.units-head p { margin: 0; font: 400 13px/1.5 var(--f-head); color: var(--ink-2); }

.swap { border-top: 1px solid var(--rule); background: var(--grain), #08090d; }
.swap-in { max-width: var(--maxw); margin: 0 auto; padding: clamp(30px, 3.8vw, 58px) var(--gut) clamp(44px, 5.4vw, 84px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.swap-copy h2 { margin: 0 0 12px; font: 900 clamp(20px, 2.4vw, 32px)/1 var(--f-head); letter-spacing: -.04em; color: var(--ink); }
.swap-copy p { margin: 0 0 12px; max-width: 46ch; font: 400 14px/1.6 var(--f-head); color: var(--ink-2); }
.swap-form { border: 1px solid var(--rule-2); background: var(--card); padding: clamp(18px, 2.2vw, 28px); }
@media (max-width: 860px) { .swap-in { grid-template-columns: 1fr; } }

/* Keep the first ten positions clearest without dimming the anchor. */
#board::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(3,5,8,0) 0%,rgba(3,5,8,.08) 35%,rgba(3,5,8,.32) 100%);
}

/* Give the first ten slot numbers a clear priority marker. */
#board > .lb-row:first-child .slot-no {
  color:#fff;
  font-weight:800;
  text-shadow:0 0 7px rgba(255,255,255,.25);
}
#board > .lb-row:first-child {
  border-block-color:rgba(255,255,255,.26);
  background:rgba(255,255,255,.035);
}

/* Fine continuous wisps anchored at the cigarette, rather than floating dots. */
/* Soft overlapping plumes disperse upward from the cigarette tip. */
.smoke-wisps { position:absolute;left:79.2%;top:40.1%;width:16%;height:34%;transform:translate(-50%,-100%);overflow:visible;pointer-events:none; }
.smoke-wisps path { transform-origin:70px 279px;animation:smoke-drift 12s ease-in-out infinite; }
.smoke-wisps path:nth-child(2) { opacity:.6;animation-delay:-7s;animation-duration:17s; }
@keyframes smoke-drift { 0%,100% { transform:skewX(-5deg) scaleX(.8);opacity:.55; } 50% { transform:skewX(7deg) scaleX(1.15);opacity:.85; } }
@media(prefers-reduced-motion:reduce) { .smoke-wisps path { animation:none; } }


.hero-market-tape { position:relative!important;inset:auto!important;width:100%; }
.hero-market-tape .tape-run { animation-delay:-35s; }
.home-viewer-tape .tape-run { animation-delay:-17.5s; }

/* Compact auction window docked to the banner. */
.hero-auction-popup.nx { --section-title-size:25px; position:absolute; z-index:9; right:24px; bottom:calc(var(--hero-banner-height,180px) + 10px); width:280px; margin:0; padding:0; border:1px solid #333841; background:#0c1015; box-shadow:0 8px 24px #0007; }
.hero-auction-popup .lt-flash { background:linear-gradient(90deg,#e0242e,#d71926 52%,#8b0710); box-shadow:inset 0 1px #ffffff20,inset 0 -1px #0006; }
body .hero-auction-popup .lt-flash .lt-kicker { font-size:12px!important; padding-inline:16px; }
.hero-auction-popup .lt-plate { min-height:54px; display:flex; align-items:center; padding:8px 16px; }
.hero-auction-time { padding:14px 16px; border-bottom:1px solid #343b45; }
.hero-auction-time>span,.hero-auction-stats span { display:block; color:#aab3bf; font-size:11px; }
.hero-auction-time>strong { display:block; margin:6px 0; color:#eef0f3; font:600 29px/1.1 var(--f-clock); letter-spacing:.06em; }
.hero-auction-time>small { color:#aab3bf; font-size:10px; }
.hero-auction-stats { display:grid; grid-template-columns:1fr 1fr; padding:12px 0; border-bottom:1px solid #343b45; background:#10151c; }
.hero-auction-stats>div { padding:0 16px; }
.hero-auction-stats>div+div { border-left:1px solid #343b45; }
.hero-auction-stats strong { display:block; margin-top:6px; color:#eef0f3; font:700 19px/1.2 var(--f-head); }
.hero-auction-stats small { font-size:9px; color:#aab3bf; }
.hero-auction-action { padding:14px 16px; }
.hero-auction-action .nx-button { display:flex; justify-content:center; width:100%; min-height:38px; padding:10px; font-size:11px; }
.hero-auction-popup[hidden] { display:none; }
@media(max-width:620px) { .hero-auction-popup.nx { right:12px; width:240px; --section-title-size:23px; } }

/* Approved laptop anchor: the sponsor surface follows the image at every size. */
.lb-fish { aspect-ratio:1; }
.lb-fish > img { display:block; width:100%; height:100%; object-fit:contain; }
.hero-laptop-ad { position:absolute; left:29%; top:68%; width:36%; height:9%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:#dce0e5; text-decoration:none; pointer-events:auto; background:rgba(8,12,16,.35); border:1px solid rgba(255,255,255,.14); font-size:clamp(8px,1vw,15px); }
.hero-laptop-ad span { font-size:.65em; color:#aab1bb; }
.hero-laptop-ad:hover { border-color:#e7192a; background:rgba(8,12,16,.6); }
.hero-laptop-ad:focus-visible { outline:2px solid #e7192a; outline-offset:3px; }
.smoke-wisps { left:79.5%; top:41.5%; }
.lb-fish, .lb-fish-grain, .lb-smoke { height:calc(100% - var(--hero-banner-height, 180px)); }

/* NFT-inspired treatment stays on the artwork, preserving the live ad text. */
.lb-fish > img { filter:url(#anchor-chromatic); }
.lb-fish-grain { background:var(--grain-heavy); mix-blend-mode:soft-light; opacity:.32; }

/* User-supplied transparent artwork, kept unmodified at its native crop. */
.lb-fish, .lb-fish-grain, .lb-smoke { aspect-ratio:1375 / 1899; }
.hero-laptop-ad { left:22%; top:63.5%; width:54%; height:12.8%; }
.smoke-wisps { left:98%; top:36.6%; }

/* Preserve the SVG ratio so its bottom touches the cigarette without letterboxing. */
.smoke-wisps { left:98.3%; top:36.6%; width:18%; height:auto; aspect-ratio:100 / 240; }
.smoke-wisps path { transform-box:view-box; transform-origin:50% 100%; animation:smoke-curl 10s ease-in-out infinite; }
.smoke-wisps path:nth-child(2) { animation-duration:14s; animation-delay:-6s; opacity:.55; }
@keyframes smoke-curl { 0%,100% { transform:skewX(-4deg) scaleX(.85); } 50% { transform:skewX(5deg) scaleX(1.1); } }
@media(prefers-reduced-motion:reduce) { .smoke-wisps path { animation:none; } }

.smoke-flow { position:absolute; left:98.3%; top:36.6%; width:22%; height:auto; aspect-ratio:100 / 240; transform:translate(-50%,-100%); pointer-events:none; }

/* Smaller anchor seated on the banner at the lower-left of the board. */
.lb-fish, .lb-fish-grain, .lb-smoke {
  left:clamp(24px, 7vw, 112px);
  transform:none;
  height:calc((100% - var(--hero-banner-height, 180px)) * .90);
}
.lb-fish-grain { mix-blend-mode:hard-light; opacity:.52; }
.hero-laptop-ad { font-size:clamp(7px, .65vw, 11px); }
.hero-laptop-ad strong { white-space:nowrap; }
.lb-fish-grain { mix-blend-mode:soft-light; opacity:.38; }

/* Shared bidder artwork uses the laptop aperture without changing the anchor. */
.hero-laptop-ad>img { width:90%; height:70%; min-height:0; object-fit:contain; filter:none; }
.hero-laptop-ad>strong { max-width:100%; overflow:hidden; text-overflow:ellipsis; }

#board .ad { margin-block:4px; }
.hero-laptop-ad { top:64.4%; height:11%; }
.own-grid .ad,.holds .own-grid .ad { height:44px; }
.book-grid .ad { height:clamp(34px,3.5vw,46px); }

.lower-third .lt-credit{position:relative;display:block;margin-top:6px;color:#555d65;font:500 12px/1.3 var(--f-head);letter-spacing:.02em;text-transform:none}