/* Main Styles - Landing Page */
/* Builds on variables.css for colors and fonts */

/* === Global Resets === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Root font size for rem calculations (16px base) */
html {
  font-size: 16px;
}

body {
  min-height: 100vh;
  width: 100%;
  background: #f9fafb;
  font-family: var(--font-secondary);
  color: var(--color-black);
  line-height: 1.6;
  padding: 0 1rem;
}

/* ========================================
   BASE CLASSES - Shared Components
   ======================================== */

/* Base Section Container - Single Source of Truth for Padding */
.section-container {
  max-width: 87.5rem;
  margin: var(--section-margin-vertical) auto;
  padding: var(--section-padding-vertical) var(--section-padding-horizontal);
  background: #f9fafb;
  border-radius: 2rem;
  position: relative;
  overflow: hidden;
  box-shadow: 
    0.75rem 0.75rem 1.5rem rgba(163, 177, 198, 0.6),
    -0.75rem -0.75rem 1.5rem rgba(255, 255, 255, 0.9),
    inset 0.125rem 0.125rem 0.25rem rgba(255, 255, 255, 0.3),
    inset -0.125rem -0.125rem 0.25rem rgba(163, 177, 198, 0.2);
}

/* Base Kicker/Label - Single Source of Truth */
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.8rem;
  border-radius: 62.5rem;
  background: #f9fafb;
  box-shadow: 
    0.3125rem 0.3125rem 0.625rem rgba(163, 177, 198, 0.35),
    -0.3125rem -0.3125rem 0.625rem rgba(255, 255, 255, 0.75);
  color: var(--color-primary-blue);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 0.75rem;
  width: fit-content;
}

.section-kicker-dot {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 62.5rem;
  background: var(--color-primary-orange);
  animation: pulse 2s ease-in-out infinite;
}

/* Kicker variations for different audiences - only color changes */
/* Using section color scheme variables for consistency */
[data-audience-section="parents"] .section-kicker-dot {
  background: var(--parents-accent-primary);
}

[data-audience-section="schools"] .section-kicker-dot {
  background: var(--schools-accent-primary);
}

/* Base Section Heading - Single Source of Truth */
.section-heading {
  font-family: var(--font-primary);
  font-size: 2rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-primary-blue);
  margin: 0 0 0.75rem 0;
  font-weight: 700;
}

/* Heading size variations */
.section-heading--large {
  font-size: 2.5rem;
}

.section-heading--xlarge {
  font-size: 3rem;
}

/* Base Section Subtitle - Single Source of Truth */
.section-subtitle {
  font-size: 1.0625rem;
  color: rgb(71, 85, 105);
  line-height: 1.65;
  margin: 0 0 2rem 0;
  max-width: 42.5rem;
}

/* Base Card */
.card-base {
  background: #f9fafb;
  border-radius: 1.5rem;
  padding: 1.75rem 1.5rem;
  box-shadow: 
    8px 8px 16px rgba(163, 177, 198, 0.35),
    -8px -8px 16px rgba(255, 255, 255, 0.85);
  border: none;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-base:hover {
  box-shadow: 
    6px 6px 12px rgba(163, 177, 198, 0.45),
    -6px -6px 12px rgba(255, 255, 255, 0.95),
    inset 3px 3px 6px rgba(163, 177, 198, 0.08),
    inset -3px -3px 6px rgba(255, 255, 255, 0.6);
  transform: translateY(-4px);
}

/* Base Icon Container */
.icon-base {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1.25rem;
  background: #f9fafb;
  box-shadow: 
    6px 6px 12px rgba(163, 177, 198, 0.4),
    -6px -6px 12px rgba(255, 255, 255, 0.9),
    inset 2px 2px 4px rgba(255, 255, 255, 0.5),
    inset -2px -2px 4px rgba(163, 177, 198, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base Pill/Badge */
.pill-base {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: #f9fafb;
  box-shadow: 
    4px 4px 8px rgba(163, 177, 198, 0.3),
    -4px -4px 8px rgba(255, 255, 255, 0.7);
  font-size: 0.75rem;
  font-weight: 500;
}

.pill-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--parents-accent-primary);
}

/* Base Neumorphic Button Icon */
.neuro-icon-base {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 999px;
  border: none;
  background: #f9fafb;
  box-shadow: 
    3px 3px 6px rgba(163, 177, 198, 0.4),
    -3px -3px 6px rgba(255, 255, 255, 0.8),
    inset 1px 1px 2px rgba(255, 255, 255, 0.4),
    inset -1px -1px 2px rgba(163, 177, 198, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ========================================
   COMPONENT-SPECIFIC STYLES
   ======================================== */

/* === Header Component === */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: transparent;
  padding: 1.5rem 0;
}

.header-container {
  max-width: 87.5rem;
  margin: 0 auto;
  padding: 0 2rem;
}

.header-content {
  background: rgba(249, 250, 251, 0.7);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6.25rem;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 
    0 0.25rem 1.5rem rgba(0, 0, 0, 0.12),
    0 0.125rem 0.5rem rgba(0, 0, 0, 0.08),
    inset 0 -1px 0 rgba(255, 255, 255, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.logo-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.logo-group a {
  display: flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.logo-group a:hover {
  opacity: 0.8;
}

.logo-icon {
  height: 2.5rem;
  width: auto;
  display: block;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Audience Toggle Switch */
.audience-toggle {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  background: #f9fafb;
  border-radius: 62.5rem;
  padding: 0.25rem;
  box-shadow: 
    inset 4px 4px 8px rgba(163, 177, 198, 0.3),
    inset -4px -4px 8px rgba(255, 255, 255, 0.7);
  gap: 0;
  isolation: isolate;
}

.audience-toggle-slider {
  position: absolute;
  top: 0.25rem;
  bottom: 0.25rem;
  left: 0.25rem;
  right: 50%;
  background: var(--color-primary-orange);
  border-radius: 62.5rem;
  box-shadow: 
    4px 4px 8px rgba(163, 177, 198, 0.4),
    -2px -2px 4px rgba(255, 255, 255, 0.2),
    inset 1px 1px 2px rgba(255, 255, 255, 0.2),
    inset -1px -1px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  pointer-events: none;
}

.audience-toggle-slider[data-active="schools"] {
  left: 50%;
  right: 0.25rem;
  background: var(--color-primary-blue);
}

.audience-toggle-btn {
  position: relative;
  z-index: 1;
  border: none;
  background: transparent;
  border-radius: 62.5rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.3s ease;
  color: rgba(52, 73, 146, 0.35);
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
}

.audience-toggle-btn[data-active="true"] {
  color: var(--color-white);
}

.audience-toggle-btn[data-active="false"] {
  color: rgba(52, 73, 146, 0.35);
}

.audience-toggle-btn:hover {
  color: rgba(52, 73, 146, 0.6);
}

.audience-toggle-btn[data-active="true"]:hover {
  color: var(--color-white);
}

.nav-btn {
  border: none;
  background: #f9fafb;
  border-radius: 62.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--color-primary-blue);
  box-shadow: 
    0.1875rem 0.1875rem 0.375rem rgba(163, 177, 198, 0.3),
    -0.1875rem -0.1875rem 0.375rem rgba(255, 255, 255, 0.7);
}

.nav-btn:hover {
  box-shadow: 
    0.125rem 0.125rem 0.25rem rgba(163, 177, 198, 0.4),
    -0.125rem -0.125rem 0.25rem rgba(255, 255, 255, 0.8);
}

.nav-link {
  color: var(--color-primary-blue);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  transition: opacity 0.2s ease;
  padding: 0.5rem 0.75rem;
}

.nav-link:hover {
  opacity: 0.7;
}

.nav-user-name {
  pointer-events: none;
  font-weight: 600;
  color: var(--color-primary-blue);
  opacity: 0.9;
}

.nav-icon-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #f9fafb;
  color: var(--color-primary-blue);
  text-decoration: none;
  box-shadow: 
    0.25rem 0.25rem 0.5rem rgba(163, 177, 198, 0.4),
    -0.25rem -0.25rem 0.5rem rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
}

.nav-icon-link:hover {
  box-shadow: 
    0.1875rem 0.1875rem 0.375rem rgba(163, 177, 198, 0.5),
    -0.1875rem -0.1875rem 0.375rem rgba(255, 255, 255, 0.9);
}

.nav-icon-link:active {
  box-shadow: 
    inset 0.125rem 0.125rem 0.25rem rgba(163, 177, 198, 0.4),
    inset -0.125rem -0.125rem 0.25rem rgba(255, 255, 255, 0.7);
}

.nav-cta {
  background: var(--color-primary-orange);
  color: var(--color-white);
  text-decoration: none;
  padding: 0.625rem 1.25rem;
  border-radius: 9999px;
  font-size: 0.9375rem;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 
    4px 4px 8px rgba(163, 177, 198, 0.4),
    -2px -2px 4px rgba(255, 255, 255, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 
    6px 6px 12px rgba(163, 177, 198, 0.5),
    -3px -3px 6px rgba(255, 255, 255, 0.4);
}

.nav-cta .arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.nav-cta:hover .arrow {
  transform: translateX(2px);
}


/* === Badge Component === */
.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  background: #f9fafb;
  box-shadow: 
    4px 4px 8px rgba(163, 177, 198, 0.3),
    -4px -4px 8px rgba(255, 255, 255, 0.7);
}

.badge-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/* === Button Components === */
.btn {
  display: inline-block;
  border-radius: 1rem;
  padding: 0.625rem 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
  border: none;
  cursor: pointer;
}

.btn-primary {
  background: var(--color-primary-orange);
  color: var(--color-white);
  box-shadow: 
    0.375rem 0.375rem 0.75rem rgba(163, 177, 198, 0.4),
    -0.125rem -0.125rem 0.5rem rgba(255, 255, 255, 0.1);
}

.btn-primary:hover {
  box-shadow: 
    0.5rem 0.5rem 1rem rgba(163, 177, 198, 0.5),
    -0.1875rem -0.1875rem 0.625rem rgba(255, 255, 255, 0.2);
  transform: translateY(-0.125rem);
}

.btn-primary[data-audience="schools"] {
  background: var(--color-primary-blue);
}

.btn-secondary {
  background: #f9fafb;
  color: var(--color-primary-blue);
  border: none;
  box-shadow: 
    inset 4px 4px 8px rgba(163, 177, 198, 0.3),
    inset -4px -4px 8px rgba(255, 255, 255, 0.7);
}

.btn-secondary:hover {
  box-shadow: 
    inset 5px 5px 10px rgba(163, 177, 198, 0.4),
    inset -5px -5px 10px rgba(255, 255, 255, 0.8);
}

.btn-secondary[data-audience="schools"] {
  color: var(--color-primary-orange);
}

.btn-secondary[data-audience="schools"]:hover {
  box-shadow: 
    inset 5px 5px 10px rgba(163, 177, 198, 0.4),
    inset -5px -5px 10px rgba(255, 255, 255, 0.8);
}

.cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.cta-centered {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
}

.cta-centered .cta-group {
  justify-content: center;
  margin-top: 0;
}

/* === Hero Image Component === */
.hero-image {
  position: relative;
  width: 100%;
}

.hero-img {
  width: 100%;
  height: auto;
  max-height: 50vh;
  object-fit: contain;
  border-radius: 1.5rem;
}

/* === Feature List Component === */
.feature-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.feature-bullet {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  margin-top: 0.375rem;
  flex-shrink: 0;
}

/* === Hero Section (Centered Layout) === */
/* Uses vh/vw for fluidity and viewport-based sizing */
.layout-b {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Audience-specific top spacing (accounts for header) - uses rem for fixed spacing */
.layout-b[data-audience-section="parents"] {
  padding-top: 5rem;
  padding-bottom: 2rem;
}

.layout-b[data-audience-section="schools"] {
  padding-top: 4.5rem;
  padding-bottom: 1.5rem;
}

.particles-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
}

.particles-bg canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.layout-b-content {
  position: relative;
  max-width: 62.5rem;
  width: 100%;
  margin: 0 auto;
  padding: 0 2rem;
  text-align: center;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  gap: 1.5vh;
  min-height: 0;
}

/* Audience-specific content spacing - uses vh for fluid vertical rhythm */
.layout-b[data-audience-section="parents"] .layout-b-content {
  gap: 1.8vh;
}

.layout-b[data-audience-section="schools"] .layout-b-content {
  gap: 1.5vh;
}

.layout-b-content h1 {
  font-family: var(--font-primary);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-primary-blue);
  margin: 0;
}

[data-audience-section="schools"] .layout-b-content h1 {
  color: var(--color-primary-orange);
}

.layout-b-content > p {
  max-width: 48rem;
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.6;
  color: rgb(51, 65, 85);
}

.layout-b-hero {
  max-width: min(48rem, 90vw);
  flex: 1 1 auto;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  min-height: 0;
}

/* Audience-specific hero sizing - flex for fluid space distribution */
.layout-b[data-audience-section="parents"] .layout-b-hero {
  flex: 1.2 1 auto;
}

.layout-b[data-audience-section="schools"] .layout-b-hero {
  flex: 1 1 auto;
}

/* === Journey Section (Before/After) === */
/* .journey-section inherits from .section-container - applied in HTML */

.journey-inner {
  position: relative;
  z-index: 1;
}

/* .journey-kicker inherits from .section-kicker - applied in HTML */
/* .journey-kicker-dot inherits from .section-kicker-dot - applied in HTML */

.journey-section-title {
  /* Inherits from .section-heading - applied in HTML */
  font-weight: 600;
  position: relative;
  z-index: 1;
}

.journey-section-subtitle {
  /* Inherits from .section-subtitle - applied in HTML */
  max-width: 37.5rem;
  margin: 0 0 2rem 0;
}

.journey-split-wrapper {
  background: #f9fafb;
  border-radius: 1.5rem;
  padding: 0;
  border: none;
}

.journey-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: #f9fafb;
  box-shadow: 
    4px 4px 8px rgba(163, 177, 198, 0.3),
    -4px -4px 8px rgba(255, 255, 255, 0.7);
  color: var(--color-primary-blue);
  font-size: 0.75rem;
  font-weight: 500;
  margin-bottom: 0.8rem;
}

.journey-badge-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--parents-accent-primary);
}

