/* ============================================================
   KICKR · Shared StadiumBroadcast Footer
   Source of truth for the dark broadcast footer used on every
   page. Mirrors the inline footer styles shipped in index.html.
   ============================================================ */
footer.site-footer {
  position: relative;
  /* Hard reset: some sub-pages declare generic footer{} rules
     (max-width, margin-auto, padding, background) that would
     constrain or paint over the broadcast footer. Force-reset
     layout properties so the footer always fills viewport width. */
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  background: #06322A !important;
  color: #F0EAD6;
  padding: 0 !important;
  border-top: 1px solid rgba(240,234,214,0.06);
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  text-align: left;
}
footer.site-footer a { margin: 0; }
.sb-shell {
  position: relative;
  max-width: none;
  width: 100%;
  margin: 0 auto;
  min-height: 480px;
  display: flex;
  flex-direction: column;
}
.sb-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sb-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  opacity: 0.40; mix-blend-mode: luminosity;
  filter: contrast(1.5) saturate(1.8) hue-rotate(-10deg) brightness(0.6);
}
.sb-bg::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at center, transparent 0%, #06322A 100%);
  opacity: 0.9;
}
.sb-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, #06322A 0%, rgba(6,50,42,0.8) 50%, transparent 100%);
}
.sb-scanlines {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.2) 100%);
  background-size: 100% 4px;
}
.sb-grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.sb-top {
  position: relative; z-index: 5;
  display: flex; flex-direction: column; gap: 18px;
  padding: 22px clamp(20px, 4vw, 48px);
  border-bottom: 1px solid rgba(240,234,214,0.10);
}
@media (min-width: 760px) {
  .sb-top { flex-direction: row; justify-content: space-between; align-items: center; gap: 16px; }
}
.sb-brandline { display: flex; flex-direction: column; gap: 12px; }
.sb-brandrow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sb-wordmark {
  font-family: 'Kola', 'Bebas Neue', sans-serif;
  font-size: 28px; letter-spacing: 0.08em; color: #F0EAD6;
  text-decoration: none; line-height: 1;
}
.sb-divider { width: 1px; height: 18px; background: rgba(240,234,214,0.30); }
.sb-onair { display: inline-flex; align-items: center; gap: 8px; }
.sb-dot {
  width: 10px; height: 10px; border-radius: 999px; background: #ff3a3a;
  animation: sbPulseRed 2s infinite;
  box-shadow: 0 0 8px rgba(255,50,50,0.8);
}
@keyframes sbPulseRed {
  0%,100% { opacity: 1; transform: scale(1); box-shadow: 0 0 8px rgba(255,50,50,0.8); }
  50%     { opacity: 0.5; transform: scale(0.92); box-shadow: 0 0 2px rgba(255,50,50,0.4); }
}
.sb-onair-label {
  color: #ff5a5a; font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
}
.sb-top-ai { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sb-top-ai-label {
  color: #FAE3B0; font-size: 10px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
}
.sb-top-ai-row { display: inline-flex; gap: 14px; align-items: center; }
.sb-top-ai-pill {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; padding: 0;
  transition: transform 200ms ease;
}
.sb-top-ai-pill img {
  width: 30px; height: 30px;
  opacity: 1; filter: none;
  transition: transform 200ms ease;
}
.sb-top-ai-pill:hover { transform: translateY(-2px); }
.sb-top-ai-pill:hover img { transform: scale(1.08); }
.sb-top-ai-pill[href*="grok.com"] img {
  filter: brightness(0) saturate(100%) invert(91%) sepia(8%) saturate(389%) hue-rotate(7deg) brightness(98%) contrast(92%);
}
.sb-timecode .sb-store-badge { align-self: flex-start; margin-bottom: 14px; }
@media (min-width: 760px) {
  .sb-timecode .sb-store-badge { align-self: flex-end; margin-top: -32px; margin-bottom: auto; }
}
.sb-store-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 16px 7px 13px;
  background: #000; color: #fff;
  border-radius: 12px;
  text-decoration: none;
  transition: transform 200ms ease, background 200ms ease;
}
.sb-store-badge:hover { transform: translateY(-1px); background: #0a0a0a; }
.sb-store-badge-glyph { width: 22px; height: 22px; fill: currentColor; flex-shrink: 0; }
.sb-store-badge-text { display: flex; flex-direction: column; line-height: 1.05; text-align: left; }
.sb-store-badge-small { font-size: 9px; letter-spacing: 0.02em; opacity: 0.95; }
.sb-store-badge-large { font-size: 16px; font-weight: 600; letter-spacing: 0.005em; margin-top: 2px; }
.sb-socials { display: inline-flex; gap: 8px; margin-bottom: 10px; }
.sb-socials a {
  width: 36px; height: 36px; border-radius: 999px;
  border: 1px solid rgba(240,234,214,0.20);
  display: inline-flex; align-items: center; justify-content: center;
  color: #F0EAD6; transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.sb-socials a:hover { background: #F0EAD6; color: #06322A; border-color: #F0EAD6; }
.sb-socials svg { width: 15px; height: 15px; fill: currentColor; }
.sb-mid {
  position: relative; z-index: 5;
  display: grid; gap: 32px;
  padding: 28px clamp(20px, 4vw, 48px);
  flex-grow: 1;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .sb-mid { grid-template-columns: 1fr 1fr 1fr; gap: 40px; }
}
.sb-col h3 {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  color: #F0EAD6; opacity: 0.55;
  font-size: 13px; font-weight: 400; letter-spacing: 0.04em;
  text-transform: none; margin: 0 0 14px;
}
.sb-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.sb-col a {
  display: inline-flex; align-items: center; gap: 12px;
  color: rgba(240,234,214,0.80); text-decoration: none;
  font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase;
  transition: color 200ms ease;
}
.sb-col a::before {
  content: ""; width: 6px; height: 6px; background: #FAE3B0;
  opacity: 0; transition: opacity 200ms ease;
}
.sb-col a:hover { color: #F0EAD6; }
.sb-col a:hover::before { opacity: 1; }
.sb-cols2 { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 540px) { .sb-cols2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 760px) { .sb-cols2 { grid-column: span 2; gap: 48px; } }
.sb-timecode {
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: flex-end;
}
@media (min-width: 760px) { .sb-timecode { align-items: flex-end; text-align: right; } }
.sb-timecode .sb-socials { align-self: flex-start; }
@media (min-width: 760px) { .sb-timecode .sb-socials { align-self: flex-end; } }
.sb-clock {
  font-variant-numeric: tabular-nums;
  color: #FAE3B0; opacity: 0.8;
  font-size: 30px; letter-spacing: -0.02em; line-height: 1; margin-bottom: 8px;
}
.sb-sysop {
  color: rgba(240,234,214,0.50);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
}
.sb-bottom {
  position: relative; z-index: 5;
  border-top: 1px solid rgba(240,234,214,0.10);
  padding: 12px clamp(20px, 4vw, 48px);
  display: flex; flex-direction: column; gap: 6px;
  justify-content: space-between; align-items: center;
  color: rgba(240,234,214,0.40);
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
}
@media (min-width: 760px) { .sb-bottom { flex-direction: row; gap: 16px; } }
.sb-bottom .sb-trial { color: rgba(250,227,176,0.65); }
.sb-bottom-right { display: inline-flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.sb-watermark {
  position: absolute; left: 0; right: 0; bottom: 28px;
  z-index: 1;
  display: flex; justify-content: center; align-items: center;
  pointer-events: none; user-select: none;
  overflow: hidden;
}
.sb-watermark span {
  font-family: 'Kola', 'Bebas Neue', sans-serif;
  font-size: clamp(180px, 28vw, 460px);
  line-height: 0.8; letter-spacing: -0.02em;
  color: #F0EAD6;
  opacity: 0.06;
  white-space: nowrap;
}