/* marketing-demo.css
   Product-demo band (tagline + Pronunciation + Alerts + How-it-works/video)
   for the /best-live-draft-software landing page. Markup + styles are copied
   from the homepage (index.html) so the demo looks identical there.

   Everything is scoped under `.demo-band` so it can neither leak into nor be
   overridden by the landing page's own styles — notably its .eyebrow and
   .gradient-text used in the page hero.

   SYNC NOTE: these rules mirror the inline <style> in index.html (the
   #pronunciation / #alerts / #how-it-works sections, .pillar-*, .mkt-play-btn*,
   .steps/.step, .demo-*, .section-header, .reveal). If those change on the
   homepage, update here too. Interactivity lives in /scripts/marketing-demo.js.
   The color vars (--blue/--muted/--bg/--text/...) are defined in the landing
   page's own :root, matching the homepage. */

/* ── layout primitives ── */
.demo-band section { padding: 96px 32px; }
.demo-band .container { max-width: 1100px; margin: 0 auto; }

.demo-band .eyebrow {
  font-size: 11px; font-weight: 900; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--blue); margin-bottom: 14px;
}
.demo-band h2 {
  font-size: clamp(26px, 4vw, 38px); font-weight: 900;
  letter-spacing: -.02em; color: #fff;
}
.demo-band .gradient-text {
  background: linear-gradient(135deg, var(--blue), var(--purple));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

.demo-band .section-header { text-align: center; margin-bottom: 64px; }
.demo-band .section-header p {
  font-size: 17px; color: var(--muted); margin-top: 14px;
  max-width: 560px; margin-left: auto; margin-right: auto;
}

/* ── pillar sections (Pronunciation + Alerts) ── */
.demo-band #pronunciation, .demo-band #alerts {
  padding: 100px 24px; background: var(--bg);
  border-top: 1px solid rgba(255,255,255,.06);
}
.demo-band #alerts { background: var(--panel); }
.demo-band .pillar-body { max-width: 760px; margin: 28px auto 0; text-align: center; }
.demo-band .pillar-body p { font-size: 17px; line-height: 1.65; color: var(--text); margin: 0 0 18px; }
.demo-band .pillar-body p:last-child { margin-bottom: 0; }
.demo-band .pillar-list-title {
  text-align: center; font-size: 15px; font-weight: 800; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--soft); margin: 56px 0 8px;
}
.demo-band .pillar-list-hint {
  text-align: center; font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,.55); margin: 0 0 22px;
}
.demo-band .pillar-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 12px; max-width: 880px; margin: 0 auto;
}
.demo-band .pillar-row {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  border-radius: 14px; background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  transition: background .15s, border-color .15s;
}
.demo-band .pillar-row:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.demo-band .pillar-row-text { flex: 1; min-width: 0; }
.demo-band .pillar-row-name { font-size: 16px; font-weight: 800; color: var(--text); line-height: 1.2; }
.demo-band .pillar-row-sub { font-size: 13px; color: var(--soft); margin-top: 4px; line-height: 1.4; }
.demo-band #alerts .pillar-row-name { letter-spacing: .8px; text-transform: uppercase; font-size: 14px; }
.demo-band .pillar-callout {
  max-width: 760px; margin: 48px auto 0; padding: 22px 26px; border-radius: 16px;
  background: rgba(240,192,64,.06); border: 1px solid rgba(240,192,64,.20);
  color: var(--text); font-size: 15px; line-height: 1.6;
}
.demo-band .pillar-closing { text-align: center; margin: 36px auto 0; font-size: 14px; color: var(--soft); font-style: italic; }

/* ── shared marketing audio play button ── */
.demo-band .mkt-play-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid rgba(87,166,255,.45); background: rgba(87,166,255,.10);
  color: #57a6ff; font-family: inherit; font-weight: 800; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .1s; flex-shrink: 0;
}
.demo-band .mkt-play-btn:hover { background: rgba(87,166,255,.20); border-color: rgba(87,166,255,.65); color: #7bb6ff; }
.demo-band .mkt-play-btn:active { transform: scale(.96); }
.demo-band .mkt-play-btn.mkt-playing { background: rgba(87,166,255,.30); border-color: rgba(87,166,255,.85); color: #fff; }
.demo-band .mkt-play-btn-sm { width: 44px; height: 44px; border-radius: 50%; font-size: 14px; padding: 0; }

/* ── how-it-works steps ── */
.demo-band #how-it-works { background: var(--bg2); scroll-margin-top: 64px; }
.demo-band .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; position: relative; }
.demo-band .steps::before {
  content: ''; position: absolute; top: 40px; left: calc(16.66% + 16px); right: calc(16.66% + 16px);
  height: 1px; background: linear-gradient(90deg, transparent, var(--blue), transparent); opacity: .4;
}
.demo-band .step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.demo-band .step-num {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(87,166,255,.18), rgba(124,92,255,.14)), var(--bg);
  border: 1px solid rgba(87,166,255,.35); display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 900; color: var(--blue); flex-shrink: 0; position: relative; z-index: 1;
}
.demo-band .step h3 { font-size: 17px; font-weight: 800; color: #fff; }
.demo-band .step p { font-size: 14px; color: var(--muted); line-height: 1.65; }
.demo-band .platforms-tagline { text-align: center; margin-top: 72px; font-size: 16px; font-weight: 700; color: var(--muted); line-height: 1.6; }
.demo-band .platforms-tagline span { color: var(--blue); }

/* ── demo video (lazy-loaded facade) ── */
.demo-band .demo-wrap { margin: 48px auto 0; max-width: 900px; scroll-margin-top: 80px; }
.demo-band .demo-video-box {
  position: relative; border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(87,166,255,.30);
  box-shadow: 0 24px 80px rgba(0,0,0,.60), 0 0 0 1px rgba(255,255,255,.06), 0 0 60px rgba(87,166,255,.10);
}
.demo-band .demo-video-box iframe { display: block; width: 100%; aspect-ratio: 16/9; border: 0; }
.demo-band .demo-caption { text-align: center; margin-top: 14px; font-size: 13px; color: var(--soft); font-style: italic; }

/* Facade: poster image + play overlay. The YouTube iframe is injected only on
   click (see marketing-demo.js) — no third-party load, no autoplay-with-sound
   until the user opts in. Poster is a local 'self' asset (CSP-safe). */
.demo-band .demo-video-facade {
  display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
  position: relative; aspect-ratio: 16/9; background: #000;
}
.demo-band .demo-video-facade img { display: block; width: 100%; height: 100%; object-fit: cover; }
.demo-band .demo-video-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 76px; height: 76px; border-radius: 50%; padding-left: 4px;
  background: rgba(87,166,255,.92); color: #fff; font-size: 28px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 30px rgba(0,0,0,.5); transition: transform .12s, background .15s;
}
.demo-band .demo-video-facade:hover .demo-video-play { transform: translate(-50%,-50%) scale(1.06); background: rgba(87,166,255,1); }

/* ── scroll-reveal (gated on js-ready so content stays visible if JS fails) ── */
.js-ready .demo-band .reveal { opacity: 0; transform: translateY(24px); transition: opacity .5s ease, transform .5s ease; }
.js-ready .demo-band .reveal.visible { opacity: 1; transform: none; }

/* ── responsive (mirrors homepage breakpoints) ── */
@media (max-width: 860px) {
  .demo-band section { padding: 72px 20px; }
  .demo-band .steps { grid-template-columns: 1fr; }
  .demo-band .steps::before { display: none; }
}
@media (max-width: 720px) {
  .demo-band .pillar-grid { grid-template-columns: 1fr; }
  .demo-band #pronunciation, .demo-band #alerts { padding: 70px 18px; }
  .demo-band .pillar-body { margin-top: 22px; }
  .demo-band .pillar-body p { font-size: 16px; }
  .demo-band .pillar-list-title { margin-top: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .js-ready .demo-band .reveal { opacity: 1; transform: none; transition: none; }
}