/* ─────────────────────────────────────────
   PRICING PAGE — EEST NJT Racing Circuit
   $250K Campaign-Level Execution
   Extracted from inline + enhanced
───────────────────────────────────────── */

/* ═══════════════════════════════════════
   1. HERO — PRICING VARIANT ($250K Level)
═══════════════════════════════════════ */

/* --- Easing Variables --- */
.njt-hero--pricing {
  --ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.njt-hero--pricing {
  /* §2.1 — compressed from a full 100vh cinematic hero on a utility page to ~60vh.
     height:auto + min-height keeps content from clipping under the tighter clip-path. */
  height: auto;
  min-height: 560px;
  clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
  background: #0a0508;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Layer 0: Ambient Glow — warmer tones */
.njt-hero__ambient-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 30% 60%, rgba(42,0,24,0.45) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 75% 30%, rgba(212,0,121,0.1) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 50% 55%, rgba(255,215,0,0.05) 0%, transparent 50%),
    radial-gradient(ellipse 70% 40% at 50% 60%, rgba(255,200,50,0.04) 0%, transparent 60%);
  pointer-events: none;
}

/* Layer 1: Background Image — higher opacity for energy */
.njt-hero--pricing .njt-hero__bg {
  background-image: url('../assets/02-primary/PRIMARY-003_two-riders-cornering-coffee-track.jpg');
  background-size: cover;
  background-position: center 30%;
  opacity: 0.52;
  filter: saturate(0.8) contrast(1.05);
}

/* Layer 2: Ember Canvas */
.njt-hero__embers {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* Cinematic overlay — lightened for visibility */
.njt-hero--pricing::before {
  background:
    linear-gradient(180deg, rgba(42,0,24,0.55) 0%, rgba(0,0,0,0.3) 45%, rgba(5,5,5,0.75) 100%),
    radial-gradient(ellipse at 70% 40%, rgba(255,215,0,0.1) 0%, transparent 60%);
}

/* Content — generous spacing, breathable layout */
.njt-hero--pricing .njt-hero__content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding-top: calc(var(--header-h, 80px) + 16px);
  padding-bottom: 36px;
  width: 100%;
}

/* Overline with scanning line effect */
.njt-hero--pricing .njt-hero__overline {
  font-family: var(--font-mono, 'Roboto Mono', monospace);
  font-size: 13px;
  letter-spacing: 6px;
  color: var(--gold);
  margin-bottom: 24px;
  animation: fadeInUp 0.4s var(--ease-expo-out) both;
  position: relative;
  overflow: hidden;
}
.njt-hero--pricing .njt-hero__overline span {
  position: relative;
  display: inline-block;
}
.njt-hero--pricing .njt-hero__overline::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,215,0,0.35), transparent);
  animation: overlineScan 2s var(--ease-expo-out) 0.8s both;
  pointer-events: none;
}
@keyframes overlineScan {
  0%   { left: -60%; }
  100% { left: 120%; }
}

/* Clean Title — Display Font, Cinematic Scale */
.njt-hero--pricing .njt-hero__title {
  font-family: var(--font-display, 'Prompt', 'Titillium Web', Impact, sans-serif);
  font-size: var(--text-display-xl);   /* A5 / CONVENTIONS #19 — was clamp(3rem, 7vw, 5.5rem) */
  font-weight: 900;
  font-style: italic;
  max-width: 900px;
  margin-bottom: 20px;
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
  line-height: 1.2;
  letter-spacing: -0.025em;
  /* No entrance animation on the hero H1 — a fadeInUp(both) starts at opacity:0 and
     dominated the LCP as pure render delay (R2 D9). The H1 now paints at the first
     frame (font preloaded, line 13) so it is the LCP element with no render delay. */
  text-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 40px rgba(255,215,0,0.15);
}

/* Ghost Kinetic Text */
.njt-hero--pricing .njt-hero__kinetic {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  text-align: center;
  font-family: var(--font-display);
  font-size: 18vw;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  letter-spacing: 0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,215,0,0.06);
  background: linear-gradient(180deg, rgba(255,215,0,0.05) 0%, rgba(212,0,121,0.03) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  animation: pricingKineticBreathe 20s infinite alternate ease-in-out;
}
@keyframes pricingKineticBreathe {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50%  { transform: translate(-50%, -50%) scale(1.02); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* Ambient Glow Orbs */
.njt-hero--pricing .njt-hero__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
}
.njt-hero--pricing .njt-hero__glow--gold {
  width: 500px; height: 500px;
  background: rgba(255,215,0,0.08);
  filter: blur(150px);
  top: -15%; right: -5%;
  animation: pricingGlowFloat 18s infinite alternate ease-in-out;
}
.njt-hero--pricing .njt-hero__glow--magenta {
  width: 600px; height: 600px;
  background: rgba(212,0,121,0.12);
  filter: blur(120px);
  bottom: -20%; left: -10%;
  animation: pricingGlowFloat 22s infinite alternate-reverse ease-in-out;
}
@keyframes pricingGlowFloat {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(30px, -30px) scale(1.1); }
}

/* Floating Particles */
.njt-hero--pricing .njt-hero__particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.njt-hero--pricing .njt-hero__particle {
  position: absolute;
  bottom: -10px;
  width: 3px; height: 3px;
  background: #FFD700;
  border-radius: 50%;
  opacity: 0;
  animation: pricingParticleRise linear infinite;
}
@keyframes pricingParticleRise {
  0%   { transform: translateY(0) scale(0); opacity: 0; }
  10%  { opacity: 0.8; transform: translateY(-10vh) scale(1); }
  90%  { opacity: 0.3; }
  100% { transform: translateY(-85vh) scale(0.3); opacity: 0; }
}

/* Accent Line at bottom */
.njt-hero--pricing .njt-hero__accent-line {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #FFD700 30%, #D40079 70%, transparent);
  z-index: 10;
}

/* Subtitle */
.njt-hero--pricing .njt-hero__subtitle {
  font-size: clamp(15px, 1.8vw, 18px);
  max-width: 640px;
  margin-bottom: 0;
  line-height: 1.7;
  animation: fadeInUp 0.4s var(--ease-expo-out) 0.35s both;
}

/* Badge — reassurance below showcase */
.njt-hero--pricing .njt-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-white-40);
  margin-top: 20px;
  animation: fadeInUp 0.4s var(--ease-expo-out) 0.7s both;
}
.njt-hero--pricing .njt-hero__badge::before {
  content: '';
  display: inline-flex;
  width: 18px;
  height: 18px;
  background-color: rgba(255,215,0,0.2);
  background-image: var(--icon-check-gold); /* Lucide check (was emoji '✓') */
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Speed Lines — Multi-Axis Racing Atmosphere ── */
.njt-hero--pricing .njt-hero__speed-lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.njt-hero__speed-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,215,0,0.4), transparent);
  animation: speedLinePass linear infinite;
  opacity: 0;
}
/* Horizontal lines — varied thickness for depth */
.njt-hero__speed-line:nth-child(1) { top: 20%; animation-duration: 3s; animation-delay: 0s; }
.njt-hero__speed-line:nth-child(2) { top: 35%; animation-duration: 2.5s; animation-delay: 0.8s; height: 2px; }
.njt-hero__speed-line:nth-child(3) { top: 55%; animation-duration: 3.5s; animation-delay: 1.6s; background: linear-gradient(90deg, transparent, rgba(212,0,121,0.3), transparent); }
.njt-hero__speed-line:nth-child(4) { top: 70%; animation-duration: 2.8s; animation-delay: 0.4s; height: 0.5px; }
.njt-hero__speed-line:nth-child(5) { top: 85%; animation-duration: 3.2s; animation-delay: 1.2s; background: linear-gradient(90deg, transparent, rgba(212,0,121,0.25), transparent); }
/* Diagonal lines — circuit perspective */
.njt-hero__speed-line--diagonal {
  transform: rotate(18deg);
  transform-origin: left center;
}
.njt-hero__speed-line--diagonal:nth-child(6) { top: 25%; animation-duration: 3.8s; animation-delay: 0.5s; height: 1px; }
.njt-hero__speed-line--diagonal:nth-child(7) { top: 50%; animation-duration: 4.2s; animation-delay: 1.8s; height: 1.5px; transform: rotate(12deg); }
.njt-hero__speed-line--diagonal:nth-child(8) { top: 75%; animation-duration: 3.4s; animation-delay: 2.4s; height: 0.5px; transform: rotate(22deg); }

