/* SAMA funnel v2 — "Version B": landing page → Jane (2026-09-16).
   Loaded AFTER assets/style.css. Only what v2 adds lives here; every token
   comes from the shared :root. */

/* ---------- VSL-first hero ("VSL is the primary focus") ----------
   Single centred column: chip, headline, the video, the Book button. The
   portrait and bullets move to the band below. */
.hero--vsl .hero__stack{
  position:relative;
  z-index:1;
  display:grid;
  gap:1.1rem;
  justify-items:center;
  text-align:center;
}
.hero--vsl .hero__stack > .chip{margin-bottom:0}
.hero--vsl .hero__stack > h1{margin-bottom:0}
.hero--vsl .player{width:100%;margin-top:.6rem}
.hero--vsl .hero__cta{justify-content:center;margin-top:.4rem}
.hero--vsl .hero__note{margin-top:0}

/* portrait + bullets band under the VSL hero. The bullets are the only copy in
   this band, so they run at body scale, not the hero's small-print scale. */
.about .split{align-items:center}
.about .portrait{max-width:420px;width:100%;margin-inline:auto}
.about .leaflist{margin-bottom:0;gap:1.5rem}
.about .leaflist li{grid-template-columns:30px 1fr;gap:1.1rem}
.about .leaflist svg{width:30px;height:30px;margin-top:.3rem}
.about .leaflist b{font-size:1.25rem;margin-bottom:.2rem}
.about .leaflist span span{font-size:1.08rem;line-height:1.6}

/* price chips centred under the section heading (in style.css they sit
   left-aligned inside .magnet) */
.magnet__meta--center{justify-content:center;margin-top:1.6rem}

/* the three things Jane will ask for, before the frame opens */
.steps{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.7rem 1.6rem;
  margin:1.5rem 0 0;
  padding:0;
}
.steps li{
  display:flex;
  align-items:center;
  gap:.65rem;
  font-size:.92rem;
  color:var(--ink-soft);
}
.steps b{
  flex:none;
  width:28px;height:28px;
  border-radius:50%;
  display:grid;place-items:center;
  background:var(--green);
  color:var(--on-dark);
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.04em;
}

/* the licence + in-person note under the calendar. Cream ground, so --ink-soft
   (not --khaki-ink, which fails AA on cream). */
.booking__note{
  margin:1.6rem auto 0;
  max-width:60ch;
  text-align:center;
  font-size:.9rem;
  line-height:1.6;
  color:var(--ink-soft);
  position:relative;
  z-index:1;
}
.booking__note a{color:var(--green);font-weight:600;text-decoration:underline}
.booking__note a:hover{color:var(--terracotta-ink)}

@media (max-width:640px){
  .steps{flex-direction:column;align-items:flex-start;gap:.8rem}
}

/* Preserve the dimensions of Jane's supplied booking button embed. */
.booking--jane-button{display:flex;justify-content:center;align-items:center}
.booking--jane-button iframe{display:block;width:177px;height:28px;border:0;flex:none}