/* /live page — builds on landing.css tokens. */

.live-main { padding-top: 52px; } /* clears the fixed 52px nav */

/* The store banner stacks ABOVE the fixed nav. When shown, push the fixed nav
   down by the banner height and shift the page's normal flow down to match, so
   the banner is never hidden behind the nav (applies on /live AND the homepage). */
body.has-store-banner { padding-top: 52px; }
body.has-store-banner nav { top: 52px; }

/* ---- Hero takeover ---- */
.live-hero { padding: 28px 0 8px; }
.live-hero__card {
  display: flex; flex-direction: column; gap: 16px;
  padding: 28px 24px; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-light));
  color: #fff; box-shadow: var(--shadow); text-align: center; align-items: center;
}
.live-hero__card--live  { background: linear-gradient(135deg, #1f7a4d, #125e39); }
.live-hero__card--ended { background: linear-gradient(135deg, #5a6b7c, #3c4856); }
.live-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,0.18);
}
.live-hero__card--live .live-hero__eyebrow { background: #fff; color: #125e39; }
.live-hero__card--live .live-hero__eyebrow::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: #ff3b30;
}
.live-hero__logo, .live-hero__logo img { width: 72px; height: 72px; border-radius: 16px; }
.live-hero__logo--placeholder {
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.2); color: #fff; font-weight: 700; font-size: 1.6rem;
}
.live-hero__name { font-size: 1.9rem; font-weight: 700; line-height: 1.15; margin: 0; }
.live-hero__meta { font-size: 1rem; opacity: 0.92; }
.live-hero__teaser { font-size: 0.95rem; opacity: 0.95; font-weight: 600; }
.live-hero__primary {
  display: inline-block; margin-top: 4px; padding: 14px 28px; border-radius: 999px;
  background: #fff; color: var(--color-accent); font-weight: 700; font-size: 1.05rem; text-decoration: none;
}
.live-hero__card--live .live-hero__primary  { color: #125e39; }
.live-hero__card--ended .live-hero__primary { color: #3c4856; }
.live-hero__primary:hover { filter: brightness(0.96); }

/* ---- All 3 ways to watch ---- */
.ways { padding: 32px 0 8px; }
.ways__title { text-align: center; font-size: 1.5rem; margin: 0 0 4px; }
.ways__sub { text-align: center; color: var(--color-text-light); margin: 0 0 20px; }
.ways__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.way {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: 22px 18px; border: 1px solid var(--color-border); border-radius: 14px;
  background: var(--color-bg-card);
}
.way__ico { font-size: 30px; }
.way h3 { margin: 0; font-size: 1.05rem; }
.way p { margin: 0; font-size: 0.88rem; color: var(--color-text-light); flex: 1; }
.way .app-store-badge { height: 40px; }
.way .app-store-badge svg { height: 40px; width: auto; }
.way__btn {
  padding: 10px 18px; border-radius: 999px; background: var(--color-accent); color: #fff;
  font-weight: 600; font-size: 0.9rem; text-decoration: none; border: none; cursor: pointer;
}
.way__btn--ghost { background: var(--color-bg-alt); color: var(--color-accent); border: 1px solid var(--color-border); }
.way__steps { margin-top: 8px; font-size: 0.85rem; color: var(--color-text-light); text-align: left; }
.way__steps.hidden { display: none; }
.way__steps ol { margin: 0; padding-left: 18px; }
.way__qr { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 8px; }
.way__qr[hidden] { display: none; } /* beats the .way__qr display:flex when the attr is present */
.way__qr img { width: 120px; height: 120px; border-radius: 8px; }
.way__qr span { font-size: 0.78rem; color: var(--color-text-light); }

/* ---- Explainer ---- */
.explainer { padding: 36px 0; }
.explainer__title { text-align: center; font-size: 1.5rem; margin: 0 0 22px; }
.explainer__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.explainer__item { text-align: center; }
.explainer__item span { font-size: 28px; }
.explainer__item h3 { margin: 8px 0 4px; font-size: 1.05rem; }
.explainer__item p { margin: 0; font-size: 0.9rem; color: var(--color-text-light); }
.explainer__disclaimer { text-align: center; margin: 24px auto 0; max-width: 640px; font-size: 0.8rem; color: var(--color-text-light); }

/* ---- Organizer CTA ---- */
.organizer { padding: 8px 0 48px; }
.organizer__card {
  padding: 32px 28px; border-radius: var(--radius);
  background: var(--color-bg-alt); border: 1px solid var(--color-border);
}
.organizer__eyebrow { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); }
.organizer__title { font-size: 1.6rem; margin: 8px 0; }
.organizer__lede { color: var(--color-text-light); max-width: 620px; margin: 0 0 20px; }
.organizer__benefits { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.organizer__benefits li { display: flex; flex-direction: column; gap: 4px; }
.organizer__benefits strong { font-size: 0.98rem; }
.organizer__benefits span { font-size: 0.85rem; color: var(--color-text-light); }
.organizer__btn {
  padding: 14px 28px; border-radius: 999px; background: var(--color-accent); color: #fff;
  font-weight: 700; font-size: 1rem; border: none; cursor: pointer;
}
.organizer__btn:hover { filter: brightness(0.96); }

/* ---- Ported install banners (from webapp/css/styles.css, tokens remapped) ---- */
.store-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 101;
  box-sizing: border-box; min-height: 52px;
  display: flex; align-items: center; gap: 12px; padding: 8px 14px;
  background: var(--color-bg-card); border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08); animation: srFadeDown 0.3s ease-out;
}
.store-banner.hidden { display: none; }
.store-banner-dismiss {
  flex-shrink: 0; width: 22px; height: 22px; padding: 0; border: none; border-radius: 50%;
  background: var(--color-bg-alt); color: var(--color-text-light); font-size: 16px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.store-banner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.store-banner-text strong { font-size: 14px; font-weight: 600; color: var(--color-text); }
.store-banner-text span { font-size: 12px; color: var(--color-text-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-banner-cta {
  flex-shrink: 0; padding: 6px 16px; border-radius: 999px; background: var(--color-accent);
  color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.store-banner-cta:hover { filter: brightness(0.95); }

.install-banner {
  position: fixed; bottom: max(12px, calc(env(safe-area-inset-bottom, 0) + 12px));
  left: 12px; right: 12px; z-index: 200; animation: srFadeUp 0.3s ease-out;
}
.install-banner.hidden { display: none; }
.install-banner-content {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: var(--color-bg-card); border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,0.18);
}
.install-banner-text { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.3; }
.install-banner-text span { font-size: 13px; color: var(--color-text-light); }
.install-btn { padding: 8px 20px; border: none; border-radius: 999px; background: var(--color-accent); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.install-dismiss { padding: 4px 8px; border: none; background: none; font-size: 20px; color: var(--color-text-light); cursor: pointer; line-height: 1; }
.install-instructions { margin-top: 8px; padding: 12px 16px; background: var(--color-bg-card); border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,0.18); font-size: 13px; line-height: 1.5; color: var(--color-text-light); }
.install-instructions.hidden { display: none; }
.install-instructions ol { margin: 0; padding-left: 20px; }
.install-instructions li { margin-bottom: 4px; }
.install-instructions strong { color: var(--color-text); }

@keyframes srFadeDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes srFadeUp   { from { opacity: 0; transform: translateY(8px); }  to { opacity: 1; transform: translateY(0); } }

/* ---- Responsive ---- */
@media (max-width: 700px) {
  .ways__grid, .explainer__grid, .organizer__benefits { grid-template-columns: 1fr; }
  .live-hero__name { font-size: 1.55rem; }
}