@keyframes speedLinePass {
  0%   { left: -20%; width: 0; opacity: 0; }
  10%  { opacity: 0.6; }
  50%  { width: 30%; }
  90%  { opacity: 0.6; }
  100% { left: 120%; width: 0; opacity: 0; }
}

/* ── Pricing Showcase Cards — Hero-Sized ── */
.njt-hero__price-showcase {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 28px;
  animation: fadeInUp 0.4s var(--ease-expo-out) 0.55s both;
}
.njt-hero__price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg, 16px);
  padding: 32px 40px 24px;
  min-width: 180px;
  text-decoration: none;
  color: var(--text-white-80);
  transition: all 350ms var(--ease-expo-out);
}
.njt-hero__price-card:hover {
  border-color: rgba(255,215,0,0.4);
  background: rgba(255,215,0,0.06);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.3), 0 0 20px rgba(255,215,0,0.08);
}
/* Featured card — gold accent with top border highlight */
.njt-hero__price-card--featured {
  border-color: rgba(255,215,0,0.35);
  background: rgba(255,215,0,0.08);
  box-shadow: 0 0 24px rgba(255,215,0,0.08), inset 0 1px 0 rgba(255,215,0,0.15);
  border-top: 2px solid var(--gold);
}
.njt-hero__price-card--featured:hover {
  border-color: rgba(255,215,0,0.6);
  box-shadow: 0 16px 40px rgba(0,0,0,0.3), 0 0 30px rgba(255,215,0,0.12);
}
/* Popular tag */
.njt-hero__price-card-tag {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: linear-gradient(135deg, #FFD700, #FFC107);
  color: #000;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 14px;
  border-radius: 20px;
  line-height: 1.4;
  box-shadow: 0 2px 10px rgba(255,215,0,0.3);
}
/* Icon */
.njt-hero__price-card-icon {
  color: var(--gold);
  opacity: 0.6;
  margin-bottom: 4px;
  transition: opacity 0.3s ease;
}
.njt-hero__price-card:hover .njt-hero__price-card-icon {
  opacity: 1;
}
/* Label */
.njt-hero__price-card-label {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-white-60);
  letter-spacing: 0.3px;
}
/* Period — now the hero element of the card (§2.1: lead with the period, not a fake price) */
.njt-hero__price-card-period {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 900;
  font-style: italic;
  color: var(--gold);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-top: 4px;
}
/* "สอบถามราคา" — secondary line, never a big fake-price lockup */
.njt-hero__price-card-ask {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-white-60);
  letter-spacing: 0.02em;
}

/* Mobile: hero adjustments */
@media (max-width: 767px) {
  /* A5: mobile font-size override removed — --text-display-xl already clamps to 40px here. */
  .njt-hero--pricing .njt-hero__kinetic {
    /* Trimmed from 26vw so this decorative aria-hidden ghost no longer out-sizes the
       H1 for LCP — the real headline is now the LCP element on mobile (R2 D9). */
    font-size: 18vw;
  }
  .njt-hero--pricing .njt-hero__glow--gold { width: 300px; height: 300px; }
  .njt-hero--pricing .njt-hero__glow--magenta { width: 350px; height: 350px; }
}
@media (max-width: 640px) {
  .njt-hero__price-showcase {
    gap: 12px;
    padding: 0 16px;
  }
  .njt-hero__price-card {
    min-width: 128px;
    padding: 20px 18px 16px;
  }
  .njt-hero__price-card-period {
    font-size: 22px;
  }
}

/* ── Micro-Trust Strip — Enhanced ── */
.njt-hero__trust-strip {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 24px;
  padding: 12px 28px;
  font-size: 12px;
  color: var(--text-white-60);
  font-family: var(--font-body);
  animation: fadeInUp 0.4s var(--ease-expo-out) 0.85s both;
  flex-wrap: wrap;
  justify-content: center;
  background: rgba(255,255,255,0.03);
  border-radius: var(--radius-pill, 50px);
  border: 1px solid rgba(255,255,255,0.06);
}
.njt-hero__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.njt-hero__trust-icon {
  flex-shrink: 0;
  color: var(--gold);
  opacity: 0.7;
}
.njt-hero__trust-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-white-60);
  opacity: 0.4;
  flex-shrink: 0;
}

/* ── Scroll Indicator — In Content Flow (no clip-path issue) ── */
.njt-hero--pricing .njt-hero__scroll-cue {
  position: relative;
  bottom: auto;
  left: auto;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 40px;
  margin-bottom: 20px;
  color: var(--text-white-40, rgba(255,255,255,0.4));
  font-size: 10px;
  font-family: var(--font-mono, 'Roboto Mono', monospace);
  letter-spacing: 2px;
  text-transform: uppercase;
  z-index: 10;
  animation: fadeInUp 0.4s var(--ease-expo-out) 1.1s both;
  transition: opacity 0.4s ease;
  cursor: pointer;
}
.njt-hero__scroll-cue svg {
  animation: scrollBounce 2.5s ease-in-out infinite;
  opacity: 0.5;
}
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50%      { transform: translateY(5px); opacity: 0.8; }
}
.njt-hero__scroll-cue.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* §polish — width normalization is now real `container container--wide` markup on every section
   (HOUSE-RULES §9); the fragile `.njt-hero--pricing ~ … > .container` sibling chain that broke on
   any section reorder has been removed. */

/* ── Width Normalization — Match Header (1400px) [HOUSE-RULES §9 / MEMORY] ──
   .njt-section carries a base 24px side padding (components.css). Zero it so only
   the inner container's 32px applies → content-left aligns to the header (was
   24+32=56px @768 on 7 sections, V3-R1 D6a). Reference: racing-team.css §0. */
.njt-section {
  padding-left: 0;
  padding-right: 0;
}
.njt-section .container.container--wide {
  padding-left: 32px;
  padding-right: 32px;
}

/* Canonical section subtitle (was 5 near-identical inline styles — one rule now, §polish) */
.njt-section__subtitle {
  color: var(--text-white-60);
  font-size: 16px;
  line-height: 1.6;
  max-width: 620px;
  margin: 12px auto 0;
}

/* ═══════════════════════════════════════
   2. STICKY SUB-NAV — canonical .njt-hud-nav (R3 migration off njt-pricing-nav).
   Base/sticky/is-active-underline live in components.css §40; pricing.js drives
   active-tab + is-stuck. Page keeps only the stuck-shadow accent.
═══════════════════════════════════════ */
.njt-hud-nav.is-stuck {
  box-shadow: 0 4px 24px rgba(0,0,0,0.6), 0 1px 0 rgba(255,215,0,0.08) inset;
}

/* ═══════════════════════════════════════
   3. ENHANCED PRICING CARDS (Activities)
═══════════════════════════════════════ */
.njt-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--max-w, 1400px);
  margin: 0 auto;
}
.njt-pricing-card {
  position: relative;
  background: linear-gradient(135deg, rgba(26,5,16,0.95) 0%, rgba(10,10,10,0.9) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg, 16px);
  padding: 32px 28px;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
  overflow: hidden;
}
.njt-pricing-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(255,215,0,0.4), transparent);
  opacity: 0;
  transition: opacity 400ms ease;
}
.njt-pricing-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255,215,0,0.3);
  box-shadow:
    0 20px 40px rgba(0,0,0,0.5),
    0 0 30px rgba(255,215,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.05);
}
.njt-pricing-card:hover::before {
  opacity: 1;
}
.njt-pricing-card--featured:hover {
  transform: scale(1.04) translateY(-8px);
}
.njt-pricing-card--featured {
  border-color: rgba(255,215,0,0.3);
  background: linear-gradient(135deg, rgba(42,0,24,0.9) 0%, rgba(15,10,10,0.95) 100%);
  box-shadow: 0 0 40px rgba(255,215,0,0.05);
  transform: scale(1.04);
  z-index: 2;
}
.njt-pricing-card--featured::before {
  opacity: 0.6;
}

/* Badge on Card */
.njt-pricing-card__badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--gold);
  color: #000;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-pill, 50px);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(255,215,0,0.3);
  animation: badgePulse 3s ease-in-out infinite;
}
.njt-pricing-card__badge--kids {
  background: var(--magenta, #D40079);
  color: #fff;
  box-shadow: 0 2px 8px rgba(212,0,121,0.3);
}
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(255,215,0,0.3); }
  50%      { box-shadow: 0 2px 16px rgba(255,215,0,0.5); }
}

/* Card Name */
.njt-pricing-card__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  color: #fff;
  margin-bottom: 20px;
  padding-right: 80px;
}

