/* ==========================================================================
   CoachBridge Styles
   Colors: Mint #7FD4C1 | Dark Teal #00343D | Cream #F6F1E7
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reset & Base
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --color-yellow: #7FD4C1;
  --color-yellow-2: #F3D862;
  --color-yellow-dark: #5fbcaa;
  --color-yellow-light-pale: #ECD9A0;
  --color-yellow-light-pale-2: #ecd9d1;
  --color-teal: #7FD4C1;
  --color-teal-dark: #5fbcaa;
  --color-teal-dark-2: #034;
  --color-teal-dark-3: #36C4CD;
  --color-teal-dark-4: #079;
  --color-dark: #00343D;
  --color-dark-light: #1a5563;
  --color-gray: #4a7c79;
  --color-gray-light: #eef6f5;
  --color-white: #ffffff;
  --color-text: #00343D;
  --color-text-muted: #4a7c79;

  /* NEW CODE - REFACTOR 1 - START */
  --color-nav-link-color: #00343D;
  --color-nav-link-hover-background: #eef6f5;
  --color-nav-link-hover-color: #5fbcaa;

  --color-btn--primary-1-background: #fff;
  --color-btn--primary-1-color: #333;
  --color-btn--primary-1-border: #777;

  --color-btn--primary-1-background-hover: #eff;
  --color-btn--primary-1-color-hover: #333;
  --color-btn--primary-1-border-hover: #0a9;

  --color-btn--primary-2-background: #F4CE3E;
  --color-btn--primary-2-color: #1F2937;
  --color-btn--primary-2-border: #F4CE3E;

  --color-btn--primary-2-background-hover: #F9d53E;
  --color-btn--primary-2-color-hover: #1F2937;
  --color-btn--primary-2-border-hover: #F4CE3E;

  --color-cta-banner-background: #fbf3e0;
  --color-cta-banner-color: #555;

  --color-section-eyebrow: #098;
  --color-section-heading: #555;

  --color-section-eyebrow-2: #098;
  --color-section-heading-2: #555;

  --color-site-header: #F4CE3E;

  --color-circle-1: #F9D442;
  --color-circle-2: #40c0cf;

  --color-hero-bg-1: #fff;
  --color-hero-bg-2: #FBF2E0;
  --color-hero-color-2: #fff;

  --color-hero-bg-3: linear-gradient(135deg, #fff9ee 0%, #eeffff 100%);
  --color-hero-color-3: #fff;

  --color-card-1-background: #fffaef;
  --color-card-1-border: #aaa;
  --color-card-icon-1-background: #ec9;
  --color-card-icon-1-color: #fff;

  --color-card-2-background: #fffaef;
  --color-card-2-border: #aaa;
  --color-card-2-heading: #555;
  --color-card-2-sub-heading: #777;
  --color-card-2-text: #555;
  --color-card-icon-2-background: rgba(127, 212, 193, 0.12);
  --color-card-icon-2-background: #9cb;
  --color-card-icon-2-color: #fff;

  --color-card-3-background: rgba(50, 155, 155, 0.2);
  --color-card-3-border: rgba(127, 212, 193, 0.18);

  --color-notice-1-background: #fff;
  --color-notice-1-border: #255;
  --color-notice-1-heading: #555;
  --color-notice-1-text: #555;

  --color-band-1-background: #99cfd4;
  --color-band-1-heading: #555;
  --color-band-1-text: #333;
  --color-band-1-button-background: #add;
  --color-band-1-button-color: #000;
  --color-band-1-button-border: #fff;
  --color-band-1-button-hover-background: #499;
  --color-band-1-button-hover-color: #fff;
  --color-band-1-button-primary-background: #F6F1E7;
  --color-band-1-button-primary-color: #0b3439;
  --color-band-1-button-primary-border: #F6F1E7;
  --color-band-1-button-primary-hover-background: #fff;
  --color-band-1-button-primary-hover-color: #000;
  /* NEW CODE - REFACTOR 1 - END */

  --hero-gradient: linear-gradient(135deg, #fff9ee 0%, #eeffff 100%);

  --font-sans: 'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, 'Segoe UI', Verdana, Arial, sans-serif;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);

  --transition: 0.2s ease;
  --max-width: 1200px;

  /* UI chrome — borders, surfaces, stripes */
  /*--ui-border: var(--ui-border);
  --ui-divider: var(--ui-divider);
  --ui-surface: var(--ui-surface);
  --ui-stripe: var(--ui-stripe);*/
  --ui-border: #a7dfda;
  --ui-divider: #0ac;
  --ui-surface: #feffff;
  --ui-stripe: #eee;
  --ui-muted-text: #9ca3af;
  --ui-subtle: #d1d5db;
  --ui-confirmed-bg: #f0fdf4;
  --ui-confirmed-hover: #dcfce7;

  --callout-background: #fdfbf0;
  --callout-background-border: #e8dfa0;

  --large-card-background: #fff;
}

[data-theme="dark"] {
  --color-white: #1c3b41;
  --color-white-2: #5fa0b0;
  --color-gray-light: #234850;
  --color-dark: #F6F1E7;
  --color-dark-light: #d4cfc6;
  --color-gray: #a8c8c3;
  --color-text: #F6F1E7;
  --color-text-muted: #a8c8c3;

  --color-teal-dark-4: #5fbcaa;

  /* NEW CODE - REFACTOR 1 - START */
  --color-nav-link-color: #F6F1E7;
  --color-nav-link-hover-background: #234850;
  --color-nav-link-hover-color: #5fbcaa;

  --color-btn--primary-1-background: #1a5563;
  --color-btn--primary-1-color: #fff;
  --color-btn--primary-1-border: #fff;
  --color-btn--primary-1-background-hover: #2a7a87;
  --color-btn--primary-1-color-hover: #fff;
  --color-btn--primary-1-border-hover: #fff;

  --color-btn--primary-2-background: #5fbcaa;
  --color-btn--primary-2-color: #1F2937;
  --color-btn--primary-2-border: #5fbcaa;

  --color-btn--primary-2-background-hover: #5fdcca;
  --color-btn--primary-2-color-hover: #1F2937;
  --color-btn--primary-2-border-hover: #5fbcaa;

  --color-cta-banner-background: #308471;
  --color-cta-banner-color: #fff;

  --color-section-eyebrow: #ced;
  --color-section-heading: #fff;

  --color-section-eyebrow: #ced;
  --color-section-heading-2: #fff;

  --color-site-header: #9cb;

  --color-circle-1: #9ba;
  --color-circle-2: #7FD4C1;

  --color-hero-bg-1: #103a41;
  --color-hero-bg-2: #0b3439;
  --color-hero-color-2: #F6F1E7;

  --color-hero-bg-3: linear-gradient(135deg, #1c3b41 0%, #1a4a52 100%);

  --color-card-1-background: #103F44;
  --color-card-1-border: #245A59;
  --color-card-icon-1-background: #7aa;
  --color-card-icon-1-color: #fff;

  --color-card-2-background: #fffaef;
  --color-card-2-border: #aaa;
  --color-card-2-heading: #F6F1E7;
  --color-card-2-sub-heading: #708787;
  --color-card-2-text: #B6BFB9;
  --color-card-icon-2-background: rgba(127, 212, 193, 0.12);
  --color-card-icon-2-color: #7FD4C1;

  --color-card-3-background: rgba(50, 155, 155, 0.2);
  --color-card-3-border: rgba(127, 212, 193, 0.18);

  --color-notice-1-background: #00343D;
  --color-notice-1-border: #fff;
  --color-notice-1-heading: #fff;
  --color-notice-1-text: #fff;

  --color-band-1-background: #071e24;
  --color-band-1-heading: #fff;
  --color-band-1-text: #ddd;
  --color-band-1-button-background: #F6F1E7;
  --color-band-1-button-color: #000;
  --color-band-1-button-border: #fff;
  --color-band-1-button-primary-background: #071e24;
  --color-band-1-button-primary-color: #fff;
  --color-band-1-button-primary-border: #F6F1E7;
  --color-band-1-button-primary-hover-background: #0b3439;
  --color-band-1-button-primary-hover-color: #fff;
  /* NEW CODE - REFACTOR 1 - END */

  --hero-gradient: linear-gradient(135deg, #1c3b41 0%, #1a4a52 100%);

  --ui-border: #2a4852;
  --ui-divider: #1b3840;
  --ui-surface: #1c3d45;
  --ui-stripe: #1e414a;
  --ui-muted-text: #5a7882;
  --ui-subtle: #3d6068;
  --ui-confirmed-bg: rgba(22,163,74,0.08);
  --ui-confirmed-hover: rgba(22,163,74,0.15);

  --callout-background: #1b3840;
  --callout-background-border: #cfffef;

  --large-card-background: #1b3840;
}

html {
  scroll-behavior: smooth;
}

html {
  font-size: 106.25%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  color: var(--color-text);
  line-height: 1.6;
  background: var(--color-white);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-teal-dark);
  text-decoration: underline;
  transition: color var(--transition);
}

a:hover {
  color: var(--color-dark);
}

ul, ol {
  list-style: none;
}

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 3px solid var(--color-teal);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 0.625rem 1.5rem;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: var(--font-size-base);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
  line-height: 1.4;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn--primary {
  background: var(--color-btn--primary-1-background);
  color: var(--color-btn--primary-1-color);
  border-color: var(--color-btn--primary-1-border);
}

.btn--primary:hover {
  background: var(--color-btn--primary-1-background-hover);
  border-color: var(--color-btn--primary-1-border-hover);
  color: var(--color-btn--primary-1-color-hover);
}

.btn--primary-2 {
  background: var(--color-btn--primary-2-background);
  color: var(--color-btn--primary-2-color);
  border-color: var(--color-btn--primary-2-border);
}

.btn--primary-2:hover {
  background: var(--color-btn--primary-2-background-hover);
  border-color: var(--color-btn--primary-2-border-hover);
  color: var(--color-btn--primary-2-color-hover);
}


.btn--primary-3 {
  background: var(--color-yellow);
  color: var(--color-dark);
  border-color: var(--color-yellow);
}

[data-theme="dark"] .btn--primary-3 {
  background: var(--color-yellow);
}

.btn--primary-3:hover {
  background: var(--color-yellow-dark);
  border-color: var(--color-yellow-dark);
  color: var(--color-dark);
}


.btn--secondary {
  background: var(--color-teal);
  color: var(--color-white);
  border-color: var(--color-teal);
}

.btn--secondary:hover {
  background: var(--color-teal-dark);
  border-color: var(--color-teal-dark);
  color: var(--color-white);
}

.btn--white {
  background: var(--color-white);
  color: var(--color-dark);
  border-color: var(--ui-subtle);
}

.btn--white:hover {
  background: var(--color-gray-light);
  border-color: var(--ui-muted-text);
  color: var(--color-dark);
}

.btn--dark {
  background: var(--color-dark);
  color: var(--color-white);
  border-color: var(--color-dark);
}

.btn--dark:hover {
  background: var(--color-dark-light);
  border-color: var(--color-dark-light);
  color: var(--color-white);
}

.btn--outline {
  background: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}

.btn--outline:hover {
  background: var(--color-white);
  color: var(--color-dark);
}

.btn--outline-dark {
  background: transparent;
  color: var(--color-dark);
  border-color: var(--color-dark);
}

.btn--outline-dark:hover {
  background: var(--color-dark);
  color: var(--color-white);
}

[data-theme="dark"] .btn--outline {
  color: #fff;
  border-color: #fff;
}

[data-theme="dark"] .btn--outline:hover {
  background: #2a7a87;
  border-color: #2a7a87;
  color: #fff;
}

/*[data-theme="dark"] .btn--primary {
  background: #1a5563;
  border-color: #fff;
  color: #fff;
}*/

/*[data-theme="dark"] .btn--primary:hover {
  background: #2a7a87;
  border-color: #fff;
  color: #fff;
}*/

/*[data-theme="dark"] .btn--primary-2 {
  background: ##ECD9A0;
  border-color: #fff;
  color: var(--color-teal-dark-2);
}*/

/*[data-theme="dark"] .btn--primary-2:hover {
  background: var(--color-yellow-light-pale-2);
  border-color: #fff;
  color: var(--color-teal-dark-2);
}*/

[data-theme="dark"] .btn--outline-dark {
  color: #fff;
  border-color: #fff;
}

[data-theme="dark"] .btn--outline-dark:hover {
  background: #2a7a87;
  border-color: #2a7a87;
  color: #fff;
}

[data-theme="dark"] .btn--dark {
  background: #1a5563;
  border-color: #1a5563;
  color: #fff;
}

[data-theme="dark"] .btn--dark:hover {
  background: #2a7a87;
  border-color: #2a7a87;
  color: #fff;
}

.btn--large {
  padding: 0.875rem 2rem;
  font-size: var(--font-size-lg);
}

.btn--small {
  padding: 0.375rem 1rem;
  font-size: var(--font-size-sm);
}

/* Sized to match .role-badge/.status-badge pills — for small inline
   action buttons placed directly next to one, e.g. Resend buttons on
   the admin User Contract Status page. */
.btn--pill {
  padding: 0.2em 0.6em;
  font-size: 0.7rem;
}

.btn-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--radius-full);
  animation: btn-spin 0.65s linear infinite;
  vertical-align: -0.15em;
}

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

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white);
  border-bottom: 2px solid var(--color-site-header);
  box-shadow: var(--shadow-sm);
}

