/* ==========================================================================
   /intro-join page styles
   Fast-funnel paid-ad landing for the 5-Week Intro to NY Salsa course.
   Dark photo hero + cream content zone, mirrors /next-step/.
   Cream: #f4f3f1 (matches /checkout/).
   ========================================================================== */

:root {
  --color-gold: #c19635;
  --color-cream: #f4f3f1;
  --color-ink: #1a1a1a;
  --color-gold-hover: #d4a93e;
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
button, input { font: inherit; }
button { cursor: pointer; }

.ns-page {
  min-height: 100vh;
  background: #0a0a0a;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
.ns-page button,
.ns-page label,
.ns-page a { -webkit-tap-highlight-color: transparent; }

/* ---- Hero (dark zone, full viewport) — mirrors home page hero ----
   Use svh (stable / small viewport) so the URL-bar collapse on mobile
   doesn't reshape the hero mid-scroll. dvh resizes as the chrome
   shows/hides which was causing the "jumps and locks" Riley flagged. */
.ns-hero {
  position: relative;
  /* Sub-viewport height on purpose so the cream section (gold "5-Week
     Course" label + "Perfect for absolute beginners" tagline) peeks
     above the fold — signals to mobile viewers that they can scroll
     to book. */
  min-height: 78vh; min-height: 78svh;
  overflow: hidden;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media (min-width: 720px) {
  .ns-hero { min-height: 88vh; min-height: 88svh; }
}
/* Step 2 (Secure Checkout) — hide the hero entirely. The checkout
   flow lives in the cream zone with its own "← Back · Secure Checkout"
   header; the marketing chrome above it is just noise. */
body.ij-step2 .ns-hero { display: none; }
.ns-hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.6;
  z-index: 1;
}
.ns-hero__overlay {
  position: absolute; inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.15) 35%, rgba(10,10,10,0.10) 60%, rgba(10,10,10,0.60) 100%);
}
.ns-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 24px;
  max-width: 900px;
  margin-top: -4vh;
}
.ns-hero__badge {
  display: inline-flex; align-items: center; gap: 14px;
  margin-bottom: 22px;
}
.ns-hero__badge-line {
  width: 36px; height: 1px;
  background: rgba(255,255,255,0.35);
}
.ns-hero__badge-text {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-gold);
}
.ns-hero__title {
  margin: 0 0 14px;
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: clamp(40px, 9vw, 78px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.01em;
}
.ns-hero__title-italic {
  display: block;
  color: var(--color-gold);
  font-style: italic;
}
.ns-hero__subtitle {
  margin: 0;
  color: rgba(255,255,255,0.78);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.6px;
}
.ns-hero__logo-link {
  position: absolute;
  top: 16px;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  display: inline-block;
  line-height: 0;
  cursor: pointer;
}

/* In-hero variant of the gold solid CTA — same pill as the sticky one,
   just absolutely positioned near the bottom of the hero video. */
.ij-cta-solid--in-hero {
  position: absolute;
  bottom: 36px;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
}
@media (min-width: 720px) {
  .ij-cta-solid--in-hero { bottom: 60px; }
}
.ns-hero__logo {
  display: block;
  width: auto;
  height: 128px;
}
@media (min-width: 720px) {
  .ns-hero__logo-link { top: 40px; }
  .ns-hero__logo { height: 160px; }
  .ns-hero__badge-line { width: 50px; }
  .ns-hero__badge-text { font-size: 12px; }
  .ns-hero__subtitle { font-size: 16px; letter-spacing: 1px; }
}

/* ---- Cream content zone ---- */
.ns-cream {
  min-height: 60vh;
  padding: 32px 16px 60px;
  background: var(--color-cream);
  color: var(--color-ink);
}
@media (min-width: 720px) {
  .ns-cream { padding: 48px 16px 60px; }
}
.ns-cream-shell { max-width: 480px; margin: 0 auto; }

/* ---- Numbered section headings (booking flow) ----
   Sits above each booking step (cards, role, checkout button) so the
   flow reads as 1 → 2 → 3. Left-aligned per Riley's direction —
   marketing intro above (tagline + bullets) stays centred, but the
   action sections feel more like a form once we hit the first heading. */
.ij-section {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 36px 0 14px;
  text-align: left;
}
.ij-section__num {
  color: var(--color-gold);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 26px;
  font-weight: 500;
  line-height: 1;
}
.ij-section__title {
  color: var(--color-ink);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
@media (min-width: 720px) {
  .ij-section { margin-top: 44px; }
  .ij-section__num { font-size: 30px; }
  .ij-section__title { font-size: 16px; }
}

/* Tagline above the bullet list — big italic Playfair so it reads as a
   warm welcome line, mirroring the hero. */
.ns-tagline {
  margin: 0 0 12px;
  text-align: center;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #1a1a1a;
}
@media (min-width: 720px) {
  .ns-tagline { font-size: 32px; margin: 0 0 14px; }
}

/* ---- "What's included" 5-point list ----
   First bullet uses a pin emoji, the rest use a green tick (no circle).
   Sits above the cards, replaces the old venue strip + pill + check line +
   next-start row. */
.ns-points {
  list-style: none;
  margin: 0 auto 18px;
  padding: 0;
  display: grid;
  gap: 8px;
  /* Shrink the block to its widest row, then auto-margin centres the
     whole column. Items inside keep a left-aligned icon + text so the
     ticks/pin line up vertically. */
  width: max-content;
  max-width: 100%;
}
.ns-points__item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #1a1a1a;
  font-family: "Inter", sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
}
.ns-points__icon {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #2f9e6b;
}
.ns-points__icon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ns-points__icon--pin {
  font-size: 12px;
  line-height: 1;
}
.ns-points__text { display: inline-block; }

/* ---- Cards ---- */
.ns-cards {
  margin-top: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: stretch;
}
.ns-card {
  position: relative;
  padding: 18px 12px;        /* tighter horizontal padding so the
                                Partnerwork + Shines cards feel a touch
                                narrower on both mobile and desktop */
  border: 1.5px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  color: var(--color-ink);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.18s ease;
  font-family: inherit;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ns-card:hover:not(.is-soldout) { border-color: rgba(193, 150, 53, 0.5); }
.ns-card.is-active { border-color: var(--color-gold); }
.ns-card.is-soldout { opacity: 0.45; cursor: not-allowed; }
/* Combo wide card inherits the same padding now */

/* Wrapper: holds the gold class header + the card. The grid item is
   the wrap, not the card itself. */
.ns-card-wrap {
  display: flex;
  flex-direction: column;
}
/* Combo wide card spans both columns full width — left-aligned with
   the two cards above it, no centred inset. */
/* Combo card — narrower than the two cards above it, centred so there's
   space on both sides. Visually it reads as the "or" option rather than
   dominating the layout. */
.ns-card-wrap--wide {
  grid-column: 1 / -1;
  width: 75%;
  justify-self: center;
}
@media (max-width: 480px) {
  .ns-card-wrap--wide { width: 78%; }
}
/* Force the class-name title to stay on one line on the combo card
   so "Partnerwork + Shines" never wraps. */
.ns-card-wrap--wide .ns-card__name-text { white-space: nowrap; }

/* In-card class-name title — gold + Apple-blue-style info icon inline.
   Replaces the old above-the-card header. */
.ns-card__name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 4px 0 8px;
  min-height: 22px;
}
.ns-card__name-text {
  color: var(--color-gold);
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.ns-card__radio {
  position: absolute;
  top: 12px; right: 12px;
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border: 1.5px solid rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  background: #ffffff;
}
.ns-card__radio svg {
  width: 11px; height: 11px;
  opacity: 0;
  fill: none; stroke: var(--color-gold);
  stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round;
  transition: opacity 0.15s ease;
}
.ns-card.is-active .ns-card__radio { border-color: var(--color-gold); }
.ns-card.is-active .ns-card__radio svg { opacity: 1; }

/* "Best value" pill — sits at the top, away from the top-right radio.
   On the wide combo card it lives top-left (next to the calendar);
   shorter cards never use the pill so this only applies to ns-card--wide. */
.ns-card__pill {
  position: absolute;
  top: 10px; left: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--color-gold);
  color: #ffffff;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

/* Calendar icon — line-art, sits on the left of the price row at the
   bottom of the card. Same horizontal anchor as the rest of the body
   content; matches the quiet next-step icon style. */
.ns-card__icon {
  display: block;
  width: 22px; height: 22px;
  flex-shrink: 0;
  color: rgba(28, 43, 51, 0.6);
}
.ns-card.is-active .ns-card__icon { color: #1a1a1a; }
/* Price row groups the calendar + price horizontally so the icon sits
   inline with the dollar amount instead of floating up top. */
.ns-card__price-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 6px 0 0;
  flex-wrap: wrap;
}

/* Prominent venue line that opens the cream content zone. Sits above
   the "5-Week Course" gold label so the location reads first — Riley
   wants the venue to be obvious before anything else on the page. */
.ns-venue {
  margin: 0 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  text-align: center;
}
.ns-venue__pin {
  font-size: 18px;
  line-height: 1;
}
.ns-venue__text {
  letter-spacing: 0.2px;
}
@media (min-width: 720px) {
  .ns-venue { font-size: 17px; margin-bottom: 22px; }
  .ns-venue__pin { font-size: 20px; }
}

/* Gold "5-Week Course" label sitting above the "Perfect for absolute
   beginners" tagline. Soft uppercase, no chrome — just text. */
.ns-format {
  margin: 0 0 4px;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--color-gold);
}
@media (min-width: 720px) {
  .ns-format { font-size: 13px; letter-spacing: 3.2px; margin: 0 0 6px; }
}

/* Framed variant: thin neutral hairlines on either side of the label so
   it reads as a deliberate section marker without going bigger or more
   gold. Pairs with .ns-price below for the from-$89 line. */
.ns-format--framed {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
}
.ns-format__rule {
  flex: 0 0 44px;
  height: 1px;
  background: rgba(0, 0, 0, 0.18);
}
.ns-format__text {
  flex: 0 0 auto;
}

/* Premium price line — Playfair italic, dark ink, refined size. Lives
   between the framed label and the welcome tagline. "from" is a much
   smaller upright sans hint so the eye lands on the dollar number. */
.ns-price {
  margin: 0 0 18px;
  text-align: center;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #1a1a1a;
}
.ns-price__from {
  font-family: "Montserrat", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.45);
  margin-right: 6px;
  vertical-align: 5px;
}
/* Use a serif stack whose italic dollar sign renders with a single bar
   (Iowan / Apple Garamond / Baskerville / Georgia all qualify) — the
   Playfair italic glyph used by the rest of the price has the double-
   bar American style which Riley doesn't want. The numerals stay in
   Playfair so the line still reads cohesively. */
