/* =====================================================================
   TVGlow — marketing site design system
   "Broadcast room after dark": graphite surfaces, one gold signal,
   guide geometry as the signature. No frameworks, no dependencies.

   Contents
     1. Fonts and tokens          6. Status, tier and support labels
     2. Reset and base            7. Tables: matrix, tiers, status, offline
     3. Layout                    8. Plans and explainers
     4. Header and footer         9. Platform, feature and acquisition blocks
     5. Buttons and CTAs         10. Hero and guide visual
                                 11. Prose, responsive, reduced motion

   Breakpoints: 1024 / 860 / 720 / 460. Everything reflows at 320px and
   survives 200% text zoom. See DESIGN.md.
   ===================================================================== */

/* --- 1. Fonts and tokens --------------------------------------------- */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../assets/fonts/bricolage-grotesque.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../assets/fonts/hanken-grotesk.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("../assets/fonts/space-mono-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("../assets/fonts/space-mono-bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --bg: #02060d;
  --bg-raised: #07101b;
  --surface-guide: #09111e;
  --surface-panel: #0f1928;
  --surface-strong: #162233;
  --border: #223246;
  --border-muted: #182438;

  --gold: #ffc73a;
  --gold-hi: #ffd76a;
  --gold-deep: #f59e0b;
  --gold-soft: rgba(255, 199, 58, 0.12);

  --text: #eef3f7;
  --text-dim: #bcc8d4;
  --text-muted: #8e9dad;

  --ok: #6cf0b6;
  --danger: #ff7b90;

  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "Cascadia Mono", monospace;

  --r-sm: 9px;
  --r-md: 14px;
  --r-lg: 18px;

  --gutter: clamp(20px, 5vw, 64px);
  --wrap: 1320px;
  --header-h: 68px;
  --tap: 44px;

  --shadow-gold: 0 10px 30px -12px rgba(245, 158, 11, 0.45);
  --shadow-ground: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
}

/* --- 2. Reset and base ----------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* Links are underlined by default. Gold on near-white body text is only a
   1.2:1 difference, so colour alone cannot distinguish an inline link (WCAG
   1.4.1). Links that are unambiguous by position — navigation, buttons, whole
   cards — opt out below. */
a {
  color: var(--gold-hi);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { text-decoration-thickness: 2px; }

.nav__brand,
.nav__links a,
.btn,
.card-links a,
.platform-card__link,
.get-row a.link-arrow,
.link-arrow,
.footer-col a,
.footer-brand a,
.skip-link {
  text-decoration: none;
}
.footer-col a:hover,
.link-arrow:hover { text-decoration: underline; text-decoration-thickness: 1px; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--gold); color: var(--bg); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 5.4vw, 4rem); }
p, li { text-wrap: pretty; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.7rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--gold);
  color: #1c1303;
  padding: 12px 20px;
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  color: var(--text-dim);
  max-width: 62ch;
}
.dim { color: var(--text-dim); }
.muted { color: var(--text-muted); }
.gold { color: var(--gold); }
.small { font-size: 0.9rem; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--gold);
  flex: none;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  min-height: 32px;
}
.link-arrow::after { content: "→"; transition: transform 0.18s ease; }
.link-arrow:hover::after { transform: translateX(3px); }

.caveat {
  margin: 10px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--border);
  color: var(--text-muted);
  font-size: 0.92rem;
}

/* --- 3. Layout -------------------------------------------------------- */

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 780px; }
.wrap--full { max-width: none; }

.section { padding: clamp(56px, 8vw, 104px) 0; }
.section--tight { padding: clamp(38px, 5vw, 64px) 0; }
.section--raised { background: var(--bg-raised); border-block: 1px solid var(--border-muted); }

.section-head { max-width: 68ch; margin-bottom: clamp(28px, 4vw, 44px); }
.section-head h2 { margin-bottom: 0.35em; }

.cols { display: grid; gap: clamp(20px, 3vw, 34px); }
.cols--2 { grid-template-columns: repeat(2, 1fr); }
.cols--3 { grid-template-columns: repeat(3, 1fr); }

