:root {
  color-scheme: dark;
  --bg: #0d0f12;
  --bg-soft: #14171c;
  --surface: #191d24;
  --surface-2: #202632;
  --text: #f5f7fb;
  --muted: #aeb7c7;
  --line: rgba(255, 255, 255, 0.13);
  --accent: #6ee7b7;
  --accent-2: #7dd3fc;
  --accent-3: #f7c873;
  --danger: #ff8a8a;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
  --radius: 8px;
  --max: 1180px;
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --font-step-0: 1rem;
  --font-step-1: 1.22rem;
  --font-step-2: 1.6rem;
  --font-step-3: 2.65rem;
  --font-step-4: 5rem;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f4ef;
  --bg-soft: #ece8dd;
  --surface: #ffffff;
  --surface-2: #f2efe7;
  --text: #12161f;
  --muted: #5a6474;
  --line: rgba(20, 26, 36, 0.15);
  --accent: #0f8b68;
  --accent-2: #1469a8;
  --accent-3: #9a6415;
  --shadow: 0 20px 60px rgba(31, 35, 43, 0.14);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  background:
    linear-gradient(135deg, rgba(125, 211, 252, 0.12), transparent 32%),
    linear-gradient(225deg, rgba(110, 231, 183, 0.10), transparent 30%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
  overflow-x: hidden;
}

main {
  min-height: 58vh;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.026) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.45), transparent 72%);
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--accent);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 72%, white);
  outline-offset: 3px;
}

img, svg {
  max-width: 100%;
}

button, input, textarea, select {
  font: inherit;
}

button {
  cursor: pointer;
}

.wrap {
  width: min(var(--max), calc(100vw - 32px));
  margin: 0 auto;
  max-width: 100%;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(18px);
}

.announcement-bar {
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--accent-2) 10%, transparent)),
    color-mix(in srgb, var(--surface) 82%, transparent);
}

.announcement-bar a {
  width: min(var(--max), calc(100vw - 32px));
  min-height: 42px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text);
  text-align: center;
  font-size: 0.93rem;
}

.announcement-bar strong {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
}

.announcement-bar span {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

.nav {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 18px;
  min-height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
}

.brand-mark {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 42%, transparent), color-mix(in srgb, var(--accent-2) 28%, transparent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.24);
}

.brand-mark::before {
  content: "SM";
  font-size: 0.78rem;
  font-weight: 900;
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.nav-links a,
.footer-links a {
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.94rem;
}

.nav-links a[aria-current="page"],
.nav-links a:hover,
.footer-links a:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

/* Grouped nav dropdowns (declutter). On desktop the <details> summary is a nav
   "button" and its menu opens as an absolute flyout on hover/focus/open. The
   default <details> marker is hidden; a small caret is drawn instead. */
.nav-group {
  position: relative;
}

.nav-group > summary {
  list-style: none;
  cursor: pointer;
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.94rem;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  user-select: none;
}

.nav-group > summary::-webkit-details-marker {
  display: none;
}

.nav-group > summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: 0.7;
}

.nav-group > summary:hover,
.nav-group[open] > summary,
.nav-group > summary[aria-current="page"] {
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

.nav-group-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 180px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Open the flyout on hover or keyboard focus within the group (desktop). The
   small invisible bridge keeps the menu reachable while the cursor travels from
   the summary down to the menu. */
.nav-group:hover > .nav-group-menu,
.nav-group:focus-within > .nav-group-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.nav-group-menu::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 10px;
}

.nav-group-menu a {
  white-space: nowrap;
}

.nav-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.theme-button,
.menu-button {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  border-radius: 8px;
  min-height: 38px;
  padding: 0 12px;
}

.menu-button {
  display: none;
}

.nav-lang-button {
  display: none;
}

.button,
button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-weight: 750;
}

.button.primary {
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #071016;
}

.button.ghost {
  background: transparent;
}

.button:hover {
  transform: translateY(-1px);
  color: var(--text);
}

.button,
.card,
.feature-card,
.clip-card,
.schedule-card,
.tier-card,
.template-card {
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.button[aria-disabled="true"] {
  opacity: 0.58;
  pointer-events: none;
}

.hero {
  padding: 82px 0 42px;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.75fr);
  gap: 34px;
  align-items: center;
}

.hero-grid > *,
.grid > *,
.live-panel > *,
.footer-grid > * {
  min-width: 0;
}

.eyebrow {
  color: var(--accent);
  font-size: 0.86rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1, h2, h3 {
  line-height: 1.08;
  letter-spacing: 0;
  margin: 0 0 14px;
}

h1 {
  font-size: 5rem;
  max-width: 950px;
  overflow-wrap: anywhere;
}

h1 span {
  display: block;
}

h2 {
  font-size: 2.65rem;
  overflow-wrap: anywhere;
}

h3 {
  font-size: 1.22rem;
}

p {
  margin: 0 0 16px;
  overflow-wrap: break-word;
}

.lede {
  color: var(--muted);
  font-size: 1.28rem;
  max-width: 780px;
}

.hero-kicker {
  color: var(--text);
  font-size: 1.6rem;
  font-weight: 850;
  max-width: 760px;
}

.sub {
  color: var(--muted);
}

.hero-actions,
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.hero-promises {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0;
  margin: 26px 0 0;
  list-style: none;
  max-width: 820px;
}

.hero-promises li {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 12px 12px 34px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  position: relative;
}

.hero-promises li::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 19px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 66%, transparent);
}

.metric-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 34px;
}

.metric {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  border-radius: var(--radius);
  padding: 16px;
}

.metric strong {
  display: block;
  font-size: 1.6rem;
}

.metric span {
  color: var(--muted);
  font-size: 0.92rem;
}

.studio-card {
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, transparent), color-mix(in srgb, var(--surface-2) 90%, transparent));
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.hero-command {
  padding-top: 96px;
}

.hero-signal {
  position: relative;
  overflow: hidden;
}

.hero-signal::before {
  content: "";
  position: absolute;
  inset: 18px 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
  opacity: 0.72;
  animation: signal-scan 5.5s linear infinite;
}

.hero-broadcast {
  min-height: 660px;
  display: grid;
  align-items: center;
  background:
    radial-gradient(circle at 74% 28%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 34%),
    linear-gradient(115deg, color-mix(in srgb, var(--surface) 64%, transparent), transparent 58%);
}

.hero-broadcast::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.28;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.055), rgba(255,255,255,0.055) 1px, transparent 1px, transparent 36px),
    linear-gradient(180deg, transparent, rgba(0,0,0,0.26));
  animation: signal-breathe 8s ease-in-out infinite alternate;
}

.hero-broadcast .wrap {
  position: relative;
  z-index: 1;
}

.command-card {
  isolation: isolate;
}

.signal-console {
  min-height: 420px;
  display: grid;
  align-content: space-between;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 50%),
    linear-gradient(225deg, color-mix(in srgb, var(--accent-3) 14%, transparent), transparent 54%),
    color-mix(in srgb, var(--surface) 90%, transparent);
}

.premium-console {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
  box-shadow:
    0 30px 110px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

.console-grid {
  display: grid;
  grid-template-columns: 1.18fr 0.82fr;
  grid-auto-rows: minmax(76px, auto);
  gap: 10px;
  margin-bottom: 18px;
}

.console-grid span {
  position: relative;
  display: grid;
  place-items: end start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  font-size: 0.86rem;
  font-weight: 900;
  color: color-mix(in srgb, var(--text) 90%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-2) 20%, transparent), transparent 56%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.07), rgba(255,255,255,0.07) 1px, transparent 1px, transparent 12px),
    color-mix(in srgb, var(--surface-2) 88%, transparent);
}

.console-grid span::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
  transform: translateX(-120%);
  animation: console-sweep 4.8s ease-in-out infinite;
}

.console-grid span:nth-child(1) {
  grid-row: span 2;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 28%, transparent), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.08) 1px, transparent 1px, transparent 18px),
    color-mix(in srgb, var(--surface-2) 88%, transparent);
}

.console-grid span:nth-child(3) {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-3) 28%, transparent), transparent 58%),
    color-mix(in srgb, var(--surface-2) 88%, transparent);
}

.console-live::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-3);
  box-shadow: 0 0 22px color-mix(in srgb, var(--accent-3) 72%, transparent);
  animation: live-pulse 1.8s ease-in-out infinite;
}

.signal-meter {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
  min-height: 74px;
}

.signal-meter span {
  display: block;
  border: 1px solid var(--line);
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  animation: meter-rise 2.8s ease-in-out infinite alternate;
}

.signal-meter span:nth-child(1) { height: 36px; }
.signal-meter span:nth-child(2) { height: 58px; animation-delay: -0.5s; }
.signal-meter span:nth-child(3) { height: 44px; animation-delay: -1s; }
.signal-meter span:nth-child(4) { height: 68px; animation-delay: -1.5s; background: linear-gradient(180deg, var(--accent-3), var(--accent)); }

