/* Loge, logetv.com
   ------------------------------------------------------------------
   One rule governs this page: nothing is warm until it is focused.
   The app has no cursor: exactly one thing on a television screen is
   lit, and the heat follows it. So ember never appears on a label, a
   bullet, a border or an idle heading. It appears on the thing you are
   pointing at, and nowhere else.

   Hierarchy comes from Archivo's width axis (62 to 125), not from weight:
   condensed marquee display against extended small-caps utility.
   Tokens mirror design/TOKENS.md.
   ponytail: hand-written CSS, no framework, no build step, no JS. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/font/archivo.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The app is used in a dark room by design (PRODUCT.md, Accessibility), so the
   site is dark-only on purpose rather than by omission. Declared to the UA so
   scrollbars and form controls render correctly. */
:root {
  color-scheme: dark;
  --auditorium: #05060A;   /* the room */
  --house: #0B0D14;        /* raised ground */
  --rail: #171B26;         /* hairlines */
  --limelight: #F2EDE7;    /* text, never #FFF */
  --cold: #8D93A5;         /* everything unfocused */
  --colder: #5C6478;       /* metadata */
  --ember: #FF6B2C;        /* the one warm thing */
  --halo: #FFB067;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --rail-w: 1180px;
  --pad: clamp(20px, 5vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--auditorium);
  color: var(--limelight);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-variation-settings: 'wdth' 100, 'wght' 400;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

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

.wrap, .rail { width: 100%; max-width: var(--rail-w); margin: 0 auto; padding-inline: var(--pad); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ember); color: #140A05; padding: 12px 20px;
  font-variation-settings: 'wdth' 118, 'wght' 700;
}
.skip:focus { left: 0; }

/* ================================================== type roles */

/* Utility: extended, small, letterspaced. The counterweight to the display. */
.label {
  font-size: 11.5px;
  font-variation-settings: 'wdth' 125, 'wght' 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--colder);
  margin: 0;
}

/* Display: condensed marquee. */
.marquee {
  display: block;
  font-variation-settings: 'wdth' 62, 'wght' 700;
  font-size: clamp(54px, 15.2vw, 196px);
  line-height: .86;
  letter-spacing: -.014em;
  text-transform: uppercase;
  margin: 0;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.06; letter-spacing: -.012em; font-weight: 400; }

h2 {
  font-variation-settings: 'wdth' 72, 'wght' 700;
  font-size: clamp(34px, 5.6vw, 66px);
  line-height: .96;
  text-transform: uppercase;
}

h3 { font-variation-settings: 'wdth' 104, 'wght' 600; font-size: 20px; line-height: 1.25; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(18px, 2.1vw, 21px);
  line-height: 1.55;
  color: var(--limelight);
  max-width: 46ch;
}

.muted { color: var(--colder); font-size: 15px; }
.dim { color: var(--cold); }

/* ================================================== bands */

.band { padding-block: clamp(72px, 10vw, 140px); border-top: 1px solid var(--rail); }
.band-head { margin-bottom: clamp(40px, 5vw, 68px); }
.band-head .label { margin-bottom: 22px; }
.band-head p { color: var(--cold); max-width: 52ch; margin-top: 22px; font-size: 18px; }

/* ================================================== header */

header.site {
  position: sticky; top: 0; z-index: 60;
  background: rgba(5, 6, 10, .88);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--rail);
}

.bar { display: flex; align-items: center; gap: 22px; height: 66px; }

.brand {
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none; margin-right: auto;
  font-size: 17px; font-variation-settings: 'wdth' 125, 'wght' 700;
  letter-spacing: .2em; text-transform: uppercase;
}
.brand svg { flex: 0 0 auto; }

nav.main { display: flex; gap: 28px; }
nav.main a {
  text-decoration: none; color: var(--cold);
  font-size: 11.5px; font-variation-settings: 'wdth' 125, 'wght' 700;
  letter-spacing: .18em; text-transform: uppercase;
  transition: color .3s var(--ease);
}
nav.main a:hover { color: var(--limelight); }

@media (max-width: 900px) { nav.main { display: none; } }

/* ================================================== shape lock
   ONE radius system for page chrome: every interactive control is 8px. The
   store badges bake ~8px into their own artwork and cannot be altered, so the
   page matches them rather than fighting them. The interfaces drawn inside
   the device screens keep the app's own radius scale, because those are a
   picture of another product, not page chrome. */

/* ================================================== the lit control */

/* The only element on the page that is warm without being pointed at:
   the page's own current focus, standing in for the app's focus ring. */
