/* ============================================================
   home.css
   Home (individual) page styles.
   ============================================================ */

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;
  background: var(--brand-deep-bg);
  color: var(--brand-deep-text);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, var(--alpha-aqua-20), transparent 45%),
    radial-gradient(circle at 85% 70%, var(--alpha-aqua-10), transparent 50%),
    radial-gradient(circle at 50% 100%, var(--alpha-blue-20), transparent 55%);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--alpha-darkblue-10) 1px, transparent 1px),
    linear-gradient(90deg, var(--alpha-darkblue-10) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: 0 0;
  opacity: 0.35;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  padding: var(--space-20) var(--gutter-desktop) var(--space-16);
  max-width: var(--container-max);
  margin-inline: auto;
  display: grid;
  gap: var(--space-10);
}
@media (max-width: 1023px) {
  .hero__inner { padding-inline: var(--gutter-tablet); padding-block: var(--space-16) var(--space-12); }
}
@media (max-width: 639px) {
  .hero__inner { padding-inline: var(--gutter-mobile); padding-block: var(--space-12) var(--space-10); }
}

.hero__main {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--space-12);
  align-items: center;
}
@media (max-width: 1023px) {
  .hero__main { grid-template-columns: 1fr; gap: var(--space-10); }
}

.hero__content {
  display: grid;
  gap: var(--space-6);
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-deep-accent);
  font-weight: 500;
}
.hero__eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--aqua-400);
}

.hero__headline {
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  line-height: 1.02;
  font-weight: 700;
  color: var(--brand-deep-text);
  letter-spacing: -0.025em;
  max-width: 18ch;
}
.hero__headline-accent {
  color: var(--aqua-300);
  text-transform: uppercase;
  letter-spacing: 0.005em;
  display: block;
  margin-top: var(--space-1);
}

.hero__subhead {
  font-size: clamp(1rem, 1.2vw + 0.7rem, 1.125rem);
  line-height: clamp(1.5rem, 1.5vw + 1rem, 1.75rem);
  color: var(--brand-deep-accent);
  max-width: 56ch;
  margin-top: var(--space-2);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* Instructor faces strip — placeholder treatment.
   Will be replaced with real circular instructor photos. */
.hero__instructors {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--alpha-blue-25);
}
.hero__instructors-stack {
  display: inline-flex;
  align-items: center;
}
.hero__instructor-face {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--coolgray);
  border: 2px solid var(--brand-deep-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-600);
  margin-left: -10px;
  position: relative;
}
.hero__instructor-face:first-child { margin-left: 0; }
.hero__instructor-face svg { width: 18px; height: 18px; }
/* Subtle per-face neutral variation so the stack reads as different people */
.hero__instructor-face--1 { background: var(--coolgray); }
.hero__instructor-face--2 { background: var(--gray-100); }
.hero__instructor-face--3 { background: var(--coolgray-dark); }
.hero__instructor-face--4 { background: var(--gray-200); }
.hero__instructor-face--5 { background: var(--coolgray); }

.hero__instructors-copy {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--brand-deep-accent);
  line-height: 1.4;
}
.hero__instructors-copy strong {
  color: var(--brand-deep-text);
  font-weight: 600;
}
.hero__instructors-placeholder-tag {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--alpha-blue-10);
  border: 1px dashed var(--alpha-blue-25);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-deep-accent);
  font-weight: 600;
}

.hero__cta-secondary {
  background: transparent;
  color: var(--brand-deep-text);
  border-color: var(--alpha-blue-25);
}
.hero__cta-secondary:hover {
  border-color: var(--brand-deep-accent);
  background: var(--alpha-blue-10);
}
.hero__cta-secondary:focus-visible {
  outline: 2px solid var(--brand-deep-accent);
  outline-offset: 2px;
}
.hero__cta-secondary .sparkle-icon { color: var(--aqua-300); }

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--alpha-blue-25);
}
.hero__stat-value {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--brand-deep-text);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}
.hero__stat-label {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand-deep-accent);
}
@media (max-width: 639px) {
  .hero__stats { gap: var(--space-6); }
  .hero__stat-value { font-size: var(--text-2xl); }
}

/* ============================================================
   HERO PRODUCT CARD (right side)
   Shows a live learning-journey snapshot — Phase 2 in progress.
   Demonstrates the AI Planner + real classes + AI Coach loop.
   ============================================================ */