@keyframes signal-scan {
  from { transform: translateX(-90%); }
  to { transform: translateX(90%); }
}

@keyframes console-sweep {
  0%, 42% { transform: translateX(-120%); }
  72%, 100% { transform: translateX(120%); }
}

@keyframes live-pulse {
  0%, 100% { transform: scale(0.82); opacity: 0.64; }
  50% { transform: scale(1); opacity: 1; }
}

@keyframes meter-rise {
  from { transform: scaleY(0.68); filter: saturate(0.86); }
  to { transform: scaleY(1); filter: saturate(1.18); }
}

@keyframes signal-breathe {
  from { opacity: 0.16; transform: translateY(-8px); }
  to { opacity: 0.32; transform: translateY(8px); }
}

.broadcast-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.broadcast-panel span {
  min-height: 86px;
  display: grid;
  place-items: end start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--text) 88%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, transparent), transparent 62%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.06), rgba(255,255,255,0.06) 1px, transparent 1px, transparent 10px),
    color-mix(in srgb, var(--surface-2) 86%, transparent);
}

.broadcast-panel span:nth-child(2) {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-2) 20%, transparent), transparent 62%),
    color-mix(in srgb, var(--surface-2) 86%, transparent);
}

.broadcast-panel span:nth-child(3) {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-3) 24%, transparent), transparent 62%),
    color-mix(in srgb, var(--surface-2) 86%, transparent);
}

.editorial-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
}

.editorial-strip span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.desk-ticker {
  display: flex;
  gap: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent-2) 10%, transparent)),
    color-mix(in srgb, var(--surface) 76%, transparent);
}

.desk-ticker span {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--text);
  background: color-mix(in srgb, var(--bg) 52%, transparent);
  font-weight: 850;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  animation: ticker-step 9s ease-in-out infinite alternate;
}

.desk-ticker span:nth-child(even) {
  color: var(--accent);
}

.broadcast-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.board-cell {
  min-height: 162px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  display: grid;
  align-content: space-between;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 64%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.035), rgba(255,255,255,0.035) 1px, transparent 1px, transparent 14px),
    color-mix(in srgb, var(--surface) 84%, transparent);
  box-shadow: 0 14px 48px rgba(0,0,0,0.16);
}

.board-cell span {
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.board-cell strong {
  font-size: 1.35rem;
  line-height: 1.08;
}

.board-cell small {
  color: var(--muted);
  font-size: 0.92rem;
}

.front-brief-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.875fr 0.875fr;
  gap: 14px;
}

.front-brief {
  min-height: 300px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  display: grid;
  align-content: space-between;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 58%),
    color-mix(in srgb, var(--surface) 86%, transparent);
  box-shadow: 0 14px 52px rgba(0,0,0,0.16);
}

.front-brief::after {
  content: "";
  position: absolute;
  inset: auto 18px 16px 18px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), transparent);
  opacity: 0.8;
}

.front-brief h2 {
  font-size: 2rem;
}

.front-brief strong {
  color: var(--accent);
  font-size: 0.96rem;
}

.lead-brief {
  min-height: 340px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, transparent), transparent 62%),
    linear-gradient(225deg, color-mix(in srgb, var(--accent-3) 12%, transparent), transparent 56%),
    color-mix(in srgb, var(--surface) 88%, transparent);
}

@keyframes ticker-step {
  from { transform: translateX(0); }
  to { transform: translateX(-18px); }
}

.studio-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3));
}

.signal-desk {
  min-height: 330px;
  display: grid;
  align-content: center;
  gap: 18px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.06), rgba(255,255,255,0.06) 1px, transparent 1px, transparent 14px),
    color-mix(in srgb, var(--surface) 92%, transparent);
}

.signal-mark {
  width: 100%;
  min-height: 220px;
}

.signal-path {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 680;
  animation: signal-draw 8s ease-in-out infinite alternate;
}

.path-a { stroke: var(--accent); }
.path-b { stroke: var(--accent-2); animation-delay: -1.6s; }
.path-c { stroke: var(--accent-3); animation-delay: -3.2s; }

@keyframes signal-draw {
  from { stroke-dashoffset: 520; opacity: 0.55; }
  to { stroke-dashoffset: 0; opacity: 1; }
}

.token-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.token-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
}

.swatch {
  display: block;
  min-height: 74px;
  border-radius: 8px;
  border: 1px solid var(--line);
  margin-bottom: 14px;
}

.swatch-bg { background: linear-gradient(135deg, var(--bg), var(--surface-2)); }
.swatch-accent { background: var(--accent); }
.swatch-blue { background: var(--accent-2); }
.swatch-amber { background: var(--accent-3); }

.type-sample h2 {
  font-size: var(--font-step-3);
}

.spacing-demo {
  display: flex;
  align-items: end;
  gap: var(--space-3);
}

.spacing-demo span {
  display: block;
  width: 52px;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
}

.spacing-demo span:nth-child(1) { height: var(--space-4); }
.spacing-demo span:nth-child(2) { height: var(--space-5); }
.spacing-demo span:nth-child(3) { height: var(--space-6); }

.signal-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 10px;
  margin-bottom: 18px;
}

.signal-grid span {
  min-height: 82px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 24%, transparent), transparent 56%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.08), rgba(255,255,255,0.08) 1px, transparent 1px, transparent 9px),
    color-mix(in srgb, var(--surface-2) 84%, transparent);
}

.signal-grid span:nth-child(2) {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-2) 28%, transparent), transparent 58%),
    color-mix(in srgb, var(--surface-2) 84%, transparent);
}

.signal-grid span:nth-child(3) {
  grid-column: span 2;
  min-height: 48px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent-3) 38%, transparent), transparent),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0.1) 2px, transparent 2px, transparent 18px),
    color-mix(in srgb, var(--surface-2) 84%, transparent);
}

.signal-grid span:nth-child(4) {
  display: none;
}

.route-console {
  display: grid;
  gap: 12px;
  min-height: 320px;
  align-content: center;
}

.route-lines {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.route-lines span {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 28%, transparent), transparent 64%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.08) 1px, transparent 1px, transparent 14px),
    color-mix(in srgb, var(--surface-2) 84%, transparent);
}

.route-lines span:nth-child(2) {
  width: 86%;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent-2) 28%, transparent), transparent 64%),
    color-mix(in srgb, var(--surface-2) 84%, transparent);
}

.route-lines span:nth-child(3) {
  width: 72%;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent-3) 30%, transparent), transparent 64%),
    color-mix(in srgb, var(--surface-2) 84%, transparent);
}

.route-lines span:nth-child(4) {
  width: 58%;
}

.screen-frame {
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(110,231,183,0.16), rgba(125,211,252,0.1)),
    linear-gradient(180deg, #11151d, #06080b);
  padding: 18px;
  display: grid;
  align-content: end;
  gap: 10px;
  overflow: hidden;
  position: relative;
}

.screen-frame::before {
  content: "";
  position: absolute;
  inset: 18px 18px auto auto;
  width: 46%;
  height: 38%;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.18);
}

.screen-frame .caption {
  position: relative;
  font-weight: 850;
  font-size: 2rem;
  max-width: 78%;
}

.signal-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.signal-list li {
  display: flex;
  gap: 10px;
  color: var(--muted);
  list-style: none;
}

.signal-list li::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 8px;
  background: var(--accent);
  flex: 0 0 auto;
}

.section {
  padding: 52px 0;
}

.compact-section {
  padding: 20px 0 0;
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.section-head p {
  max-width: 620px;
}

.grid {
  display: grid;
  gap: 16px;
}

.grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid.five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.card,
.feature-card,
.route-card,
.series-card,
.clip-card,
.schedule-card,
.auth-panel,
.tier-card,
.template-card,
.metric-card {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.12);
  min-width: 0;
  overflow-wrap: break-word;
}

.card:hover,
.feature-card:hover,
.route-card:hover,
.series-card:hover,
.clip-card:hover,
.tier-card:hover,
.template-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
}

.route-card,
.series-card {
  position: relative;
  overflow: hidden;
}

.route-card::before,
.series-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3));
}

.route-card {
  min-height: 250px;
  display: grid;
  align-content: space-between;
}

.series-card {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 62%),
    color-mix(in srgb, var(--surface) 86%, transparent);
}

.series-card small,
.route-card small {
  color: var(--muted);
  font-weight: 760;
}

.official-card {
  display: grid;
  gap: 12px;
}

.official-proof {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: color-mix(in srgb, var(--bg) 42%, transparent);
  display: grid;
  gap: 4px;
}

.official-proof strong {
  color: var(--accent);
}

.official-proof span,
.official-proof small {
  color: var(--muted);
}

.compact-stack {
  display: grid;
  gap: 10px;
}

.official-mini {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--surface-2) 68%, transparent);
}