.journey-split {
  display: grid;
  gap: 1.125rem;
}

.journey-col {
  border-radius: 1.5rem;
  padding: 1.5rem 1.4rem;
  background: #f9fafb;
  box-shadow: 
    8px 8px 16px rgba(163, 177, 198, 0.4),
    -8px -8px 16px rgba(255, 255, 255, 0.8);
  border: none;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.journey-col::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0.1875rem;
  background: linear-gradient(90deg, var(--parents-accent-primary), var(--parents-accent-secondary));
  opacity: 0;
  transition: opacity 0.4s ease;
}

.journey-col:hover {
  box-shadow: 
    6px 6px 12px rgba(163, 177, 198, 0.5),
    -6px -6px 12px rgba(255, 255, 255, 0.9),
    inset 2px 2px 4px rgba(163, 177, 198, 0.1),
    inset -2px -2px 4px rgba(255, 255, 255, 0.5);
  transform: translateY(-4px);
}

.journey-col:hover::before {
  opacity: 1;
}

.journey-col-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: #f9fafb;
  box-shadow: 
    4px 4px 8px rgba(163, 177, 198, 0.3),
    -4px -4px 8px rgba(255, 255, 255, 0.7);
  color: var(--color-primary-blue);
  font-size: 0.75rem;
  font-weight: 500;
  margin-bottom: 0.8rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.journey-col:hover .journey-col-label {
  transform: scale(1.05);
  box-shadow: 
    3px 3px 6px rgba(163, 177, 198, 0.4),
    -3px -3px 6px rgba(255, 255, 255, 0.8);
}

.journey-col-title {
  font-family: var(--font-primary);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--color-primary-blue);
}

.journey-pill {
  /* Inherits from .pill-base - applied in HTML */
  font-size: 0.7rem;
  color: var(--color-primary-blue);
  margin-left: 0.5rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.journey-col:hover .journey-pill {
  transform: scale(1.08);
  box-shadow: 
    3px 3px 6px rgba(163, 177, 198, 0.4),
    -3px -3px 6px rgba(255, 255, 255, 0.8);
}

.journey-col-description {
  font-size: 0.96rem;
  line-height: 1.6;
  margin: 0 0 0.75rem;
  color: var(--color-black);
}

.journey-bullet-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-size: 0.96rem;
  color: var(--color-black);
}

.journey-bullet {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.journey-bullet-icon {
  /* Inherits from .neuro-icon-base - applied in HTML */
  font-size: 0.75rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.journey-col:hover .journey-bullet-icon {
  transform: scale(1.15) rotate(-5deg);
  box-shadow: 
    2px 2px 4px rgba(163, 177, 198, 0.5),
    -2px -2px 4px rgba(255, 255, 255, 1);
}

.journey-bullet-text {
  line-height: 1.5;
  font-weight: 500;
}

.journey-feature-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.journey-feature-card {
  width: 100%;
  max-width: 25rem;
  border-radius: 1.125rem;
  padding: 0.9rem 1rem;
  background: #f9fafb;
  border: none;
  box-shadow: 
    inset 0.25rem 0.25rem 0.5rem rgba(163, 177, 198, 0.3),
    inset -0.25rem -0.25rem 0.5rem rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.journey-feature-card:hover {
  box-shadow: 
    inset 0.3125rem 0.3125rem 0.625rem rgba(163, 177, 198, 0.4),
    inset -0.3125rem -0.3125rem 0.625rem rgba(255, 255, 255, 0.85);
  transform: scale(1.02);
}

.journey-feature-title {
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--color-primary-blue);
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.journey-feature-sub {
  font-size: 0.76rem;
  color: #425066;
  margin-bottom: 0.5rem;
}

.journey-radar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex: 1;
}

.journey-radar-visual {
  position: relative;
  width: 8.125rem;
  height: 8.125rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0.5rem 1.125rem rgba(0, 0, 0, 0.15));
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.journey-feature-card:hover .journey-radar-visual {
  transform: rotate(5deg) scale(1.05);
}

.journey-radar-visual svg {
  width: 100%;
  height: 100%;
}

.journey-radar-labels {
  font-size: 0.68rem;
  line-height: 1.4;
  color: #435066;
  text-align: center;
}

/* Legend grid container */
.journey-radar-legend {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.625rem;
  justify-items: center;
  margin-bottom: 0.375rem;
}

/* Individual legend item */
.journey-radar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  white-space: nowrap;
}

/* Legend color swatch */
.journey-radar-legend-color {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 0.125rem;
  flex-shrink: 0;
}

/* Mobile: 2x2 grid when space doesn't permit */
@media (max-width: 48rem) {
  .journey-radar-legend {
    grid-template-columns: repeat(2, 1fr);
  }
}

.journey-plan-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.125rem;
  font-size: 0.68rem;
  margin-top: 0.25rem;
}

.journey-plan-day {
  text-align: center;
  padding: 0.25rem 0.125rem;
  border-radius: 0.5rem;
  background: #ffffff;
  border: 0.0625rem solid rgba(53, 74, 147, 0.12);
  min-width: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.journey-plan-day:hover {
  background: rgba(236, 128, 47, 0.05);
  border-color: var(--parents-accent-primary);
  transform: translateY(-0.125rem) scale(1.05);
  box-shadow: 0 0.25rem 0.5rem rgba(236, 128, 47, 0.15);
}

.journey-plan-day span {
  display: block;
}

.journey-plan-day span:nth-child(1) {
  font-weight: 700;
  font-size: 0.7rem;
  color: var(--color-primary-blue);
}

.journey-plan-day span:nth-child(2) {
  font-size: 0.68rem;
  color: #596a80;
  max-width: 4.5rem;
  margin: 0 auto;
  word-wrap: break-word;
  hyphens: none;
}

.journey-chat-stack {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-top: 0.25rem;
}

.journey-chat-bubble {
  border-radius: 0.875rem;
  padding: 0.4375rem 0.5625rem;
  max-width: 100%;
  font-size: 0.75rem;
  line-height: 1.4;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.journey-chat-bubble:hover {
  transform: scale(1.03);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
}

.journey-chat-bubble--parent {
  align-self: flex-start;
  background: #f2f0ff;
  color: #3d3b6b;
}

.journey-chat-bubble--ai {
  align-self: flex-end;
  background: #e0f3ff;
  color: #1a3550;
}

.journey-chat-bubble--parent::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0.75rem;
  width: 0.5rem;
  height: 0.5rem;
  background: #f2f0ff;
  clip-path: polygon(0 100%, 0 0, 100% 100%);
}

.journey-chat-bubble--ai::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0.75rem;
  width: 0.5rem;
  height: 0.5rem;
  background: #e0f3ff;
  clip-path: polygon(100% 100%, 0 0, 100% 0);
}

.journey-chat-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
  margin-bottom: 0.125rem;
  display: block;
}

.journey-footer-note {
  margin-top: 1.75rem;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-primary-blue);
  text-align: center;
  max-width: 42.5rem;
  margin-left: auto;
  margin-right: auto;
}

/* === Split Container for School & Families === */
.preschool-split-section {
  max-width: 87.5rem;
  margin: var(--section-margin-vertical) auto;
  padding: 0;
}

.preschool-split-container {
  background: #f9fafb;
  border-radius: 2.5rem;
  padding: var(--section-padding-vertical) var(--section-padding-horizontal);
  box-shadow: 
    0.875rem 0.875rem 1.75rem rgba(163, 177, 198, 0.5),
    -0.875rem -0.875rem 1.75rem rgba(255, 255, 255, 0.95),
    inset 0.1875rem 0.1875rem 0.375rem rgba(255, 255, 255, 0.4),
    inset -0.1875rem -0.1875rem 0.375rem rgba(163, 177, 198, 0.15);
  position: relative;
}

/* Section Header */
.preschool-split-header {
  text-align: left;
  margin-bottom: 3rem;
  position: relative;
  z-index: 2;
}

/* .preschool-split-kicker inherits from .section-kicker - applied in HTML */
/* .preschool-split-kicker-dot inherits from .section-kicker-dot - applied in HTML */

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.2);
  }
}

/* .preschool-split-heading inherits from .section-heading with --large modifier - applied in HTML */
/* .preschool-split-subtitle inherits from .section-subtitle - applied in HTML */

/* Content Grid */
.preschool-split-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

/* Vertical Divider */
.preschool-split-divider {
  display: none;
}

/* === For Your School Column === */
.preschool-school-column {
  position: relative;
}

.preschool-school-column::before {
  content: "";
  position: absolute;
  top: -2rem;
  left: 0;
  width: 100%;
  height: 0.25rem;
  background: linear-gradient(90deg, var(--schools-accent-primary), var(--schools-accent-secondary));
  opacity: 0.7;
  border-radius: 0.125rem;
}

.preschool-school-inner {
  position: relative;
  z-index: 1;
}