.hero__product {
  position: relative;
  background: var(--alpha-deep-50);
  border: 1px solid var(--alpha-blue-25);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: grid;
  gap: var(--space-3);
  box-shadow: 0 24px 48px var(--alpha-black-20);
}
.hero__product::before {
  /* corner glow */
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle at top right, var(--alpha-aqua-30), transparent 70%);
  border-radius: var(--radius-xl);
  pointer-events: none;
}

.hero__product-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--alpha-blue-25);
}
.hero__product-eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-deep-accent);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.hero__product-eyebrow svg {
  width: 14px;
  height: 14px;
  color: var(--ai-accent);
}
.hero__product-status {
  margin-left: auto;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--aqua-300);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.hero__product-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--aqua-300);
  box-shadow: 0 0 0 3px var(--alpha-aqua-bright-20);
  animation: pulse-dot 1.8s ease-in-out 3;
  animation-fill-mode: forwards;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 3px var(--alpha-aqua-bright-20); }
  50%      { box-shadow: 0 0 0 5px var(--alpha-aqua-bright-10); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__product-status::before { animation: none; }
}

.hero__product-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--brand-deep-text);
  line-height: 1.35;
}
.hero__product-phase {
  font-size: var(--text-xs);
  color: var(--brand-deep-accent);
  font-weight: 500;
}

.hero__product-class {
  background: var(--alpha-deep-40);
  border: 1px solid var(--alpha-blue-25);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: grid;
  gap: var(--space-2);
}
/* "In progress" / "Upcoming" tags carry state — no side stripe needed */
.hero__product-class--current {
  background: var(--alpha-aqua-10);
  border-color: var(--alpha-aqua-bright-30);
}
.hero__product-class--next {
  opacity: 0.92;
}
.hero__product-class-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.hero__product-class-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--brand-deep-text);
  line-height: 1.3;
}
.hero__product-class-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aqua-300);
  white-space: nowrap;
}
.hero__product-class--next .hero__product-class-tag {
  color: var(--brand-deep-accent);
}
.hero__product-class-meta {
  font-size: var(--text-xs);
  color: var(--brand-deep-accent);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.hero__product-progress {
  height: 4px;
  background: var(--alpha-blue-25);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.hero__product-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--aqua-400), var(--aqua-300));
  border-radius: var(--radius-full);
}

.hero__product-coach {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3);
  background: var(--alpha-aqua-20);
  border: 1px solid var(--alpha-aqua-40);
  border-radius: var(--radius-md);
}
.hero__product-coach-icon {
  width: 28px;
  height: 28px;
  background: var(--alpha-aqua-30);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--aqua-300);
  flex-shrink: 0;
}
.hero__product-coach-icon svg { width: 14px; height: 14px; }
.hero__product-coach-text {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--brand-deep-accent);
  line-height: 1.45;
}
.hero__product-coach-text strong {
  color: var(--brand-deep-text);
  font-weight: 600;
}

/* ============================================================
   HOW IT WORKS — 3-step strip between hero and AI teaser
   ============================================================ */

.how-it-works {
  padding: var(--space-16) 0;
  background: var(--surface-page);
  border-bottom: 1px solid var(--border-default);
}
.how-it-works__header {
  text-align: center;
  margin-bottom: var(--space-10);
}
.how-it-works__title {
  font-size: var(--text-2xl);
  line-height: var(--leading-2xl);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  max-width: 32ch;
  margin-inline: auto;
}
.how-it-works__subtitle {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin-top: var(--space-2);
  max-width: 48ch;
  margin-inline: auto;
}
.how-it-works__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  position: relative;
}
@media (max-width: 1023px) {
  .how-it-works__grid { grid-template-columns: 1fr; gap: var(--space-6); }
}
.how-it-works__step {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}
.how-it-works__step-num {
  font-size: var(--text-4xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--ai-accent);
  line-height: 0.9;
  font-feature-settings: "tnum" 1;
}
.how-it-works__step-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  line-height: var(--leading-lg);
}
.how-it-works__step-body {
  font-size: var(--text-sm);
  line-height: var(--leading-base);
  font-weight: 500;
  color: var(--text-secondary);
}

/* ============================================================
   TEAM CTA — cross-funnel band (individual → enterprise)
   ============================================================ */

