/* ── /next - Next cohort: dates, venue, format & pricing ──────────────
   Premium, calm pricing/logistics page. RTL Hebrew. The discount treatment
   is deliberately quiet (Apple/Nordstrom "regular vs current" clarity); the
   live first-cohort price is the single dominant number. CSS lives here per
   Chrome Workspaces (no inline styles / <style> blocks in the .vue). */

.nc-page {
  background: var(--bg-surface);
  color: var(--text-color);
}

/* ── Shared section scaffolding ──────────────────────────────── */
.nc-section {
  padding: var(--space-3xl) var(--space-xl);
}
.nc-section-alt {
  background: linear-gradient(180deg, #f6faff 0%, #eef5ff 100%);
}
.nc-section-inner {
  max-width: 1120px;
  margin: 0 auto;
}
.nc-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-color);
  margin-bottom: var(--space-md);
}
.nc-section-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--text-color);
  margin-bottom: var(--space-lg);
}
.nc-section-lead {
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 760px;
  margin-bottom: var(--space-2xl);
}

/* Accessibility: announce "regular"/"first-cohort" so the discount isn't
   conveyed by line/color alone. Visually hidden, screen-reader audible. */
.nc-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.nc-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  background: var(--accent-warm);
  color: #fff;
  border-radius: var(--radius-full);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 1px 2px rgba(123, 50, 14, 0.1), 0 4px 14px rgba(196, 85, 26, 0.18);
}
.nc-btn-primary:hover {
  background: var(--accent-warm-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(123, 50, 14, 0.14), 0 8px 22px rgba(196, 85, 26, 0.28);
}
.nc-btn-primary svg { flex: none; }
/* The hero's "choose a cohort" CTA is a <button>, not a link - it moves the
   page to the picker band rather than navigating - so it needs the UA button
   reset the anchor variants never did. */
.nc-hero-choose {
  border: none;
  font-family: var(--font-body);
  /* The UA button default is `normal`, which renders ~5px shorter than the
     anchor CTAs beside it; the shared global line-height keeps the stacked
     pills the same height on phone. */
  line-height: 1.5;
  cursor: pointer;
}
.nc-btn-secondary {
  display: inline-flex;
  align-items: center;
  padding: 13px 28px;
  background: transparent;
  color: var(--primary-color);
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-full);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.nc-btn-secondary:hover {
  border-color: var(--primary-color);
  background: var(--primary-light);
}

/* ── Hero ────────────────────────────────────────────────────── */
.nc-hero {
  padding: var(--space-3xl) var(--space-xl) var(--space-2xl);
  background:
    radial-gradient(900px 460px at 88% -8%, rgba(8, 148, 255, 0.10), transparent 60%),
    radial-gradient(720px 420px at 4% 108%, rgba(189, 50, 214, 0.07), transparent 58%),
    var(--bg-surface);
}
.nc-hero-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(var(--space-xl), 4vw, var(--space-3xl));
  align-items: center;
}
.nc-hero-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.6vw, 52px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--text-color);
  margin: var(--space-sm) 0 var(--space-lg);
}
.nc-hero-lead {
  font-size: clamp(16px, 1.9vw, 20px);
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 540px;
  margin-bottom: var(--space-xl);
}

/* Facts band: full-width 3-up beneath the hero split (Apple spec-row rhythm),
   so the venue image can dominate the upper row without crowding the copy. */
.nc-hero-facts {
  max-width: 1180px;
  margin: var(--space-2xl) auto 0;
  display: grid;
  /* auto-fit, not a fixed three: before a cohort is chosen only the venue fact
     renders (the opening date and the format are cohort-specific), and one card
     in a three-column grid reads as two missing cards. */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);
}
.nc-hero-fact {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-md);
  box-shadow: var(--shadow-sm);
}
.nc-hero-fact-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-tertiary);
  margin-bottom: 10px;
}
.nc-hero-fact-icon { color: var(--primary-color); font-size: 14px; }
.nc-hero-fact-value {
  display: block;
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 600;
  color: var(--text-color);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.nc-hero-fact-sub {
  display: block;
  font-size: 13.5px;
  color: var(--text-secondary);
  margin-top: 3px;
}

.nc-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

/* ── Cohort picker ───────────────────────────────────────────────
   One card per intake, a full-width band in the hero between the title row
   and the facts. The same chooser language as /curriculum's course picker:
   a tinted tray, equal-weight cards while nothing is chosen, and a white
   surface + primary ring + "מוצג כעת" pill on the chosen one. Buttons, not
   links: choosing is an in-page state, mirrored into ?cohort= by the view. */
.nc-cohort-picker {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: var(--space-2xl) auto 0;
}
.nc-cohort-tabs {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  max-width: 820px;
  margin: 0 auto;
  padding: 8px;
  background:
    linear-gradient(135deg, rgba(8, 148, 255, 0.05) 0%, rgba(189, 50, 214, 0.035) 55%, rgba(255, 163, 4, 0.04) 100%),
    var(--bg-surface);
  border: 1px solid rgba(0, 113, 227, 0.14);
  border-radius: 18px;
  box-shadow: 0 4px 20px rgba(0, 60, 130, 0.07);
}
/* Every card carries its own resting surface - ground, hairline and a soft
   shadow - rather than appearing only on hover. A phone has no hover, and since
   2026-08-23 the page shows nothing at all until one of these is pressed, so a
   card that reads as a paragraph of text is a dead end. The chosen card is
   still unmistakable: pure white against the siblings' translucency, a full
   primary ring, a deeper shadow and the gradient hairline. */
.nc-cohort-tab {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 156px;
  padding: 22px 20px 20px;
  border-radius: 12px;
  border: 1.5px solid rgba(0, 113, 227, 0.2);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 1px 3px rgba(0, 60, 130, 0.05);
  color: var(--text-secondary);
  font-family: var(--font-body);
  text-align: start;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.nc-cohort-tab:hover {
  background: var(--bg-surface);
  border-color: rgba(0, 113, 227, 0.4);
  color: var(--text-color);
  box-shadow: 0 6px 18px rgba(0, 60, 130, 0.09);
  transform: translateY(-2px);
}
/* Touch has no hover, so the pressed state is the only live feedback a phone
   gets between the tap and the sections appearing further down. */
.nc-cohort-tab:active {
  transform: translateY(0);
  background: var(--bg-surface);
  box-shadow: 0 1px 3px rgba(0, 60, 130, 0.05);
}
.nc-cohort-tab:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}
.nc-cohort-tab.is-active {
  background: var(--bg-surface);
  border-color: var(--primary-color);
  color: var(--text-color);
  box-shadow: 0 8px 24px rgba(0, 60, 130, 0.1);
}
.nc-cohort-tab.is-active:hover {
  transform: none;
}
/* The canonical 3-stop brand hairline under the chosen card - the one brand
   gradient this band carries. */
.nc-cohort-tab.is-active::after {
  content: '';
  position: absolute;
  inset-block-end: 10px;
  inset-inline-start: 20px;
  width: 44px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0894FF 0%, #BD32D6 50%, #FFA304 100%);
}
.nc-cohort-tab-current {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--primary-color);
  background: var(--primary-light);
  border: 1px solid rgba(0, 113, 227, 0.16);
}
.nc-cohort-tab-current i { font-size: 0.58rem; }
/* The cohort number is the dominant element: display face, solid ink (the
   brand gradient is forbidden on weight 500+). */