/* Price Display */
.njt-pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 8px;
}
.njt-pricing-card__amount {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 900;
  font-style: italic;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.02em;
}
.njt-pricing-card__currency {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--gold);
  opacity: 0.8;
}
.njt-pricing-card__period {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-white-60);
}
/* §2.4 price-lockup honesty — when the amount is non-numeric ("สอบถาม") the big 48px display slot
   reads as a fake price, and the "THB" unit orphans next to it. Shrink the word to a 20px/700 label
   and suppress the currency unit. Self-heals the moment a real numeric price sets data-price > 0. */
.njt-pricing-card__amount[data-price="0"] {
  font-size: 20px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0;
}
.njt-pricing-card__amount[data-price="0"] + .njt-pricing-card__currency {
  display: none;
}

/* ─── Day Toggle (Weekday/Weekend) — REMOVED at V4 (GOAL-V4 §G8) ───
   The control was dead twice over: its container was display:none, so its
   `.reveal` class could never fire, and every value it would have switched was
   an enquiry token. Markup, guarded script and these rules are all gone. The
   weekday promo now reads as a fact on the go-kart / drift-trike rate devices.
   Restore a real toggle only alongside real numeric rates. */

/* Price transition animation */
.njt-pricing-card__amount {
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.njt-pricing-card__amount.is-switching {
  transform: translateY(-4px);
  opacity: 0;
}

/* Discount Callout */
.njt-pricing-card__discount {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,215,0,0.1);
  border: 1px solid rgba(255,215,0,0.25);
  color: var(--gold);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--radius, 8px);
  margin-bottom: 20px;
}
.njt-pricing-card__discount::before {
  content: '';
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--icon-zap) center / contain no-repeat;
  mask: var(--icon-zap) center / contain no-repeat; /* Lucide zap (was emoji '⚡') */
}

/* Savings Badge */
.njt-pricing-card__savings {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,215,0,0.1);
  border: 1px solid rgba(255,215,0,0.25);
  color: var(--gold);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--radius, 8px);
  margin-bottom: 16px;
}
.njt-pricing-card__savings::before {
  content: '';
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--icon-badge) center / contain no-repeat;
  mask: var(--icon-badge) center / contain no-repeat; /* Lucide badge-percent (was emoji '💰') */
}

/* Effective Hourly Rate */
.njt-pricing-card__effective-rate {
  font-family: var(--font-mono, 'Roboto Mono', monospace);
  font-size: 12px;
  color: var(--gold);
  opacity: 0.7;
  margin-bottom: 8px;
  letter-spacing: 0.03em;
}

/* Description */
.njt-pricing-card__description {
  font-size: 14px;
  color: var(--text-white-60);
  line-height: 1.6;
  margin-top: 8px;
}

/* Includes List */
.njt-pricing-card__includes {
  list-style: none;
  padding: 0;
  margin: 20px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 20px;
  flex-grow: 1;
}
.njt-pricing-card__includes li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-white-80);
  padding: 6px 0;
}
.njt-pricing-card__includes li::before {
  content: '';
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-color: rgba(255,215,0,0.1);
  background-image: var(--icon-check-gold); /* Lucide check (was emoji '✓') */
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 11px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Suitable For */
.njt-pricing-card__suitable {
  font-family: var(--font-mono, 'Roboto Mono', monospace);
  font-size: 12px;
  color: var(--text-white-40);
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border-radius: var(--radius, 8px);
  margin-bottom: 20px;
  letter-spacing: 0.02em;
}

/* Card CTA */
.njt-pricing-card__cta {
  margin-top: auto;
}
.njt-pricing-card__cta.btn-cta {
  width: 100%;
  justify-content: center;
}

/* ═══════════════════════════════════════
   4. COMPETITOR COMPARISON — BAR CHART
═══════════════════════════════════════ */
.njt-comparison {
  background: linear-gradient(135deg, rgba(26,5,16,0.8) 0%, rgba(10,10,10,0.9) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg, 16px);
  padding: 40px;
  margin-top: 48px;
  max-width: var(--max-w, 1400px);
  margin-left: auto;
  margin-right: auto;
  overflow: visible;
}
.njt-comparison__title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-white);
  text-align: center;
  margin-bottom: 32px;
}
.njt-comparison__grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.njt-comparison__item {
  display: grid;
  grid-template-columns: 180px 1fr 80px;
  align-items: center;
  gap: 16px;
}
.njt-comparison__name {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-white-60);
}
.njt-comparison__bar {
  height: 36px;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.05);
}
.njt-comparison__bar-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  width: 0;
  position: relative;
}
.njt-comparison__bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 60%, rgba(255,255,255,0.15));
  border-radius: 6px;
}
.njt-comparison__item--highlight .njt-comparison__name {
  color: var(--gold);
  font-weight: 700;
}
.njt-comparison__item--highlight .njt-comparison__bar-fill {
  background: linear-gradient(90deg, var(--gold), #FFC107);
  box-shadow: 0 0 20px rgba(255,215,0,0.3);
}
.njt-comparison__item:not(.njt-comparison__item--highlight) .njt-comparison__bar-fill {
  background: rgba(255,255,255,0.15);
}
.njt-comparison__price {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-white-80);
  text-align: right;
}
.njt-comparison__item--highlight .njt-comparison__price {
  color: var(--gold);
}
.njt-comparison__note {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--gold);
  opacity: 0.8;
}
.njt-comparison__disclaimer {
  text-align: center;
  font-size: 12px;
  color: var(--text-white-40);
  margin-top: 20px;
}
.njt-comparison__savings {
  text-align: center;
  margin-top: 16px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--signal-green);
  padding: 10px 20px;
  background: rgba(46,125,70,0.12);
  border: 1px solid rgba(46,125,70,0.22);
  border-radius: var(--radius, 8px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.njt-comparison__savings-wrap {
  text-align: center;
}

/* ═══════════════════════════════════════
   5. TRAINING COURSES (Premium Grid)
═══════════════════════════════════════ */
.njt-courses-premium {
  position: relative;
  padding: 8rem 0;
  background: #050505;
  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, #050505 0%, rgba(42,0,24,0.6) 50%, #050505 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;
}

/* Progression Path */
.njt-courses-progression {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 16px;
  padding: 0 2rem;
}
.njt-courses-progression__step {
  display: flex;
  align-items: center;
  gap: 0;
}
.njt-courses-progression__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,215,0,0.3);
  border: 2px solid rgba(255,215,0,0.5);
  flex-shrink: 0;
}
.njt-courses-progression__dot--active {
  background: var(--gold);
  box-shadow: 0 0 12px rgba(255,215,0,0.5);
}
/* §2.5 — terminal PRO milestone: brand magenta fill (dot is a shape, AA-exempt), label bright magenta */
.njt-courses-progression__dot--pro {
  background: var(--magenta);
  border-color: var(--magenta);
  box-shadow: 0 0 12px rgba(212,0,121,0.5);
}
.njt-courses-progression__label--pro {
  color: var(--magenta-300);
  font-weight: 700;
}
.njt-courses-progression__line {
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,215,0,0.4), rgba(255,215,0,0.15));
}
.njt-courses-progression__label {
  font-family: var(--font-mono, 'Roboto Mono', monospace);
  font-size: 10px;
  color: var(--text-white-40);
  letter-spacing: 0.05em;
  margin-top: 6px;
  text-align: center;
}

/* Course Grid */
.njt-courses-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
@media (max-width: 1200px) {
  .njt-courses-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .njt-courses-grid { grid-template-columns: 1fr; }
}

/* Course Card */
.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: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  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;
  background: #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);
  color: #fff;
}
.njt-course-card--pro {
  border-color: rgba(212,0,121, 0.3);
  box-shadow: 0 0 30px rgba(212,0,121, 0.15);
}
.njt-course-card--pro:hover {
  border-color: var(--magenta);
  box-shadow: 0 20px 40px rgba(0,0,0,0.8), 0 0 40px rgba(212,0,121, 0.3);
}
.njt-course-card__content {
  padding: 1.5rem 2rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.njt-course-card__title {
  font-family: var(--font-heading, 'Prompt', sans-serif);
  font-size: 1.5rem;
  color: #fff;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.njt-course-card__target {
  font-family: var(--font-mono, 'Roboto Mono', monospace);
  font-size: 0.85rem;
  color: #FFD700;
  margin-bottom: 1.5rem;
  letter-spacing: 0.05em;
}
.njt-course-card__specs {
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 2rem;
  flex-grow: 1;
}
.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: #FFD700;
  font-size: 1rem;
  margin-top: -2px;
}
.njt-course-card--pro .njt-course-card__spec-icon {
  color: var(--magenta);
}
/* §2.5 — PRO card accents moved off the inline off-token red onto brand magenta */
.njt-course-card--pro .njt-course-card__target {
  color: var(--magenta-300);
}
.njt-course-card--pro .njt-course-card__specs {
  border-color: rgba(212,0,121,0.2);
  background: rgba(0,0,0,0.8);
}
/* Savings Percentage Badge */
.njt-savings-pct {
  display: inline-block;
  padding: 1px 8px;
  margin-left: 6px;
  background: rgba(255,215,0,0.15);
  color: var(--gold, #FFD700);
  font-family: var(--font-mono, 'Roboto Mono', monospace);
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--radius-pill, 50px);
  letter-spacing: 0.02em;
  vertical-align: middle;
}