.nav {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.nav__logo {
  text-decoration: none;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav__logo-img {
  height: 64px;
  width: auto;
}

.nav__logo-text {
  font-size: var(--font-size-xl);
  font-weight: 800;
  color: var(--color-dark);
  letter-spacing: -0.02em;
}

.nav__logo-accent {
  color: var(--color-teal-dark-3);
}

[data-theme="dark"] .nav__logo-accent {
  color: var(--color-teal);
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  justify-content: center;
  flex-wrap: wrap;
}

.nav__item {
  position: relative;
}

.nav__link {
  display: block;
  padding: var(--space-2) var(--space-3);
  text-decoration: none;
  color: var(--color-nav-link-color);
  font-weight: 500;
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}

/*[data-theme="dark"] .nav__link {
  transition: background var(--transition), color var(--transition);
}*/

.nav__link:hover,
.nav__link--active {
  background: var(--color-nav-link-hover-background);
  color: var(--color-nav-link-hover-color);
}

/* Dropdown */
.nav__item--dropdown {
  position: relative;
}

.nav__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--color-white);
  border: 1px solid var(--color-gray-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  min-width: 180px;
  z-index: 200;
  padding: calc(var(--space-2) + 8px) 0 var(--space-2);
}

.nav__item--dropdown:hover .nav__dropdown,
.nav__item--dropdown:focus-within .nav__dropdown {
  display: block;
}

.nav__dropdown-link {
  display: block;
  padding: var(--space-2) var(--space-4);
  text-decoration: none;
  color: var(--color-dark);
  font-size: var(--font-size-sm);
  transition: background var(--transition);
}

.nav__dropdown-link:hover {
  background: var(--color-gray-light);
  color: var(--color-teal-dark);
}

.nav__cta {
  flex-shrink: 0;
  margin-left: auto;
}

.nav__theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-dark);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color var(--transition), background var(--transition);
  line-height: 1;
}

.nav__theme-toggle:hover {
  color: var(--color-teal-dark);
  background: var(--color-gray-light);
}

.nav__admin-user {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.nav__admin-name {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.role-badge {
  display: inline-block;
  padding: 0.2em 0.6em;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--ui-border);
  color: var(--color-dark);
}

.role-badge--admin   { background: #fde68a; color: #1e40af; }
.role-badge--manager { background: #fde68a; color: #1e40af; }
.role-badge--coach { background: #facbce; color: #1e40af; }
.role-badge--client { background: #bfdbaf; color: #1e40af; }
.role-badge--partner { background: #c0c0f0; color: #1e40af; }

.timezone-badge {
  display: inline-block;
  padding: 0.2em 0.6em;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #1e40af;
}

.timezone-badge--n1200 { background: hsl(0.0, 70%, 88%); }
.timezone-badge--n1145 { background: hsl(3.4, 70%, 88%); }
.timezone-badge--n1130 { background: hsl(6.9, 70%, 88%); }
.timezone-badge--n1115 { background: hsl(10.3, 70%, 88%); }
.timezone-badge--n1100 { background: hsl(13.7, 70%, 88%); }
.timezone-badge--n1045 { background: hsl(17.1, 70%, 88%); }
.timezone-badge--n1030 { background: hsl(20.6, 70%, 88%); }
.timezone-badge--n1015 { background: hsl(24.0, 70%, 88%); }
.timezone-badge--n1000 { background: hsl(27.4, 70%, 88%); }
.timezone-badge--n0945 { background: hsl(30.9, 70%, 88%); }
.timezone-badge--n0930 { background: hsl(34.3, 70%, 88%); }
.timezone-badge--n0915 { background: hsl(37.7, 70%, 88%); }
.timezone-badge--n0900 { background: hsl(41.1, 70%, 88%); }
.timezone-badge--n0845 { background: hsl(44.6, 70%, 88%); }
.timezone-badge--n0830 { background: hsl(48.0, 70%, 88%); }
.timezone-badge--n0815 { background: hsl(51.4, 70%, 88%); }
.timezone-badge--n0800 { background: hsl(54.9, 70%, 88%); }
.timezone-badge--n0745 { background: hsl(58.3, 70%, 88%); }
.timezone-badge--n0730 { background: hsl(61.7, 70%, 88%); }
.timezone-badge--n0715 { background: hsl(65.1, 70%, 88%); }
.timezone-badge--n0700 { background: hsl(68.6, 70%, 88%); }
.timezone-badge--n0645 { background: hsl(72.0, 70%, 88%); }
.timezone-badge--n0630 { background: hsl(75.4, 70%, 88%); }
.timezone-badge--n0615 { background: hsl(78.9, 70%, 88%); }
.timezone-badge--n0600 { background: hsl(82.3, 70%, 88%); }
.timezone-badge--n0545 { background: hsl(85.7, 70%, 88%); }
.timezone-badge--n0530 { background: hsl(89.1, 70%, 88%); }
.timezone-badge--n0515 { background: hsl(92.6, 70%, 88%); }
.timezone-badge--n0500 { background: hsl(96.0, 70%, 88%); }
.timezone-badge--n0445 { background: hsl(99.4, 70%, 88%); }
.timezone-badge--n0430 { background: hsl(102.9, 70%, 88%); }
.timezone-badge--n0415 { background: hsl(106.3, 70%, 88%); }
.timezone-badge--n0400 { background: hsl(109.7, 70%, 88%); }
.timezone-badge--n0345 { background: hsl(113.1, 70%, 88%); }
.timezone-badge--n0330 { background: hsl(116.6, 70%, 88%); }
.timezone-badge--n0315 { background: hsl(120.0, 70%, 88%); }
.timezone-badge--n0300 { background: hsl(123.4, 70%, 88%); }
.timezone-badge--n0245 { background: hsl(126.9, 70%, 88%); }
.timezone-badge--n0230 { background: hsl(130.3, 70%, 88%); }
.timezone-badge--n0215 { background: hsl(133.7, 70%, 88%); }
.timezone-badge--n0200 { background: hsl(137.1, 70%, 88%); }
.timezone-badge--n0145 { background: hsl(140.6, 70%, 88%); }
.timezone-badge--n0130 { background: hsl(144.0, 70%, 88%); }
.timezone-badge--n0115 { background: hsl(147.4, 70%, 88%); }
.timezone-badge--n0100 { background: hsl(150.9, 70%, 88%); }
.timezone-badge--n0045 { background: hsl(154.3, 70%, 88%); }
.timezone-badge--n0030 { background: hsl(157.7, 70%, 88%); }
.timezone-badge--n0015 { background: hsl(161.1, 70%, 88%); }
.timezone-badge--p0000 { background: hsl(164.6, 70%, 88%); }
.timezone-badge--p0015 { background: hsl(168.0, 70%, 88%); }
.timezone-badge--p0030 { background: hsl(171.4, 70%, 88%); }
.timezone-badge--p0045 { background: hsl(174.9, 70%, 88%); }
.timezone-badge--p0100 { background: hsl(178.3, 70%, 88%); }
.timezone-badge--p0115 { background: hsl(181.7, 70%, 88%); }
.timezone-badge--p0130 { background: hsl(185.1, 70%, 88%); }
.timezone-badge--p0145 { background: hsl(188.6, 70%, 88%); }
.timezone-badge--p0200 { background: hsl(192.0, 70%, 88%); }
.timezone-badge--p0215 { background: hsl(195.4, 70%, 88%); }
.timezone-badge--p0230 { background: hsl(198.9, 70%, 88%); }
.timezone-badge--p0245 { background: hsl(202.3, 70%, 88%); }
.timezone-badge--p0300 { background: hsl(205.7, 70%, 88%); }
.timezone-badge--p0315 { background: hsl(209.1, 70%, 88%); }
.timezone-badge--p0330 { background: hsl(212.6, 70%, 88%); }
.timezone-badge--p0345 { background: hsl(216.0, 70%, 88%); }
.timezone-badge--p0400 { background: hsl(219.4, 70%, 88%); }
.timezone-badge--p0415 { background: hsl(222.9, 70%, 88%); }
.timezone-badge--p0430 { background: hsl(226.3, 70%, 88%); }
.timezone-badge--p0445 { background: hsl(229.7, 70%, 88%); }
.timezone-badge--p0500 { background: hsl(233.1, 70%, 88%); }
.timezone-badge--p0515 { background: hsl(236.6, 70%, 88%); }
.timezone-badge--p0530 { background: hsl(240.0, 70%, 88%); }
.timezone-badge--p0545 { background: hsl(243.4, 70%, 88%); }
.timezone-badge--p0600 { background: hsl(246.9, 70%, 88%); }
.timezone-badge--p0615 { background: hsl(250.3, 70%, 88%); }
.timezone-badge--p0630 { background: hsl(253.7, 70%, 88%); }
.timezone-badge--p0645 { background: hsl(257.1, 70%, 88%); }
.timezone-badge--p0700 { background: hsl(260.6, 70%, 88%); }
.timezone-badge--p0715 { background: hsl(264.0, 70%, 88%); }
.timezone-badge--p0730 { background: hsl(267.4, 70%, 88%); }
.timezone-badge--p0745 { background: hsl(270.9, 70%, 88%); }
.timezone-badge--p0800 { background: hsl(274.3, 70%, 88%); }
.timezone-badge--p0815 { background: hsl(277.7, 70%, 88%); }
.timezone-badge--p0830 { background: hsl(281.1, 70%, 88%); }
.timezone-badge--p0845 { background: hsl(284.6, 70%, 88%); }
.timezone-badge--p0900 { background: hsl(288.0, 70%, 88%); }
.timezone-badge--p0915 { background: hsl(291.4, 70%, 88%); }
.timezone-badge--p0930 { background: hsl(294.9, 70%, 88%); }
.timezone-badge--p0945 { background: hsl(298.3, 70%, 88%); }
.timezone-badge--p1000 { background: hsl(301.7, 70%, 88%); }
.timezone-badge--p1015 { background: hsl(305.1, 70%, 88%); }
.timezone-badge--p1030 { background: hsl(308.6, 70%, 88%); }
.timezone-badge--p1045 { background: hsl(312.0, 70%, 88%); }
.timezone-badge--p1100 { background: hsl(315.4, 70%, 88%); }
.timezone-badge--p1115 { background: hsl(318.9, 70%, 88%); }
.timezone-badge--p1130 { background: hsl(322.3, 70%, 88%); }
.timezone-badge--p1145 { background: hsl(325.7, 70%, 88%); }
.timezone-badge--p1200 { background: hsl(329.1, 70%, 88%); }
.timezone-badge--p1215 { background: hsl(332.6, 70%, 88%); }
.timezone-badge--p1230 { background: hsl(336.0, 70%, 88%); }
.timezone-badge--p1245 { background: hsl(339.4, 70%, 88%); }
.timezone-badge--p1300 { background: hsl(342.9, 70%, 88%); }
.timezone-badge--p1315 { background: hsl(346.3, 70%, 88%); }
.timezone-badge--p1330 { background: hsl(349.7, 70%, 88%); }
.timezone-badge--p1345 { background: hsl(353.1, 70%, 88%); }
.timezone-badge--p1400 { background: hsl(356.6, 70%, 88%); }

.nav__item--mobile-auth {
  display: none;
}

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
  margin-left: auto;
}

.nav__toggle-bar {
  width: 24px;
  height: 2px;
  background: var(--color-dark);
  border-radius: var(--radius-full);
  transition: transform var(--transition);
}

/* --------------------------------------------------------------------------
   Hero Section
   -------------------------------------------------------------------------- */
.hero {
  padding: var(--space-20) 0;
  background: #ffffff;
  overflow: hidden;
}

[data-theme="dark"] .hero {
  background: #0d2e34;
}

[data-theme="dark"] .hero__body {
  color: rgba(246, 241, 231, 0.75);
}

[data-theme="dark"] .hero__callout {
  color: rgba(246, 241, 231, 0.75);
  border-left-color: var(--color-teal-dark);
}

.hero__inner {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-12);
  align-items: center;
}

.hero__title {
  font-size: clamp(var(--font-size-3xl), 5vw, var(--font-size-5xl));
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-dark);
  margin-bottom: var(--space-6);
  letter-spacing: -0.03em;
}

.highlight {
  color: var(--color-teal);
  position: relative;
}

.highlight-2 {
  color: #087680;
  position: relative;
}

[data-theme="dark"] .highlight-2 {
  color: var(--color-yellow-light-pale);
}

.hero__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-gray);
  margin-bottom: var(--space-8);
  max-width: 520px;
}

.hero__body {
  font-size: var(--font-size-lg);
  color: rgba(0, 0, 0, 0.7);
  line-height: 1.75;
  max-width: 520px;
  margin-bottom: var(--space-8);
}

.hero__callout {
  font-size: var(--font-size-base);
  color: rgba(0, 0, 0, 0.7);
  line-height: 1.7;
  max-width: 520px;
  border-left: 3px solid var(--color-teal-dark);
  padding-left: var(--space-4);
  margin: 0 0 var(--space-8) 0;
}

.hero__cta-group {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.hero__cta-group .btn--large {
  padding: 0.75rem 1.25rem;
  white-space: nowrap;
}

.hero__note {
  font-size: var(--font-size-sm);
  color: var(--color-gray);
  margin-top: 2.0rem;
}

.hero__visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero__graphic {
  position: relative;
  width: 320px;
  height: 320px;
}

.hero__circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.8;
}

.hero__circle-1 {
  width: 220px;
  height: 220px;
  background: var(--color-circle-1);
  top: 20px;
  left: 20px;
}

.hero__circle-2 {
  width: 200px;
  height: 200px;
  background: var(--color-circle-2);
  bottom: 20px;
  right: 20px;
  opacity: 0.6;
}

/* --------------------------------------------------------------------------
   Page Hero (inner pages)
   -------------------------------------------------------------------------- */
.page-hero {
  background: #14474f;
  color: #F6F1E7;
  padding: var(--space-16) 0;
  text-align: center;
}

.page-hero__title {
  font-size: clamp(var(--font-size-3xl), 4vw, var(--font-size-4xl));
  font-weight: 800;
  margin-bottom: var(--space-4);
  letter-spacing: -0.02em;
  color: #F6F1E7;
}

.page-hero__subtitle {
  font-size: var(--font-size-lg);
  color: rgba(246, 241, 231, 0.8);
  max-width: 680px;
  margin: 0 auto var(--space-8);
}

[data-theme="dark"] .page-hero {
  background: #0b3439;
  color: #F6F1E7;
}

[data-theme="dark"] .page-hero__subtitle {
  color: rgba(246,241,231,0.75);
}

[data-theme="dark"] .site-footer {
  background: #0b3439;
  color: rgba(246,241,231,0.8);
}

[data-theme="dark"] .footer__logo {
  color: #F6F1E7;
}

[data-theme="dark"] .footer__tagline,
[data-theme="dark"] .footer__nav a {
  color: rgba(246,241,231,0.6);
}

[data-theme="dark"] .footer__nav-heading {
  color: #F6F1E7;
}

[data-theme="dark"] .footer__nav a:hover {
  color: #F6F1E7;
}

[data-theme="dark"] .footer__legal,
[data-theme="dark"] .footer__mission {
  color: rgba(246,241,231,0.4);
}

[data-theme="dark"] .pilot-card {
  background: #0b3439;
}

[data-theme="dark"] .pilot-card__text {
  color: rgba(246,241,231,0.85);
}

[data-theme="dark"] .pilot-card__note {
  color: rgba(246,241,231,0.6);
}

[data-theme="dark"] .comparison-table th {
  background: #0b3439;
  color: #F6F1E7;
}

/* --------------------------------------------------------------------------
   Content Sections
   -------------------------------------------------------------------------- */
.content-section {
  padding: var(--space-16) 0;
}

.content-section--alt {
  background: #14474f;
  color: #F6F1E7;
}

.content-section--alt .section-title,
.content-section--alt .problem-block__title,
.content-section--alt h3 {
  color: #F6F1E7;
}

.content-section--alt p {
  color: rgba(246, 241, 231, 0.8);
}

.content-section--alt .founder-card {
  color: var(--color-dark);
}

.content-section--alt .founder-card p {
  color: var(--color-gray);
}

.content-section--alt .founder-card h3 {
  color: var(--color-dark);
}

.section-title {
  font-size: clamp(var(--font-size-2xl), 3vw, var(--font-size-3xl));
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: var(--space-6);
  letter-spacing: -0.01em;
}

.section-subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-gray);
  margin-bottom: var(--space-10);
  text-align: center;
}

