/* ─────────────────────────────────────────
   TRAINING PAGE — EEST NJT Racing Circuit
   Extracted & enhanced training styles
───────────────────────────────────────── */

/* ═══════════════════════════════════════
   1. HERO — CINEMATIC PARALLAX
═══════════════════════════════════════ */
.njt-hero-parallax {
  position: relative;
  min-height: max(720px, 90vh);   /* A14: was `height: 90vh` — hero must be able to grow */
  display: flex;
  align-items: safe center;   /* A14: `safe` — when the content is taller than the hero box, plain `center` overflows the PADDING edge in BOTH directions and puts the breadcrumb under the fixed header. `safe` falls back to start-alignment in exactly that case and never overflows the top. */
  justify-content: center;
  overflow: hidden;
  background: var(--racing-plum, #2A0018);
  margin-top: calc(var(--header-h, 80px) * -1);
  padding-top: var(--hero-pad-top);
  /* A14 — the arithmetic, because it is not obvious. The hero is pulled up by
     `margin-top: -var(--header-h)` so its artwork runs behind the fixed header, so
     content starts at (padding-top − header-h) from the VIEWPORT top, not from the
     section top. A `padding-top: var(--header-h)` therefore puts content at y=0 —
     directly under the header — which is why the breadcrumb was unclickable
     (`elementFromPoint` returned `.site-header__inner`). It has to be header-h TWICE
     plus the gap: once to cancel the negative margin, once to clear the header. */
}
.njt-hero-parallax__bg,
.njt-hero-parallax__video {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  object-fit: cover;
  z-index: 0;
}
.njt-hero-parallax__video {
  animation: slowPan 35s infinite alternate linear;
}
.njt-hero-parallax__fallback {
  position: absolute;
  inset: -10%;
  background-image: url('../assets/01-hero/HERO-004_kids-mini-gp-racing-action.jpg');
  background-size: cover;
  background-position: center;
  filter: contrast(1.1) saturate(1.2);
  opacity: 0.6;
  animation: slowPan 35s infinite alternate linear;
  z-index: 0;
}
.njt-hero-parallax__overlay {
  position: absolute;
  inset: 0;
  /* Plum-tinted, left-biased for the left-anchored title block (sub-page hero contract) */
  background:
    linear-gradient(90deg, rgba(42,0,24,0.88) 0%, rgba(42,0,24,0.5) 45%, rgba(42,0,24,0.22) 100%),
    linear-gradient(180deg, rgba(42,0,24,0.25) 0%, rgba(42,0,24,0.8) 100%);
  z-index: 1;
}
.njt-hero-parallax__content {
  position: relative;
  z-index: 2;
  text-align: left;
  width: 100%;
}
.njt-hero-parallax__eyebrow { margin-bottom: 16px; }
.njt-hero-parallax__title {
  font-family: var(--font-display, 'Prompt', sans-serif);
  font-style: italic;
  font-size: var(--text-display-xl);   /* A5 / CONVENTIONS #19 — was clamp(3.5rem, 6vw, 5.5rem) */
  font-weight: 900;
  color: #fff;
  /* line-height deleted (A30) — components.css §38a governs this h1. */
  margin-bottom: 1.25rem;
  max-width: 18ch;
  text-shadow: 0 10px 40px rgba(0,0,0,0.6), 0 2px 10px rgba(255,215,0,0.2);
  letter-spacing: -0.02em;
}
.njt-hero-parallax__subtitle {
  font-family: var(--font-body, 'Bai Jamjuree', sans-serif);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: rgba(255,255,255,0.85);
  font-weight: 400;
  line-height: 1.6;
  max-width: 620px;
  margin: 0 0 2.5rem;
}
.njt-hero-parallax__actions {
  display: flex;
  gap: 1.25rem;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
/* Scroll cue — promoted from inline markup to a class */
.njt-hero-scroll-cue {
  position: absolute;
  bottom: 1.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255,255,255,0.75);
  font-family: var(--font-heading, 'Prompt', sans-serif);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  animation: bounce 2s infinite;
  transition: color var(--transition);
}
.njt-hero-scroll-cue:hover { color: var(--racing-yellow, #FFD700); }
@keyframes slowPan {
  0%   { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.08) translate(-1.5%, 1.5%); }
}

/* Particles */
.njt-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.njt-particle {
  position: absolute;
  bottom: -10px;
  width: 4px;
  height: 4px;
  background: rgba(255, 215, 0, 0.6);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.4);
  animation: floatUp linear infinite;
}
@keyframes floatUp {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-100vh) scale(0.5); opacity: 0; }
}


/* ═══════════════════════════════════════
   2. TRAINING PHILOSOPHY — BENTO GRID
═══════════════════════════════════════ */
.njt-philosophy-premium {
  position: relative;
  padding: var(--section-pad, 80px) 0;
  background: var(--racing-plum, #2A0018);
  overflow: hidden;
}
.njt-philosophy-premium::before {
  content: '';
  position: absolute;
  top: -20%;
  left: 20%;
  width: 600px;
  height: 600px;
  background: rgba(212, 0, 121, 0.08);
  filter: blur(150px);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}
.njt-philosophy-premium::after {
  content: '';
  position: absolute;
  bottom: -10%;
  right: -10%;
  width: 700px;
  height: 700px;
  background: rgba(255, 215, 0, 0.05);
  filter: blur(120px);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}
.njt-philosophy-premium__container {
  position: relative;
  z-index: 10;
  max-width: var(--max-w, 1400px);
  margin: 0 auto;
  padding: 0 2rem;
}

/* Section header/overline/title now come from the CANONICAL system (components.css §SectionHeader).
   Local overline/title dialects RETIRED (GOAL-V3 §G1 de-fork); markup uses
   .njt-section__overline--lines + .njt-section__title--display. Only the description
   helper is kept (canonical has no __desc). */
.njt-section__desc {
  font-family: var(--font-body, 'Bai Jamjuree', sans-serif);
  color: rgba(255,255,255,0.8);
  line-height: 1.7;
  font-size: 1.1rem;
  max-width: 800px;
  margin: 1rem auto 0;
}
.njt-section__header--left .njt-section__desc { margin-left: 0; }

/* Bento Cards */
.njt-bento-premium {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
  margin-top: 4rem;
}
.njt-bento-premium__card {
  position: relative;
  border-radius: var(--radius-lg, 16px);
  background: linear-gradient(135deg, rgba(20,20,20,0.8) 0%, rgba(42,0,24,0.4) 50%, rgba(10,10,10,0.9) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transform: translateZ(0);
  overflow: hidden;
}
.njt-bento-premium__card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,215,0,0.5), transparent);
  opacity: 0;
  transition: opacity 400ms ease;
}
.njt-bento-premium__card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,215,0,0.05), transparent);
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}
/* No `background` shorthand here. The photo cards set their scrim+image inline, and
   the shorthand reset background-size/position back to auto / 0% 0% on hover, which
   made the photo jump to natural size and tile from the corner. Lift and glow only. */