.nc-cohort-tab-name {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text-color);
  margin-bottom: 4px;
}
.nc-cohort-tab-opening {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-color);
}
.nc-cohort-tab-days,
.nc-cohort-tab-split {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.nc-cohort-tab-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.nc-cohort-tab-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--primary-color);
  background: var(--primary-light);
}
/* Sold out wears the palette's one red on the card too (owner request,
   2026-08-24), the same --alert-* pair the sold-out card below is built on, so
   the state reads the same in the selector as it does in the pricing section.
   Grey read as "inactive", which is not the claim: the seats are gone. */
.nc-cohort-tab-badge--closed {
  color: var(--alert-color);
  background: var(--alert-light);
}
/* The closure lines on a card whose intake is part sold out (owner request,
   2026-08-27). The badge above is the state at a glance; these name the courses
   it is about, which a 11px pill has no room to say. Alert red at 500 over a
   hairline of the same red - a block, not a panel: the card is still the
   control that switches the page to this intake, and a second frosted box
   inside it would read as something to press on its own. */
.nc-cohort-tab-note {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--alert-border);
}
.nc-cohort-tab-note-line {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--alert-color);
}
/* The "press me" chip at the foot of every unchosen card. The outer row is a
   spacer: `margin-block-start: auto` pins the pill to the bottom of the card so
   the two chips line up whatever each card's text costs, and the padding is the
   gap above it, which the pill's own margin could not also be. */
.nc-cohort-tab-cta {
  display: flex;
  width: 100%;
  margin-block-start: auto;
  padding-block-start: 14px;
}
.nc-cohort-tab-cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--primary-border);
  background: var(--primary-light);
  color: var(--primary-color);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.nc-cohort-tab:hover .nc-cohort-tab-cta-pill {
  border-color: var(--primary-color);
  background: var(--primary-color);
  color: #fff;
}
/* RTL: forward is to the LEFT, so the chevron leans that way on hover. */
.nc-cohort-tab-cta-chevron {
  flex: 0 0 auto;
  transition: transform 0.2s ease;
}
.nc-cohort-tab:hover .nc-cohort-tab-cta-chevron {
  transform: translateX(-3px);
}
/* Chooser state only: the chevron breathes so the eye is drawn to the one
   action the page has left. Two-and-a-half seconds apart and three pixels
   wide - a nudge, not a blink. Cancelled wholesale under reduced motion. */
.nc-cohort-picker--choose .nc-cohort-tab:not(:hover) .nc-cohort-tab-cta-chevron {
  animation: nc-cta-nudge 2.6s ease-in-out infinite;
}
@keyframes nc-cta-nudge {
  0%, 70%, 100% { transform: translateX(0); }
  82% { transform: translateX(-3px); }
}
/* Once a cohort IS chosen the sibling steps back a little but stays legible
   and clickable; in the chooser state both carry equal weight. */
.nc-cohort-picker:not(.nc-cohort-picker--choose) .nc-cohort-tab:not(.is-active) .nc-cohort-tab-name { opacity: 0.6; }
.nc-cohort-picker:not(.nc-cohort-picker--choose) .nc-cohort-tab:not(.is-active) .nc-cohort-tab-opening,
.nc-cohort-picker:not(.nc-cohort-picker--choose) .nc-cohort-tab:not(.is-active) .nc-cohort-tab-days,
.nc-cohort-picker:not(.nc-cohort-picker--choose) .nc-cohort-tab:not(.is-active) .nc-cohort-tab-split { opacity: 0.75; }
.nc-cohort-picker:not(.nc-cohort-picker--choose) .nc-cohort-tab:not(.is-active):hover .nc-cohort-tab-name,
.nc-cohort-picker:not(.nc-cohort-picker--choose) .nc-cohort-tab:not(.is-active):hover .nc-cohort-tab-opening,
.nc-cohort-picker:not(.nc-cohort-picker--choose) .nc-cohort-tab:not(.is-active):hover .nc-cohort-tab-days,
.nc-cohort-picker:not(.nc-cohort-picker--choose) .nc-cohort-tab:not(.is-active):hover .nc-cohort-tab-split { opacity: 1; }
/* Chooser state: the chip is a filled primary button, because until something
   is chosen this band is the only thing on the page that does anything. Once a
   cohort IS showing, the sibling's chip steps back to the outline treatment -
   still plainly a button, no longer the loudest thing in the hero. */
