/* LNTV — palette, type and furniture lifted from the Broadcast V2 reel kit
   (src/frame/layouts/broadcastv2.css) so the site and the video read as one
   network. Coordinates are of course fluid here; the ingredients are not. */

:root {
  --black:  #030405;
  --ground: #06070a;
  --plate:  #0b0d11;
  --line:   #23272e;
  --line-2: #4c525b;
  --chrome: #d6d9de;
  --paper:  #f3f2ee;
  --alert:  #c9141d;
  --up:     #43bd83;
  --down:   #e24d57;
  --dim:    #8b929c;

  /* Saira is a squarish grotesque — it shares the flat terminals and boxy
     counters of the chrome wordmark. Chakra Petch's cut corners read as
     broadcast hardware on the clock. Martian Mono is engineered and wide,
     which is exactly what a price tape wants. */
  --f-head: "Saira", "Arial Narrow", Arial, sans-serif;
  --f-clock: "Chakra Petch", "Eurostile Extended", sans-serif;
  --f-data: "Martian Mono", ui-monospace, monospace;

  --gut: clamp(18px, 4vw, 64px);
  --maxw: 1400px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 150px; }
body {
  margin: 0;
  background: var(--black);
  color: var(--paper);
  font-family: var(--f-head);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; letter-spacing: -.03em; text-transform: uppercase; }

/* ---------------------------------------------------------------- masthead */

.masthead {
  position: sticky; top: 0; z-index: 50;
  background: repeating-linear-gradient(0deg, #050607 0 3px, #111318 3px 5px);
  border-bottom: 1px solid var(--line);
}
.smpte {
  height: 26px;
  background: url('/assets/smpte-signal-strip.svg') left center / auto 100% repeat-x;
  opacity: .9;
}
.masthead-row {
  max-width: var(--maxw); margin: 0 auto; padding: 12px var(--gut);
  display: flex; align-items: center; gap: clamp(14px, 3vw, 40px);
}
.pill {
  display: flex; align-items: center; gap: 12px;
  background: #020304; border-radius: 10px; padding: 8px 16px;
  box-shadow: 0 0 0 2px #101318, 0 8px 22px rgba(0,0,0,.45);
}
.recdot {
  width: 11px; height: 11px; border-radius: 50%;
  background: #ef2531; box-shadow: 0 0 14px #ef2531;
  animation: blink 1.6s steps(1, end) infinite;
}
@keyframes blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .45; } }
.clock {
  font: 400 clamp(20px, 2.4vw, 30px)/.9 var(--f-clock);
  letter-spacing: -.075em; font-variant-numeric: tabular-nums; color: var(--paper);
}
.meridiem { display: flex; flex-direction: column; }
.meridiem i {
  font: 700 11px/1.18 var(--f-data); font-style: normal;
  letter-spacing: .06em; text-transform: uppercase; color: var(--paper);
}

/* The masthead is the approved artwork, never type. Ink-tight ratio is
   5.932:1, so every box that draws it keeps that ratio exactly. */
.wordmark {
  display: block; width: clamp(126px, 15vw, 200px); aspect-ratio: 5.932 / 1;
  background: url('/assets/lntv-chrome-wordmark.png') center / contain no-repeat;
}
.wordmark-big { width: min(520px, 74vw); margin: 0 auto; }