.team-cta {
  background: var(--surface-page);
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
  padding: var(--space-12) 0;
}
.team-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
}
.team-cta__content {
  flex: 1;
  min-width: 280px;
}
.team-cta__eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.team-cta__title {
  font-size: var(--text-2xl);
  line-height: var(--leading-2xl);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
}
.team-cta__body {
  font-size: var(--text-base);
  color: var(--text-secondary);
  font-weight: 500;
  margin-top: var(--space-2);
  max-width: 60ch;
}
.team-cta__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* ============================================================
   POLISH
   ============================================================ */

/* Pathway sample tags: render as small pills, not run-on text */
.pathway-card__samples {
  /* preserve flex + gap from existing rule */
}
.pathway-card__sample {
  display: inline-block;
  padding: 2px var(--space-2);
  background: var(--surface-subtle);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Academy top stripe: thicker so the per-academy color reads */
.academy-card::before {
  height: 6px;
}

/* Why NExT icons: outlined / subtle, not solid dark blocks */
.why-card__icon {
  background: var(--ai-bg);
  color: var(--ai-text);
  border: 1px solid var(--ai-border);
}

/* Top rated: tighter row padding, smaller rank */
.top-rated-row { padding: var(--space-3) var(--space-4); }
.top-rated-row__rank { font-size: var(--text-sm); }

/* ============================================================
   SECTION primitive — shared by all Home sections
   ============================================================ */

.section {
  padding: var(--space-24) 0;
}
@media (max-width: 1023px) { .section { padding: var(--space-16) 0; } }
@media (max-width: 639px)  { .section { padding: var(--space-12) 0; } }

.section--tinted {
  background: var(--surface-subtle);
}
.section--brand {
  background: var(--brand-deep-bg);
  color: var(--brand-deep-text);
}
/* Dense modifier — for less weighty sections, breaks vertical monotony */
.section--dense {
  padding: var(--space-16) 0;
}
@media (max-width: 1023px) { .section--dense { padding: var(--space-12) 0; } }
@media (max-width: 639px)  { .section--dense { padding: var(--space-10) 0; } }

.section__header {
  margin-bottom: var(--space-10);
  max-width: 64ch;
  display: grid;
  gap: var(--space-2);
}
.section__header--wide { max-width: 90ch; }
.section__header--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  max-width: 100%;
  flex-wrap: wrap;
}
.section__header--row > .section__title-group {
  display: grid;
  gap: var(--space-2);
  max-width: 64ch;
}

.section__eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 600;
}
.section--brand .section__eyebrow { color: var(--brand-deep-accent); }

.section__title {
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}
.section--brand .section__title { color: var(--brand-deep-text); }

.section__subtitle {
  font-size: var(--text-base);
  line-height: var(--leading-base);
  color: var(--text-secondary);
  max-width: 56ch;
  margin-top: var(--space-1);
}
.section--brand .section__subtitle { color: var(--brand-deep-accent); }

.section__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-link);
  text-decoration: none;
  flex-shrink: 0;
}
.section__link:hover { color: var(--text-link-hover); text-decoration: underline; }
.section__link::after {
  content: " →";
  transition: transform var(--duration-fast) var(--ease-out);
  display: inline-block;
}
.section__link:hover::after { transform: translateX(2px); }

/* ============================================================
   AI TEASER SECTION
   ============================================================ */

.ai-teaser {
  background: linear-gradient(180deg, var(--ai-bg) 0%, var(--surface-page) 100%);
  position: relative;
  overflow: hidden;
}
.ai-teaser::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 90% 10%, var(--alpha-aqua-20), transparent 35%),
    radial-gradient(circle at 5% 90%, var(--alpha-aqua-10), transparent 35%);
  pointer-events: none;
}

/* ---- Top dramatic band ---- */
.ai-teaser__try {
  position: relative;
  background: var(--brand-deep-bg);
  color: var(--brand-deep-text);
  border-radius: var(--radius-2xl);
  padding: var(--space-16) var(--space-12);
  display: grid;
  gap: var(--space-6);
  justify-items: center;
  text-align: center;
  margin-bottom: var(--space-16);
  overflow: hidden;
  z-index: 1;
}
.ai-teaser__try::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 25%, var(--alpha-aqua-40), transparent 50%),
    radial-gradient(circle at 80% 80%, var(--alpha-aqua-20), transparent 50%);
  pointer-events: none;
}
.ai-teaser__try::after {
  /* faint grid for technical credibility, matches hero */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--alpha-lightblue-5) 1px, transparent 1px),
    linear-gradient(90deg, var(--alpha-lightblue-5) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.ai-teaser__try > * { position: relative; z-index: 1; }

@media (max-width: 639px) {
  .ai-teaser__try { padding: var(--space-12) var(--space-6); }
}

.ai-teaser__try-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--alpha-blue-10);
  border: 1px solid var(--alpha-blue-25);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-deep-accent);
}
.ai-teaser__try-eyebrow svg { width: 12px; height: 12px; color: var(--aqua-300); }