.nc-cohort-picker--choose .nc-cohort-tab-cta-pill {
  border-color: var(--primary-color);
  background: var(--primary-color);
  color: #fff;
}
.nc-cohort-picker--choose .nc-cohort-tab:hover .nc-cohort-tab-cta-pill {
  border-color: var(--primary-hover);
  background: var(--primary-hover);
}
/* The instruction sits ABOVE the tray, not under it: a visitor reading the hero
   top-down has to meet it before the cards it describes, and under them it was
   read - when it was read at all - as a caption on a choice already made. The
   arrow points at the cards and is the sentence's punctuation, so it comes
   last in the flow and stays out of the accessibility tree. */
.nc-cohort-picker-prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 auto var(--space-md);
  text-align: center;
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--primary-color);
}
.nc-cohort-picker-prompt-arrow {
  flex: 0 0 auto;
  animation: nc-prompt-arrow 2.6s ease-in-out infinite;
}
@keyframes nc-prompt-arrow {
  0%, 70%, 100% { transform: translateY(0); }
  82% { transform: translateY(3px); }
}
/* Venue figure: wide, clean, shadowless - the Mindspace photo is the hero
   object (Apple-store treatment). The venue wordmark sits in a tinted footer
   strip directly beneath the image, so image + logo read as one venue card.
   A hairline border (not a shadow) defines the card edge on the white hero. */
.nc-hero-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border-light);
}
.nc-hero-img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 480px;
  max-height: 620px;
  object-fit: cover;
}
.nc-hero-venue-credit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--space-md) var(--space-lg);
  /* background: linear-gradient(180deg, #f6faff 0%, #eef5ff 100%); */
  border-top: 1px solid var(--border-light);
}
.nc-hero-venue-credit-text {
  font-size: 14px;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}
.nc-hero-venue-credit-mark {
  height: 19px;
}
.nc-hero-venue-credit-divider {
  width: 1px;
  height: 22px;
  background: rgba(0, 60, 130, 0.18);
}
.nc-mindspace-logo {
  height: 32px;
  width: auto;
}

/* ── Schedule & format ───────────────────────────────────────── */
.nc-schedule-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.nc-schedule-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-lg);
  box-shadow: var(--shadow-sm);
}
.nc-schedule-card--accent {
  border-color: var(--primary-border);
  background:
    radial-gradient(420px 220px at 100% 0%, rgba(8, 148, 255, 0.06), transparent 60%),
    var(--bg-surface);
}
.nc-schedule-card-icon { font-size: 28px; color: var(--primary-color); margin-bottom: var(--space-md); }
.nc-schedule-card-title {
  font-size: 19px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
}
.nc-schedule-card-desc { font-size: 15px; line-height: 1.65; color: var(--text-secondary); margin: 0; }
.nc-schedule-days { list-style: none; padding: 0; margin: 0; }
.nc-schedule-days li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 10px 0;
  border-bottom: 1px dashed var(--border-light);
  margin: 0;
}
.nc-schedule-days li:last-child { border-bottom: 0; }
.nc-schedule-day { font-size: 15.5px; font-weight: 600; color: var(--text-color); }
/* "הרצאה" / "תרגול" beside the weekday. A quiet pill rather than more bold text:
   the row's job is still to answer "which day, which hours", and the kind is the
   qualifier on the day, not a third fact competing with the two. */
.nc-schedule-kind {
  display: inline-block;
  margin-inline-start: 8px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-light);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--text-secondary);
  vertical-align: middle;
}
.nc-schedule-hours {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--primary-color);
  letter-spacing: 0.01em;
  direction: ltr;
}

/* ── Pricing ─────────────────────────────────────────────────── */
/* Pilot banner: a single restrained frosted-glass strip stating the pilot
   fact once (replaces the old per-card sentence). The brand gradient appears
   only on the decorative top hairline (::before) - never on the text. */
.nc-pilot-banner {
  position: relative;
  max-width: 820px;
  margin: var(--space-2xl) auto 0;
  padding: var(--space-lg) var(--space-xl);
  border: 1px solid rgba(98, 98, 234, 0.12);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse at 12% 0%, rgba(8, 148, 255, 0.07), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(239, 246, 255, 0.5));
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 12px rgba(0, 60, 130, 0.05);
  overflow: hidden;
}
.nc-pilot-banner::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: var(--space-xl);
  width: 56px;
  height: 2px;
  background: linear-gradient(90deg, #0894FF 0%, #BD32D6 50%, #FFA304 100%);
  border-radius: 0 0 2px 2px;
}
.nc-pilot-banner-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--primary-color);
  margin-bottom: 10px;
}
.nc-pilot-banner-text {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0;
}

/* ── Pricing frame ───────────────────────────────────────────────
   One frame tells the value story in two stacked blocks: the struck regular
   prices ("עלויות הקורסים…", the quiet "before") on top, separated by a hairline
   from the live pilot cards ("מחזור הפיילוט…") plus the pilot fact banner. */
.nc-price-frame {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl) var(--space-xl);
  margin-bottom: var(--space-2xl);
}
/* The single frame: brand-tinted hairline, soft glow, faint top-centred wash
   drawing the eye to the prices. */
.nc-price-frame--pilot {
  border-color: rgba(8, 148, 255, 0.28);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(8, 148, 255, 0.05), transparent 58%),
    var(--bg-surface);
  box-shadow: var(--shadow-md);
}

.nc-frame-title {
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-color);
  margin: 0 0 var(--space-xl);
  line-height: 1.3;
}
.nc-frame-mark { margin-inline-start: 0.12em; }
/* The pilot sub-title sits inside the same frame, below the regular cards - an
   emphasized full-width brand-gradient rule (fading at both ends) + extra top
   space mark the jump from the regular prices to the special pilot prices. */
.nc-frame-title--divided {
  position: relative;
  margin-top: var(--space-2xl);
  padding-top: var(--space-2xl);
}
.nc-frame-title--divided::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(8, 148, 255, 0.55) 22%,
    rgba(189, 50, 214, 0.65) 50%,
    rgba(255, 163, 4, 0.55) 78%,
    transparent 100%
  );
}
/* Pilot frame title carries the canonical 3-stop brand hairline beneath it. */
.nc-frame-title--pilot::after {
  content: '';
  display: block;
  width: 64px;
  height: 2px;
  margin: var(--space-md) auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, #0894FF 0%, #BD32D6 50%, #FFA304 100%);
}