.section-intro {
  font-size: var(--font-size-lg);
  color: var(--color-gray);
  margin-bottom: var(--space-8);
}

.subsection-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: #F6F1E7;
  margin-bottom: var(--space-4);
}

.content-section p {
  margin-bottom: var(--space-4);
}

/* --------------------------------------------------------------------------
   Audiences Grid (Home)
   -------------------------------------------------------------------------- */
.audiences {
  padding: var(--space-16) 0;
  background: var(--color-gray-light);
}

.audiences__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.audience-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}

.audience-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.audience-card__icon {
  font-size: 3rem;
  margin-bottom: var(--space-4);
}

.audience-card__title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: var(--space-3);
}

.audience-card__text {
  color: var(--color-gray);
  margin-bottom: var(--space-4);
}

.audience-card__link {
  font-weight: 600;
  color: var(--color-teal-dark);
  text-decoration: none;
}

.audience-card__link:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   How It Works / Steps
   -------------------------------------------------------------------------- */
.how-it-works {
  padding: var(--space-16) 0;
  text-align: center;
}

.steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-top: var(--space-10);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.steps--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 100%;
  justify-content: center;
}

.step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  text-align: left;
  background: #14474f;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.steps--horizontal .step {
  flex: 1 1 200px;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.step__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.12);
  color: #F6F1E7;
  font-weight: 800;
  font-size: var(--font-size-xl);
  border-radius: 50%;
  flex-shrink: 0;
}

.step__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: #F6F1E7;
  margin-bottom: var(--space-2);
}

.step__text {
  color: rgba(246, 241, 231, 0.75);
}

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */
.testimonials {
  padding: var(--space-16) 0;
  background: var(--color-gray-light);
  text-align: center;
}

.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-10);
}

.testimonial {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: left;
  box-shadow: var(--shadow-sm);
  position: relative;
  border-top: 4px solid var(--color-teal);
}

.testimonial__text {
  font-size: var(--font-size-base);
  color: var(--color-dark);
  font-style: italic;
  margin-bottom: var(--space-4);
  line-height: 1.7;
}

.testimonial__author {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gray);
  font-style: normal;
}

/* --------------------------------------------------------------------------
   Why CoachBridge Cards
   -------------------------------------------------------------------------- */
.why-us {
  padding: var(--space-16) 0;
  text-align: center;
}

.why-us__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-10);
}

.why-card {
  text-align: left;
  padding: var(--space-6);
  background: var(--color-gray-light);
  border-radius: var(--radius-lg);
}

.why-card__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-yellow);
}

/* --------------------------------------------------------------------------
   CTA Banner
   -------------------------------------------------------------------------- */
.cta-banner {
  background: var(--color-cta-banner-background);
  padding: var(--space-16) 0;
  text-align: center;
  color: var(--color-cta-banner-color);
}

.cta-banner__title {
  font-size: clamp(var(--font-size-2xl), 3vw, var(--font-size-3xl));
  font-weight: 800;
  margin-bottom: var(--space-4);
  letter-spacing: -0.01em;
}

.cta-banner__text {
  font-size: var(--font-size-lg);
  opacity: 0.9;
  margin-bottom: var(--space-8);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.cta-banner__buttons {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}

.cta-banner .btn--outline {
  color: var(--color-dark);
  border-color: var(--color-dark);
}

.cta-banner .btn--outline:hover {
  background: var(--color-dark);
  color: var(--color-white);
}

/* --------------------------------------------------------------------------
   Info Cards Grid
   -------------------------------------------------------------------------- */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.info-card {
  background: #14474f;
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  border: 2px solid rgba(255, 255, 255, 0.3);
  transition: transform var(--transition), box-shadow var(--transition);
}

.info-card:hover {
  transform: translateY(-2px);
}

.info-card p {
  color: rgba(246, 241, 231, 0.8);
}

.info-card__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: #F6F1E7;
  margin-bottom: var(--space-3);
}

/* --------------------------------------------------------------------------
   Feature List
   -------------------------------------------------------------------------- */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.feature-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--color-dark);
}

.content-section--alt .feature-list__item {
  color: #F6F1E7;
}

.feature-list__item::before {
  content: '✓';
  color: var(--color-teal-dark);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   Tags
   -------------------------------------------------------------------------- */
.tags-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.tag {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  background: #14474f;
  color: #F6F1E7;
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 600;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.tag--small {
  padding: var(--space-1) var(--space-3);
  font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
   Pilot / CTA Card
   -------------------------------------------------------------------------- */
.pilot-section {
  padding: var(--space-16) 0;
  background: var(--color-gray-light);
}

.pilot-card {
  background: #14474f;
  color: #F6F1E7;
  border-radius: var(--radius-lg);
  padding: var(--space-12);
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.pilot-card__title {
  font-size: var(--font-size-2xl);
  font-weight: 800;
  margin-bottom: var(--space-4);
  color: #F6F1E7;
}

.pilot-card__text {
  color: rgba(246,241,231,0.85);
  margin-bottom: var(--space-6);
  font-size: var(--font-size-lg);
}

.pilot-card__list {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  color: #fff;
}

.pilot-card__list li::before {
  content: '→ ';
  color: var(--color-yellow);
  font-weight: 700;
}

.pilot-card__note {
  margin-top: var(--space-4);
  font-size: var(--font-size-sm);
  color: rgba(246,241,231,0.6);
}

.pilot-card__note a {
  color: #7FD4C1;
}

/* --------------------------------------------------------------------------
   FAQ List
   -------------------------------------------------------------------------- */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--space-8);
  max-width: 800px;
}

.faq-item {
  border-bottom: 1px solid var(--ui-border);
  padding: var(--space-6) 0;
}

.faq-item:first-child {
  border-top: 1px solid var(--ui-border);
}

.faq-item__question {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: var(--space-3);
  cursor: default;
}

.faq-item__answer {
  color: var(--color-gray);
  line-height: 1.7;
}

.content-section--alt .faq-item {
  border-bottom: 1px solid rgba(246, 241, 231, 0.15);
}

.content-section--alt .faq-item:first-child {
  border-top: 1px solid rgba(246, 241, 231, 0.15);
}

.content-section--alt .faq-item__question {
  color: #F6F1E7;
}

.content-section--alt .faq-item__answer {
  color: rgba(246, 241, 231, 0.8);
}

/* --------------------------------------------------------------------------
   Coach Directory
   -------------------------------------------------------------------------- */
.coach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-8);
}

.coach-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  display: flex;
  gap: var(--space-4);
  border-left: 4px solid var(--color-teal);
  transition: transform var(--transition), box-shadow var(--transition);
}

.coach-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.coach-card__avatar {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--color-yellow);
  display: flex;
  align-items: center;
  justify-content: center;
}

.coach-card__initials {
  font-weight: 800;
  font-size: var(--font-size-lg);
  color: var(--color-dark);
}

.coach-card__info {
  flex: 1;
  min-width: 0;
}

.coach-card__name {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-dark);
  margin-top: var(--space-3);
  margin-bottom: var(--space-1);
}

.coach-card__credentials {
  font-size: var(--font-size-sm);
  color: var(--color-teal-dark);
  font-weight: 600;
  margin-bottom: var(--space-3);
}

.coach-card__specialties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.coach-card__specialty {
  line-height: 1;
}

.coach-card__bio {
  font-size: var(--font-size-sm);
  color: var(--color-gray);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

/* --------------------------------------------------------------------------
   Founders
   -------------------------------------------------------------------------- */
.founders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-10);
}

.founder-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
}

.founder-card__avatar {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--color-teal);
  display: flex;
  align-items: center;
  justify-content: center;
}

.founder-card__initial {
  font-size: var(--font-size-2xl);
  font-weight: 800;
  color: var(--color-white);
}

.founder-card__name {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-dark) !important;
  margin-bottom: var(--space-1);
}

.founder-card__title-role {
  color: var(--color-teal-dark);
  font-weight: 600;
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-4);
}

.founder-card__info p {
  color: var(--color-gray);
  margin-bottom: var(--space-4);
  font-size: var(--font-size-sm);
}

/* --------------------------------------------------------------------------
   Mission Statement
   -------------------------------------------------------------------------- */
.mission-statement {
  background: #14474f;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  margin-bottom: var(--space-8);
}

[data-theme="dark"] .mission-statement {
  background: #14474f;
}

.mission-statement__text {
  font-size: var(--font-size-base);
  font-weight: 400;
  color: #F6F1E7;
  line-height: 1.75;
  max-width: 100% !important;
}

/* --------------------------------------------------------------------------
   Two Column Layout
   -------------------------------------------------------------------------- */
.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-12);
  margin-top: var(--space-8);
}

.problem-block__title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-teal);
}

/* --------------------------------------------------------------------------
   Pilot Details
   -------------------------------------------------------------------------- */
.pilot-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-8);
}

.pilot-detail {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
}

.pilot-detail__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: var(--space-4);
}

/* --------------------------------------------------------------------------
   Comparison Table
   -------------------------------------------------------------------------- */
.comparison-table-wrapper {
  overflow-x: auto;
  margin-top: var(--space-8);
  margin-bottom: var(--space-6);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-white);
  font-size: var(--font-size-sm);
}

.comparison-table th {
  background: var(--color-dark);
  color: var(--color-white);
  padding: var(--space-4) var(--space-6);
  text-align: left;
  font-weight: 600;
}

.comparison-table th:first-child {
  border-radius: var(--radius-lg) 0 0 0;
}

.comparison-table th:last-child {
  border-radius: 0 var(--radius-lg) 0 0;
}

.comparison-table td {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--ui-border);
  color: var(--color-dark);
  vertical-align: top;
}

.comparison-table tr:last-child td {
  border-bottom: none;
}

.comparison-table td:first-child {
  font-weight: 600;
  color: var(--color-gray);
  background: var(--color-gray-light);
}

.comparison-table td:nth-child(2) {
  background: rgba(54, 197, 205, 0.05);
}

.comparison-note {
  font-size: var(--font-size-sm);
  color: var(--color-gray);
  background: var(--color-gray-light);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-yellow);
  max-width: 100% !important;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--color-dark);
  color: rgba(255,255,255,0.8);
  padding: var(--space-16) 0 var(--space-8);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-12);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: var(--space-8);
}

.footer__logo {
  font-size: var(--font-size-2xl);
  font-weight: 800;
  text-decoration: none;
  color: var(--color-white);
  display: block;
  margin-bottom: var(--space-4);
}

.footer__logo span {
  color: var(--color-teal);
}

.footer__tagline {
  color: rgba(255,255,255,0.6);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-3);
}

.footer__contact a {
  color: var(--color-yellow);
  font-size: var(--font-size-sm);
  text-decoration: none;
}

.footer__contact a:hover {
  text-decoration: underline;
}

.footer__nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-8);
}

.footer__nav-heading {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-4);
}

.footer__nav ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer__nav a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: color var(--transition);
}