.official-mini span,
.official-mini em {
  color: var(--muted);
  font-style: normal;
}

.feature-card.highlight {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), color-mix(in srgb, var(--accent-2) 14%, var(--surface)));
}

.signal-card,
.article-card,
.schedule-standby,
.clip-empty-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 62%),
    color-mix(in srgb, var(--surface) 86%, transparent);
  box-shadow: 0 10px 40px rgba(0,0,0,0.12);
}

.signal-card::before,
.article-card::before,
.schedule-standby::before,
.clip-empty-panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2), var(--accent-3));
}

.signal-card:hover,
.article-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
}

.article-card {
  display: grid;
  gap: 12px;
  align-content: start;
}

.article-card h2,
.article-card h3 {
  margin-bottom: 0;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 0.9rem;
}

.article-summary {
  color: var(--text);
  font-weight: 760;
}

.article-body {
  display: grid;
  gap: 10px;
}

.article-body p {
  margin-bottom: 0;
}

/* Per-stream archive hub: one entry per stream = recap article + all links. */
.stream-entry {
  display: grid;
  gap: 16px;
  padding: 22px 0 26px;
  border-bottom: 1px solid var(--line);
}
.stream-entry:last-child {
  border-bottom: 0;
}
.stream-links {
  display: grid;
  gap: 14px;
}
.stream-links-group {
  display: grid;
  gap: 8px;
}
.stream-links-group .pill-row {
  gap: 8px;
}
.stream-links-group .button {
  margin: 0;
}

.article-figure {
  margin: 4px 0 6px;
  display: grid;
  gap: 8px;
}

.article-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-2) 84%, transparent);
}

.article-figure figcaption {
  color: var(--muted);
  font-size: 0.9rem;
}

.takeaway-box {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: color-mix(in srgb, var(--bg) 38%, transparent);
}

.takeaway-box strong,
.schedule-standby strong,
.signal-card strong {
  color: var(--accent);
}

.compact-article {
  padding: 16px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 58%),
    color-mix(in srgb, var(--surface-2) 68%, transparent);
}

.signal-flow-card {
  min-height: 320px;
}

.signal-steps {
  counter-reset: signalsteps;
  padding-left: 0;
  list-style: none;
}

.signal-steps li {
  counter-increment: signalsteps;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: start;
}

.signal-steps li::before {
  content: counter(signalsteps);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #071016;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  font-weight: 900;
}

.schedule-standby,
.clip-empty-panel {
  min-height: 230px;
  display: grid;
  align-content: center;
  gap: 10px;
}

.empty-state {
  border-style: dashed;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 88%, transparent), color-mix(in srgb, var(--surface-2) 74%, transparent));
}

.library-controls {
  display: grid;
  grid-template-columns: minmax(260px, 420px) 1fr;
  gap: 14px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.search-field {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-weight: 750;
}

.search-field input {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 14px;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  color: var(--text);
}

.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.filter-button {
  cursor: pointer;
  color: var(--text);
}

.filter-button[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #071016;
  border-color: transparent;
}

.game-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.game-filters label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-weight: 750;
}

.game-filters select {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  color: var(--text);
}

.games-list {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

.game-entry {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 58%),
    color-mix(in srgb, var(--surface) 88%, transparent);
  overflow: hidden;
  overflow-wrap: anywhere;
}

.game-entry summary {
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 18px 20px;
}

.game-entry summary strong,
.game-entry summary small {
  display: block;
}

.game-entry summary strong {
  font-size: 1.28rem;
}

.game-entry summary small {
  color: var(--muted);
  margin-bottom: 4px;
}

.game-entry-body {
  display: grid;
  gap: 16px;
  padding: 0 20px 20px;
}

.game-entry-body > * {
  min-width: 0;
}

.primary-pick,
.conflict-flag,
.sami-sheet,
.source-strip {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}

.primary-pick {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 62%),
    color-mix(in srgb, var(--surface-2) 76%, transparent);
}

.conflict-flag {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}

.conflict-flag.has-conflict {
  border-color: color-mix(in srgb, var(--accent-3) 68%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-3) 20%, transparent), transparent 64%),
    color-mix(in srgb, var(--surface-2) 82%, transparent);
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.source-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.source-strip a {
  color: var(--accent-2);
  font-weight: 800;
}

.release-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.release-sources a {
  color: var(--accent-2);
  font-size: 0.78rem;
  font-weight: 800;
}

.sami-sheet {
  display: grid;
  gap: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 58%),
    color-mix(in srgb, var(--surface-2) 76%, transparent);
}

.sami-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.sami-facts p {
  display: grid;
  gap: 4px;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-radius: 8px;
  padding: 10px;
  background: color-mix(in srgb, var(--bg) 46%, transparent);
}

.sami-facts strong {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sami-facts span {
  font-weight: 850;
}

.sami-sheet blockquote {
  margin: 0;
  border-left: 3px solid var(--accent);
  padding-left: 14px;
  color: var(--text);
  font-weight: 750;
}

.settings-played {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 58%),
    color-mix(in srgb, var(--surface-2) 76%, transparent);
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.settings-grid p {
  display: grid;
  gap: 4px;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--accent-2) 18%, var(--line));
  border-radius: 8px;
  padding: 10px;
  background: color-mix(in srgb, var(--bg) 46%, transparent);
}

.settings-grid strong {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.settings-grid span {
  font-weight: 800;
}

@media (max-width: 640px) {
  .settings-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- on-stream play log ---- */
.playlog-list {
  display: grid;
  gap: 14px;
}

.playlog-entry .playlog-total-badge,
.playlog-total-badge {
  align-self: center;
  font-weight: 800;
  font-size: 0.82rem;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent-2) 32%, var(--line));
  background: color-mix(in srgb, var(--accent-2) 14%, transparent);
}

.playlog-review {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}

.playlog-review blockquote {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.5;
}

.playlog-review-score {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.playlog-score {
  font-weight: 900;
  padding: 2px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
}

.playlog-days {
  display: grid;
  gap: 10px;
}

.playlog-days h3 {
  margin: 4px 0 0;
}

.playlog-day {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--bg) 44%, transparent);
}

.playlog-day header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}

.playlog-day-total {
  font-weight: 800;
  color: var(--muted);
  font-size: 0.85rem;
}

.playlog-sessions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.playlog-sessions li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-variant-numeric: tabular-nums;
  padding: 4px 0;
  border-top: 1px dashed color-mix(in srgb, var(--line) 70%, transparent);
}

.playlog-sessions li:first-child {
  border-top: none;
}

.playlog-span {
  font-weight: 700;
}

.playlog-dur {
  color: var(--muted);
}

.release-list {
  display: grid;
  gap: 10px;
}

.release-row,
.release-empty {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}

.release-row > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.release-row p,
.release-empty span {
  margin: 0;
}

.release-row small {
  color: var(--muted);
  font-weight: 800;
}

.role-badge {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  border-radius: 999px;
  padding: 0 9px;
  border: 1px solid var(--line);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.role-primary {
  border-color: color-mix(in srgb, var(--accent-2) 52%, var(--line));
  background: color-mix(in srgb, var(--accent-2) 10%, var(--surface-2));
}

.role-primary .role-badge {
  color: #071016;
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.role-secondary {
  border-color: color-mix(in srgb, var(--accent-3) 62%, var(--line));
  background: color-mix(in srgb, var(--accent-3) 12%, var(--surface-2));
}

.role-secondary .role-badge {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent-3) 50%, transparent);
  background: color-mix(in srgb, var(--accent-3) 22%, transparent);
}

.confidence-badge {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.74rem;
}

.confidence-high {
  color: #071016;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
}

.confidence-medium {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent-3) 62%, var(--line));
  background: color-mix(in srgb, var(--accent-3) 14%, var(--surface));
}

.confidence-low {
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
}

html.archive-shot body[data-page="games"] main > .hero,
html.archive-shot body[data-page="games"] #method,
html.archive-shot body[data-page="games"] .games-stats-section {
  display: none;
}

html.archive-shot body[data-page="games"] .announcement-bar,
html.archive-shot body[data-page="games"] .site-header {
  display: none;
}

html.release-shot body[data-page="games"] .library-controls,
html.release-shot body[data-page="games"] .sami-sheet,
html.release-shot body[data-page="games"] .primary-pick,
html.release-shot body[data-page="games"] .secondary-grid,
html.release-shot body[data-page="games"] .conflict-flag,
html.release-shot body[data-page="games"] .caveat-grid,
html.release-shot body[data-page="games"] .source-strip {
  display: none;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
}

.quiet-list {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
}

.quiet-list li + li {
  margin-top: 8px;
}

.data-note {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 62%, transparent);
}

.proof-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.proof-strip div {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  background: color-mix(in srgb, var(--surface) 76%, transparent);
}

.proof-strip strong {
  display: block;
  font-size: 1.35rem;
}

.spotlight-card {
  min-height: 260px;
  display: grid;
  align-content: space-between;
}