.nc-reg-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  align-items: stretch;
}
.nc-reg-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-md);
  min-height: 150px;
  /* A `1fr` grid item will not shrink below its content's min-content width,
     and the bundle card's two-logo lockup is wide. Without this the column
     blows out and every card in the row hangs past the frame's padding. */
  min-width: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}
.nc-reg-card--bundle { border-color: rgba(8, 148, 255, 0.3); }
.nc-reg-logo { height: 24px; width: auto; align-self: flex-start; }
.nc-reg-bundle-logos {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: nowrap;
}
/* Fluid so the two-logo lockup stays on one line across the whole desktop
   band: a third of the frame is only ~225px wide just above the tablet
   breakpoint, and a 21px lockup needs ~282px. */
.nc-reg-bundle-logo { height: clamp(15px, 1.5vw, 20px); width: auto; }
.nc-reg-plus {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  color: var(--text-tertiary);
}
.nc-reg-price-block { display: flex; flex-direction: column; gap: 4px; }
.nc-reg-label {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-tertiary);
}
.nc-reg-price {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  color: #9a9cab;
  letter-spacing: -0.02em;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(154, 156, 171, 0.85);
}

.nc-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  align-items: stretch;
}
.nc-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-xl) var(--space-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.nc-plan:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* Bundle: the standout. The special pilot price is the climax of the section,
   so this card lifts above its neighbours with a 2px brand border, a warm
   brand-tinted glow, and a faint top-centred wash. Badge floats above the top
   edge as a brand-blue pill. */
.nc-plan--featured {
  border: 2px solid rgba(8, 148, 255, 0.45);
  box-shadow: 0 20px 52px rgba(0, 60, 130, 0.16);
  margin-block: -16px;
  background:
    radial-gradient(ellipse at 50% -8%, rgba(8, 148, 255, 0.07), transparent 52%),
    var(--bg-surface);
}
.nc-plan--featured:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 60px rgba(0, 60, 130, 0.2);
}
.nc-plan-badge {
  position: absolute;
  top: 0;
  inset-inline-end: var(--space-lg);
  transform: translateY(-50%);
  display: inline-block;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  background: var(--primary-color);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 16px rgba(0, 113, 227, 0.32);
}

.nc-plan-head { min-height: 116px; }
.nc-plan-logo { height: 26px; width: auto; margin-bottom: var(--space-md); }
.nc-plan-bundle-title {
  display: block;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-color);
  letter-spacing: -0.02em;
}
.nc-plan-bundle-logos {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}
.nc-plan-bundle-course-logo { width: 100%; max-width: 230px; }
.nc-plan-bundle-course-logo svg { width: 100%; height: auto; }
.nc-plan-who {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
}

/* Progressive price ladder: regular (struck) -> pilot (live). The drop from a
   muted, struck reference price to the bold live price is the value reveal
   (Apple/retail anchoring); the bundle's live price is tinted brand-blue as
   the climax/best price. */
.nc-price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: var(--space-md) 0 6px;
  border-top: 1px solid var(--border-light);
  margin-top: var(--space-md);
}
/* Step 1 - the regular price, struck and muted (the anchor). */
.nc-price-was-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.nc-price-was-label {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}
.nc-price-was {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: #9a9cab;
  letter-spacing: -0.02em;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(154, 156, 171, 0.9);
}
/* Step 2 - the live pilot price (dominant). The tag is now a compact pill
   (the full explanation lives once in the pilot banner above). */
.nc-price-tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--primary-light);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--primary-color);
  margin-bottom: 4px;
}
.nc-price-now {
  font-size: clamp(34px, 4.4vw, 46px);
  font-weight: 600;
  color: var(--text-color);
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-decoration: none;
}
.nc-price--best .nc-price-now {
  color: var(--primary-color);
  font-size: clamp(38px, 4.8vw, 52px);
}
.nc-price-vat {
  font-size: 12.5px;
  color: var(--text-tertiary);
  letter-spacing: 0.01em;
  margin-top: 4px;
}
/* Saving as a pill - quiet but high perceived value. */
.nc-plan-saving {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: rgba(196, 85, 26, 0.1);
  color: var(--accent-warm);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: var(--space-sm) 0 0;
}
.nc-plan-bundle-note {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-tertiary);
  margin: 6px 0 0;
}

/* Bundle bonus block: a small sub-heading + three starred bullets that spell
   out the three exclusive bonuses inside the card itself. */
.nc-plan-bonus-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-color);
  letter-spacing: 0.01em;
  margin: var(--space-lg) 0 10px;
}
.nc-plan-bonuses { margin-top: 0; }
.nc-plan-bonuses li i { color: var(--accent-warm); }
/* Bundle stacks two include lists + a label; let them size to content and let
   the CTA's margin-top:auto handle bottom alignment (the card is intentionally
   taller than its neighbours). */
.nc-plan--featured .nc-plan-includes { flex: 0 0 auto; }

.nc-plan-includes {
  list-style: none;
  padding: 0;
  margin: var(--space-lg) 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
}
.nc-plan-includes li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-secondary);
  margin: 0;
}
.nc-plan-includes i { color: var(--primary-color); font-size: 13px; margin-top: 3px; flex: none; }

.nc-plan-divider { border: 0; border-top: 1px solid var(--border-light); margin: var(--space-lg) 0 var(--space-md); }
.nc-plan-openday {
  font-size: 13.5px;
  color: var(--text-secondary);
  margin: 0 0 var(--space-lg);
}
.nc-plan-openday strong { color: var(--text-color); font-weight: 600; }
.nc-plan-cta {
  width: 100%;
  justify-content: center;
  margin-top: auto;
}
.nc-pricing-foot {
  font-size: 13.5px;
  color: var(--text-tertiary);
  text-align: center;
  max-width: 720px;
  margin: var(--space-2xl) auto 0;
  line-height: 1.6;
}