.njt-course-card__footer {
  /* §1.5/§2.5 — restack: price line full-width ABOVE a full-width CTA. Was space-between, which
     at 4-up widths wrapped the CTA to two lines and collided it with the "ราคา" unit. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.875rem;
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 1.5rem;
}
.njt-course-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}
.njt-course-card__price-num {
  /* one CSS size for all four cards (killed the per-card inline 1.5rem hotfix). "สอบถาม" is a
     label, not a fake giant number → 1.25rem/700 upright, out of the 2rem display-italic slot. */
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  font-style: normal;
  color: #fff;
  line-height: 1.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);
}
/* 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%;
  margin-top: 0;
}
.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: 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: #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.6);
}
.njt-addon-pill__price {
  font-family: var(--font-display, 'Titillium Web', sans-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

/* ═══════════════════════════════════════
   5b. BIKE SHOP GALLERY
═══════════════════════════════════════ */
.njt-bike-gallery {
  margin-bottom: 32px;
}
.njt-bike-gallery__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 12px;
  max-width: var(--max-w, 1400px);
  margin: 0 auto;
}

/* Wide items span 2 columns on alternate rows */
.njt-bike-gallery__item--wide:first-child {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}
.njt-bike-gallery__item:nth-child(2) {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}
.njt-bike-gallery__item:nth-child(3) {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}
.njt-bike-gallery__item--wide:last-child {
  grid-column: 2 / 4;
  grid-row: 2 / 3;
}

.njt-bike-gallery__item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  min-height: 180px;
}
.njt-bike-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.njt-bike-gallery__item:hover .njt-bike-gallery__img {
  transform: scale(1.06);
}

/* Overlay gradient + tag */
.njt-bike-gallery__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 40%, transparent 60%);
  display: flex;
  align-items: flex-end;
  padding: 16px;
  pointer-events: none;
}
.njt-bike-gallery__tag {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: rgba(255,215,0,0.15);
  border: 1px solid rgba(255,215,0,0.25);
  padding: 5px 12px;
  border-radius: 6px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  letter-spacing: 0.02em;
}

/* Responsive */
@media (max-width: 767px) {
  .njt-bike-gallery__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
  }
  .njt-bike-gallery__item--wide:first-child {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .njt-bike-gallery__item:nth-child(2) {
    grid-column: 1 / 2;
    grid-row: auto;
  }
  .njt-bike-gallery__item:nth-child(3) {
    grid-column: 2 / 3;
    grid-row: auto;
  }
  .njt-bike-gallery__item--wide:last-child {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .njt-bike-gallery__item {
    min-height: 140px;
  }
}
@media (max-width: 480px) {
  .njt-bike-gallery__grid {
    grid-template-columns: 1fr;
  }
  .njt-bike-gallery__item--wide:first-child,
  .njt-bike-gallery__item:nth-child(2),
  .njt-bike-gallery__item:nth-child(3),
  .njt-bike-gallery__item--wide:last-child {
    grid-column: 1 / -1;
  }
  .njt-bike-gallery__item {
    min-height: 160px;
  }
}

/* ═══════════════════════════════════════
   6. BIKE RENTAL TABLE (Enhanced)
═══════════════════════════════════════ */
/* Column widths (table-layout: fixed) */
.njt-pricing-table__col--img    { width: 108px; }
.njt-pricing-table__col--bike   { width: auto; }
.njt-pricing-table__col--cc     { width: 100px; }
.njt-pricing-table__col--level  { width: 180px; }
.njt-pricing-table__col--price  { width: 160px; }
.njt-pricing-table__col--action { width: 140px; }

.njt-pricing-table {
  width: 100%;
  background: linear-gradient(135deg, rgba(26,5,16,0.8) 0%, rgba(10,10,10,0.9) 100%);
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  position: relative;
}
/* §1.5/§2.5 — the confident --magenta-gradient header bar of the reference register */
.njt-pricing-table::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--magenta-gradient);
  z-index: 2;
}
.njt-pricing-table table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.njt-pricing-table thead {
  background: linear-gradient(135deg, rgba(212,0,121,0.24) 0%, rgba(255,215,0,0.09) 100%);
}
.njt-pricing-table th {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  color: var(--text-white-80);
  padding: 14px 24px;
  text-align: left;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.njt-pricing-table th:first-child {
  padding: 14px 0 14px 16px;
  width: 100px;
}
.njt-pricing-table td {
  padding: 16px 24px;
  font-size: 14px;
  color: var(--text-white-80);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: all 300ms ease;
  vertical-align: middle;
}

/* Image thumbnail cell */
.njt-pricing-table__img-cell {
  padding: 12px 0 12px 16px !important;
  width: 100px;
}
.njt-pricing-table__img {
  width: 80px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.njt-pricing-table tbody tr:hover .njt-pricing-table__img {
  transform: scale(1.05);
  border-color: rgba(255,215,0,0.2);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.njt-pricing-table__row--highlight .njt-pricing-table__img {
  border-color: rgba(255,215,0,0.15);
}
.njt-pricing-table__row--pro .njt-pricing-table__img {
  border-color: rgba(212,0,121,0.15);
}
.njt-pricing-table tr:last-child td { border-bottom: none; }
.njt-pricing-table tbody tr {
  transition: all 300ms ease;
}
.njt-pricing-table tbody tr:hover td {
  background: rgba(255,215,0,0.03);
}

/* Bike name + description */
.njt-pricing-table__bike-cell {
  min-width: 200px;
}
.njt-pricing-table__bike-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  color: var(--text-white);
  margin-bottom: 4px;
}
.njt-pricing-table__bike-desc {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-white-40);
  line-height: 1.4;
}

/* CC display */
.njt-pricing-table__cc {
  font-family: var(--font-display, var(--font-heading));
  font-weight: 800;
  font-size: 16px;
  color: var(--text-white);
  letter-spacing: -0.02em;
}
.njt-pricing-table__cc::after {
  content: 'cc';
  font-size: 11px;
  font-weight: 500;
  color: var(--text-white-40);
  margin-left: 1px;
}
/* §2.6 — NSF100 is a purpose-built race bike; the low 100cc is a feature, not a mis-sort. Tag it
   so the comparative CC column doesn't read as a scan error next to the 125/150 trail bikes. */
.njt-pricing-table__cc--race::after {
  content: ' · RACE';
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gold);
  margin-left: 3px;
}

/* Skill level pill */
.njt-pricing-table__level {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-pill, 50px);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.njt-pricing-table__level::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
/* §2.6 — level pills mapped off the raw Tailwind palette onto brand status tokens.
   Colour lives in the tinted bg + dot; text stays AA (white-80, gold, or bright magenta-300). */
.njt-pricing-table__level--beginner {
  background: rgba(46,125,70,0.16);
  color: var(--text-white-80);
}
.njt-pricing-table__level--beginner::before {
  background: var(--signal-green);
  box-shadow: 0 0 6px rgba(46,125,70,0.6);
}
.njt-pricing-table__level--beginner-int {
  background: rgba(212,148,10,0.14);
  color: var(--text-white-80);
}
.njt-pricing-table__level--beginner-int::before {
  background: var(--amber);
  box-shadow: 0 0 6px rgba(212,148,10,0.5);
}
.njt-pricing-table__level--intermediate {
  background: rgba(255,215,0,0.1);
  color: var(--text-white-80);
}
.njt-pricing-table__level--intermediate::before {
  background: var(--gold);
  box-shadow: 0 0 6px rgba(255,215,0,0.5);
}
.njt-pricing-table__level--racing {
  background: rgba(255,215,0,0.12);
  color: var(--gold);
}
.njt-pricing-table__level--racing::before {
  background: var(--gold);
  box-shadow: 0 0 8px rgba(255,215,0,0.6);
}
.njt-pricing-table__level--pro {
  background: rgba(212,0,121,0.16);
  color: var(--magenta-300);
}
.njt-pricing-table__level--pro::before {
  background: var(--magenta);
  box-shadow: 0 0 8px rgba(212,0,121,0.6);
}