.lit {
  position: relative;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 17px 30px; min-height: 54px; border-radius: 8px;
  background: var(--ember); color: #140A05;
  text-decoration: none; border: 1px solid var(--ember);
  font-size: 12.5px; font-variation-settings: 'wdth' 118, 'wght' 700;
  letter-spacing: .18em; text-transform: uppercase;
  box-shadow: 0 0 0 3px rgba(255, 107, 44, .22), 0 0 60px -6px rgba(255, 107, 44, .55);
  transition: box-shadow .42s var(--ease), transform .3s var(--ease);
}
.lit:hover { transform: translateY(-2px); box-shadow: 0 0 0 5px rgba(255, 107, 44, .26), 0 0 80px -4px rgba(255, 107, 44, .7); }

.cold-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 17px 26px; min-height: 54px; border-radius: 8px;
  color: var(--cold); text-decoration: none;
  border: 1px solid var(--rail);
  font-size: 12.5px; font-variation-settings: 'wdth' 118, 'wght' 700;
  letter-spacing: .18em; text-transform: uppercase;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.cold-btn:hover { color: var(--limelight); border-color: var(--cold); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* Legal/404 pages reuse these names. */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; min-height: 46px; border-radius: 8px;
  text-decoration: none; font-size: 11.5px; font-variation-settings: 'wdth' 118, 'wght' 700;
  letter-spacing: .16em; text-transform: uppercase; border: 1px solid var(--rail); color: var(--cold);
  transition: color .3s var(--ease), border-color .3s var(--ease); }
.btn:hover { color: var(--limelight); border-color: var(--cold); }
.btn-primary { background: var(--ember); border-color: var(--ember); color: #140A05;
  box-shadow: 0 0 40px -8px rgba(255, 107, 44, .5); }