/* ── Seats: sold out, and nearly sold out ────────────────────── */
/* Two states of the same fact, so one card in two variants: --soldout stands
   in for the whole price frame when every course of the intake has enrolment
   closed, --scarce sits inside the frame when the group is nearly full.
   Built on the .nc-pilot-banner recipe above - same frosted glass, same 2px
   top hairline, same mono kicker - in the palette's one red (--alert-*).
   The hairline here is SOLID red, never the brand gradient: the gradient is
   rare on purpose, and spending it on an alert weakens both. The text stays
   in a solid colour for the same reason: 300-400 for the kicker and the body,
   500 for the one sold-out statement (.nc-seats-note-statement below). */
.nc-seats-note {
  position: relative;
  max-width: 820px;
  margin: var(--space-2xl) auto 0;
  padding: var(--space-lg) var(--space-xl);
  border: 1px solid var(--alert-border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse at 12% 0%, var(--alert-light), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 241, 244, 0.55));
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 12px rgba(130, 0, 30, 0.05);
  overflow: hidden;
}
.nc-seats-note::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: var(--space-xl);
  width: 56px;
  height: 2px;
  background: var(--alert-color);
  border-radius: 0 0 2px 2px;
}
.nc-seats-note-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--alert-color);
  margin-bottom: 10px;
}
.nc-seats-note-text {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0;
}

/* Sold out is the heavier of the two: it is the only thing left in the pricing
   section, so it keeps the statement size of the sentence it replaced (17px)
   and its hairline runs the full width of the card rather than a 56px tick. */
.nc-seats-note--soldout {
  max-width: 680px;
  margin-top: var(--space-xl);
  padding: var(--space-xl);
}
.nc-seats-note--soldout::before {
  inset-inline-start: 0;
  width: 100%;
  border-radius: 0;
}
.nc-seats-note--soldout .nc-seats-note-text {
  font-size: 17px;
}
/* Half sold out: the same card, but a price frame follows it, so it needs the
   gap below that the frame's own top margin does not supply. The inline marks
   in its statement ride the line at the statement's own size. */
.nc-seats-note--partial {
  margin-bottom: var(--space-xl);
}
/* One or two courses left: the survivors centred at card width, rather than
   pinned to the start columns of a three-column grid with holes beside them.
   The featured bundle card's -16px block pop-out only makes sense against two
   shorter siblings, so it stands flush when it stands alone or in a pair. */
.nc-plans--single {
  grid-template-columns: minmax(0, 420px);
  justify-content: center;
}
.nc-plans--pair {
  grid-template-columns: repeat(2, minmax(0, 420px));
  justify-content: center;
}
.nc-plans--single .nc-plan--featured,
.nc-plans--pair .nc-plan--featured {
  margin-block: 0;
}
.nc-reg-cards:has(> :only-child) {
  grid-template-columns: minmax(0, 420px);
  justify-content: center;
}
.nc-reg-cards:has(> :nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 420px));
  justify-content: center;
}
/* The statement itself: the one line on the page set in the alert red at a
   display size (owner request, 2026-08-24 - "sold out" must not be missed).
   Solid colour at 500, never the brand gradient: the gradient only reads
   through light letterforms, and an alert is not where the brand mark goes. */
.nc-seats-note-statement {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--alert-color);
}
/* "Choose cohort 2 for the full details" - the same red and the same weight, so
   the two lines read as one message, a step down in size so they read as a
   claim and its consequence rather than as two shouts. */
.nc-seats-note-statement--handover {
  margin-top: 14px;
  font-size: 19px;
}
/* The hand-over to the intake still selling: the selector card's own chip,
   restated here so the reader is not sent back up the page to find it. A
   real <button>, so it is in the tab order; the pill recipe is the one above
   (.nc-cohort-tab-cta-pill), in the primary blue rather than the alert red -
   this is the way forward, not part of the warning. */
.nc-seats-note-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-md);
  padding: 9px 16px;
  border-radius: var(--radius-full);
  border: 1px solid var(--primary-color);
  background: var(--primary-color);
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.nc-seats-note-cta:hover {
  border-color: var(--primary-hover);
  background: var(--primary-hover);
}
.nc-seats-note-cta:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 3px;
}
/* The pricing title is the hand-over's focus target (tabindex -1, script
   only). A heading reached by script is a landing spot, not a control, so it
   draws no ring; the next Tab moves on to the first price card's button. */
.nc-section-title[tabindex='-1']:focus {
  outline: none;
}
/* RTL: forward is to the LEFT, so the chevron leans that way on hover. */
.nc-seats-note-cta-chevron {
  flex: 0 0 auto;
  transition: transform 0.2s ease;
}
.nc-seats-note-cta:hover .nc-seats-note-cta-chevron {
  transform: translateX(-3px);
}

/* Nearly full is the lighter one: it sits between the price cards and the
   pricing banner, so it reads as a strip rather than as a statement. */
.nc-seats-note--scarce {
  padding: var(--space-md) var(--space-xl);
}
/* Both frosted cards are often on screen together. Without this the scarcity
   strip's own bottom gap and the banner's --space-2xl top margin stack into a
   hole twice the size of every other gap inside the frame. */
.nc-seats-note--scarce + .nc-pilot-banner {
  margin-top: var(--space-lg);
}

/* ── Bonuses ─────────────────────────────────────────────────── */
.nc-bonus-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.nc-bonus-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-lg);
  box-shadow: var(--shadow-sm);
}
.nc-bonus-icon { font-size: 30px; color: var(--primary-color); margin-bottom: var(--space-md); }
.nc-bonus-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 10px;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.nc-bonus-desc { font-size: 14.5px; line-height: 1.65; color: var(--text-secondary); margin: 0; }