.ns-price__sign {
  font-family: "Iowan Old Style", "Apple Garamond", Baskerville, Georgia, "Times New Roman", serif;
  margin-right: 1px;
}
@media (min-width: 720px) {
  .ns-price { font-size: 32px; margin-bottom: 22px; }
  .ns-price__from { font-size: 13px; vertical-align: 6px; }
  .ns-format__rule { flex-basis: 52px; }
}

.ns-card__title {
  margin-bottom: 4px;
  color: var(--color-ink);
  font-size: 15px;
  font-weight: 600;
}
/* Popup styling for the info icon that lives inside .ns-card__name
   at the top of each card. */
.ns-card__name .ns-info-popup {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.ns-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 10px;
  margin-bottom: 4px;
}
.ns-card__price-amount {
  color: var(--color-ink);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.5px;
  line-height: 1;
}
.ns-card__price-save {
  align-self: center;
  color: var(--color-gold);
  font-size: 17px;
  font-style: italic;
  font-weight: 500;
}
.ns-card__sub {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  margin-top: 6px;
  color: var(--color-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1.35;
  text-align: center;
}

/* ---- Spots-remaining line (sits directly below the combo card) ----
   One quiet status line: "9 spots remaining". Colour-coded so the
   urgency reads at a glance — green when there's room, amber when
   it's getting tight, red when only a few are left. */
.ij-spots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px 0 0;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.3px;
}
.ij-spots__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.ij-spots--available { color: #2f9e6b; }
.ij-spots--low       { color: #d48a25; }
.ij-spots--critical  { color: #c92a2a; }

/* ---- Role pills row ---- */
.ns-picker-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 0;
}
.ns-picker-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.ns-day-pill {
  padding: 7px 16px;
  border: 1px solid rgba(26, 22, 18, 0.14);
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: #1a1a1a;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.ns-day-pill:hover:not(:disabled) { border-color: rgba(193, 150, 53, 0.5); }
.ns-day-pill.is-on { border-color: var(--color-gold); color: var(--color-gold); }
.ns-day-pill:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---- Info tooltip (copied from /courses/introduction/ bm-info-* pattern) ---- */
.ns-info-wrap {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  margin-left: 4px;
}
/* Info icon — calm blue (Riley 2026-11-01), not gold, so it reads as help
   colour palette stays cohesive (no competing blue accent). */
.ns-info-btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid #2F6FA8;
  background: transparent;
  color: #2F6FA8;
  font-size: 12px;
  font-weight: 500;
  font-style: normal;
  font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  transition: background 0.2s, color 0.2s;
}
.ns-info-btn:hover,
.ns-info-btn:focus { background: #2F6FA8; color: #ffffff; outline: none; }
/* Default: popup opens ABOVE the icon (Riley wants the popup to feel
   like it comes OUT of the icon, on both desktop + mobile). */
.ns-info-popup {
  display: none;
  position: absolute;
  top: auto;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  max-width: calc(100vw - 32px);
  padding: 13px 15px;
  background: #fff;
  color: #555;
  font-size: 12.5px;
  line-height: 1.5;
  border-radius: 10px;
  z-index: 20;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  border: 1px solid rgba(193, 150, 53, 0.40);
  box-shadow: 0 6px 22px rgba(0,0,0,0.12);
  pointer-events: none;
  text-align: left;
}
/* On mobile every info popup opens ABOVE its icon — Riley's call.
   The popup is anchored to the card-wrap (or picker-group for Role)
   so it can be wide enough to read without escaping the viewport. */
@media (max-width: 720px) {
  /* Cards: each card-wrap becomes the popup's positioning context;
     the inline .ns-info-wrap goes static so the popup "escapes" up
     to the wrap. */
  .ns-card-wrap { position: relative; }
  .ns-card__name .ns-info-wrap { position: static; }
  .ns-card__name .ns-info-popup {
    top: auto;
    bottom: calc(100% - 8px);
    width: 280px;
    max-width: calc(100vw - 32px);
    transform: none;
  }
  /* Left column (Partnerwork) — anchor to the wrap's left edge so
     the popup grows rightward into the gap, not off-screen. */
  .ns-card-wrap:nth-child(1) .ns-info-popup {
    left: 0;
    right: auto;
  }
  /* Right column (Shines) — mirror: anchor to right edge, grow left. */
  .ns-card-wrap:nth-child(2) .ns-info-popup {
    left: auto;
    right: 0;
  }
  /* Wide (Combo) — spans both columns so a centred popup fits. */
  .ns-card-wrap--wide .ns-info-popup {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  /* Arrow ::after flips to point DOWN from the popup toward the
     icon below. Suppressed for the left/right anchored variants
     since the popup edge sits over the icon already. */
  .ns-card__name .ns-info-popup::after {
    top: auto;
    bottom: -12px;
    border: 6px solid transparent;
    border-top-color: #fff;
    border-bottom-color: transparent;
  }
  .ns-card-wrap:nth-child(1) .ns-info-popup::after { left: 14px; right: auto; transform: none; }
  .ns-card-wrap:nth-child(2) .ns-info-popup::after { left: auto; right: 14px; transform: none; }

  /* Role popup in the picker row: anchor to the picker-group so the
     popup spans wider than the 18px icon. Group is now left-aligned,
     so the popup grows rightward from its left edge. */
  .ns-picker-group { position: relative; }
  .ns-picker-group .ns-info-wrap { position: static; }
  .ns-picker-group .ns-info-popup {
    top: auto;
    bottom: calc(100% + 8px);
    left: 0;
    right: auto;
    transform: none;
    width: 280px;
    max-width: calc(100vw - 32px);
  }
  .ns-picker-group .ns-info-popup::after {
    top: auto;
    bottom: -12px;
    left: 12px;
    right: auto;
    transform: none;
    border: 6px solid transparent;
    border-top-color: #fff;
    border-bottom-color: transparent;
  }
}

/* Desktop: the Role info icon sits near the bottom of the page; if the
   page is short the popup opens below and clips. Always open above
   the icon for the picker-row popup, regardless of viewport width. */
@media (min-width: 721px) {
  .ns-picker-group .ns-info-popup {
    top: auto;
    bottom: calc(100% + 8px);
  }
  .ns-picker-group .ns-info-popup::after {
    top: auto;
    bottom: -12px;
    border: 6px solid transparent;
    border-top-color: #fff;
    border-bottom-color: transparent;
  }
}
/* Arrow points DOWN out of the popup toward the icon below. */
.ns-info-popup::after {
  content: '';
  position: absolute;
  top: 100%;
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #fff;
  border-bottom-color: transparent;
}
.ns-info-popup strong { color: #1a1a1a; }
.ns-info-btn:hover + .ns-info-popup,
.ns-info-btn:focus + .ns-info-popup { display: block; }

/* ---- Continue button (white pill, gold outline + text) ---- */
.ns-continue {
  width: 100%;
  margin-top: 0;
  padding: 15px 16px;
  border: 1.5px solid var(--color-gold);
  border-radius: 999px;
  background: #ffffff;
  color: var(--color-gold);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.ns-continue:hover { background: var(--color-gold); color: #ffffff; }
.ns-continue:disabled { opacity: 0.4; cursor: not-allowed; }
.ns-continue:disabled:hover { background: #ffffff; color: var(--color-gold); }
.ns-continue.is-loading { opacity: 0.6; cursor: wait; }

/* ---- Exit link "Not ready? View all courses" ---- */
.ns-exit-link {
  display: block;
  margin-top: 16px;
  color: rgba(0, 0, 0, 0.62);
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(0, 0, 0, 0.3);
}
.ns-exit-link:hover {
  color: var(--color-ink);
  text-decoration-color: var(--color-gold);
}

/* ---- Footer strip — quiet wayfinding under the exit link ---- */
.ns-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 36px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-family: "Inter", sans-serif;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.55);
}
.ns-footer a {
  color: rgba(0, 0, 0, 0.62);
  text-decoration: none;
  transition: color 0.15s;
}
.ns-footer a:hover { color: var(--color-gold); }
.ns-footer__dot { color: rgba(0, 0, 0, 0.32); }

/* ---- Step 2 ---- */
.ns-step2-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: rgba(0, 0, 0, 0.65);
  font-size: 12px;
  letter-spacing: 0.6px;
  font-family: inherit;
}
.ns-step2-back:hover { color: #1a1a1a; }

.checkout-secure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 14px;
  color: rgba(193, 150, 53, 0.6);
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.lock-icon { flex-shrink: 0; width: 12px; height: 12px; fill: currentColor; }

.step-card {
  margin-bottom: 14px;
  padding: 26px 28px 26px 25px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-left: 3px solid var(--color-gold);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  font-weight: 400;
}
.step-header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; }
.step-title {
  color: var(--color-gold);
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.checkout-summary { margin: 0; padding: 0; border: none; background: none; }
.checkout-product-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.checkout-product-name { color: var(--color-ink); font-size: 15px; font-weight: 600; }
.checkout-item-price {
  margin-left: 20px;
  color: var(--color-ink);
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.checkout-class-detail {
  padding: 8px 0 8px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}
.checkout-class-detail:last-of-type { border-bottom: none; }
.checkout-class-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.checkout-class-name { color: #2a9d8f; font-size: 13px; font-weight: 600; }
.checkout-role-chip {
  color: var(--color-gold);
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  white-space: nowrap;
}
.checkout-class-info { margin-top: 2px; color: #888888; font-size: 11px; }
.checkout-class-info .detail-dot { color: rgba(0, 0, 0, 0.25); }

.checkout-divider {
  margin: 14px 0 0;
  border: none;
  border-top: 1px solid rgba(193, 150, 53, 0.22);
}
.checkout-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 0;
}
.checkout-total-label {
  color: var(--color-ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.checkout-total-price { color: var(--color-ink); font-size: 22px; font-weight: 700; }

.checkout-fee-note {
  margin-top: 10px;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.45);
  line-height: 1.5;
}
.checkout-fee-note strong { color: rgba(0, 0, 0, 0.65); font-weight: 600; }

/* ---- Inputs ---- */
.ns-input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  background: #ffffff;
  color: var(--color-ink);
  font-size: 14px;
  font-family: inherit;
}
.ns-input:focus { border-color: var(--color-gold); outline: none; }
.ns-input::placeholder { color: rgba(0, 0, 0, 0.35); }
.ns-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 0; }
.ns-field-label {
  display: block;
  margin: 16px 0 6px;
  color: var(--color-ink);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* ---- Payment (Square iframes) ---- */
.ns-wallets { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.ns-wallets > div { width: 100%; }
.ns-divider-text {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  color: rgba(0, 0, 0, 0.4);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.ns-divider-text::before,
.ns-divider-text::after { content: ""; flex: 1; height: 1px; background: rgba(0, 0, 0, 0.1); }

/* Small explainer line above the Square card iframe so customers know
   what they're typing — the Square field has its own internal labels
   ("Card number", "MM/YY", "CVV") but they're easy to miss until you
   focus. */
.ns-card-hint {
  margin: 0 0 6px;
  color: rgba(0, 0, 0, 0.55);
  font-size: 11px;
  letter-spacing: 0.2px;
}
#ij-cardContainer { min-height: 56px; }
.ns-card-error { font-size: 12px; color: #c92a2a; margin-top: 6px; min-height: 14px; }
.ns-card-loading {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.45);
  padding: 18px 14px;
  text-align: center;
}

/* ---- Referral code row (Step 2, collapsed by default to reduce checkout friction) ---- */
.ij-referral {
  margin: 8px 4px 4px;
}
.ij-referral .ns-field-label {
  margin-bottom: 6px;
}
.ij-referral-hint {
  text-transform: none;
  letter-spacing: 0.2px;
  color: rgba(0, 0, 0, 0.4);
  font-weight: 500;
  font-size: 10px;
}
.ij-referral-help {
  margin-top: 6px;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.5);
  line-height: 1.45;
}
/* Collapsed-by-default disclosure; clicking "Have a referral code?" expands it. */
.ij-referral--collapsed { display: block; }
.ij-referral-summary {
  cursor: pointer;
  font-size: 12px;
  letter-spacing: 0.2px;
  color: rgba(0, 0, 0, 0.55);
  padding: 6px 0;
  list-style: none;
  user-select: none;
}
.ij-referral-summary::-webkit-details-marker { display: none; }
.ij-referral-summary::before {
  content: '+ ';
  font-weight: 500;
  color: rgba(0, 0, 0, 0.4);
  margin-right: 2px;
}
.ij-referral[open] .ij-referral-summary::before { content: '− '; }
.ij-referral-summary:hover { color: rgba(0, 0, 0, 0.85); }

.submit-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 12px;
  color: rgba(0, 0, 0, 0.4);
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.submit-secure .lock-icon { width: 10px; height: 10px; }

/* ---- Error / states ---- */
.ns-error {
  display: none;
  margin: 12px 0 0;
  padding: 11px 14px;
  border: 1px solid rgba(201, 42, 42, 0.3);
  border-radius: 8px;
  background: #ffffff;
  color: #b03030;
  font-size: 13px;
}
.ns-error.is-on { display: block; }

#ij-loading { text-align: center; padding: 40px 0; color: rgba(0, 0, 0, 0.5); font-size: 13px; }
#ij-unavailable { text-align: center; padding: 80px 24px 60px; max-width: 540px; margin: 0 auto; }
#ij-unavailable h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 32px;
  color: #1a1a1a;
  margin: 0 0 16px;
}
#ij-unavailable p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.65);
  margin: 0 0 24px;
}
#ij-unavailable a.ij-mail { color: var(--color-gold); text-decoration: none; font-weight: 500; }
#ij-unavailable a.ij-home {
  display: inline-block;
  padding: 12px 28px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: #1a1a1a;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.is-hidden { display: none !important; }

/* ---- Responsive ---- */
@media (min-width: 720px) {
  .ns-cream-shell { max-width: 620px; }
  .ns-cards {
    gap: 16px;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
  }
  .ns-card { padding: 22px; }   /* equal padding all four sides */
  .ns-card__price-amount { font-size: 34px; }
}

@media (max-width: 430px) {
  .ns-card { padding: 14px; }
  .ns-card__title { font-size: 12px; }
  .ns-card__price-amount { font-size: 24px; }
  /* hero title relies on the clamp() in .ns-hero__title to stay 2 lines */
  .step-card { padding: 22px 18px 22px 15px; }
  .ns-row { grid-template-columns: 1fr; }
  .checkout-product-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
  .checkout-item-price { margin-left: 0; }
}

/* ===========================================================
   Accordion flow — 3 collapsible sections in one page
   (Choose course → Select role → Checkout). Step number style
   matches the existing .ij-section__num gold serif look so the
   accordion feels like the rest of the page, not a foreign module.
   =========================================================== */
.ij-flow { margin: 28px 0 18px; display: flex; flex-direction: column; gap: 14px; }

.ij-flow-step {
  border: 1px solid #e6dfd0;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.ij-flow-step.is-active {
  border-color: var(--color-gold);
  box-shadow: 0 1px 0 rgba(193,150,53,0.08);
}
.ij-flow-step.is-locked { opacity: 0.55; }

.ij-flow-step__title {
  display: grid;
  grid-template-columns: 38px 1fr 22px;
  align-items: baseline;
  gap: 14px;
  width: 100%;
  padding: 18px 20px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.ij-flow-step.is-locked .ij-flow-step__title { cursor: not-allowed; }

/* Match the .ij-section__num idiom — plain gold serif "1." */
.ij-flow-step__num {
  color: var(--color-gold);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
}

.ij-flow-step__main { min-width: 0; }
.ij-flow-step__label {
  display: block;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.3px;
  color: var(--color-ink);
  line-height: 1.2;
}
.ij-flow-step__summary {
  display: block;
  font-size: 12.5px;
  color: #888;
  margin-top: 4px;
  letter-spacing: 0.01em;
}
.ij-flow-step__chev {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #b3b3b3;
  transition: transform 0.18s, color 0.18s;
  align-self: center;
}
.ij-flow-step.is-active .ij-flow-step__chev {
  transform: rotate(180deg);
  color: var(--color-gold);
}

.ij-flow-step__body {
  display: none;
  padding: 8px 20px 22px;
}
.ij-flow-step.is-active .ij-flow-step__body { display: block; }

.ij-flow-step__actions {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.ij-flow-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  padding: 15px 34px;
  border-radius: 8px;
  border: 1px solid var(--color-gold);
  background: var(--color-gold);
  color: #fff;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.2s, border-color 0.2s, opacity 0.2s;
}
.ij-flow-next:hover:not(:disabled) {
  background: var(--color-gold-hover);
  border-color: var(--color-gold-hover);
}
.ij-flow-next:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.ij-flow-proceed {
  width: 100%;
  max-width: 360px;
}
.ij-checkout-secure-line {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 11.5px;
  color: #777;
  text-align: center;
}
.ij-checkout-secure-line .lock-icon {
  width: 12px; height: 12px; fill: #999; flex-shrink: 0;
}

/* ===========================================================
   Solid "Book here" / "Enrol now" CTA — single look reused in
   the hero (under the logo) and in the sticky bottom slot.
   No outline, no bounce — solid gold pill, clearly a button.
   =========================================================== */
.ij-cta-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 34px;
  background: var(--color-gold);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  border: 1px solid var(--color-gold);
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.2s, border-color 0.2s;
}
.ij-cta-solid:hover { background: var(--color-gold-hover); border-color: var(--color-gold-hover); }

/* Sticky bottom variant — static, always visible at the bottom of the
   viewport. env(safe-area-inset-bottom) lifts above iOS home indicator
   + Android gesture bar. */
.ij-cta-solid--sticky {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  transform: translateX(-50%);
  -webkit-tap-highlight-color: transparent;
  opacity: 1;
  transition: opacity 220ms ease, transform 220ms ease;
  will-change: opacity, transform;
}

/* Hide the sticky pill while the in-hero CTA is still on screen so the
   user never sees two competing enrol buttons. Toggled by an
   IntersectionObserver in intro-join/index.html. */
body.ij-hero-cta-visible .ij-cta-solid--sticky {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(12px);
}

/* Same idea for the Book Now picker: once the user reaches it, the sticky
   pill is redundant (it only scrolls here). Toggled by the same observer
   script on intro-join + improver-join. */
body.ij-picker-visible .ij-cta-solid--sticky {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(12px);
}

@media (prefers-reduced-motion: reduce) {
  .ij-cta-solid--sticky { transition: none; }
}

/* ===========================================================
   Bigger, centered role pills + helper text underneath
   =========================================================== */
.ns-picker-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.ns-picker-group--big {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  width: 100%;
}
.ns-day-pill--big {
  font-size: 15px;
  padding: 14px 24px;
  min-width: 140px;
  font-weight: 500;
  border-radius: 8px;
}
.ij-role-block .lm-roles { max-width: 360px; }
.ij-role-helper {
  list-style: none;
  margin: 14px auto 0;
  padding: 0;
  max-width: 360px;
  font-size: 13px;
  color: #666;
  line-height: 1.5;
  text-align: left;
}
.ij-role-helper li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.ij-role-helper li + li { margin-top: 4px; }
.ij-role-helper__star {
  color: var(--color-gold);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  flex-shrink: 0;
  width: 10px;
  text-align: center;
}

/* ===========================================================
   Subtle live Google rating row (between the tick list and the
   "Why" section). Live values fetched from the same Cloudflare
   worker the home page uses; placeholders shown while loading.
   =========================================================== */
.ij-greviews {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 600px;
  margin: 24px auto 0;
  padding: 0 16px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  color: #6f6f6f;
  text-decoration: none;
}
.ij-greviews:hover { color: var(--color-ink, #1a1a1a); }
.ij-greviews__logo { display: inline-flex; line-height: 0; }
.ij-greviews__rating { font-weight: 600; color: var(--color-ink, #1a1a1a); }
.ij-greviews__stars {
  color: #f4b400;
  letter-spacing: 1px;
  font-size: 14px;
  line-height: 1;
}
.ij-greviews__count { color: #888; }
.ij-greviews__link {
  color: var(--color-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
@media (min-width: 720px) {
  .ij-greviews { font-size: 14px; gap: 10px; }
}

/* Top variant — sits directly under the hero, above the "5-Week Course"
   framed label. Bigger overall so the social proof reads clearly without
   shouting; the See-reviews link picks up an underline so it's obviously
   tappable. */
.ij-greviews--top {
  margin: 18px auto 22px;
  gap: 10px;
  font-size: 15px;
}
.ij-greviews--top .ij-greviews__stars {
  font-size: 18px;
  letter-spacing: 2px;
}
.ij-greviews--top .ij-greviews__rating {
  font-size: 16px;
}
.ij-greviews--top .ij-greviews__link {
  font-size: 14px;
}
@media (min-width: 720px) {
  .ij-greviews--top { font-size: 16px; gap: 12px; margin-top: 22px; margin-bottom: 26px; }
  .ij-greviews--top .ij-greviews__stars { font-size: 20px; }
  .ij-greviews--top .ij-greviews__rating { font-size: 17px; }
  .ij-greviews--top .ij-greviews__link { font-size: 14px; }
}

/* ===========================================================
   Descriptive info sections below the flow
   =========================================================== */
.ij-info {
  max-width: 600px;
  margin: 36px auto 0;
  padding: 0 4px;
}
.ij-info__title {
  font-family: "Playfair Display", serif;
  font-weight: 500;
  font-size: 24px;
  color: var(--color-ink);
  margin: 0 0 14px;
  letter-spacing: -0.005em;
}
.ij-info p {
  font-size: 15px;
  line-height: 1.6;
  color: #444;
  margin: 0 0 12px;
}
.ij-info__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}
.ij-info__list li {
  font-size: 14.5px;
  line-height: 1.55;
  color: #444;
  padding-left: 18px;
  position: relative;
}
/* Smaller gold dots — solid gold at 8px looked heavy; 5px reads
   as an accent rather than a bullet block. */
.ij-info__list li::before {
  content: '';
  position: absolute;
  left: 2px; top: 10px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-gold);
}
.ij-info__list strong { color: var(--color-ink); font-weight: 600; }

/* Reviews — three quiet cards */
.ij-reviews {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.ij-review {
  border: 1px solid #e9e3d4;
  border-radius: 12px;
  padding: 18px 20px;
  background: #fff;
}
.ij-review__stars {
  color: var(--color-gold);
  font-size: 14px;
  letter-spacing: 2px;
  margin-bottom: 6px;
}
.ij-review p {
  font-size: 14px;
  line-height: 1.55;
  color: #333;
  margin: 0 0 8px;
}
.ij-review__author {
  font-size: 12px;
  color: #888;
  margin: 8px 0 0 !important;
}
.ij-review__author strong { color: #555; font-weight: 600; }
.ij-review__source {
  display: block;
  margin-top: 2px;
}

/* FAQ — using native <details> for accessibility + no JS */
.ij-faq { display: grid; gap: 8px; }
.ij-faq__item {
  border: 1px solid #e9e3d4;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.ij-faq__q {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  font-size: 14.5px;
  font-weight: 500;
  color: #1a1a1a;
  cursor: pointer;
  user-select: none;
  position: relative;
}
.ij-faq__q::-webkit-details-marker { display: none; }
.ij-faq__q::after {
  content: '+';
  font-size: 20px;
  font-weight: 300;
  color: var(--color-gold);
  transition: transform 0.18s;
  line-height: 1;
}
.ij-faq__item[open] .ij-faq__q::after { content: '−'; }
.ij-faq__a {
  padding: 0 18px 16px;
  font-size: 14px;
  line-height: 1.6;
  color: #555;
}
.ij-faq__a strong { color: #333; font-weight: 600; }

/* Mobile — keep flow + info readable */
@media (max-width: 480px) {
  .ij-flow-step__title { padding: 14px 14px; gap: 11px; grid-template-columns: 28px 1fr 22px; }
  .ij-flow-step__label { font-size: 16px; }
  .ij-flow-step__summary { font-size: 11.5px; }
  .ij-flow-step__body { padding: 4px 14px 18px; }
  .ij-flow-next { width: 100%; }
  .ij-flow-step__actions { justify-content: stretch; }
  .ns-day-pill--big { padding: 13px 24px; min-width: 110px; font-size: 15px; }
  .ij-info { padding: 0; }
  .ij-info__title { font-size: 21px; }
}

/* ===========================================================
   Booking shell — full-page takeover (not a popup modal).
   Hides the marketing hero + descriptive sections behind it.
   Breadcrumb at top, 2 panes inside, Back button instead of X.
   =========================================================== */
.ij-book {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.ij-book[hidden] { display: none; }
body.ij-modal-open { overflow: hidden; }
/* Hide the underlying marketing chrome while the booking shell is up. */
body.ij-modal-open .ns-hero,
body.ij-modal-open .ns-cream,
body.ij-modal-open .ij-cta-solid--sticky { display: none; }

/* 3-column grid so the breadcrumb is centred in the viewport, not just
   in the remaining space after the Back button. Left = back, centre =
   breadcrumb, right = invisible spacer that balances back's width. */
.ij-book__head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid #ece6da;
  background: #fff;
}
.ij-book__back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px 6px 8px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-ink);
  cursor: pointer;
  border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
}
.ij-book__back:active { background: rgba(0,0,0,0.05); }

/* One quiet step line in the centre column; Back sits on the left. */
.ij-book__step {
  justify-self: center;
  margin: 0;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(26, 22, 18, 0.55);
  white-space: nowrap;
}

.ij-book__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 22px 20px 28px;
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  background: var(--color-cream);
}
@media (min-width: 540px) {
  .ij-book__body { padding: 28px clamp(20px, 6vw, 56px); }
}

/* Panes */
.ij-pane { max-width: 520px; margin: 0 auto; }
.ij-pane[hidden] { display: none; }
.ij-pane__title {
  margin: 0 0 18px;
  font-family: "Playfair Display", serif;
  font-weight: 500;
  font-size: 24px;
  color: var(--color-ink);
  text-align: center;
}
.ij-pane__actions {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

/* Venue reminder line that sits under each step's focal container. Same
   pin emoji + venue text as the hero so the location stays visible
   throughout the flow. */
.ij-step-venue {
  margin: 14px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #1a1a1a;
  text-align: center;
}
.ij-step-venue__pin {
  font-size: 14px;
  line-height: 1;
}

/* Focal container — wraps the title + cards + pills + spots + Next so
   the booking action reads as one self-contained module. The info
   bullets sit outside this container as secondary context. */
.ij-pane__focus {
  background: #fff;
  border: 1px solid #ece6da;
  /* Gold left bar mirrors the checkout step-cards so the booking shell and
     /checkout/ read as one continuous flow. */
  border-left: 3px solid var(--color-gold);
  border-radius: 10px;
  padding: 28px 24px 26px;
  box-shadow: none;
}
.ij-pane__focus .ij-pane__title { margin-bottom: 6px; }
.ij-pane > .lm-summary {
  margin: 0 0 14px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #d9d4c8;
  border-radius: 8px;
  text-align: left;
}
.ij-proceed-slot { display: flex; justify-content: center; margin-top: 18px; }
.ij-proceed-slot:empty { display: none; }
.ij-attendee-actions[hidden] { display: none; }
.ij-role-block { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(26, 22, 18, 0.1); }
.ij-attendee-actions { margin-top: 24px; }

/* Subtitle directly under a pane title. Used on "Choose your course" to
   spell out the course length so first-time visitors don't have to
   guess. Sits close to the title with breathing room before the cards
   below. */
.ij-pane__sub {
  margin: 0 0 22px;
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: rgba(0, 0, 0, 0.55);
}

@media (max-width: 480px) {
  .ij-pane__focus { padding: 18px 12px; border-radius: 12px; }
  .ij-pane__sub { margin-bottom: 18px; }
}


/* Role block inside the Your-details pane. */
.ij-role-block { margin-top: 18px; }
.ij-role-block .ns-field-label { margin-bottom: 8px; }
.ij-role-block .ns-picker-row { align-items: flex-start; }

/* Spots remaining — denser now that it sits between date pills + Next. */
.ij-pane .ij-spots { margin: 6px 0 0; text-align: center; }

/* "What is Partnerwork / Shines / Both" helper bullets under the Next
   button. Quiet — small text, hairline gold dots, no panel chrome. */
.ij-pane-info {
  list-style: none;
  margin: 24px auto 0;
  padding: 0;
  max-width: 440px;
  display: grid;
  gap: 12px;
  font-size: 14px;
  line-height: 1.55;
  color: #5e5e5e;
}
.ij-pane-info li {
  position: relative;
  padding-left: 18px;
}
.ij-pane-info li::before {
  content: '';
  position: absolute;
  left: 0; top: 10px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-gold);
}
.ij-pane-info strong {
  color: var(--color-ink);
  font-weight: 600;
  margin-right: 4px;
}

/* ============================================================
   Attendee boxes (Person 1..N).
   Single-person mode: .ij-attendee-box--solo hides the clickable
   header so the box looks like the original inline form.
   Multi-person mode: full collapsible behaviour. Active box has a
   subtle teal border + expanded body + rotated chevron; complete
   box (validated) shows the green tick next to the title. Each box
   gets a stronger drop shadow + bigger gap so three collapsed boxes
   read as three distinct modules instead of one stacked group.
   ============================================================ */
.ij-attendee-box {
  background: transparent;
  border: 1px solid rgba(26, 22, 18, 0.14);
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: none;
  transition: border-color 0.2s ease;
}
.ij-attendee-box:last-child { margin-bottom: 0; }
.ij-attendee-box--active {
  border-color: var(--color-gold);
  box-shadow: none;
}
.ij-attendee-box--solo {
  border: none;
  background: transparent;
  margin-bottom: 0;
  box-shadow: none;
}
.ij-attendee-box--solo > .ij-attendee-header {
  display: none;
}
.ij-attendee-box--solo > .ij-attendee-body {
  padding: 0;
}
.ij-attendee-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
  background: transparent;
}
.ij-attendee-box--active .ij-attendee-header {
  background: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.ij-attendee-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink, #1a1a1a);
}
.ij-attendee-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
  visibility: hidden;
}
.ij-attendee-box--complete .ij-attendee-tick {
  visibility: visible;
}
.ij-attendee-chev {
  display: inline-flex;
  color: rgba(0, 0, 0, 0.45);
  transition: transform 0.15s ease;
}
.ij-attendee-box--active .ij-attendee-chev {
  transform: rotate(180deg);
}
.ij-attendee-body {
  padding: 14px 16px 16px;
}
.ij-attendee-body[hidden] {
  display: none;
}
.ij-attendee-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.ij-attendee-box--solo .ij-attendee-actions {
  border-top: none;
  padding-top: 4px;
  justify-content: center;
}
/* The "Proceed to checkout" button — single-attendee Person 1 and the
   last extras box — centres so it feels like the commitment moment.
   Intermediate "Next" buttons stay right-aligned via the default rule. */
.ij-attendee-actions--centered {
  justify-content: center;
}

/* Role-label info icon nudge — keeps the (i) baseline-aligned with the
   "Your role" / "Their role" text without disturbing the picker row. */
.ij-role-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* The role tooltip lives near the left edge of the focal container,
   so anchor it left-aligned to the icon (instead of centred above)
   so it doesn't push off the right edge of narrow viewports. */
.ij-role-label .ns-info-popup {
  left: -10px;
  right: auto;
  transform: none;
  max-width: min(320px, calc(100vw - 40px));
}
.ij-role-label .ns-info-popup::after {
  left: 18px;
  right: auto;
  transform: none;
}

/* Subtle press feedback on the Lead/Follow pills — keeps the existing
   look but acknowledges the click so people know they hit it. */
.ns-day-pill:active:not(:disabled) {
  transform: scale(0.97);
}
/* No tinted fill on the active pill — gold border + gold text carry it
   (house rule: hierarchy via border/weight/colour, never tinted fills). */

/* Helper bullets restored under the focal container (in addition to
   the inline tooltip). Same look as the original ij-role-helper. */
.ij-role-helper-bottom {
  list-style: none;
  padding: 0;
  margin: 18px auto 0;
  max-width: 460px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #5e5e5e;
  text-align: left;
}
.ij-role-helper-bottom li {
  position: relative;
  padding-left: 14px;
}
.ij-role-helper-bottom li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--color-gold);
}

/* ============================================================
   Inline date picker (#ij-book) — mirrors /courses/introduction/,
   light/cream theme to match this page.
   ============================================================ */
.ij-datepicker {
  max-width: 400px;
  margin: 22px auto 28px;
  padding: 0 20px;
  text-align: center;
}
.ij-datepicker__eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--color-gold);
  margin: 0 0 8px;
}
.ij-datepicker__title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 500;
  color: var(--color-ink);
  margin: 0 0 22px;
}
/* Centered 2-col grid: every pill sized to the widest date content (equal +
   proportional), spots aligned in their own column outside. */
/* Two columns — Tuesday left, Thursday right, paired by week. Day is the
   column header, so each pill just shows its date. */
.ij-datepicker__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
  max-width: 340px;
  margin: 0 auto 16px;
}
.ij-datepicker__msg { grid-column: 1 / -1; font-size: 13px; color: #999; padding: 16px; text-align: center; }
.ij-datepicker__head {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #9a9a9a;
  text-align: center;
  padding-bottom: 2px;
}
@media (max-width: 420px) {
  .ij-datepicker__list { max-width: 100%; gap: 8px; }
  .ij-datepicker__list .lm-tile__main { font-size: 13px; }
}
.ij-datepicker__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 320px;
  padding: 15px 22px;
  border: 1px solid var(--color-gold);
  border-radius: 8px;
  background: var(--color-gold);
  color: #fff;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}
.ij-datepicker__btn:hover:not(:disabled) { background: var(--color-gold-hover); border-color: var(--color-gold-hover); }
.ij-datepicker__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.ij-datepicker__list .lm-tile { padding: 11px 8px; }
.ij-datepicker__list .lm-tile__main { color: var(--color-ink); }
.ij-datepicker__btn:not(:disabled):hover { opacity: 0.92; }