.njt-bento-premium__card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 215, 0, 0.3);
  box-shadow: 0 25px 50px -12px rgba(255,215,0,0.15), 0 0 40px rgba(255,215,0,0.05);
}
.njt-bento-premium__card:hover::before,
.njt-bento-premium__card:hover::after {
  opacity: 1;
}
/* Photo-backed card — bottom-anchored scrim lets the archive photo carry the card (§1.2).
   The gradient+image is set inline in the HTML (background-image) so the url() resolves
   against the document, not this stylesheet. */
.njt-bento-premium__card--photo {
  justify-content: flex-end;
  min-height: 300px;
  background-size: cover;
  background-position: center;
}
.njt-bento-premium__card--photo .njt-bento-title { text-shadow: 0 4px 10px rgba(0,0,0,0.8); }
.njt-bento-premium__card--photo .njt-bento-desc { color: rgba(255,255,255,0.85); text-shadow: 0 2px 4px rgba(0,0,0,0.85); }
.njt-bento-icon-wrapper {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md, 12px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--racing-yellow, #FFD700);
  transition: all 400ms ease;
}
.njt-bento-premium__card:hover .njt-bento-icon-wrapper {
  background: rgba(255, 215, 0, 0.1);
  border-color: rgba(255, 215, 0, 0.4);
  transform: scale(1.05) rotate(3deg);
  box-shadow: 0 0 20px rgba(255,215,0,0.2);
}
.njt-bento-title {
  font-family: var(--font-heading, 'Prompt', sans-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: -0.01em;
}
.njt-bento-desc {
  font-family: var(--font-body, 'Bai Jamjuree', sans-serif);
  font-size: 0.95rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.7;
  margin: 0;
}
.njt-bento-premium__card.span-4  { grid-column: span 4; }
.njt-bento-premium__card.span-5  { grid-column: span 5; }
.njt-bento-premium__card.span-6  { grid-column: span 6; }
.njt-bento-premium__card.span-7  { grid-column: span 7; }
.njt-bento-premium__card.span-8  { grid-column: span 8; }
.njt-bento-premium__card.span-12 { grid-column: span 12; }

@media (max-width: 992px) {
  .njt-bento-premium__card.span-4,
  .njt-bento-premium__card.span-5,
  .njt-bento-premium__card.span-6,
  .njt-bento-premium__card.span-7,
  .njt-bento-premium__card.span-8 {
    grid-column: span 12;
  }
}


/* ═══════════════════════════════════════
/* ═══════════════════════════════════════
   3. DEVELOPMENT PATHWAY — canonical .njt-journey overrides (R3 migration)
   Base lives in components.css §39. Page deltas only: 5-node track, photo
   icons, accent/flagship terminal, under-construction badge, notes.
═══════════════════════════════════════ */
.njt-journey--pathway .njt-journey__track--5 { grid-template-columns: repeat(5, 1fr); }
.njt-journey--pathway .njt-journey__track--5::before { left: 10%; right: 10%; }
.njt-journey--pathway .njt-journey__icon {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.njt-journey--pathway .njt-journey__node { text-decoration: none; display: block; }
.njt-journey__node--accent .njt-journey__icon,
.njt-journey__node--flagship .njt-journey__icon {
  border-color: var(--magenta, #D40079);
  box-shadow: 0 0 28px rgba(212,0,121,0.35);
}
.njt-journey__node--flagship .njt-journey__name,
.njt-journey__node--flagship .njt-journey__step { color: var(--gold, #FFD700); }
.njt-journey__node--flagship:hover .njt-journey__icon {
  border-color: var(--magenta-300);
  box-shadow: 0 0 36px rgba(212,0,121,0.5);
}
.njt-journey__uc {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px;
  font-family: var(--font-heading, 'Prompt', sans-serif);
  font-size: var(--text-micro, 0.65rem);
  font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--magenta-300);
}
.njt-journey__uc svg { width: 13px; height: 13px; }
.njt-pathway-note {
  text-align: center;
  color: var(--text-white-60, rgba(255,255,255,0.6));
  font-size: 0.85rem;
  font-family: var(--font-body, 'Bai Jamjuree', sans-serif);
  max-width: 760px; margin: 0 auto;
}
.njt-pathway-note--foot { margin-top: 3rem; }
@media (max-width: 991px) {
  .njt-journey--pathway .njt-journey__track--5 { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
  .njt-journey--pathway .njt-journey__track--5::before { display: none; }
}
@media (max-width: 576px) {
  .njt-journey--pathway .njt-journey__track--5 { grid-template-columns: 1fr; gap: 32px; }
}


/* ═══════════════════════════════════════
   4. WHAT TO EXPECT — FIRST VISIT TIMELINE
═══════════════════════════════════════ */
.njt-expect {
  position: relative;
  padding: var(--section-pad, 80px) 0;
  background: var(--racing-plum, #2A0018);
  overflow: hidden;
  color: #fff;
}
.njt-expect__container {
  position: relative;
  z-index: 10;
  max-width: var(--max-w, 1400px);
  margin: 0 auto;
  padding: 0 2rem;
}
.njt-expect-timeline {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  margin-top: 4rem;
  position: relative;
}
/* Connector line */
.njt-expect-timeline::before {
  content: '';
  position: absolute;
  top: 32px;
  left: calc(100% / 12 + 32px);
  right: calc(100% / 12 + 32px);
  height: 3px;
  background: linear-gradient(90deg, var(--racing-yellow, #FFD700), rgba(212,0,121,0.5), var(--racing-yellow, #FFD700));
  opacity: 0.5;
  z-index: 0;
}
.njt-expect-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
}
.njt-expect-step__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  /* Opaque base under the tint: the connector line runs edge-to-edge behind the row,
     and a translucent disc let it read straight through each circle. */
  background-color: var(--racing-plum, #2A0018);
  background-image: linear-gradient(135deg, rgba(255,215,0,0.2) 0%, rgba(212,0,121,0.2) 100%);
  border: 3px solid rgba(255,215,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--racing-yellow, #FFD700);
  font-size: 1.5rem;
  transition: all 400ms ease;
  box-shadow: 0 0 24px rgba(255,215,0,0.15), inset 0 0 14px rgba(255,215,0,0.06);
  flex-shrink: 0;
}
.njt-expect-step:hover .njt-expect-step__icon {
  background-image: linear-gradient(135deg, rgba(255,215,0,0.35) 0%, rgba(212,0,121,0.3) 100%);
  border-color: var(--racing-yellow, #FFD700);
  transform: scale(1.1);
  box-shadow: 0 0 32px rgba(255,215,0,0.35), inset 0 0 18px rgba(255,215,0,0.1);
}
.njt-expect-step__number {
  font-family: var(--font-heading, 'Prompt', sans-serif);
  font-size: 0.75rem;
  color: var(--racing-yellow, #FFD700);
  letter-spacing: 0.14em;
  font-weight: 700;
}
.njt-expect-step__title {
  font-family: var(--font-heading, 'Prompt', sans-serif);
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
}
.njt-expect-step__desc {
  font-family: var(--font-body, 'Bai Jamjuree', sans-serif);
  font-size: 0.875rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
}

@media (max-width: 992px) {
  .njt-expect-timeline {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem 1.5rem;
  }
  .njt-expect-timeline::before { display: none; }
}
@media (max-width: 576px) {
  .njt-expect-timeline {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ═══════════════════════════════════════
   5. COURSE CATALOG — PREMIUM GRID
═══════════════════════════════════════ */
.njt-courses-premium {
  position: relative;
  padding: var(--section-pad, 80px) 0;
  background: var(--racing-plum, #2A0018);
  overflow: hidden;
  color: #fff;
}
.njt-courses-premium__bg {
  position: absolute;
  inset: 0;
  background-image: url('../assets/07-training/2025_07_24_honda_521661279_770098429318810_1847598212484776283_n.jpg');
  background-size: cover;
  background-position: center;
  mix-blend-mode: luminosity;
  opacity: 0.08;
  z-index: 0;
}
.njt-courses-premium__grid-overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,215,0,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,215,0,0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  z-index: 1;
}
.njt-courses-premium__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--racing-plum, #2A0018) 0%, rgba(42,0,24,0.6) 50%, var(--racing-plum, #2A0018) 100%);
  z-index: 2;
}
.njt-courses-premium__glow {
  position: absolute;
  bottom: 20%;
  right: 10%;
  width: 600px;
  height: 600px;
  background: rgba(255, 215, 0, 0.08);
  filter: blur(150px);
  transform: translate(50%, 50%);
  z-index: 3;
  pointer-events: none;
}
.njt-courses-premium__container {
  position: relative;
  z-index: 10;
  max-width: var(--max-w, 1400px);
  margin: 0 auto;
  padding: 0 2rem;
}

/* Quick Comparison Table */
.njt-comparison-table-wrap {
  margin-top: 3rem;
  margin-bottom: 4rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.njt-comparison-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-body, 'Bai Jamjuree', sans-serif);
  font-size: 0.9rem;
  min-width: 600px;
}
.njt-comparison-table thead th {
  font-family: var(--font-heading, 'Prompt', sans-serif);
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
  padding: 1rem 1.25rem;
  text-align: center;
  /* Confident header bar — dark magenta-tint fill (white text stays AA) with a
     magenta→gold gradient underline (§1.5) */
  background: linear-gradient(180deg, rgba(212,0,121,0.32) 0%, rgba(212,0,121,0.12) 100%);
  border-style: solid;
  border-width: 0 0 3px;
  border-image: linear-gradient(90deg, var(--magenta, #D40079), var(--gold, #FFD700)) 1;
}
.njt-comparison-table thead th:first-child {
  text-align: left;
}
.njt-comparison-table thead th.njt-comparison-table__highlight {
  position: relative;
  background: linear-gradient(180deg, rgba(212,0,121,0.5) 0%, rgba(212,0,121,0.22) 100%);
}
.njt-comparison-table tbody td {
  padding: 0.75rem 1.25rem;
  text-align: center;
  color: rgba(255,255,255,0.8);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.njt-comparison-table tbody td:first-child {
  text-align: left;
  color: rgba(255,255,255,0.6);
  font-size: 0.85rem;
}
.njt-comparison-table tbody td.njt-comparison-table__highlight {
  background: rgba(212,0,121,0.08);
}
/* Single price footnote row (§1.5) */
.njt-comparison-table tfoot .njt-comparison-table__foot {
  padding: 0.9rem 1.25rem;
  text-align: center;
  font-family: var(--font-heading, 'Prompt', sans-serif);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gold, #FFD700);
  background: rgba(212,0,121,0.06);
  border-top: 2px solid rgba(212,0,121,0.35);
  border-radius: 0 0 var(--radius, 8px) var(--radius, 8px);
}
.njt-comparison-table .njt-check { color: var(--racing-yellow, #FFD700); }
.njt-comparison-table .njt-cross { color: rgba(255,255,255,0.25); }

/* Course Cards
   ──────────────────────────────────────────────────────────────────────────
   The cards share five rows — image · title · target · specs · footer — through
   subgrid, so the spec panels, divider rules, rate lines and CTAs land on common
   baselines. Card 1's title wraps to two lines and card 4 carries a three-line
   inclusion note; before this, those differences pushed each card's divider up to
   39px out of step and left ~60px of dead space inside the shorter spec panels. */
.njt-courses-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto auto auto auto;
  gap: 1.5rem;
  margin-top: 4rem;
}
@media (max-width: 1200px) {
  .njt-courses-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .njt-courses-grid { grid-template-columns: 1fr; }
}

.njt-course-card {
  position: relative;
  background: linear-gradient(135deg, rgba(20,20,20,0.95) 0%, rgba(42,0,24,0.7) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  row-gap: 0;
  transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transform: translateZ(0);
}
.njt-course-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 215, 0, 0.4);
  box-shadow: 0 20px 40px rgba(0,0,0,0.6), 0 0 30px rgba(255, 215, 0, 0.15);
}
.njt-course-card__image-wrap {
  height: 200px;
  position: relative;
  overflow: hidden;
}
.njt-course-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms ease;
}
.njt-course-card:hover .njt-course-card__image {
  transform: scale(1.05);
}
.njt-course-card__image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(20,20,20,0.95) 100%);
}
.njt-course-card__badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  /* components.css sets `left: 12px`; with `right` also set the pill stretched to
     the full card width. Releasing `left` lets it shrink to its own label. */
  left: auto;
  width: -moz-fit-content;
  width: fit-content;
  max-width: calc(100% - 2rem);
  background: var(--racing-yellow, #FFD700);
  color: #000;
  font-family: var(--font-heading, 'Prompt', sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: 100px;
  letter-spacing: 0.05em;
  z-index: 2;
}
.njt-course-card--pro .njt-course-card__badge {
  background: var(--magenta, #D40079);
  color: #fff;
}
.njt-course-card--pro {
  border-color: rgba(212, 0, 121, 0.35);
  box-shadow: 0 0 30px rgba(212, 0, 121, 0.15);
}
.njt-course-card--pro:hover {
  border-color: var(--magenta, #D40079);
  box-shadow: 0 20px 40px rgba(0,0,0,0.8), 0 0 40px rgba(212, 0, 121, 0.3);
}
/* `display: contents` hoists the four copy rows into the card's subgrid. A plain
   <div> carries no implicit role, so nothing is lost from the accessibility tree.
   The wrapper's former 1.5rem/2rem padding now lives on the rows themselves. */
.njt-course-card__content {
  display: contents;
}
.njt-course-card__title {
  font-family: var(--font-heading, 'Prompt', sans-serif);
  font-size: 1.5rem;
  color: #fff;
  font-weight: 700;
  margin: 0;
  padding: 1.5rem 2rem 0.5rem;
}
.njt-course-card__target {
  font-family: var(--font-heading, 'Prompt', sans-serif);
  font-size: 0.85rem;
  color: var(--racing-yellow, #FFD700);
  margin: 0;
  padding: 0 2rem 1.5rem;
  letter-spacing: 0.08em;
}
.njt-course-card--pro .njt-course-card__target { color: var(--magenta-300, #FF4DB3); }
.njt-course-card--pro .njt-course-card__specs { border-color: rgba(212,0,121,0.22); background: rgba(0,0,0,0.75); }
.njt-course-card__specs {
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius, 8px);
  padding: 1.25rem;
  /* Sits in its own subgrid row now — the row sizes to the tallest panel in the
     set and every panel stretches to match, so `flex-grow` is no longer needed. */
  margin: 0 2rem 2rem;
}
.njt-course-card__specs-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.njt-course-card__spec-item {
  display: flex;
  gap: 0.75rem;
  font-family: var(--font-body, 'Bai Jamjuree', sans-serif);
  font-size: 0.9rem;
  color: rgba(255,255,255,0.8);
  align-items: flex-start;
  line-height: 1.5;
}
.njt-course-card__spec-icon {
  color: var(--racing-yellow, #FFD700);
  font-size: 1rem;
  margin-top: -2px;
}
.njt-course-card--pro .njt-course-card__spec-icon {
  color: var(--magenta-300, #FF4DB3);
}
/* Footer restack — price line full-width above a full-width CTA (kills the จอง/เลย wrap collision §1.5) */
.njt-course-card__footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.85rem;
  border-top: 1px solid rgba(255,255,255,0.05);
  /* Side margins keep the rule inset to the old content width; the bottom padding
     is what the wrapper used to contribute. */
  margin: 0 2rem;
  padding: 1.5rem 0;
}
.njt-course-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}
.njt-course-card__price-num {
  font-family: var(--font-display, 'Prompt', sans-serif);
  font-size: 2rem;
  font-weight: 900;
  font-style: italic;
  color: #fff;
  line-height: 1;
}
.njt-course-card__price-unit {
  font-family: var(--font-body, 'Bai Jamjuree', sans-serif);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
}

/* CTA — full-width, always visible (not ghost on mobile) */
/* GOAL-V4 §G4 (CTA hierarchy law) + §G5 (product SSOT):
   `.njt-course-card__cta` used to BE the button — a near-invisible ghost
   (white/5 on pricing, gold/8 on training: two styles for the same product,
   while impulse activities got full-gradient primaries). It is a WRAPPER again,
   matching components.css:1875, and every course decision row now carries the
   canonical `.btn-cta` primary. */
.njt-course-card__cta {
  display: block;
  width: 100%;
  /* The footer row stretches to the tallest footer in the set; `auto` keeps every
     button on the card's bottom edge rather than floating under a short rate block. */
  margin-top: auto;
}
.njt-course-card__cta .btn-cta { width: 100%; justify-content: center; }

/* Add-On Coaching Pills */
.njt-addons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}
.njt-addon-pill {
  background: rgba(20,20,20,0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-md, 12px);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  transition: all 300ms ease;
}
.njt-addon-pill:hover {
  background: rgba(30,30,30,0.9);
  border-color: rgba(255,215,0,0.3);
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.5), inset 0 0 15px rgba(255,215,0,0.05);
}
.njt-addon-pill__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--racing-yellow, #FFD700);
  flex-shrink: 0;
  transition: all 300ms ease;
}
.njt-addon-pill:hover .njt-addon-pill__icon {
  background: rgba(255,215,0,0.1);
  border-color: rgba(255,215,0,0.3);
  transform: scale(1.1) rotate(5deg);
}
.njt-addon-pill__info { flex-grow: 1; }
.njt-addon-pill__title {
  font-family: var(--font-heading, 'Prompt', sans-serif);
  font-size: 1.1rem;
  color: #fff;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.njt-addon-pill__desc {
  font-family: var(--font-body, 'Bai Jamjuree', sans-serif);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.65);
}
.njt-addon-pill__price {
  font-family: var(--font-display, 'Prompt', sans-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}


/* ═══════════════════════════════════════
   6. SAFETY & EQUIPMENT — SIMPLE (renamed from .njt-safety to stop the class
      collision with components.css §34 Command Center; §1.6). Feature pillar +
      supporting cards, correct Lucide icon semantics (shirt / hard-hat / user-check).
═══════════════════════════════════════ */
.njt-safety-simple {
  position: relative;
  padding: var(--section-pad, 80px) 0;
  background: var(--racing-plum, #2A0018);
  overflow: hidden;
  color: #fff;
}
.njt-safety-simple__grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 1.5rem;
  margin-top: 4rem;
  align-items: stretch;
}
/* Feature pillar — real racing-gear photo + gear checklist */
.njt-safety-simple__feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  border: 1px solid rgba(212,0,121,0.28);
  border-left: 4px solid var(--magenta, #D40079);
  background: linear-gradient(135deg, rgba(212,0,121,0.1) 0%, rgba(0,0,0,0.55) 55%, rgba(42,0,24,0.4) 100%);
  transition: all 400ms ease;
}
.njt-safety-simple__feature:hover {
  border-color: var(--magenta, #D40079);
  box-shadow: 0 16px 40px rgba(0,0,0,0.4), 0 0 30px rgba(212,0,121,0.12);
}
.njt-safety-simple__feature-media { position: relative; min-height: 320px; }
.njt-safety-simple__feature-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.njt-safety-simple__feature-body { padding: 2.5rem 2rem; display: flex; flex-direction: column; gap: 1rem; }
.njt-safety-simple__icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md, 12px);
  background: rgba(212,0,121,0.14);
  border: 1px solid rgba(212,0,121,0.4);
  color: var(--magenta-300, #FF4DB3);
}
.njt-safety-simple__feature-title {
  font-family: var(--font-heading, 'Prompt', sans-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
}
.njt-safety-simple__feature-desc {
  font-family: var(--font-body, 'Bai Jamjuree', sans-serif);
  font-size: 0.95rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.7;
}
.njt-safety-simple__list { list-style: none; padding: 0; margin: 0.5rem 0 0; display: flex; flex-direction: column; gap: 0.6rem; }
.njt-safety-simple__list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body, 'Bai Jamjuree', sans-serif);
  font-size: 0.9rem;
  color: rgba(255,255,255,0.82);
}
.njt-safety-simple__check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold, #FFD700);
}
.njt-safety-simple__check svg { width: 15px; height: 15px; }
/* Supporting cards */
.njt-safety-simple__cards { display: grid; grid-template-rows: repeat(3, 1fr); gap: 1.5rem; }
.njt-safety-simple__card {
  background: linear-gradient(135deg, rgba(0,0,0,0.55) 0%, rgba(42,0,24,0.3) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg, 16px);
  padding: 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: all 400ms ease;
}
.njt-safety-simple__card:hover {
  border-color: rgba(212,0,121,0.4);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.4);
}
.njt-safety-simple__card .njt-safety-simple__icon {
  width: 48px;
  height: 48px;
  background: rgba(255,215,0,0.08);
  border-color: rgba(255,215,0,0.2);
  color: var(--gold, #FFD700);
}
.njt-safety-simple__card-title {
  font-family: var(--font-heading, 'Prompt', sans-serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
}
.njt-safety-simple__card-desc {
  font-family: var(--font-body, 'Bai Jamjuree', sans-serif);
  font-size: 0.875rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
}

@media (max-width: 992px) {
  .njt-safety-simple__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .njt-safety-simple__feature { grid-template-columns: 1fr; }
  .njt-safety-simple__feature-media { min-height: 220px; }
}


/* ═══════════════════════════════════════
   7. COACHES — CINEMATIC
═══════════════════════════════════════ */
.njt-coaches-cinematic {
  position: relative;
  background: #000;
  padding: 6rem 0;
  overflow: hidden;
  color: #fff;
}
.njt-coaches-cinematic__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, #000 0%, rgba(42,0,24,0.95) 50%, #000 100%);
}
.njt-coaches-cinematic__watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  font-family: var(--font-display, 'Prompt', sans-serif);
  font-weight: 900;
  font-style: italic;
  font-size: 25vw;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.03);
  white-space: nowrap;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  animation: panWatermark 30s linear infinite alternate;
  mix-blend-mode: overlay;
}
@keyframes panWatermark {
  0%   { transform: translate(-40%, -50%); }
  100% { transform: translate(-60%, -50%); }
}
.njt-coaches-cinematic__container {
  position: relative;
  z-index: 10;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}
.njt-coaches-cinematic__header {
  text-align: center;
  margin-bottom: 5rem;
}
.njt-coaches-cinematic__overline {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-heading, 'Prompt', sans-serif);
  color: var(--racing-yellow, #FFD700);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}
.njt-coaches-cinematic__overline::before,
.njt-coaches-cinematic__overline::after {
  content: '';
  display: block;
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.8), transparent);
}
.njt-coaches-cinematic__title {
  font-family: var(--font-display, 'Prompt', sans-serif);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 900;
  font-style: italic;
  line-height: 1.2;
  background: linear-gradient(45deg, var(--magenta-300, #FF4DB3), var(--gold, #FFD700));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.025em;
}
.njt-coaches-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  align-items: start;
  max-width: 900px;
  margin: 0 auto;
}
.njt-coach-card {
  position: relative;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, rgba(0,0,0,0.9) 0%, rgba(42,0,24,0.3) 50%, rgba(0,0,0,0.8) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 2px solid rgba(255,255,255,0.1);
  padding: 2.5rem 2rem;
  transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transform-style: preserve-3d;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}
.njt-coach-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,215,0,0.05), transparent);
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
  z-index: 2;
}
.njt-coach-card:hover {
  border-color: rgba(255, 215, 0, 0.6);
  transform: translateY(-4px);
  box-shadow: 0 25px 50px -12px rgba(255,215,0,0.1);
  background: linear-gradient(135deg, rgba(0,0,0,0.95), rgba(42,0,24,0.5), rgba(0,0,0,0.9));
}
.njt-coach-card:hover::after { opacity: 1; }
.njt-coach-card--center {
  transform: scale(1.05) translateZ(20px);
  z-index: 2;
}
/* Clean portrait crop — zoom into the unobstructed coach (right side of the source
   poster), cropping the baked headline/trophy collage out of frame (§1.7). */
.njt-coach-card__image-wrapper {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 4 / 5;
  margin: 0 auto 1.75rem;
  z-index: 3;
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
}
.njt-coach-card__image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(3);
  transform-origin: 92% 38%;
  filter: grayscale(12%) contrast(1.05) brightness(0.95);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
}
/* per-coach focal tuning — zoom hard onto the coach on the right of each source
   poster so the baked headline/trophy collage on the left is cropped out (§1.7) */
.njt-coach-card:nth-child(1) .njt-coach-card__image-wrapper img { transform: scale(3.45); transform-origin: 95% 42%; }
.njt-coach-card:nth-child(2) .njt-coach-card__image-wrapper img { transform: scale(3); transform-origin: 91% 33%; }
.njt-coach-card:hover .njt-coach-card__image-wrapper img {
  filter: grayscale(0%) contrast(1.05) brightness(1);
}
.njt-coach-card__content {
  position: relative;
  z-index: 3;
  text-align: center;
}
.njt-coach-card__telemetry {
  font-family: var(--font-heading, 'Prompt', sans-serif);
  font-size: 0.75rem;
  color: var(--racing-yellow, #FFD700);
  letter-spacing: 0.12em;
  margin-bottom: 0.5rem;
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,215,0,0.7);
  border-radius: 9999px;
}
.njt-coach-card__name {
  font-family: var(--font-display, 'Prompt', sans-serif);
  font-size: 2rem;
  font-weight: 900;
  font-style: italic;
  margin-bottom: 0.25rem;
  color: #fff;
  line-height: 1.2;
}
.njt-coach-card__fullname {
  font-family: var(--font-body, 'Bai Jamjuree', sans-serif);
  font-size: 0.875rem;
  color: var(--racing-grey, #9C9EA2);
  margin-bottom: 1.5rem;
}
.njt-coach-card__stats {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-family: var(--font-heading, 'Prompt', sans-serif);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  text-align: left;
  background: rgba(0,0,0,0.3);
  padding: 1rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255,255,255,0.05);
}
.njt-coach-card__stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.njt-coach-card__stat-label { color: var(--racing-grey, #9C9EA2); }
.njt-coach-card__stat-value { color: #fff; font-weight: 600; }
.njt-badge-hero {
  background: rgba(255,215,0,0.9);
  color: #000;
  font-family: var(--font-body, 'Bai Jamjuree', sans-serif);
  font-weight: 700;
  letter-spacing: 0.1em;
  border-radius: 9999px;
  padding: 0.25rem 1rem;
  display: inline-block;
  animation: animate-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  font-size: 0.75rem;
}
@keyframes animate-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .7; }
}
.njt-coaches-cinematic__view-all {
  text-align: center;
  margin-top: 4rem;
  position: relative;
  z-index: 10;
}
.btn-parallelogram-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255,215,0,0.05), rgba(255,215,0,0.1));
  border: 2px solid var(--racing-yellow, #FFD700);
  padding: 0.75rem 2rem;
  color: var(--racing-yellow, #FFD700);
  font-family: var(--font-heading, 'Prompt', sans-serif);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: all 300ms ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transform: skew(-15deg);
  position: relative;
  overflow: hidden;
}
.btn-parallelogram-outline__content {
  transform: skew(15deg);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
  z-index: 2;
}
.btn-parallelogram-outline:hover {
  background: rgba(255,215,0,0.15);
  color: #FFFFFF;
  box-shadow: 0 6px 20px rgba(255,215,0,0.3), inset 0 1px 0 rgba(255,215,0,0.2);
}
@media (max-width: 768px) {
  .njt-coaches-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    max-width: 420px;
  }
}


/* ═══════════════════════════════════════
   8. SUCCESS STORIES — TESTIMONIALS
═══════════════════════════════════════ */
.njt-campaign-testimonials {
  position: relative;
  padding: var(--section-pad, 80px) 0;
  background: var(--racing-plum, #2A0018);
  overflow: hidden;
  color: #fff;
}
.njt-campaign-testimonials__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.njt-campaign-testimonials__glow {
  position: absolute;
  width: 50vw;
  height: 50vw;
  border-radius: 50%;
  filter: blur(150px);
  opacity: 0.1;
  mix-blend-mode: screen;
  transition: background 1s ease, transform 1s ease;
}
.njt-campaign-testimonials__glow--primary {
  top: -10%;
  left: -10%;
  background: var(--magenta, #D40079);
}
.njt-campaign-testimonials__glow--secondary {
  bottom: -10%;
  right: -10%;
  background: var(--racing-yellow, #FFD700);
  opacity: 0.05;
}
.njt-campaign-testimonials__container {
  position: relative;
  z-index: 10;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}
.njt-ct-header { text-align: center; margin-bottom: 4rem; }
/* .njt-ct-header__overline pill removed — migrated to canonical .njt-section__overline (V3-R2 consolidation). */
.njt-ct-header__title {
  font-family: var(--font-display, 'Prompt', sans-serif);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 900;
  font-style: italic;
  line-height: 1.2;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--gold, #FFD700) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.njt-ct-carousel {
  position: relative;
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2rem;
  cursor: grab;
  overflow-anchor: none;
}
.njt-ct-carousel::-webkit-scrollbar { display: none; }
.njt-ct-carousel:active { cursor: grabbing; }

.njt-profile-card {
  flex: 0 0 100%;
  max-width: 1000px;
  scroll-snap-align: center;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 0;
  background: rgba(15, 15, 15, 0.6);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,0.5);
  margin: 0 auto;
  transform: scale(0.95);
  opacity: 0.92;   /* A19 — was 0.5 (axe 2.15:1, unfixed since R3-A2). Canonical: components.css. */
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s ease;
}
.njt-profile-card.is-active { transform: scale(1); opacity: 1; }
.njt-profile-media {
  position: relative;
  min-height: 400px;
  border-right: 1px solid rgba(255,255,255,0.05);
}
.njt-profile-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(20%) contrast(1.1);
  transition: filter 0.5s ease;
}
.njt-profile-card.is-active .njt-profile-media img {
  filter: grayscale(0%) contrast(1.1);
}
.njt-profile-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 0%, rgba(15,15,15,0.9) 100%),
              linear-gradient(to top, rgba(15,15,15,0.8) 0%, transparent 40%);
}
.njt-profile-hud {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.njt-hud-stat {
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  border-left: 3px solid var(--magenta, #D40079);
  padding: 0.5rem 1rem;
  border-radius: 0 8px 8px 0;
  display: flex;
  flex-direction: column;
  transform: translateX(-20px);
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.njt-hud-stat:nth-child(2) { transition-delay: 0.1s; border-color: var(--racing-yellow, #FFD700); }
.njt-hud-stat:nth-child(3) { transition-delay: 0.2s; border-color: #fff; }
.njt-profile-card.is-active .njt-hud-stat {
  transform: translateX(0);
  opacity: 1;
}
.njt-hud-stat__label { font-size: 0.7rem; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.2rem; }
.njt-hud-stat__val { font-size: 1rem; font-weight: 700; color: #fff; }

.njt-profile-content {
  padding: 4rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.njt-profile-content::before {
  content: '\201C';
  position: absolute;
  top: -2rem;
  left: 1rem;
  font-size: 20rem;
  font-family: var(--font-display, 'Prompt', sans-serif);
  line-height: 1;
  color: rgba(255,255,255,0.03);
  z-index: 0;
  pointer-events: none;
}
.njt-quote-text {
  position: relative;
  z-index: 1;
  font-family: var(--font-body, 'Bai Jamjuree', sans-serif);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.6;
  color: rgba(255,255,255,0.9);
  margin-bottom: 2rem;
  font-weight: 500;
}
.njt-quote-highlight {
  background: linear-gradient(90deg, var(--gold, #FFD700), var(--magenta, #D40079));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}
.njt-profile-author { position: relative; z-index: 1; }
.njt-profile-author__name {
  font-family: var(--font-heading, 'Prompt', sans-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.25rem;
}
.njt-profile-author__title {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.5);
}
.njt-progress-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 3rem;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
.njt-progress-bar {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.njt-progress-bar__fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  background: var(--gold, #FFD700);
  width: 0%;
  transition: width 0.1s linear;
}
.njt-progress-bar.is-active .njt-progress-bar__fill {
  width: 100%;
  transition: width 5s linear;
}
@media (max-width: 992px) {
  .njt-profile-card { grid-template-columns: 1fr; }
  .njt-profile-media { min-height: 250px; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.05); }
  .njt-profile-overlay { background: linear-gradient(to top, rgba(15,15,15,0.95) 0%, transparent 60%); }
  .njt-profile-content { padding: 2rem; }
  .njt-quote-text { font-size: 1.125rem; }
}


/* ═══════════════════════════════════════
   9. FAQ SECTION WRAPPER (accordion itself consolidated onto components.css §24 —
      .njt-faq / __item / __question / __icon / __answer / __answer-inner; §1.9).
      Renamed the section shell to .njt-faq-section so it no longer clobbers the
      canonical inner .njt-faq wrapper.
═══════════════════════════════════════ */
.njt-faq-section {
  position: relative;
  padding: var(--section-pad, 80px) 0;
  background: var(--racing-plum, #2A0018);
  overflow: hidden;
  color: #fff;
}
.njt-faq-section__container {
  position: relative;
  z-index: 10;
}
.njt-faq-section .njt-faq { margin-top: 3rem; }


/* ═══════════════════════════════════════
   10. CAMPAIGN FINAL CTA
═══════════════════════════════════════ */
.njt-cta-transition {
  display: flex;
  width: 100%;
  height: 4px;
  background: #0F0F0F;
}
.njt-cta-transition__line {
  flex: 1;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--magenta, #D40079), transparent);
  opacity: 0.5;
  animation: raceLine 3s infinite linear;
}
.njt-cta-transition__line:nth-child(2) { animation-delay: -1s; background: linear-gradient(90deg, transparent, #FFD700, transparent); }
.njt-cta-transition__line:nth-child(3) { animation-delay: -2s; background: linear-gradient(90deg, transparent, #fff, transparent); }

@keyframes raceLine {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Campaign CTA de-forked → css/components.css §36 (GOAL-V3 R1 integrator, punch 2).
   Page override: training uses its own fallback still behind the video. */
.njt-campaign-cta__bg-image {
  background-image: url('../assets/07-training/honda-racing-thailand-training-overhead.jpg');
}


/* ═══════════════════════════════════════
   11. SCROLL REVEAL for .js-fade-up
═══════════════════════════════════════ */
.js-fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.4s ease, transform 0.4s ease; /* entrance ≤400ms (Gate 6) */
}
.js-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ═══════════════════════════════════════
   12. REDUCED MOTION
═══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .njt-hero-parallax__fallback,
  .njt-hero-parallax__video,
  .njt-particle,
  .njt-coaches-cinematic__watermark,
  .njt-cta-transition__line,
  .njt-hero-scroll-cue,
  .njt-badge-hero {
    animation: none !important;
  }
  .njt-bento-premium__card,
  .njt-journey__node,
  .njt-course-card,
  .njt-coach-card,
  .njt-addon-pill,
  .njt-safety-simple__feature,
  .njt-safety-simple__card,
  .njt-expect-step__icon,
  .js-fade-up {
    transition: none !important;
  }
  .js-fade-up {
    opacity: 1;
    transform: none;
  }
}

/* .njt-rate + .njt-nw PROMOTED to css/components.css (A1, round 2).
   This file carried a byte-identical 5,173-byte copy (md5 c5ef26b146e36b4321571576459e478b),
   as did the other three page files named in the old header — 20,692 bytes of
   the same component shipped four times. components.css loads on all 18 routes,
   so the copy here was never doing anything the shared file would not. */

/* ═══════════════════════════════════════════════════════════════════════════
   G4/G5 PAGE HOOKS  (training)
   ═══════════════════════════════════════════════════════════════════════════ */

/* PRO card ground moved off an inline style so the block is byte-identical
   with pricing.html's copy of the same product (G5). */
.njt-course-card--pro {
  background: linear-gradient(135deg, rgba(42, 0, 24, 0.95) 0%, rgba(20, 20, 20, 0.8) 100%);
}
.njt-course-card--pro .njt-rate__unit,
.njt-course-card--pro .njt-rate__incl { color: var(--text-white); }
.njt-course-card--pro .njt-rate__link { color: var(--magenta-300); border-bottom-color: rgba(255, 77, 179, 0.4); }
.njt-course-card--pro .njt-rate__link:hover { color: #fff; border-bottom-color: var(--magenta-300); }
.njt-course-card--pro .njt-rate__incl::before { background-color: var(--magenta-300); }

/* Rate block sits above the full-width CTA in the (already stacked) footer. */
.njt-course-card__footer .njt-rate { width: 100%; }

/* Add-on pills: the rate device replaces the old dead price token. */
.njt-addon-pill__rate {
  flex-shrink: 0;
  align-items: flex-end;
  text-align: right;
}
.njt-addon-pill__rate .njt-rate__promise { font-size: 11px; }

/* Comparison table: per-column rate chips replace the merged apology row.
   The rate row is the table's commercial close, so it gets its own banded strip.
   Only `tbody td` carried padding, so these tfoot cells previously sat flush
   against the table edge and crowded the row above. */
.njt-comparison-table tfoot .njt-comparison-table__rate-row > th,
.njt-comparison-table tfoot .njt-comparison-table__rate-row > td {
  padding: 1.25rem;
  vertical-align: top;
  background: rgba(212, 0, 121, 0.07);
  border-top: 2px solid rgba(212, 0, 121, 0.35);
}
.njt-comparison-table tfoot .njt-comparison-table__rate-row > td.njt-comparison-table__highlight {
  background: rgba(212, 0, 121, 0.16);
}
.njt-comparison-table tfoot th[scope="row"] {
  font-family: var(--font-heading);
  font-size: var(--text-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 215, 0, 0.85);
  text-align: left;
  white-space: nowrap;
}
/* Centre the chips on their column, matching every row above them. */
.njt-comparison-table__rate {
  gap: 10px;
  align-items: center;
  text-align: center;
}
.njt-comparison-table__rate .njt-rate__unit {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-white, #fff);
}
/* Pill affordance — the enquiry is the only action in this row, so it should read
   as a control rather than a hairline text link at 12px. */
.njt-comparison-table__rate .njt-rate__link {
  font-size: 12px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 215, 0, 0.4);
  border-radius: var(--radius-pill, 100px);
  background: rgba(255, 215, 0, 0.07);
  transition: background var(--dur-base, 300ms) var(--ease-out, ease),
              border-color var(--dur-base, 300ms) var(--ease-out, ease),
              color var(--dur-base, 300ms) var(--ease-out, ease);
}
.njt-comparison-table__rate .njt-rate__link:hover {
  background: rgba(255, 215, 0, 0.16);
  border-color: var(--gold, #FFD700);
}
.njt-comparison-table__highlight .njt-rate__link {
  border-color: rgba(255, 77, 179, 0.5);
  background: rgba(212, 0, 121, 0.18);
  color: var(--magenta-300, #FF4DB3);
}
.njt-comparison-table__highlight .njt-rate__link:hover {
  background: rgba(212, 0, 121, 0.32);
  border-color: var(--magenta-300, #FF4DB3);
  color: #fff;
}
.njt-comparison-table tfoot .njt-comparison-table__foot { text-align: center; }

@media (max-width: 768px) {
  .njt-addon-pill { flex-wrap: wrap; }
  .njt-addon-pill__rate { align-items: flex-start; text-align: left; width: 100%; }
}