.tier-card strong,
.metric-card strong {
  display: block;
  font-size: 1.35rem;
  margin: 8px 0 12px;
}

.template-card {
  display: grid;
  gap: 10px;
}

.media-kit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.timeline {
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 18px 0 0;
  list-style: none;
  counter-reset: steps;
}

.timeline li {
  counter-increment: steps;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  align-items: start;
}

.timeline li::before {
  content: counter(steps);
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #071016;
  font-weight: 900;
}

.timeline strong {
  display: block;
  font-size: 1.08rem;
}

.timeline span {
  color: var(--muted);
}

.card a:not(.button),
.feature-card a:not(.button),
.route-card a:not(.button),
.series-card a:not(.button) {
  color: var(--accent-2);
  font-weight: 750;
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 10px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
  font-size: 0.86rem;
}

.live-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 90%, transparent), color-mix(in srgb, var(--surface-2) 92%, transparent));
}

.status-dot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-weight: 760;
}

.status-dot::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-3);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent-3) 70%, transparent);
}

.live-badge,
.embed-facade,
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 58%),
    color-mix(in srgb, var(--surface) 86%, transparent);
  box-shadow: 0 16px 48px rgba(0,0,0,0.16);
}

.live-badge {
  display: grid;
  gap: 10px;
  min-height: 220px;
  align-content: center;
  position: relative;
  overflow: hidden;
}

.live-badge::after,
.embed-facade::after {
  content: "";
  position: absolute;
  inset: auto 18px 18px 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
  opacity: 0.5;
}

.live-badge.is-live {
  border-color: color-mix(in srgb, var(--accent-3) 52%, var(--line));
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--accent-3) 22%, transparent), transparent 34%),
    color-mix(in srgb, var(--surface) 90%, transparent);
}

.live-badge.is-live .status-dot::before {
  animation: live-pulse 1.4s ease-in-out infinite;
}

.embed-facade {
  min-height: 260px;
  display: grid;
  align-content: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
}

.embed-facade .embed-frame {
  min-height: clamp(260px, 48vw, 520px);
}

.video-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 14px;
  background: color-mix(in srgb, var(--surface-2) 84%, transparent);
}

.faq-item {
  display: grid;
  gap: 10px;
}

.faq-item summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 850;
}

.faq-item p {
  color: var(--muted);
}

[data-member-onboarding] {
  display: grid;
  gap: 12px;
  padding: 0;
  list-style: none;
}

[data-member-onboarding] li {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}

[data-member-onboarding] span {
  color: var(--muted);
}

.platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.platforms a {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  background: var(--surface);
}

.clip-card {
  padding: 0;
  overflow: hidden;
}

.clip-player {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(280px, 1fr);
  gap: 18px;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 54%),
    color-mix(in srgb, var(--surface) 86%, transparent);
}

.clip-player-empty,
.embed-frame {
  width: 100%;
  min-height: 260px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.06), rgba(255,255,255,0.06) 1px, transparent 1px, transparent 12px),
    color-mix(in srgb, var(--surface-2) 82%, transparent);
}

.clip-player-empty {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 760;
}

.embed-frame {
  display: block;
}

.clip-thumb {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  color: #071016;
  font-weight: 900;
  background:
    linear-gradient(135deg, rgba(110,231,183,0.92), rgba(125,211,252,0.82)),
    radial-gradient(circle at 20% 20%, #fff, transparent 34%);
}

.clip-body {
  padding: 18px;
}

.schedule-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 18px;
  align-items: start;
}

.time-block {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  color: var(--muted);
  background: var(--surface-2);
  text-align: center;
}

.time-block strong {
  display: block;
  color: var(--text);
  font-size: 1.15rem;
}

.auth-form {
  display: grid;
  gap: 12px;
}

.field {
  display: grid;
  gap: 6px;
}

.field label {
  color: var(--muted);
  font-weight: 750;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 13px;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  color: var(--text);
}

.field textarea {
  min-height: 120px;
  resize: vertical;
}

.status-text {
  min-height: 24px;
  color: var(--muted);
}

.status-text[data-tone="ok"] {
  color: var(--accent);
}

.status-text[data-tone="bad"] {
  color: var(--danger);
}

.member-room {
  display: grid;
  gap: 18px;
}

.callout {
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border-radius: var(--radius);
  padding: 18px;
}

.quiet-list {
  padding-left: 18px;
  color: var(--muted);
}

.quiet-list li {
  margin: 8px 0;
}

.site-footer {
  border-top: 1px solid var(--line);
  padding: 34px 0;
  margin-top: 40px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 24px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: end;
}