/* ── Section head (mascot crowning the title) ─────────────────────
   One motif for every titled section on this page, top to bottom:

       pose
       ────        <- brand hairline, the ledge the pose stands on
       EYEBROW
       Title

   The pose is the first child in the DOM and the stack is a column, so visual
   order and reading order agree with no `order:` trickery and the hairline sits
   immediately under the artwork rather than floating between two blocks of
   type. The crown is a fixed-width column of its own so the hairline can centre
   under the pose while the whole group stays pinned to the RTL reading start -
   /next is start-aligned, unlike the centred LP headers.

   Every pose is drawn inside a square 240-unit box with transparent space below
   the lowest stroke, and the amount differs per pose, so a single hard-coded
   overlap would bury the line in one pose's artwork and strand it under
   another's. `--nc-pose-floor` is where that lowest stroke actually sits, read
   off the shipped SVGs with getBBox() - measured, never guessed - and the rule
   pulls the transparent tail back out so the line always lands the same 8px
   under the character's feet at every box size. */
.nc-sechead {
  --nc-crown: 150px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-block-end: var(--space-lg);
}
.nc-sechead-crown,
.nc-hero-crown {
  /* 202 of 240 - where every bust pose on this page bottoms out... */
  --nc-pose-floor: 0.842;
  display: flex;
  flex-direction: column;
  align-items: center;
  inline-size: var(--nc-crown-box);
  margin-block-end: var(--space-lg);
}
/* ...except the typing pose, whose laptop runs down to 230. Without this the
   hairline would land inside the laptop and read as part of the drawing. */
.nc-sechead-crown--tight {
  --nc-pose-floor: 0.958;
}
.nc-sechead-crown {
  --nc-crown-box: var(--nc-crown);
}
.nc-sechead-mascot,
.nc-hero-mascot {
  inline-size: 100%;
}
.nc-sechead-crown .brand-hairline,
.nc-hero-crown .brand-hairline,
.nc-openday-crown .brand-hairline {
  inline-size: 96px;
  margin: 0;
}
.nc-sechead-crown .brand-hairline,
.nc-hero-crown .brand-hairline {
  margin-block-start: calc(var(--nc-crown-box) * (var(--nc-pose-floor) - 1) + 8px);
}
.nc-sechead-text {
  inline-size: 100%;
  min-inline-size: 0;
}
.nc-sechead .nc-section-title {
  margin-bottom: 0;
}

/* The hero wears the same crown, one size down: its copy column is the
   narrowest on the page (460px at 1440) and the H1 already wraps to three lines
   there, so the pose stays smaller than the section heads below it. The
   terminal watermark sits behind this corner, the way the /lp hero layers. */
.nc-hero-crown {
  --nc-crown-box: 135px;
}

/* ── Mascot ──────────────────────────────────────────────────────
   The 10x robot on /next. Artwork is inlined VERBATIM from
   branding/mascot/svg/ - never redraw, recolor, mirror, thicken strokes or
   distort - and each pose appears at most once on the page, so its gradient id
   stays unique. Every wrapper is a fixed square box (zero CLS) and the bust
   never renders below the 96px brand floor at any breakpoint. The wrappers are
   decorative and carry aria-hidden: the SVGs ship an English aria-label that
   must not reach a Hebrew screen-reader run. No motion here by design - /next
   is an information page and every pose reads static. */
.nc-mascot {
  aspect-ratio: 1 / 1;
  flex: none;
  pointer-events: none;
  user-select: none;
}
.nc-mascot svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

/* ── Responsive: 1024 (tablet) ───────────────────────────────── */
@media (max-width: 1024px) {
  .nc-section { padding: var(--space-2xl) var(--space-lg); }
  .nc-hero { padding: var(--space-2xl) var(--space-lg); }
  .nc-hero-inner { grid-template-columns: 1fr; gap: var(--space-xl); }
  .nc-hero-figure { order: -1; }
  .nc-hero-img { min-height: 340px; max-height: 460px; }
  .nc-price-frame { padding: var(--space-xl) var(--space-lg); }
  .nc-plan--featured { margin-block: 0; }
  /* Narrow 3-col regular row: shrink the bundle's two logos so they stay on one
     line. Below ~900px even 16px is too wide for a third of the frame, so the
     lockup is allowed to wrap onto a second line rather than push the card out
     of the frame - the cards are 150px tall and have the room. */
  .nc-reg-bundle-logo { height: 16px; }
  .nc-reg-bundle-logos { gap: 6px; flex-wrap: wrap; }
  .nc-reg-plus { font-size: 13px; }
  .nc-sechead { --nc-crown: 140px; }
  .nc-hero-crown { --nc-crown-box: 125px; }
}