.btn-primary:hover { color: #140A05; border-color: var(--ember); }
.btn-sm { padding: 11px 18px; min-height: 40px; }
.btn-ghost { }

/* ================================================== hero */

.hero { padding-block: clamp(44px, 6vw, 88px) clamp(48px, 7vw, 92px); border-top: none; }

.hero h1 .plain {
  display: block; margin-top: 30px;
  font-size: clamp(19px, 2.4vw, 28px);
  font-variation-settings: 'wdth' 100, 'wght' 500;
  line-height: 1.3; letter-spacing: -.005em;
  color: var(--cold); text-transform: none; max-width: 38ch;
}

.hero-foot { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(34px, 4vw, 48px); }

/* The single most important sentence on the site. A rule, not a box. */
.honest-strip { border-top: 1px solid var(--rail); padding-block: clamp(30px, 4vw, 46px); }
.honest {
  display: flex; flex-wrap: wrap; gap: 12px 40px; align-items: baseline;
}
.honest .label { flex: 0 0 auto; }
.honest p { flex: 1 1 460px; color: var(--cold); font-size: 17px; max-width: 74ch; margin: 0; }
.honest b { color: var(--limelight); font-variation-settings: 'wdth' 100, 'wght' 600; }

/* ================================================== device mockups
   Every screen below is drawn in CSS, not photographed, and the content in
   it is invented: generic channel names, artwork-free poster tiles. Real
   channel names or real posters would imply Loge supplies content. */

.stage-band {
  border-top: 1px solid var(--rail);
  padding-block: clamp(50px, 7vw, 96px);
  position: relative; overflow: hidden;
}
.stage-band::before {
  content: ''; position: absolute; inset: -20% -10% auto -10%; height: 760px;
  background: radial-gradient(46% 56% at 40% 46%, rgba(255, 107, 44, .15) 0%, transparent 66%);
  pointer-events: none;
}
.stage-band > .rail { position: relative; }

.screen {
  container-type: inline-size;
  background: linear-gradient(180deg, #0A0C12 0%, #05060A 100%);
  position: relative; overflow: hidden;
}
.screen::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(64% 100% at 18% 78%, rgba(255, 107, 44, .16) 0%, transparent 62%);
}
.screen > * { position: relative; z-index: 1; }

/* ---------- shared screen furniture (sized in cqw, so it scales with the frame) */

.sc-bar { display: flex; align-items: center; gap: 2cqw; }
.sc-brand {
  display: inline-flex; align-items: center; gap: 1cqw;
  font-variation-settings: 'wdth' 125, 'wght' 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--limelight);
}
.sc-dot {
  border-radius: 50%; flex: 0 0 auto;
  background: radial-gradient(circle at 35% 35%, #FFB067, #FF6B2C 60%, #C2410C);
  box-shadow: 0 0 2cqw .4cqw rgba(255, 107, 44, .75);
}
.sc-tabs { display: flex; margin-left: auto; color: var(--colder);
  font-variation-settings: 'wdth' 118, 'wght' 700; letter-spacing: .16em; text-transform: uppercase; }
.sc-tabs b { color: var(--limelight); }
.sc-row-label {
  font-variation-settings: 'wdth' 125, 'wght' 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--colder); margin: 0;
}
.sc-plate {
  flex: 0 0 auto; position: relative; overflow: hidden; aspect-ratio: 16 / 9;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07);
  display: flex; align-items: center; color: var(--cold);
  font-variation-settings: 'wdth' 112, 'wght' 700;
}
.sc-plate::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(130% 150% at 8% 110%, var(--tint, #141C2B) 0%, transparent 62%);
}
.sc-plate span { position: relative; z-index: 1; }
.sc-plate.on {
  color: var(--limelight); background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 140, 74, .9);
  box-shadow: 0 0 0 .28cqw rgba(255, 107, 44, .55), 0 0 6cqw -.6cqw rgba(255, 107, 44, .6);
}
.sc-poster {
  flex: 0 0 auto; position: relative; overflow: hidden; aspect-ratio: 2 / 3;
  background: linear-gradient(158deg, var(--tint, #171B26), #0A0D14);
  border: 1px solid rgba(255, 255, 255, .06);
}
.sc-poster i {
  position: absolute; right: 6%; top: 5%; font-style: normal;
  color: var(--limelight); background: rgba(0, 0, 0, .5);
  padding: .3cqw .8cqw; border-radius: 1cqw;
  font-variation-settings: 'wdth' 100, 'wght' 600;
}
.sc-poster b {
  position: absolute; left: 8%; right: 8%; bottom: 8%; height: .7cqw; border-radius: 1cqw;
  background: rgba(255, 255, 255, .12);
}
.sc-poster b::after {
  content: ''; position: absolute; inset: 0 62% 0 0; border-radius: 1cqw; background: var(--ember);
}
.sc-poster.on {
  border-color: rgba(255, 140, 74, .9);
  box-shadow: 0 0 0 .28cqw rgba(255, 107, 44, .55), 0 0 6cqw -.6cqw rgba(255, 107, 44, .6);
}

/* ---------- the television */

.tv-set { max-width: 960px; margin: 0 auto; }
.tv-set .bezel {
  padding: 1.1%; border-radius: 12px;
  background: linear-gradient(160deg, #2A3040 0%, #12151E 46%, #080A10 100%);
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.tv-set .screen { aspect-ratio: 16 / 9; border-radius: 5px; }
.tv-set .stand { display: flex; flex-direction: column; align-items: center; }
.tv-set .neck {
  width: 11%; height: 22px;
  background: linear-gradient(180deg, #1B1F2A, #0E111A);
  clip-path: polygon(28% 0, 72% 0, 100% 100%, 0 100%);
}
.tv-set .foot {
  width: 30%; height: 7px; border-radius: 0 0 6px 6px;
  background: linear-gradient(180deg, #232836, #0C0F16);
  box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .9);
}

.tv-set .screen { padding: 3.4cqw 0 3.4cqw 3.6cqw; }
.tv-set .sc-bar { font-size: 1.35cqw; padding-right: 3.6cqw; }
.tv-set .sc-dot { width: 1.1cqw; height: 1.1cqw; }
.tv-set .sc-tabs { gap: 2.4cqw; font-size: 1.15cqw; }
.tv-set .sc-row-label { font-size: 1.05cqw; margin: 3.4cqw 0 1.4cqw; }
.tv-set .sc-strip { display: flex; gap: 1.5cqw; }
.tv-set .sc-plate { width: 20.5cqw; border-radius: 1.1cqw; padding: 0 1.4cqw; font-size: 1.5cqw; }
.tv-set .sc-poster { width: 12cqw; border-radius: .9cqw; font-size: .95cqw; }

/* ---------- laptop, tablet, phone: the family row */

.family {
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(18px, 3.4vw, 46px); flex-wrap: wrap;
}
.mac { flex: 1 1 460px; max-width: 620px; }
.tablet { flex: 0 1 286px; max-width: 310px; }
.phone { flex: 0 1 176px; max-width: 190px; }

.mac .lid {
  padding: 1.4% 1.4% 1.4%;
  border-radius: 11px 11px 3px 3px;
  background: linear-gradient(160deg, #2B3141 0%, #12151E 50%, #090B11 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09);
}
.mac .screen { aspect-ratio: 16 / 10; border-radius: 4px; display: flex; }
.mac .base {
  height: 12px; width: 116%; margin-left: -8%; border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, #333A49 0%, #1C212C 40%, #0B0E14 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .1) inset, 0 26px 46px -18px rgba(0, 0, 0, .95);
  position: relative;
}
.mac .base::after {
  content: ''; position: absolute; left: 50%; top: 0; width: 14%; height: 4px;
  transform: translateX(-50%); border-radius: 0 0 5px 5px; background: rgba(0, 0, 0, .6);
}

.mac .sidebar {
  width: 21%; height: 100%; padding: 4cqw 0 4cqw 3cqw;
  border-right: 1px solid rgba(255, 255, 255, .06);
  display: flex; flex-direction: column; gap: 2.4cqw;
  font-size: 1.8cqw;
}
.mac .sidebar .sc-brand { font-size: 1.7cqw; margin-bottom: 1.6cqw; }
.mac .sidebar .sc-dot { width: 1.4cqw; height: 1.4cqw; }
.mac .sidebar span { color: var(--colder); font-variation-settings: 'wdth' 104, 'wght' 500; }
.mac .sidebar span.on {
  color: var(--limelight); position: relative;
}
.mac .sidebar span.on::before {
  content: ''; position: absolute; left: -3cqw; top: -.4cqw; bottom: -.4cqw;
  width: .5cqw; background: var(--ember); box-shadow: 0 0 2cqw .2cqw rgba(255, 107, 44, .7);
}
.mac .pane { flex: 1; padding: 4cqw 0 4cqw 3cqw; min-width: 0; }
.mac .sidebar span:last-child { margin-top: auto; }
.mac .sc-row-label { font-size: 1.5cqw; margin: 0 0 2cqw; }
.mac .sc-row-label + .sc-row-label { margin-top: 3cqw; }
.mac .sc-strip { display: flex; gap: 1.8cqw; }
.mac .sc-plate { width: 24cqw; border-radius: 1.2cqw; padding: 0 1.6cqw; font-size: 1.9cqw; }
.mac .sc-poster { width: 14cqw; border-radius: 1cqw; font-size: 1.3cqw; }

.tablet .bezel {
  padding: 3.6%; border-radius: 18px;
  background: linear-gradient(160deg, #2A3040 0%, #12151E 50%, #090B11 100%);
  box-shadow: 0 40px 80px -34px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.tablet .screen { aspect-ratio: 4 / 3; border-radius: 6px; padding: 5cqw 0 5cqw 5cqw; }
.tablet .sc-bar { font-size: 2.6cqw; padding-right: 5cqw; }
.tablet .sc-dot { width: 2.2cqw; height: 2.2cqw; }
.tablet .sc-tabs { gap: 3.4cqw; font-size: 2.2cqw; }
.tablet .sc-row-label { font-size: 2.2cqw; margin: 4.6cqw 0 2.4cqw; }
.tablet .sc-strip { display: flex; gap: 2.6cqw; }
.tablet .sc-plate { width: 34cqw; border-radius: 2cqw; padding: 0 2.4cqw; font-size: 3cqw; }
.tablet .sc-poster { width: 21cqw; border-radius: 1.6cqw; font-size: 2cqw; }

.phone .bezel {
  padding: 4.2%; border-radius: 26px;
  background: linear-gradient(160deg, #2C3242 0%, #12151E 50%, #090B11 100%);
  box-shadow: 0 34px 66px -28px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .09);
}
.phone .screen { aspect-ratio: 9 / 19.5; border-radius: 20px; padding: 9cqw 0 14cqw 6cqw; }
.phone .sc-tabbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 11cqw;
  display: flex; justify-content: space-around; align-items: center;
  border-top: 1px solid rgba(255, 255, 255, .07); background: rgba(5, 6, 10, .82);
  font-size: 2.5cqw; letter-spacing: .12em; text-transform: uppercase;
  font-variation-settings: 'wdth' 118, 'wght' 700; color: var(--colder);
}
.phone .sc-tabbar b { color: var(--ember); }
.phone .island {
  position: absolute; z-index: 2; left: 50%; top: 2.6cqw; transform: translateX(-50%);
  width: 30%; height: 3.6cqw; border-radius: 4cqw; background: #05060A;
}
.phone .sc-bar { font-size: 3.4cqw; padding-right: 6cqw; }
.phone .sc-dot { width: 3cqw; height: 3cqw; }
.phone .sc-search {
  margin-left: auto; width: 5.4cqw; height: 5.4cqw; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .14);
}
.phone .sc-row-label { font-size: 3cqw; margin: 6cqw 0 3cqw; }
.phone .sc-strip { display: flex; gap: 3cqw; }
.phone .sc-plate { width: 46cqw; border-radius: 3cqw; padding: 0 3cqw; font-size: 4.4cqw; }
.phone .sc-poster { width: 29cqw; border-radius: 2.4cqw; font-size: 3cqw; }
.phone .sc-hero {
  margin-right: 6cqw; margin-bottom: 2cqw; aspect-ratio: 16 / 10; border-radius: 3cqw;
  background: linear-gradient(150deg, #241A2E, #0D1017 70%);
  border: 1px solid rgba(255, 140, 74, .85);
  box-shadow: 0 0 0 .7cqw rgba(255, 107, 44, .4), 0 0 14cqw -2cqw rgba(255, 107, 44, .55);
  position: relative; overflow: hidden;
}
.phone .sc-hero em {
  position: absolute; left: 5cqw; bottom: 4.6cqw; font-style: normal;
  color: var(--limelight); font-size: 4.6cqw;
  font-variation-settings: 'wdth' 96, 'wght' 700;
}
.phone .sc-hero u {
  position: absolute; left: 5cqw; bottom: 2.4cqw; text-decoration: none;
  color: var(--colder); font-size: 2.7cqw; letter-spacing: .1em; text-transform: uppercase;
  font-variation-settings: 'wdth' 118, 'wght' 700;
}

.device-caption {
  margin: clamp(30px, 4vw, 48px) 0 0; text-align: center;
  color: var(--colder); font-size: 13px; letter-spacing: .03em;
}
.family-label {
  display: block; margin-top: 16px; text-align: center;
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  font-variation-settings: 'wdth' 125, 'wght' 700; color: var(--colder);
}

@media (max-width: 620px) {
  .family { gap: 26px; }
  .mac { flex: 1 1 100%; max-width: 100%; }
  .tablet { flex: 1 1 46%; }
  .phone { flex: 0 1 128px; }
}

/* ================================================== interface strip */

.strip {
  margin-top: clamp(48px, 7vw, 88px);
  border-top: 1px solid var(--rail); border-bottom: 1px solid var(--rail);
  background: linear-gradient(180deg, #0A0C12 0%, #05060A 100%);
  padding: clamp(26px, 4vw, 52px) 0;
  position: relative; overflow: hidden;
  container-type: inline-size;
}
.strip::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 120% at 16% 74%, rgba(255, 107, 44, .17) 0%, transparent 64%);
}
.strip > * { position: relative; z-index: 1; }
.strip-inner { padding-left: var(--pad); max-width: calc(var(--rail-w) + var(--pad)); margin-inline: auto; }

.mock-top { display: flex; align-items: center; gap: 16px; margin-bottom: clamp(22px, 3vw, 34px); }
.mock-brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; letter-spacing: .24em; font-variation-settings: 'wdth' 125, 'wght' 700;
}
.dot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: radial-gradient(circle at 35% 35%, #FFB067, #FF6B2C 60%, #C2410C);
  box-shadow: 0 0 16px 3px rgba(255, 107, 44, .75);
}
.mock-tabs {
  display: flex; gap: 20px; margin-left: auto; padding-right: var(--pad);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  font-variation-settings: 'wdth' 118, 'wght' 700; color: var(--colder);
}
.mock-tabs b { color: var(--limelight); }

.row-label {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  font-variation-settings: 'wdth' 125, 'wght' 700; color: var(--colder);
  margin: 0 0 14px; display: flex; align-items: baseline; gap: 14px;
}
.row-label i {
  font-style: normal; letter-spacing: .01em; text-transform: none;
  font-size: 13px; font-variation-settings: 'wdth' 100, 'wght' 400;
}

.plate-row, .poster-row { display: flex; gap: 14px; }
.plate-row { margin-bottom: clamp(24px, 3.4vw, 40px); }

.plate {
  flex: 0 0 auto; width: 20.5%; min-width: 112px; aspect-ratio: 16 / 9;
  border-radius: 10px; position: relative; overflow: hidden;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .07);
  display: flex; align-items: center; padding: 0 14px;
  font-size: clamp(11px, 1.45cqw, 15px);
  font-variation-settings: 'wdth' 112, 'wght' 700;
  color: var(--cold);
}
.plate::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(130% 150% at 8% 110%, var(--tint, #141C2B) 0%, transparent 62%);
}
.plate span { position: relative; z-index: 1; }
.plate.on {
  color: var(--limelight);
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 140, 74, .9);
  box-shadow: 0 0 0 2px rgba(255, 107, 44, .5), 0 0 48px -6px rgba(255, 107, 44, .55);
  transform: scale(1.045);
}

.poster {
  flex: 0 0 auto; width: 13%; min-width: 74px; aspect-ratio: 2 / 3;
  border-radius: 9px; background: linear-gradient(160deg, #151925, #0B0E15);
  border: 1px solid rgba(255, 255, 255, .06); position: relative; overflow: hidden;
}
.poster::after {
  content: ''; position: absolute; left: 10%; right: 10%; bottom: 11%; height: 5px;
  border-radius: 3px; background: rgba(255, 255, 255, .07);
}
.poster.on {
  border-color: rgba(255, 140, 74, .9);
  box-shadow: 0 0 0 2px rgba(255, 107, 44, .5), 0 0 48px -6px rgba(255, 107, 44, .55);
  transform: scale(1.035);
}
.poster.on::after { background: linear-gradient(90deg, var(--ember) 44%, rgba(255,255,255,.09) 44%); }

.strip-note {
  margin: clamp(22px, 3vw, 34px) 0 0; padding-right: var(--pad);
  font-size: 12.5px; color: var(--colder); letter-spacing: .03em;
}

@media (max-width: 700px) {
  .plate { width: 46%; }
  .poster { width: 27%; }
}

/* ================================================== how: a typed sequence */

.sequence { border-top: 1px solid var(--rail); }
.stage {
  display: grid; grid-template-columns: 92px 1fr 1.05fr; gap: 0 clamp(20px, 4vw, 56px);
  padding: clamp(30px, 4vw, 44px) 0;
  border-bottom: 1px solid var(--rail);
  align-items: baseline;
}
.stage .n {
  font-variation-settings: 'wdth' 62, 'wght' 700;
  font-size: clamp(40px, 5vw, 62px); line-height: .8;
  color: var(--rail); letter-spacing: -.02em;
}
.stage h3 { font-variation-settings: 'wdth' 88, 'wght' 700; font-size: clamp(22px, 2.6vw, 31px);
  text-transform: uppercase; letter-spacing: -.008em; }
.stage p { color: var(--cold); font-size: 16.5px; margin: 0; }
.stage:hover .n { color: var(--ember); transition: color .42s var(--ease); }

@media (max-width: 820px) {
  .stage { grid-template-columns: 54px 1fr; gap: 0 20px; }
  .stage p { grid-column: 2; margin-top: 12px; }
}

/* ================================================== clusters
   Nine capabilities grouped into three, so the section needs three dividers
   instead of nine hairlines. */

.clusters {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 54px);
  border-top: 1px solid var(--rail); padding-top: clamp(30px, 4vw, 46px);
}
.cluster > h3 {
  font-variation-settings: 'wdth' 125, 'wght' 700;
  font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ember); margin-bottom: 26px;
}
.cluster dl { margin: 0; }
.cluster dt {
  font-variation-settings: 'wdth' 92, 'wght' 700; font-size: 17.5px;
  text-transform: uppercase; letter-spacing: .01em; margin-bottom: 6px;
}
.cluster dd { margin: 0 0 26px; color: var(--cold); font-size: 16px; }
.cluster dd:last-child { margin-bottom: 0; }

@media (max-width: 900px) { .clusters { grid-template-columns: 1fr; gap: 40px; } }

/* ================================================== the listing (signature) */

.listing { border-top: 1px solid var(--rail); }

.seat {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr) auto;
  gap: 4px clamp(20px, 3.5vw, 52px);
  align-items: center;
  padding: clamp(26px, 3vw, 38px) 22px;
  margin-inline: -22px;
  border-bottom: 1px solid var(--rail);
  position: relative;
  transition: background .42s var(--ease), box-shadow .42s var(--ease);
}
/* The lit row. Both treatments are ports of the app's own focused-row style
   in design/TOKENS.md: an inset ember rule, and a bloom that follows focus. */
.seat::before {
  content: ''; position: absolute; inset: -30% -10%;
  background: radial-gradient(40% 120% at 20% 50%, rgba(255, 107, 44, .2) 0%, transparent 66%);
  opacity: 0; transition: opacity .42s var(--ease); pointer-events: none;
}
.seat:hover, .seat:focus-within {
  background: rgba(255, 255, 255, .03);
  box-shadow: inset 3px 0 0 var(--ember);
}
.seat:hover::before, .seat:focus-within::before { opacity: 1; }
.seat h3 { transition: color .42s var(--ease); }
.seat:hover h3, .seat:focus-within h3 { color: var(--halo); }

.seat > * { position: relative; z-index: 1; }

.seat .where {
  font-variation-settings: 'wdth' 125, 'wght' 700;
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--colder); align-self: start; padding-top: 7px;
  transition: color .42s var(--ease);
}
.seat:hover .where, .seat:focus-within .where { color: var(--ember); }

.seat h3 {
  font-variation-settings: 'wdth' 84, 'wght' 700;
  font-size: clamp(23px, 2.7vw, 33px); text-transform: uppercase;
  letter-spacing: -.006em; margin-bottom: 8px;
}
.seat .models { margin: 0; color: var(--colder); font-size: 14.5px; line-height: 1.5; max-width: 58ch; }
.seat .models b { color: var(--cold); font-variation-settings: 'wdth' 100, 'wght' 600; }
.seat .price {
  margin: 12px 0 0; font-size: 13px; color: var(--colder); letter-spacing: .02em;
}
.seat .price b { color: var(--cold); font-variation-settings: 'wdth' 100, 'wght' 600; }

.get { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; justify-self: end; }
.get-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }

/* Official store badges, unmodified. Each vendor bakes a different amount of
   transparent padding into its asset, so the heights below are tuned to make
   the visible pills match. The artwork itself is never altered or recoloured. */
.badge { display: inline-block; line-height: 0; transition: transform .3s var(--ease); }
.badge:hover { transform: translateY(-2px); }
.badge img { height: 46px; width: auto; }
.badge.play img { height: 57px; margin: -6px -5px; }   /* ~10% padding baked in */
.badge.amazon img { height: 44px; }

/* Samsung and LG publish no official badge, so this is a house control, same metrics. */
.store-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 20px; text-decoration: none;
  border: 1px solid var(--rail); color: var(--cold); border-radius: 8px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  font-variation-settings: 'wdth' 118, 'wght' 700;
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
  white-space: nowrap;
}
.store-btn:hover { color: var(--limelight); border-color: rgba(255, 140, 74, .8); background: rgba(255, 107, 44, .07); }
.store-btn.direct { font-size: 10.5px; }

.seat .hint { font-size: 12.5px; color: var(--colder); text-align: right; margin: 0; max-width: 34ch; }

@media (max-width: 1040px) {
  .seat { grid-template-columns: 130px minmax(0, 1fr); }
  .get { grid-column: 2; justify-self: start; align-items: flex-start; margin-top: 20px; }
  .get-row { justify-content: flex-start; }
  .seat .hint { text-align: left; }
}
@media (max-width: 600px) {
  .seat { grid-template-columns: 1fr; }
  .seat .where { padding-top: 0; margin-bottom: 12px; }
  .get { grid-column: 1; }
  .badge img, .store-btn { height: 42px; }
}