.panel {
  background: var(--surface-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(20px, 3vw, 30px);
}

/* --- 4. Header and footer -------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(2, 6, 13, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-muted);
}
.site-header.is-scrolled { border-bottom-color: var(--border); }

.nav {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 66px;
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.22rem;
  letter-spacing: -0.02em;
  margin-right: auto;
  min-height: var(--tap);
}
.nav__brand:hover { text-decoration: none; }
/* The header shows the app's own horizontal lockup (assets/brand), so the mark
   and the TVGlow lettering match the app exactly rather than a web font. */
.nav__brand img { width: auto; height: 34px; }

.nav__links {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__links a {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  min-height: var(--tap);
  color: var(--text-dim);
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: var(--r-sm);
}
.nav__links a:hover {
  color: var(--text);
  background: var(--surface-panel);
  text-decoration: none;
}
.nav__links a[aria-current="page"] {
  color: var(--gold);
  background: var(--gold-soft);
}

.nav__toggle {
  display: none;
  width: var(--tap);
  height: var(--tap);
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  cursor: pointer;
}
.nav__toggle svg { width: 22px; height: 22px; }
.nav__toggle .icon-close { display: none; }
.nav__toggle[aria-expanded="true"] .icon-open { display: none; }
.nav__toggle[aria-expanded="true"] .icon-close { display: block; }

.site-footer {
  border-top: 1px solid var(--border-muted);
  background: var(--bg-raised);
  padding: clamp(44px, 6vw, 72px) 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: clamp(24px, 4vw, 48px);
}
.footer-brand img { width: 34px; height: 34px; margin-bottom: 14px; }
.footer-brand p { color: var(--text-muted); font-size: 0.94rem; max-width: 40ch; }
.footer-brand__tiers { color: var(--text-dim); }
.footer-col h2 {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--text-dim);
  font-size: 0.95rem;
}
.footer-col a:hover { color: var(--gold-hi); }
/* The corporate footer: one row and a legal line (owner, 2026-10-02). */
.site-footer--compact { padding: 26px 0 20px; }
.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 40px;
}
.site-footer--compact .footer-brand { display: flex; align-items: center; gap: 14px; }
.site-footer--compact .footer-brand img { width: 28px; height: 28px; margin: 0; flex: none; }
.site-footer--compact .footer-brand p { margin: 0; max-width: 72ch; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 24px; list-style: none; margin: 0; padding: 0; }
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--text-dim);
  font-size: 0.95rem;
  text-decoration: none;
}
.footer-links a:hover { color: var(--gold-hi); }
.site-footer--compact .footer-legal { margin-top: 14px; padding-top: 14px; }
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: clamp(32px, 5vw, 52px);
  padding-top: 22px;
  border-top: 1px solid var(--border-muted);
  color: var(--text-muted);
  font-size: 0.86rem;
}

/* --- 5. Buttons and CTAs --------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  text-align: center;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--gold);
  color: #1c1303;
  box-shadow: var(--shadow-gold);
}
.btn--primary:hover { background: var(--gold-hi); }

.btn--ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-hi); }

.btn--lg { padding: 15px 28px; font-size: 1.04rem; }
.btn--sm { padding: 9px 16px; font-size: 0.9rem; min-height: 40px; }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 28px 0 0;
}

.cta-band {
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(255, 199, 58, 0.1), transparent 62%),
    var(--surface-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(28px, 5vw, 52px);
  text-align: center;
}
.cta-band h2 { margin-bottom: 0.3em; }
.cta-band .lead { margin-inline: auto; }
.cta-band .cta-row { justify-content: center; }

/* --- 6. Status, tier and support labels ------------------------------ */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-strong);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}
.chip__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.chip--live { color: var(--ok); border-color: rgba(108, 240, 182, 0.4); background: rgba(108, 240, 182, 0.1); }
.chip--coming-soon { color: var(--gold-hi); border-color: rgba(255, 199, 58, 0.38); background: var(--gold-soft); }
.chip--planned { color: var(--text-muted); border-style: dashed; }
.chip--unavailable { color: var(--text-muted); }
.chip--sm { padding: 3px 9px; font-size: 10.5px; }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
}
.badge--free { background: rgba(108, 240, 182, 0.14); color: var(--ok); border: 1px solid rgba(108, 240, 182, 0.35); }
.badge--premium { background: var(--gold-soft); color: var(--gold-hi); border: 1px solid rgba(255, 199, 58, 0.4); }
.badge--platform { background: var(--surface-strong); color: var(--text-dim); border: 1px solid var(--border); }

/* Support labels never rely on colour alone — the word carries the meaning. */
.support {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  font-weight: 700;
}
.support--yes[data-support="free"] { color: var(--ok); }
.support--yes[data-support="premium"] { color: var(--gold-hi); }
.support--yes { color: var(--ok); }
.support--no { color: var(--text-muted); }
.support--none { color: var(--text-muted); }