.ai-teaser__try-headline {
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.08;
  font-weight: 700;
  color: var(--brand-deep-text);
  max-width: 22ch;
  letter-spacing: var(--tracking-tight);
}
.ai-teaser__try-headline-accent {
  color: var(--aqua-300);
}

.ai-teaser__try-sub {
  font-size: var(--text-base);
  color: var(--brand-deep-accent);
  max-width: 56ch;
  font-weight: 500;
}

.ai-teaser__try-form {
  width: 100%;
  max-width: 680px;
  display: flex;
  gap: var(--space-2);
  background: var(--alpha-deep-50);
  border: 1px solid var(--alpha-blue-25);
  border-radius: var(--radius-xl);
  padding: var(--space-2);
  box-shadow: 0 8px 32px var(--alpha-black-20);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.ai-teaser__try-form:focus-within {
  border-color: var(--aqua-400);
  box-shadow: 0 8px 32px var(--alpha-black-20), 0 0 0 4px var(--alpha-aqua-20);
}
.ai-teaser__try-form input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  font-size: var(--text-base);
  color: var(--brand-deep-text);
  padding: 0 var(--space-4);
  height: 48px;
  font-weight: 500;
  font-family: inherit;
}
.ai-teaser__try-form input::placeholder { color: var(--brand-deep-accent); opacity: 0.7; }
.ai-teaser__try-form input:focus { outline: none; }
.ai-teaser__try-form button {
  flex-shrink: 0;
}
@media (max-width: 639px) {
  .ai-teaser__try-form { flex-direction: column; padding: var(--space-3); border-radius: var(--radius-lg); }
  .ai-teaser__try-form button { width: 100%; }
}

.ai-teaser__try-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}
.ai-teaser__try-chip {
  background: var(--alpha-blue-10);
  border: 1px solid var(--alpha-blue-25);
  color: var(--brand-deep-accent);
  height: 32px;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
  font-family: inherit;
}
.ai-teaser__try-chip:hover {
  background: var(--alpha-blue-25);
  border-color: var(--brand-deep-accent);
  color: var(--brand-deep-text);
  transform: translateY(-1px);
}
.ai-teaser__try-chip:focus-visible {
  outline: 2px solid var(--aqua-300);
  outline-offset: 2px;
}

/* AI teaser "real example" section — left column content */
.ai-teaser__example-title {
  font-size: var(--text-2xl);
  line-height: var(--leading-2xl);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin-top: var(--space-2);
}
.ai-teaser__example-body {
  font-size: var(--text-base);
  line-height: var(--leading-base);
  font-weight: 500;
  color: var(--text-secondary);
  margin-top: var(--space-3);
}
.ai-teaser__example-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

/* Maya inputs callout — bg tint + leading label, no side stripe */
.ai-teaser__inputs-callout {
  margin-top: var(--space-3);
  padding: var(--space-4);
  background: var(--ai-bg);
  border: 1px solid var(--ai-border);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-1);
}
.ai-teaser__inputs-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ai-text);
}
.ai-teaser__inputs-list {
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: var(--leading-base);
  color: var(--text-primary);
}

/* ---- Bottom supporting content ---- */
.ai-teaser__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-12);
  align-items: center;
}
@media (max-width: 1023px) {
  .ai-teaser__inner { grid-template-columns: 1fr; gap: var(--space-8); }
}

.ai-teaser__content { display: grid; gap: var(--space-4); }

.ai-teaser__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--surface-page);
  border: 1px solid var(--ai-border);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ai-text);
  width: max-content;
}
.ai-teaser__eyebrow svg { width: 14px; height: 14px; color: var(--ai-accent); }

.ai-teaser__headline {
  font-size: clamp(1.875rem, 3.5vw, 3rem);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}
.ai-teaser__headline-accent { color: var(--ai-text); }

.ai-teaser__body {
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  color: var(--text-secondary);
  max-width: 52ch;
}