.listing-foot { margin-top: 30px; color: var(--colder); font-size: 15px; max-width: 70ch; }

/* ================================================== prices */

.prices { width: 100%; border-collapse: collapse; margin-top: 8px; }
.prices caption { text-align: left; color: var(--cold); font-size: 18px; margin-bottom: 30px; max-width: 52ch; }
.prices th, .prices td { text-align: left; padding: 22px 20px 22px 0; border-bottom: 1px solid var(--rail); vertical-align: baseline; }
.prices thead th {
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  font-variation-settings: 'wdth' 125, 'wght' 700; color: var(--colder);
  padding-bottom: 14px;
}
.prices tbody th { font-variation-settings: 'wdth' 88, 'wght' 700; font-size: clamp(19px, 2.2vw, 25px); text-transform: uppercase; }
.prices tbody th span { display: block; margin-top: 8px; font-size: 13.5px; color: var(--colder);
  font-variation-settings: 'wdth' 100, 'wght' 400; text-transform: none; letter-spacing: 0; }
.prices .amt { font-variation-settings: 'wdth' 72, 'wght' 700; font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -.015em; }
.prices .amt span { display: block; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  font-variation-settings: 'wdth' 125, 'wght' 700; color: var(--colder); margin-top: 8px; }
.prices tbody tr { transition: background .42s var(--ease); }
.prices tbody tr:hover { background: rgba(255, 255, 255, .02); }
.prices tbody tr:hover .amt { color: var(--halo); }