.preschool-school-header {
  margin-bottom: 2.5rem;
}

/* .preschool-school-kicker inherits from .section-kicker - applied in HTML */
/* Only defining unique color and size properties */
.preschool-school-kicker {
  color: var(--schools-accent-primary);
  padding: 0.4rem 1rem;
  font-size: 0.9rem;
}

/* .preschool-school-kicker-dot inherits from .section-kicker-dot - applied in HTML */
.preschool-school-kicker-dot {
  width: 0.5rem;
  height: 0.5rem;
  background: var(--schools-accent-primary);
  box-shadow: 0 0 0.5rem rgba(89, 151, 199, 0.6);
}

.preschool-school-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}

.preschool-school-card {
  /* Inherits from .card-base - applied in HTML */
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.preschool-school-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0.1875rem;
  background: linear-gradient(90deg, var(--schools-accent-primary), var(--schools-accent-secondary));
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* .preschool-school-card:hover inherits from .card-base */

.preschool-school-card:hover::before {
  opacity: 1;
}

.preschool-school-icon {
  /* Inherits from .icon-base - applied in HTML */
  color: var(--schools-accent-primary);
}

.preschool-school-card:hover .preschool-school-icon {
  box-shadow: 
    4px 4px 8px rgba(163, 177, 198, 0.5),
    -4px -4px 8px rgba(255, 255, 255, 1),
    inset 3px 3px 6px rgba(163, 177, 198, 0.15),
    inset -3px -3px 6px rgba(255, 255, 255, 0.7);
  transform: rotate(-5deg) scale(1.08);
  color: var(--schools-accent-secondary);
}

.preschool-school-title {
  font-family: var(--font-primary);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-primary-blue);
  margin: 0;
  line-height: 1.3;
}

.preschool-school-description {
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgb(71, 85, 105);
  margin: 0;
}

/* === For Your Families Column === */
.preschool-families-column {
  position: relative;
}

.preschool-families-column::before {
  content: "";
  position: absolute;
  top: -2rem;
  left: 0;
  width: 100%;
  height: 0.25rem;
  background: linear-gradient(90deg, var(--parents-accent-primary), var(--parents-accent-secondary));
  opacity: 0.7;
  border-radius: 0.125rem;
}

.preschool-families-inner {
  position: relative;
  z-index: 1;
}

.preschool-families-header {
  margin-bottom: 2.5rem;
}

/* .preschool-families-kicker inherits from .section-kicker - applied in HTML */
/* Only defining unique color and size properties */
.preschool-families-kicker {
  color: var(--parents-accent-primary);
  padding: 0.4rem 1rem;
  font-size: 0.9rem;
}

/* .preschool-families-kicker-dot inherits from .section-kicker-dot - applied in HTML */
.preschool-families-kicker-dot {
  width: 0.5rem;
  height: 0.5rem;
  background: var(--parents-accent-primary);
  box-shadow: 0 0 0.5rem rgba(236, 128, 47, 0.6);
}

.preschool-families-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}

.preschool-families-card {
  /* Inherits from .card-base - applied in HTML */
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.preschool-families-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0.1875rem;
  background: linear-gradient(90deg, var(--parents-accent-primary), var(--parents-accent-secondary));
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* .preschool-families-card:hover inherits from .card-base */

.preschool-families-card:hover::before {
  opacity: 1;
}

.preschool-families-icon {
  /* Inherits from .icon-base - applied in HTML */
  color: var(--parents-accent-primary);
}

.preschool-families-card:hover .preschool-families-icon {
  box-shadow: 
    4px 4px 8px rgba(163, 177, 198, 0.5),
    -4px -4px 8px rgba(255, 255, 255, 1),
    inset 3px 3px 6px rgba(163, 177, 198, 0.15),
    inset -3px -3px 6px rgba(255, 255, 255, 0.7);
  transform: rotate(5deg) scale(1.08);
  color: var(--parents-accent-secondary);
}

.preschool-families-title {
  font-family: var(--font-primary);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-primary-blue);
  margin: 0;
  line-height: 1.3;
}

.preschool-families-description {
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgb(71, 85, 105);
  margin: 0;
}

/* Desktop Layout - Side by Side with Vertical Divider */
@media (min-width: 64rem) {
  .preschool-split-container {
    padding: var(--section-padding-vertical) var(--section-padding-horizontal);
  }

  .preschool-split-header {
    margin-bottom: 3.5rem;
  }

  .preschool-split-content {
    grid-template-columns: 1fr auto 1fr;
    gap: 2.5rem;
  }

  /* Show vertical divider on desktop */
  .preschool-split-divider {
    display: block;
    width: 0.125rem;
    background: linear-gradient(
      180deg, 
      var(--schools-accent-primary) 0%, 
      rgba(163, 177, 198, 0.3) 50%,
      var(--parents-accent-primary) 100%
    );
    position: relative;
    align-self: stretch;
    margin: 2rem 0;
    box-shadow: 
      0.0625rem 0 0.1875rem rgba(163, 177, 198, 0.3),
      -0.0625rem 0 0.1875rem rgba(255, 255, 255, 0.6);
  }

  .preschool-split-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: #f9fafb;
    box-shadow: 
      0.1875rem 0.1875rem 0.375rem rgba(163, 177, 198, 0.4),
      -0.1875rem -0.1875rem 0.375rem rgba(255, 255, 255, 0.9),
      inset 0.0625rem 0.0625rem 0.125rem rgba(163, 177, 198, 0.2),
      inset -0.0625rem -0.0625rem 0.125rem rgba(255, 255, 255, 0.5);
  }

  /* Remove top borders on desktop since divider is visible */
  .preschool-school-column::before,
  .preschool-families-column::before {
    display: none;
  }
}

/* Responsive adjustments */
@media (max-width: 48rem) {
  .preschool-split-section {
    margin: var(--section-margin-vertical-mobile) auto;
    padding: 0;
  }

  .preschool-split-container {
    padding: var(--section-padding-vertical-mobile) var(--section-padding-horizontal-mobile);
    border-radius: 1.75rem;
  }

  .preschool-split-header {
    margin-bottom: 2.5rem;
  }

  .preschool-split-heading {
    font-size: 1.75rem;
  }

  .preschool-split-content {
    gap: 2.5rem;
  }

  .preschool-school-card,
  .preschool-families-card {
    padding: 1.5rem 1.25rem;
  }

  .preschool-school-icon,
  .preschool-families-icon {
    width: 3rem;
    height: 3rem;
  }

  .preschool-school-title,
  .preschool-families-title {
    font-size: 1.05rem;
  }

  .preschool-school-description,
  .preschool-families-description {
    font-size: 0.9rem;
  }
}

/* === Why Splorio for Preschools Section === */
.why-preschools-section {
  max-width: 87.5rem;
  margin: var(--section-margin-vertical) auto;
  padding: 0;
}

.why-preschools-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  background: #f9fafb;
  border-radius: 2.5rem;
  padding: var(--section-padding-vertical) var(--section-padding-horizontal);
  box-shadow: 
    0.875rem 0.875rem 1.75rem rgba(163, 177, 198, 0.5),
    -0.875rem -0.875rem 1.75rem rgba(255, 255, 255, 0.95),
    inset 0.1875rem 0.1875rem 0.375rem rgba(255, 255, 255, 0.4),
    inset -0.1875rem -0.1875rem 0.375rem rgba(163, 177, 198, 0.15);
}

/* Left Column */
.why-preschools-left {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* .why-preschools-kicker inherits from .section-kicker - applied in HTML */
/* .why-preschools-kicker-dot inherits from .section-kicker-dot - applied in HTML */
/* .why-preschools-heading inherits from .section-heading with --large modifier - applied in HTML */
/* .why-preschools-intro inherits from .section-subtitle - applied in HTML */

/* Right Column */
.why-preschools-right {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Results Section */
.why-results-section {
  background: #f9fafb;
  border-radius: 1.5rem;
  padding: 1.5rem;
  box-shadow: 
    8px 8px 16px rgba(163, 177, 198, 0.35),
    -8px -8px 16px rgba(255, 255, 255, 0.85);
}

.why-results-header {
  margin-bottom: 1.25rem;
}

/* .why-results-kicker inherits from .section-kicker - applied in HTML */
/* Only defining unique size property */
.why-results-kicker {
  padding: 0.3rem 0.75rem;
  font-size: 0.7rem;
}

.why-results-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.why-subheading {
  grid-column: 1 / -1;
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
}

.why-subheading-kicker {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: #f9fafb;
  box-shadow: 
    4px 4px 8px rgba(163, 177, 198, 0.3),
    -4px -4px 8px rgba(255, 255, 255, 0.7);
  color: var(--color-primary-orange);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
}

.why-result-card {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  background: #f9fafb;
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 
    inset 4px 4px 8px rgba(163, 177, 198, 0.25),
    inset -4px -4px 8px rgba(255, 255, 255, 0.7);
  transition: all 0.3s ease;
}

.why-result-card:hover {
  box-shadow: 
    inset 5px 5px 10px rgba(163, 177, 198, 0.3),
    inset -5px -5px 10px rgba(255, 255, 255, 0.8);
}

 .why-result-icon {
   width: 2.5rem;
   height: 2.5rem;
   flex-shrink: 0;
   border-radius: 0.75rem;
   background: #f9fafb;
   box-shadow: 
     4px 4px 8px rgba(163, 177, 198, 0.35),
     -4px -4px 8px rgba(255, 255, 255, 0.8);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--schools-accent-primary);
   transition: all 0.3s ease;
 }
 
 .why-result-card:hover .why-result-icon {
   color: var(--schools-accent-secondary);
   transform: scale(1.05);
 }
 
 .why-result-icon svg {
   width: 1.25rem;
   height: 1.25rem;
 }

.why-result-content {
  flex: 1;
}

.why-result-title {
  font-family: var(--font-primary);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-primary-blue);
  margin: 0 0 0.25rem 0;
  line-height: 1.3;
}

 .why-result-text {
   font-size: 0.85rem;
   line-height: 1.5;
   color: rgb(71, 85, 105);
   margin: 0;
 }

 /* Desktop Layout - Side by Side */
 @media (min-width: 64rem) {
   .why-preschools-container {
     grid-template-columns: 1fr 1fr;
     gap: 3.5rem;
     padding: var(--section-padding-vertical) var(--section-padding-horizontal);
   }
   
   .why-results-grid {
     grid-template-columns: 1fr 1fr;
     gap: 1.25rem;
   }
   
   .why-subheading {
     margin-top: 0.75rem;
   }
 }
 
 /* Tablet adjustments */
 @media (min-width: 48rem) and (max-width: 63.9375rem) {
   .why-results-grid {
     grid-template-columns: 1fr 1fr;
     gap: 1rem;
   }
 }

 /* Mobile adjustments */
 @media (max-width: 47.9375rem) {
   .why-preschools-section {
     margin: var(--section-margin-vertical-mobile) auto;
     padding: 0;
   }
   
   .why-preschools-container {
     padding: 2.5rem var(--section-padding-horizontal-mobile);
     border-radius: 1.75rem;
     gap: 2rem;
   }
   
   .why-preschools-heading {
     font-size: 1.5rem;
   }
   
   .why-preschools-intro {
     font-size: 0.95rem;
   }
   
   .why-preschools-right {
     gap: 1.5rem;
   }
 }

/* === How It Works Flow Section === */
.how-it-works-flow-section {
  max-width: 87.5rem;
  margin: var(--section-margin-vertical) auto;
  padding: 0;
}