.ai-teaser__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.ai-teaser__form {
  margin-top: var(--space-6);
  padding: var(--space-6);
  background: var(--surface-page);
  border: 1px solid var(--ai-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: var(--space-3);
}
.ai-teaser__form-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
}
.ai-teaser__form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
@media (max-width: 639px) {
  .ai-teaser__form-row { grid-template-columns: 1fr; }
}
.ai-teaser__form input,
.ai-teaser__form select {
  height: var(--size-md);
  padding: 0 var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-page);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  transition: border-color var(--duration-fast) var(--ease-out);
}
.ai-teaser__form input:focus-visible,
.ai-teaser__form select:focus-visible {
  outline: 2px solid var(--ai-accent);
  outline-offset: 2px;
}
.ai-teaser__form input::placeholder { color: var(--text-muted); }
.ai-teaser__form-audience {
  display: flex;
  background: var(--surface-subtle);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-0_5);
  gap: var(--space-0_5);
}
.ai-teaser__form-audience input { display: none; }
.ai-teaser__form-audience label {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.ai-teaser__form-audience input:checked + label {
  background: var(--surface-page);
  color: var(--ai-text);
  box-shadow: var(--shadow-sm);
}
.ai-teaser__form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.ai-teaser__form-privacy {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-muted);
  flex: 1;
}

/* Right panel — visual mock of planner output */
.ai-teaser__mock {
  position: relative;
  background: var(--surface-page);
  border: 1px solid var(--ai-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  padding: var(--space-6);
  display: grid;
  gap: var(--space-3);
}
.ai-teaser__mock-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--ai-border);
}
.ai-teaser__mock-icon {
  width: 40px;
  height: 40px;
  background: var(--ai-bg);
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ai-accent);
  flex-shrink: 0;
}
.ai-teaser__mock-icon svg { width: 20px; height: 20px; }
.ai-teaser__mock-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
}
.ai-teaser__mock-goal {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-secondary);
  margin-top: var(--space-0_5);
}
.ai-teaser__mock-meta {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-weight: 500;
}
.ai-teaser__mock-meta strong { color: var(--ai-text); font-weight: 700; }

.ai-teaser__phase {
  background: var(--ai-bg);
  border: 1px solid var(--ai-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.ai-teaser__phase + .ai-teaser__phase { margin-top: var(--space-2); }
.ai-teaser__phase-title {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ai-text);
  margin-bottom: var(--space-1);
}
.ai-teaser__phase-courses {
  display: grid;
  gap: var(--space-1);
}
.ai-teaser__phase-course {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
}
.ai-teaser__phase-course svg { width: 14px; height: 14px; color: var(--ai-accent); flex-shrink: 0; }

/* ============================================================
   DISCIPLINE MOSAIC — variable-span category tiles
   Replaces the 4-up pathway grid with a more distinctive layout.
   ============================================================ */

.disciplines-mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
@media (max-width: 1023px) {
  .disciplines-mosaic { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .disciplines-mosaic { grid-template-columns: 1fr; }
}

.discipline-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--surface-page);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  min-height: 168px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.discipline-tile:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
}
.discipline-tile:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.discipline-tile__head { display: grid; gap: var(--space-1); }
.discipline-tile__meta {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.discipline-tile__name {
  font-size: var(--text-xl);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}
.discipline-tile__hook {
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: var(--leading-base);
  color: var(--text-secondary);
}
.discipline-tile__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-link);
  align-self: flex-start;
}
.discipline-tile__cta::after { content: "→"; transition: transform var(--duration-fast) var(--ease-out); }
.discipline-tile:hover .discipline-tile__cta::after { transform: translateX(3px); }

/* Featured tile — spans 2 columns, deep-brand band */
.discipline-tile--featured {
  grid-column: span 2;
  min-height: 220px;
  background: var(--brand-deep-bg);
  border-color: transparent;
  color: var(--brand-deep-text);
  position: relative;
  overflow: hidden;
}
.discipline-tile--featured::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, var(--alpha-aqua-20), transparent 50%),
    radial-gradient(circle at 10% 90%, var(--alpha-aqua-10), transparent 50%);
  pointer-events: none;
}
.discipline-tile--featured > * { position: relative; z-index: 1; }
.discipline-tile--featured .discipline-tile__meta { color: var(--brand-deep-accent); }
.discipline-tile--featured .discipline-tile__name {
  color: var(--brand-deep-text);
  font-size: var(--text-3xl);
  line-height: 1.05;
}
.discipline-tile--featured .discipline-tile__hook { color: var(--brand-deep-accent); max-width: 42ch; }
.discipline-tile--featured .discipline-tile__cta { color: var(--aqua-300); }
.discipline-tile--featured:hover { transform: translateY(-2px); }
@media (max-width: 1023px) {
  .discipline-tile--featured { grid-column: span 2; }
  .discipline-tile--featured .discipline-tile__name { font-size: var(--text-2xl); }
}
@media (max-width: 639px) {
  .discipline-tile--featured { grid-column: auto; min-height: 168px; }
}