/* Price cell */
.njt-pricing-table__price-cell {
  font-family: var(--font-display, var(--font-heading));
  font-size: 18px;
  font-weight: 900;
  color: var(--text-white) !important;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.njt-pricing-table__currency {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-white-40);
  margin-left: 2px;
}

/* Highlighted rows */
.njt-pricing-table__row--highlight td {
  background: rgba(255,215,0,0.02);
}
.njt-pricing-table__row--highlight:hover td {
  background: rgba(255,215,0,0.06) !important;
}
.njt-pricing-table__row--pro td {
  background: rgba(212,0,121,0.03);
}
.njt-pricing-table__row--pro:hover td {
  background: rgba(212,0,121,0.06) !important;
}

/* Badges */
.njt-pricing-table__badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-pill, 50px);
  font-size: 10px;
  font-weight: 700;
  background: rgba(255,215,0,0.15);
  color: var(--gold);
  margin-left: 8px;
  letter-spacing: 0.05em;
  vertical-align: middle;
  animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.njt-pricing-table__badge--pro {
  background: rgba(212,0,121,0.2);
  color: var(--magenta-300);
}

/* Book button */
.njt-pricing-table__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 24px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius, 8px);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-white);
  text-decoration: none;
  transition: all 300ms ease;
}
.njt-pricing-table__btn:hover {
  background: linear-gradient(135deg, var(--gold), #FFC107);
  color: #000;
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255,215,0,0.3);
}
.njt-pricing-table__btn--gold {
  border-color: rgba(255,215,0,0.3);
  color: var(--gold);
  background: rgba(255,215,0,0.06);
}
.njt-pricing-table__btn--gold:hover {
  background: linear-gradient(135deg, var(--gold), #FFC107);
  color: #000;
}

/* Footnote */
.njt-pricing-table__footnote {
  text-align: center;
  font-size: 13px;
  color: var(--text-white-40);
  margin-top: 16px;
  padding: 0 24px;
}

/* ═══════════════════════════════════════
   6b. TRACK GALLERY CAROUSEL
═══════════════════════════════════════ */
.njt-track-carousel {
  position: relative;
  margin-bottom: 36px;
  max-width: var(--max-w, 1400px);
  margin-left: auto;
  margin-right: auto;
}
.njt-track-carousel__viewport {
  overflow: hidden;
  border-radius: 16px;
}
.njt-track-carousel__track {
  display: flex;
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.njt-track-carousel__slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  aspect-ratio: 21 / 9;
  overflow: hidden;
}
.njt-track-carousel__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
/* Subtle Ken Burns zoom on active slide */
.njt-track-carousel__slide.is-active .njt-track-carousel__img {
  transform: scale(1.06);
}
.njt-track-carousel__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.1) 40%, transparent 70%);
  display: flex;
  align-items: flex-end;
  padding: 24px 28px;
  pointer-events: none;
}
.njt-track-carousel__tag {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: rgba(255,215,0,0.15);
  border: 1px solid rgba(255,215,0,0.25);
  padding: 6px 16px;
  border-radius: 8px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
}
.njt-track-carousel__slide.is-active .njt-track-carousel__tag {
  opacity: 1;
  transform: translateY(0);
}

/* ── Carousel Arrows ── */
.njt-track-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
.njt-track-carousel__arrow:hover {
  background: rgba(255,215,0,0.2);
  border-color: rgba(255,215,0,0.4);
  color: var(--gold);
}
.njt-track-carousel__arrow svg {
  width: 20px;
  height: 20px;
}
.njt-track-carousel__arrow--prev {
  left: 12px;
}
.njt-track-carousel__arrow--next {
  right: 12px;
}

/* ── Carousel Dots ── */
.njt-track-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.njt-track-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.2);
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
}
.njt-track-carousel__dot.is-active {
  background: var(--gold);
  width: 24px;
  border-radius: 4px;
}

/* ═══════════════════════════════════════
   6c. TRACK LAYOUT VISUAL
═══════════════════════════════════════ */
.njt-track-layout {
  margin-top: 48px;
  margin-bottom: 8px;
}
.njt-track-layout__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  background: linear-gradient(135deg, rgba(26,5,16,0.8) 0%, rgba(10,10,10,0.9) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  max-width: var(--max-w, 1400px);
  margin: 0 auto;
}
.njt-track-layout__image-wrap {
  position: relative;
  overflow: hidden;
  min-height: 320px;
}
.njt-track-layout__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.njt-track-layout__image-wrap:hover .njt-track-layout__img {
  transform: scale(1.04);
}
.njt-track-layout__details {
  padding: 36px 36px 36px 0;
}
.njt-track-layout__title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-white);
  margin-bottom: 14px;
}
.njt-track-layout__desc {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-white-60);
  line-height: 1.7;
  margin-bottom: 24px;
}
.njt-track-layout__highlights {
  display: flex;
  gap: 24px;
}
.njt-track-layout__highlight {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 20px;
  background: rgba(255,215,0,0.06);
  border: 1px solid rgba(255,215,0,0.15);
  border-radius: var(--radius, 8px);
  min-width: 90px;
}
.njt-track-layout__highlight-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  font-style: italic;
  color: var(--gold);
  /* A29: `line-height: 1` deleted. This slot is named __value but renders Thai WORDS
     ("ยุโรป" · "แอสฟัลต์" · "กันชน") at 28px — measured Thai ink is up to 1.393 em, so a
     1.0 line box clips the sara/tone marks. Enrolled in components.css §38c (value
     register: Latin 1.1 / Thai 1.3), same treatment as .njt-stat__number ("ฟรี"). */
  letter-spacing: -0.02em;
}
.njt-track-layout__highlight-label {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-white-60);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}

/* ═══════════════════════════════════════
   7. TRACK INFO SPECS (Enhanced — 6 items)
═══════════════════════════════════════ */
.njt-track-info {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-top: 40px;
}
.njt-track-info__item {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md, 12px);
  padding: 20px 14px;
  text-align: center;
  transition: all 300ms ease;
}
.njt-track-info__item:hover {
  border-color: rgba(255,215,0,0.2);
  background: rgba(255,215,0,0.03);
}
.njt-track-info__icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,215,0,0.08);
  border-radius: 50%;
  color: var(--gold);
}
.njt-track-info__icon svg {
  width: 22px;
  height: 22px;
}
.njt-track-info__label {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-white-60);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.njt-track-info__value {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-white);
}

/* ── Pricing Card CTA Buttons ── */
.njt-pricing-card__cta {
  display: block;
  text-align: center;
  padding: 12px 20px;
  border-radius: 8px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: all 300ms ease;
  margin-top: auto;
}
.njt-pricing-card__cta--primary {
  background: var(--gold);
  color: #000;
  border: 1px solid var(--gold);
  box-shadow: 0 4px 16px rgba(255,215,0,0.2);
}
.njt-pricing-card__cta--primary:hover {
  background: #ffe040;
  box-shadow: 0 6px 24px rgba(255,215,0,0.35);
  transform: translateY(-2px);
}
.njt-pricing-card__cta--ghost {
  background: transparent;
  color: var(--text-white-80);
  border: 1px solid rgba(255,255,255,0.12);
}
.njt-pricing-card__cta--ghost:hover {
  border-color: rgba(255,215,0,0.4);
  color: var(--gold);
  background: rgba(255,215,0,0.05);
}

/* ── "Best Value" Badge Variant ── */
.njt-pricing-card__badge--value {
  background: linear-gradient(135deg, var(--signal-green), #245c38);
  color: #fff;
  box-shadow: 0 2px 8px rgba(46,125,70,0.35);
  animation: badgePulseGreen 3s ease-in-out infinite;
}
@keyframes badgePulseGreen {
  0%, 100% { box-shadow: 0 2px 8px rgba(46,125,70,0.35); }
  50%      { box-shadow: 0 2px 16px rgba(46,125,70,0.55); }
}

/* ═══════════════════════════════════════
   8. ADD-ON SERVICES (Enhanced)
═══════════════════════════════════════ */
.njt-addon-grid {
  /* §2.8 — 3-col so the featured coaching card can span 2 (horizontal) and the remaining
     three cards still sit on a clean row. */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--max-w, 1400px);
  margin: 0 auto;
}
.njt-addon-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

/* ── Base Card ── */
.njt-addon-card {
  position: relative;
  background: linear-gradient(135deg, rgba(26,5,16,0.8) 0%, rgba(10,10,10,0.9) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg, 16px);
  padding: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.njt-addon-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,215,0,0.2);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 20px rgba(255,215,0,0.05);
}

/* ── Featured Card (gold accent) ── */
.njt-addon-card--featured {
  border-color: rgba(255,215,0,0.25);
  box-shadow: 0 0 0 1px rgba(255,215,0,0.08), 0 8px 24px rgba(0,0,0,0.3);
}
.njt-addon-card--featured:hover {
  border-color: rgba(255,215,0,0.45);
  box-shadow: 0 20px 40px rgba(0,0,0,0.5), 0 0 30px rgba(255,215,0,0.08);
}
/* §2.8 — featured spans 2 columns as a horizontal image | content card */
.njt-addon-card--featured {
  grid-column: span 2;
  flex-direction: row;
  text-align: left;
  align-items: stretch;
}
.njt-addon-card--featured .njt-addon-card__visual {
  width: 42%;
  height: auto;
  flex-shrink: 0;
}
.njt-addon-card--featured .njt-addon-card__visual::after {
  /* right-edge fade (blends photo into the content column) instead of the bottom fade */
  top: 0;
  bottom: 0;
  left: auto;
  right: 0;
  width: 56px;
  height: auto;
  background: linear-gradient(to left, rgba(10,10,10,0.7), transparent);
}
.njt-addon-card--featured .njt-addon-card__body {
  justify-content: center;
}

/* ── Badge ── */
.njt-addon-card__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #000;
  background: var(--gold, #FFD700);
  padding: 4px 10px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(255,215,0,0.3);
}
.njt-addon-card__badge--new {
  background: linear-gradient(135deg, var(--magenta), var(--magenta-300));
  color: #fff;
  box-shadow: 0 2px 8px rgba(212,0,121,0.3);
}

/* ── Photo Visual ── */
.njt-addon-card__visual {
  width: 100%;
  height: 160px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}
.njt-addon-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.njt-addon-card:hover .njt-addon-card__photo {
  transform: scale(1.06);
}
/* Gradient fade at bottom of image */
.njt-addon-card__visual::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(to top, rgba(10,10,10,0.9), transparent);
  pointer-events: none;
}

/* ── Card Body (text area below image) ── */
.njt-addon-card__name {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-white);
  margin: 0;
  padding: 20px 20px 0;
}
.njt-addon-card__prices {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 20px 0;
}
.njt-addon-card__price {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  color: var(--gold);
}
.njt-addon-card__price span {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  color: var(--text-white-60);
}

/* ── Feature List ── */
.njt-addon-card__features {
  list-style: none;
  padding: 14px 20px 0;
  margin: 0;
  text-align: left;
  flex: 1;
}
.njt-addon-card__features li {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-white-60);
  line-height: 1.5;
  padding: 5px 0 5px 20px;
  position: relative;
}
.njt-addon-card__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 12px;
  height: 12px;
  background-color: var(--gold);
  -webkit-mask: var(--icon-check) center / contain no-repeat;
  mask: var(--icon-check) center / contain no-repeat; /* Lucide check (was emoji '✓') */
}
.njt-addon-card--featured .njt-addon-card__features li {
  color: var(--text-white-80);
}

/* ── CTA Button ──
   A18: the ENTIRE legacy ghost recipe is scoped `:not(.btn-cta)`. All four add-on
   CTAs were promoted to the canonical `.btn-cta` at §3261 (`class="njt-addon-card__cta
   btn-cta"`, 4/4 in pricing.html — grep), but this block still won on `color`,
   `background` and `border`: identical (0,1,0) specificity, later file. The result was
   a btn-cta wearing a translucent ghost surface, so the shared gold→magenta hover wash
   painted on near-black and the label measured 1.81–1.84:1 (white ink) and then 3.18:1
   (plum ink) — a defect that reads as a hover-contrast bug but is really a half-finished
   migration. Scoped, not deleted: the recipe is still correct for a plain ghost use. */
.njt-addon-card__cta:not(.btn-cta) {
  display: block;
  margin: 16px 20px 20px;
  padding: 10px 16px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-white-80);
  background: rgba(255,255,255,0.04);
  transition: all 300ms ease;
  letter-spacing: 0.02em;
}
.njt-addon-card__cta:not(.btn-cta):hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.2);
  color: #fff;
}
/* Primary CTA (for featured card) */
.njt-addon-card__cta--primary {
  background: var(--gold, #FFD700);
  color: #000;
  border-color: var(--gold, #FFD700);
  font-weight: 700;
}
.njt-addon-card__cta--primary:hover {
  background: #ffe040;
  border-color: #ffe040;
  color: #000;
  box-shadow: 0 4px 16px rgba(255,215,0,0.3);
}

/* ── Responsive ── */
@media (max-width: 1200px) {
  .njt-addon-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .njt-addon-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .njt-addon-card__visual {
    height: 140px;
  }
  /* featured returns to a stacked card at 1-col */
  .njt-addon-card--featured {
    grid-column: auto;
    flex-direction: column;
    text-align: center;
  }
  .njt-addon-card--featured .njt-addon-card__visual {
    width: 100%;
    height: 140px;
  }
  .njt-addon-card--featured .njt-addon-card__visual::after {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    height: 40px;
    background: linear-gradient(to top, rgba(10,10,10,0.9), transparent);
  }
}

/* ═══════════════════════════════════════
   9. TRUST RIBBON (§2.3 — replaced the 4 tall photo cards with one reassurance strip)
═══════════════════════════════════════ */
.njt-trust-ribbon {
  padding: 20px 0;
  background: linear-gradient(180deg, rgba(17,3,9,0.55), rgba(42,0,24,0.32));
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.njt-trust-ribbon__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 40px;
}
.njt-trust-ribbon__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-white-80);
  letter-spacing: 0.01em;
}
.njt-trust-ribbon__item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--gold);
}
@media (max-width: 767px) {
  .njt-trust-ribbon { padding: 16px 0; }
  .njt-trust-ribbon__list { gap: 10px 22px; }
  .njt-trust-ribbon__item { font-size: 13px; }
}

/* ═══════════════════════════════════════
   10. CTA BANNER (Enhanced)
═══════════════════════════════════════ */
.njt-cta-banner {
  position: relative;
  text-align: center;
  /* Side padding zeroed → only the inner container's 32px applies, so content
     aligns to the header (was 24+32=56px @768, R2 N3b). Reference: racing-team.css §0. */
  padding: 64px 0;
  background: linear-gradient(135deg, rgba(42,0,24,0.8) 0%, rgba(5,5,5,0.95) 100%);
  border-top: 1px solid rgba(255,215,0,0.1);
  border-bottom: 1px solid rgba(255,215,0,0.1);
  overflow: hidden;
}
.njt-cta-banner .container.container--wide {
  width: 100%;
  padding-left: 32px;
  padding-right: 32px;
}
.njt-cta-banner::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255,215,0,0.06) 0%, transparent 70%);
  pointer-events: none;
}
/* §2.9 — the group-discount band gets the magenta-gradient treatment reserved for it (magenta→plum
   keeps white text AA; the design-system --magenta-gradient runs to gold which fails text contrast). */
.njt-cta-banner--group {
  background: linear-gradient(135deg, var(--magenta) 0%, var(--racing-plum) 62%, #10050b 100%);
  border-top-color: rgba(255,215,0,0.18);
  border-bottom-color: rgba(255,215,0,0.18);
}
.njt-cta-banner--group .njt-cta-banner__subtitle {
  color: rgba(255,255,255,0.9);
}
.njt-cta-banner__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  color: var(--gold);
  position: relative;
}
.njt-cta-banner__icon svg {
  width: 40px;
  height: 40px;
}
.njt-cta-banner__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(24px, 4vw, 36px);
  color: var(--text-white);
  margin-bottom: 12px;
  position: relative;
}
.njt-cta-banner__subtitle {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-white-60);
  margin-bottom: 32px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  line-height: 1.6;
}
.njt-cta-banner__actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}

/* ═══════════════════════════════════════
   11. FAQ (Accordion Enhanced)
═══════════════════════════════════════ */
.njt-faq--pricing {
  max-width: 800px;
  margin: 0 auto;
}
.njt-faq--pricing .njt-faq__item {
  background: linear-gradient(135deg, rgba(26,5,16,0.6) 0%, rgba(10,10,10,0.8) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md, 12px);
  margin-bottom: 8px;
  overflow: hidden;
  transition: border-color 300ms ease;
}
.njt-faq--pricing .njt-faq__item:hover {
  border-color: rgba(255,215,0,0.15);
}
.njt-faq--pricing .njt-faq__item.is-open {
  border-color: rgba(255,215,0,0.2);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.njt-faq--pricing .njt-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 24px;
  background: none;
  border: none;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  color: var(--text-white);
  text-align: left;
  cursor: pointer;
  transition: color 300ms ease;
}
.njt-faq--pricing .njt-faq__question:hover {
  color: var(--gold);
}
.njt-faq--pricing .njt-faq__icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,215,0,0.08);
  border-radius: 50%;
  color: var(--gold);
  flex-shrink: 0;
  transition: all 300ms ease;
}
.njt-faq--pricing .njt-faq__item.is-open .njt-faq__icon {
  background: var(--gold);
  color: #000;
  transform: rotate(45deg);
}
.njt-faq--pricing .njt-faq__answer {
  max-height: 0;
  overflow: hidden;
  visibility: hidden; /* removes collapsed inner link from tab order (a11y: aria-hidden-focus) */
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.4s;
}
.njt-faq--pricing .njt-faq__item.is-open .njt-faq__answer {
  max-height: 500px;
  visibility: visible;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
}
.njt-faq--pricing .njt-faq__answer-inner {
  padding: 0 24px 24px;
  font-size: 15px;
  color: var(--text-white-80);
  line-height: 1.7;
}

/* FAQ — Still Have Questions CTA */
.njt-faq__cta {
  text-align: center;
  margin-top: 40px;
  padding: 32px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg, 16px);
}
.njt-faq__cta p {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-white);
  margin-bottom: 20px;
}
.njt-faq__cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.njt-faq__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: var(--radius, 8px);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}
.njt-faq__cta-btn--line {
  background: var(--line-green-aa); /* A20: tokenised (was the raw #047A3A hex) */
  color: #fff;
}
.njt-faq__cta-btn--line:hover {
  background: #036A32;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(6,199,85,0.3);
}
.njt-faq__cta-btn--messenger {
  background: #0067CC; /* AA: white text 3.65->5.51 (was #0084FF) */
  color: #fff;
}
.njt-faq__cta-btn--messenger:hover {
  background: #005CB4;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,132,255,0.3);
}
.njt-faq__cta-btn--phone {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--text-white);
}
.njt-faq__cta-btn--phone:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════
   11b. SOCIAL PROOF CAROUSEL
═══════════════════════════════════════ */
.njt-social-proof {
  padding: 48px 0 32px;
}

/* Header: aggregate rating + arrows */
.njt-social-proof__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.njt-social-proof__aggregate {
  display: flex;
  align-items: center;
  gap: 14px;
}
.njt-social-proof__score {
  font-family: var(--font-display, var(--font-heading));
  font-size: 40px;
  font-weight: 900;
  color: var(--text-white);
  line-height: 1;
  letter-spacing: -0.02em;
}
.njt-social-proof__aggregate-detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.njt-social-proof__stars-row {
  color: var(--gold, #FFD700);
  font-size: 16px;
  letter-spacing: 2px;
  line-height: 1;
}
.njt-social-proof__count {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-white-40);
}

/* Nav arrows */
.njt-social-proof__nav {
  display: flex;
  gap: 8px;
}
.njt-social-proof__arrow {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  color: var(--text-white-60);
  cursor: pointer;
  transition: all 0.3s ease;
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
}
.njt-social-proof__arrow:hover {
  background: rgba(255,215,0,0.1);
  border-color: rgba(255,215,0,0.3);
  color: var(--gold);
}
.njt-social-proof__arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Carousel viewport */
.njt-social-proof__carousel {
  overflow: hidden;
  margin: 0 -4px;
}
.njt-social-proof__track {
  display: flex;
  gap: 20px;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  padding: 4px;
}

/* Card */
.njt-social-proof__card {
  flex: 0 0 calc(33.333% - 14px);
  min-width: 0;
  padding: 28px;
  background: linear-gradient(135deg, rgba(26,5,16,0.6) 0%, rgba(10,10,10,0.7) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg, 16px);
  transition: border-color 0.3s ease, transform 0.3s ease;
  position: relative;
  display: flex;
  flex-direction: column;
}
.njt-social-proof__card:hover {
  border-color: rgba(255,215,0,0.15);
  transform: translateY(-2px);
}

/* Decorative quote mark */
.njt-social-proof__quote {
  font-family: Georgia, serif;
  font-size: 56px;
  line-height: 1;
  color: var(--gold, #FFD700);
  opacity: 0.15;
  position: absolute;
  top: 16px;
  right: 24px;
  pointer-events: none;
}

/* Text */
.njt-social-proof__text {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-white-80);
  line-height: 1.7;
  margin-bottom: auto;
  padding-bottom: 20px;
}

/* Footer: avatar + author + stars */
.njt-social-proof__footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.njt-social-proof__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.njt-social-proof__author-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.njt-social-proof__name {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-white);
}
.njt-social-proof__meta {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text-white-40);
}
.njt-social-proof__stars {
  color: var(--gold, #FFD700);
  font-size: 11px;
  letter-spacing: 1px;
  flex-shrink: 0;
}

/* Dots */
.njt-social-proof__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}
.njt-social-proof__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  -webkit-appearance: none;
  appearance: none;
}
.njt-social-proof__dot:hover {
  background: rgba(255,255,255,0.3);
}
.njt-social-proof__dot.is-active {
  background: var(--gold, #FFD700);
  width: 24px;
  border-radius: 4px;
}

/* Responsive */
@media (max-width: 1023px) {
  .njt-social-proof__card {
    flex: 0 0 calc(50% - 10px);
  }
}
@media (max-width: 767px) {
  .njt-social-proof__card {
    flex: 0 0 calc(100% - 8px);
  }
  .njt-social-proof__score {
    font-size: 32px;
  }
  .njt-social-proof__header {
    margin-bottom: 16px;
  }
}

/* ═══════════════════════════════════════
   12. FLOATING CTA
═══════════════════════════════════════ */
.njt-floating-cta {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 900;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.njt-floating-cta.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.njt-floating-cta__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--gold, #FFD700), #FFC107);
  color: #000;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: var(--radius-pill, 50px);
  border: none;
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    0 8px 24px rgba(255,215,0,0.3),
    0 2px 8px rgba(0,0,0,0.3);
  transition: all 300ms ease;
  animation: floatingPulse 3s ease-in-out infinite;
}
.njt-floating-cta__btn:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow:
    0 12px 32px rgba(255,215,0,0.4),
    0 4px 12px rgba(0,0,0,0.3);
}
.njt-floating-cta__btn svg {
  width: 18px;
  height: 18px;
}
@keyframes floatingPulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(255,215,0,0.3), 0 2px 8px rgba(0,0,0,0.3); }
  50%      { box-shadow: 0 8px 32px rgba(255,215,0,0.5), 0 2px 8px rgba(0,0,0,0.3); }
}

/* ═══════════════════════════════════════
   13. SECTION ALTERNATION
═══════════════════════════════════════ */
.njt-section--alt {
  background: linear-gradient(180deg, rgba(5,5,5,0.95) 0%, rgba(42,0,24,0.3) 50%, rgba(5,5,5,0.95) 100%);
}

/* ═══════════════════════════════════════
   14. RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 1023px) {
  .njt-pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .njt-track-info {
    grid-template-columns: repeat(3, 1fr);
  }
  .njt-comparison__item {
    grid-template-columns: 140px 1fr 70px;
  }
  .njt-track-layout__inner {
    grid-template-columns: 1fr;
  }
  .njt-track-layout__image-wrap {
    min-height: 240px;
  }
  .njt-track-layout__details {
    padding: 28px;
  }
  .njt-track-carousel__slide {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 767px) {
  .njt-hero--pricing {
    height: auto;
    min-height: 480px;
    padding-bottom: 80px;
    clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
  }
  .njt-hero--pricing .njt-hero__content {
    padding-bottom: 48px;
  }
  .njt-hero--pricing .njt-hero__bg {
    background-position: center 50%;
  }
  .njt-hero--pricing .njt-hero__title {
    line-height: 1.2;
    margin-bottom: 12px;
  }
  .njt-hero--pricing .njt-hero__subtitle {
    margin-bottom: 20px;
  }
  .njt-hero--pricing .njt-hero__overline {
    letter-spacing: 3px;
    margin-bottom: 16px;
  }
  .njt-hero__scroll-cue {
    bottom: 28px;
    font-size: 9px;
  }
  .njt-hero__trust-strip {
    gap: 6px 14px;
    font-size: 11px;
    margin-top: 20px;
  }
  /* Hide last trust item on mobile */
  .njt-hero__trust-item:last-child,
  .njt-hero__trust-dot:last-of-type {
    display: none;
  }
  .njt-hud-nav {
    top: 64px;
  }
  .njt-hud-nav__link {
    font-size: 13px;
    padding: 1rem 1.25rem;
  }
  .njt-pricing-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .njt-track-info {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .njt-track-carousel__slide {
    aspect-ratio: 16 / 10;
  }
  .njt-track-carousel__arrow {
    width: 36px;
    height: 36px;
  }
  .njt-track-carousel__arrow svg {
    width: 16px;
    height: 16px;
  }
  .njt-track-carousel__overlay {
    padding: 16px 18px;
  }
  .njt-track-carousel__tag {
    font-size: 12px;
    padding: 5px 12px;
  }
  .njt-track-layout__highlights {
    flex-wrap: wrap;
    gap: 12px;
  }
  .njt-track-layout__highlight {
    flex: 1 1 calc(33% - 8px);
    min-width: 80px;
    padding: 10px 14px;
  }
  .njt-track-layout__highlight-value {
    font-size: 22px;
  }
  .njt-comparison {
    padding: 24px 16px;
  }
  .njt-comparison__item {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .njt-comparison__bar {
    height: 28px;
  }
  .njt-comparison__price {
    text-align: left;
  }
  .njt-hero__price-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    justify-content: flex-start;
    padding: 8px 16px 0;
    gap: 10px;
    margin-top: 24px;
    scrollbar-width: none;
  }
  .njt-hero__price-pills::-webkit-scrollbar { display: none; }
  .njt-hero__price-pill {
    flex-shrink: 0;
    scroll-snap-align: center;
  }
  .njt-hero__price-pill--featured {
    transform: scale(1);
  }
  .njt-hero__pill-tag {
    top: -8px;
    font-size: 8px;
  }
  .njt-pricing-card__amount {
    font-size: 40px;
  }
  .njt-floating-cta {
    bottom: 16px;
    right: 16px;
    left: 16px;
  }
  .njt-floating-cta__btn {
    width: 100%;
    justify-content: center;
  }
  .njt-cta-banner {
    padding: 48px 16px;
  }

  /* Bike rental table → stacked cards on mobile */
  .njt-pricing-table table,
  .njt-pricing-table thead,
  .njt-pricing-table tbody,
  .njt-pricing-table tr,
  .njt-pricing-table th,
  .njt-pricing-table td {
    display: block;
  }
  .njt-pricing-table colgroup {
    display: none;
  }
  .njt-pricing-table thead {
    display: none;
  }
  .njt-pricing-table tbody tr {
    margin-bottom: 16px;
    padding: 0;
    border-radius: var(--radius-lg, 16px);
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
    position: relative;
    overflow: hidden;
  }
  .njt-pricing-table__row--highlight {
    border-color: rgba(255,215,0,0.12) !important;
  }
  .njt-pricing-table__row--pro {
    border-color: rgba(212,0,121,0.15) !important;
  }
  .njt-pricing-table td {
    padding: 2px 20px;
    border-bottom: none;
    text-align: left;
  }
  /* Image spans full width on mobile card */
  .njt-pricing-table__img-cell {
    padding: 0 !important;
    width: 100% !important;
    margin-bottom: 16px;
  }
  .njt-pricing-table__img {
    width: 100%;
    height: 160px;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .njt-pricing-table__bike-cell {
    margin-bottom: 8px;
    padding-top: 0 !important;
  }
  .njt-pricing-table__bike-name {
    font-size: 17px;
  }
  .njt-pricing-table__bike-desc {
    font-size: 13px;
    margin-top: 2px;
  }
  /* Inline CC + level on mobile */
  .njt-pricing-table td:nth-child(3) {
    display: inline-block;
    margin-right: 12px;
  }
  .njt-pricing-table td:nth-child(4) {
    display: inline-block;
  }
  .njt-pricing-table__price-cell {
    font-size: 22px !important;
    color: var(--gold) !important;
    margin: 10px 0;
    padding-top: 8px !important;
  }
  .njt-pricing-table td:last-child {
    margin-top: 4px;
    padding-bottom: 20px !important;
  }
  .njt-pricing-table__btn {
    width: 100%;
    justify-content: center;
  }

  .njt-courses-progression {
    display: none;
  }
}

@media (max-width: 480px) {
  .njt-track-info {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════
   15. REDUCED MOTION
═══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .njt-hero__speed-line,
  .njt-floating-cta__btn,
  .njt-hero__scroll-cue svg,
  .njt-hero--pricing .njt-hero__overline::after {
    animation: none;
  }
  .njt-hero--pricing .njt-hero__title {
    animation: fadeInUp 0.4s var(--ease-expo-out) 0.15s both;
  }
  .njt-hero__embers {
    display: none;
  }
  .njt-comparison__bar-fill {
    transition-duration: 0.01s;
  }
  .njt-pricing-card__badge {
    animation: 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  (pricing)
   ═══════════════════════════════════════════════════════════════════════════ */

/* PRO card ground moved off an inline style so the block is byte-identical
   with training.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); }

.njt-course-card__footer .njt-rate { width: 100%; }

/* Add-on pills / add-on cards: rate device replaces the 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; }
.njt-addon-card__prices .njt-rate { width: 100%; }

/* Bike-rental table: the "ราคา (บาท)" column became "เรท / Rate". */
.njt-pricing-table__price-cell .njt-rate { gap: 4px; }
.njt-pricing-table__price-cell .njt-rate__unit { font-size: 14px; font-weight: 600; }
.njt-pricing-table__price-cell .njt-rate__link { font-size: 12px; }

/* Track-rental cards: every decision row now carries a .btn-cta primary
   (the --ghost / --primary fork is retired). */
.njt-pricing-card__cta.btn-cta { width: 100%; justify-content: center; margin-top: auto; }

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

/* ── Hero rate chips (§G8): the "ask" line is the affordance, so it carries the arrow. ── */
.njt-hero__price-card-ask {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--gold);
}
.njt-hero__price-card-ask svg { width: 14px; height: 14px; transition: transform var(--dur-base, 300ms) var(--ease-out, ease); }
.njt-hero__price-card:hover .njt-hero__price-card-ask svg { transform: translateX(3px); }

/* Rate device inside a pricing card sits in the old price slot. */
.njt-pricing-card__rate { margin-bottom: 18px; }

/* Add-on cards: the decision row is the canonical .btn-cta primary
   (was a white/4 ghost while impulse products got gradients — G4 hierarchy law). */
.njt-addon-card__cta.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 16px 20px 20px;
  padding: 12px 20px;
  width: calc(100% - 40px);
  border-radius: 0;
  letter-spacing: 0.02em;
}
.njt-addon-card--featured .njt-addon-card__cta.btn-cta { margin-top: auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   §G8 — MOBILE STICKY SUB-NAV MUST SCROLL.
   At 390px the five links measure ~630px wide; links 4–5 (เช่าสนาม / บริการเสริม)
   sat past the right edge with no way to reach them. The rail is now an explicit
   snap scroller with a right-edge fade so the overflow is legible.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #pricing-nav { position: sticky; }
  #pricing-nav .njt-hud-nav__inner {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 12px;
    padding-inline: 12px 28px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 34px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 34px), transparent 100%);
  }
  #pricing-nav .njt-hud-nav__inner::-webkit-scrollbar { display: none; }
  #pricing-nav .njt-hud-nav__link {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 0.9rem 1rem;
    font-size: 13px;
  }
}

/* ── Hero chips stack below 640 (they wrapped mid-phrase in a 3-up flex row) ── */
@media (max-width: 640px) {
  .njt-hero__price-showcase {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 0 20px;
    width: 100%;
  }
  .njt-hero__price-card {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 4px 10px;
    min-width: 0;
    width: 100%;
    padding: 14px 16px;
    text-align: left;
  }
  .njt-hero__price-card-icon { flex: none; }
  .njt-hero__price-card-label { flex: 1 1 auto; }
  .njt-hero__price-card-period { font-size: 15px; flex: none; }
  .njt-hero__price-card-ask { flex-basis: 100%; }
  .njt-hero__price-card-tag { position: static; align-self: flex-start; }
}