.footer__nav a:hover {
  color: var(--color-white);
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.footer__legal {
  font-size: var(--font-size-sm);
  color: rgba(255,255,255,0.4);
}

.footer__mission {
  font-size: var(--font-size-sm);
  color: rgba(255,255,255,0.4);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .nav__menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-4);
    border-bottom: 2px solid var(--color-yellow);
    box-shadow: var(--shadow-md);
    gap: 0;
  }

  .nav__menu.nav__menu--open {
    display: flex;
  }

  .nav__cta {
    display: none;
  }

  .nav__item--mobile-auth {
    display: flex;
    gap: var(--space-4);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border, var(--ui-border));
    margin-top: var(--space-2);
  }

  .nav__toggle {
    display: flex;
  }

  .nav {
    flex-wrap: wrap;
    position: relative;
  }

  .nav__dropdown {
    position: static;
    box-shadow: none;
    border: none;
    background: var(--color-gray-light);
    border-radius: var(--radius-sm);
    margin: var(--space-2) 0 var(--space-2) var(--space-4);
    padding: var(--space-2);
  }

  .nav__item--dropdown:hover .nav__dropdown,
  .nav__item--dropdown:focus-within .nav__dropdown {
    display: none;
  }

  .hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero__subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .hero__cta-group {
    justify-content: center;
  }

  .hero__visual {
    order: -1;
  }

  .hero__graphic {
    width: 200px;
    height: 200px;
  }

  .hero__circle--yellow {
    width: 140px;
    height: 140px;
  }

  .hero__circle--teal {
    width: 120px;
    height: 120px;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer__bottom {
    flex-direction: column;
    text-align: center;
  }

  .founder-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .pilot-card {
    padding: var(--space-8);
  }

  .cta-banner__buttons {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 480px) {
  .hero {
    padding: var(--space-12) 0;
  }

  .page-hero {
    padding: var(--space-12) 0;
  }

  .content-section {
    padding: var(--space-12) 0;
  }

  .coach-card {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   Auth Pages (login, register)
   ========================================================================== */

.auth-page {
  min-height: 75vh;
  display: grid;
  place-items: center;
  padding: var(--space-8) var(--space-4);
}

.auth-card {
  background: var(--color-white);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-10) var(--space-8);
  width: 100%;
  max-width: 420px;
}

.auth-card__header {
  text-align: center;
  margin-bottom: var(--space-8);
}

.auth-card__logo {
  display: inline-block;
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-dark);
  text-decoration: none;
  margin-bottom: var(--space-4);
}

.auth-card__logo span {
  color: var(--color-teal);
}

.auth-card__title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: var(--space-2);
}

.auth-card__subtitle {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* Form elements */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375em;
}

.form-group--row {
  flex-direction: row;
  gap: 1em;
}

.form-group--row .form-group {
  flex: 1;
}

.form-group--checkbox {
  flex-direction: row;
  align-items: center;
  gap: 0.5em;
}

.form-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-dark);
}

.form-hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.form-input,
.form-select {
  width: 100%;
  padding: 0.625em 0.875em;
  border: 1px solid var(--ui-subtle);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-white);
  transition: border-color var(--transition), box-shadow var(--transition);
  line-height: 1.5;
}

.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-teal);
  box-shadow: 0 0 0 3px rgba(54, 197, 205, 0.2);
}

.form-input::placeholder {
  color: var(--ui-muted-text);
}

.form-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: var(--color-teal);
}

.form-checkbox-label {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  cursor: pointer;
}

.form-actions {
  margin-top: 0.5em;
}

.btn--full {
  width: 100%;
  justify-content: center;
}

.auth-card__footer {
  margin-top: var(--space-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.auth-card__footer p {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.auth-link {
  color: var(--color-teal);
  text-decoration: none;
  font-weight: 600;
}

.auth-link:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Coach Onboarding Layout
   ========================================================================== */

.onboarding-body {
  background: #f8f9fa;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.onboarding-header {
  background: var(--color-white);
  border-bottom: 2px solid var(--color-yellow);
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
}

.onboarding-header__logo {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-dark);
  text-decoration: none;
}

.onboarding-header__logo span {
  color: var(--color-teal);
}

.onboarding-main {
  flex: 1;
  padding: var(--space-10) var(--space-4);
}

.onboarding-footer {
  background: var(--color-white);
  border-top: 1px solid var(--ui-border);
  padding: var(--space-4) var(--space-6);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.onboarding-footer a {
  color: var(--color-teal);
  text-decoration: none;
}

/* ==========================================================================
   Onboarding Form
   ========================================================================== */

.onboarding-wrap {
  max-width: 680px;
  margin: 0 auto;
}

.onboarding-intro {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--ui-border);
  padding: var(--space-8);
  margin-bottom: var(--space-6);
}

.onboarding-intro__title {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: var(--space-4);
}

.onboarding-intro__body {
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  line-height: 1.7;
}

.onboarding-intro__list {
  padding-left: var(--space-6);
  color: var(--color-text-muted);
  line-height: 2;
}

/* Error summary */
.onboarding-errors {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
  margin-bottom: var(--space-6);
  color: #b91c1c;
}

.onboarding-errors h2 {
  font-size: var(--font-size-base);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.onboarding-errors ul {
  padding-left: var(--space-4);
  font-size: var(--font-size-sm);
}

/* Section */
.onboarding-section {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--ui-border);
  padding: var(--space-8);
  margin-bottom: var(--space-6);
}

.onboarding-section__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--ui-divider);
}

.onboarding-section__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-teal);
  background: var(--color-teal-dark-4);
  color: var(--color-white);
  font-weight: 700;
  font-size: var(--font-size-sm);
  flex-shrink: 0;
}

.onboarding-section__title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-dark);
}

.onboarding-section__intro {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-4);
  margin-top: calc(-1 * var(--space-2));
}

/* Question */
.onboarding-question {
  margin-bottom: var(--space-6);
}

.onboarding-question:last-child {
  margin-bottom: 0;
}

.onboarding-question .form-label {
  display: inline;
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: var(--space-2);
  display: block;
}

.onboarding-required {
  color: #dc2626;
  font-size: var(--font-size-sm);
  margin-left: 0.2em;
}

.onboarding-hint {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
  margin-bottom: var(--space-2);
  line-height: 1.5;
}

/* Conditional fields — hidden by default */
.onboarding-conditional {
  display: none;
  border-left: 3px solid var(--color-teal);
  padding-left: var(--space-4);
  margin-left: var(--space-2);
}

/* Subsections (references) */
.onboarding-subsection {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--ui-divider);
}

.onboarding-subsection:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.onboarding-subsection__title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: var(--space-4);
}

.onboarding-subsection--optional .onboarding-subsection__title {
  color: var(--color-gray);
}

/* ==========================================================================
   Option Cards (radio + checkbox)
   ========================================================================== */

.option-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.option-card {
  position: relative;
}

/* Hide the native input */
.option-card input[type="radio"],
.option-card input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.option-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.875rem 1rem;
  border: 2px solid var(--ui-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  background: var(--color-white);
  transition: border-color 0.15s ease, background 0.15s ease;
  user-select: none;
  font-size: var(--font-size-base);
  color: var(--color-text);
  line-height: 1.4;
}

.option-label:hover {
  border-color: var(--ui-muted-text);
  background: var(--ui-surface);
}

.option-card input:checked + .option-label {
  border-color: var(--color-teal);
  /*border-color: #f00;*/
  background: rgba(54, 197, 205, 0.07);
  color: var(--color-dark);
}

/* Custom indicator (circle for radio, square for checkbox) */
.option-indicator {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid var(--ui-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.option-indicator--radio {
  border-radius: 50%;
}

.option-indicator--checkbox {
  border-radius: 3px;
}

/* Inner dot / check for checked state */
.option-indicator--radio::after {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--color-white);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.option-indicator--checkbox::after {
  content: '';
  width: 0.35rem;
  height: 0.6rem;
  border: 2px solid var(--color-white);
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translateY(-1px);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.option-card input:checked + .option-label .option-indicator {
  border-color: var(--color-teal);
  background: var(--color-teal);
  background: var(--color-teal-dark-4);
}

.option-card input:checked + .option-label .option-indicator::after {
  opacity: 1;
}

/* ==========================================================================
   Consent Checkboxes (Section I)
   ========================================================================== */

.onboarding-consents {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.consent-item {
  position: relative;
}

.consent-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  padding: var(--space-4);
  border: 2px solid var(--ui-border);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.consent-label:hover {
  border-color: var(--ui-muted-text);
}

.consent-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.consent-label input:checked ~ .consent-indicator {
  background: var(--color-teal);
  border-color: var(--color-teal);
}

.consent-label input:checked ~ .consent-indicator::after {
  opacity: 1;
}

.consent-label input:checked ~ .consent-text {
  color: var(--color-dark);
}

.consent-label:has(input:checked) {
  border-color: var(--color-teal);
  background: rgba(54, 197, 205, 0.07);
}

.consent-indicator {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid var(--ui-subtle);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.consent-indicator::after {
  content: '';
  width: 0.35rem;
  height: 0.6rem;
  border: 2px solid var(--color-white);
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translateY(-1px);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.consent-text {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  line-height: 1.6;
}

/* ==========================================================================
   Privacy Notice (expandable)
   ========================================================================== */

.privacy-notice {
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.privacy-notice__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-teal);
  cursor: pointer;
  list-style: none;
  background: rgba(54, 197, 205, 0.05);
}

.privacy-notice__toggle::-webkit-details-marker { display: none; }

.privacy-notice__toggle::before {
  content: '▶';
  font-size: 0.6rem;
  transition: transform 0.2s ease;
}

details[open] .privacy-notice__toggle::before {
  transform: rotate(90deg);
}

.privacy-notice__body {
  padding: var(--space-4) var(--space-4) var(--space-4);
  border-top: 1px solid var(--ui-border);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ==========================================================================
   File Upload Placeholder
   ========================================================================== */

/* ==========================================================================
   File Drop Zone
   ========================================================================== */

.file-drop-zone {
  position: relative;
  margin-top: var(--space-2);
}

/* Hide the native input completely */
.file-drop-zone__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.file-drop-zone__area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 1.75rem 1.5rem;
  border: 2px dashed var(--ui-subtle);
  border-radius: var(--radius-md);
  background: var(--color-white);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  text-align: center;
  min-height: 7rem;
  user-select: none;
}

.file-drop-zone__area:hover {
  border-color: var(--ui-muted-text);
  background: var(--ui-surface);
}

/* Dragging over */
.file-drop-zone--over .file-drop-zone__area {
  border-color: var(--color-teal);
  background: rgba(54, 197, 205, 0.07);
  border-style: solid;
}

/* File selected */
.file-drop-zone--selected .file-drop-zone__area {
  border-color: var(--color-teal);
  border-style: solid;
  background: rgba(54, 197, 205, 0.07);
}

.file-drop-zone__icon {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--ui-muted-text);
  transition: color 0.15s ease;
  flex-shrink: 0;
}

.file-drop-zone__area:hover .file-drop-zone__icon,
.file-drop-zone--over .file-drop-zone__icon,
.file-drop-zone--selected .file-drop-zone__icon {
  color: var(--color-teal);
}

.file-drop-zone__prompt {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.file-drop-zone__prompt span {
  color: var(--color-teal);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.file-drop-zone__filename {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-style: italic;
  margin: 0;
}

.file-drop-zone--selected .file-drop-zone__filename {
  color: var(--color-dark);
  font-style: normal;
  font-weight: 500;
}

/* ==========================================================================
   Submit
   ========================================================================== */

.onboarding-submit {
  display: flex;
  justify-content: center;
  padding: var(--space-4) 0 var(--space-10);
}

.onboarding-submit__btn {
  min-width: 220px;
  padding: var(--space-4) var(--space-8);
  font-size: var(--font-size-lg);
}

/* ==========================================================================
   Success Page
   ========================================================================== */

.onboarding-success {
  min-height: 70vh;
  display: grid;
  place-items: center;
  padding: var(--space-8) var(--space-4);
}

.onboarding-success__card {
  background: var(--color-white);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-10) var(--space-8);
  max-width: 560px;
  text-align: center;
}

.onboarding-success__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--color-teal);
  color: var(--color-white);
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: var(--space-6);
}

.onboarding-success__title {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: var(--space-4);
}

.onboarding-success__body {
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-3);
}

.onboarding-success__actions {
  margin-top: var(--space-6);
}

/* ==========================================================================
   Admin Dashboard
   ========================================================================== */

.admin-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-12) var(--space-4);
  gap: var(--space-10);
}

.admin-page__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 800px;
  text-align: left;
}

.admin-page__header-actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-shrink: 0;
}

.admin-page__title {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: var(--space-2);
}

.admin-page__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
}

.admin-stats-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6);
  width: 100%;
  max-width: 900px;
}

.admin-stat-card {
  flex: 1 1 160px;
  max-width: 200px;
  background: var(--color-white);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-8) var(--space-6);
  text-align: center;
}

.admin-stat-card__value {
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-teal);
  line-height: 1;
  margin-bottom: var(--space-3);
}

.admin-stat-card__label {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.admin-actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  justify-content: center;
}

/* ==========================================================================
   Dashboard — Coach matched clients table
   ========================================================================== */

.dashboard-matches {
  width: 100%;
  max-width: 900px;
  margin-top: var(--space-8);
}

.dashboard-matches__heading {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: var(--space-4);
}

.dashboard-matches__client-name {
  font-weight: 600;
}

.dashboard-matches__contract-warning {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.dashboard-matches__contract-warning p {
  margin: 0 0 var(--space-1);
  font-size: 0.8125rem;
  color: var(--color-warning, #b45309);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Dashboard To Do List
   -------------------------------------------------------------------------- */

.dashboard-todo {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.dashboard-todo__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.875rem 1rem;
  background: var(--color-white);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  color: var(--color-text);
}

.dashboard-todo__pending {
  font-size: 1rem;
  color: var(--ui-muted-text);
  flex-shrink: 0;
}

.dashboard-todo__done {
  font-size: 1rem;
  color: var(--color-teal);
  font-weight: 700;
  flex-shrink: 0;
}

.dashboard-todo__link {
  color: var(--color-teal);
  font-weight: 600;
  text-decoration: underline;
}

.dashboard-todo__link:hover {
  color: var(--color-dark);
}

/* --------------------------------------------------------------------------
   Profile card
   -------------------------------------------------------------------------- */

.profile-card {
  background: var(--color-white);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  max-width: 640px;
  box-shadow: var(--shadow-sm);
}

.profile-card__fields {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.profile-card__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--ui-divider);
}

.profile-card__row:last-child {
  border-bottom: none;
}

.profile-card__label {
  width: 180px;
  flex-shrink: 0;
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.profile-card__value {
  color: var(--color-text);
  font-size: var(--font-size-base);
}

.profile-card__value--credit {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.profile-card__section-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-dark);
  margin: 0 0 16px 0;
}

/* ==========================================================================
   Baseline Assessment Form
   ========================================================================== */

.form-group__label {
  display: block;
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: 6px;
  line-height: 1.5;
}

.form-group__hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0 0 10px;
}

/* Scoped to baseline assessment form: consistent label spacing */
.assessment-form .form-group + .form-group {
  margin-top: var(--space-6);
}

.assessment-form .option-list {
  margin-top: 0;
}

/* Radio button stacked list */
.form-group__radios {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}

.form-group__radio-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: var(--font-size-base);
  color: var(--color-text);
}