.how-it-works-flow-container {
  background: #f9fafb;
  border-radius: 2.5rem;
  padding: var(--section-padding-vertical) var(--section-padding-horizontal);
  box-shadow: 
    0.875rem 0.875rem 1.75rem rgba(163, 177, 198, 0.5),
    -0.875rem -0.875rem 1.75rem rgba(255, 255, 255, 0.95),
    inset 0.1875rem 0.1875rem 0.375rem rgba(255, 255, 255, 0.4),
    inset -0.1875rem -0.1875rem 0.375rem rgba(163, 177, 198, 0.15);
  position: relative;
  overflow: hidden;
}

/* Header Styles */
.how-it-works-flow-header {
  text-align: left;
  margin-bottom: 4rem;
}

/* .how-it-works-flow-kicker inherits from .section-kicker - applied in HTML */
/* Only defining unique properties */
.how-it-works-flow-kicker {
  padding: 0.4rem 1rem;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  margin-bottom: 1.5rem;
}

/* .how-it-works-flow-kicker-dot inherits from .section-kicker-dot - applied in HTML */
.how-it-works-flow-kicker-dot {
  width: 0.5rem;
  height: 0.5rem;
  background: var(--color-primary-blue);
  box-shadow: 0 0 0.625rem rgba(52, 73, 146, 0.7);
}

/* .how-it-works-flow-heading inherits from .section-heading with --large modifier - applied in HTML */
.how-it-works-flow-heading {
  margin-bottom: 1rem;
}

/* .how-it-works-flow-subtitle inherits from .section-subtitle - applied in HTML */
.how-it-works-flow-subtitle {
  font-size: 1.1rem;
  line-height: 1.7;
  max-width: 50rem;
}

/* Steps Grid */
.how-it-works-flow-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  max-width: 68.75rem;
  margin: 0 auto;
  padding: 1rem 0;
}

/* Step Card */
.how-it-works-flow-card {
  background: #f9fafb;
  border-radius: 2rem;
  padding: 3rem 2rem 2.5rem;
  box-shadow: 
    10px 10px 20px rgba(163, 177, 198, 0.4),
    -10px -10px 20px rgba(255, 255, 255, 0.9);
  border: none;
  position: relative;
  overflow: visible;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.how-it-works-flow-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0.25rem;
  background: linear-gradient(90deg, var(--schools-accent-primary), var(--schools-accent-secondary));
  opacity: 0;
  transition: opacity 0.4s ease;
  border-radius: 2rem 2rem 0 0;
}

.how-it-works-flow-card:hover {
  box-shadow: 
    8px 8px 16px rgba(163, 177, 198, 0.5),
    -8px -8px 16px rgba(255, 255, 255, 1),
    inset 3px 3px 6px rgba(163, 177, 198, 0.1),
    inset -3px -3px 6px rgba(255, 255, 255, 0.6);
  transform: translateY(-6px);
}

.how-it-works-flow-card:hover::before {
  opacity: 1;
}

/* Icon */
.how-it-works-flow-icon {
  width: 5rem;
  height: 5rem;
  border-radius: 1.5rem;
  background: #f9fafb;
  box-shadow: 
    8px 8px 16px rgba(163, 177, 198, 0.45),
    -8px -8px 16px rgba(255, 255, 255, 0.95),
    inset 3px 3px 6px rgba(255, 255, 255, 0.6),
    inset -3px -3px 6px rgba(163, 177, 198, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--schools-accent-primary);
  flex-shrink: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.how-it-works-flow-card:hover .how-it-works-flow-icon {
  box-shadow: 
    6px 6px 12px rgba(163, 177, 198, 0.55),
    -6px -6px 12px rgba(255, 255, 255, 1),
    inset 4px 4px 8px rgba(163, 177, 198, 0.2),
    inset -4px -4px 8px rgba(255, 255, 255, 0.8);
  transform: rotate(-8deg) scale(1.1);
  color: var(--schools-accent-secondary);
}

/* Number Badge */
.how-it-works-flow-number {
  position: absolute;
  top: -1rem;
  right: -1rem;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: #f9fafb;
  box-shadow: 
    6px 6px 12px rgba(163, 177, 198, 0.5),
    -6px -6px 12px rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-primary);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-primary-blue);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
}

.how-it-works-flow-card:hover .how-it-works-flow-number {
  box-shadow: 
    4px 4px 8px rgba(163, 177, 198, 0.6),
    -4px -4px 8px rgba(255, 255, 255, 1),
    inset 2px 2px 4px rgba(52, 73, 146, 0.2);
  transform: scale(1.15) rotate(12deg);
}

/* Title */
.how-it-works-flow-title {
  font-family: var(--font-primary);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-primary-blue);
  margin: 0;
  line-height: 1.3;
}

/* Description */
.how-it-works-flow-description {
  font-size: 1rem;
  line-height: 1.7;
  color: rgb(71, 85, 105);
  margin: 0;
  max-width: 25rem;
}

/* Responsive Design */
@media (min-width: 48rem) {
  .how-it-works-flow-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
  }
}

@media (min-width: 64rem) {
  .how-it-works-flow-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
  }
  
  .how-it-works-flow-card {
    padding: 2.5rem 1.5rem 2rem;
    margin-top: 1.5rem;
  }
  
  .how-it-works-flow-icon {
    width: 4.5rem;
    height: 4.5rem;
  }
  
  .how-it-works-flow-title {
    font-size: 1.35rem;
  }
  
  .how-it-works-flow-description {
    font-size: 0.95rem;
  }
  
  .how-it-works-flow-number {
    width: 3rem;
    height: 3rem;
    font-size: 1.2rem;
  }
}

@media (max-width: 47.9375rem) {
  .how-it-works-flow-container {
    padding: var(--section-padding-vertical-mobile) var(--section-padding-horizontal-mobile);
    border-radius: 2rem;
  }
  
  .how-it-works-flow-header {
    margin-bottom: 3rem;
  }
  
  .how-it-works-flow-heading {
    font-size: 1.75rem;
  }
  
  .how-it-works-flow-subtitle {
    font-size: 1rem;
  }
  
  .how-it-works-flow-grid {
    gap: 2rem;
    padding: 0.5rem 0;
  }
  
  .how-it-works-flow-card {
    padding: 2.5rem 1.5rem 2rem;
    margin-top: 1.5rem;
  }
  
  .how-it-works-flow-icon {
    width: 4rem;
    height: 4rem;
  }
  
  .how-it-works-flow-title {
    font-size: 1.25rem;
  }
  
  .how-it-works-flow-description {
    font-size: 0.95rem;
  }
  
  .how-it-works-flow-number {
    width: 3rem;
    height: 3rem;
    font-size: 1.2rem;
    top: -0.75rem;
    right: -0.75rem;
  }
}

/* === How It Works Orbit Section === */
/* .how-it-works-orbit-section inherits from .section-container - applied in HTML */

.how-it-works-orbit-inner {
  position: relative;
  z-index: 1;
}

/* .how-it-works-orbit-kicker inherits from .section-kicker - applied in HTML */
.how-it-works-orbit-kicker {
  color: var(--color-secondary-blue);
  letter-spacing: 0.25em;
}

/* .how-it-works-orbit-kicker-dot inherits from .section-kicker-dot - applied in HTML */
/* .how-it-works-orbit-heading inherits from .section-heading - applied in HTML */

/* .how-it-works-orbit-subtitle inherits from .section-subtitle - applied in HTML */
.how-it-works-orbit-subtitle {
  max-width: 37.5rem;
  margin-bottom: 2.5rem;
}

.how-it-works-orbit-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

/* Orbit Visualization */
.orbit-visualization {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.orbit-wrapper {
  position: relative;
  width: 25rem;
  height: 25rem;
  border-radius: 50%;
  background: #f9fafb;
  box-shadow: 
    inset 0.5rem 0.5rem 1rem rgba(163, 177, 198, 0.4),
    inset -0.5rem -0.5rem 1rem rgba(255, 255, 255, 0.9),
    0.25rem 0.25rem 0.75rem rgba(163, 177, 198, 0.2),
    -0.25rem -0.25rem 0.75rem rgba(255, 255, 255, 0.5);
  animation: none; /* Explicitly prevent rotation */
}

.orbit-glow-ring {
  position: absolute;
  inset: 1.875rem;
  border-radius: 50%;
  border: none;
  background: transparent;
  box-shadow: 
    0 0 1.875rem rgba(89, 151, 199, 0.2),
    inset 0 0 1.25rem rgba(255, 255, 255, 0.3);
  pointer-events: none;
  animation: none; /* Explicitly prevent rotation */
}

.orbit-path {
  position: absolute;
  inset: 3.75rem;
  border-radius: 50%;
  border: 0.125rem dashed rgba(253, 195, 77, 0.5); /* Using yellow tint for orbit path */
  pointer-events: none;
  animation: rotateCounterClockwise 20s linear infinite;
}

/* Rotation animations */
@keyframes rotateClockwise {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes rotateCounterClockwise {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

/* Container for all orbit step buttons - rotates slowly */
.orbit-steps-container {
  position: absolute;
  inset: 0;
  animation: rotateClockwise 60s linear infinite;
}

/* Fast rotation when section first comes into view */
.orbit-steps-container.orbit-fast {
  animation: rotateClockwise 15s linear infinite;
}

/* Slower speed transition */
.orbit-steps-container.orbit-slowing {
  animation: rotateClockwise 60s linear infinite;
  transition: transform 3s linear;
}

/* Orbit Step Buttons */
.orbit-step {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 50%;
  border: none;
  background: #f9fafb;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 
    0.375rem 0.375rem 0.75rem rgba(163, 177, 198, 0.5),
    -0.375rem -0.375rem 0.75rem rgba(255, 255, 255, 0.9),
    inset 0.0625rem 0.0625rem 0.125rem rgba(255, 255, 255, 0.5),
    inset -0.0625rem -0.0625rem 0.125rem rgba(163, 177, 198, 0.2);
}

.orbit-step-label {
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
  padding: 0 0.6rem;
  display: block;
  animation: rotateCounterClockwise 60s linear infinite;
}

/* Fast counter-rotation for labels */
.orbit-steps-container.orbit-fast .orbit-step-label {
  animation: rotateCounterClockwise 15s linear infinite;
}

/* Step positioning - uniformly distributed around circle */
/* Radius = 8.75rem for even distribution on orbit path */
/* Step 1 - top (0deg / -90deg in math coords) */
.orbit-step-1 {
  transform: translate(-50%, calc(-50% - 8.75rem));
  color: var(--color-primary-blue);
}

/* Step 2 - top right (72deg / -18deg in math coords) */
.orbit-step-2 {
  transform: translate(calc(-50% + 8.3125rem), calc(-50% - 2.6875rem));
  color: var(--color-primary-blue);
}

/* Step 3 - bottom right (144deg / 54deg in math coords) */
.orbit-step-3 {
  transform: translate(calc(-50% + 5.125rem), calc(-50% + 7.0625rem));
  color: var(--color-primary-blue);
}

/* Step 4 - bottom left (216deg / 126deg in math coords) */
.orbit-step-4 {
  transform: translate(calc(-50% - 5.125rem), calc(-50% + 7.0625rem));
  color: var(--parents-accent-primary);
}

/* Step 5 - top left (288deg / 198deg in math coords) */
.orbit-step-5 {
  transform: translate(calc(-50% - 8.3125rem), calc(-50% - 2.6875rem));
  color: var(--parents-accent-primary);
}

.orbit-step:hover {
  box-shadow: 
    0.5rem 0.5rem 1rem rgba(163, 177, 198, 0.6),
    -0.5rem -0.5rem 1rem rgba(255, 255, 255, 1),
    inset 0.0625rem 0.0625rem 0.125rem rgba(255, 255, 255, 0.6),
    inset -0.0625rem -0.0625rem 0.125rem rgba(163, 177, 198, 0.15);
  transform: scale(1.05);
}

.orbit-step-1:hover { transform: translate(-50%, calc(-50% - 8.75rem)) scale(1.05); }
.orbit-step-2:hover { transform: translate(calc(-50% + 8.3125rem), calc(-50% - 2.6875rem)) scale(1.05); }
.orbit-step-3:hover { transform: translate(calc(-50% + 5.125rem), calc(-50% + 7.0625rem)) scale(1.05); }
.orbit-step-4:hover { transform: translate(calc(-50% - 5.125rem), calc(-50% + 7.0625rem)) scale(1.05); }
.orbit-step-5:hover { transform: translate(calc(-50% - 8.3125rem), calc(-50% - 2.6875rem)) scale(1.05); }

.orbit-step.active {
  background: var(--color-primary-blue);
  color: var(--color-white);
  box-shadow: 
    0 0 1.875rem rgba(53, 74, 147, 0.5),
    0.5rem 0.5rem 1rem rgba(163, 177, 198, 0.5),
    -0.25rem -0.25rem 0.75rem rgba(255, 255, 255, 0.3),
    inset 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.2),
    inset -0.125rem -0.125rem 0.25rem rgba(255, 255, 255, 0.1);
}

.orbit-step-1.active { transform: translate(-50%, calc(-50% - 8.75rem)) scale(1.1); }
.orbit-step-2.active { transform: translate(calc(-50% + 8.3125rem), calc(-50% - 2.6875rem)) scale(1.1); }
.orbit-step-3.active { transform: translate(calc(-50% + 5.125rem), calc(-50% + 7.0625rem)) scale(1.1); }
.orbit-step-4.active { transform: translate(calc(-50% - 5.125rem), calc(-50% + 7.0625rem)) scale(1.1); }
.orbit-step-5.active { transform: translate(calc(-50% - 8.3125rem), calc(-50% - 2.6875rem)) scale(1.1); }

/* Step Details */
.orbit-step-details {
  max-width: 100%;
}

.orbit-step-content {
  display: none;
  border-radius: 1.5rem;
  background: #ffffff;
  border: 0.0625rem solid rgba(249, 210, 192, 0.5);
  padding: 1.25rem 1.5rem;
  box-shadow: 
    0.25rem 0.25rem 0.5rem rgba(163, 177, 198, 0.25),
    -0.125rem -0.125rem 0.375rem rgba(255, 255, 255, 0.6);
}

.orbit-step-content.active {
  display: block;
  animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(0.625rem); }
  to { opacity: 1; transform: translateY(0); }
}

.orbit-step-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary-blue);
  font-family: var(--font-primary);
  margin-bottom: 0.5rem;
}