@media (max-width: 720px) {
  .prices thead { display: none; }
  .prices tbody th, .prices td { display: block; padding: 0; border: none; }
  .prices tbody tr { display: block; padding: 26px 0; border-bottom: 1px solid var(--rail); }
  .prices .amt { display: inline-block; margin-right: 40px; margin-top: 18px; }
  .prices .amt span { margin-top: 4px; }
}

.included { display: flex; flex-wrap: wrap; gap: 10px 30px; margin-top: 34px; padding-top: 26px;
  border-top: 1px solid var(--rail); color: var(--colder); font-size: 14.5px; }

/* ================================================== faq */

.faq { max-width: 860px; border-top: 1px solid var(--rail); }
details { border-bottom: 1px solid var(--rail); }
details summary {
  cursor: pointer; list-style: none; padding: 24px 44px 24px 0; position: relative;
  font-variation-settings: 'wdth' 92, 'wght' 600; font-size: 19px; line-height: 1.3;
  transition: color .3s var(--ease);
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: ''; position: absolute; right: 6px; top: 50%; width: 11px; height: 1px;
  background: var(--colder); transition: background .3s var(--ease);
}
details summary::before {
  content: ''; position: absolute; right: 11px; top: 50%; width: 1px; height: 11px;
  margin-top: -5px; background: var(--colder);
  transition: opacity .3s var(--ease), background .3s var(--ease);
}
details[open] summary::before { opacity: 0; }
details summary:hover { color: var(--halo); }
details summary:hover::after, details summary:hover::before { background: var(--ember); }
details .answer { padding: 0 0 26px; color: var(--cold); font-size: 16.5px; max-width: 68ch; }
details .answer a { color: var(--halo); }
details .answer code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px;
  color: var(--limelight); background: rgba(255,255,255,.05); padding: 1px 6px;
}