.form-group__radio {
  accent-color: var(--color-teal);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
}

/* Checkbox list */
.form-group__checkboxes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}

.form-group__checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: var(--font-size-base);
  color: var(--color-text);
}

.form-group__checkbox-label input[type="checkbox"] {
  accent-color: var(--color-teal);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 3px;
  cursor: pointer;
}

/* Scale (0-5) */
.form-group__scale {
  display: flex;
  gap: 16px;
  margin-top: 6px;
}

.form-group__scale-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  min-width: 36px;
}

.form-group__scale-option input[type="radio"] {
  accent-color: var(--color-teal);
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* ==========================================================================
   Admin table
   ========================================================================== */

.admin-table {
  width: 100%;
}

.admin-table th,
.admin-table td {
  text-align: center;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.admin-table tbody tr:nth-child(even) {
  background-color: var(--ui-stripe);
}

/* ==========================================================================
   Admin table actions
   ========================================================================== */

.admin-table__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  white-space: nowrap;
}

.admin-table__actions form {
  display: inline;
  margin: 0;
}

/* -- Admin section & details ---------------------------------------------- */

.admin-section {
  width: 100%;
  max-width: 800px;
}

.admin-section__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-dark);
  border-bottom: 2px solid var(--color-teal);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-4);
}

.admin-details {
  width: 100%;
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  overflow: hidden;
}

.admin-details__row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--ui-divider);
}

.admin-details__row:last-child {
  border-bottom: none;
}

.admin-details dt {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-top: 2px;
}

.admin-details dd {
  color: var(--color-dark);
  font-size: var(--font-size-base);
  line-height: 1.5;
}

.admin-details dd ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin: 0.25rem 0;
}

.admin-details dd li {
  margin-bottom: 0.2rem;
}

.admin-details__multiline {
  white-space: pre-wrap;
}

.admin-details__empty {
  color: var(--color-text-muted);
  font-style: italic;
}

/* -- Admin headshot & document links -------------------------------------- */

.admin-headshot {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--ui-border);
  display: block;
}

.admin-ticket-screenshot {
  max-width: 320px;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--ui-border);
  display: block;
  cursor: zoom-in;
}

.admin-doc-link {
  color: var(--color-teal-dark);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.admin-doc-link:hover {
  text-decoration: underline;
}

/* -- Admin inline form ---------------------------------------------------- */

.admin-inline-form {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}

/* -- Admin link & back ---------------------------------------------------- */

.admin-link {
  color: var(--color-teal-dark);
  text-decoration: none;
  font-weight: 500;
}

.admin-link:hover {
  text-decoration: underline;
}

.admin-page__back {
  width: 100%;
  max-width: 800px;
}

/* -- Admin page wide header (matches page) -------------------------------- */

.admin-page__header--wide {
  max-width: 1200px;
}

/* ==========================================================================
   Coach / Client Matches
   ========================================================================== */

.admin-matches-summary {
  width: 100%;
  max-width: 1200px;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.admin-warning-text {
  color: #dc2626;
  font-weight: 600;
  font-size: var(--font-size-sm);
  margin-top: var(--space-2);
}

.admin-matches-empty {
  width: 100%;
  max-width: 800px;
  background: var(--color-gray-light);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  text-align: center;
  color: var(--color-text-muted);
}

.admin-match-group {
  width: 100%;
  max-width: 1200px;
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.admin-match-group__coach-row {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  padding: var(--space-4) var(--space-6);
  background: var(--color-dark);
  color: var(--color-white);
}

.admin-match-group__coach-identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
}

.admin-match-group__coach-name-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.admin-match-group__coach-name {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-yellow);
  text-decoration: none;
}

.admin-match-group__coach-name:hover {
  color: var(--color-yellow-dark);
  text-decoration: underline;
}

.admin-match-group__coach-meta {
  display: flex;
  gap: var(--space-6);
  font-size: var(--font-size-sm);
  color: var(--ui-subtle);
  flex-wrap: wrap;
  flex: 1;
}

.admin-match-group__coach-meta strong {
  color: var(--color-white);
}

.admin-match-group__count {
  margin-left: auto;
  flex-shrink: 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
  background: var(--color-teal);
  color: var(--color-white);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

.admin-match-group__client-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  background: var(--color-white);
}

.admin-match-group__client-table thead th {
  padding: var(--space-2) var(--space-4);
  text-align: left;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--ui-surface);
  border-bottom: 1px solid var(--ui-border);
}

.admin-match-group__client-table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--ui-divider);
  color: var(--color-dark);
  vertical-align: middle;
}

.admin-match-group__client-table tbody tr:last-child td {
  border-bottom: none;
}

.admin-match-group__client-table tbody tr:hover td {
  background: var(--ui-surface);
}

.admin-match-group__client-name {
  font-weight: 600;
}

.admin-match-group__row--confirmed td {
  background: var(--ui-confirmed-bg);
}

.admin-match-group__row--confirmed:hover td {
  background: var(--ui-confirmed-hover);
}

.admin-match-group__confirmed-badge,
.admin-match-group__agrees-badge {
  display: inline-block;
  padding: 1px 8px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-full);
  vertical-align: middle;
}

.admin-match-group__confirmed-badge {
  margin-left: var(--space-2);
  background: #16a34a;
  color: #fff;
}

.admin-match-group__agrees-badge {
  background: #fff;
  color: #16a34a;
  border: 1.5px solid #16a34a;
}

@media (max-width: 768px) {
  .admin-match-group__client-table,
  .admin-match-group__client-table thead,
  .admin-match-group__client-table tbody,
  .admin-match-group__client-table th,
  .admin-match-group__client-table td,
  .admin-match-group__client-table tr {
    display: block;
  }

  .admin-match-group__client-table thead tr {
    display: none;
  }

  .admin-match-group__client-table tbody tr {
    border-bottom: 2px solid var(--ui-border);
    padding: var(--space-2) 0;
  }

  .admin-match-group__client-table tbody tr:last-child {
    border-bottom: none;
  }

  .admin-match-group__client-table tbody td {
    padding: var(--space-1) var(--space-4);
    border-bottom: none;
  }

  .admin-match-group__client-table tbody td[data-label]::before {
    content: attr(data-label) ": ";
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
  }

  .admin-match-group__client-table .admin-table__actions {
    display: flex;
    gap: var(--space-2);
    padding-top: var(--space-2);
  }

  #admin-table-inactive-coaches,
  #admin-table-inactive-coaches thead,
  #admin-table-inactive-coaches tbody,
  #admin-table-inactive-coaches th,
  #admin-table-inactive-coaches td,
  #admin-table-inactive-coaches tr {
    display: block;
  }

  #admin-table-inactive-coaches thead tr {
    display: none;
  }

  #admin-table-inactive-coaches tbody tr {
    border-bottom: 2px solid var(--ui-border);
    padding: var(--space-2) 0;
  }

  #admin-table-inactive-coaches tbody tr:last-child {
    border-bottom: none;
  }

  #admin-table-inactive-coaches tbody td {
    padding: var(--space-1) var(--space-4);
    border-bottom: none;
  }

  #admin-table-inactive-coaches tbody td[data-label]::before {
    content: attr(data-label) ": ";
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
  }

  #admin-table-inactive-coaches .admin-table__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-top: var(--space-2);
  }

  .dashboard-matches .admin-table,
  .dashboard-matches .admin-table thead,
  .dashboard-matches .admin-table tbody,
  .dashboard-matches .admin-table th,
  .dashboard-matches .admin-table td,
  .dashboard-matches .admin-table tr {
    display: block;
  }

  .dashboard-matches .admin-table thead tr {
    display: none;
  }

  .dashboard-matches .admin-table tbody tr {
    border-bottom: 2px solid var(--ui-border);
    padding: var(--space-2) 0;
  }

  .dashboard-matches .admin-table tbody tr:last-child {
    border-bottom: none;
  }

  .dashboard-matches .admin-table tbody td {
    padding: var(--space-1) var(--space-4);
    border-bottom: none;
  }

  .dashboard-matches .admin-table tbody td[data-label]::before {
    content: attr(data-label) ": ";
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
  }

  .dashboard-matches .admin-table__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-top: var(--space-2);
  }
}

/* ==========================================================================
   Rating Scale (client onboarding)
   ========================================================================== */

.rating-scale {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.rating-scale__end {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.rating-scale__options {
  display: flex;
  gap: var(--space-2);
}

.rating-scale__radio {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.rating-scale__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.0rem;
  height: 3.0rem;
  border: 2px solid var(--ui-subtle);
  border-radius: var(--radius-full);
  cursor: pointer;
  font-weight: 700;
  font-size: var(--font-size-lg);
  color: var(--color-dark);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  user-select: none;
}

.rating-scale__radio:checked + .rating-scale__btn {
  background: var(--color-teal);
  border-color: var(--color-teal);
  color: var(--color-white);
}

.rating-scale__btn:hover {
  border-color: var(--color-teal);
  color: var(--color-teal);
}

.rating-scale__radio:checked + .rating-scale__btn:hover {
  color: var(--color-white);
}

.rating-scale__radio:focus-visible + .rating-scale__btn {
  outline: 3px solid var(--color-teal);
  outline-offset: 2px;
}

/* ── Draft save banner & status ───────────────────────────────────────── */

.draft-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: #fff8e1;
  border: 1px solid #f0b429;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  color: #7a5c00;
}

[data-theme="dark"] .draft-banner {
  /*background-color: #f00;*/
  background: var(--color-teal-dark-2);
  color: #fff;
  border-color: #fff;
}

.draft-banner[hidden] {
  display: none;
}

.draft-banner__clear {
  flex-shrink: 0;
  background: none;
  border: 1px solid #f0b429;
  border-radius: 4px;
  color: #7a5c00;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0.25rem 0.75rem;
  transition: background 0.15s;
}

[data-theme="dark"] .draft-banner__clear {
  /*background-color: #f00;*/
  background: var(--color-teal-dark-2);
  color: #fff;
  border-color: #fff;
}

.draft-banner__clear:hover {
  background: #fef3c7;
}

[data-theme="dark"] .draft-banner__clear:hover {
  background: var(--color-teal-dark);
  color: #fff;
}

.draft-confirm-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  border: none;
  border-radius: 10px;
  padding: 2rem;
  max-width: 420px;
  width: 90%;
  background: #2a7a7a;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.draft-confirm-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.draft-confirm-dialog__message {
  font-size: 1rem;
  color: #F6F1E7;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.draft-confirm-dialog__actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

.draft-confirm-dialog__actions .btn--outline {
  color: #0b3439;
  border-color: #0b3439;
  background: #F6F1E7;
}

.draft-confirm-dialog__actions .btn--outline:hover {
  background: #e8e3d8;
}

.draft-status {
  display: block;
  font-size: 0.8rem;
  color: var(--color-text-muted, #888);
  margin-bottom: 0.5rem;
  min-height: 1.1em;
}

/* ==========================================================================
   Calendar
   ========================================================================== */

.cal-page {
  display: flex;
  flex-direction: column;
  max-width: 1100px;
  margin: 0 auto;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-4);
}

.cal-timezone-bar {
  font-size: 0.85rem;
  color: var(--color-text-muted, #6b7280);
  text-align: right;
}

/* --- Toolbar --- */
.cal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--ui-border);
  gap: var(--space-4);
  flex-wrap: wrap;
}

.cal-toolbar__left {
  flex-shrink: 0;
}

.cal-toolbar__center {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: 1;
  justify-content: center;
}

.cal-toolbar__nav {
  display: flex;
  gap: var(--space-1);
}

.cal-toolbar__nav-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--ui-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-dark);
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: background 0.15s;
}

.cal-toolbar__nav-btn:hover {
  background: var(--color-gray-light);
}

.cal-toolbar__nav-btn--today {
  font-weight: 600;
}

.cal-toolbar__nav-btn--disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.cal-toolbar__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-dark);
  white-space: nowrap;
}

.cal-toolbar__views {
  display: flex;
  gap: 0;
  border: 1px solid var(--ui-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}

.cal-toolbar__view-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.8rem;
  background: var(--color-white);
  color: var(--color-dark);
  font-size: var(--font-size-sm);
  text-decoration: none;
  border-right: 1px solid var(--ui-subtle);
  transition: background 0.15s;
}

.cal-toolbar__view-btn:last-child {
  border-right: none;
}

.cal-toolbar__view-btn:hover {
  background: var(--color-gray-light);
}

.cal-toolbar__view-btn.active {
  background: var(--color-dark);
  color: var(--color-white);
  font-weight: 600;
}

/* --- Month Grid --- */
.cal-month {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-left: 1px solid var(--ui-border);
  border-top: 1px solid var(--ui-border);
}

.cal-month__header-cell {
  background: var(--color-dark);
  color: var(--color-white);
  text-align: center;
  padding: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: 600;
  border-right: 1px solid var(--ui-subtle);
  border-bottom: 1px solid var(--ui-subtle);
}

.cal-month__cell {
  min-height: 100px;
  border-right: 1px solid var(--ui-border);
  border-bottom: 1px solid var(--ui-border);
  padding: var(--space-2);
  vertical-align: top;
  position: relative;
  cursor: pointer;
  user-select: none;
}

.cal-month__cell--today {
  background: #fffbea;
}

.cal-month__cell--other-month {
  background: var(--ui-surface);
  color: var(--ui-muted-text);
}

.cal-month__cell--other-month .cal-month__day-number {
  color: var(--ui-subtle);
}

.cal-month__cell-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-1);
}

.cal-month__day-number {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: 500;
}