.footer-meta {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

[hidden] {
  display: none !important;
}

.rtl {
  direction: rtl;
  text-align: right;
}

.rtl .hero-actions,
.rtl .button-row,
.rtl .platforms,
.rtl .pill-row {
  justify-content: flex-start;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 100;
  transform: translateY(-150%);
  background: var(--accent);
  color: #071016;
  padding: 8px 12px;
  border-radius: 8px;
}

.skip-link:focus {
  transform: translateY(0);
}

@media (max-width: 980px) {
  h1 {
    font-size: 3.65rem;
  }

  h2 {
    font-size: 2.2rem;
  }

  .lede {
    font-size: 1.17rem;
  }

  .nav {
    grid-template-columns: auto 1fr auto;
  }

  .brand {
    grid-column: 1;
    grid-row: 1;
  }

  .menu-button {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    width: auto;
  }

  .nav-actions {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .menu-button {
    display: inline-flex;
    align-items: center;
  }

  .nav-links {
    grid-column: 1 / -1;
    position: absolute;
    inset: 72px 16px auto;
    display: none;
    justify-content: flex-start;
    flex-direction: column;
    align-items: stretch;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
  }

  .nav-links[data-open="true"] {
    display: flex;
  }

  /* Inside the mobile menu panel the grouped dropdowns expand INLINE (no flyout):
     tapping the summary toggles the native <details>, revealing its links stacked
     and slightly indented. */
  .nav-group {
    width: 100%;
  }

  .nav-group > summary {
    width: 100%;
    justify-content: space-between;
  }

  .nav-group-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    min-width: 0;
    width: 100%;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 2px 0 6px 12px;
    display: none;
  }

  .nav-group[open] > .nav-group-menu {
    display: flex;
  }

  .nav-group-menu::before {
    display: none;
  }

  .hero-grid,
  .grid.two,
  .grid.three,
  .grid.four,
  .footer-grid,
  .live-panel,
  .media-kit-grid,
  .clip-player,
  .game-grid,
  .library-controls,
  .broadcast-board,
  .front-brief-grid {
    grid-template-columns: 1fr;
  }

  .grid.five {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .game-filters {
    grid-template-columns: 1fr;
  }

  .hero-grid {
    display: block;
  }

  .metric-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .proof-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .token-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-links {
    justify-content: start;
  }
}

@media (max-width: 640px) {
  .nav {
    grid-template-columns: auto auto auto;
    justify-content: space-between;
    gap: 10px;
  }

  .menu-button {
    grid-column: 2;
  }

  .nav-actions {
    grid-column: 3;
  }

  .theme-button[data-theme-toggle] {
    display: none;
  }

  .nav-actions {
    display: none;
  }

  .nav-lang-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  h1 {
    font-size: 1.7rem;
    max-width: calc(100vw - 48px);
  }

  h2 {
    font-size: 1.3rem;
  }

  .lede {
    font-size: 1rem;
  }

  .hero-kicker {
    font-size: 1.12rem;
  }

  .wrap {
    width: min(var(--max), calc(100vw - 36px));
  }

  .hero {
    padding-top: 52px;
  }

  .hero-grid {
    gap: 24px;
  }

  .hero-grid > div,
  .hero-grid > aside,
  .hero-actions,
  .editorial-strip,
  .studio-card {
    width: 100%;
    max-width: 21rem;
  }

  .hero-command .lede {
    max-width: 32ch;
  }

  .hero-command {
    padding-top: 58px;
  }

  .editorial-strip {
    max-width: 100%;
    overflow: hidden;
  }

  .editorial-strip span {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .studio-card,
  .card,
  .feature-card,
  .tier-card,
  .template-card,
  .metric-card {
    padding: 16px;
  }

  .broadcast-panel span {
    min-height: 64px;
  }

  .studio-card .caption {
    font-size: 1.1rem;
  }

  .hero-actions .button {
    flex: 1 1 100%;
  }

  .hero-promises {
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  .metric-strip {
    grid-template-columns: 1fr;
  }

  .proof-strip {
    grid-template-columns: 1fr;
  }

  .token-grid {
    grid-template-columns: 1fr;
  }

  .section-head {
    display: block;
  }

  .section-head h2 {
    max-width: 20rem;
  }

  .schedule-card {
    grid-template-columns: 1fr;
  }

  .footer-meta {
    display: grid;
  }

  .broadcast-panel {
    grid-template-columns: 1fr;
  }

  .broadcast-board {
    grid-template-columns: 1fr;
  }

  .front-brief-grid {
    grid-template-columns: 1fr;
  }

  .front-brief,
  .board-cell {
    min-height: auto;
  }

  .signal-console {
    min-height: 340px;
    margin-top: 24px;
  }

  .console-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(58px, auto);
  }

  .console-grid span:nth-child(1) {
    grid-row: auto;
  }

  .signal-meter {
    min-height: 54px;
  }

  .timeline li {
    grid-template-columns: 1fr;
  }

  .signal-steps li {
    grid-template-columns: 1fr;
  }

  .announcement-bar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 0;
    line-height: 1.35;
  }

  .official-mini {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

@media (max-device-width: 640px) {
  .hero-grid > div,
  .hero-grid > aside,
  .hero-actions,
  .editorial-strip,
  .studio-card {
    width: 100%;
    max-width: 21rem;
  }

  .hero-command .lede {
    max-width: 32ch;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .signal-path {
    animation: none !important;
    stroke-dashoffset: 0;
  }

  .desk-ticker span {
    animation: none !important;
  }
}

/* Premium editorial redesign layer */
:root {
  --bg: #080705;
  --bg-soft: #11100d;
  --surface: rgba(18, 17, 14, 0.78);
  --surface-2: rgba(35, 31, 24, 0.76);
  --text: #fff8eb;
  --muted: #c9bdab;
  --line: rgba(255, 248, 235, 0.16);
  --accent: #f2c879;
  --accent-2: #78d7e7;
  --accent-3: #ff744f;
  --shadow: 0 28px 90px rgba(0, 0, 0, 0.58);
  --radius: 8px;
  --max: 1240px;
  --pointer-x: 50vw;
  --pointer-y: 50vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme="light"] {
  --bg: #f3efe5;
  --bg-soft: #e8dfcf;
  --surface: rgba(255, 251, 242, 0.82);
  --surface-2: rgba(232, 222, 205, 0.84);
  --text: #17130d;
  --muted: #645948;
  --line: rgba(28, 22, 13, 0.16);
  --accent: #9a6722;
  --accent-2: #0d7185;
  --accent-3: #bb4326;
  --shadow: 0 24px 70px rgba(54, 43, 27, 0.16);
}

html.premium-experience {
  background: var(--bg);
}

body {
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(242, 200, 121, 0.13), transparent 24rem),
    radial-gradient(circle at 88% 12%, rgba(120, 215, 231, 0.12), transparent 26rem),
    linear-gradient(180deg, var(--bg) 0%, #10100d 48%, var(--bg-soft) 100%);
}

body::before {
  background-image:
    linear-gradient(90deg, rgba(255, 248, 235, 0.045) 1px, transparent 1px),
    linear-gradient(rgba(255, 248, 235, 0.032) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.34), transparent 72%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(120deg, transparent 0 42%, rgba(242, 200, 121, 0.08) 42% 43%, transparent 43%),
    linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.24));
}

.wrap {
  width: min(var(--max), calc(100vw - 48px));
}

.announcement-bar {
  background:
    linear-gradient(90deg, rgba(242, 200, 121, 0.22), rgba(120, 215, 231, 0.10)),
    rgba(8, 7, 5, 0.88);
}

.announcement-bar a {
  min-height: 38px;
  font-size: 0.88rem;
}

.announcement-bar strong,
.eyebrow {
  color: var(--accent);
  letter-spacing: 0.12em;
}

.site-header {
  background: rgba(8, 7, 5, 0.78);
  border-bottom: 1px solid rgba(255, 248, 235, 0.12);
  box-shadow: 0 12px 38px rgba(0, 0, 0, 0.28);
}

:root[data-theme="light"] .site-header {
  background: rgba(243, 239, 229, 0.84);
}

.nav {
  min-height: 76px;
}

.brand {
  font-size: 0.96rem;
}

.brand-mark {
  border-radius: 8px;
  border-color: rgba(242, 200, 121, 0.36);
  background:
    linear-gradient(135deg, rgba(242, 200, 121, 0.95), rgba(120, 215, 231, 0.74)),
    #17130d;
  color: #080705;
  box-shadow: 0 12px 32px rgba(242, 200, 121, 0.18);
}

.nav-links {
  gap: 4px;
}

.nav-links a,
.footer-links a,
.theme-button {
  border: 1px solid transparent;
  border-radius: 8px;
  color: color-mix(in srgb, var(--muted) 92%, var(--text));
  transition: transform 180ms ease, color 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  transform: translate(var(--magnet-x, 0), var(--magnet-y, 0));
}

.nav-links a[aria-current="page"],
.nav-links a:hover,
.footer-links a:hover,
.theme-button:hover {
  color: var(--text);
  background: rgba(255, 248, 235, 0.07);
  border-color: rgba(242, 200, 121, 0.24);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

h1,
h2,
h3 {
  letter-spacing: 0;
}

h1 {
  font-size: 5.6rem;
  line-height: 0.96;
  max-width: 11ch;
  text-wrap: balance;
}

h2 {
  line-height: 1.05;
}

.lede,
.sub,
p {
  color: color-mix(in srgb, var(--muted) 92%, var(--text));
}

.button,
button.button {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  border-color: rgba(255, 248, 235, 0.18);
  background: rgba(255, 248, 235, 0.055);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
  transform: translate(var(--magnet-x, 0), var(--magnet-y, 0));
}

.button::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 0 28%, rgba(255, 255, 255, 0.24) 44%, transparent 62% 100%);
  transform: translateX(-130%);
  transition: transform 520ms ease;
}

.button:hover::after {
  transform: translateX(130%);
}

.button.primary {
  background:
    linear-gradient(135deg, #f6d083, #78d7e7 58%, #fff4dc);
  color: #080705;
  border-color: rgba(255, 248, 235, 0.32);
  box-shadow: 0 18px 52px rgba(242, 200, 121, 0.22), 0 10px 38px rgba(120, 215, 231, 0.12);
}

.button:hover,
.theme-button:hover {
  transform: translate(var(--magnet-x, 0), var(--magnet-y, 0)) translateY(-2px);
}

.hero {
  position: relative;
  isolation: isolate;
  border-bottom: 1px solid rgba(255, 248, 235, 0.12);
  background:
    radial-gradient(circle at 84% 8%, rgba(242, 200, 121, 0.15), transparent 24rem),
    linear-gradient(180deg, rgba(255, 248, 235, 0.035), transparent);
}

.hero .wrap {
  position: relative;
  z-index: 1;
}

.hero-broadcast {
  min-height: calc(100vh - 76px);
  padding: 92px 0 64px;
  display: flex;
  align-items: center;
  background-image:
    linear-gradient(90deg, rgba(8, 7, 5, 0.96) 0%, rgba(8, 7, 5, 0.82) 34%, rgba(8, 7, 5, 0.38) 64%, rgba(8, 7, 5, 0.18) 100%),
    linear-gradient(180deg, rgba(8, 7, 5, 0.20), rgba(8, 7, 5, 0.82)),
    url("hero-studio-premium.webp");
  background-position: center calc(50% + var(--hero-shift, 0px));
  background-size: cover;
}

.hero-broadcast::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(242, 200, 121, 0.34), transparent 20% 82%, rgba(120, 215, 231, 0.18)),
    linear-gradient(180deg, transparent 0 78%, var(--bg) 100%);
  opacity: calc(0.42 + (var(--scroll-ratio, 0) * 0.18));
}

.hero-broadcast::after {
  background:
    linear-gradient(90deg, rgba(255, 248, 235, 0.28), transparent 18% 100%),
    repeating-linear-gradient(90deg, transparent 0 13px, rgba(255, 248, 235, 0.035) 13px 14px);
  animation: premium-light-sweep 9s ease-in-out infinite alternate;
}

@keyframes premium-light-sweep {
  from {
    opacity: 0.20;
    transform: translateX(-2%);
  }
  to {
    opacity: 0.48;
    transform: translateX(2%);
  }
}

.hero-broadcast .wrap {
  display: block;
}

.hero-broadcast .signal-console {
  display: none;
}

.hero-broadcast h1 {
  max-width: 9.8ch;
  text-shadow: 0 24px 80px rgba(0, 0, 0, 0.62);
}

.hero-kicker {
  max-width: 31ch;
  font-size: 1.42rem;
  line-height: 1.32;
  color: var(--text);
}

.hero-command .lede {
  max-width: 38rem;
}

.hero-actions {
  margin-top: 30px;
}

.hero-promises {
  max-width: 58rem;
  margin-top: 34px;
}

.hero-promises li {
  position: relative;
  border: 1px solid rgba(255, 248, 235, 0.13);
  background: rgba(8, 7, 5, 0.48);
  backdrop-filter: blur(16px);
  box-shadow: 0 24px 62px rgba(0, 0, 0, 0.28);
}

.hero-promises li::before {
  background: var(--accent);
  box-shadow: 0 0 18px rgba(242, 200, 121, 0.76);
}

.hero-scope {
  position: absolute;
  right: 0;
  top: clamp(176px, 26vh, 270px);
  bottom: auto;
  z-index: 2;
  width: min(360px, 31vw);
  min-width: 300px;
  padding: 14px;
  border: 1px solid rgba(255, 248, 235, 0.16);
  border-radius: 8px;
  color: var(--text);
  background:
    linear-gradient(145deg, rgba(255, 248, 235, 0.11), rgba(255, 248, 235, 0.025)),
    rgba(8, 7, 5, 0.58);
  box-shadow: 0 28px 82px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(20px);
  overflow: hidden;
}

.hero-scope::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(242, 200, 121, 0.12), transparent 44%, rgba(120, 215, 231, 0.10)),
    repeating-linear-gradient(0deg, transparent 0 9px, rgba(255, 248, 235, 0.035) 9px 10px);
}