.orbit-step-summary {
  font-size: 0.75rem;
  color: var(--color-gray-dark);
  margin-bottom: 0.75rem;
  line-height: 1.6;
}

.orbit-step-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--color-black);
  padding-left: 0;
}

.orbit-step-bullets li {
  padding-left: 1.25rem;
  position: relative;
  line-height: 1.5;
}

.orbit-step-bullets li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--parents-accent-primary);
  font-weight: 700;
}

/* Responsive Design */
@media (min-width: 48rem) {
  .how-it-works-orbit-container {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 3rem;
    align-items: center;
  }

  .orbit-wrapper {
    width: 28.125rem;
    height: 28.125rem;
  }

  .orbit-glow-ring {
    inset: 2.1875rem;
  }

  .orbit-path {
    inset: 4.375rem;
  }

  .orbit-step {
    width: 8.125rem;
    height: 8.125rem;
  }

  .orbit-step-label {
    font-size: 0.9rem;
  }

  /* Adjusted for larger radius (10rem) */
  .orbit-step-1 { transform: translate(-50%, calc(-50% - 10rem)); }
  .orbit-step-2 { transform: translate(calc(-50% + 9.5rem), calc(-50% - 3.0625rem)); }
  .orbit-step-3 { transform: translate(calc(-50% + 5.875rem), calc(-50% + 8.0625rem)); }
  .orbit-step-4 { transform: translate(calc(-50% - 5.875rem), calc(-50% + 8.0625rem)); }
  .orbit-step-5 { transform: translate(calc(-50% - 9.5rem), calc(-50% - 3.0625rem)); }

  .orbit-step-1.active { transform: translate(-50%, calc(-50% - 10rem)) scale(1.1); }
  .orbit-step-2.active { transform: translate(calc(-50% + 9.5rem), calc(-50% - 3.0625rem)) scale(1.1); }
  .orbit-step-3.active { transform: translate(calc(-50% + 5.875rem), calc(-50% + 8.0625rem)) scale(1.1); }
  .orbit-step-4.active { transform: translate(calc(-50% - 5.875rem), calc(-50% + 8.0625rem)) scale(1.1); }
  .orbit-step-5.active { transform: translate(calc(-50% - 9.5rem), calc(-50% - 3.0625rem)) scale(1.1); }

  .orbit-step-1:hover { transform: translate(-50%, calc(-50% - 10rem)) scale(1.05); }
  .orbit-step-2:hover { transform: translate(calc(-50% + 9.5rem), calc(-50% - 3.0625rem)) scale(1.05); }
  .orbit-step-3:hover { transform: translate(calc(-50% + 5.875rem), calc(-50% + 8.0625rem)) scale(1.05); }
  .orbit-step-4:hover { transform: translate(calc(-50% - 5.875rem), calc(-50% + 8.0625rem)) scale(1.05); }
  .orbit-step-5:hover { transform: translate(calc(-50% - 9.5rem), calc(-50% - 3.0625rem)) scale(1.05); }

  .orbit-step-title {
    font-size: 1rem;
  }

  .orbit-step-summary {
    font-size: 0.875rem;
  }

  .orbit-step-bullets {
    font-size: 0.875rem;
  }
}

@media (max-width: 30rem) {
  .orbit-wrapper {
    width: 20rem;
    height: 20rem;
  }

  .orbit-glow-ring {
    inset: 1.25rem;
  }

  .orbit-path {
    inset: 3.125rem;
  }

  .orbit-step {
    width: 5.625rem;
    height: 5.625rem;
  }

  .orbit-step-label {
    font-size: 0.7rem;
  }

  /* Adjusted for smaller radius (6.875rem) */
  .orbit-step-1 { transform: translate(-50%, calc(-50% - 6.875rem)); }
  .orbit-step-2 { transform: translate(calc(-50% + 6.5rem), calc(-50% - 2.125rem)); }
  .orbit-step-3 { transform: translate(calc(-50% + 4.0625rem), calc(-50% + 5.5625rem)); }
  .orbit-step-4 { transform: translate(calc(-50% - 4.0625rem), calc(-50% + 5.5625rem)); }
  .orbit-step-5 { transform: translate(calc(-50% - 6.5rem), calc(-50% - 2.125rem)); }

  .orbit-step-1.active { transform: translate(-50%, calc(-50% - 6.875rem)) scale(1.1); }
  .orbit-step-2.active { transform: translate(calc(-50% + 6.5rem), calc(-50% - 2.125rem)) scale(1.1); }
  .orbit-step-3.active { transform: translate(calc(-50% + 4.0625rem), calc(-50% + 5.5625rem)) scale(1.1); }
  .orbit-step-4.active { transform: translate(calc(-50% - 4.0625rem), calc(-50% + 5.5625rem)) scale(1.1); }
  .orbit-step-5.active { transform: translate(calc(-50% - 6.5rem), calc(-50% - 2.125rem)) scale(1.1); }

  .orbit-step-1:hover { transform: translate(-50%, calc(-50% - 6.875rem)) scale(1.05); }
  .orbit-step-2:hover { transform: translate(calc(-50% + 6.5rem), calc(-50% - 2.125rem)) scale(1.05); }
  .orbit-step-3:hover { transform: translate(calc(-50% + 4.0625rem), calc(-50% + 5.5625rem)) scale(1.05); }
  .orbit-step-4:hover { transform: translate(calc(-50% - 4.0625rem), calc(-50% + 5.5625rem)) scale(1.05); }
  .orbit-step-5:hover { transform: translate(calc(-50% - 6.5rem), calc(-50% - 2.125rem)) scale(1.05); }
}

/* === Benefits Section === */
/* .benefits-section inherits from .section-container - applied in HTML */

.benefits-section::before {
  display: none;
}

.benefits-inner {
  position: relative;
  z-index: 1;
}

/* .benefits-kicker inherits from .section-kicker - applied in HTML */
/* .benefits-kicker-dot inherits from .section-kicker-dot - applied in HTML */

/* .benefits-heading inherits from .section-heading - applied in HTML */

.benefits-subtitle {
  /* Inherits from .section-subtitle - applied in HTML */
  max-width: 33.75rem;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.benefit-card {
  background: #f9fafb;
  border-radius: 1.5rem;
  padding: 1.5rem 1.4rem;
  box-shadow: 
    8px 8px 16px rgba(163, 177, 198, 0.4),
    -8px -8px 16px rgba(255, 255, 255, 0.8);
  border: none;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.benefit-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0.1875rem;
  background: linear-gradient(90deg, var(--parents-accent-primary), var(--parents-accent-secondary));
  opacity: 0;
  transition: opacity 0.4s ease;
}

.benefit-card:hover {
  box-shadow: 
    6px 6px 12px rgba(163, 177, 198, 0.5),
    -6px -6px 12px rgba(255, 255, 255, 0.9),
    inset 2px 2px 4px rgba(163, 177, 198, 0.1),
    inset -2px -2px 4px rgba(255, 255, 255, 0.5);
  transform: translateY(-4px);
}

.benefit-card:hover::before {
  opacity: 1;
}

.pill-label {
  /* Inherits from .pill-base - applied in HTML */
  color: var(--color-primary-blue);
  margin-bottom: 0.8rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.benefit-card:hover .pill-label {
  transform: scale(1.05);
  box-shadow: 
    3px 3px 6px rgba(163, 177, 198, 0.35),
    -3px -3px 6px rgba(255, 255, 255, 0.8);
}

/* .pill-dot already defined in base classes */

.benefit-title {
  font-family: var(--font-primary);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--color-primary-blue);
}

.benefit-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-size: 0.96rem;
  color: var(--color-black);
}

