/* /free-training-o — page-specific styles. Loaded AFTER /css/style.css.
   Everything here is scoped to body.fto so the shared design system is
   untouched: this page only re-tints it (gold -> green) and adds the three
   components the webinar page has and the home page does not — the LIVE pill,
   the countdown, and the four-step "sequence" grid. */

body.fto{
  --accent:#4ade80;
  --gold:linear-gradient(114deg,#86efac 0%,#4ade80 35%,#6ee7a0 70%,#22c55e 100%);
}

/* buttons: flat green with a soft bloom, like the original webinar page */
body.fto .btn-primary{background:#4ade80;box-shadow:0 8px 32px rgba(74,222,128,.25)}
body.fto .btn-primary:hover{box-shadow:0 10px 36px rgba(74,222,128,.4)}

/* stars and the review badge stay gold on this page */
body.fto .stars{color:#ffbd4a}

/* glow cards: green rail + green corner bloom, per-card tint via --glow/--rail */
body.fto .glow-card::before{
  background:radial-gradient(60% 60% at 30% 30%,var(--glow,rgba(74,222,128,.26)) 0%,rgba(74,222,128,0) 72%)}
body.fto .glow-card::after{
  background:linear-gradient(90deg,rgba(74,222,128,0) 0%,var(--rail,rgba(74,222,128,.5)) 50%,rgba(74,222,128,0) 100%)}

/* proof screenshots: framed green instead of gold */
body.fto .proof-col img{border-color:rgba(74,222,128,.85);box-shadow:0 0 60px 0 rgba(74,222,128,.28)}

/* ---------- hero ---------- */
.fto-hero{padding-top:44px;text-align:center}
.live-pill{display:flex;align-items:center;gap:9px;width:max-content;margin:0 auto 30px;
  font-size:15px;letter-spacing:0;color:var(--text);
  border:1px solid var(--border);background:rgba(255,255,255,.04);border-radius:999px;padding:8px 18px}
.live-pill .dot{width:8px;height:8px;border-radius:50%;background:#ff4d4d;
  box-shadow:0 0 10px rgba(255,77,77,.9);flex:none}

.hero-shot{position:relative;display:block;background:#000;border-radius:12px;padding:0;
  max-width:462px;margin:0 auto 30px;border:2px solid rgba(74,222,128,.9);overflow:hidden;
  box-shadow:0 0 44px -16px rgba(74,222,128,.55),0 26px 70px -34px rgba(0,0,0,.9)}
.hero-shot img{border-radius:10px;width:100%;aspect-ratio:16/9;object-fit:cover}
.hero-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.hero-play span{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;
  background:#4ade80;color:#05140a;box-shadow:0 10px 34px rgba(0,0,0,.5)}
.hero-shot:hover .hero-play span{transform:scale(1.05);transition:transform .15s ease}

/* ---------- countdown ---------- */
.cd-label{margin-top:30px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#ff6a5a}
.cd{display:flex;justify-content:center;flex-wrap:wrap;gap:20px;margin-top:18px}
.cd-box{min-width:118px;padding:18px 14px 15px;border:1px solid var(--border);border-radius:12px;
  background:rgba(255,255,255,.03)}
.cd-num{font-size:34px;font-weight:600;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.cd-lab{margin-top:9px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}

/* ---------- registration (WebinarJam embed) ---------- */
.wj-wrap{max-width:740px;margin:0 auto;min-height:380px;border-radius:12px;overflow:hidden}
.wj-wrap iframe{width:100%;border:0;display:block;min-height:380px}

/* ---------- the four-step sequence ---------- */
.seq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:900px;margin:0 auto}
.seq .card{padding:28px;display:flex;flex-direction:column}
.seq .seq-icon{width:52px;height:52px;margin-bottom:22px}
.seq .seq-icon svg{width:100%;height:100%;display:block}
.seq h4{font-size:24px;font-weight:500;letter-spacing:-.01em;line-height:1.15;margin:0 0 12px}
.seq p{color:var(--muted);font-size:18px;line-height:1.3}
.seq-a{--glow:rgba(1,156,243,.26);--rail:rgba(1,156,243,.5)}
.seq-b{--glow:rgba(167,139,250,.26);--rail:rgba(167,139,250,.5)}
.seq-c{--glow:rgba(74,222,128,.26);--rail:rgba(74,222,128,.5)}
.seq-d{--glow:rgba(255,189,74,.26);--rail:rgba(255,189,74,.5)}

/* ---------- industry insider ---------- */
/* same crop as the home-page portrait, plus the drop shadow the webinar page uses */
.insider-shot{max-width:512px;box-shadow:0 34px 80px -40px rgba(0,0,0,.95)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .seq{grid-template-columns:1fr}
}
@media (max-width:680px){
  .fto-hero{padding-top:28px}
  .live-pill{font-size:13px;padding:7px 14px;white-space:nowrap}
  .seq .card{padding:22px}
  .seq p{font-size:17px}
  .cd{gap:10px}
  .cd-box{min-width:0;flex:1 1 68px;padding:12px 6px 10px}
  .cd-num{font-size:24px}
  .cd-lab{font-size:10px;letter-spacing:.1em}
}