.scope-head,
.scope-grid,
.scope-wave,
.scope-runline {
  position: relative;
  z-index: 1;
}

.scope-head,
.scope-runline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.scope-head span,
.scope-runline span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.scope-head strong {
  color: var(--accent);
  font-size: 0.76rem;
  letter-spacing: 0.10em;
}

.scope-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin: 14px 0 12px;
}

.scope-grid span {
  min-height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 248, 235, 0.13);
  border-radius: 8px;
  background: rgba(255, 248, 235, 0.045);
  color: var(--text);
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.scope-grid span::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 18px rgba(242, 200, 121, 0.84);
  animation: scope-dot 2.8s ease-in-out infinite;
}

.scope-grid span:nth-child(2)::after { animation-delay: -0.7s; background: var(--accent-2); }
.scope-grid span:nth-child(3)::after { animation-delay: -1.4s; }
.scope-grid span:nth-child(4)::after { animation-delay: -2.1s; background: var(--accent-3); }

.scope-wave {
  height: 82px;
  display: grid;
  grid-template-columns: repeat(18, minmax(0, 1fr));
  align-items: end;
  gap: 4px;
  margin: 8px 0 12px;
  padding: 12px 8px;
  border: 1px solid rgba(255, 248, 235, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(120, 215, 231, 0.08), transparent),
    rgba(0, 0, 0, 0.20);
}

.scope-wave span {
  display: block;
  min-height: 10px;
  border-radius: 999px 999px 2px 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 16px rgba(120, 215, 231, 0.18);
  transform-origin: bottom;
  animation: scope-wave 1.8s ease-in-out infinite alternate;
}

.scope-wave span:nth-child(1) { height: 18px; animation-delay: -0.1s; }
.scope-wave span:nth-child(2) { height: 28px; animation-delay: -0.2s; }
.scope-wave span:nth-child(3) { height: 46px; animation-delay: -0.3s; }
.scope-wave span:nth-child(4) { height: 34px; animation-delay: -0.4s; }
.scope-wave span:nth-child(5) { height: 54px; animation-delay: -0.5s; }
.scope-wave span:nth-child(6) { height: 24px; animation-delay: -0.6s; }
.scope-wave span:nth-child(7) { height: 61px; animation-delay: -0.7s; }
.scope-wave span:nth-child(8) { height: 40px; animation-delay: -0.8s; }
.scope-wave span:nth-child(9) { height: 66px; animation-delay: -0.9s; }
.scope-wave span:nth-child(10) { height: 36px; animation-delay: -1s; }
.scope-wave span:nth-child(11) { height: 58px; animation-delay: -1.1s; }
.scope-wave span:nth-child(12) { height: 30px; animation-delay: -1.2s; }
.scope-wave span:nth-child(13) { height: 48px; animation-delay: -1.3s; }
.scope-wave span:nth-child(14) { height: 26px; animation-delay: -1.4s; }
.scope-wave span:nth-child(15) { height: 52px; animation-delay: -1.5s; }
.scope-wave span:nth-child(16) { height: 32px; animation-delay: -1.6s; }
.scope-wave span:nth-child(17) { height: 42px; animation-delay: -1.7s; }
.scope-wave span:nth-child(18) { height: 22px; animation-delay: -1.8s; }

@keyframes scope-wave {
  from {
    transform: scaleY(0.72);
    opacity: 0.62;
  }
  to {
    transform: scaleY(1.08);
    opacity: 1;
  }
}

@keyframes scope-dot {
  0%, 100% {
    transform: scale(0.7);
    opacity: 0.52;
  }
  45% {
    transform: scale(1);
    opacity: 1;
  }
}

.editorial-strip,
.desk-ticker {
  border-color: rgba(242, 200, 121, 0.22);
  background: rgba(8, 7, 5, 0.62);
  backdrop-filter: blur(18px);
}

.desk-ticker {
  margin-top: -18px;
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.32);
}

.desk-ticker span {
  color: var(--accent);
}

.section {
  padding: 88px 0;
}

.compact-section {
  padding: 34px 0;
}

.section-head {
  align-items: end;
  margin-bottom: 28px;
}

.section-head h2 {
  max-width: 12ch;
  font-size: 3.15rem;
  line-height: 0.98;
}

.card,
.feature-card,
.signal-card,
.route-card,
.tier-card,
.template-card,
.metric-card,
.front-brief,
.board-cell,
.clip-empty-panel,
.auth-panel,
.live-panel,
.studio-card,
.timeline-card,
.data-note {
  position: relative;
  border-radius: 8px;
  border: 1px solid rgba(255, 248, 235, 0.14);
  background:
    linear-gradient(145deg, rgba(255, 248, 235, 0.08), rgba(255, 248, 235, 0.025)),
    rgba(12, 11, 9, 0.70);
  box-shadow: 0 26px 78px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(18px);
}

.card::before,
.feature-card::before,
.signal-card::before,
.route-card::before,
.tier-card::before,
.front-brief::before,
.board-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  border-top: 1px solid rgba(255, 248, 235, 0.18);
  background: linear-gradient(120deg, rgba(242, 200, 121, 0.14), transparent 42%, rgba(120, 215, 231, 0.08));
  opacity: 0;
  transition: opacity 240ms ease;
}

.card:hover::before,
.feature-card:hover::before,
.signal-card:hover::before,
.route-card:hover::before,
.tier-card:hover::before,
.front-brief:hover::before,
.board-cell:hover::before {
  opacity: 1;
}

.card:hover,
.feature-card:hover,
.signal-card:hover,
.route-card:hover,
.tier-card:hover,
.front-brief:hover,
.board-cell:hover {
  border-color: rgba(242, 200, 121, 0.32);
  transform: translateY(-3px);
}

.broadcast-board {
  border-radius: 8px;
  border: 1px solid rgba(255, 248, 235, 0.14);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(242, 200, 121, 0.09), transparent 40%, rgba(120, 215, 231, 0.06)),
    rgba(8, 7, 5, 0.58);
  box-shadow: 0 32px 86px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(18px);
}

.board-cell {
  min-height: 178px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  display: block;
}

.board-cell span,
.front-brief .pill,
.pill {
  border-color: rgba(242, 200, 121, 0.24);
  background: rgba(242, 200, 121, 0.09);
  color: color-mix(in srgb, var(--accent) 88%, var(--text));
}

.board-cell strong,
.front-brief h2,
.signal-card h2,
.route-card h2,
.feature-card h2,
.card h2 {
  color: var(--text);
}

.board-cell strong,
.board-cell small,
.board-cell p,
.front-brief h2,
.front-brief p,
.card h2,
.card p,
.feature-card h2,
.feature-card p {
  display: block;
  width: 100%;
  white-space: normal;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
}

.board-cell strong,
.board-cell small,
.board-cell p {
  margin-top: 12px;
}

.hero p,
.lede {
  max-width: 100%;
  overflow-wrap: break-word;
}

.hero .hero-kicker {
  max-width: 31ch;
}

.front-brief-grid {
  gap: 16px;
}

.front-brief {
  min-height: 320px;
  overflow: hidden;
}

.front-brief::after {
  background:
    radial-gradient(circle at 82% 12%, rgba(242, 200, 121, 0.28), transparent 8rem),
    linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.24));
}

.metric-card strong {
  color: var(--accent);
}

.article-card,
.clip-card,
.schedule-card {
  border-color: rgba(255, 248, 235, 0.14);
  background:
    linear-gradient(145deg, rgba(255, 248, 235, 0.075), rgba(255, 248, 235, 0.02)),
    rgba(13, 12, 10, 0.76);
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.32);
}

.article-card h2,
.clip-card h2,
.schedule-card h2 {
  font-size: 1.45rem;
}

.article-body p {
  color: color-mix(in srgb, var(--muted) 90%, var(--text));
  font-size: 1.03rem;
}