.benefit-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.benefit-icon {
  /* Inherits from .neuro-icon-base - applied in HTML */
  font-size: 0.75rem;
  color: var(--parents-accent-primary);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.benefit-card:hover .benefit-icon {
  transform: rotate(5deg) scale(1.15);
  box-shadow: 
    2px 2px 4px rgba(163, 177, 198, 0.5),
    -2px -2px 4px rgba(255, 255, 255, 1);
  color: var(--parents-accent-secondary);
}

.benefit-text span {
  font-weight: 500;
}

.benefit-text small {
  display: block;
  color: rgb(100, 116, 139);
  font-size: 0.82rem;
  margin-top: 0.05rem;
}

.benefits-footer-note {
  margin-top: 1.75rem;
  font-size: 0.86rem;
  color: rgb(100, 116, 139);
}

.benefits-footer-note span {
  font-weight: 500;
  color: rgb(55, 65, 81);
}

/* === FAQ Section === */
/* .faq-section inherits from .section-container - applied in HTML */

.faq-inner {
  position: relative;
  z-index: 1;
}

/* .faq-kicker inherits from .section-kicker - applied in HTML */
/* .faq-kicker-dot inherits from .section-kicker-dot - applied in HTML */

/* .faq-heading inherits from .section-heading - applied in HTML */
/* .faq-subtitle inherits from .section-subtitle - applied in HTML */

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq-item {
  border-radius: 1.1rem;
  border: none;
  background: #f9fafb;
  overflow: hidden;
  box-shadow: 
    6px 6px 12px rgba(163, 177, 198, 0.3),
    -6px -6px 12px rgba(255, 255, 255, 0.7);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item:hover {
  box-shadow: 
    0.3125rem 0.3125rem 0.625rem rgba(163, 177, 198, 0.4),
    -0.3125rem -0.3125rem 0.625rem rgba(255, 255, 255, 0.8);
  transform: translateX(0.25rem);
}

.faq-question {
  width: 100%;
  padding: 0.9rem 1rem;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  font-size: 0.98rem;
  text-align: left;
  color: var(--color-black);
  font-family: var(--font-secondary);
  font-weight: 600;
  transition: color 0.2s ease;
}

.faq-question:hover {
  color: var(--color-primary-blue);
}

.faq-question span:first-child {
  flex: 1;
}

.faq-icon {
  /* Inherits from .neuro-icon-base - applied in HTML */
  width: 1.8rem;
  height: 1.8rem;
  display: inline-flex;
  font-size: 1rem;
  color: var(--parents-accent-primary);
  transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

/* Schools audience - use blue color scheme */
[data-audience-section="schools"] .faq-icon {
  color: var(--schools-accent-primary);
}

[data-audience-section="schools"] .faq-kicker-dot {
  background: var(--schools-accent-primary);
}

.faq-item.open .faq-icon {
  transform: rotate(45deg);
  box-shadow: 
    inset 0.25rem 0.25rem 0.5rem rgba(163, 177, 198, 0.5),
    inset -0.25rem -0.25rem 0.5rem rgba(163, 177, 198, 0.2);
}

[data-audience-section="schools"] .faq-item.open .faq-icon {
  color: var(--schools-accent-secondary);
}

.faq-answer-wrapper {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.faq-answer {
  padding: 0 1rem 0.9rem 1rem;
  font-size: 0.94rem;
  color: rgb(75, 85, 99);
  line-height: 1.5;
}

.faq-item.open .faq-answer-wrapper {
  max-height: 18.75rem;
}

/* === CTA Split Section === */
.cta-split-section {
  max-width: 87.5rem;
  margin: var(--section-margin-vertical) auto;
  padding: 0;
  background: transparent;
}

.cta-split-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
  background: #f9fafb;
  border-radius: 2rem;
  padding: var(--section-padding-vertical-mobile) var(--section-padding-horizontal);
  box-shadow: 
    12px 12px 24px rgba(163, 177, 198, 0.6),
    -12px -12px 24px rgba(255, 255, 255, 0.9),
    inset 2px 2px 4px rgba(255, 255, 255, 0.3),
    inset -2px -2px 4px rgba(163, 177, 198, 0.2);
}

.cta-split-content {
  position: relative;
  z-index: 1;
}

.cta-split-kicker {
  /* Inherits from .section-kicker - applied in HTML */
  margin-bottom: 0.75rem;
}

/* .cta-split-kicker-dot inherits from .section-kicker-dot - applied in HTML */

/* Schools audience - use blue color scheme for kicker dot */
[data-audience-section="schools"] .cta-split-kicker-dot {
  background: var(--schools-accent-primary);
}

/* .cta-split-heading inherits from .section-heading - applied in HTML */

.cta-split-subtitle {
  /* Inherits from .section-subtitle - applied in HTML */
  margin-bottom: 1.5rem;
  max-width: 33.75rem;
}

.cta-split-features {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.cta-split-feature {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: rgb(51, 65, 85);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.cta-split-feature:hover {
  transform: translateX(0.25rem);
  color: var(--color-primary-blue);
}

.cta-split-feature-icon {
  /* Inherits from .neuro-icon-base - applied in HTML */
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.85rem;
  color: var(--parents-accent-primary);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cta-split-feature:hover .cta-split-feature-icon {
  transform: scale(1.2) rotate(-5deg);
  box-shadow: 
    2px 2px 4px rgba(163, 177, 198, 0.5),
    -2px -2px 4px rgba(255, 255, 255, 1);
  color: var(--parents-accent-secondary);
}

/* Schools audience - use blue color scheme for feature icons */
[data-audience-section="schools"] .cta-split-feature-icon {
  color: var(--schools-accent-primary);
}

.cta-split-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.cta-split-hero {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}

.cta-split-hero::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  height: 85%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--parents-accent-secondary), transparent 70%);
  opacity: 0.3;
  z-index: 0;
  animation: breathe 4s ease-in-out infinite;
}

/* Schools audience - use blue glow instead of yellow */
[data-audience-section="schools"] .cta-split-hero::before {
  background: radial-gradient(circle, var(--schools-accent-primary), transparent 70%);
}

@keyframes breathe {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.3;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.5;
  }
}

.cta-split-hero-img {
  position: relative;
  width: 100%;
  max-width: 28.125rem;
  height: auto;
  border-radius: 1.5rem;
  z-index: 1;
}

/* Desktop layout for split section */
@media (min-width: 48rem) {
  .cta-split-inner {
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    padding: var(--section-padding-vertical) var(--section-padding-horizontal);
  }
  
  .cta-split-content {
    order: 1;
  }
  
  .cta-split-hero {
    order: 2;
  }
}

/* === Footer Component === */
.site-footer {
  padding: 3rem clamp(1rem, 4vw, 2rem);
}

.footer-content {
  max-width: 75rem;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.footer-copyright {
  font-size: 0.875rem;
  color: rgb(100, 116, 139);
  flex: 1;
  text-align: left;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  flex: 1;
  justify-content: flex-end;
}

.footer-link {
  color: var(--color-primary-blue);
  text-decoration: underline;
}

.footer-link:hover {
  opacity: 0.8;
}

.footer-socials {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.footer-social-link {
  color: var(--color-primary-blue);
  transition: opacity 0.2s ease;
}

.footer-social-link:hover {
  opacity: 0.7;
}

.footer-social-link svg {
  display: block;
}

/* Footer responsive layout */
@media (max-width: 48rem) {
  .footer-content {
    flex-direction: column;
    gap: 1rem;
  }
  
  .footer-copyright,
  .footer-links {
    flex: none;
    text-align: center;
  }
  
  .footer-links {
    justify-content: center;
  }
}

/* === Hidden Class for JS Toggle === */
.hidden {
  display: none !important;
}

/* === Responsive Styles === */
/* Mobile-first approach with non-overlapping breakpoints */

/* Laptop screens with limited vertical space (most specific first) */
@media (min-width: 48rem) and (max-width: 85.375rem) and (max-height: 48rem) {
  /* Extra tight for common 1366×768 and similar small laptop screens */
  .site-header {
    padding: 0.75rem 0;
  }

  .layout-b {
    min-height: 100vh;
    max-height: 100vh;
  }

  .layout-b[data-audience-section="parents"] {
    padding-top: 4.5rem;
    padding-bottom: 1.5rem;
  }

  .layout-b[data-audience-section="schools"] {
    padding-top: 4rem;
    padding-bottom: 1rem;
  }

  .layout-b-content {
    padding: 0 2rem;
  }

  .layout-b[data-audience-section="parents"] .layout-b-content {
    gap: 1vh;
  }

  .layout-b[data-audience-section="schools"] .layout-b-content {
    gap: 0.8vh;
  }

  .layout-b-content h1 {
    font-size: 1.875rem;
    line-height: 1.1;
  }

  .layout-b-content > p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.4;
  }

  .cta-centered {
    margin: 0;
  }

  .btn {
    padding: 0.5rem 1.125rem;
    font-size: 0.9375rem;
  }

  .layout-b-hero {
    margin: 0;
    min-height: 0;
  }

  .layout-b[data-audience-section="parents"] .layout-b-hero {
    flex: 1.2 1 auto;
  }

  .layout-b[data-audience-section="schools"] .layout-b-hero {
    flex: 1 1 auto;
  }

  .hero-img {
    max-height: 42vh;
  }
}

/* Laptop screens with slightly more vertical space */
@media (min-width: 48rem) and (max-width: 90rem) and (min-height: 48.0625rem) and (max-height: 56.25rem) {
  /* Header - Reduce top spacing on laptops */
  .site-header {
    padding: 0.875rem 0;
  }

  /* Hero Section - Laptop adjustments - Optimized for 13-14" laptops */
  .layout-b {
    min-height: 100vh;
    max-height: 100vh;
  }

  .layout-b[data-audience-section="parents"] {
    padding-top: 4.5rem;
    padding-bottom: 1.5rem;
  }

  .layout-b[data-audience-section="schools"] {
    padding-top: 4rem;
    padding-bottom: 1.25rem;
  }

  .layout-b-content {
    padding: 0 2rem;
  }

  .layout-b[data-audience-section="parents"] .layout-b-content {
    gap: 1.4vh;
  }

  .layout-b[data-audience-section="schools"] .layout-b-content {
    gap: 1.2vh;
  }

  .layout-b-content h1 {
    font-size: 2rem;
    line-height: 1.1;
    margin: 0;
  }

  .layout-b-content > p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
  }

  /* Compact CTA buttons on laptop */
  .cta-centered {
    margin: 0;
    gap: 0.625rem;
  }

  .btn {
    padding: 0.5rem 1.125rem;
    font-size: 0.9375rem;
  }

  .layout-b-hero {
    margin: 0;
    max-width: min(44rem, 85vw);
    min-height: 0;
  }

  .layout-b[data-audience-section="parents"] .layout-b-hero {
    flex: 1.2 1 auto;
  }

  .layout-b[data-audience-section="schools"] .layout-b-hero {
    flex: 1 1 auto;
  }

  .hero-img {
    max-height: 45vh;
  }
}

/* Standard desktop screens */
@media (min-width: 48.0625rem) and (max-width: 120rem) and (min-height: 56.3125rem) {
  /* Standard desktop screens (e.g., 1920x1080) */
  .layout-b {
    min-height: 100vh;
    max-height: 100vh;
  }

  .layout-b[data-audience-section="parents"] {
    padding-top: 5rem;
    padding-bottom: 2rem;
  }

  .layout-b[data-audience-section="schools"] {
    padding-top: 4.5rem;
    padding-bottom: 1.5rem;
  }

  .layout-b-content {
    padding: 0 2rem;
  }

  .layout-b[data-audience-section="parents"] .layout-b-content {
    gap: 2vh;
  }

  .layout-b[data-audience-section="schools"] .layout-b-content {
    gap: 1.5vh;
  }

  .layout-b-hero {
    margin: 0;
    min-height: 0;
  }

  .layout-b[data-audience-section="parents"] .layout-b-hero {
    flex: 1.2 1 auto;
  }

  .layout-b[data-audience-section="schools"] .layout-b-hero {
    flex: 1 1 auto;
  }

  .hero-img {
    max-height: 50vh;
  }
}

/* Large desktop/widescreen displays - using AND logic for truly large screens */
@media (min-width: 120.0625rem) and (min-height: 67.5625rem) {
  /* Hero Section - Large desktop/widescreen optimizations (not laptops) */
  .layout-b {
    min-height: 100vh;
    max-height: 100vh;
  }

  .layout-b[data-audience-section="parents"] {
    padding-top: 5.5rem;
    padding-bottom: 2.5rem;
  }

  .layout-b[data-audience-section="schools"] {
    padding-top: 5rem;
    padding-bottom: 2rem;
  }

  .layout-b-content {
    padding: 0 2rem;
  }

  .layout-b[data-audience-section="parents"] .layout-b-content {
    gap: 2.5vh;
  }

  .layout-b[data-audience-section="schools"] .layout-b-content {
    gap: 2vh;
  }

  .layout-b-content h1 {
    font-size: 2.75rem;
    line-height: 1.2;
  }

  .layout-b-content > p {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.6;
  }

  .cta-centered {
    margin: 0;
  }

  .layout-b-hero {
    margin: 0;
    max-width: min(48rem, 85vw);
    min-height: 0;
  }

  .layout-b[data-audience-section="parents"] .layout-b-hero {
    flex: 1.2 1 auto;
  }

  .layout-b[data-audience-section="schools"] .layout-b-hero {
    flex: 1 1 auto;
  }

  .hero-img {
    max-height: 52vh;
  }
}

@media (min-width: 48rem) {
  .feature-list {
    grid-template-columns: 1fr 1fr;
  }

  .footer-content {
    flex-direction: row;
  }

  .how-it-works-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }

  .journey-split {
    grid-template-columns: 0.55fr 1.8fr;
    align-items: stretch;
  }

  .journey-feature-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.35fr;
    align-items: stretch;
  }

  .journey-feature-card {
    max-width: none;
    height: 100%;
  }

  .journey-plan-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .journey-plan-day {
    grid-column: span 1;
    min-width: 0;
  }

  .journey-plan-day:nth-child(5),
  .journey-plan-day:nth-child(6),
  .journey-plan-day:nth-child(7) {
    grid-column: span 1;
  }
}