/* ── Responsive: 767 (mobile) ────────────────────────────────── */
@media (max-width: 767px) {
  .nc-section { padding: var(--space-2xl) var(--space-md); }
  .nc-hero { padding: var(--space-xl) var(--space-md) var(--space-2xl); }
  .nc-hero-img { min-height: 260px; max-height: 360px; }
  .nc-hero-facts { grid-template-columns: 1fr; }
  .nc-cohort-picker { margin-top: var(--space-xl); }
  .nc-cohort-tabs { flex-direction: column; padding: 6px; gap: 6px; }
  /* `flex: 0 0 auto` is load-bearing: in the column tray the desktop
     `flex: 1 1 0` makes the HEIGHT basis zero, and with no free space to grow
     into every card collapses to its 44px minimum with the text spilling out. */
  .nc-cohort-tab { flex: 0 0 auto; min-height: 44px; padding: 18px 18px 18px; gap: 5px; }
  .nc-cohort-tab-opening,
  .nc-cohort-tab-days,
  .nc-cohort-tab-split { font-size: 16px; }
  .nc-cohort-tab-current { top: 12px; inset-inline-end: 12px; font-size: 0.8rem; }
  .nc-cohort-tab-badge { font-size: 12.5px; }
  .nc-cohort-tab.is-active::after { inset-inline-start: 18px; inset-block-end: 8px; }
  .nc-cohort-picker-prompt { font-size: 1.05rem; }
  /* Phones get the loudest version of the affordance: the chip becomes a
     full-width bar at the foot of the row, 44px tall, with the chevron pushed
     to the inline-end - the shape a thumb already knows is pressable. There is
     no hover here to reveal anything, so the resting state has to say it all.
     `margin-block-start: auto` has nothing to distribute in a content-height
     column, so the padding above is what holds the gap. */
  .nc-cohort-tab-cta { padding-block-start: 14px; }
  .nc-cohort-tab-cta-pill {
    width: 100%;
    justify-content: space-between;
    min-height: 44px;
    padding: 12px 16px;
    font-size: 15px;
  }
  .nc-hero-actions { flex-direction: column; align-items: stretch; }
  .nc-hero-actions .nc-btn-primary,
  .nc-hero-actions .nc-btn-secondary { justify-content: center; }
  .nc-schedule-grid { grid-template-columns: 1fr; }
  .nc-price-frame { padding: var(--space-lg) var(--space-md); }
  .nc-reg-cards { grid-template-columns: 1fr; }
  /* The :has() variants above outrank this bare class on specificity, so the
     phone stack has to name them back to one column itself. (.nc-plans--single
     and --pair lose the tie to the later .nc-plans rule below and need no
     mirror here.) */
  .nc-reg-cards:has(> :only-child),
  .nc-reg-cards:has(> :nth-child(2):last-child) { grid-template-columns: 1fr; }
  /* min-width: 0 is load-bearing. The bundle card's two-logo lockup has a wide
     min-content width, and a `1fr` grid item refuses to shrink below it - so on
     phones narrower than ~390px the column blew out and ALL THREE cards hung
     past the frame's inline-end padding. */
  .nc-reg-card { min-height: 0; min-width: 0; padding: var(--space-lg); }
  /* Full-width single column on mobile, so the lockup grows back towards its
     full 20px - but only as far as the card actually has room for, which on a
     360px phone is about three quarters of that. */
  .nc-reg-bundle-logo { height: clamp(14px, 4.2vw, 20px); }
  .nc-reg-bundle-logos { gap: clamp(5px, 2vw, 10px); }
  .nc-reg-plus { font-size: clamp(12px, 3.4vw, 16px); }
  .nc-plans { grid-template-columns: 1fr; }
  .nc-pilot-banner { padding: var(--space-md) var(--space-lg); }
  .nc-pilot-banner::before { inset-inline-start: var(--space-lg); }
  /* Only --scarce follows the banner's inset here: --soldout's hairline is a
     full-width edge, and a shared `.nc-seats-note::before` override later in
     the file would win on equal specificity and cut it back to a tick. */
  .nc-seats-note { padding: var(--space-md) var(--space-lg); }
  .nc-seats-note--scarce::before { inset-inline-start: var(--space-lg); }
  .nc-seats-note--soldout { padding: var(--space-lg); }
  .nc-seats-note--soldout .nc-seats-note-text { font-size: 16px; }
  .nc-seats-note-statement { font-size: 20px; }
  .nc-seats-note-statement--handover { font-size: 16.5px; }
  .nc-cohort-tab-note-line { font-size: 15px; }
  /* The same 44px bar the selector chip becomes on a phone: it is the card's
     only control, so it is the actual touch target. */
  .nc-seats-note-cta {
    width: 100%;
    justify-content: space-between;
    min-height: 44px;
    padding: 12px 16px;
    font-size: 15px;
  }
  .nc-plan-head { min-height: 0; }
  .nc-bonus-grid { grid-template-columns: 1fr; }
  /* The crown is already a column, so nothing restacks here - only the boxes
     shrink. These are the smallest poses on the page and both clear the 96px
     brand floor, so the bust never renders under it at any breakpoint. The
     hairline drops to the 72px it uses site-wide on phones. */
  .nc-sechead { --nc-crown: 130px; }
  .nc-hero-crown { --nc-crown-box: 120px; }
  .nc-sechead-crown .brand-hairline,
  .nc-hero-crown .brand-hairline,
  .nc-openday-crown .brand-hairline { inline-size: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .nc-plan,
  .nc-cohort-tab,
  .nc-cohort-tab-cta-pill,
  .nc-cohort-tab-cta-chevron,
  .nc-seats-note-cta,
  .nc-seats-note-cta-chevron,
  .nc-btn-primary { transition: none; }
  .nc-cohort-tab:hover { transform: none; }
  .nc-cohort-tab:hover .nc-cohort-tab-cta-chevron,
  .nc-seats-note-cta:hover .nc-seats-note-cta-chevron { transform: none; }
  /* The two attention nudges are decoration; the chip and the arrow still say
     what they mean standing still. */
  .nc-cohort-picker--choose .nc-cohort-tab:not(:hover) .nc-cohort-tab-cta-chevron,
  .nc-cohort-picker-prompt-arrow { animation: none; }
}

/* ── Watermarks ──────────────────────────────────────────────────
   Three faint brand marks, one per host section. /next is RTL and
   start-aligned, so each section has one genuinely free pocket and no two
   marks share one. Each host owns its own stacking context and clips its
   mark; the section's real content is lifted to z-index 1 so nothing ever
   paints over text. `overflow: clip`, never `hidden` - `hidden` would turn a
   section into a scroll container and #nc-sessions is a deep-link scroll
   target. All three are static; nothing to gate under prefers-reduced-motion.
   Never raise the opacities to "make it visible" - make the mark bigger. */

/* 1. Terminal-prompt mark - hero. Re-anchors the global watermark class
      (logo-10x-terminal.css) the way .lp-hero does; transform: none so the
      insets below are exact. Hidden <=1024px: the hero stacks there and the
      opaque venue photo owns the whole top corner. */
.nc-hero {
  position: relative;
  overflow: clip;
  isolation: isolate;
}
.nc-hero-inner,
.nc-hero-facts {
  position: relative;
  z-index: 1;
}
.nc-hero .nc-hero-watermark {
  display: none;
}
@media (min-width: 1025px) {
  .nc-hero .nc-hero-watermark {
    display: block;
    top: calc(var(--space-2xl) * -1);
    inset-inline-start: calc(var(--space-2xl) * -1);
    width: min(34vw, 460px);
    opacity: 0.07;
    transform: none;
  }
}

/* 2. Hairline "10x" mark - pricing header band, above the opaque price frame.
      Ultralight on purpose: the brand gradient is forbidden on weight 500+ and
      reads best through hairline strokes at this size. */
.nc-pricing {
  position: relative;
  overflow: clip;
  isolation: isolate;
}
.nc-pricing > .nc-section-inner {
  position: relative;
  z-index: 1;
}
/* Sits fully inside the band, never bled off the edge: it is a wordmark, and a
   clipped "10x" reads as a rendering bug rather than as a watermark. */
.nc-wm-mark {
  position: absolute;
  z-index: 0;
  top: var(--space-md);
  inset-inline-end: var(--space-lg);
  inline-size: min(26vw, 340px);
  opacity: 0.075;
  pointer-events: none;
  user-select: none;
}
.nc-wm-mark .logo-10x-mark,
.nc-wm-mark .logo-10x-mark svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
}
@media (max-width: 1024px) {
  .nc-wm-mark {
    inset-inline-end: var(--space-md);
    inline-size: min(34vw, 280px);
    opacity: 0.06;
  }
}
@media (max-width: 767px) {
  /* Almost no lateral whitespace left on a phone - the mark drops behind the
     eyebrow at the quietest of the three opacities. */
  .nc-wm-mark {
    inset-inline-end: var(--space-xs);
    inline-size: min(52vw, 210px);
    opacity: 0.05;
  }
}

