/* ==========================================================================
   /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-teal: #4a9a8a;
  --font-heading: "Playfair Display", 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: #1c2b33;
  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(74, 154, 138, 0.5); }
.ns-card.is-active { border-color: var(--color-teal); }
.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-teal);
  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-teal); }
.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: #1c2b33; }
/* 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: #1c2b33;
  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: 1.5px solid rgba(0, 0, 0, 0.15);
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  color: #1c2b33;
  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(74, 154, 138, 0.5); }
.ns-day-pill.is-on { border-color: var(--color-teal); color: var(--color-teal); }
.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 — same teal as the active card selection so the soft
   colour palette stays cohesive (no competing blue accent). */
.ns-info-btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--color-teal);
  background: transparent;
  color: var(--color-teal);
  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: var(--color-teal); 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(74, 154, 138, 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: #1c2b33; }

.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: 10px; margin-top: 10px; }
.ns-field-label {
  display: block;
  margin: 8px 0 5px;
  color: rgba(0, 0, 0, 0.5);
  font-size: 10px;
  font-weight: 500;
  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 {
  font: inherit;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.02em;
  padding: 13px 36px;
  border-radius: 999px;
  border: 1px solid var(--color-teal);
  background: var(--color-teal);
  color: #fff;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, opacity 0.18s;
}
.ij-flow-next:hover:not(:disabled) {
  background: #3d8478;
  border-color: #3d8478;
}
.ij-flow-next:disabled {
  background: #c9c2b4;
  border-color: #c9c2b4;
  cursor: not-allowed;
  opacity: 0.7;
}
/* The "Proceed to checkout" button — kept teal (matches the Next button
   on Step 1) so the booking flow reads as a single teal-accented action
   chain. Less gold across the page; teal carries the energy. */
.ij-flow-proceed {
  padding: 14px 40px;
  font-size: 16px;
}
.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-block;
  padding: 14px 38px;
  background: var(--color-gold);
  color: #fff;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 0;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  transition: background 0.1s, box-shadow 0.1s;
}
/* No hover transform — translateY combines with the sticky's
   translateX(-50%) and shifts the centred button sideways. Press-only
   feedback: a quick darker tint + shadow dip on :active. */
.ij-cta-solid:active {
  background: #8e6c1d;
  box-shadow: 0 2px 8px rgba(0,0,0,0.22);
}

/* 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);
}

@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: 16px;
  padding: 14px 30px;
  min-width: 140px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 999px;
}
.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-teal, #4a9a8a);
  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; }

/* 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-teal);
  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); }

/* Breadcrumb — 3 numbered circles in a centre column. */
.ij-bc {
  display: flex;
  align-items: center;
  gap: 0;
  justify-self: center;
}
.ij-bc__step {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 500;
  color: #8b8b8b;
  cursor: default;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ij-bc__n {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1.5px solid #d8d4cc;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
  background: #fff;
  color: #8b8b8b;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.ij-bc__l {
  white-space: nowrap;
}
.ij-bc__step.is-active .ij-bc__n {
  border-color: var(--color-teal);
  background: var(--color-teal);
  color: #fff;
}
.ij-bc__step.is-active .ij-bc__l { color: var(--color-ink); font-weight: 600; }
.ij-bc__step.is-done .ij-bc__n {
  border-color: var(--color-teal);
  color: var(--color-teal);
}
.ij-bc__step.is-done { color: #555; cursor: pointer; }
.ij-bc__sep {
  width: 28px;
  height: 1px;
  background: #d8d4cc;
  margin: 0 6px;
}
@media (max-width: 480px) {
  /* Keep the labels visible on phones so users always know which step
     they're on and can tap back. Stack number above label and shrink the
     text so all three labels fit on a single line. */
  .ij-bc__step {
    flex-direction: column;
    gap: 3px;
  }
  .ij-bc__l {
    font-size: 10px;
    letter-spacing: 0.2px;
    line-height: 1;
  }
  .ij-bc__sep {
    width: 18px;
    margin: 0 4px;
    align-self: flex-start;
    margin-top: 11px;
  }
}

.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: #1c2b33;
  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;
  border-radius: 14px;
  padding: 22px 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.ij-pane__focus .ij-pane__title { margin-bottom: 4px; }

/* 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; }
}

/* Date pills — horizontal row under the cards.
   Auto-lit based on selected card. Visual confirmation, not a picker. */
.ij-datepills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 14px 0 12px;
}
.ij-datepills:empty { display: none; }
.ij-datepill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 16px;
  border: 1.5px solid #d8d4cc;
  border-radius: 999px;
  background: #fff;
  font-size: 11.5px;
  color: #888;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  min-width: 110px;
  text-align: center;
}
.ij-datepill__day {
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  line-height: 1;
}
.ij-datepill__date {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 500;
  color: inherit;
}
.ij-datepill.is-on {
  border-color: var(--color-teal);
  color: var(--color-ink);
  background: #fff;
}
.ij-datepill.is-on .ij-datepill__day { color: var(--color-teal); }

/* 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: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 1px rgba(0, 0, 0, 0.03);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ij-attendee-box:last-child { margin-bottom: 0; }
.ij-attendee-box--active {
  border-color: rgba(74, 154, 138, 0.45);
  box-shadow: 0 2px 8px rgba(74, 154, 138, 0.12), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.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: rgba(0, 0, 0, 0.015);
}
.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 {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.4);
  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);
  background: rgba(74, 154, 138, 0.06);
}
.ns-day-pill.is-on {
  background: rgba(74, 154, 138, 0.08);
}

/* 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);
}