@media (min-width: 48.0625rem) {
  .benefits-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 48rem) {
  .site-header {
    padding: 1rem 0;
  }

  .header-container {
    padding: 0 1rem;
  }

  .header-content {
    padding: 0.5rem 1rem;
    border-radius: 3.125rem;
  }

  .logo-icon {
    height: 2rem;
  }

  .main-nav {
    gap: 0.5rem;
  }

  .audience-toggle {
    padding: 0.2rem;
  }

  .audience-toggle-slider {
    top: 0.2rem;
    bottom: 0.2rem;
    left: 0.2rem;
    right: 50%;
  }

  .audience-toggle-slider[data-active="schools"] {
    left: 50%;
    right: 0.2rem;
  }

  .audience-toggle-btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    min-height: 1.75rem;
  }

  .nav-btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
  }

  .nav-link {
    font-size: 0.8125rem;
    padding: 0.375rem 0.5rem;
  }

  .nav-cta {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
  }

  /* Hero Section - Mobile adjustments */
  .layout-b {
    min-height: 100vh;
    max-height: 100vh;
  }

  /* rem for fixed spacing from header/footer */
  .layout-b[data-audience-section="parents"] {
    padding-top: 4rem;
    padding-bottom: 1.5rem;
  }

  .layout-b[data-audience-section="schools"] {
    padding-top: 3.5rem;
    padding-bottom: 1rem;
  }

  .layout-b-content {
    padding: 0 1rem;
  }

  /* vh for fluid vertical spacing */
  .layout-b[data-audience-section="parents"] .layout-b-content {
    gap: 1.5vh;
  }

  .layout-b[data-audience-section="schools"] .layout-b-content {
    gap: 1.2vh;
  }

  /* rem for mobile typography */
  .layout-b-content h1 {
    font-size: 1.875rem;
    line-height: 1.1;
  }

  .layout-b-content > p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.45;
  }

  .cta-centered {
    margin: 0;
  }

  .layout-b-hero {
    margin: 0;
    min-height: 0;
  }

  /* Flex for fluid space distribution */
  .layout-b[data-audience-section="parents"] .layout-b-hero {
    flex: 1.3 1 auto;
  }

  .layout-b[data-audience-section="schools"] .layout-b-hero {
    flex: 1.1 1 auto;
  }

  /* vh for responsive image height */
  .hero-img {
    max-height: 48vh;
  }

  .journey-section {
    margin: var(--section-margin-vertical-mobile) auto;
    padding: var(--section-padding-vertical-mobile) var(--section-padding-horizontal-mobile);
    border-radius: 1.5rem;
  }

  .journey-section-title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }

  .journey-section-subtitle {
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
  }

  .journey-split-wrapper {
    padding: 1.25rem 1.125rem 1.5rem;
  }

  .journey-feature-grid {
    grid-template-columns: 1fr;
  }

  .journey-footer-note {
    font-size: 0.98rem;
  }

  .journey-plan-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 3px;
  }

  .journey-plan-day {
    grid-column: span 3;
    min-width: 0;
  }

  .journey-plan-day:nth-child(5),
  .journey-plan-day:nth-child(6),
  .journey-plan-day:nth-child(7) {
    grid-column: span 4;
  }

  .benefits-section {
    margin: var(--section-margin-vertical-mobile) auto;
    padding: var(--section-padding-vertical-mobile) var(--section-padding-horizontal-mobile);
    border-radius: 1.5rem;
  }

  .benefits-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .faq-section {
    margin: var(--section-margin-vertical-mobile) auto;
    padding: var(--section-padding-vertical-mobile) var(--section-padding-horizontal-mobile);
    border-radius: 1.5rem;
  }

  .faq-question {
    padding: 0.85rem 0.9rem;
    font-size: 0.96rem;
  }

  .faq-answer {
    padding: 0 0.9rem 0.8rem 0.9rem;
  }
}

@media (max-width: 40rem) {
  .header-container {
    padding: 0 0.5rem;
  }

  .header-content {
    padding: 0.5rem 0.5rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.375rem;
  }

  .logo-icon {
    height: 1.875rem;
  }

  .logo-group {
    grid-column: 1;
  }

  .main-nav {
    grid-column: 2 / 4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
  }

  .audience-toggle {
    padding: 0.2rem;
    flex: 1;
    max-width: 14rem;
    margin: 0 auto;
  }

  .audience-toggle-slider {
    top: 0.2rem;
    bottom: 0.2rem;
    left: 0.2rem;
    right: 50%;
  }

  .audience-toggle-slider[data-active="schools"] {
    left: 50%;
    right: 0.2rem;
  }

  .audience-toggle-btn {
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
    min-height: 1.75rem;
  }

  .nav-link {
    display: none;
  }

  .nav-icon-link {
    display: flex;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    margin-left: auto;
  }

  .nav-icon-link svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .nav-cta {
    padding: 0.5rem 0.875rem;
    font-size: 0.75rem;
    white-space: nowrap;
  }
}

/* === Mobile Center Alignment === */
/* On mobile viewports, center-align specific elements for better visual balance */
@media (max-width: 768px) {
  /* Keep section headers, subheaders, and labels LEFT aligned by default */
  /* No changes to base classes - they maintain left alignment */

  /* Fix glowing halo on mobile - make it visible and properly positioned */
  .cta-split-hero::before {
    width: 70%;
    height: 70%;
    top: 20%;
    left: 50%;
  }

  .cta-split-hero {
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  .cta-split-hero-img {
    max-width: 100%;
    width: 100%;
    height: auto;
  }

  /* Stack features horizontally (No credit card required, etc.) */
  .cta-split-features {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
  }

  /* Stack CTA buttons vertically and center */
  .cta-split-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
  }

  .cta-split-buttons .btn {
    width: 100%;
    max-width: 18.75rem;
    text-align: center;
  }

  /* Journey Section - Enhanced mobile layout */
  .journey-split {
    gap: 2.5rem;
  }

  .journey-col {
    padding: 2rem 1.75rem;
    margin-bottom: 1rem;
    overflow: visible; /* Allow ::after arrow separator to be visible outside bounds */
  }


  /* Center align before/after labels */
  .journey-col-label {
    display: flex;
    padding: 0.4rem 1.2rem;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: fit-content;
    box-shadow: 
      5px 5px 10px rgba(163, 177, 198, 0.4),
      -5px -5px 10px rgba(255, 255, 255, 0.8);
  }

  /* Center align titles (Life right now / With Splorio) */
  .journey-col-title {
    font-size: 1.4rem;
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    line-height: 1.3;
    text-align: center;
  }

  /* Center align pills (Chaos mode / Gentle, structured support) */
  .journey-pill {
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    font-size: 0.85rem;
    padding: 0.4rem 1rem;
  }

  .journey-col-description {
    font-size: 1.08rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
  }

  .journey-bullet-list {
    align-items: center;
  }

  /* Distinct styling for before/after columns */
  .journey-col--before {
    border-left: 0.25rem solid rgba(236, 128, 47, 0.3); /* Primary Orange with opacity */
  }

  .journey-col--after {
    border-left: 0.25rem solid rgba(89, 151, 199, 0.5); /* Secondary Blue (#5997C7) with opacity */
  }

  .journey-bullet {
    text-align: left;
    flex-direction: row;
    align-items: flex-start;
    max-width: 90%;
    margin: 0 auto;
  }

  .journey-bullet-text {
    text-align: left;
    font-size: 1rem;
  }

  .journey-feature-grid {
    align-items: center;
  }

  .journey-footer-note {
    text-align: center;
  }

  /* How It Works Orbit - Fix centering on mobile */
  .orbit-visualization {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
    width: 100%;
    overflow: visible;
  }

  .orbit-wrapper {
    margin: 0 auto;
  }

  .how-it-works-orbit-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  /* Benefits Section - keep left-aligned like desktop, just stack vertically */
  .benefit-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .benefit-list li {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 0.6rem;
  }

  /* Center align the footer note */
  .benefits-footer-note {
    text-align: center;
  }
}

/* ========================================
   BOOKING MODAL STYLES
   Matches website neumorphism design system
   ======================================== */

.booking-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(249, 250, 251, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s;
}

.booking-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.booking-modal-container {
  background: #f9fafb;
  border-radius: 2rem;
  width: 100%;
  max-width: 48rem;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 
    12px 12px 24px rgba(163, 177, 198, 0.5),
    -12px -12px 24px rgba(255, 255, 255, 0.9),
    inset 2px 2px 4px rgba(255, 255, 255, 0.3),
    inset -2px -2px 4px rgba(163, 177, 198, 0.15);
  transform: scale(0.95) translateY(20px);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.booking-modal-overlay.active .booking-modal-container {
  transform: scale(1) translateY(0);
}

.booking-modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  border-radius: 0.75rem;
  background: #f9fafb;
  color: var(--color-primary-blue);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 
    4px 4px 8px rgba(163, 177, 198, 0.35),
    -4px -4px 8px rgba(255, 255, 255, 0.8);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
}

.booking-modal-close:hover {
  box-shadow: 
    inset 3px 3px 6px rgba(163, 177, 198, 0.3),
    inset -3px -3px 6px rgba(255, 255, 255, 0.7);
  color: var(--color-primary-orange);
}

.booking-modal-content {
  padding: 2.5rem;
}

.booking-modal-header {
  text-align: center;
  margin-bottom: 2rem;
}

/* Booking Kicker - Uses base .section-kicker styles */
.booking-kicker {
  margin: 0 auto 1rem;
}

.booking-kicker-dot {
  background: var(--color-primary-blue);
}

/* Booking Heading - Uses base .section-heading styles */
.booking-heading {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
}

/* Booking Subtitle - Uses base .section-subtitle styles */
.booking-subtitle {
  font-size: 1rem;
  max-width: 28rem;
  margin: 0 auto;
}

/* Loading State */
.booking-loading {
  text-align: center;
  padding: 4rem 2rem;
}