/* 3. Full-body mascot - bonuses header band. Anchored to the RTL inline-end
      (physical left), which the 760px-capped lead never reaches, and above the
      opaque bonus cards. Desktop only, like .lp-hero__rocket. */
.nc-bonuses {
  position: relative;
  overflow: clip;
  isolation: isolate;
}
.nc-bonuses > .nc-section-inner {
  position: relative;
  z-index: 1;
}
.nc-wm-mascot {
  display: none;
}
@media (min-width: 1025px) {
  /* Sized and offset so the WHOLE body clears the opaque bonus-card grid below:
     a full-body pose cropped at the waist by a card edge reads as a mistake. */
  .nc-wm-mascot {
    display: block;
    position: absolute;
    z-index: 0;
    top: var(--space-sm);
    inset-inline-end: var(--space-xl);
    inline-size: min(20vw, 268px);
    aspect-ratio: 1 / 1;
    opacity: 0.1;
    pointer-events: none;
    user-select: none;
  }
  .nc-wm-mascot svg {
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }
}

/* ── Open-day crown (peeking pose on the brand hairline) ─────────
   NOT a watermark: this is in-flow furniture inside the open-day widget, above
   its eyebrow - the same pose-over-hairline motif the section heads wear, and
   the reason this markup is passed in through the widget's `crown` slot rather
   than living in the shared component. Centred, not start-pinned: the widget
   below it is centre-aligned, so a start-pinned pose would be the only off-axis
   object in that band. Reads at all three widths.

   peeking-bust-light draws its own ledge at y=162 of a 240 viewBox, i.e. 0.325
   up from the bottom of its box, so the box is pulled DOWN over the hairline by
   that same fraction to land the drawn ledge on the real line. */
.nc-openday-crown {
  --nc-peek-size: 115px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-block-end: var(--space-lg);
}
.nc-openday-peek {
  inline-size: var(--nc-peek-size);
  block-size: var(--nc-peek-size);
  margin-block-end: calc(var(--nc-peek-size) * -0.325 - 1px);
  pointer-events: none;
  user-select: none;
}
.nc-openday-peek svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
@media (max-width: 767px) {
  .nc-openday-crown { --nc-peek-size: 100px; }
}

/* Printed schedules and price sheets carry no decoration. */
@media print {
  .nc-mascot,
  .nc-wm-mark,
  .nc-wm-mascot,
  .nc-hero-watermark {
    display: none;
  }
}

/* ── Teaser (Home, /course, /location) ───────────────────────────
   Slim, centered "next cohort" card - dates + format only (location lives in
   LocationTeaser now). A narrow centered column (Apple announcement rhythm);
   the opening date is live (fetched from /api/cohorts/next, static fallback). */
.nc-teaser { padding: var(--space-2xl) var(--space-xl); }
.nc-teaser-inner { max-width: 760px; margin: 0 auto; }

.nc-teaser-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.nc-teaser-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-color);
  margin-bottom: var(--space-md);
  font-weight: 500;
}
.nc-teaser-heading {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.03em;
  color: var(--text-color);
  margin-bottom: var(--space-md);
}
.nc-teaser-lead {
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 620px;
  margin: 0 0 var(--space-xl);
}
.nc-teaser-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}
.nc-teaser-fact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 200px;
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.nc-teaser-fact-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-tertiary);
}
.nc-teaser-fact-label i { color: var(--primary-color); font-size: 13px; }
.nc-teaser-fact-value { font-size: 16px; font-weight: 600; color: var(--text-color); letter-spacing: -0.02em; }
.nc-teaser-note {
  font-size: 12.5px;
  color: var(--text-tertiary);
  margin: 0 0 var(--space-xl);
}
.nc-teaser-footer { display: flex; align-items: center; gap: var(--space-lg); }
.nc-teaser-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  background: var(--accent-warm);
  color: #fff;
  border-radius: var(--radius-full);
  font-size: 15.5px;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(123, 50, 14, 0.1), 0 4px 14px rgba(196, 85, 26, 0.18);
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.nc-teaser-cta:hover {
  background: var(--accent-warm-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(123, 50, 14, 0.14), 0 8px 22px rgba(196, 85, 26, 0.28);
}
.nc-teaser-cta svg { flex: none; }

/* Compact variant: tighter vertical rhythm for the stacked main-page pair. */
.nc-teaser--compact { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }

/* Mobile: full-width facts + CTA. */
@media (max-width: 767px) {
  .nc-teaser { padding: var(--space-xl) var(--space-md); }
  .nc-teaser-facts { flex-direction: column; align-items: stretch; width: 100%; }
  .nc-teaser-fact { min-width: 0; }
  .nc-teaser-footer { width: 100%; }
  .nc-teaser-cta { width: 100%; justify-content: center; }
}