/* ── /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);
}
.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 24px;
  border-radius: 12px;
  border: 1.5px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-body);
  text-align: start;
  cursor: pointer;
  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: rgba(255, 255, 255, 0.75);
  color: var(--text-color);
  transform: translateY(-1px);
}
.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);
}
/* 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);
}
.nc-cohort-tab-badge--closed {
  color: var(--text-secondary);
  background: rgba(90, 91, 106, 0.08);
}
/* 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: a stronger hover lift, since choosing is the band's one job. */
.nc-cohort-picker--choose .nc-cohort-tab:hover {
  background: var(--bg-surface);
  box-shadow: 0 6px 18px rgba(0, 60, 130, 0.09);
  transform: translateY(-2px);
}
.nc-cohort-picker-prompt {
  margin: var(--space-md) auto 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--primary-color);
}
/* 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); }
.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;
}

/* Stands in for the whole price frame when every course of the intake has
   enrolment closed. Sized as a statement rather than a footnote - it is the
   only thing in this section then, and it has to read as deliberate rather
   than as a page that failed to load. */
.nc-pricing-closed {
  font-size: 17px;
  font-weight: 300;
  color: var(--text-secondary);
  text-align: center;
  max-width: 640px;
  margin: var(--space-xl) auto 0;
  line-height: 1.7;
}

/* ── 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 22px; 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; }
  .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; }
  /* 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); }
  .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-btn-primary { transition: none; }
  .nc-cohort-tab:hover { transform: 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; }
}