.booking-loading-spinner {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: #f9fafb;
  margin: 0 auto 1.5rem;
  position: relative;
  box-shadow: 
    inset 4px 4px 8px rgba(163, 177, 198, 0.4),
    inset -4px -4px 8px rgba(255, 255, 255, 0.8);
}

.booking-loading-spinner::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--color-primary-blue);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.spin {
  animation: spin 1s linear infinite;
}

.booking-loading p {
  color: rgb(71, 85, 105);
  font-size: 0.95rem;
  font-weight: 500;
}

/* Scheduler Container - Calendar + Times side by side */
.booking-scheduler {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 40rem) {
  .booking-scheduler {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

/* Calendar Section */
.booking-calendar-section {
  background: #f9fafb;
  border-radius: 1.5rem;
  padding: 1.5rem;
  box-shadow: 
    8px 8px 16px rgba(163, 177, 198, 0.35),
    -8px -8px 16px rgba(255, 255, 255, 0.85);
}

.booking-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.booking-calendar-month {
  font-family: var(--font-primary);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-primary-blue);
}

.booking-calendar-nav {
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 0.5rem;
  background: #f9fafb;
  color: var(--color-primary-blue);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 
    3px 3px 6px rgba(163, 177, 198, 0.3),
    -3px -3px 6px rgba(255, 255, 255, 0.7);
  transition: all 0.3s ease;
}

.booking-calendar-nav:hover {
  box-shadow: 
    inset 2px 2px 4px rgba(163, 177, 198, 0.3),
    inset -2px -2px 4px rgba(255, 255, 255, 0.7);
  color: var(--color-primary-orange);
}

.booking-calendar-nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.booking-calendar-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.booking-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.booking-calendar-weekdays span {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(100, 116, 139);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem;
}

.booking-calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
}

.booking-calendar-day {
  aspect-ratio: 1;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--color-primary-blue);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.booking-calendar-day:hover:not(:disabled):not(.empty):not(.past) {
  background: rgba(53, 74, 147, 0.1);
}

.booking-calendar-day.empty {
  cursor: default;
}

.booking-calendar-day.past {
  color: rgb(203, 213, 225);
  cursor: not-allowed;
}

.booking-calendar-day.today {
  font-weight: 700;
  color: var(--color-primary-orange);
}

.booking-calendar-day.available {
  background: #f9fafb;
  box-shadow: 
    2px 2px 4px rgba(163, 177, 198, 0.25),
    -2px -2px 4px rgba(255, 255, 255, 0.7);
}

.booking-calendar-day.available:hover {
  box-shadow: 
    inset 2px 2px 4px rgba(163, 177, 198, 0.2),
    inset -2px -2px 4px rgba(255, 255, 255, 0.6);
  transform: scale(1.05);
}

.booking-calendar-day.selected {
  background: var(--color-primary-blue);
  color: white;
  box-shadow: 
    0 4px 12px rgba(53, 74, 147, 0.35);
}

/* Times Section */
.booking-times-section {
  background: #f9fafb;
  border-radius: 1.5rem;
  padding: 1.5rem;
  box-shadow: 
    inset 4px 4px 8px rgba(163, 177, 198, 0.25),
    inset -4px -4px 8px rgba(255, 255, 255, 0.7);
  display: flex;
  flex-direction: column;
}

.booking-times-header {
  margin-bottom: 1rem;
}

.booking-times-date {
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-primary-blue);
}

.booking-time-slots {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 16rem;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.booking-times-placeholder {
  color: rgb(148, 163, 184);
  font-size: 0.9rem;
  text-align: center;
  padding: 2rem 1rem;
}

.booking-time-slot {
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 0.75rem;
  background: #f9fafb;
  color: var(--color-primary-blue);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  box-shadow: 
    3px 3px 6px rgba(163, 177, 198, 0.25),
    -3px -3px 6px rgba(255, 255, 255, 0.7);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.booking-time-slot:hover {
  box-shadow: 
    inset 3px 3px 6px rgba(163, 177, 198, 0.2),
    inset -3px -3px 6px rgba(255, 255, 255, 0.6);
  color: var(--color-primary-orange);
}

.booking-time-slot.selected {
  background: var(--color-primary-blue);
  color: white;
  box-shadow: 
    0 4px 12px rgba(53, 74, 147, 0.35);
}

/* No Slots Message */
.booking-no-slots {
  text-align: center;
  padding: 3rem 2rem;
}

.booking-no-slots .booking-no-slots-icon {
  width: 4rem;
  height: 4rem;
  font-size: 1.75rem;
  margin: 0 auto 1.5rem;
}

.booking-no-slots p {
  font-family: var(--font-primary);
  color: var(--color-primary-blue);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
}

.booking-no-slots-hint {
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  color: rgb(71, 85, 105) !important;
}

.booking-no-slots-hint a {
  color: var(--color-primary-orange);
  text-decoration: underline;
}

/* Step Actions */
.booking-step-actions {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
}

.booking-step-actions .btn {
  min-width: 14rem;
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.booking-step-actions .btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.booking-step-actions .btn svg {
  transition: transform 0.2s ease;
}

.booking-step-actions .btn:hover:not(:disabled) svg {
  transform: translateX(3px);
}

/* Persona Selection */
.booking-persona-selection {
  margin-bottom: 1.5rem;
}

.booking-persona-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary-blue);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
  text-align: center;
}

.booking-persona-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.booking-persona-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: none;
  border-radius: 1rem;
  background: #f9fafb;
  cursor: pointer;
  text-align: left;
  box-shadow: 
    4px 4px 8px rgba(163, 177, 198, 0.3),
    -4px -4px 8px rgba(255, 255, 255, 0.7);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.booking-persona-btn:hover {
  box-shadow: 
    6px 6px 12px rgba(163, 177, 198, 0.35),
    -6px -6px 12px rgba(255, 255, 255, 0.8);
  transform: translateY(-2px);
}

.booking-persona-btn.selected {
  background: var(--color-primary-blue);
  box-shadow: 
    0 4px 12px rgba(53, 74, 147, 0.35);
}

.booking-persona-btn.selected .booking-persona-icon {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  box-shadow: none;
}

.booking-persona-btn.selected .booking-persona-title,
.booking-persona-btn.selected .booking-persona-desc {
  color: white;
}

.booking-persona-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-blue);
  flex-shrink: 0;
  box-shadow: 
    inset 2px 2px 4px rgba(163, 177, 198, 0.25),
    inset -2px -2px 4px rgba(255, 255, 255, 0.7);
  transition: all 0.3s ease;
}

.booking-persona-title {
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-primary-blue);
  display: block;
  transition: color 0.3s ease;
}

.booking-persona-desc {
  font-size: 0.8rem;
  color: rgb(100, 116, 139);
  display: block;
  margin-top: 0.125rem;
  transition: color 0.3s ease;
}

/* Intent Section */
.booking-intent-section {
  margin-bottom: 1rem;
}

.booking-form-textarea {
  resize: vertical;
  min-height: 4.5rem;
  font-family: var(--font-secondary);
  line-height: 1.5;
}

/* Step Navigation (Back button row) */
.booking-step-nav {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 1rem;
}

/* Back Button */
.booking-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: #f9fafb;
  border: none;
  border-radius: 999px;
  color: var(--color-primary-blue);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0.5rem 1rem;
  box-shadow: 
    3px 3px 6px rgba(163, 177, 198, 0.3),
    -3px -3px 6px rgba(255, 255, 255, 0.7);
  transition: all 0.3s ease;
}

.booking-back-btn:hover {
  box-shadow: 
    inset 2px 2px 4px rgba(163, 177, 198, 0.25),
    inset -2px -2px 4px rgba(255, 255, 255, 0.6);
  color: var(--color-primary-orange);
}

.booking-back-btn svg {
  transition: transform 0.2s ease;
}

.booking-back-btn:hover svg {
  transform: translateX(-2px);
}

/* Selected Summary Card */
.booking-selected-summary {
  background: #f9fafb;
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: 
    6px 6px 12px rgba(163, 177, 198, 0.3),
    -6px -6px 12px rgba(255, 255, 255, 0.8);
}

.booking-selected-summary .summary-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: var(--color-primary-blue);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.booking-selected-summary .summary-details {
  flex: 1;
}

.booking-selected-summary .summary-date {
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-primary-blue);
  margin: 0 0 0.125rem 0;
}

.booking-selected-summary .summary-time {
  font-size: 0.9rem;
  color: var(--color-primary-orange);
  font-weight: 500;
  margin: 0;
}

/* Form Styles */
.booking-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.booking-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.booking-form-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-primary-blue);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.booking-form-input {
  padding: 0.875rem 1rem;
  border: none;
  border-radius: 0.75rem;
  background: #f9fafb;
  font-size: 1rem;
  font-family: var(--font-secondary);
  color: var(--color-black);
  box-shadow: 
    inset 4px 4px 8px rgba(163, 177, 198, 0.3),
    inset -4px -4px 8px rgba(255, 255, 255, 0.7);
  transition: all 0.3s ease;
}

.booking-form-input::placeholder {
  color: rgba(0, 0, 0, 0.3);
}

.booking-form-input:focus {
  outline: none;
  box-shadow: 
    inset 5px 5px 10px rgba(163, 177, 198, 0.35),
    inset -5px -5px 10px rgba(255, 255, 255, 0.8),
    0 0 0 3px rgba(53, 74, 147, 0.15);
}

/* Success Header */
.booking-success-header {
  padding-top: 1rem;
}

.booking-success-icon {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: #f9fafb;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #48BB78;
  box-shadow: 
    8px 8px 16px rgba(163, 177, 198, 0.4),
    -8px -8px 16px rgba(255, 255, 255, 0.9),
    inset 2px 2px 4px rgba(255, 255, 255, 0.5),
    inset -2px -2px 4px rgba(163, 177, 198, 0.2);
  animation: successBounce 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes successBounce {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

/* Confirmation Card */
.booking-confirmation-card {
  background: #f9fafb;
  border-radius: 1.25rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 
    8px 8px 16px rgba(163, 177, 198, 0.35),
    -8px -8px 16px rgba(255, 255, 255, 0.85);
}

.booking-confirmation-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.875rem 0;
}

.booking-confirmation-row:not(:last-child) {
  border-bottom: 1px solid rgba(163, 177, 198, 0.15);
}

.booking-confirmation-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  background: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-blue);
  flex-shrink: 0;
  box-shadow: 
    3px 3px 6px rgba(163, 177, 198, 0.25),
    -3px -3px 6px rgba(255, 255, 255, 0.7);
}

.booking-confirmation-text {
  flex: 1;
  min-width: 0;
}

.booking-confirmation-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: rgb(100, 116, 139);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 0.25rem 0;
}

.booking-confirmation-value {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-primary-blue);
  margin: 0;
  word-break: break-word;
}

.booking-confirmation-value a {
  color: var(--color-primary-orange);
  text-decoration: none;
  transition: color 0.2s ease;
}

.booking-confirmation-value a:hover {
  text-decoration: underline;
}

/* Responsive Adjustments */
@media (max-width: 40rem) {
  .booking-modal-container {
    max-height: 95vh;
    border-radius: 1.5rem;
    margin: 0.5rem;
  }
  
  .booking-modal-content {
    padding: 1.5rem;
  }
  
  .booking-heading {
    font-size: 1.5rem;
  }
  
  .booking-calendar-section {
    padding: 1.25rem;
  }
  
  .booking-times-section {
    padding: 1.25rem;
  }
  
  .booking-step-actions .btn {
    width: 100%;
  }
}