.cal-month__cell--today .cal-month__day-number {
  background: var(--color-teal);
  color: var(--color-white);
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.cal-month__add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--color-teal);
  color: var(--color-white);
  border-radius: 50%;
  font-size: 0.9rem;
  line-height: 1;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.15s;
}

.cal-month__cell:hover .cal-month__add-btn {
  opacity: 1;
}

/* --- Week Grid --- */
.cal-week-wrapper {
  overflow-x: auto;
}

.cal-week {
  display: grid;
  grid-template-columns: 60px repeat(7, 1fr);
  grid-auto-rows: 60px;
  border-left: 1px solid var(--ui-border);
  border-top: 1px solid var(--ui-border);
  min-width: 600px;
}

.cal-week__corner {
  background: var(--color-dark);
  border-right: 1px solid var(--ui-subtle);
  border-bottom: 1px solid var(--ui-subtle);
}

.cal-week__day-header {
  background: var(--color-dark);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--ui-subtle);
  border-bottom: 1px solid var(--ui-subtle);
  padding: var(--space-1);
}

.cal-week__day-header--today {
  background: var(--color-teal-dark);
}

.cal-week__day-name {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cal-week__day-num {
  font-size: var(--font-size-lg);
  font-weight: 700;
}

.cal-week__time-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-align: right;
  padding-right: var(--space-2);
  display: flex;
  align-items: flex-start;
  padding-top: var(--space-1);
  border-right: 1px solid var(--ui-border);
  border-bottom: 1px solid var(--ui-border);
}

.cal-week__slot {
  border-right: 1px solid var(--ui-border);
  border-bottom: 1px solid var(--ui-border);
  cursor: pointer;
  position: relative;
  padding: 2px;
  overflow: hidden;
}

.cal-week__slot:hover {
  background: #f0fdfe;
}

.cal-week__add-btn {
  display: none;
  position: absolute;
  top: 2px;
  right: 2px;
  width: 1.1rem;
  height: 1.1rem;
  background: var(--color-teal);
  color: var(--color-white);
  border-radius: 50%;
  font-size: 0.75rem;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  line-height: 1;
}

.cal-week__slot:hover .cal-week__add-btn {
  display: inline-flex;
}

/* --- Day Grid --- */
.cal-day {
  display: grid;
  grid-template-columns: 60px 1fr;
  grid-auto-rows: 60px;
  border-left: 1px solid var(--ui-border);
  border-top: 1px solid var(--ui-border);
}

.cal-day__corner {
  background: var(--color-dark);
  border-right: 1px solid var(--ui-subtle);
  border-bottom: 1px solid var(--ui-subtle);
}

.cal-day__header {
  background: var(--color-dark);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--ui-subtle);
  border-bottom: 1px solid var(--ui-subtle);
}

.cal-day__header--today {
  background: var(--color-teal-dark);
}

.cal-day__day-name {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cal-day__day-num {
  font-size: var(--font-size-lg);
  font-weight: 700;
}

/* --- Intro Call Pill --- */
.cal-intro-call-pill {
  display: block;
  background: #f59e0b;
  color: var(--color-white);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  font-size: 0.75rem;
  margin-bottom: 2px;
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1.4;
  cursor: default;
}

.cal-intro-call-pill--completed {
  background: var(--ui-muted-text);
  text-decoration: line-through;
  opacity: 0.75;
}

/* --- Intro Call Badge --- */
.intro-call-badge {
  display: inline-block;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
  border-radius: var(--radius-full);
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: 500;
}

.intro-call-badge--completed {
  background: #d1fae5;
  color: #065f46;
  border-color: #6ee7b7;
}

/* --- Session Pill --- */
.cal-session-pill {
  display: block;
  background: var(--color-teal);
  color: var(--color-white);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  font-size: 0.75rem;
  margin-bottom: 2px;
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.cal-session-pill:hover {
  background: var(--color-teal-dark);
  color: var(--color-white);
}

.cal-session-pill--completed {
  background: var(--ui-muted-text);
}

.cal-session-pill--completed:hover {
  background: #6b7280;
}

.cal-session-pill__time {
  font-weight: 600;
  margin-right: 4px;
}

.cal-session-pill__name {
  opacity: 0.9;
}

/* --- Modal --- */
.cal-modal {
  border: 2px solid #fff;
  border-radius: var(--radius-lg, 0.5rem);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  padding: 0;
  width: 480px;
  max-width: 90vw;
  margin: auto;
  background: var(--color-dark-2, #0f2f36);
  color: var(--color-white);
}

.cal-modal::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

.cal-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--ui-border);
}

.cal-modal__title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-white);
}

.cal-modal__close {
  background: none;
  border: none;
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  cursor: pointer;
  line-height: 1;
  padding: 0.25rem;
}

.cal-modal__close:hover {
  color: var(--color-dark);
}

.cal-modal__form {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cal-modal__actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  padding-top: var(--space-2);
}

.cal-modal__blocked {
  padding: var(--space-6);
  text-align: center;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* --- Custom Date Picker (used in place of a native date input) --- */
.cal-date-picker {
  position: relative;
}

.cal-date-picker__panel {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: var(--space-1);
  background: var(--color-white);
  color: var(--color-dark);
  border: 1px solid var(--color-gray-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 200;
  padding: var(--space-3);
}

.cal-date-picker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
  font-weight: 600;
}

.cal-date-picker__nav {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--font-size-lg);
  line-height: 1;
  padding: 0.25rem 0.5rem;
  color: var(--color-dark);
}

.cal-date-picker__nav:hover {
  color: var(--color-teal);
}

.cal-date-picker__grid {
  display: grid;
  grid-template-columns: repeat(7, 44px);
  gap: 2px;
}

.cal-date-picker__header-cell {
  width: 44px;
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  padding-bottom: var(--space-1);
}

.cal-date-picker__cell {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--color-dark);
}

.cal-date-picker__cell:hover {
  background: var(--ui-surface);
}

.cal-date-picker__cell--other-month {
  color: var(--ui-subtle);
}

.cal-date-picker__cell--today {
  font-weight: 700;
  color: var(--color-teal);
}

.cal-date-picker__cell--selected {
  background: var(--color-teal);
  color: var(--color-white);
}

.cal-date-picker__cell--selected:hover {
  background: var(--color-teal);
}

[data-theme="dark"] .cal-modal__title {
  color: #fff;
}

[data-theme="dark"] .cal-modal .form-static-value {
  color: var(--color-teal);
}

.form-group--checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.form-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}

.form-label--inline {
  margin-bottom: 0;
  cursor: pointer;
}

.btn--danger {
  background: #dc2626;
  color: var(--color-white);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
}

.btn--danger:hover {
  background: #b91c1c;
}

[data-theme="dark"] .btn--danger {
  color: #fff;
}

[data-theme="dark"] .admin-match-group__coach-row {
  background: rgba(127, 212, 193, 0.75);
}

[data-theme="dark"] .admin-match-group__coach-name {
  color: #123;
}

[data-theme="dark"] .admin-match-group__coach-name:hover {
  color: #fff;
}

/* --- Mobile --- */
@media (max-width: 768px) {
  .cal-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .cal-toolbar__center {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .cal-month__cell {
    min-height: 60px;
  }

  .cal-week-wrapper {
    overflow-x: auto;
  }
}

/* ==========================================================================
   Call Page (.call-page)
   ========================================================================== */

.call-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--color-dark);
  padding: var(--space-4);
  gap: var(--space-4);
}

.call-page__videos {
  position: relative;
  width: 100%;
  max-width: 960px;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.call-page__remote {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.call-page__local {
  position: absolute;
  bottom: var(--space-4);
  right: var(--space-4);
  width: 180px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 2px solid var(--color-teal);
  border-radius: var(--radius-sm);
}

.call-page__status {
  color: var(--color-gray-light);
  font-size: var(--font-size-sm);
}

.call-page__controls {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  justify-content: center;
}

[data-theme="dark"] .call-page {
  background: #00343D;
}

/* ==========================================================================
   Payment — .payment-*
   ========================================================================== */

.payment-currency-badge {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-teal-dark);
  background: #e0f7f8;
  border: 1px solid var(--color-teal);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  align-self: center;
}

.payment-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 800px;
}

.payment-tiers {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.payment-tier-card {
  /* button reset */
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  /* card styling */
  flex: 1 1 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-6) var(--space-4);
  border: 2px solid var(--color-gray-light);
  border-radius: var(--radius-md);
  background: var(--color-white);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.payment-tier-card:hover {
  border-color: var(--color-teal);
}

.payment-tier-card--selected {
  border-color: var(--color-teal);
  background: #e0f7f8;
}

.payment-tier-card__amount {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-dark);
}

.payment-tier-card__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.payment-custom {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.payment-custom__label {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-dark);
}

.payment-custom__input {
  max-width: 280px;
}

.payment-custom__hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.payment-form__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
}

.payment-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-light);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  max-width: 520px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.payment-card--success {
  text-align: center;
}

.payment-card__status {
  color: #dc2626;
  font-size: var(--font-size-sm);
  min-height: 1.25rem;
  margin-bottom: var(--space-2);
}

.payment-success__icon {
  font-size: 3rem;
  color: var(--color-teal);
  margin-bottom: var(--space-4);
}

.payment-success__heading {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: var(--space-3);
}

.payment-success__body {
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  line-height: 1.6;
}

.btn--full {
  width: 100%;
}

/* --------------------------------------------------------------------------
   Contract status badges
   -------------------------------------------------------------------------- */
.status-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.status-badge--pending  { background: #fef3c7; color: #92400e; }
.status-badge--signed   { background: #d1fae5; color: #065f46; }
.status-badge--expired  { background: #fee2e2; color: #991b1b; }
.status-badge--voided   { background: var(--ui-divider); color: #6b7280; }

/* --------------------------------------------------------------------------
   Contract signing public page (.contract-page)
   -------------------------------------------------------------------------- */
.contract-page {
  max-width: 760px;
  margin: 40px auto;
  padding: 0 var(--space-4);
}

.contract-page__title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: var(--space-4);
}

.contract-page__expiry {
  background: #fef9c3;
  border: 1px solid #fde68a;
  border-radius: 6px;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  color: #78350f;
  font-size: 0.9rem;
}

.contract-page__parties {
  background: var(--ui-confirmed-bg);
  border: 1px solid #bbf7d0;
  border-radius: 6px;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-6);
}

.contract-page__section {
  margin-bottom: var(--space-6);
}

.contract-page__section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--ui-border);
}

.contract-page__section-body {
  color: var(--color-text-muted);
  line-height: 1.7;
}

.contract-page__section-body ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin: 0.5rem 0;
}

.contract-page__section-body li {
  margin-bottom: 0.25rem;
}

.contract-page__sign-block {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  padding: var(--space-6);
  margin-top: var(--space-8);
}

/* Signature tabs */
.contract-signature__tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.contract-signature__tab {
  padding: 6px 16px;
  border: 1px solid var(--ui-subtle);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--color-text);
}

.contract-signature__tab--active {
  background: var(--color-teal);
  color: #fff;
  border-color: var(--color-teal);
}

.contract-signature-canvas {
  display: block;
  border: 1px solid var(--ui-subtle);
  border-radius: 4px;
  background: #fff;
  touch-action: none;
}

.contract-signature__agree {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: 0.875rem;
  color: var(--color-text);
}

/* Admin table */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.admin-table th {
  text-align: left;
  padding: 8px 12px;
  background: var(--ui-divider);
  border-bottom: 1px solid var(--ui-border);
  font-weight: 600;
  color: var(--color-text);
}

.admin-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--ui-divider);
  color: var(--color-text);
}

.admin-table tr:last-child td {
  border-bottom: none;
}

.admin-table__actions {
  display: flex;
  gap: var(--space-2);
  white-space: nowrap;
}

/* Contract wizard nav */
/* Contract section card (step 2) */
.contract-section-card {
  background: #1a5563;
  border: 1px solid #fff;
  padding: 16px;
  margin-top: 16px;
  border-radius: 6px;
}

.contract-section-card__details {
  background: var(--color-white);
  border-color: rgba(255,255,255,0.25);
}

.contract-wizard__nav {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-4);
}

/* Contract preview */
.contract-preview {
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  padding: var(--space-4);
  min-height: 120px;
}

/* --------------------------------------------------------------------------
   Email test mode warning banner
   -------------------------------------------------------------------------- */
.email-test-mode-banner {
  background: #fef3c7;
  border-bottom: 2px solid #f59e0b;
  color: #78350f;
  padding: 10px var(--space-6);
  font-size: 0.875rem;
  text-align: center;
}

.email-test-mode-banner__link {
  color: #78350f;
  font-weight: 600;
  text-decoration: underline;
  margin-left: var(--space-2);
}

/* --------------------------------------------------------------------------
   What We Do Section
   -------------------------------------------------------------------------- */
.what-we-do {
  background: #ffffff;
  color: var(--color-dark);
  padding: var(--space-20) 0;
}

[data-theme="dark"] .what-we-do {
  background: #103a41;
  color: #F6F1E7;
}

.what-we-do__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-section-eyebrow);
  margin-bottom: var(--space-6);
}

.what-we-do__eyebrow::before {
  content: '';
  display: block;
  width: 2rem;
  height: 2px;
  background: currentColor;
  flex-shrink: 0;
}

.what-we-do__heading {
  font-size: clamp(var(--font-size-2xl), 3vw, var(--font-size-4xl));
  font-weight: 800;
  color: var(--color-dark);
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 680px;
  margin-bottom: var(--space-6);
}

.what-we-do__body {
  font-size: var(--font-size-lg);
  color: rgba(55, 55, 55, 0.75);
  max-width: 780px;
  line-height: 1.75;
  margin-bottom: var(--space-12);
}

[data-theme="dark"] .what-we-do__heading {
  color: #F6F1E7;
}

[data-theme="dark"] .what-we-do__body {
  color: rgba(246, 241, 231, 0.75);
}

.what-we-do__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.ef-card {
  background: #14474f;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color 0.2s ease;
}