/* AI tile — only discipline that gets the aqua-blue AI accent.
   CCS and Energy Transition deliberately stay neutral to respect the brand policy
   (no status colors for non-status purposes; no green / pink / purple as decoration). */
.discipline-tile--ai {
  background: var(--ai-bg);
  border-color: var(--ai-border);
}
.discipline-tile--ai .discipline-tile__name { color: var(--ai-text); }
.discipline-tile--ai .discipline-tile__cta { color: var(--ai-text); }

.pathway-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--surface-page);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
  min-height: 240px;
}
.pathway-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
}
.pathway-card:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.pathway-card__icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--action-primary-soft-bg);
  color: var(--action-primary-soft-text);
  border-radius: var(--radius-md);
}
.pathway-card__icon svg { width: 22px; height: 22px; }
.pathway-card__title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
}
.pathway-card__samples {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-secondary);
  line-height: var(--leading-sm);
}
.pathway-card__cta {
  margin-top: auto;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-link);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.pathway-card__cta::after { content: "→"; transition: transform var(--duration-fast) var(--ease-out); }
.pathway-card:hover .pathway-card__cta::after { transform: translateX(3px); }

/* ============================================================
   ACADEMIES
   ============================================================ */

/* Asymmetric layout: featured academy left (1×3), three secondaries stack right */
.academies-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  grid-auto-rows: 1fr;
  gap: var(--space-4);
}
@media (max-width: 1023px) {
  .academies-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
}

.academy-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--surface-page);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.academy-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--academy-accent, var(--action-primary-bg));
}
.academy-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
}
.academy-card:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
/* All academy stripe accents stay in the brand-blue + aqua-blue family.
   Per brand policy: status colors (green/yellow/orangered/pink) are not used as decoration. */
.academy-card--ai    { --academy-accent: var(--ai-bg-strong); }   /* aqua-600 */
.academy-card--ccs   { --academy-accent: var(--aqua-700); }       /* deeper aqua */
.academy-card--et    { --academy-accent: var(--blue-500); }       /* electric blue */
.academy-card--data  { --academy-accent: var(--blue-600); }       /* action blue */

/* Featured academy — spans the full left column, larger treatment */
.academy-card--featured {
  grid-row: 1 / span 3;
  grid-column: 1;
  padding: var(--space-8);
  gap: var(--space-4);
}
.academy-card--featured .academy-card__name {
  font-size: var(--text-3xl);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  margin-top: var(--space-2);
}
.academy-card--featured .academy-card__meta {
  font-size: var(--text-sm);
}
.academy-card--featured .academy-card__body {
  font-size: var(--text-base);
  line-height: var(--leading-base);
  max-width: 56ch;
}
@media (max-width: 1023px) {
  .academy-card--featured { grid-row: auto; grid-column: auto; padding: var(--space-6); }
  .academy-card--featured .academy-card__name { font-size: var(--text-2xl); }
}

.academy-card__featured-label {
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ai-text);
}

.academy-card__highlights {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
.academy-card__highlights li {
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-secondary);
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}
.academy-card__highlights li::before {
  content: "✓";
  color: var(--ai-accent);
  font-weight: 700;
  flex-shrink: 0;
}

.academy-card__name {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin-top: var(--space-1);
}
.academy-card__meta {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-weight: 500;
  display: flex;
  gap: var(--space-2);
}
.academy-card__meta strong { color: var(--text-primary); font-weight: 600; }
.academy-card__body {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  font-weight: 500;
  color: var(--text-secondary);
  flex: 1;
}
.academy-card__cta {
  margin-top: auto;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-link);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.academy-card__cta::after { content: "→"; transition: transform var(--duration-fast) var(--ease-out); }
.academy-card:hover .academy-card__cta::after { transform: translateX(3px); }

/* ============================================================
   CONFIRMED CLASSES — date-led timeline (replaces 4-up grid)
   Each row: big date on the left, course details middle,
   wishlist + price + Reserve seat CTA on the right.
   ============================================================ */