.footer-grid {
  border-top: 1px solid rgba(255, 248, 235, 0.12);
  padding-top: 34px;
}

.site-footer {
  background:
    radial-gradient(circle at 8% 0%, rgba(242, 200, 121, 0.12), transparent 24rem),
    #080705;
}

.page-transition {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(242, 200, 121, 0.94), rgba(120, 215, 231, 0.86)),
    #080705;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 220ms ease;
}

html.is-transitioning .page-transition {
  transform: scaleY(1);
  transform-origin: top;
}

.pointer-aura {
  position: fixed;
  left: var(--pointer-x);
  top: var(--pointer-y);
  width: 24rem;
  height: 24rem;
  z-index: 1;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 200, 121, 0.12), transparent 62%);
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}

.click-layer {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
}

.read-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 120;
  height: 2px;
  pointer-events: none;
  background: rgba(255, 248, 235, 0.05);
}

.read-progress span {
  display: block;
  width: calc(var(--read-progress, 0) * 100%);
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 22px rgba(242, 200, 121, 0.46);
  transition: width 120ms linear;
}

.desk-rail {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 70;
  display: grid;
  grid-template-columns: repeat(5, minmax(70px, 1fr));
  gap: 4px;
  padding: 5px;
  border: 1px solid rgba(255, 248, 235, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 248, 235, 0.10), rgba(255, 248, 235, 0.025)),
    rgba(8, 7, 5, 0.76);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(22px);
  transform: translate(-50%, 160%);
  opacity: 0;
  transition: transform 360ms ease, opacity 360ms ease;
}

html[data-scrolled="true"] .desk-rail {
  transform: translate(-50%, 0);
  opacity: 1;
}

.desk-rail a,
.desk-rail button {
  display: grid;
  gap: 0;
  min-height: 48px;
  place-content: center;
  padding: 7px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  text-align: center;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  background: transparent;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.desk-rail a:hover,
.desk-rail a:focus-visible,
.desk-rail button:hover,
.desk-rail button:focus-visible {
  background: rgba(255, 248, 235, 0.09);
  border-color: rgba(242, 200, 121, 0.32);
  transform: translateY(-2px);
}

.desk-rail span,
.desk-rail button span {
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.desk-rail strong,
.desk-rail button strong {
  font-size: 0.92rem;
  line-height: 1.1;
}

.command-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: start center;
  padding: 9vh 18px 24px;
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(242, 200, 121, 0.16), transparent 24rem),
    rgba(8, 7, 5, 0.72);
  backdrop-filter: blur(20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.command-overlay[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

html.command-open {
  overflow: hidden;
}

.command-dialog {
  width: min(760px, calc(100vw - 28px));
  border: 1px solid rgba(255, 248, 235, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 248, 235, 0.12), rgba(255, 248, 235, 0.03)),
    rgba(10, 9, 7, 0.90);
  box-shadow: 0 36px 120px rgba(0, 0, 0, 0.62);
  overflow: hidden;
  transform: translateY(18px) scale(0.98);
  transition: transform 260ms ease;
}

.command-overlay[aria-hidden="false"] .command-dialog {
  transform: translateY(0) scale(1);
}

.command-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border-bottom: 1px solid rgba(255, 248, 235, 0.12);
}

.command-head button {
  border: 1px solid rgba(255, 248, 235, 0.16);
  border-radius: 8px;
  background: rgba(255, 248, 235, 0.06);
  color: var(--text);
  padding: 8px 12px;
}

.command-search {
  display: grid;
  gap: 8px;
  padding: 18px 16px 14px;
}

.command-search span {
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.command-search input {
  width: 100%;
  border: 1px solid rgba(255, 248, 235, 0.16);
  border-radius: 8px;
  background: rgba(255, 248, 235, 0.055);
  color: var(--text);
  padding: 15px 16px;
  font-size: 1.05rem;
}

.command-results {
  display: grid;
  gap: 6px;
  max-height: min(54vh, 520px);
  overflow: auto;
  padding: 0 10px 12px;
}

.command-result {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text);
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
  transform: translate(var(--magnet-x, 0), var(--magnet-y, 0));
}

.command-result:hover,
.command-result:focus-visible {
  background: rgba(255, 248, 235, 0.08);
  border-color: rgba(242, 200, 121, 0.28);
}

.command-result span,
.command-empty {
  color: var(--muted);
  margin: 0;
}

.click-pulse {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(242, 200, 121, 0.92);
  transform: translate(-50%, -50%) scale(0.4);
  animation: premium-click 620ms ease-out forwards;
}

@keyframes premium-click {
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(10);
  }
}

/* ⛔ CONTENT IS NEVER HIDDEN BY DEFAULT (fixed 2026-07-25).
   This used to be `opacity: 0; transform: translateY(26px)`, revealed only when
   site.js's IntersectionObserver added `.is-visible`. On Sami's iPhone and iPad the
   observer never revealed anything below the fold, so the whole page existed in the
   DOM at opacity 0 -- you saw the hero and the first cards and NOTHING under them,
   on every reload, forever. It looked exactly like "the games won't load" when in
   fact they had loaded and were invisible.

   Content visibility must NEVER depend on JavaScript running correctly. The reveal is
   now purely additive: everything starts visible, and `.is-visible` only supplies a
   soft entrance when the observer happens to work. If the JS never runs, never fires,
   or the browser lacks IntersectionObserver, the page is still completely readable. */
.motion-reveal {
  opacity: 1;
  transform: none;
  transition: opacity 680ms ease, transform 680ms ease;
}

.motion-reveal.is-visible {
  opacity: 1;
  transform: none;
}

.grid.three > *:nth-child(2),
.grid.four > *:nth-child(2),
.broadcast-board > *:nth-child(2),
.front-brief-grid > *:nth-child(2) {
  transition-delay: 90ms;
}

.grid.three > *:nth-child(3),
.grid.four > *:nth-child(3),
.broadcast-board > *:nth-child(3),
.front-brief-grid > *:nth-child(3) {
  transition-delay: 160ms;
}

.grid.four > *:nth-child(4),
.broadcast-board > *:nth-child(4) {
  transition-delay: 230ms;
}

@media (max-width: 980px) {
  .wrap {
    width: min(var(--max), calc(100vw - 34px));
  }

  h1 {
    font-size: 3.8rem;
    max-width: 10ch;
  }

  .hero-broadcast {
    min-height: auto;
    padding: 74px 0 54px;
    background-position: 58% center;
  }

  .hero-scope {
    position: relative;
    right: auto;
    top: auto;
    bottom: auto;
    width: min(100%, 31rem);
    min-width: 0;
    margin-top: 24px;
  }

  .section-head h2 {
    font-size: 2.25rem;
    max-width: 16ch;
  }

  .section {
    padding: 64px 0;
  }
}