/*[data-theme="dark"] .ef-card {
  background: rgba(100, 255, 255, 0.055);
}*/

/*.ef-card:hover {
  border-color: rgba(255, 255, 255, 0.85);
}*/

.ef-card__icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  color: #7FD4C1;
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease;
}

/*.ef-card:hover .ef-card__icon-wrap {
  background: rgba(127, 212, 193, 0.32);
  color: #ffffff;
}*/

.ef-card__title {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: #F6F1E7;
  margin-bottom: var(--space-2);
  line-height: 1.3;
}

[data-theme="dark"] .ef-card__title {
  color: #F6F1E7;
}

.ef-card__text {
  font-size: var(--font-size-sm);
  color: rgba(246, 241, 231, 0.65);
  line-height: 1.65;
}

[data-theme="dark"] .ef-card__text {
  color: rgba(246, 241, 231, 0.65);
}

.what-we-do__notice {
  margin-top: var(--space-8);
  display: flex;
  align-items: center;
  gap: var(--space-6);
  background: rgba(8, 118, 128, 0.08);
  border: 1px solid rgba(8, 118, 128, 0.18);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
}

.what-we-do__notice .ef-card__icon-wrap {
  flex-shrink: 0;
  margin-bottom: 0;
}

[data-theme="dark"] .what-we-do__notice {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(246, 241, 231, 0.12);
}

.what-we-do__notice-heading {
  display: block;
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: var(--space-2);
  line-height: 1.3;
}

[data-theme="dark"] .what-we-do__notice-heading {
  color: #F6F1E7;
}

.what-we-do__notice-text {
  font-size: var(--font-size-base);
  color: rgba(0, 0, 0, 0.7);
  line-height: 1.65;
}

[data-theme="dark"] .what-we-do__notice-text {
  color: rgba(246, 241, 231, 0.8);
}

@media (max-width: 768px) {
  .what-we-do__notice {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-6);
  }
}

@media (max-width: 1024px) {
  .what-we-do__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .what-we-do__grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Inside the Programme Section
   -------------------------------------------------------------------------- */
.programme {
  background: #ffffff;
  color: var(--color-dark);
  padding: var(--space-20) 0;
}

[data-theme="dark"] .programme {
  background: #0b3439;
  color: #F6F1E7;
}

.programme__arc {
  display: grid;
  grid-template-columns: 148px 36px 1fr 36px 148px;
  align-items: start;
  margin-top: var(--space-10);
}

.programme__connector {
  height: 74px;
  position: relative;
}

.programme__arc > .programme__connector:nth-child(2)::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -34px;
  right: 0;
  height: 2px;
  background: rgba(127, 212, 193, 0.9);
}

.programme__arc > .programme__connector:nth-child(4)::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: -34px;
  height: 2px;
  background: rgba(127, 212, 193, 0.9);
}

.programme__endpoint {
  text-align: center;
  padding: 0 var(--space-3);
}

.programme__endpoint-icon {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: #00343D;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  margin: 0 auto var(--space-3);
}

.programme__endpoint-icon svg {
  width: 34px;
  height: 34px;
  color: #fff;
}

.programme__endpoint-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-teal-dark);
  margin-bottom: var(--space-2);
}

.programme__endpoint-title {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: var(--space-2);
}

.programme__endpoint-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

.programme__centre {
  background: #a8c8cc;
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.programme__centre-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: var(--space-6);
}

.programme__centre-eyebrow::before,
.programme__centre-eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
}

.programme__strands {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.programme__strand {
  background: #087680;
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

.programme__strand-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  margin-bottom: var(--space-4);
}

.programme__strand-title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: #ffffff;
  margin-bottom: var(--space-2);
}

.programme__strand-meta {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: var(--space-4);
}

.programme__strand-text {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
}

@media (max-width: 900px) {
  .programme__arc {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  .programme__connector {
    display: none;
  }

  .programme__endpoint {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    text-align: left;
  }

  .programme__endpoint-icon {
    margin: 0;
    flex-shrink: 0;
  }
}

@media (max-width: 600px) {
  .programme__strands {
    grid-template-columns: 1fr;
  }
}

/* ── Admin modal ──────────────────────────────────────────── */
.admin-modal {
  border: none;
  border-radius: var(--radius-lg, 0.5rem);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  padding: var(--space-6);
  width: 560px;
  max-width: 92vw;
  margin: auto;
  background: var(--color-dark-2, #0f2f36);
  color: var(--color-white);
}

.admin-modal::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

/* ── Coaching Programs ──────────────────────────────────────── */
.onboarding-program-banner {
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-teal);
  margin-top: 0.75rem;
  margin-bottom: 0.25rem;
}

.program-onboarding-link {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
}

.program-onboarding-link input[type="text"] {
  flex: 1;
  font-size: 0.85rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  background: #00343D;
  color: #fff;
}

.admin-section__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.admin-section__header .admin-section__title {
  margin-bottom: 0;
}

/* ── Partner Dashboard ──────────────────────────────────────── */
.partner-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin-top: 0.5rem;
}

.partner-stat {
  background: var(--color-dark-2, #0f2f36);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 1.25rem 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.partner-stat__value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-teal);
  line-height: 1;
}

.partner-stat__label {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.3;
}

.partner-progress {
  position: relative;
  background: rgba(255,255,255,0.1);
  border-radius: 99px;
  height: 20px;
  min-width: 100px;
  overflow: hidden;
}

.partner-progress__bar {
  height: 100%;
  background: var(--color-teal);
  border-radius: 99px;
  transition: width 0.3s ease;
}

.partner-progress__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
}

.dashboard-matches__link {
  color: var(--color-teal);
  text-decoration: none;
  font-weight: 500;
}
.dashboard-matches__link:hover { text-decoration: underline; }

.dashboard-program-details {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.dashboard-program-details__row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 0.5rem;
  align-items: baseline;
}

.dashboard-program-details__row dt {
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.65;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dashboard-program-details__row dd {
  margin: 0;
  line-height: 1.5;
}

/* ── Understand (Free Assessment) section ─────────────── */
.understand {
  background: #ECD9A0;
  background: #faf3e1;
  color: var(--color-dark);
  padding: var(--space-24) 0;
}

[data-theme="dark"] .understand {
  background: #0b3c45;
}

.understand__inner {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--space-16);
  align-items: center;
}

.understand__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: var(--space-6);
}

[data-theme="dark"] .understand__eyebrow {
  color: rgba(246, 241, 231, 0.55);
}

.understand__eyebrow::before {
  content: '';
  display: block;
  width: 2rem;
  height: 2px;
  background: currentColor;
  flex-shrink: 0;
}

.understand__heading {
  font-size: clamp(var(--font-size-2xl), 3vw, var(--font-size-4xl));
  font-weight: 800;
  color: var(--color-dark);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-6);
}

[data-theme="dark"] .understand__heading {
  color: #F6F1E7;
}

.understand__body {
  font-size: var(--font-size-lg);
  color: rgba(0, 0, 0, 0.75);
  line-height: 1.75;
}

[data-theme="dark"] .understand__body {
  color: rgba(246, 241, 231, 0.75);
}

.understand__card {
  background: #14474f;
  border-radius: 1.25rem;
  padding: var(--space-10);
}

[data-theme="dark"] .understand__card {
  background: #14474f;
}

.understand__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #F6F1E7;
  border: 1px solid rgba(246, 241, 231, 0.6);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  margin-bottom: var(--space-8);
}

.understand__card-heading {
  font-size: var(--font-size-2xl);
  font-weight: 800;
  color: #F6F1E7;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-5);
}

[data-theme="dark"] .understand__card-heading {
  color: #F6F1E7;
}

.understand__card-body {
  font-size: var(--font-size-base);
  color: rgba(246, 241, 231, 0.85);
  line-height: 1.7;
  margin-bottom: var(--space-6);
}

[data-theme="dark"] .understand__card-body {
  color: rgba(246, 241, 231, 0.75);
}

.understand__cta {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: 2px solid rgba(246, 241, 231, 0.85);
  border-radius: 999px;
  color: #F6F1E7;
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease;
  margin-bottom: var(--space-4);
}

[data-theme="dark"] .understand__cta {
  border: 2px solid rgba(246, 241, 231, 0.85);
  border-radius: 999px;
  color: #F6F1E7;
}

.understand__cta:hover {
  background: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .understand__cta:hover {
  background: rgba(246, 241, 231, 0.1);
}

.understand__note {
  font-size: 0.8rem;
  color: rgba(246, 241, 231, 0.6);
}

[data-theme="dark"] .understand__note {
  color: rgba(246, 241, 231, 0.5);
}

@media (max-width: 768px) {
  .understand__inner {
    grid-template-columns: 1fr;
  }
}

/* ── Our Approach section ─────────────────────────────── */
.approach {
  background: #ffffff;
  color: #555;
  padding: var(--space-20) 0;
}

[data-theme="dark"] .approach {
  background: #103a41;
  color: #F6F1E7;
}

.approach__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.55);
  margin-bottom: var(--space-6);
}

[data-theme="dark"] .approach__eyebrow {
  color: rgba(246, 241, 231, 0.55);
}

.approach__eyebrow::before {
  content: '';
  display: block;
  width: 2rem;
  height: 2px;
  background: currentColor;
  flex-shrink: 0;
}

.approach__heading {
  font-size: clamp(var(--font-size-2xl), 3vw, var(--font-size-4xl));
  font-weight: 800;
  color: #555;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-6);
}

[data-theme="dark"] .approach__heading {
  color: #F6F1E7;
}

.approach__body {
  font-size: var(--font-size-base);
  color: rgba(0, 0, 0, 0.75);
  line-height: 1.75;
  max-width: 860px;
  margin-bottom: var(--space-12);
}

[data-theme="dark"] .approach__body {
  color: rgba(246, 241, 231, 0.75);
}

.approach__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.approach__card {
  background: #087680;
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

/*[data-theme="dark"] .approach__card {
  background: rgba(100, 255, 255, 0.055);
}*/

.approach__card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}

/*[data-theme="dark"] .approach__card-icon {
  background: rgba(127, 212, 193, 0.12);
}*/

.approach__card-icon svg {
  width: 22px;
  height: 22px;
  color: #ffffff;
}

.approach__card-title {
  font-size: var(--font-size-lg);
  font-weight: 800;
  color: #ffffff;
  margin-bottom: var(--space-3);
}

[data-theme="dark"] .approach__card-title {
  color: #F6F1E7;
}

.approach__card-text {
  font-size: var(--font-size-base);
  color: #ffffff;
  line-height: 1.7;
}

[data-theme="dark"] .approach__card-text {
  color: rgba(246, 241, 231, 0.7);
}

@media (max-width: 768px) {
  .approach__grid {
    grid-template-columns: 1fr;
  }
}

/* ── Who We Work With section ─────────────────────────── */
.who-we-work {
  background: #ECD9A0;
  background: #faf3e1;
  color: var(--color-dark);
  padding: var(--space-24) 0;
}

[data-theme="dark"] .who-we-work {
  background: #0b3439;
}

.who-we-work__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: var(--space-6);
}

[data-theme="dark"] .who-we-work__eyebrow {
  color: rgba(246, 241, 231, 0.55);
}

.who-we-work__eyebrow::before {
  content: '';
  display: block;
  width: 2rem;
  height: 2px;
  background: currentColor;
  flex-shrink: 0;
}

.who-we-work__heading {
  font-size: clamp(var(--font-size-2xl), 3vw, var(--font-size-4xl));
  font-weight: 800;
  color: var(--color-dark);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-6);
}

[data-theme="dark"] .who-we-work__heading {
  color: #F6F1E7;
}

.who-we-work__body {
  font-size: var(--font-size-lg);
  color: rgba(0, 0, 0, 0.75);
  line-height: 1.75;
  max-width: 780px;
  margin-bottom: var(--space-12);
}

[data-theme="dark"] .who-we-work__body {
  color: rgba(246, 241, 231, 0.75);
}

.who-we-work__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-bottom: var(--space-10);
}

.who-we-work__card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}

[data-theme="dark"] .who-we-work__card {
  background: rgba(100, 255, 255, 0.055);
  border-color: rgba(100, 255, 255, 0.15);
}

.who-we-work__card-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: #087680;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-6);
}

/*[data-theme="dark"] .who-we-work__card-icon {
  background: rgba(127, 212, 193, 0.12);
}*/

.who-we-work__card-icon svg {
  width: 26px;
  height: 26px;
  color: #ffffff;
}

.who-we-work__card-title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: var(--space-4);
}

[data-theme="dark"] .who-we-work__card-title {
  color: #F6F1E7;
}

.who-we-work__card-text {
  font-size: var(--font-size-base);
  color: rgba(0, 0, 0, 0.65);
  line-height: 1.7;
}

[data-theme="dark"] .who-we-work__card-text {
  color: rgba(246, 241, 231, 0.7);
}

.who-we-work__compliance {
  display: flex;
  gap: var(--space-8);
  align-items: flex-start;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  margin-bottom: var(--space-8);
}

[data-theme="dark"] .who-we-work__compliance {
  background: rgba(100, 255, 255, 0.055);
  border-color: rgba(100, 255, 255, 0.15);
}

[data-theme="dark"] .who-we-work__compliance-title {
  color: #F6F1E7;
}

[data-theme="dark"] .who-we-work__compliance-text {
  color: rgba(246, 241, 231, 0.75);
}

[data-theme="dark"] .who-we-work__compliance-link {
  color: #F6F1E7;
  border-color: rgba(246, 241, 231, 0.3);
}

.who-we-work__compliance-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: #087680;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.who-we-work__compliance-icon svg {
  width: 28px;
  height: 28px;
  color: #ffffff;
}

.who-we-work__compliance-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: var(--space-4);
}

.who-we-work__compliance-text {
  font-size: var(--font-size-base);
  color: rgba(0, 0, 0, 0.65);
  line-height: 1.7;
  margin-bottom: 0;
}