/* ================================================== closing */

.close { border-top: 1px solid var(--rail); padding-block: clamp(80px, 11vw, 150px); position: relative; overflow: hidden; }
.close::before {
  content: ''; position: absolute; inset: -40% -20% auto -20%; height: 700px;
  background: radial-gradient(40% 60% at 26% 50%, rgba(255, 107, 44, .14) 0%, transparent 66%);
  pointer-events: none;
}
.close > .rail { position: relative; }
.close .marquee { font-size: clamp(44px, 8.6vw, 108px); margin-bottom: 34px; }
.close .btn-row { margin-top: 40px; }

/* ================================================== footer */

footer.site { border-top: 1px solid var(--rail); padding-block: 60px 46px; color: var(--colder); font-size: 15px; }
.foot-grid { display: grid; gap: 40px; grid-template-columns: 2fr 1fr 1fr 1fr; }
@media (max-width: 880px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }

footer.site h4 {
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cold); font-variation-settings: 'wdth' 125, 'wght' 700; margin: 0 0 16px;
}
footer.site ul { list-style: none; margin: 0; padding: 0; }
footer.site li { margin-bottom: 10px; }
footer.site a { color: var(--colder); text-decoration: none; transition: color .3s var(--ease); }
footer.site a:hover { color: var(--limelight); }
.legal-line {
  margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--rail);
  display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; font-size: 13.5px;
}
.legal-line .grow { flex: 1 1 auto; }

/* ================================================== legal pages */

.doc { max-width: 780px; }
.doc h1 { font-variation-settings: 'wdth' 72, 'wght' 700; font-size: clamp(40px, 7vw, 76px);
  text-transform: uppercase; line-height: .94; margin-bottom: 18px; }
.doc h2 { font-variation-settings: 'wdth' 92, 'wght' 700; font-size: clamp(21px, 2.6vw, 27px);
  margin-top: 2.4em; margin-bottom: .6em; text-transform: none; line-height: 1.2; }
.doc h3 { font-variation-settings: 'wdth' 100, 'wght' 600; font-size: 18px; margin-top: 1.9em; margin-bottom: .5em; }
.doc p, .doc li { color: var(--cold); font-size: 16.5px; }
.doc ul, .doc ol { padding-left: 22px; margin: 0 0 1.2em; }
.doc li { margin-bottom: 9px; }
.doc strong { color: var(--limelight); font-variation-settings: 'wdth' 100, 'wght' 600; }
.doc a { color: var(--halo); text-underline-offset: 3px; }
.doc table { width: 100%; border-collapse: collapse; margin: 0 0 1.8em; font-size: 15.5px; }
.doc th, .doc td { text-align: left; padding: 13px 16px 13px 0; border-bottom: 1px solid var(--rail); vertical-align: top; }
.doc th { color: var(--limelight); font-variation-settings: 'wdth' 104, 'wght' 600; }
.doc td { color: var(--cold); }
.updated { color: var(--colder); font-size: 14px; letter-spacing: .04em; margin-bottom: 2.6em; }

/* The summary box on the legal pages: a rule, not a card. */
.disclaimer {
  border-top: 1px solid var(--rail); border-bottom: 1px solid var(--rail);
  padding: 26px 0; margin: 0 0 2.8em; color: var(--cold); font-size: 17px;
}
.disclaimer strong { color: var(--limelight); }

.toc { border-bottom: 1px solid var(--rail); padding-bottom: 26px; margin-bottom: 3em; }
.toc h2 { margin: 0 0 16px; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--colder); font-variation-settings: 'wdth' 125, 'wght' 700; }
.toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 40px; }
.toc li { margin-bottom: 7px; break-inside: avoid; }
@media (max-width: 620px) { .toc ol { columns: 1; } }

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

/* 404 reuses this */
.cta { text-align: left; }

/* ================================================== motion

   Two effects, both motivated, nothing else on the page moves.

   1. Content rises as it enters. Storytelling: the page arrives in reading
      order instead of all at once, which is how the app reveals a row.
   2. The lit row (above). Feedback: it answers "what am I pointing at".

   Driven by the native scroll timeline, so there is no JavaScript, no scroll
   listener and no layout thrash. Guarded by @supports so browsers without it
   simply show the content, and switched off entirely for reduced motion. */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .band-head,
    .honest,
    .tv-set,
    .stage,
    .cluster,
    .seat,
    .prices,
    .included,
    .family > figure,
    .close .marquee,
    .close .lede {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 24%;
    }

    @keyframes rise {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: none; }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}