/* The Stage (Scott 2026-10-28): live shows that fill the room.
   Shared by the homepage (#stage) and the standalone /live page.
   Uses the Apple tokens from styles.css when present, with fallbacks so
   /live can load this file on its own. */
:root {
  --st-ink: var(--a-ink, #1d1d1f); --st-muted: var(--a-muted, #6e6e73); --st-line: var(--a-line, #d2d2d7);
  --st-soft: var(--a-soft, #f5f5f7); --st-hair: var(--a-hair, #e8e8ed);
  --st-raise: #d7262e; --st-sell: #2f6bff; --st-give: #0fa968;
}

/* ---------- Stage (dark showcase) ---------- */
.stage { position: relative; overflow: hidden; }
.stage-head { max-width: 980px; margin: 0 auto; text-align: center; }
.stage-head h2 { margin: 14px auto 0; }
.stage-lede { max-width: 720px; margin: 20px auto 0; font-size: clamp(17px, 2vw, 21px); line-height: 1.5; color: #a1a1a6; }

/* The live frame: an illustration of a show in progress (sample data), set in an
   American Beacon studio: navy set, the masthead and the show's title card behind
   two camera tiles. Show colors follow the brand kit (american-beacon-brand). */
.st-frame { --show: var(--st-raise); text-align: left; position: relative; max-width: 1040px; margin: clamp(40px, 6vw, 72px) auto 0; aspect-ratio: 16 / 9;
  border-radius: 22px; overflow: hidden;
  background: radial-gradient(70% 60% at 38% 34%, #1d2e52 0%, #101d37 55%, #070d1b 100%);
  box-shadow: 0 40px 120px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08) inset; }
html[data-mode="sell"] .st-frame { --show: var(--st-sell); } html[data-mode="give"] .st-frame { --show: var(--st-give); }
.st-frame::before { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  conic-gradient(from 168deg at 22% -8%, transparent 0deg, rgba(255,255,255,.07) 8deg, transparent 18deg),
  conic-gradient(from 174deg at 56% -8%, transparent 0deg, rgba(255,255,255,.06) 8deg, transparent 18deg),
  linear-gradient(0deg, rgba(0,0,0,.45), transparent 32%); }
.st-frame::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--show); }
.st-set { position: absolute; left: 4%; right: 36%; top: 14%; height: 44%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2vw; text-align: center; }
.st-mast { width: 26%; max-width: 190px; height: auto; opacity: .95; }
.st-title { display: block; font: 700 clamp(15px, 3vw, 36px)/1 "Libre Baskerville", Georgia, "Times New Roman", serif; letter-spacing: .1em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.st-tag { font: 700 clamp(7px, .95vw, 12px)/1.2 "Libre Baskerville", Georgia, serif; letter-spacing: .16em; text-transform: uppercase; color: #f4efe6; opacity: .85; }
.st-cams { position: absolute; left: 3.5%; bottom: 8%; width: 50%; display: grid; grid-template-columns: 1fr 1fr; gap: 1.4%; }
.st-cam { position: relative; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden;
  background: radial-gradient(90% 90% at 50% 20%, #2b3a5c, #141c30 75%); box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 18px 40px -18px rgba(0,0,0,.8); }
.st-cam.st-talk { box-shadow: 0 0 0 2px var(--show) inset, 0 18px 40px -18px rgba(0,0,0,.8); }
.st-cam::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: linear-gradient(0deg, rgba(0,0,0,.35), transparent); }
.st-av { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); width: 30%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(160deg, color-mix(in srgb, var(--show) 55%, #3a4766), #1b2440); }
.st-talk .st-av { animation: st-speak 1.8s ease-in-out infinite; }
@keyframes st-speak { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--show) 30%, transparent); } }
.st-av svg { width: 62%; fill: rgba(255,255,255,.88); }
.st-name { position: absolute; left: 6%; bottom: 7%; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 6px;
  background: rgba(0,0,0,.55); backdrop-filter: blur(8px); color: #fff; font: 600 clamp(8px, 1vw, 12px)/1.2 Inter, system-ui, sans-serif; }
.st-eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 10px; }
.st-eq i { width: 2px; height: 100%; border-radius: 1px; background: var(--show); animation: st-eq .9s ease-in-out infinite; }
.st-eq i:nth-child(2) { animation-delay: .2s; } .st-eq i:nth-child(3) { animation-delay: .4s; }
@keyframes st-eq { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.st-top { position: absolute; top: 4%; left: 3.5%; right: 3.5%; display: flex; align-items: center; gap: 10px; font: 600 clamp(10px, 1.2vw, 13px)/1 Inter, system-ui, sans-serif; color: #fff; }
.st-onair { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 6px; background: var(--red, #d7262e); letter-spacing: .06em; }
.st-onair i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: st-blink 1.4s infinite; }
@keyframes st-blink { 50% { opacity: .25; } }
.st-watch { padding: 6px 10px; border-radius: 6px; background: rgba(0,0,0,.45); backdrop-filter: blur(8px); }
.st-on { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 980px; background: rgba(255,255,255,.12); backdrop-filter: blur(8px); }
.st-on img { width: 24px; height: 24px; border-radius: 50%; }
.st-chat { position: absolute; right: 3.5%; top: 16%; width: 30%; display: grid; gap: 8px; }
.st-chat p { margin: 0; padding: 8px 12px; border-radius: 12px; background: rgba(0,0,0,.5); backdrop-filter: blur(10px);
  color: #f5f5f7; font: 500 clamp(9px, 1.1vw, 13px)/1.35 Inter, system-ui, sans-serif; opacity: 0; transform: translateY(8px); transition: .5s; }
.st-chat p b { color: #fff; }
.st-frame.in .st-chat p { opacity: 1; transform: none; }
.st-frame.in .st-chat p:nth-child(2) { transition-delay: .5s; } .st-frame.in .st-chat p:nth-child(3) { transition-delay: 1s; }
.st-offer { position: absolute; right: 3.5%; bottom: 7%; width: 30%; padding: 12px 14px; border-radius: 12px; background: #fff; color: #1d1d1f;
  font: 600 clamp(10px, 1.2vw, 14px)/1.3 Inter, system-ui, sans-serif; display: flex; align-items: center; gap: 10px; }
.st-offer em { margin-left: auto; font-style: normal; padding: 6px 10px; border-radius: 980px; background: var(--red, #d7262e); color: #fff; white-space: nowrap; }
.st-cap { position: absolute; left: 0; right: 0; bottom: -28px; text-align: center; font-size: 12px; color: #6e6e73; }
/* Per-line copy: only the Raise, Sell or Give version shows (homepage switch or /live show pick) */
[data-line] { display: none; }
html:not([data-mode="sell"]):not([data-mode="give"]) [data-line="raise"],
html[data-mode="sell"] [data-line="sell"], html[data-mode="give"] [data-line="give"] { display: revert; }
html:not([data-mode="sell"]):not([data-mode="give"]) .st-chat > [data-line="raise"],
html[data-mode="sell"] .st-chat > [data-line="sell"], html[data-mode="give"] .st-chat > [data-line="give"] { display: contents; }

/* Three shows, one masthead: American Beacon */
.st-shows { max-width: 1040px; margin: clamp(56px, 7vw, 88px) auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.st-show-card { position: relative; padding: 26px 24px 24px; border-radius: 20px; background: #1c1c1e; color: #f5f5f7;
  border: 1px solid rgba(255,255,255,.08); transition: transform .3s, border-color .3s, background .3s; }
.st-show-card .st-net { font-size: 12px; font-weight: 600; color: #86868b; letter-spacing: .02em; }
.st-show-card h3 { margin: 10px 0 4px; font-size: 24px; letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; }
.st-show-card h3 i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 25%, transparent); }
.st-show-card .st-line { font-size: 14px; font-weight: 600; color: var(--c); }
.st-show-card p { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: #a1a1a6; }
.st-show-card .st-to { margin-top: 16px; font-size: 12px; color: #86868b; }
.st-show-card[data-show="raise"] { --c: #ff5a60; } .st-show-card[data-show="sell"] { --c: #6e9bff; } .st-show-card[data-show="give"] { --c: #34d399; }
html:not([data-mode="sell"]):not([data-mode="give"]) .st-show-card[data-show="raise"],
html[data-mode="sell"] .st-show-card[data-show="sell"], html[data-mode="give"] .st-show-card[data-show="give"] {
  border-color: var(--c); background: #232326; transform: translateY(-4px); }

/* One show, featured: the homepage shows only the visitor's program */
.st-feature { max-width: 1040px; margin: clamp(56px, 7vw, 88px) auto 0; display: flex; align-items: center; gap: clamp(20px, 3vw, 36px);
  padding: clamp(22px, 3vw, 32px); border-radius: 22px; background: linear-gradient(135deg, #16223d, #0d1528); border: 1px solid rgba(255,255,255,.08); }
.st-feature img { flex: 0 0 auto; width: clamp(84px, 11vw, 120px); height: auto; border-radius: 50%; box-shadow: 0 16px 40px -16px rgba(0,0,0,.8); }
.st-feature .st-net { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #f4efe6; opacity: .7; }
.st-feature h3 { margin: 8px 0 0; font: 700 clamp(24px, 3vw, 34px)/1.1 "Libre Baskerville", Georgia, serif; letter-spacing: .04em; color: #fff; }
.st-feature p { margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: #a1a1a6; }
.st-feature .st-to { font-size: 13px; color: #86868b; }
.stage-head h2 .st-h-soft { color: #86868b; }

/* The room: four beats */
.st-room { max-width: 1040px; margin: clamp(48px, 6vw, 72px) auto 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  border-radius: 20px; overflow: hidden; background: rgba(255,255,255,.08); }
.st-room li { list-style: none; padding: 24px 22px; background: #111113; }
.st-room b { display: block; font-size: 13px; color: var(--red-hot, #ff5a60); font-weight: 600; }
.st-room h3 { margin: 6px 0 6px; font-size: 19px; color: #f5f5f7; letter-spacing: -.01em; }
.st-room p { margin: 0; font-size: 14px; line-height: 1.5; color: #a1a1a6; }

/* American Beacon reach strip */
.st-reach { max-width: 1040px; margin: 16px auto 0; display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 22px 26px; border-radius: 20px; background: #1c1c1e; border: 1px solid rgba(255,255,255,.08); }
.st-reach strong { font-size: clamp(34px, 5vw, 48px); letter-spacing: -.03em; color: #fff; line-height: 1; }
.st-reach span { flex: 1 1 260px; font-size: 15px; line-height: 1.5; color: #a1a1a6; }
.st-reach span b { color: #f5f5f7; }

.st-cta { max-width: 1040px; margin: clamp(40px, 5vw, 56px) auto 0; display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; text-align: center; }
.st-cta p { flex-basis: 100%; margin: 6px 0 0; font-size: 14px; color: #86868b; }

@media (max-width: 860px) {
  .st-shows { grid-template-columns: 1fr; }
  .st-room { grid-template-columns: 1fr 1fr; }
  .st-chat { display: none; }
  .st-set { right: 4%; top: 13%; height: 40%; }
  .st-cams { width: 62%; }
  .st-offer { width: 32%; }
}
@media (max-width: 520px) {
  .st-room { grid-template-columns: 1fr; }
  .st-offer { display: none; }
  .st-frame { aspect-ratio: 1 / 1; }
  .st-set { left: 6%; right: 6%; top: 15%; height: 38%; gap: 8px; }
  .st-mast { width: 40%; }
  .st-title { font-size: 22px; }
  .st-tag { font-size: 8px; }
  .st-cams { width: 88%; left: 6%; bottom: 7%; }
  .st-on { font-size: 0; gap: 0; padding: 3px; }
  .st-frame { border-radius: 16px; }
  .st-feature { flex-direction: column; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .st-onair i { animation: none; } .st-chat p { transition: none; } .st-talk .st-av, .st-eq i { animation: none; } }