/* JetEdCo Webinar — "Watch Before We Go Live" page.
   Base design system comes from /partners/style.css (themes, seams,
   buttons), /webinar/style.css (announce bar, routes, countdown chips,
   rise choreography) and /webinar/confirmed/style.css (hero, session
   card, pv- video frame). Brand tokens from /css/brand.css.
   Everything here is prefixed wt- / vp- / sc- to stay scoped. */

/* ============================================================
   HERO — countdown is the star: bigger chips, date demoted
   ============================================================ */
.wt-hero { padding-bottom: clamp(36px, 4.5vw, 64px); }
.wt-hero h1 { font-size: clamp(34px, 5.4vw, 58px); }
.wt-card .countdown {
  justify-content: center;
  margin-top: 4px;
}
.wt-card .count-chip {
  min-width: clamp(64px, 10vw, 86px);
  padding: 14px 10px 11px;
}
.wt-card .count-num { font-size: clamp(26px, 4.4vw, 42px); }
.wt-card .wt-date {
  margin-top: 20px;
  font-size: clamp(20px, 3.4vw, 30px);
  animation: none;
  text-shadow: 0 0 26px rgba(69, 137, 215, 0.5);
}
.wt-card .cf-time { font-size: clamp(13px, 2vw, 17px); }

/* ============================================================
   BRIEFING — the feed-size (4:5) video placeholder
   ============================================================ */
.section-briefing { padding-block: clamp(30px, 4vw, 54px) clamp(44px, 5.5vw, 72px); }

/* video sits inside the hero, straight under the countdown card */
.wt-video { margin-top: clamp(34px, 5vw, 54px); }

.vp-ratio {
  position: relative;
  width: 100%;
  padding-top: 125%; /* 1080 × 1350 feed frame */
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(69, 137, 215, 0.22), rgba(69, 137, 215, 0) 55%),
    linear-gradient(160deg, #1b1e23 0%, #14161a 60%, #101216 100%);
}
.vp-ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
}
/* faint brand watermark behind the play disc */
.vp-symbol {
  position: absolute;
  width: 64%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -54%) rotate(-6deg);
  opacity: 0.05;
  pointer-events: none;
}
.vp-play {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(72px, 18vw, 92px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--jetedco-blue), #2c66aa);
  box-shadow: 0 18px 50px rgba(69, 137, 215, 0.45);
}
.vp-play svg { width: 46%; height: 46%; margin-left: 6%; }
.vp-play::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(134, 172, 229, 0.55);
  animation: vp-pulse 2.4s ease-out infinite;
}
@keyframes vp-pulse {
  0%   { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(1.55); opacity: 0; }
}
.vp-title {
  margin-top: 8px;
  font-weight: var(--weight-title);
  font-size: clamp(15px, 2.4vw, 19px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffffff;
}
.vp-sub {
  font-size: 12px;
  font-weight: var(--weight-subtitle);
  letter-spacing: 0.08em;
  color: rgba(204, 217, 245, 0.65);
}

/* ============================================================
   SECRETS — three stacked cards, ghost numerals, myth → truth
   ============================================================ */
.section-secrets { text-align: center; }

.sc-list {
  display: grid;
  gap: clamp(16px, 2.4vw, 22px);
  max-width: 780px;
  margin: clamp(34px, 5vw, 50px) auto 0;
  text-align: left;
}
.sc-card {
  position: relative;
  display: grid;
  grid-template-columns: clamp(64px, 9vw, 92px) 1fr;
  gap: clamp(14px, 2.6vw, 26px);
  padding: clamp(22px, 3.4vw, 32px);
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(45, 48, 53, 0.08);
  box-shadow: 0 18px 50px rgba(45, 48, 53, 0.08);
  overflow: hidden;
}
.sc-num {
  font-weight: var(--weight-title);
  font-size: clamp(52px, 8vw, 76px);
  line-height: 0.9;
  color: rgba(69, 137, 215, 0.16);
  text-align: center;
  user-select: none;
}
.sc-kicker {
  font-size: 11px;
  font-weight: var(--weight-title);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--jetedco-blue);
  margin-bottom: 8px;
}
.sc-obj {
  font-style: italic;
  font-size: clamp(14px, 1.9vw, 16px);
  color: var(--s-muted);
  margin-bottom: 10px;
}
.sc-title {
  font-weight: var(--weight-title);
  text-transform: uppercase;
  font-size: clamp(19px, 2.8vw, 25px);
  line-height: 1.12;
  color: var(--s-ink);
  margin-bottom: 10px;
}
.sc-body {
  font-size: clamp(15px, 2vw, 16.5px);
  line-height: 1.65;
  color: var(--s-muted);
}
.sc-body strong { color: var(--s-ink); }

/* the 2,000 flights vs 1.5M agents strip inside secret 3 */
.sc-vs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(12px, 2vw, 20px);
  margin-top: 18px;
  padding: clamp(14px, 2.4vw, 20px);
  border-radius: 14px;
  background: #E9EFFB;
  border: 1px solid rgba(69, 137, 215, 0.14);
}
.sc-vs-num {
  display: block;
  font-weight: var(--weight-title);
  font-size: clamp(24px, 3.6vw, 34px);
  line-height: 1;
  color: var(--jetedco-blue);
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}
.sc-vs-label {
  display: block;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--s-muted);
}
.sc-vs-sep {
  font-weight: var(--weight-title);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--s-ink);
  opacity: 0.45;
}
.sc-close {
  margin: clamp(30px, 4.5vw, 42px) auto 0;
  max-width: 46ch;
  font-size: clamp(16px, 2.2vw, 18px);
  line-height: 1.6;
  color: var(--s-muted);
}
.sc-close strong { color: var(--s-ink); }

/* ============================================================
   RESPONSIVE + REDUCED MOTION
   ============================================================ */
@media (max-width: 620px) {
  .sc-card { grid-template-columns: 1fr; }
  .sc-num {
    position: absolute;
    top: 10px;
    right: 16px;
    font-size: 58px;
    color: rgba(69, 137, 215, 0.12);
  }
  .sc-vs { grid-template-columns: 1fr; text-align: center; }
  .sc-vs-sep { justify-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  .vp-play::before { animation: none; }
  .wt-card .wt-date { animation: none; }
}