@media (max-width: 640px) {
  .wrap {
    width: min(var(--max), calc(100vw - 28px));
  }

  h1 {
    font-size: 2.45rem;
    max-width: calc(100vw - 34px);
  }

  .hero-broadcast {
    padding: 58px 0 42px;
    background-image:
      linear-gradient(180deg, rgba(8, 7, 5, 0.86) 0%, rgba(8, 7, 5, 0.76) 52%, rgba(8, 7, 5, 0.93) 100%),
      url("hero-studio-premium.webp");
    background-position: 58% center;
  }

  .hero-kicker {
    font-size: 1.08rem;
  }

  .hero-command .lede {
    max-width: 31ch;
  }

  .hero-promises li {
    background: rgba(8, 7, 5, 0.66);
  }

  .hero-scope {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    min-width: 0;
    margin-top: 24px;
  }

  .scope-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scope-runline {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .timeline li,
  .timeline li span,
  .timeline li strong {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .section-head h2 {
    font-size: 1.72rem;
  }

  .card,
  .feature-card,
  .signal-card,
  .route-card,
  .tier-card,
  .template-card,
  .metric-card,
  .front-brief,
  .board-cell,
  .clip-empty-panel,
  .auth-panel {
    padding: 17px;
  }

  .announcement-bar a {
    width: min(100%, calc(100vw - 28px));
    padding-left: 0;
    padding-right: 0;
  }

  .announcement-bar span {
    max-width: 30ch;
    text-align: center;
  }

  .broadcast-board {
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, calc(100vw - 28px));
  }

  .grid.five {
    grid-template-columns: 1fr;
  }

  .game-entry summary {
    grid-template-columns: 1fr;
    align-items: start;
    padding: 14px;
  }

  .game-entry-body {
    padding: 0 14px 14px;
  }

  .primary-pick,
  .conflict-flag,
  .sami-sheet,
  .source-strip {
    padding: 14px;
  }

  .sami-facts {
    grid-template-columns: 1fr;
  }

  .release-row > div {
    align-items: flex-start;
    flex-direction: column;
  }

  .board-cell {
    width: 100%;
    display: block;
  }

  .board-cell span,
  .board-cell strong,
  .board-cell small,
  .board-cell p,
  .hero p,
  .lede {
    display: block;
    width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
  }

  .board-cell strong,
  .board-cell small,
  .board-cell p {
    margin-top: 12px;
  }

  [data-member-onboarding] li {
    grid-template-columns: 1fr;
  }

  .pointer-aura {
    display: none;
  }

  .desk-rail {
    width: calc(100vw - 20px);
    bottom: 10px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .desk-rail a,
  .desk-rail button {
    min-height: 44px;
    padding: 6px 4px;
  }

  .desk-rail span {
    font-size: 0.62rem;
  }

  .desk-rail strong {
    font-size: 0.74rem;
  }

  .command-overlay {
    padding-top: 76px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-reveal,
  .motion-reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  .pointer-aura,
  .click-layer,
  .page-transition {
    display: none;
  }

  .scope-grid span::after,
  .scope-wave span {
    animation: none;
  }

  .desk-rail {
    transition: none;
  }
}

/* --- Whole-site translation: first-visit picker + Google widget cleanup ------ */

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

.lang-picker {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 1200;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  max-width: calc(100vw - 24px);
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: 0.9rem;
}

.lang-picker-text {
  font-weight: 750;
}

.lang-picker-field select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.lang-picker-apply,
.lang-picker-close {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.lang-picker-apply {
  border-color: color-mix(in srgb, var(--accent-2) 60%, var(--line));
  background: color-mix(in srgb, var(--accent-2) 18%, transparent);
}

.lang-picker-apply:hover,
.lang-picker-close:hover {
  border-color: color-mix(in srgb, var(--accent-2) 70%, var(--line));
}

.lang-picker-close {
  color: var(--muted);
}

@media (max-width: 560px) {
  .lang-picker {
    left: 12px;
    right: 12px;
    transform: none;
    justify-content: center;
  }
}

/* The Google Website Translate element injects a top banner/iframe and pushes the
   page down with an inline body { top }. Neutralize both so the dark theme and
   fixed header stay intact; we only use the cookie-driven translation, not the bar. */
.goog-te-banner-frame,
.skiptranslate iframe,
#goog-gt-tt,
.goog-te-balloon-frame {
  display: none !important;
}

body {
  top: 0 !important;
}

.goog-te-gadget {
  position: absolute;
  left: -9999px;
  height: 0;
  overflow: hidden;
}

/* Google wraps translated text in <font> tags; keep them transparent to layout. */
font {
  background: transparent !important;
  box-shadow: none !important;
}

/* --- Support / tip cards (PayPal + crypto). Built from existing theme tokens. ----- */
.tip-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.tip-card .button {
  margin-top: auto;
}

.tip-card .tip-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

/* Full crypto address: selectable monospace, mirrors the OBS overlay style so a
   viewer can read/copy it reliably even if the copy button is unavailable. */
.tip-address {
  display: block;
  width: 100%;
  font-family: "Consolas", "SF Mono", ui-monospace, monospace;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--text);
  word-break: break-all;
  user-select: all;
  -webkit-user-select: all;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
}

.tip-qr {
  width: 180px;
  height: 180px;
  max-width: 100%;
  border-radius: 8px;
  background: #ffffff;
  padding: 8px;
  align-self: center;
}

.tip-card .button.is-copied {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
  color: var(--accent);
}

/* PayPal JS SDK Buttons host: PayPal injects its own iframe; we just give it the
   full card width and a little breathing room above the fallback link. */
.paypal-buttons {
  width: 100%;
  min-height: 1px;
}

.paypal-buttons:empty {
  margin: 0;
}

/* Spoiler-free 100% guide library (guides.html) ------------------------------ */
body[data-page="guides"] .games-list {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.guide-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.guide-card h3 {
  margin: 4px 0 0;
}
.guide-card .guide-open {
  margin-top: auto;
  font-weight: 600;
  color: var(--accent);
}

/* ---------------------------------------------------------------------------
   Light-theme readability pass.
   A few signature surfaces are painted with a fixed dark "glass" background so
   they read as premium panels in dark mode. In light mode the body text colour
   flips dark, which left dark text sitting on those still-dark surfaces (the
   announcement strip, the home hero photo, and the content cards) hard to read
   on phones. This block restores strong contrast everywhere those surfaces
   appear, without changing the dark-mode look or the layout.
   --------------------------------------------------------------------------- */

/* Announcement strip stays a dark accent band on every page; keep its text and
   links light so they read against it. */
:root[data-theme="light"] .announcement-bar a,
:root[data-theme="light"] .announcement-bar span {
  color: #fbf6ec;
}

:root[data-theme="light"] .announcement-bar strong {
  color: var(--accent-3);
}

/* Home hero sits over a dark studio photo in both themes, so its copy must stay
   light regardless of theme. A soft shadow keeps it legible over the image. */
:root[data-theme="light"] .hero-broadcast,
:root[data-theme="light"] .hero-broadcast h1,
:root[data-theme="light"] .hero-broadcast h2,
:root[data-theme="light"] .hero-broadcast .hero-kicker,
:root[data-theme="light"] .hero-broadcast .lede,
:root[data-theme="light"] .hero-broadcast p {
  color: #fbf6ec;
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.55);
}

:root[data-theme="light"] .hero-broadcast .eyebrow {
  color: #ffe1ac;
}

/* The hero "live status" card overlaps the dark photo too; keep it readable. */
:root[data-theme="light"] .hero-broadcast .studio-card,
:root[data-theme="light"] .hero-broadcast .live-badge,
:root[data-theme="light"] .hero-broadcast .live-badge h2,
:root[data-theme="light"] .hero-broadcast .live-badge p,
:root[data-theme="light"] .hero-broadcast .status-dot {
  color: var(--text);
  text-shadow: none;
}

/* Content cards / panels: swap the fixed dark glass for a light glass so dark
   text reads cleanly. Covers every card-style surface used site-wide. */
:root[data-theme="light"] .card,
:root[data-theme="light"] .feature-card,
:root[data-theme="light"] .signal-card,
:root[data-theme="light"] .route-card,
:root[data-theme="light"] .tier-card,
:root[data-theme="light"] .template-card,
:root[data-theme="light"] .metric-card,
:root[data-theme="light"] .front-brief,
:root[data-theme="light"] .board-cell,
:root[data-theme="light"] .clip-empty-panel,
:root[data-theme="light"] .auth-panel,
:root[data-theme="light"] .live-panel,
:root[data-theme="light"] .studio-card,
:root[data-theme="light"] .timeline-card,
:root[data-theme="light"] .data-note,
:root[data-theme="light"] .article-card,
:root[data-theme="light"] .clip-card,
:root[data-theme="light"] .schedule-card,
:root[data-theme="light"] .broadcast-board {
  border-color: rgba(28, 22, 13, 0.16);
  background:
    linear-gradient(145deg, rgba(255, 251, 242, 0.96), rgba(247, 242, 232, 0.92)),
    #fffdf8;
  box-shadow: 0 18px 52px rgba(54, 43, 27, 0.12);
}

/* Keep the body copy inside those light cards firmly dark for contrast. */
:root[data-theme="light"] .card p,
:root[data-theme="light"] .feature-card p,
:root[data-theme="light"] .signal-card p,
:root[data-theme="light"] .route-card p,
:root[data-theme="light"] .front-brief p,
:root[data-theme="light"] .board-cell p,
:root[data-theme="light"] .article-card p,
:root[data-theme="light"] .article-body p {
  color: #2c2519;
}

/* ---- Game Settings + Mods (setup.html) ---- */
.setup-card {
  padding: 28px;
  margin-bottom: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.setup-card:last-child { margin-bottom: 0; }
.setup-head { margin-bottom: 18px; }
.setup-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.pill.subtle {
  color: var(--muted);
  background: transparent;
}
.setup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px 28px;
  margin-top: 6px;
}
.setup-group-title {
  font-size: 0.86rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}
.setup-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.setup-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.setup-row:last-child { border-bottom: 0; }
.setup-key {
  color: var(--muted);
  font-size: 0.96rem;
}
.setup-val {
  color: var(--text);
  font-weight: 650;
  text-align: right;
}
.setup-note { margin-top: 16px; }
.setup-block {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.setup-block > h3 { margin: 0 0 12px; }
.setup-block-intro { margin: 0 0 16px; }
.setup-writeup p {
  color: var(--text);
  margin: 0 0 12px;
  line-height: 1.6;
}
.setup-writeup p:last-child { margin-bottom: 0; }
.setup-mods {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.setup-mods h3 { margin: 0 0 12px; }
.setup-mod-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.setup-mod-list li {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.setup-mod-list li strong { color: var(--text); }
.setup-mod-list li .sub { margin: 4px 0 0; }
@media (max-width: 640px) {
  .setup-card { padding: 20px; }
  .setup-grid { grid-template-columns: 1fr; }
  .setup-row { gap: 10px; }
}