.who-we-work__compliance-link {
  display: inline-block;
  margin-top: var(--space-4);
  padding: 0.6rem 1.25rem;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 999px;
  color: var(--color-dark);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease;
}

.who-we-work__compliance-link:hover {
  background: rgba(0, 0, 0, 0.05);
}

.who-we-work__cta-band {
  background: #ECD9A0;
  background: #faf3e1;
  padding: 0 0 var(--space-24);
}

[data-theme="dark"] .who-we-work__cta-band {
  background: #0b3439;
}

.who-we-work__cta-inner {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
}

[data-theme="dark"] .who-we-work__cta-inner {
  background: rgba(100, 255, 255, 0.055);
  border-color: rgba(100, 255, 255, 0.15);
}

.who-we-work__cta-heading {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: var(--space-4);
}

[data-theme="dark"] .who-we-work__cta-heading {
  color: #F6F1E7;
}

.who-we-work__cta-text {
  font-size: var(--font-size-base);
  color: rgba(0, 0, 0, 0.65);
  line-height: 1.65;
  max-width: 500px;
  margin-bottom: var(--space-8);
}

[data-theme="dark"] .who-we-work__cta-text {
  color: rgba(246, 241, 231, 0.75);
}

.who-we-work__cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.who-we-work__cta-btn {
  display: inline-block;
  padding: 0.65rem 1.25rem;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 999px;
  color: var(--color-dark);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease;
}

.who-we-work__cta-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

.who-we-work__cta-btn--primary {
  background: var(--color-dark);
  color: #ffffff;
  border-color: var(--color-dark);
}

.who-we-work__cta-btn--primary:hover {
  background: var(--color-dark-light);
  border-color: var(--color-dark-light);
}

[data-theme="dark"] .who-we-work__cta-btn {
  color: #F6F1E7;
  border-color: rgba(246, 241, 231, 0.3);
}

[data-theme="dark"] .who-we-work__cta-btn--primary {
  background: var(--color-teal-dark);
  border-color: var(--color-teal-dark);
}

[data-theme="dark"] .who-we-work__cta-btn--primary:hover {
  background: var(--color-teal-dark-2);
  border-color: var(--color-teal-dark-2);
}

@media (max-width: 768px) {
  .who-we-work__grid {
    grid-template-columns: 1fr;
  }

  .who-we-work__compliance {
    flex-direction: column;
  }

  .who-we-work__cta-buttons {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── Disability Equality Law section ──────────────────── */
.disability-law {
  background: #fff;
  color: var(--color-dark);
  padding: var(--space-20) 0;
}

[data-theme="dark"] .disability-law {
  background: #103a41;
}

.disability-law__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.55);
  margin-bottom: var(--space-6);
}

[data-theme="dark"] .disability-law__eyebrow {
  color: rgba(246, 241, 231, 0.55);
}

.disability-law__eyebrow::before {
  content: '';
  display: block;
  width: 2rem;
  height: 2px;
  background: currentColor;
  flex-shrink: 0;
}

.disability-law__heading {
  font-size: clamp(var(--font-size-2xl), 3vw, var(--font-size-4xl));
  font-weight: 800;
  color: var(--color-dark);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-6);
}

[data-theme="dark"] .disability-law__heading {
  color: #F6F1E7;
}

.disability-law__body {
  font-size: var(--font-size-base);
  color: rgba(0, 0, 0, 0.75);
  line-height: 1.75;
  max-width: 860px;
  margin-bottom: var(--space-10);
}

[data-theme="dark"] .disability-law__body {
  color: rgba(246, 241, 231, 0.75);
}

.disability-law__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.disability-law__card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-10);
}

[data-theme="dark"] .disability-law__card {
  background: rgba(100, 255, 255, 0.055);
  border-color: rgba(100, 255, 255, 0.15);
}

.disability-law__card-flag {
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: var(--space-6);
}

.disability-law__card-title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: var(--space-4);
}

[data-theme="dark"] .disability-law__card-title {
  color: #F6F1E7;
}

.disability-law__card-text {
  font-size: var(--font-size-base);
  color: rgba(0, 0, 0, 0.7);
  line-height: 1.7;
}

[data-theme="dark"] .disability-law__card-text {
  color: rgba(246, 241, 231, 0.7);
}

.disability-law__compliance {
  display: flex;
  gap: var(--space-8);
  align-items: flex-start;
  background: rgba(8, 118, 128, 0.07);
  border: 1px solid rgba(8, 118, 128, 0.15);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-10);
}

[data-theme="dark"] .disability-law__compliance {
  background: rgba(100, 255, 255, 0.055);
  border-color: rgba(100, 255, 255, 0.15);
}

.disability-law__compliance-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: #087680;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.disability-law__compliance-icon svg {
  width: 26px;
  height: 26px;
  color: #ffffff;
}

.disability-law__compliance-title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: var(--space-3);
}

[data-theme="dark"] .disability-law__compliance-title {
  color: #F6F1E7;
}

.disability-law__compliance-text {
  font-size: var(--font-size-base);
  color: rgba(0, 0, 0, 0.7);
  line-height: 1.7;
}

[data-theme="dark"] .disability-law__compliance-text {
  color: rgba(246, 241, 231, 0.7);
}

@media (max-width: 768px) {
  .disability-law__grid {
    grid-template-columns: 1fr;
  }

  .disability-law__compliance {
    flex-direction: column;
  }
}

/* ── Insights section ─────────────────────────────────── */
.insights {
  background: #00343D;
  color: #F6F1E7;
  padding: var(--space-24) 0;
}

.insights__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(246, 241, 231, 0.55);
  margin-bottom: var(--space-6);
}

.insights__eyebrow::before {
  content: '';
  display: block;
  width: 2rem;
  height: 2px;
  background: currentColor;
  flex-shrink: 0;
}

.insights__heading {
  font-size: clamp(var(--font-size-2xl), 3vw, var(--font-size-4xl));
  font-weight: 800;
  color: #F6F1E7;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-6);
}

.insights__body {
  font-size: var(--font-size-lg);
  color: rgba(246, 241, 231, 0.75);
  line-height: 1.75;
  max-width: 640px;
  margin-bottom: var(--space-16);
}

.insights__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-bottom: var(--space-16);
}

.insights__stat {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(246, 241, 231, 0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
}

.insights__stat-value {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 800;
  color: #F6F1E7;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: var(--space-4);
}

.insights__stat-denom {
  font-size: 1.5rem;
  font-weight: 700;
  opacity: 0.6;
}

.insights__stat-label {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: #F6F1E7;
  margin-bottom: var(--space-4);
}

.insights__stat-text {
  font-size: var(--font-size-base);
  color: rgba(246, 241, 231, 0.6);
  line-height: 1.6;
}

.insights__partners-heading {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: #F6F1E7;
  margin-bottom: var(--space-8);
}

.insights__partners {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
}

.insights__partner-card {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(246, 241, 231, 0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
}

.insights__partner-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(246, 241, 231, 0.55);
  border: 1px solid rgba(246, 241, 231, 0.2);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  margin-bottom: var(--space-5);
}

.insights__partner-tag svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.insights__partner-title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: #F6F1E7;
  margin-bottom: var(--space-4);
}

.insights__partner-text {
  font-size: var(--font-size-base);
  color: rgba(246, 241, 231, 0.7);
  line-height: 1.65;
}

@media (max-width: 768px) {
  .insights__stats {
    grid-template-columns: 1fr;
  }

  .insights__partners {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Legal Page (Privacy Policy etc.)
   ========================================================= */

.legal-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-6);
}

.legal-page__header {
  background-color: #eef6f5;
  background-color: #fff;
  background-color: var(--large-card-background);
  border: 1px solid #ccc;
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-8);
  margin-bottom: var(--space-10);
}

.legal-page__label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-teal-dark);
  margin-bottom: var(--space-3);
}

.legal-page__label::before {
  content: "— ";
}

.legal-page__title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  color: var(--color-dark);
  margin-bottom: var(--space-4);
  line-height: 1.1;
}

.legal-page__date {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  background: white;
  background: var(--large-card-background);
  border: 1px solid #d0e8e5;
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  margin-bottom: var(--space-6);
}

.legal-page__header p:not(.legal-page__label):not(.legal-page__date) {
  color: var(--color-text);
  line-height: 1.75;
  margin-bottom: var(--space-3);
}

.legal-page__body {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-10);
  align-items: start;
}

.legal-page__toc {
  position: sticky;
  top: 6rem;
}

.legal-page__toc-heading {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.legal-page__toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc-counter;
}

.legal-page__toc li {
  counter-increment: toc-counter;
  margin-bottom: 0.25rem;
}

.legal-page__toc li::before {
  content: counter(toc-counter, decimal-leading-zero) " ";
  font-size: 0.75rem;
  color: var(--color-teal-dark);
  font-weight: 600;
}

.legal-page__toc a {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  text-decoration: none;
  line-height: 1.5;
}

.legal-page__toc a:hover {
  color: var(--color-teal-dark);
}

.legal-page__section {
  padding: var(--space-8) 0;
  border-top: 1px solid #d0e8e5;
}

.legal-page__section:first-child {
  border-top: none;
  padding-top: 0;
}

.legal-page__section-number {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-teal-dark);
  margin-bottom: var(--space-2);
}

.legal-page__section h2 {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--color-dark);
  margin-bottom: var(--space-4);
}

.legal-page__section h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
}

.legal-page__section p {
  color: var(--color-text);
  line-height: 1.75;
  margin-bottom: var(--space-3);
}

.legal-page__section ul {
  padding-left: 1.25rem;
  margin-bottom: var(--space-3);
}

.legal-page__section ul li {
  color: var(--color-text);
  line-height: 1.75;
  margin-bottom: 0.35rem;
  list-style: none;
  padding-left: 1.25rem;
  position: relative;
}

.legal-page__section ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-teal-dark);
}

.legal-page__section a {
  color: var(--color-teal-dark);
  text-decoration: underline;
}

.legal-page__table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-5);
}

.legal-page__table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #d0e8e5;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-text);
}

.legal-page__table td:first-child {
  color: var(--color-text-muted);
  width: 140px;
  font-weight: 500;
}

.legal-page__callout {
  background-color: #fdfbf0;
  background-color: var(--callout-background);
  border: 1px solid #e8dfa0;
  border-color: var(--callout-background-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  padding: 0.7rem 1.4rem 0.8rem 1.4rem;
  color: var(--color-text);
  line-height: 1.65;
  margin: var(--space-4) 0;
}

@media (max-width: 768px) {
  .legal-page {
    padding: var(--space-6) var(--space-4);
  }

  .legal-page__header {
    padding: var(--space-6) var(--space-5);
  }

  .legal-page__body {
    grid-template-columns: 1fr;
  }

  .legal-page__toc {
    position: static;
    background: #eef6f5;
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
  }
}

/* ── PII Reveal ─────────────────────────────────────────────────── */
.pii-field {
  font-family: monospace;
  color: #9ca3af;
  letter-spacing: 0.1em;
}

.pii-field--revealed {
  font-family: inherit;
  color: inherit;
  letter-spacing: normal;
}

.pii-reveal-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 20px;
}

.pii-reveal-dialog {
  border: none;
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  max-width: 420px;
  width: 100%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  background-color: var(--color-teal-dark-2);
  border: solid 1px #fff;
}

.pii-reveal-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.pii-reveal-dialog__title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--color-notice-1-heading);
}

.pii-reveal-dialog__description {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0 0 20px;
  line-height: 1.5;
  color: var(--color-notice-1-text);
}

.pii-reveal-dialog__error {
  font-size: 0.8125rem;
  color: #dc2626;
  margin: 8px 0 0;
  min-height: 1.25em;
}

.pii-reveal-dialog__actions {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}

/* ==========================================================================
   Cookie Consent Banner
   ========================================================================== */

.cookie-consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: var(--color-dark);
  color: var(--color-white);
  border-top: 2px solid var(--color-teal);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.2);
}

.cookie-consent-banner__text {
  flex: 1 1 320px;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: #fff;
}

.cookie-consent-banner__link {
  color: var(--color-teal);
  text-decoration: underline;
}

.cookie-consent-banner__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.cookie-consent-banner__form {
  display: inline-flex;
}

[data-theme="dark"] .cookie-consent-banner {
  background: #0b3439;
}

.cookie-consent-dialog {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  padding: var(--space-6);
  width: 480px;
  max-width: 90vw;
  margin: auto;
  background: var(--color-dark);
  color: var(--color-white);
}

.cookie-consent-dialog--settings {
  width: 560px;
}

.cookie-consent-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.cookie-consent-dialog__title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.cookie-consent-dialog__message {
  line-height: 1.6;
  color: rgba(246, 241, 231, 0.85);
  margin-bottom: var(--space-4);
}

.cookie-consent-dialog__necessary-note {
  margin-top: var(--space-4);
  padding: 0.875rem 1rem;
  border: 2px solid var(--ui-border);
  border-radius: var(--radius-md);
}

.cookie-consent-dialog__necessary-note strong {
  color: var(--color-white);
}

.cookie-consent-dialog__necessary-note span {
  float: right;
  color: var(--color-teal);
  font-weight: 600;
  font-size: var(--font-size-sm);
}

.cookie-consent-dialog__necessary-note p {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: rgba(246, 241, 231, 0.75);
  clear: both;
}

.cookie-consent-dialog__actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: var(--space-6);
}

[data-theme="dark"] .cookie-consent-dialog {
  background: #0b3439;
}

/* ==========================================================================
   Dashboard — Proof of Liability Insurance
   ========================================================================== */

.dashboard-insurance {
  width: 100%;
  max-width: 900px;
  margin-top: var(--space-8);
  padding: var(--space-6);
  background: var(--color-white);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-md);
}

.dashboard-insurance__status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.dashboard-insurance__form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-3);
  max-width: 420px;
}

.dashboard-insurance__form .file-drop-zone {
  width: 100%;
}

.dashboard-insurance__replace {
  margin-top: var(--space-3);
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */