/* ============================================================
   FREE TRAINING PAGE - page-specific layer (shared tokens above)
   ============================================================ */
.sec{padding:72px 0}

.sec-tight{padding:60px 0}

.sec-head{margin-bottom:32px}

/* -- hero: light, no footage --------------------------------- */
.hero-page{min-height:min(44vh,410px);padding:78px 0 60px}

.hero-solo{max-width:56rem}

.hero-page h1{max-width:24ch;font-size:clamp(2.1rem,4.3vw,3.4rem)}

.hero-page .hero-sub{max-width:62ch;margin-bottom:0}

/* -- the training video in a 16:9 framed shell ---------------- */
.video-band{padding:52px 0 60px}

.vid-shell{max-width:980px;margin:0 auto;background:var(--forest);border:1px solid var(--hairline-2);
  border-radius:var(--r);box-shadow:var(--sh-2);overflow:hidden}

.vid-frame{position:relative;aspect-ratio:16/9;width:100%}

.vid-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

.video-note{margin:16px 0 0;font-size:.86rem;color:var(--muted);text-align:center}

/* -- the two steps ------------------------------------------- */
/* stretch, not start: the two cards must be the same height so that
   .step-foot's margin-top:auto lines the two buttons up */
.steps{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:30px;align-items:stretch}

.step{display:flex;flex-direction:column;height:100%;
  background:linear-gradient(180deg,var(--white) 0%,#fafcfb 100%);border:1px solid var(--hairline);
  border-radius:var(--r);padding:28px 26px;position:relative;overflow:hidden;
  box-shadow:0 1px 2px rgba(6,28,20,.045)}

.step-n{display:block;font-family:var(--serif);font-style:italic;font-size:.82rem;
  color:var(--emerald-ink);letter-spacing:.05em;margin-bottom:12px}

.step h3{margin:0 0 .45em;font-size:1.14rem}

.step > p{margin:0;color:var(--body);font-size:.95rem;line-height:1.66}

.step-btn{width:100%;margin:20px 0 0;font-size:.9rem;padding:15px 22px}

/* the notice sits at the card's foot so the two cards line up whatever the
   paragraph length; it is the owner's warning, not decoration */
.notice{display:flex;gap:12px;align-items:flex-start;margin:16px 0 0;padding:14px 16px;
  border-radius:var(--r-sm);background:var(--tint-soft);border:1px solid #b7ecd4}

.notice svg{width:18px;height:18px;flex:0 0 18px;margin-top:3px;color:var(--emerald-ink)}

.notice p{margin:0;font-size:.88rem;line-height:1.55;color:var(--body)}

.step-foot{margin-top:auto}

/* -- closing band (Cool Tint, not dark - the dark band is the
      homepage's; this page ends softly) ---------------------- */
.close-band{text-align:center}

.close-band h2{max-width:22ch;margin-inline:auto}

.close-lede{font-size:1.06rem;color:var(--body);max-width:52ch;margin:0 auto 22px}

.close-band .cta-micro{margin:14px auto 0;text-align:center}

/* -- responsive ------------------------------------------------ */
@media (max-width:900px){
  .steps{grid-template-columns:1fr}
}

@media (max-width:860px){
  .hero-page{padding:60px 0 48px;min-height:0}
  .video-band{padding:44px 0 52px}
}

@media (max-width:560px){
  .step{padding:24px 20px}
  .step-btn{padding:14px 18px;font-size:.86rem}
}