.classes-timeline {
  display: grid;
  gap: var(--space-3);
}

.classes-timeline__row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  gap: var(--space-6);
  padding: var(--space-5) var(--space-6);
  background: var(--surface-page);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.classes-timeline__row:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  transform: translateX(2px);
  color: inherit;
  text-decoration: none;
}
.classes-timeline__row:focus-within {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
@media (max-width: 1023px) {
  .classes-timeline__row {
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-areas: "date content" "date actions";
    gap: var(--space-3) var(--space-5);
    align-items: start;
  }
  .classes-timeline__date    { grid-area: date; align-self: start; }
  .classes-timeline__content { grid-area: content; }
  .classes-timeline__actions { grid-area: actions; padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); justify-content: space-between; }
}
@media (max-width: 639px) {
  .classes-timeline__row {
    grid-template-columns: 1fr;
    grid-template-areas: "date" "content" "actions";
    padding: var(--space-4) var(--space-5);
  }
  .classes-timeline__date { display: flex; align-items: baseline; gap: var(--space-2); }
  .classes-timeline__date-day { font-size: var(--text-2xl); }
}

.classes-timeline__date {
  display: grid;
  gap: var(--space-0_5);
}
.classes-timeline__date-day {
  font-size: var(--text-4xl);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--action-primary-bg);
  line-height: 0.95;
  font-feature-settings: "tnum" 1;
}
.classes-timeline__date-month {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.classes-timeline__content {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}
.classes-timeline__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.classes-timeline__title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  letter-spacing: var(--tracking-tight);
}
.classes-timeline__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
}
.classes-timeline__meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.classes-timeline__meta-star {
  color: var(--yellow-600);
  flex-shrink: 0;
}
.classes-timeline__meta-rating {
  color: var(--text-primary);
  font-weight: 600;
}

.classes-timeline__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.classes-timeline__price {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1;
}
.classes-timeline__price-suffix {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 2px;
}

/* Inline wishlist button (relative position, fits in the row) */
.classes-timeline__wishlist {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.classes-timeline__wishlist:hover {
  color: var(--orangered-600);
  border-color: var(--orangered-300);
}
.classes-timeline__wishlist[aria-pressed="true"] {
  color: var(--orangered-600);
  border-color: var(--orangered-300);
  background: var(--status-danger-bg);
}
.classes-timeline__wishlist[aria-pressed="true"] svg { fill: currentColor; }
.classes-timeline__wishlist svg { width: 16px; height: 16px; }
.classes-timeline__wishlist:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ============================================================
   MEET THE EXPERTS — Masterclass-inspired instructor band
   ============================================================ */

.experts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
@media (max-width: 1023px) { .experts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px)  { .experts-grid { grid-template-columns: 1fr; } }

.expert-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
}

/* Portrait placeholder — square aspect, dashed border + label tag */
.expert-card__portrait {
  aspect-ratio: 4 / 5;
  background: var(--coolgray);
  border: 1px dashed var(--coolgray-dark);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-300);
  overflow: hidden;
  position: relative;
}
.expert-card__portrait svg { width: 64px; height: 64px; }
.expert-card__portrait-tag {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-page);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border-default);
}

.expert-card__name {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
}
.expert-card__role {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.4;
}
.expert-card__cred {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-muted);
  margin-top: var(--space-0_5);
}
.expert-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-2);
}
.expert-card__tag {
  font-size: 11px;
  font-weight: 500;
  padding: 2px var(--space-2);
  background: var(--action-primary-soft-bg);
  color: var(--action-primary-soft-text);
  border-radius: var(--radius-sm);
}

/* ============================================================
   TOP RATED — list
   ============================================================ */

.top-rated-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (max-width: 1023px) { .top-rated-list { grid-template-columns: 1fr; } }

.top-rated-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--surface-page);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.top-rated-row:hover {
  border-color: var(--border-strong);
  background: var(--surface-subtle);
  text-decoration: none;
  color: inherit;
}
.top-rated-row:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.top-rated-row__rank {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-muted);
  width: 24px;
  flex-shrink: 0;
}
.top-rated-row__body { flex: 1; min-width: 0; }
.top-rated-row__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-0_5);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.top-rated-row__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-secondary);
}
.top-rated-row__stars {
  color: var(--yellow-600);
  font-size: var(--text-xs);
}
.top-rated-row__star {
  color: var(--yellow-600);
  flex-shrink: 0;
}
.top-rated-row__rating {
  color: var(--text-primary);
  font-weight: 600;
  margin-right: var(--space-0_5);
}
.top-rated-row__cta {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-link);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.top-rated-row__cta::after { content: "→"; transition: transform var(--duration-fast) var(--ease-out); }
.top-rated-row:hover .top-rated-row__cta::after { transform: translateX(3px); }

/* ============================================================
   WHY NExT — 3 columns
   ============================================================ */

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}
@media (max-width: 1023px) { .why-grid { grid-template-columns: 1fr; gap: var(--space-6); } }

.why-card { display: grid; gap: var(--space-3); }
.why-card__icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-deep-bg);
  color: var(--brand-deep-accent);
  border-radius: var(--radius-md);
}
.why-card__icon svg { width: 22px; height: 22px; }
.why-card__title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--text-primary);
}
.why-card__body {
  font-size: var(--text-base);
  line-height: var(--leading-base);
  color: var(--text-secondary);
}

/* ============================================================
   PROOF
   ============================================================ */

/* Stat strip — bare on the dark band with vertical dividers (no card chrome) */
.proof__stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin-bottom: var(--space-16);
}
@media (max-width: 1023px) { .proof__stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-6) 0; } }
@media (max-width: 639px)  { .proof__stats { grid-template-columns: 1fr; gap: var(--space-6); } }

.proof__stat {
  text-align: left;
  padding: 0 var(--space-6);
  border-left: 1px solid var(--alpha-blue-25);
}
.proof__stat:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 1023px) {
  .proof__stat { padding: 0 var(--space-4); }
  .proof__stat:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 639px) {
  .proof__stat { padding: 0; border-left: 0; }
}

.proof__stat-value {
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}
.section--brand .proof__stat-value { color: var(--brand-deep-text); }
.proof__stat-label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-secondary);
  margin-top: var(--space-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.section--brand .proof__stat-label { color: var(--brand-deep-accent); }

/* Testimonials — 3 cards on the dark proof band */
.proof__testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-12);
}
@media (max-width: 1023px) {
  .proof__testimonials { grid-template-columns: 1fr; gap: var(--space-3); margin-bottom: var(--space-10); }
}

.proof__testimonial {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--alpha-deep-30);
  border: 1px solid var(--alpha-blue-25);
  border-radius: var(--radius-xl);
  grid-template-rows: auto auto 1fr auto;
  align-content: start;
}

.proof__testimonial-mark {
  font-size: 40px;
  line-height: 0.5;
  color: var(--ai-accent);
  font-family: Georgia, serif;
  height: 20px;
  opacity: 0.7;
}

.proof__testimonial-text {
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--brand-deep-text);
  font-weight: 500;
}

.proof__testimonial-metric {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--alpha-blue-10);
  border: 1px solid var(--alpha-blue-25);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--brand-deep-text);
  letter-spacing: 0.02em;
  width: max-content;
  max-width: 100%;
}
.proof__testimonial-metric svg {
  width: 14px;
  height: 14px;
  color: var(--aqua-300);
  flex-shrink: 0;
}
.proof__testimonial-metric-value {
  color: var(--aqua-300);
  font-weight: 700;
}

.proof__testimonial-attribution {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--alpha-blue-25);
}

.proof__testimonial-portrait {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--coolgray);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-600);
  flex-shrink: 0;
  border: 1px dashed var(--alpha-blue-25);
}
.proof__testimonial-portrait svg { width: 20px; height: 20px; }

.proof__testimonial-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.proof__testimonial-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--brand-deep-text);
}
.proof__testimonial-role {
  font-size: var(--text-xs);
  color: var(--brand-deep-accent);
  font-weight: 500;
}

.proof__logos-label {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-deep-accent);
  font-weight: 600;
  text-align: center;
  margin-bottom: var(--space-6);
}
.proof__logos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
  align-items: center;
}
@media (max-width: 1023px) { .proof__logos { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 639px)  { .proof__logos { grid-template-columns: repeat(2, 1fr); } }

/* Logo tile — white card on the dark band, lifts on hover.
   Tile gives consistent presentation regardless of each PNG's
   inherent background / padding. */
.proof__logo-tile {
  background: var(--surface-page);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  width: 100%;
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.proof__logo-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.proof__logo {
  max-height: 40px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  display: block;
}