.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); }
.nav a {
  font: 700 13px/1 var(--f-data); letter-spacing: .02em; color: var(--dim);
  padding: 8px 0; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.nav a:hover { color: var(--paper); border-bottom-color: var(--alert); }
.nav .nav-cta {
  color: var(--black); background: var(--chrome); padding: 9px 16px;
  border-radius: 4px; border-bottom: none;
}
.nav .nav-cta:hover { background: var(--paper); color: var(--black); border-bottom-color: transparent; }
.navtoggle {
  display: none; margin-left: auto; background: none; border: 1px solid var(--line-2);
  color: var(--paper); font-size: 18px; border-radius: 5px; padding: 4px 11px; cursor: pointer;
}

/* ------------------------------------------------------------------- tape */

.tape {
  position: relative; display: flex; align-items: stretch;
  background: var(--ground);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  height: 46px; overflow: hidden;
}
.tape-top { position: sticky; top: 0; z-index: 49; }
.tape-flag {
  display: flex; align-items: center; gap: 8px; flex: none;
  padding: 0 16px; background: var(--alert); color: #fff;
  font: 700 13px/1 var(--f-data); letter-spacing: .02em;
}
.tape-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: blink 1.6s steps(1,end) infinite; }
.tape-window { flex: 1; overflow: hidden; display: flex; align-items: center; }
.tape-run { display: flex; align-items: center; white-space: nowrap; will-change: transform; animation: crawl 70s linear infinite; }
.tape:hover .tape-run { animation-play-state: paused; }
@keyframes crawl { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.tape-item { display: inline-flex; align-items: baseline; gap: 10px; padding: 0 26px; }
.tape-item .lbl, .tape-item .val {
  font: 600 15px/1 var(--f-data); font-variant-numeric: tabular-nums; color: var(--paper);
}
.tape-item .lbl { letter-spacing: .02em; }
.tape-item .chg { font: 500 14px/1 var(--f-data); font-variant-numeric: tabular-nums; }
.chg.up { color: var(--up); }
.chg.down { color: var(--down); }

/* --------------------------------------------------------------- sponsors */

/* The sponsor bar is its own strip under the quote line, never mixed into it.
   Marks are LNTV filler until a slot holder's creative is attached; the engine
   swaps them at render time. */
.logorail {
  display: flex; align-items: stretch; height: 56px; overflow: hidden;
  background: var(--ground);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.logorail-flag {
  display: flex; align-items: center; flex: none; padding: 0 16px;
  background: #14181e; border-right: 1px solid var(--line);
  font: 700 11px/1 var(--f-data); letter-spacing: .06em; color: var(--dim);
}
.rail-window { flex: 1; overflow: hidden; display: flex; align-items: center; }
.logorail-run { display: flex; align-items: center; white-space: nowrap; animation: crawl 52s linear infinite; }
.logorail:hover .logorail-run { animation-play-state: paused; }
.logo-unit { display: inline-flex; align-items: center; flex: none; padding: 0 34px; }
.logo-unit img { width: 88px; max-width: none; height: auto; opacity: .62; }
.logo-unit.open {
  flex: none; font: 700 11px/1 var(--f-data); letter-spacing: .06em; color: var(--dim);
  border: 1px dashed var(--line-2); padding: 9px 14px; margin: 0 34px;
}


/* ----------------------------------------------------------------- lander */

/* The model shot is lit on a cool near-white, so the lander is set to that
   same ground and the picture bleeds into it with no frame at all. */
.lander {
  --ground-white: #edeff2;
  background: var(--ground-white); color: #0a0b0d;
  display: grid; grid-template-columns: 1.25fr minmax(280px, 40%);
  align-items: end; gap: clamp(20px, 3vw, 50px);
  padding: clamp(34px, 4.5vw, 66px) var(--gut) 0;
  border-bottom: 3px solid var(--black);
}
.lander-copy { padding-bottom: clamp(28px, 4vw, 60px); }
.slug {
  margin: 0 0 clamp(18px, 2vw, 26px); padding-bottom: 12px;
  border-bottom: 2px solid #0a0b0d;
  font: 600 clamp(10px, .82vw, 12px)/1.5 var(--f-data); letter-spacing: .06em; color: #4a4f57;
}
.lander h1 {
  font: 900 clamp(34px, 4.1vw, 68px)/.9 var(--f-head);
  letter-spacing: -.05em; word-spacing: .08em; color: #08090b;
}
.lander .lede {
  margin: clamp(20px, 2.4vw, 30px) 0 0; max-width: 46ch;
  font: 500 clamp(15px, 1.15vw, 18px)/1.5 var(--f-head); color: #3c414a; letter-spacing: -.005em;
}
.lander .contrast {
  margin: 18px 0 0; font: 700 clamp(14px, 1.05vw, 17px)/1.4 var(--f-head); color: #6a707a;
}
.lander .contrast b { color: #08090b; }
.lander-links { display: flex; flex-wrap: wrap; gap: 26px; margin-top: clamp(24px, 2.6vw, 34px); }
.lander-links a {
  font: 700 13px/1 var(--f-data); letter-spacing: .02em; color: #08090b;
  border-bottom: 2px solid var(--alert); padding-bottom: 7px;
}
.lander-links a::after { content: " →"; }
.lander-links a:hover { color: var(--alert); }

/* He stands on the ground line, not inside a box. The plate is lit on its own
   soft white, so the left edge is feathered out rather than butted against the
   copy — no seam, no frame. */
.lander-shot { align-self: end; }
.lander-shot img {
  width: 100%; display: block;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16%);
  mask-image: linear-gradient(to right, transparent 0, #000 16%);
}

.transmission {
  grid-column: 1 / -1; margin: 0;
  border-top: 1px solid rgba(10,11,13,.22); padding: 12px 0 14px;
  font: 600 clamp(10px, .8vw, 12px)/1 var(--f-data); letter-spacing: .06em; color: #4a4f57;
}

/* ----------------------------------------------------------------- claims */

/* Network promo copy: four flat declarations on rules, not a grid of cards. */
.claims { background: var(--black); border-bottom: 1px solid var(--line); }
.claims-inner { max-width: var(--maxw); margin: 0 auto; padding: clamp(38px, 5vw, 76px) var(--gut); }
.claims-flag {
  margin: 0 0 clamp(18px, 2.2vw, 28px);
  font: 700 11px/1 var(--f-data); letter-spacing: .06em; color: var(--alert);
}
.claims ol { list-style: none; margin: 0; padding: 0; }
.claims li {
  display: grid; grid-template-columns: 56px minmax(0, 1.35fr) minmax(0, .9fr);
  gap: clamp(16px, 2.4vw, 40px); align-items: start;
  border-top: 1px solid var(--line-2); padding: clamp(22px, 2.6vw, 34px) 0;
}
.claims li:last-child { border-bottom: 1px solid var(--line-2); }
.claims .ix { font: 400 14px/1.2 var(--f-clock); letter-spacing: -.05em; color: var(--dim); }
.claims h2 {
  font: 900 clamp(24px, 3.1vw, 46px)/.96 var(--f-head);
  letter-spacing: -.045em; word-spacing: .06em; color: var(--paper);
}
.claims h2 em { font-style: normal; color: var(--alert); }
.claims li p { margin: 0; font: 500 clamp(14px, 1.05vw, 16px)/1.6 var(--f-head); color: #98a0aa; }

/* ------------------------------------------------------------------ bands */

.band { max-width: var(--maxw); margin: 0 auto; padding: clamp(44px, 6vw, 88px) var(--gut); background: var(--black); }
.band-tight { padding-top: clamp(20px, 3vw, 40px); }
.band-head { border-top: 2px solid var(--line-2); padding-top: 16px; margin-bottom: clamp(24px, 3.4vw, 42px); }
.band-head h2 { font: 900 clamp(26px, 4vw, 54px)/.94 var(--f-head); letter-spacing: -.045em; word-spacing: .08em; color: var(--paper); }
.band-head p { margin: 12px 0 0; max-width: 72ch; font: 500 clamp(14px, 1.1vw, 16px)/1.55 var(--f-head); color: #adb4bd; }

.loading { font: 600 13px/1 var(--f-data); letter-spacing: .02em; color: var(--dim); padding: 30px 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 12px/1 var(--f-data); letter-spacing: .06em;
  padding: 13px 22px; border: 1px solid var(--line-2); color: var(--paper);
  background: transparent; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.btn:hover { background: rgba(214,217,222,.09); border-color: var(--chrome); }
.btn-primary { background: var(--chrome); color: var(--black); border-color: var(--chrome); }
.btn-primary:hover { background: var(--paper); }

/* ---------------------------------------------------------------- the CRT */

.crt-bezel {
  position: relative; aspect-ratio: 9 / 16; overflow: hidden;
  border: 2px solid #6a7079; background: #000;
  box-shadow: 0 0 0 5px #0a0c10;
}
.crt-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.crt-tag {
  position: absolute; z-index: 4; top: 10px; left: 10px;
  display: flex; align-items: center; gap: 7px;
  background: rgba(2,3,4,.85); border: 1px solid var(--line-2);
  font: 700 10px/1 var(--f-data); letter-spacing: .06em; color: var(--paper); padding: 7px 9px;
}
.crt-rec { width: 7px; height: 7px; border-radius: 50%; background: #ef2531; box-shadow: 0 0 10px #ef2531; animation: blink 1.6s steps(1,end) infinite; }

/* ------------------------------------------------------------- lead story */

.lead {
  display: grid; grid-template-columns: minmax(220px, 300px) 1fr;
  gap: clamp(20px, 3vw, 40px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: clamp(20px, 2.6vw, 34px) 0; margin-bottom: clamp(22px, 3vw, 36px);
}
.lead[hidden] { display: none; }
.lead-copy { display: flex; flex-direction: column; gap: 14px; }
.slugline { margin: 0; font: 600 11px/1 var(--f-data); letter-spacing: .06em; color: var(--alert); }
.lead-copy h3 { font: 900 clamp(24px, 2.9vw, 42px)/.98 var(--f-head); letter-spacing: -.04em; color: var(--paper); }
.lead-copy p { margin: 0; font: 500 clamp(15px, 1.15vw, 17px)/1.55 var(--f-head); color: #b4bbc4; max-width: 60ch; }
.lead-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.lead-bullets li {
  font: 700 13px/1 var(--f-data); letter-spacing: .02em; color: var(--dim);
  border-top: 1px solid var(--line); padding: 11px 0;
}
.srcs { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.srcs a {
  font: 500 11px/1 var(--f-data); letter-spacing: .06em; color: var(--dim);
  border: 1px solid var(--line); padding: 6px 9px;
}
.srcs a:hover { color: var(--paper); border-color: var(--line-2); }

/* ------------------------------------------------------------- reel cards */

.reelgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.reel { display: flex; flex-direction: column; border-top: 2px solid var(--line-2); padding-top: 14px; }
.reel-video { position: relative; background: #000; aspect-ratio: 9 / 16; border: 1px solid var(--line); }
.reel-video video { width: 100%; height: 100%; object-fit: cover; }
.reel-play {
  position: absolute; inset: 0; z-index: 5; display: grid; place-items: center;
  background: rgba(3,4,5,.38); border: none; cursor: pointer; color: var(--paper);
  font: 700 11px/1 var(--f-data); letter-spacing: .06em; transition: background .15s;
}
.reel-play:hover { background: rgba(3,4,5,.12); }
.reel-play span {
  border: 2px solid var(--paper); border-radius: 50%; width: 54px; height: 54px;
  display: grid; place-items: center; font-size: 18px; letter-spacing: 0; margin-bottom: 9px;
}
.reel-play.hidden { display: none; }
.reel-meta { padding: 14px 0 0; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.reel-stamp { font: 600 10px/1.5 var(--f-data); letter-spacing: .06em; color: var(--dim); }
.reel h3 { font: 800 clamp(16px, 1.35vw, 19px)/1.12 var(--f-head); letter-spacing: -.03em; color: var(--paper); }
.reel p { margin: 0; font: 500 13px/1.5 var(--f-head); color: #949ba5; }
.reel .srcs { padding-top: 4px; }

/* --------------------------------------------------------------- the sheets */

/* The rundown is typeset as broadcast paperwork: ruled rows, monospaced
   figures, nothing rounded. */
.sheet { overflow-x: auto; border: 1px solid var(--line); }
.sheet table { width: 100%; min-width: 640px; border-collapse: collapse; background: var(--plate); }
.sheet th {
  text-align: left; padding: 12px 16px; background: #14181e;
  font: 700 10px/1 var(--f-data); letter-spacing: .06em; color: var(--dim);
  border-bottom: 2px solid var(--line-2); white-space: nowrap;
}
.sheet td { padding: 15px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.sheet tbody tr:last-child td { border-bottom: none; }
.sheet tbody tr:hover { background: #0f1319; }

.rundown-table td:first-child { font: 400 15px/1 var(--f-clock); letter-spacing: -.05em; color: var(--alert); width: 1%; }
.rundown-table td:nth-child(2) { font: 800 15px/1.2 var(--f-head); letter-spacing: -.01em; color: var(--paper); white-space: nowrap; }
.rundown-table td:nth-child(3) { font: 500 14px/1.5 var(--f-head); color: #a7aeb8; }
.rundown-table td:last-child { font: 600 11px/1 var(--f-data); letter-spacing: .06em; color: var(--dim); white-space: nowrap; }

/* ---------------------------------------------------------------- adspace */

/* Inventory is sold, not tabulated. The flagship gets the frame it actually
   occupies; the rail gets shown as a rail. Rank drives every size on the page. */
.slots { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 26px); }
.slot { border: 1px solid var(--line-2); background: var(--plate); display: grid; }
.slot-hero { grid-template-columns: 1.15fr 1fr; border-width: 2px; }
.slot-second { grid-template-columns: .85fr 1fr; }

.slot-shot { position: relative; background: #000; border-right: 1px solid var(--line); overflow: hidden; }
.slot-shot > img { width: 100%; height: 100%; object-fit: cover; }
.slot-badge {
  position: absolute; left: 14px; top: 14px;
  background: rgba(2,3,4,.86); border: 1px solid var(--line-2);
  font: 700 10px/1 var(--f-data); letter-spacing: .06em; color: var(--paper); padding: 8px 10px;
}
.slot-shot-rail { display: grid; place-items: center; padding: 26px 0; background: var(--ground); }
.railpreview {
  display: flex; align-items: center; width: 100%; overflow: hidden;
  background: #06070a; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  height: 56px;
}
.railpreview-flag {
  flex: none; padding: 0 14px; align-self: stretch; display: flex; align-items: center;
  background: #14181e; border-right: 1px solid var(--line);
  font: 700 10px/1 var(--f-data); letter-spacing: .06em; color: var(--dim);
}
.railpreview .logo-unit { padding: 0 22px; }
.railpreview .logo-unit img { width: 66px; }
.railpreview .logo-unit.open { margin: 0 18px; border-color: var(--alert); color: var(--paper); }

.slot-body { padding: clamp(22px, 2.6vw, 36px); display: flex; flex-direction: column; gap: 14px; }
.slot-rank { margin: 0; font: 700 10px/1 var(--f-data); letter-spacing: .06em; color: var(--alert); }
.slot h3 { font: 900 clamp(26px, 3.4vw, 48px)/.94 var(--f-head); letter-spacing: -.045em; color: var(--paper); }
.slot-second h3 { font-size: clamp(22px, 2.4vw, 34px); }
.slot-line { margin: 0; font: 500 clamp(15px, 1.2vw, 18px)/1.5 var(--f-head); color: #c3c8d0; }
.slot-perks { list-style: none; margin: 0; padding: 0; }
.slot-perks li {
  position: relative; padding: 11px 0 11px 22px;
  border-top: 1px solid var(--line); font: 500 14px/1.5 var(--f-head); color: #949ba5;
}
.slot-perks li::before { content: ""; position: absolute; left: 0; top: 18px; width: 9px; height: 9px; background: var(--chrome); }

.slot-buy {
  margin-top: auto; padding-top: 18px; border-top: 2px solid var(--line-2);
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(14px, 2vw, 26px);
}
.slot-price { margin: 0; display: flex; align-items: baseline; gap: 7px; }
.slot-price b { font: 600 clamp(28px, 3vw, 40px)/1 var(--f-data); font-variant-numeric: tabular-nums; color: var(--paper); }
.slot-price i { font: 600 10px/1 var(--f-data); font-style: normal; letter-spacing: .06em; color: var(--dim); }
.slot-avail { margin: 0; font: 700 11px/1.6 var(--f-data); letter-spacing: .06em; color: var(--up); }
.slot-avail span { display: block; font-weight: 600; color: var(--dim); letter-spacing: .1em; }
.slot.held .slot-avail { color: var(--dim); }
.slot-buy .btn { margin-left: auto; }

/* The absence of inventory is itself a pitch. */
.nosell {
  margin-top: clamp(20px, 2.6vw, 34px); border-left: 3px solid var(--alert);
  padding: 4px 0 4px 20px; max-width: 78ch;
}
.nosell h3 { font: 800 clamp(15px, 1.3vw, 18px)/1 var(--f-head); color: var(--paper); margin-bottom: 10px; }
.nosell p { margin: 0; font: 500 15px/1.6 var(--f-head); color: #a7aeb8; }

.howto { margin-top: clamp(30px, 4vw, 52px); border-top: 2px solid var(--line-2); padding-top: 20px; }
.howto h3 { font: 800 clamp(15px, 1.3vw, 18px)/1 var(--f-head); color: var(--paper); margin-bottom: 6px; }
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 clamp(16px, 2vw, 30px); }
.steps li {
  counter-increment: step; padding: 16px 0 4px;
  font: 500 14px/1.5 var(--f-head); color: #a7aeb8;
}
.steps li::before {
  content: counter(step, decimal-leading-zero); display: block; margin-bottom: 8px;
  font: 400 13px/1 var(--f-clock); letter-spacing: -.05em; color: var(--alert);
}
.howto-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 24px; }
.fineprint {
  flex: 1 1 320px; font: 500 11px/1.6 var(--f-data); color: var(--dim);
  border-left: 2px solid var(--line-2); padding-left: 12px; margin: 0;
}

/* --------------------------------------------------------------- network */

/* Set as newspaper columns — running text, not a grid of claim cards. */
.manifesto { columns: 3 260px; column-gap: clamp(24px, 3vw, 46px); }
.manifesto p { margin: 0 0 16px; font: 500 15px/1.6 var(--f-head); color: #b4bbc4; break-inside: avoid; }
.manifesto p:first-child::first-letter {
  float: left; font: 900 62px/.78 var(--f-head); color: var(--paper);
  margin: 4px 10px 0 0; letter-spacing: -.04em;
}
.pullquote {
  margin: clamp(28px, 4vw, 48px) 0 0; background: var(--paper); color: #050505;
  font: 900 clamp(21px, 3.2vw, 46px)/1.02 var(--f-head); letter-spacing: -.045em; word-spacing: .1em;
  text-transform: uppercase; padding: clamp(24px, 3.6vw, 50px) clamp(20px, 3.6vw, 52px);
}
.pullquote em { font-style: normal; color: var(--alert); }

/* ------------------------------------------------------------ on location */

.locationband { margin: 0; border-top: 1px solid var(--line); background: #000; }
.locationband[hidden] { display: none; }
.locationband img { width: 100%; height: clamp(220px, 34vw, 520px); object-fit: cover; object-position: center 42%; }
.locationband figcaption {
  font: 600 10px/1 var(--f-data); letter-spacing: .06em; color: var(--dim);
  padding: 12px var(--gut); border-top: 1px solid var(--line);
}

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

.footer { border-top: 1px solid var(--line); padding: clamp(38px, 5vw, 64px) var(--gut); text-align: center; background: var(--ground); }
.footer-line { margin: 18px 0 0; font: 600 11px/1 var(--f-data); letter-spacing: .06em; color: var(--dim); }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin: 22px 0 0; }
.footer-nav a { font: 700 12px/1 var(--f-data); letter-spacing: .06em; color: var(--dim); }
.footer-nav a:hover { color: var(--paper); }
.footer-copy { margin: 26px 0 0; font: 600 11px/1.6 var(--f-data); letter-spacing: .06em; color: #6d737c; }

/* ------------------------------------------------------------------ modal */

.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: rgba(2,3,4,.82); }
.modal[hidden] { display: none; }
.modal-card { position: relative; width: min(520px, 100%); background: var(--plate); border: 2px solid var(--line-2); box-shadow: inset 0 0 0 2px rgba(214,217,222,.08), 0 30px 80px rgba(0,0,0,.7); padding: 30px; }
.modal-x { position: absolute; top: 12px; right: 12px; background: none; border: none; color: var(--dim); font-size: 16px; cursor: pointer; }
.modal-x:hover { color: var(--paper); }
.modal-kicker { font: 600 11px/1 var(--f-data); letter-spacing: .06em; color: var(--alert); margin-bottom: 14px; }
.modal-card h3 { font: 900 clamp(24px, 3vw, 34px)/1 var(--f-head); letter-spacing: -.04em; color: var(--paper); }
.modal-card p { margin: 14px 0 0; font: 500 15px/1.55 var(--f-head); color: #adb4bd; }
.modal-rows { margin: 20px 0 0; border-top: 1px solid var(--line); }
.modal-rows div { display: flex; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); padding: 12px 0; font: 600 12px/1 var(--f-data); letter-spacing: .06em; }
.modal-rows span:first-child { color: var(--dim); }
.modal-btn { margin-top: 24px; width: 100%; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1040px) {
  .slot-hero, .slot-second { grid-template-columns: 1fr; }
  .slot-shot { border-right: none; border-bottom: 1px solid var(--line); }
  .slot-hero .slot-shot { aspect-ratio: 16 / 9; }
  .lead { grid-template-columns: 1fr; }
  .lead-screen { max-width: 300px; }
}
@media (max-width: 860px) {
  .claims li { grid-template-columns: 40px 1fr; }
  .claims li p { grid-column: 2; }
  .lander { grid-template-columns: 1fr; align-items: start; }
  .lander-copy { padding-bottom: 0; max-width: none; }
  .lander-shot { max-width: 420px; margin-inline: auto; }
}
@media (max-width: 780px) {
  .nav {
    position: absolute; top: 100%; left: 0; right: 0; display: none;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #080a0e; border-bottom: 1px solid var(--line); padding: 8px var(--gut) 16px;
  }
  .nav.open { display: flex; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav .nav-cta { margin-top: 12px; text-align: center; padding: 14px 16px; }
  .navtoggle { display: block; }
  .masthead-row { position: relative; }
  .meridiem { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tape-run, .logorail-run, .recdot, .tape-dot, .crt-rec { animation: none; }
}