.gate-note {
  margin: 18px 0 0;
  padding: 12px 16px;
  border: 1px dashed var(--gold-deep);
  border-radius: var(--r-sm);
  background: rgba(245, 158, 11, 0.07);
  color: var(--text-dim);
  font-size: 0.9rem;
}
.gate-note b { color: var(--gold-hi); font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.06em; }
.gate-note__env { display: block; margin-top: 4px; color: var(--text-muted); font-size: 0.84rem; }

/* --- 7. Tables -------------------------------------------------------- */

.matrix-wrap {
  position: relative; /* keeps screen-reader text inside the scroller */
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-panel);
}
.matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.matrix th,
.matrix td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border-muted);
  vertical-align: top;
}
.matrix thead th {
  background: var(--surface-strong);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 400;
  white-space: nowrap;
}
.matrix thead th .chip { margin-top: 6px; }
.matrix__ph { display: block; margin-bottom: 2px; color: var(--text); font-size: 13px; letter-spacing: 0.02em; text-transform: none; font-family: var(--font-body); font-weight: 600; }
.matrix tbody th { font-weight: 600; color: var(--text); }
.matrix__feature { display: block; }
.matrix__sub { display: block; margin-top: 3px; color: var(--text-muted); font-size: 0.86rem; font-weight: 400; }
.matrix tbody tr:last-child th,
.matrix tbody tr:last-child td { border-bottom: none; }
.matrix__note { margin: 14px 0 0; color: var(--text-muted); font-size: 0.92rem; }

.legend { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.legend li { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--text-dim); font-size: 0.95rem; }

/* Free and Premium by platform (corporate home). A table on wide screens with a
   head that sticks under the site header. Below 860px each feature becomes a
   card with platform pills, and a group every launch platform offers in full
   becomes a plain list, because its header already says so. `overflow: clip`
   rounds the corners without creating a scroll container, which would stop
   the head from sticking. */
.tier-table {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-panel);
  overflow: clip;
}
.tier-table table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.tier-table__col-feature { width: 40%; }
.tier-table th,
.tier-table td {
  padding: 12px 8px;
  border-bottom: 1px solid var(--border-muted);
  text-align: center;
  vertical-align: middle;
  font-weight: 400;
}
.tier-table thead th {
  position: sticky;
  top: 67px;
  z-index: 1;
  padding: 18px 6px 16px;
  background: var(--surface-strong);
  border-bottom-color: var(--border);
  vertical-align: top;
  font-size: 0.86rem;
  line-height: 1.3;
}
.tier-table__device,
.tier-table__icon,
.platform-card__device {
  width: 26px; height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tier-table__device { display: block; margin: 0 auto 8px; color: var(--text-dim); }
.tier-table__name { display: block; font-weight: 600; }
.tier-table__hint { display: block; color: var(--text-muted); font-size: 0.8rem; font-weight: 400; }
.tier-table__status {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.tier-table__status--live { color: var(--ok); }
.tier-table tbody th { padding-left: 22px; text-align: left; }
.tier-table__row { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; align-items: center; }
.tier-table__icon { width: 24px; height: 24px; color: var(--text-dim); }
.tier-table__group--premium .tier-table__icon { color: var(--gold); }
.tier-table__feature { display: block; font-weight: 600; }
.tier-table__sub { display: block; margin-top: 1px; color: var(--text-muted); font-size: 0.86rem; }
.tier-table__all { display: none; }
.tier-table__tier th {
  padding: 16px 22px 14px;
  background: linear-gradient(90deg, rgba(108, 240, 182, 0.08), transparent 55%);
  box-shadow: inset 3px 0 0 var(--ok);
  border-bottom-color: var(--border);
}
.tier-table__group--premium .tier-table__tier th {
  border-top: 1px solid var(--border);
  background: linear-gradient(90deg, rgba(255, 199, 58, 0.16), transparent 60%);
  box-shadow: inset 3px 0 0 var(--gold);
}
.tier-table__group--premium > tr > * { background-color: rgba(255, 199, 58, 0.045); }
.tier-table__line { margin-left: 12px; color: var(--text); font-size: 0.98rem; font-weight: 600; }
.tier-table__group > tr:last-child > *,
.tier-table td.is-planned { border-bottom: 0; }
.tier-table .is-planned { border-left: 1px dashed var(--border); }
.tier-table td.is-planned {
  background-image: repeating-linear-gradient(135deg, rgba(142, 157, 173, 0.06) 0 2px, transparent 2px 9px);
}

.tier-mark {
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  vertical-align: middle;
}
.tier-mark--free { color: var(--ok); background: rgba(108, 240, 182, 0.12); box-shadow: inset 0 0 0 1px rgba(108, 240, 182, 0.4); }
.tier-mark--premium { color: #1c1303; background: var(--gold); box-shadow: 0 4px 14px -6px rgba(245, 158, 11, 0.8); }
.tier-mark--free::before,
.tier-mark--premium::before {
  content: "";
  width: 11px; height: 6px;
  margin-top: -3px;
  border-left: 2px solid;
  border-bottom: 2px solid;
  transform: rotate(-45deg);
}
.tier-mark--no,
.tier-mark--tbd { width: auto; height: auto; color: var(--text-muted); }
.tier-mark--tbd {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .tier-table { border: 0; border-radius: 0; background: none; overflow: visible; }
  .tier-table table, .tier-table tbody, .tier-table tr, .tier-table th, .tier-table td { display: block; }
  .tier-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tier-table th, .tier-table td { border: 0; }
  .tier-table tbody th { flex: 1 0 100%; padding: 0 0 4px; }
  .tier-table .is-planned { display: none; }
  .tier-table .tier-table__tier th { padding: 28px 0 12px; border: 0; background: none; box-shadow: none; }
  .tier-table tbody:first-of-type .tier-table__tier th { padding-top: 0; }
  .tier-table__line { display: block; margin: 8px 0 0; }
  .tier-table tr:not(.tier-table__tier) {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
    padding: 14px 16px;
    background: var(--surface-panel);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
  }
  .tier-table__group--premium > tr:not(.tier-table__tier) { border-color: rgba(255, 199, 58, 0.3); }
  .tier-table__group--premium > tr > * { background-color: transparent; }
  .tier-table td {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 3px 3px 10px;
    border: 1px solid var(--border-muted);
    border-radius: 999px;
    font: 700 10.5px/1.2 var(--font-mono);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-dim);
  }
  .tier-table td::before { content: attr(data-label); }
  .tier-table td.is-no { padding-right: 10px; border-style: dashed; color: var(--text-muted); }
  .tier-table .tier-mark { width: 18px; height: 18px; }
  .tier-table .tier-mark--no { width: auto; }
  .tier-table .tier-mark::before { width: 8px; height: 4px; margin-top: -2px; }
  .tier-table tbody.tier-table__group--all { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .tier-table__group--all > .tier-table__tier { grid-column: 1 / -1; }
  .tier-table .tier-table__group--all > tr:not(.tier-table__tier) {
    margin: 0;
    padding: 12px 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--border-muted);
    border-radius: 0;
  }
  .tier-table .tier-table__group--all td,
  .tier-table tr.is-everywhere td { display: none; }
  .tier-table__all {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font: 700 10.5px/1.2 var(--font-mono);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
}
@media (max-width: 460px) {
  .tier-table tbody.tier-table__group--all { grid-template-columns: 1fr; }
}

/* --- 8. Plans and explainers ----------------------------------------- */

.plans {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.4vw, 26px);
  align-items: start;
}
.plan {
  background: var(--surface-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 30px);
  height: 100%;
}
.plan--free { border-color: rgba(108, 240, 182, 0.28); }
.plan--premium { border-color: rgba(255, 199, 58, 0.28); }
.plan__name { font-size: 1.35rem; margin-bottom: 0.25em; }
.plan__price {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: var(--gold-hi);
  margin: 0 0 0.9em;
  letter-spacing: 0.02em;
}
.plan--free .plan__price { color: var(--ok); }
.plan__headline { font-weight: 600; margin-bottom: 0.3em; }
.plan__sub { color: var(--text-muted); font-size: 0.94rem; }
.plan__list { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 10px; }
.plan__list li {
  position: relative;
  padding-left: 24px;
  color: var(--text-dim);
  font-size: 0.96rem;
}
.plan__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}
.plan--free .plan__list li::before { border-color: var(--ok); }
.plan__foot {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--border-muted);
  color: var(--text-muted);
  font-size: 0.9rem;
}
.plans__authority { margin-top: 18px; color: var(--text-dim); }

.explainer {
  background: var(--surface-panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-md);
  padding: clamp(20px, 3vw, 28px);
}
.explainer h3 { margin-bottom: 0.5em; }
.explainer p { color: var(--text-dim); }
.explainer p:last-child { margin-bottom: 0; }
.explainer--devices { border-left-color: var(--ok); }

/* --- 9. Platform, feature and acquisition blocks --------------------- */

.platform-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(14px, 2vw, 22px);
}
.platform-card {
  background: var(--surface-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color 0.16s ease, transform 0.16s ease;
}
.platform-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.platform-card__link {
  display: block;
  padding: 20px;
  color: inherit;
  min-height: var(--tap);
}
.platform-card__link:hover { text-decoration: none; }
/* Unlinked cards (the corporate site has no platform pages) must not look clickable. */
.platform-card--static:hover { border-color: var(--border); transform: none; }
.platform-card__body { padding: 20px; }
.platform-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.platform-card__name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; }
.platform-card__ux { margin: 0; color: var(--text-muted); font-size: 0.93rem; }
.platform-card__dist { margin: 0 0 12px; color: var(--text-muted); font-size: 0.93rem; }
.platform-grid__planned { margin: 18px 0 0; color: var(--text-muted); font-size: 0.93rem; }
/* The corporate row: every launch platform on one line from 900px up. */
.platform-grid--row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.platform-grid--row .platform-card__body { padding: 18px 16px; }
.platform-grid--row .platform-card__name { display: block; font-size: 1.02rem; }
.platform-card__device { display: block; margin-bottom: 12px; color: var(--gold); }
.platform-card__hint { display: block; margin-bottom: 8px; color: var(--text-muted); font-size: 0.84rem; }
@media (min-width: 901px) {
  /* A line kept for every hint, even an empty one, so the taglines in the row line up. */
  .platform-grid--row .platform-card__hint { min-height: 1.3em; }
}
@media (max-width: 900px) {
  .platform-grid--row { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

.tier-lists { display: grid; gap: 20px; }
.tier-list {
  background: var(--surface-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 22px;
}
.tier-list h3 { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; margin-bottom: 0.7em; }
.tier-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.tier-list li { color: var(--text-dim); font-size: 0.96rem; }
.tier-list li b { color: var(--text); }
.tier-list--free { border-left: 3px solid var(--ok); }
.tier-list--premium { border-left: 3px solid var(--gold); }
.tier-list--absent { border-left: 3px solid var(--border); }
.tier-list--absent li { color: var(--text-muted); }

.feature-group { margin-bottom: clamp(40px, 6vw, 64px); }
.feature-group__blurb { color: var(--text-dim); max-width: 62ch; }
.feature-list { display: grid; gap: 18px; margin-top: 26px; }
.feature {
  background: var(--surface-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: clamp(18px, 2.5vw, 26px);
}
.feature__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 10px; }
.feature__title { margin: 0; font-size: 1.18rem; }
.feature__summary { color: var(--text); font-weight: 600; margin-bottom: 0.4em; }
.feature__detail { color: var(--text-dim); }
.feature__where { margin: 0; color: var(--text-muted); font-size: 0.92rem; }
.feature__where-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: 6px;
}

.get-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.get-row {
  background: var(--surface-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: clamp(18px, 2.5vw, 26px);
}
.get-row[data-status="live"] { border-color: rgba(108, 240, 182, 0.4); }
.get-row[data-status="planned"] { border-style: dashed; opacity: 0.9; }
.get-row.is-likely { border-color: var(--gold); box-shadow: var(--shadow-gold); }
.get-row__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 8px; }
.get-row__name { margin: 0; font-size: 1.2rem; }
.get-row__cta { margin: 16px 0 12px; }
.get-row__hint {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

.source-types { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.source-types li {
  background: var(--surface-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 18px 20px;
}
.source-types b { display: block; font-size: 1.02rem; margin-bottom: 4px; }
.source-types span { color: var(--text-muted); font-size: 0.94rem; }

.notify-form { margin: 0; }
.notify-form__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.notify-form__label {
  display: block;
  width: 100%;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.notify-form__input {
  flex: 1 1 220px;
  min-height: var(--tap);
  padding: 11px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font: inherit;
  font-size: 0.98rem;
}
.notify-form__input:focus-visible { border-color: var(--gold); }
.notify-form__consent { margin: 12px 0 0; font-size: 0.92rem; color: var(--text-dim); }
.notify-form__consent label { display: flex; gap: 10px; align-items: flex-start; min-height: 32px; }
.notify-form__consent input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--gold); }
.notify-form__help { margin: 8px 0 0; color: var(--text-muted); font-size: 0.88rem; }
.notify-form__status:not(:empty) {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  font-size: 0.93rem;
}
.notify-form__status.is-ok { border-color: rgba(108, 240, 182, 0.5); color: var(--ok); }
.notify-form__status.is-error { border-color: rgba(255, 123, 144, 0.5); color: var(--danger); }

/* --- 10. Hero and guide visual --------------------------------------- */

.hero {
  position: relative;
  padding: clamp(44px, 7vw, 92px) 0 clamp(40px, 6vw, 76px);
  background:
    radial-gradient(90% 120% at 12% 0%, rgba(255, 199, 58, 0.1), transparent 58%),
    radial-gradient(70% 90% at 100% 10%, rgba(255, 199, 58, 0.05), transparent 60%);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.hero h1 { margin-bottom: 0.35em; }
.hero__sub { font-size: clamp(1.06rem, 1.7vw, 1.26rem); color: var(--text-dim); max-width: 54ch; }
.hero__boundary {
  margin-top: 18px;
  padding: 12px 16px;
  border-left: 2px solid var(--gold);
  background: var(--gold-soft);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--text-dim);
  font-size: 0.96rem;
}
.hero__points { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; }
.hero__points li { position: relative; padding-left: 26px; color: var(--text-dim); }
.hero__points li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 12px; height: 6px;
  border-left: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}
.hero__status { margin: 22px 0 0; color: var(--text-muted); font-size: 0.94rem; }
.hero__status .chip { margin-right: 10px; vertical-align: 0.1em; }

.hero-guide { margin: 0; }
.hero-guide__cap {
  margin-top: 12px;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
}

.guide {
  background: var(--surface-guide);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-ground);
  overflow: hidden;
  font-size: clamp(9px, 1.05vw, 13px);
}
.guide__bar {
  display: flex;
  align-items: center;
  gap: 1.4em;
  padding: 1em 1.2em;
  background: var(--surface-strong);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.85em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.guide__tab.is-on { color: var(--gold); }
.guide__search { margin-left: auto; }
.guide__times {
  display: grid;
  grid-template-columns: 12em repeat(3, 1fr);
  padding: 0.7em 1.2em 0.5em;
  font-family: var(--font-mono);
  font-size: 0.8em;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}
.guide__times span:first-child { color: var(--gold); }
.guide__row {
  display: grid;
  grid-template-columns: 12em 1fr;
  border-top: 1px solid var(--border-muted);
}
.guide__ch {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.9em 1.2em;
  border-right: 1px solid var(--border-muted);
  min-width: 0;
}
.guide__num { font-family: var(--font-mono); color: var(--gold); font-size: 0.85em; }
.guide__name {
  font-weight: 600;
  font-size: 0.95em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.guide__live {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.7em;
  letter-spacing: 0.1em;
  color: var(--danger);
  flex: none;
}
.guide__progs { display: flex; }
.guide__prog {
  flex: var(--w) 1 0;
  min-width: 0;
  padding: 0.9em 0.9em;
  border-left: 1px solid var(--border-muted);
  color: var(--text-muted);
  font-size: 0.92em;
}
.guide__prog:first-child { border-left: none; }
.guide__prog.is-live {
  background: linear-gradient(180deg, rgba(255, 199, 58, 0.14), rgba(255, 199, 58, 0.05));
  color: var(--text);
  box-shadow: inset 2px 0 0 var(--gold);
}
.guide__prog-name {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- 11. Prose, responsive, reduced motion --------------------------- */

.prose { max-width: 72ch; }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { color: var(--text-dim); display: grid; gap: 8px; }
.prose li { padding-left: 4px; }
.prose code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--surface-panel);
  border: 1px solid var(--border-muted);
  border-radius: 5px;
  padding: 2px 6px;
  color: var(--gold-hi);
  overflow-wrap: anywhere;
}
.prose pre {
  background: var(--surface-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 18px 20px;
  overflow-x: auto;
  font-size: 0.9rem;
}
.prose pre code { background: none; border: none; padding: 0; color: var(--text-dim); }
.prose blockquote {
  margin: 1.4em 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--gold);
  color: var(--text-dim);
}

.answer-first {
  background: var(--surface-panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-md);
  padding: 20px 24px;
  margin-bottom: 32px;
}
.answer-first p:last-child { margin-bottom: 0; }

.meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0 0 28px;
  color: var(--text-muted);
  font-size: 0.88rem;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

.faq { display: grid; gap: 12px; }
.faq details {
  background: var(--surface-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.faq summary {
  padding: 16px 20px;
  min-height: var(--tap);
  cursor: pointer;
  font-weight: 600;
  font-size: 1.02rem;
  display: flex;
  align-items: center;
  gap: 12px;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-mono);
  color: var(--gold);
  font-size: 1.2rem;
  flex: none;
}
.faq details[open] summary::after { content: "–"; }
.faq details[open] summary { border-bottom: 1px solid var(--border-muted); }
.faq__body { padding: 16px 20px; color: var(--text-dim); }
.faq__body p:last-child { margin-bottom: 0; }

.card-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.card-links li {
  background: var(--surface-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color 0.16s ease;
}
.card-links li:hover { border-color: var(--gold); }
.card-links a { display: block; padding: 20px 22px; color: inherit; }
.card-links a:hover { text-decoration: none; }
.card-links b { display: block; font-family: var(--font-display); font-size: 1.1rem; margin-bottom: 5px; }
.card-links span { color: var(--text-muted); font-size: 0.94rem; }

/* Company details: label and value rows, rendered from site-state.json. */
.facts {
  margin: 28px 0 0;
  background: var(--surface-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.facts__row {
  display: grid;
  grid-template-columns: minmax(9em, 13em) 1fr;
  gap: 6px 18px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-muted);
}
.facts__row:last-child { border-bottom: none; }
.facts dt {
  padding-top: 0.25em;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.facts dd { margin: 0; overflow-wrap: anywhere; }

.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.steps li { counter-increment: step; position: relative; padding-left: 52px; }
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  width: 34px; height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gold-soft);
  border: 1px solid rgba(255, 199, 58, 0.4);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 0.9rem;
}
.steps b { display: block; margin-bottom: 4px; }
.steps p { color: var(--text-dim); margin-bottom: 0; }

@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero-guide { order: 2; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .plans { grid-template-columns: 1fr; }
  .cols--3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .nav__toggle { display: flex; }
  .nav__links {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    flex-direction: column;
    gap: 0;
    padding: 10px var(--gutter) 18px;
    background: var(--bg-raised);
    border-bottom: 1px solid var(--border);
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: 14px 8px; }
  .nav__cta { display: none; }
  .cols--2, .cols--3 { grid-template-columns: 1fr; }

  /* Tables become stacked cards rather than a horizontal scroll trap. */
  .matrix-wrap { overflow-x: visible; border: none; background: none; }
  .matrix, .matrix tbody, .matrix tr, .matrix th, .matrix td { display: block; }
  .matrix thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .matrix tr {
    background: var(--surface-panel);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    margin-bottom: 14px;
    padding: 6px 0;
  }
  .matrix th, .matrix td { border-bottom: 1px solid var(--border-muted); padding: 12px 16px; }
  .matrix tr > *:last-child { border-bottom: none; }
  .matrix tbody th { background: none; font-size: 1.02rem; }
  .matrix td { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
  .matrix td::before {
    content: attr(data-label);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    flex: none;
  }
  .guide__times { grid-template-columns: 8em repeat(3, 1fr); }
  .guide__row { grid-template-columns: 8em 1fr; }

  /* The corporate header's two links fit at every width, so they stay inline
     instead of collapsing behind a menu button (that header has none). */
  .nav--inline .nav__links {
    display: flex;
    position: static;
    flex-direction: row;
    padding: 0;
    background: none;
    border: 0;
  }
  .nav--inline .nav__links a { padding: 10px 8px; }
}

@media (max-width: 460px) {
  body { font-size: 16px; }
  .cta-row .btn { width: 100%; }
  .footer-grid { grid-template-columns: 1fr; }
  .facts__row { grid-template-columns: 1fr; }
  .footer-legal { flex-direction: column; }
  .guide__times { grid-template-columns: 6.4em repeat(3, 1fr); }
  .guide__row { grid-template-columns: 6.4em 1fr; }
  .guide__prog { padding: 0.8em 0.6em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .btn:hover { transform: none; }
  .platform-card:hover { transform: none; }
}

/* Entry animation only where motion is welcome — and it moves, it does not
   fade. Animating opacity would leave real text at low contrast for the length
   of the animation, which an accessibility audit correctly reads as hidden
   content. Transform alone gives the same "switching on" feel with every word
   legible on the first painted frame. */
@keyframes rise {
  from { transform: translateY(18px); }
  to { transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero__inner { animation: rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
  .hero-guide { animation: rise 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s backwards; }
}

/* Price line above the plan cards. Carries the neutral sentence while the
   owner gate is open, and the confirmed amounts once it closes. */
.plans__price-line {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--gold-hi);
  margin-bottom: 22px;
}

/* --- Showcase films ----------------------------------------------------
   Silent films of the real app (docs/SHOWCASE-FILMS.md). The corporate home is
   built around them: a short headline, then one player with a tab per film.
   16:9 on wide screens, 4:5 on phones (the width in sitegen/components.py
   FILM_NARROW), so nothing letterboxes. */

.hero--stage { padding: 14px 0 clamp(40px, 5vw, 64px); }
/* The film leads the page (owner, 2026-10-02): nothing sits above it, and on a
   desktop it is as large as the window allows while still showing whole on load. */
.hero--stage .wrap { max-width: none; }
.stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "films films";
  align-items: center;
  gap: 22px clamp(20px, 3vw, 40px);
  margin-inline: auto;
}
.stage__head { grid-area: head; display: grid; gap: 8px; }
.stage__head h1 { font-size: clamp(2rem, 3.3vw, 2.7rem); margin: 0; }
/* "One Premium, every screen": the cross-platform promise above the tier cards. */
.one-premium {
  max-width: 860px;
  margin: 0 auto clamp(20px, 3vw, 32px);
  padding: 14px 20px;
  border: 1px solid var(--gold);
  border-radius: var(--r-md);
  background: var(--gold-soft);
  color: var(--text);
  text-align: center;
  font-size: clamp(1rem, 1.5vw, 1.14rem);
}
.one-premium b { color: var(--gold-hi); }
.stage__films { grid-area: films; min-width: 0; }

.film { margin: 0; }
.film__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg);
  box-shadow: var(--shadow-ground);
}
.film__video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A platform whose film is not made yet: the same frame, saying it is coming. */
.film__frame--soon { display: grid; place-items: center; }
.film__soon {
  margin: 0;
  color: var(--text-dim);
  font-family: var(--font-display, inherit);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.film__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 20px;
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 0.82rem;
}
.film__credits { padding-block: 6px; }
.film__premium {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 6px;
  background: var(--gold-soft);
  color: var(--gold-hi);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.films { display: grid; gap: clamp(36px, 5vw, 56px); }
.films.is-tabbed { gap: 14px; }
/* With tabs the tab names the film, so the stacked no-script headings go. */
.films.is-tabbed .films__title { display: none; }
.films__tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.films__tab {
  min-height: var(--tap);
  padding: 0 20px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-panel);
  color: var(--text-dim);
  font: 600 1rem var(--font-body);
  white-space: nowrap;
  cursor: pointer;
}
.films__tab:hover { color: var(--text); border-color: var(--gold); }
/* Wide screens: the tabs stand in a column beside the film, so the film can take
   the full window height (less the header) and still be seen whole on load. */
@media (min-width: 1100px) {
  .films.is-tabbed { display: flex; align-items: flex-start; justify-content: center; gap: 22px; }
  .films.is-tabbed .films__tabs { flex: 0 0 auto; flex-direction: column; flex-wrap: nowrap; }
  .films.is-tabbed .films__tab { text-align: left; }
  .films.is-tabbed .films__panel { flex: 0 1 calc((100svh - var(--header-h) - 30px) * 16 / 9); min-width: 0; }
}
.films__tab[aria-selected="true"] { background: var(--gold); border-color: var(--gold); color: #1a1200; }
.films__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-size: clamp(1.2rem, 2vw, 1.45rem);
}

/* Free and Premium on the corporate home: two cards, the full table behind a click. */
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lead { margin-inline: auto; }
.plans--2 { grid-template-columns: repeat(2, 1fr); max-width: 860px; margin-inline: auto; }
.plans--2 .plan__list { margin-bottom: 0; }
/* Free and the three Premium products on /pricing/: two by two. */
.plans--4 { grid-template-columns: repeat(2, 1fr); }
.compare { margin-top: clamp(24px, 3vw, 36px); }
.compare > summary {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: var(--tap);
  color: var(--gold-hi);
  font-weight: 600;
  cursor: pointer;
}
.compare[open] > summary { margin-bottom: 20px; }

@media (max-width: 860px) {
  .plans--2 { grid-template-columns: 1fr; max-width: 520px; }
  .plans--4 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .film__frame { aspect-ratio: 4 / 5; }
  .stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "films";
    gap: 18px;
  }
  /* One row of tabs that scrolls sideways rather than wrapping. */
  .films__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .films__tabs::-webkit-scrollbar { display: none; }
  .films__tab { padding: 0 16px; font-size: 0.94rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .stage { animation: rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
}