@import url("https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Karla:ital,wght@0,200..800;1,200..800&family=Manrope:wght@200..800&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap");
:root {
  /* Base CSS Variables */
  /* Breakpoints - Tailwind CSS Standard Breakpoints */
  /* 640px (phone) */
  --breakpoint-sm: 40rem;
  /* 768px (tablet) */
  --breakpoint-md: 48rem;
  /* 1024px (desktop) */
  --breakpoint-lg: 64rem;
  /* 1280px (large desktop) */
  --breakpoint-xl: 80rem;
  /* 1536px (extra large desktop) */
  --breakpoint-2xl: 96rem;
  /**
  * =======================================================
  * Colors - Primitive Tokens
  * =======================================================
  **/
  /* Neutral Colors */
  --color-neutral-50: #f7f8fa;
  --color-neutral-100: #eef1f5;
  --color-neutral-200: #d8dee8;
  --color-neutral-300: #7a8598;
  --color-neutral-400: #5a667a;
  --color-neutral-500: #3e4a5a;
  --color-neutral-600: #2e3746;
  --color-neutral-700: #1f2933;
  --color-neutral-800: #161e2b;
  --color-neutral-900: #1a2230;
  /* Blues */
  --color-blue-100: #e6f0fa;
  --color-blue-300: #0093F5;
  --color-blue-400: #007ACC;
  --color-blue-500: #005f9f; /* Primary Brand Blue */
  --color-blue-600: #00497A;
  --color-blue-700: #003152;
  --color-blue-800: #01263e;
  --color-red-400: #F50000;
  --color-red-500: #9E0100;
  --color-orange-500: #9E4200;
  --color-orange-400: #F56600;
  --color-orange-300: #F56600;
  --color-orange-200: #F56600;
  --color-orange-100: #F56600;
  --color-yellow-500: #BA970B;
  --color-green-500: #0BBAA6;
  /* Brand Colors */
  --brand-primary: var(--color-blue-500);
  --brand-secondary: var(--color-blue-800);
  /* Text */
  --font-color-primary: var(--color-neutral-900);
  --font-color-secondary: var(--color-neutral-700);
  --font-color-tertiary: var(--color-neutral-300);
  --font-color-accent: var(--color-blue-500);
  /* Action Backgrounds */
  --action-primary-bg: var(--color-blue-500);
  --action-primary-text: var(--color-neutral-50);
  --action-primary-border: var(--color-neutral-50);
  --action-primary-bg-hover: var(--color-blue-600);
  --action-primary-text-hover: var(--color-neutral-50);
  --action-primary-border-hover: var(--color-neutral-50);
  --action-primary-border-focus: var(--color-blue-500);
  --action-secondary-bg: var(--color-neutral-100);
  --action-secondary-text: var(--color-blue-500);
  --action-secondary-border: var(--color-blue-500);
  --action-secondary-bg-hover: var(--color-blue-500);
  --action-secondary-text-hover: var(--color-neutral-50);
  --action-secondary-border-hover: var(--color-blue-500);
  --action-secondary-border-focus: var(--color-blue-500);
  --action-accent-bg: var(--color-orange-500);
  --action-accent-text: var(--color-neutral-50);
  --action-accent-border: var(--color-orange-500);
  --action-accent-bg-hover: var(--color-orange-400);
  --action-accent-text-hover: var(--color-neutral-50);
  --action-accent-border-hover: var(--color-orange-400);
  --action-accent-border-focus: var(--color-orange-500);
  /* Surface colors */
  /* Default backgrounds for things like sections, cards, and other surfaces */
  --surface-color-primary: var(--color-neutral-50);
  --surface-color-secondary: var(--color-neutral-100);
  --surface-color-tertiary: var(--color-blue-100);
  /**
  * =======================================================
  * Typography - Primitive
  * =======================================================
  **/
  --font-family-primary: "Google Sans", serif;
  --font-family-secondary: "Google Sans", serif;
  --font-family-tertiary: serif;
  /* Font scale */
  --font-size-100: 0.75rem;
  --font-size-200: 0.875rem;
  --font-size-300: 1rem;
  --font-size-400: 1.25rem;
  --font-size-500: 1.5rem;
  --font-size-600: 2rem;
  --font-size-700: 2.5rem;
  --font-size-800: 3rem;
  --font-size-900: 3.5rem;
  --font-size-display-1: 4rem;
  --font-size-display-2: 4.5rem;
  --bold: 700;
  --semibold: 600;
  --normal: 400;
  --light: 300;
  --lighter: 200;
  /* Static font scale */
  --font-size-xs: var(--font-size-100);
  --font-size-sm: var(--font-size-200);
  --font-size-p: var(--font-size-300);
  --font-size-h6: var(--font-size-400);
  --font-size-h5: var(--font-size-500);
  --font-size-h4: var(--font-size-600);
  --font-size-h3: var(--font-size-700);
  --font-size-h2: var(--font-size-800);
  --font-size-h1: var(--font-size-900);
  /* Responsive font scale */
  --responsive-font-xs: var(--font-size-100), 1vw, var(--font-size-xs);
  --responsive-font-sm: var(--font-size-200), 1.5vw, var(--font-size-sm);
  --responsive-font-p: var(--font-size-300), 2vw, var(--font-size-p);
  --responsive-font-h6: var(--font-size-300), 2.5vw, var(--font-size-h6);
  --responsive-font-h5: var(--font-size-300), 3vw, var(--font-size-h5);
  --responsive-font-h4: var(--font-size-400), 3.5vw, var(--font-size-h4);
  --responsive-font-h3: var(--font-size-600), 3vw, var(--font-size-h3);
  --responsive-font-h2: var(--font-size-600), 4.5vw, var(--font-size-h2);
  --responsive-font-h1: var(--font-size-600), 5.5vw, var(--font-size-h1);
  --line-height-body: 1.6;
  --line-height-heading: 1.2;
  /**
  * =======================================================
  * Borders - Primitive
  * =======================================================
  **/
  /* Border Radius */
  --border-radius-0: 0px;
  --border-radius-sm: 4px;
  --border-radius-md: 12px;
  --border-radius-lg: 20px;
  --border-radius-full: 999px;
  --border-radius-default: var(--border-radius-sm);
  /* Border Width */
  --border-width-sm: 1px;
  --border-width-md: 2px;
  --border-width-lg: 4px;
  --border-width-default: var(--border-width-sm);
  /* border colors */
  --border-color-primary: var(--color-neutral-300);
  --border-color-secondary: var(--color-neutral-200);
  --border-color-tertiary: var(--brand-primary);
  /**
  * =======================================================
  * Shadows - Primitive
  * =======================================================
  **/
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
  /**
  * =======================================================
  * Spacing - Primitive
  * =======================================================
  **/
  --spacing: 4px;
  /* Base spacing unit */
  --space-0: 0;
  --space-1: calc(var(--spacing) * 1);
  --space-2: calc(var(--spacing) * 2);
  --space-3: calc(var(--spacing) * 3);
  --space-4: calc(var(--spacing) * 4);
  --space-5: calc(var(--spacing) * 5);
  --space-6: calc(var(--spacing) * 6);
  --space-7: calc(var(--spacing) * 7);
  --space-8: calc(var(--spacing) * 8);
  --space-9: calc(var(--spacing) * 9);
  --space-10: calc(var(--spacing) * 10);
  --space-11: calc(var(--spacing) * 11);
  --space-12: calc(var(--spacing) * 12);
  --space-13: calc(var(--spacing) * 13);
  --space-14: calc(var(--spacing) * 14);
  --space-15: calc(var(--spacing) * 15);
  --space-16: calc(var(--spacing) * 16);
  --space-17: calc(var(--spacing) * 17);
  --space-18: calc(var(--spacing) * 18);
  --space-19: calc(var(--spacing) * 19);
  --space-20: calc(var(--spacing) * 20);
  --space-21: calc(var(--spacing) * 21);
  --space-22: calc(var(--spacing) * 22);
  --space-23: calc(var(--spacing) * 23);
  --space-24: calc(var(--spacing) * 24);
  --space-25: calc(var(--spacing) * 25);
  --space-26: calc(var(--spacing) * 26);
  --space-27: calc(var(--spacing) * 27);
  --space-28: calc(var(--spacing) * 28);
  --space-28: calc(var(--spacing) * 28);
  --space-29: calc(var(--spacing) * 29);
  --space-30: calc(var(--spacing) * 30);
  --space-31: calc(var(--spacing) * 31);
  --space-32: calc(var(--spacing) * 32);
  /**
  * =======================================================
  * Heading - Component
  * =======================================================
  **/
  --heading-color-primary: var(--font-color-primary);
  --heading-color-secondary: var(--brand-primary);
  /**
  * =======================================================
  * Body Copy - Component
  * =======================================================
  **/
  --body-copy-color-primary: var(--font-color-secondary);
  --body-copy-color-secondary: var(--font-color-tertiary);
  /**
  * =======================================================
  * Button - Component
  * =======================================================
  **/
  /* Neutral Button Colors */
  --button-neutral-text-color: var(--color-neutral-700);
  --button-neutral-bg-color: var(--color-neutral-100);
  --button-neutral-bg-hover-color: var(--color-neutral-200);
  --button-neutral-text-hover-color: var(--color-neutral-700);
  /* Primary Button Colors */
  --button-primary-text-color: var(--action-primary-text);
  --button-primary-bg-color: var(--action-primary-bg);
  --button-primary-hover-text-color: var(--action-primary-text-hover);
  --button-primary-bg-hover-color: var(--action-primary-bg-hover);
  --button-primary-text-disabled-color: var(--action-primary-text);
  --button-primary-disabled-bg-color: var(--action-primary-bg);
  --button-primary-active-bg-color: var(--action-primary-bg);
  --button-primary-active-text-color: var(--action-primary-text);
  --button-primary-focus-outline-color: var(--action-primary-border-focus);
  /* Secondary Button Colors */
  --button-secondary-text-color: var(--action-secondary-text);
  --button-secondary-bg-color: var(--action-secondary-bg);
  --button-secondary-hover-text-color: var(--action-secondary-text-hover);
  --button-secondary-bg-hover-color: var(--action-secondary-bg-hover);
  --button-secondary-text-disabled-color: var(--action-secondary-text);
  --button-secondary-disabled-bg-color: var(--action-secondary-bg);
  --button-secondary-active-bg-color: var(--action-secondary-bg);
  --button-secondary-active-text-color: var(--action-secondary-text);
  --button-secondary-focus-outline-color: var(--action-secondary-border-focus);
  /* Accent Button Colors */
  --button-accent-text-color: var(--action-accent-text);
  --button-accent-bg-color: var(--action-accent-bg);
  --button-accent-hover-text-color: var(--action-accent-text-hover);
  --button-accent-bg-hover-color: var(--action-accent-bg-hover);
  --button-accent-text-disabled-color: var(--action-accent-text);
  --button-accent-disabled-bg-color: var(--action-accent-bg);
  --button-accent-active-bg-color: var(--action-accent-bg);
  --button-accent-active-text-color: var(--action-accent-text);
  --button-accent-focus-outline-color: var(--action-accent-border-focus);
  /**
  * =======================================================
  * Form Elements - Component
  * =======================================================
  **/
  --form-field-font-size: var(--font-size-p);
  --form-label-font-size: var(--font-size-sm);
  --text-input-padding: var(--space-2) var(--space-3);
  --text-input-border-radius: var(--border-radius-sm);
  --text-input-border-color: var(--border-color-primary);
  --text-input-bg-color: var(--color-neutral-50);
  --textarea-input-padding: var(--space-2) var(--space-3);
  --textarea-input-border-radius: var(--border-radius-sm);
  --textarea-input-border-color: var(--border-color-primary);
  --textarea-input-bg-color: var(--color-neutral-50);
  --select-input-border-radius: var(--border-radius-sm);
  --select-input-border-color: var(--border-color-primary);
  --select-input-padding: var(--space-2) var(--space-3);
  --select-input-focus-border-color: var(--action-primary-border-focus);
  /* Legacy aliases for existing components */
  --nav-color-brand-primary: var(--brand-primary);
  --nav-color-brand-secondary: var(--brand-secondary);
  --section-color-primary: var(--surface-color-primary);
  --section-color-secondary: var(--surface-color-secondary);
  --section-background-primary: var(--surface-color-primary);
  --section-background-secondary: var(--surface-color-secondary);
  --section-background-tertiary: var(--surface-color-tertiary);
  --color-danger: var(--color-red-500);
  --color-white: var(--color-neutral-50);
  --focus-outline-color: var(--button-primary-focus-outline-color);
  --font-color-reverse-primary: var(--color-neutral-50);
  --font-color-reverse-secondary: var(--color-neutral-200);
  --font-color-heading-primary: var(--heading-color-primary);
  --font-color-heading-secondary: var(--heading-color-secondary);
  --font-color-heading-reverse-primary: var(--color-neutral-50);
  --font-color-heading-reverse-secondary: var(--color-neutral-200);
  --button-neutral-hover-bg-color: var(--button-neutral-bg-hover-color);
  --button-neutral-hover-text-color: var(--button-neutral-text-hover-color);
  --button-primary-hover-bg-color: var(--button-primary-bg-hover-color);
  --button-primary-disabled-text-color: var(--button-primary-text-disabled-color);
  --button-secondary-disabled-text-color: var(--button-secondary-text-disabled-color);
  /* Section padding */
  --section-padding-sm: var(--space-8);
  --section-padding-md: var(--space-12);
  --section-padding-lg: var(--space-16);
  --section-padding-xl: var(--space-24);
  --section-padding-2xl: var(--space-32);
  /**
  * =======================================================
  * Navigation - Component
  * =======================================================
  **/
}

[data-theme=dark] {
  --font-color-primary: var(--color-neutral-50);
  --action-primary-bg: var(--color-blue-500);
  --action-primary-text: var(--color-neutral-50);
  --action-primary-border: var(--color-neutral-50);
  --action-primary-bg-hover: var(--color-blue-600);
  --action-primary-text-hover: var(--color-neutral-50);
  --action-primary-border-hover: var(--color-neutral-50);
  --action-primary-border-focus: var(--color-blue-500);
  background-color: var(--color-neutral-900);
  color: var(--font-color-primary);
}

body {
  font-family: var(--font-family-secondary);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-primary);
}

/** 
* =======================================================
* Button Utility Classes 
* =======================================================
**/
.btn {
  font-size: var(--font-size-p);
  font-weight: var(--semibold);
  background: var(--button-neutral-bg-color);
  color: var(--button-neutral-text-color);
  border-radius: var(--border-radius-sm);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--border-radius-full);
  border: none;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  width: max-content;
  display: inline-flex;
  align-items: center;
}
.btn:has(.btn-icon) {
  padding-right: var(--space-4);
}
.btn .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: var(--space-2);
}
.btn .btn-icon svg {
  width: var(--font-size-h6);
  height: var(--font-size-h6);
}
.btn:hover {
  background: var(--button-neutral-hover-bg-color);
  color: var(--button-neutral-hover-text-color);
}
.btn:focus-visible {
  outline: 2px solid var(--focus-outline-color);
  outline-offset: 2px;
}

.btn-primary {
  background-color: var(--button-primary-bg-color);
  color: var(--button-primary-text-color);
  border: 1px solid var(--button-primary-bg-color);
}
.btn-primary .btn-icon {
  color: var(--button-primary-bg-color);
  background-color: white;
  border-radius: var(--border-radius-full);
  padding: var(--space-1);
}
.btn-primary:hover {
  background-color: var(--button-primary-hover-bg-color);
  color: var(--button-primary-hover-text-color);
}
.btn-primary:disabled {
  background-color: var(--button-primary-disabled-bg-color);
  color: var(--button-primary-disabled-text-color);
  cursor: not-allowed;
}
.btn-primary:active {
  background-color: var(--button-primary-active-bg-color);
  color: var(--button-primary-active-text-color);
}
.btn-primary:focus-visible {
  outline: 2px solid var(--focus-outline-color);
  outline-offset: 2px;
}

.btn-primary-accent {
  background-color: var(--button-accent-bg-color);
  color: var(--button-accent-text-color);
}
.btn-primary-accent:hover {
  background-color: var(--button-accent-bg-hover-color);
  color: var(--button-accent-hover-text-color);
}
.btn-primary-accent:disabled {
  background-color: var(--button-accent-disabled-bg-color);
  color: var(--button-accent-text-disabled-color);
  cursor: not-allowed;
}
.btn-primary-accent:active {
  background-color: var(--button-accent-active-bg-color);
  color: var(--button-accent-active-text-color);
}
.btn-primary-accent:focus-visible {
  outline: 2px solid var(--focus-outline-color);
  outline-offset: 2px;
}

.btn-primary-accent-reverse {
  background-color: transparent;
  color: var(--button-accent-bg-color);
  border: 2px solid var(--button-accent-bg-color);
}
.btn-primary-accent-reverse:hover {
  background-color: var(--button-accent-bg-color);
  color: var(--button-accent-hover-text-color);
}
.btn-primary-accent-reverse:disabled {
  background-color: var(--button-accent-disabled-bg-color);
  color: var(--button-accent-text-disabled-color);
  cursor: not-allowed;
}
.btn-primary-accent-reverse:active {
  background-color: var(--button-accent-active-bg-color);
  color: var(--button-accent-active-text-color);
}
.btn-primary-accent-reverse:focus-visible {
  outline: 2px solid var(--focus-outline-color);
  outline-offset: 2px;
}

.btn-primary-reverse {
  background-color: transparent;
  color: var(--button-primary-bg-color);
  border: 2px solid var(--button-primary-bg-color);
}
.btn-primary-reverse:hover {
  background-color: var(--button-primary-bg-color);
  color: var(--button-primary-text-color);
}
.btn-primary-reverse:disabled {
  background-color: transparent;
  color: var(--button-primary-disabled-bg-color);
  border-color: var(--button-primary-disabled-bg-color);
  cursor: not-allowed;
}
.btn-primary-reverse:active {
  background-color: var(--button-primary-bg-color);
  color: var(--button-primary-text-color);
}
.btn-primary-reverse:focus-visible {
  outline: 2px solid var(--focus-outline-color);
  outline-offset: 2px;
}

/** 
* =======================================================
* Typography
* =======================================================
**/
p {
  line-height: var(--line-height-body);
  color: var(--body-copy-color-primary);
}

h1 {
  font-size: clamp(var(--responsive-font-h1));
  font-weight: var(--bold);
}

h2 {
  font-size: clamp(var(--responsive-font-h2));
  font-weight: var(--semibold);
}

h3 {
  font-size: clamp(var(--responsive-font-h3));
  font-weight: var(--semibold);
}

h4 {
  font-size: clamp(var(--responsive-font-h4));
  font-weight: var(--semibold);
}

h5 {
  font-size: clamp(var(--responsive-font-h5));
  font-weight: var(--semibold);
}

h6 {
  font-size: clamp(var(--responsive-font-h6));
  font-weight: var(--semibold);
}

/* Font Utility Classes */
.p {
  font-size: clamp(var(--responsive-font-p));
}

.h1 {
  font-size: clamp(var(--responsive-font-h1));
  font-weight: var(--bold);
}

.h2 {
  font-size: clamp(var(--responsive-font-h2));
  font-weight: var(--semibold);
}

.h3 {
  font-size: clamp(var(--responsive-font-h3));
  font-weight: var(--semibold);
}

.h4 {
  font-size: clamp(var(--responsive-font-h4));
  font-weight: var(--semibold);
}

.h5 {
  font-size: clamp(var(--responsive-font-h5));
  font-weight: var(--semibold);
}

.h6 {
  font-size: clamp(var(--responsive-font-h6));
  font-weight: var(--semibold);
}

/**
* =======================================================
* Menu Offset - Project Specific
* used for sections where the menu is fixed to the top and need to be offset
* =======================================================
**/
.home-menu-offset {
  padding-top: 160px !important; /* todo - make this a variable. Need to better calculate padding top */
}

.menu-offset {
  padding-top: 184px !important; /* todo - make this a variable. Need to better calculate padding top */
}

/**
* =======================================================
* Tailwind Overrides - Project Specific
* =======================================================
**/
:root {
  --container-width: 1100px;
  --container-padding: var(--space-8);
}

.container {
  max-width: calc(var(--container-width) + var(--container-padding));
  /* 1100px + horizontal space-8 */
  padding: 0 var(--container-padding);
  /* todo: maybe adjust this later. remove all manual styles in markup */
}

.container-fluid {
  max-width: calc(var(--container-width) + var(--container-padding));
  /* 1100px + horizontal space-8 */
  padding: 0 0;
}

/**
* =======================================================
* Swiper Overrides - Project Specific
* =======================================================
**/
.swiper-free-mode > .swiper-wrapper {
  transition-timing-function: linear !important;
}

/** 
* =======================================================
* Animations
* =======================================================
**/
/* Spinner Animation */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.spin {
  animation: spin 1s linear infinite;
}

@keyframes fadeIn-top {
  from {
    transform: translateY(-2px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.fadeIn-top {
  animation: fadeIn-top 0.2s ease-in-out forwards;
}

.fadeOut-up-scroll {
  animation-name: fadeIn-top;
  animation-direction: normal;
  animation-timeline: view();
  animation-range-start: 82%;
}

@keyframes fadeIn-left {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.fadeIn-left {
  animation: fadeIn-left 0.5s ease-in-out forwards;
}

@keyframes fadeIn-right {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.fadeIn-right {
  animation: fadeIn-right 0.5s ease-in-out forwards;
}

.index-page {
  --emphasis-color-teal: #6DC8BF;
  --emphasis-color-orange: #F15A22;
  --emphasis-color-yellow: #FDB913;
  --emphasis-color-purple: #7B78CC;
  --emphasis-color-cream: #EFE7D2;
}
.index-page .em-color-teal {
  color: var(--emphasis-color-teal);
  font-weight: var(--semibold);
}
.index-page .em-color-orange {
  color: var(--emphasis-color-orange);
  font-weight: var(--bold);
}
.index-page .em-color-yellow {
  color: var(--emphasis-color-yellow);
  font-weight: var(--bold);
}
.index-page .em-color-purple {
  color: var(--emphasis-color-purple);
  font-weight: var(--bold);
}
.index-page .em-color-cream {
  color: var(--emphasis-color-cream);
  font-weight: var(--bold);
}
.index-page {
  /* Hero Section */
}
.index-page .hero {
  background: var(--section-background-tertiary);
  padding-bottom: var(--section-padding-lg);
  padding-left: var(--space-0);
  padding-right: var(--space-0);
}
.index-page .hero .hero-content h1 {
  color: var(--font-color-heading-secondary);
  line-height: var(--line-height-heading);
}
.index-page .hero .hero-content .hero-subheading {
  font-size: clamp(var(--responsive-font-p));
  line-height: var(--line-height-body);
}
.index-page .hero .hero-content .hero-features {
  color: var(--brand-secondary);
}
.index-page .hero .hero-content .hero-features .hero-feature-icon svg path {
  fill: var(--brand-secondary);
}
.index-page .hero .hero-image {
  height: 100%;
}
.index-page .hero .hero-image .hero-img {
  display: block;
  width: 100%;
  height: clamp(120px, 44vw, 560px);
  object-fit: cover;
  border-top-left-radius: var(--border-radius-full);
  border-top-right-radius: var(--border-radius-full);
  border-bottom-left-radius: var(--border-radius-lg);
  border-bottom-right-radius: var(--border-radius-lg);
}
.index-page {
  /* Logo Strip Seciton */
}
.index-page .logo-strip-section img {
  height: 96px;
}
.index-page {
  /* Hero Stats Section */
}
.index-page .hero-stats {
  padding-top: var(--space-10);
}
.index-page .hero-stats .hero-stats-grid {
  text-align: center;
}
.index-page .hero-stats .hero-stats-grid .hero-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid var(--border-color-secondary);
  border-radius: var(--border-radius-md);
  padding: var(--space-4);
}
.index-page .hero-stats .hero-stats-grid .hero-stat-item svg {
  height: 64px;
  width: auto;
  color: var(--brand-primary);
}
.index-page .hero-stats .hero-stats-grid .hero-stat-item .stat-value {
  color: var(--font-color-heading-secondary);
  font-size: var(--font-size-600);
  font-weight: var(--bold);
  line-height: var(--line-height-heading);
}
.index-page .hero-stats .hero-stats-grid .hero-stat-item .stat-label {
  font-size: var(--font-size-200);
  font-weight: var(--semibold);
  line-height: var(--line-height-body);
}
@media (min-width: 48rem) and (max-width: 63.999rem) {
  .index-page .hero-stats .hero-stats-grid .hero-stat-item.hero-stat-item-hide-md { /* md only */
    display: none;
  }
}
.index-page {
  /* Faq Section */
}
.index-page .faq {
  padding: var(--section-padding-lg) 0;
}
.index-page .faq .faq-title {
  margin-bottom: var(--space-8);
}
.index-page .faq .faq-list {
  border-top: var(--border-width-default) solid var(--border-color-primary);
}
.index-page .faq .faq-item {
  border-bottom: var(--border-width-default) solid var(--border-color-primary);
}
.index-page .faq .faq-question {
  padding: var(--space-4) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-weight: var(--semibold);
  font-size: clamp(var(--responsive-font-p));
}
.index-page .faq .faq-question:hover {
  color: var(--brand-primary);
  text-decoration: underline;
}
.index-page .faq .faq-question .accordion-icon svg path {
  fill: var(--brand-secondary);
}
.index-page .faq .faq-answer .accordion-body {
  /* Force the answer to actually collapse at every breakpoint,
     overriding the desktop "overflow: visible" rule in _accordion.scss
     that keeps nav subnavs always visible. */
  overflow: hidden !important;
  line-height: var(--line-height-body);
}
.index-page .faq .faq-answer a {
  color: var(--brand-primary);
}
.index-page .faq .faq-answer a:hover {
  color: var(--brand-primary);
  text-decoration: underline;
}
.index-page .confidence-text-section {
  padding: var(--section-padding-lg) 0;
}
.index-page .confidence-text-section.confidence--home-1 {
  background-color: var(--surface-color-secondary);
  color: var(--font-color-primary);
  border-top: var(--border-width-md) solid var(--brand-primary);
  border-bottom: var(--border-width-md) solid var(--brand-primary);
}
.index-page .confidence-text-section.confidence--home-1 h2 {
  color: var(--font-color-heading-secondary);
}
.index-page {
  /* How It Works Section */
}
.index-page .how-it-works {
  background-color: var(--section-background-primary);
  padding: var(--section-padding-lg) 0;
}
.index-page .how-it-works .how-it-works-header {
  text-align: center;
  margin-bottom: var(--space-12);
}
.index-page .how-it-works .how-it-works-header h2 {
  line-height: var(--line-height-heading);
}
.index-page .how-it-works .how-it-works-header .how-it-works-subheading {
  line-height: var(--line-height-body);
  margin-top: var(--space-4);
}
.index-page .how-it-works .how-it-works-step {
  background-color: var(--color-white);
  padding: var(--space-4);
  border-radius: var(--border-radius-md);
  border: var(--border-width-sm) solid var(--border-color-secondary);
  display: flex;
  flex-direction: column;
  text-align: center;
}
.index-page .how-it-works .how-it-works-step .step-icon {
  width: 100%;
  height: 7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
  border-radius: var(--border-radius-sm);
  padding: var(--space-6);
}
.index-page .how-it-works .how-it-works-step .step-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.index-page .how-it-works .how-it-works-step .step-icon svg {
  color: var(--brand-primary);
}
.index-page .how-it-works .how-it-works-step h3 {
  color: var(--font-color-heading-secondary);
  line-height: var(--line-height-heading);
  margin-bottom: var(--space-5);
}
.index-page .how-it-works .how-it-works-step p {
  font-size: clamp(var(--responsive-font-p));
  line-height: var(--line-height-body);
}
.index-page .how-it-works .how-it-works-step .step-link {
  color: var(--brand-primary);
  font-weight: var(--semibold);
  text-decoration: underline;
}
.index-page .how-it-works .how-it-works-step .step-link:hover {
  color: var(--brand-secondary);
}
.index-page {
  /* Image Text Section */
}
.index-page .image-text-section {
  background-color: var(--section-background-primary);
  padding: var(--section-padding-lg) 0;
}
.index-page .image-text-section .image-text-image {
  height: 100%;
}
.index-page .image-text-section .image-text-image .section-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius-md);
}
.index-page .image-text-section .image-text-content h2 {
  color: var(--font-color-heading-secondary);
  line-height: var(--line-height-heading);
}
.index-page .image-text-section .image-text-content .image-text-subheading {
  font-size: clamp(var(--responsive-font-p));
  line-height: var(--line-height-body);
}
.index-page {
  /* Full Width Image Text Section */
}
.index-page .image-text-section-full {
  background-color: var(--section-background-primary);
}
.index-page .image-text-section-full .image-text-section-full-media {
  min-height: 20rem;
}
@media (min-width: 64rem) {
  .index-page .image-text-section-full .image-text-section-full-media {
    min-height: 34rem;
  }
}
.index-page .image-text-section-full .image-text-section-full-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.index-page .image-text-section-full .image-text-section-full-content-wrap {
  display: flex;
  align-items: center;
  padding: var(--space-10) var(--space-8);
}
@media (min-width: 48rem) {
  .index-page .image-text-section-full .image-text-section-full-content-wrap {
    padding: var(--space-12);
  }
}
@media (min-width: 64rem) {
  .index-page .image-text-section-full .image-text-section-full-content-wrap {
    padding: var(--space-14) var(--space-12) var(--space-14) var(--space-14);
  }
}
.index-page .image-text-section-full .image-text-section-full-content {
  max-width: 38rem; /* todo: look back into this */
}
.index-page .image-text-section-full .image-text-section-full-content h2 {
  color: var(--font-color-heading-secondary);
  line-height: var(--line-height-heading);
  margin-bottom: var(--space-6);
}
.index-page .image-text-section-full .image-text-section-full-content .image-text-section-full-subheading {
  font-size: clamp(var(--responsive-font-p));
  line-height: var(--line-height-body);
}
.index-page {
  /* Why Join Us Section */
}
.index-page .why-join-us {
  background-color: var(--section-background-primary);
  padding: var(--section-padding-lg) 0;
}
.index-page .why-join-us .why-join-us-header {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}
.index-page .why-join-us .why-join-us-header h2 {
  color: var(--font-color-heading-primary);
  line-height: var(--line-height-heading);
}
.index-page .why-join-us .why-join-us-header .why-join-us-subheading {
  font-size: clamp(var(--responsive-font-p));
  line-height: var(--line-height-body);
}
.index-page .why-join-us .why-join-us-point {
  background-color: var(--section-background-secondary);
  padding: var(--space-6);
  border-radius: var(--border-radius-sm);
  box-shadow: var(--shadow-md);
}
.index-page .why-join-us .why-join-us-point .why-join-us-icon {
  width: 100%;
  max-width: 80px;
  border-radius: var(--border-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2);
}
.index-page .why-join-us .why-join-us-point h3 {
  color: var(--font-color-heading-secondary);
  line-height: var(--line-height-heading);
}
.index-page .why-join-us .why-join-us-point p {
  font-size: clamp(var(--responsive-font-p));
  line-height: var(--line-height-body);
}
.index-page {
  /* CTA Banner Section */
}
.index-page .cta-banner {
  background-color: var(--brand-secondary);
  padding: var(--section-padding-lg) 0;
}
.index-page .cta-banner h2 {
  color: var(--font-color-reverse-primary);
  line-height: var(--line-height-heading);
}
.index-page .cta-banner .cta-banner-subheading {
  color: var(--font-color-reverse-secondary);
  font-size: clamp(var(--responsive-font-p));
  line-height: var(--line-height-body);
  max-width: 600px;
}
.index-page .cta-banner .cta-banner-btn {
  background-color: var(--color-neutral-50);
  color: var(--brand-primary);
  font-weight: var(--semibold);
}
.index-page .cta-banner .cta-banner-btn:hover {
  background-color: var(--color-neutral-100);
  color: var(--brand-primary);
}
.index-page .cta-banner .cta-banner-btn-secondary {
  background-color: transparent;
  color: var(--font-color-reverse-primary);
  border: var(--border-width-md) solid var(--font-color-reverse-primary);
}
.index-page .cta-banner .cta-banner-btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--font-color-reverse-primary);
}
.index-page {
  /* Other */
  /* Swiper overriedes for index page */
}
.index-page .swiper__component-container {
  display: none;
}
.index-page .swiper-slide {
  display: flex;
  justify-content: center;
}

.main-nav-wrapper {
  --nav-top-offset: var(--space-6);
  --navigation-border-radius: 60px;
  top: var(--nav-top-offset);
  transform: translateY(0);
  opacity: 1;
  transition: transform 0.5s ease;
  will-change: transform;
  z-index: 1;
}
.main-nav-wrapper .nav-expand {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s ease;
}
.main-nav-wrapper .nav-expand .nav-expand-body {
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .main-nav-wrapper .nav-expand .nav-expand-body {
    align-items: center;
  }
}
@media screen and (min-width: 768px) {
  .main-nav-wrapper .nav-expand .nav-expand-body {
    overflow: visible !important;
  }
}
.main-nav-wrapper.nav-hidden {
  transform: translateY(calc(-100% - var(--nav-top-offset)));
  opacity: 1;
  pointer-events: none;
}
.main-nav-wrapper.nav-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.main-nav-wrapper .main-nav-surface {
  background-color: transparent;
  border-radius: var(--navigation-border-radius);
  width: 100%;
  max-width: calc(var(--container-width) - var(--container-padding));
  margin: 0 auto;
  transition: background-color 0.3s ease;
}
.main-nav-wrapper .main-nav-surface:has(.nav-menu.show) {
  background-color: var(--color-white);
}
.main-nav-wrapper.nav-scrolled .main-nav-surface {
  background: var(--color-neutral-50);
  transition: background-color 0.3s ease;
}
.main-nav-wrapper .logo {
  width: 100%;
  max-width: 96px;
}
@media screen and (max-width: 767px) {
  .main-nav-wrapper .container {
    /* Remove container spacing for mobile */
  }
  .main-nav-wrapper .container:has(.nav-menu) {
    padding: 0 var(--space-0);
  }
}
.main-nav-wrapper .nav-item {
  position: relative;
  display: block;
  width: 100%;
  text-decoration: none;
  font-size: var(--responsive-font-h6);
}
.main-nav-wrapper .nav-item .nav-link {
  text-align: center;
  display: block;
  width: 100%;
  color: var(--brand-primary);
  font-weight: var(--semibold);
}
.main-nav-wrapper .nav-item .nav-link:hover {
  cursor: pointer;
  text-decoration: underline;
}
.main-nav-wrapper .nav-item .nav-link:hover .accordion-open {
  display: none;
}
.main-nav-wrapper .nav-item .nav-link:hover .accordion-close {
  display: flex;
}
@media screen and (max-width: 768px) {
  .main-nav-wrapper .nav-item .nav-link {
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--border-color-nav);
  }
  .main-nav-wrapper .nav-item .nav-link:hover .accordion-open {
    display: inherit;
  }
  .main-nav-wrapper .nav-item .nav-link:hover .accordion-close {
    display: none;
  }
}
.main-nav-wrapper .nav-item .accordion-icon svg {
  color: var(--brand-primary);
  font-size: var(--font-size-p);
}
.main-nav-wrapper .nav-item > .subnav {
  display: grid;
}
.main-nav-wrapper .nav-item > .subnav a {
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border-color-nav);
  width: 100%;
  text-align: center;
}
.main-nav-wrapper .nav-item > .subnav a:last-child {
  border-bottom: none;
}
.main-nav-wrapper .nav-item > .subnav {
  /* Desktop subnav styles */
}
@media screen and (min-width: 768px) {
  .main-nav-wrapper .nav-item > .subnav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0px;
    width: max-content;
    z-index: 20;
    /* Transparent spacer so the pointer stays over the hoverable
       element while crossing the visual gap to the panel below */
    padding-top: var(--space-3);
  }
  .main-nav-wrapper .nav-item > .subnav .nav-expand-body {
    background-color: var(--color-white);
    border: var(--border-width-sm) solid var(--border-color-nav);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-2);
  }
}
@media screen and (min-width: 768px) {
  .main-nav-wrapper .nav-item:hover > .subnav {
    display: flex;
  }
}

.accordion {
  display: grid;
  grid-template-rows: 0fr;
}
.accordion .accordion-body {
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .accordion .accordion-body {
    align-items: center;
  }
}
@media screen and (min-width: 768px) {
  .accordion .accordion-body {
    overflow: visible !important;
  }
}

/* 
 - use [data-accordion-expanded="true"] to target accordion triggers that expand
 - transition timing handled by javascript in accordion.component.js
*/
footer.site-footer {
  background-color: var(--section-color-primary);
  border-top: var(--border-width-default) solid var(--border-color-primary);
  /* Footer brand section */
}
footer.site-footer .footer-brand .footer-logo {
  width: auto;
  height: 80px;
}
footer.site-footer .footer-brand .footer-description {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-body);
  max-width: 400px;
}
footer.site-footer .footer-brand .footer-social {
  display: flex;
  gap: var(--space-2);
}
footer.site-footer .footer-brand .footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--border-radius-full);
  text-decoration: none;
  transition: background-color 0.2s ease;
}
footer.site-footer .footer-brand .footer-social a svg {
  width: 18px;
  height: 18px;
}
footer.site-footer .footer-brand .footer-social a:hover {
  background-color: var(--nav-color-brand-secondary);
}
footer.site-footer {
  /* Footer link columns */
}
footer.site-footer .footer-links .footer-links-title {
  font-size: var(--font-size-sm);
  font-weight: var(--bold);
}
footer.site-footer .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
footer.site-footer .footer-links a {
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: color 0.2s ease;
}
footer.site-footer .footer-links a:hover {
  color: var(--nav-color-brand-primary);
}
footer.site-footer {
  /* Footer contact section */
}
footer.site-footer .footer-contact .footer-contact-title {
  font-size: var(--font-size-sm);
  font-weight: var(--bold);
}
footer.site-footer .footer-contact .contact-location {
  margin-bottom: var(--space-4);
}
footer.site-footer .footer-contact .contact-location .location-address,
footer.site-footer .footer-contact .contact-location .location-phone {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-2);
}
footer.site-footer .footer-contact .contact-location .location-address svg,
footer.site-footer .footer-contact .contact-location .location-phone svg {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
  color: var(--brand-primary);
}
footer.site-footer .footer-contact .contact-location .location-address a,
footer.site-footer .footer-contact .contact-location .location-phone a {
  text-decoration: none;
}
footer.site-footer .footer-contact .contact-location .location-address a:hover,
footer.site-footer .footer-contact .contact-location .location-phone a:hover {
  text-decoration: underline;
}

/* Copyright section */
.site-copyright .copyright-text {
  font-size: var(--font-size-sm);
}

.contact-page {
  /* Page Header Section */
}
.contact-page .page-header {
  background-color: var(--section-background-secondary);
  padding: 0 0 var(--section-padding-2xl) 0;
}
.contact-page .page-header h1 {
  color: var(--font-color-heading-secondary);
  font-size: clamp(var(--responsive-font-h1));
  line-height: var(--line-height-heading);
  text-align: center;
}
.contact-page {
  /* Contact Content Section */
}
.contact-page .contact-content {
  background-color: var(--section-background-primary);
  padding: var(--section-padding-lg) 0;
}
.contact-page .contact-content .contact-form-wrapper {
  /* Space reserved for contact form */
  min-height: 400px;
}
.contact-page .contact-content .contact-details .contact-details-header h2 {
  color: var(--font-color-heading-secondary);
  font-size: clamp(var(--responsive-font-h3));
  line-height: var(--line-height-heading);
  margin-bottom: var(--space-3);
}
.contact-page .contact-content .contact-details .contact-details-header p {
  color: var(--text-color-secondary);
  font-size: clamp(var(--responsive-font-p));
  line-height: var(--line-height-body);
}
.contact-page .contact-cards .contact-card {
  background-color: var(--section-background-secondary);
  padding: var(--space-6);
  border-radius: var(--border-radius-sm);
}
.contact-page .contact-cards .contact-card .contact-card-header {
  margin-bottom: var(--space-4);
  border-bottom: var(--border-width) solid var(--border-color);
}
.contact-page .contact-cards .contact-card .contact-card-header h3 {
  color: var(--font-color-heading-secondary);
  font-size: clamp(var(--responsive-font-h5));
  line-height: var(--line-height-heading);
  margin-bottom: var(--space-2);
}
.contact-page .contact-cards .contact-card .contact-card-header .contact-name {
  color: var(--text-color-primary);
  font-size: var(--font-size-400);
  font-weight: var(--semibold);
  margin-bottom: var(--space-1);
}
.contact-page .contact-cards .contact-card .contact-card-header .contact-title {
  color: var(--text-color-secondary);
  font-size: var(--font-size-p);
  font-weight: var(--semibold);
  margin-bottom: var(--space-1);
}
.contact-page .contact-cards .contact-card .contact-card-header .contact-organization {
  color: var(--brand-primary);
  font-size: var(--font-size-p);
  font-weight: var(--semibold);
  margin-bottom: var(--space-1);
}
.contact-page .contact-cards .contact-card .contact-card-header .contact-department {
  color: var(--text-color-tertiary);
  font-size: var(--font-size-sm);
}
.contact-page .contact-cards .contact-card .contact-card-info .contact-info-item {
  align-items: center;
}
.contact-page .contact-cards .contact-card .contact-card-info .contact-info-item .contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-10);
  height: var(--space-10);
  flex-shrink: 0;
}
.contact-page .contact-cards .contact-card .contact-card-info .contact-info-item .contact-icon svg {
  width: var(--space-5);
  height: var(--space-5);
  color: var(--brand-primary);
}
.contact-page .contact-cards .contact-card .contact-card-info .contact-info-item .contact-info-content .contact-value {
  color: var(--text-color-primary);
  font-size: var(--font-size-p);
  font-weight: var(--semibold);
  text-decoration: none;
  line-height: var(--line-height-body);
}
.contact-page .contact-cards .contact-card .contact-card-info .contact-info-item .contact-info-content .contact-value:hover {
  color: var(--brand-primary);
}
.contact-page {
  /* Contact Form Section */
}
.contact-page .reo-assoc-form {
  /* Styles for inputs */
}
.contact-page .reo-assoc-form .text__input-group label {
  font-size: var(--form-label-font-size);
  color: var(--text-color-primary);
  font-weight: var(--semibold);
  margin-bottom: var(--space-2);
  display: flex;
  gap: var(--space-1);
  align-items: center;
}
.contact-page .reo-assoc-form .text__input-group input {
  width: 100%;
  padding: var(--text-input-padding);
  font-size: var(--form-field-font-size);
  border: var(--border-width-sm) solid var(--text-input-border-color);
  border-radius: var(--text-input-border-radius);
  background-color: var(--color-white);
  color: var(--text-color-primary);
}
.contact-page .reo-assoc-form .text__input-group input:focus {
  outline: 2px solid var(--focus-outline-color);
  outline-offset: 2px;
  border-color: var(--brand-primary);
}
.contact-page .reo-assoc-form .text__input-group input::placeholder {
  color: var(--text-color-tertiary);
}
.contact-page .reo-assoc-form .text__input-group svg {
  color: var(--color-danger);
}
.contact-page .reo-assoc-form {
  /* styles for textarea */
}
.contact-page .reo-assoc-form .textarea__input-group label {
  font-size: var(--form-label-font-size);
  color: var(--text-color-primary);
  font-weight: var(--semibold);
  margin-bottom: var(--space-2);
  display: block;
}
.contact-page .reo-assoc-form .textarea__input-group textarea {
  width: 100%;
  padding: var(--textarea-input-padding);
  font-size: var(--form-field-font-size);
  border: var(--border-width-sm) solid var(--textarea-input-border-color);
  border-radius: var(--textarea-input-border-radius);
  background-color: var(--color-white);
  color: var(--text-color-primary);
  min-height: 120px;
  resize: vertical;
}
.contact-page .reo-assoc-form .textarea__input-group textarea:focus {
  outline: 2px solid var(--focus-outline-color);
  outline-offset: 2px;
  border-color: var(--brand-primary);
}
.contact-page .reo-assoc-form .textarea__input-group textarea::placeholder {
  color: var(--text-color-tertiary);
}
.contact-page .reo-assoc-form .icon-component-spinner-container {
  width: 1rem;
}

.referrals-page {
  /* Page Header Section */
}
.referrals-page .page-header {
  background-color: var(--section-background-secondary);
  padding: 0 0 var(--section-padding-xl) 0;
}
.referrals-page .page-header h1 {
  color: var(--font-color-heading-secondary);
  font-size: clamp(var(--responsive-font-h1));
  line-height: var(--line-height-heading);
  text-align: center;
}
.referrals-page {
  /* Referrals Content Section */
}
.referrals-page .referrals-content {
  background-color: var(--section-background-primary);
  padding: var(--section-padding-lg) 0;
}
.referrals-page .referrals-content .referrals-intro {
  text-align: center;
  margin-bottom: var(--space-12);
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
}
.referrals-page .referrals-content .referrals-grid {
  /* Grid styling */
}
.referrals-page .referrals-content {
  /* Referral Card Styles */
}
.referrals-page .referrals-content .referral-card {
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}
.referrals-page .referrals-content .referral-card .referral-card-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: var(--space-4);
  text-decoration: none;
  cursor: pointer;
  padding: var(--space-6);
  border: 1px solid var(--border-color-secondary);
  border-radius: var(--border-radius-md);
  transition: all 0.2s ease;
}
.referrals-page .referrals-content .referral-card .referral-card-link:hover {
  border-color: var(--brand-primary);
}
.referrals-page .referrals-content .referral-card .referral-card-link:hover .referral-card-text {
  text-decoration: underline;
}
.referrals-page .referrals-content .referral-card .referral-card-link .referral-card-logo {
  width: 100%;
  max-width: 16rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-2) 0;
  height: 8rem;
}
.referrals-page .referrals-content .referral-card .referral-card-link .referral-card-logo img {
  max-width: 95%;
  max-height: 95%;
  object-fit: contain;
}
.referrals-page .referrals-content .referral-card .referral-card-link .referral-card-logo.reinhart-logo img {
  max-width: 70%;
  max-height: 70%;
}
.referrals-page .referrals-content .referral-card .referral-card-link .referral-card-text {
  color: var(--brand-primary);
  font-size: var(--font-size-400);
  text-align: center;
  transition: text-decoration 0.2s ease;
}
.referrals-page .referrals-content .referral-card .referral-card-divider {
  width: 100%;
  height: 1px;
  background-color: var(--border-color-primary);
}
.referrals-page .referrals-content .referral-card .referral-card-contact {
  width: 100%;
  text-align: center;
}
.referrals-page .referrals-content .referral-card .referral-card-contact .contact-or {
  color: var(--text-color-secondary);
  font-size: var(--font-size-p);
  font-weight: var(--semibold);
  margin-bottom: var(--space-4);
}
.referrals-page .referrals-content .referral-card .referral-card-contact .contact-person {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.referrals-page .referrals-content .referral-card .referral-card-contact .contact-person .contact-name {
  color: var(--font-color-primary);
  font-size: var(--font-size-400);
  font-weight: var(--semibold);
}
.referrals-page .referrals-content .referral-card .referral-card-contact .contact-person .contact-title {
  color: var(--body-copy-color-secondary);
  font-size: var(--font-size-p);
  font-weight: var(--normal);
}
.referrals-page .referrals-content .referral-card .referral-card-contact .contact-person .contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.referrals-page .referrals-content .referral-card .referral-card-contact .contact-person .contact-info .contact-value {
  color: var(--brand-primary);
  font-size: var(--font-size-p);
  font-weight: var(--semibold);
  text-decoration: none;
  transition: color 0.2s ease;
}
.referrals-page .referrals-content .referral-card .referral-card-contact .contact-person .contact-info .contact-value:hover {
  color: var(--brand-secondary);
  text-decoration: underline;
}
.referrals-page .referral-income-section {
  background: var(--surface-color-secondary);
  padding: var(--section-padding-xl) 0;
}
.referrals-page .referral-income-section .referral-income-header {
  margin: 0 auto var(--space-10);
  max-width: 52rem;
  text-align: center;
}
.referrals-page .referral-income-section .referral-income-header h2 {
  color: var(--font-color-heading-secondary);
  font-size: clamp(var(--responsive-font-h2));
  line-height: var(--line-height-heading);
  margin-bottom: var(--space-4);
}
.referrals-page .referral-income-section .referral-income-header p {
  margin: 0;
  color: var(--font-color-secondary);
  line-height: var(--line-height-body);
}
.referrals-page .referral-income-section .referral-income-list {
  display: grid;
  gap: var(--space-4);
}
.referrals-page .referral-income-section .referral-income-item {
  background-color: var(--surface-color-primary);
  border: 1px solid var(--border-color-secondary);
  border-radius: var(--border-radius-md);
  overflow: hidden;
}
.referrals-page .referral-income-section .referral-income-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: none;
  border: none;
  padding: var(--space-5) var(--space-6);
  text-align: left;
  cursor: pointer;
  color: var(--font-color-primary);
  font-size: clamp(var(--responsive-font-p));
  font-weight: var(--semibold);
  transition: color 0.2s ease;
}
.referrals-page .referral-income-section .referral-income-question:hover {
  color: var(--brand-primary);
}
.referrals-page .referral-income-section .referral-income-question .accordion-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.referrals-page .referral-income-section .referral-income-question .accordion-icon svg path {
  fill: var(--brand-secondary);
}
.referrals-page .referral-income-section .referral-income-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s ease;
}
.referrals-page .referral-income-section .referral-income-answer.show {
  grid-template-rows: 1fr;
}
.referrals-page .referral-income-section .referral-income-answer .accordion-body {
  /* Force the answer to actually collapse at every breakpoint */
  overflow: hidden !important;
  color: var(--font-color-secondary);
  line-height: var(--line-height-body);
}
.referrals-page .referral-income-section .referral-income-answer .accordion-body > div {
  padding: 0 var(--space-6) var(--space-6);
}
.referrals-page .referral-income-section .referral-income-answer .accordion-body p {
  margin: 0 0 var(--space-3);
  color: var(--font-color-secondary);
  line-height: var(--line-height-body);
}
.referrals-page .referral-income-section .referral-income-answer .accordion-body p:last-child {
  margin-bottom: 0;
}
.referrals-page .referral-income-section .referral-income-answer .accordion-body a {
  color: var(--brand-primary);
  text-decoration: none;
}
.referrals-page .referral-income-section .referral-income-answer .accordion-body a:hover {
  color: var(--brand-secondary);
  text-decoration: underline;
}
.referrals-page .referral-income-section .referral-income-answer .accordion-body strong {
  color: var(--font-color-primary);
}

/* Responsive adjustments */
@media (min-width: 1024px) {
  .referrals-page .referrals-content .referrals-grid {
    position: relative;
  }
  .referrals-page .referrals-content .referrals-grid::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--border-color-secondary);
    transform: translateX(-50%);
  }
}
.faq-page {
  /* Page Header Section */
}
.faq-page .page-header {
  background-color: var(--section-background-secondary);
  padding: var(--section-padding-lg) 0;
}
.faq-page .page-header h1 {
  color: var(--font-color-heading-secondary);
  font-size: clamp(var(--responsive-font-h1));
  line-height: var(--line-height-heading);
  text-align: center;
}
.faq-page {
  /* FAQ Content Section */
}
.faq-page .faq-content {
  background-color: var(--section-background-primary);
  padding: var(--section-padding-lg) 0;
}
.faq-page .faq-content .faq-grid {
  /* Grid styling handled by Tailwind */
}
.faq-page .faq-content .faq-category {
  background-color: var(--section-background-secondary);
  padding: var(--space-8);
  border-radius: var(--border-radius-md);
}
.faq-page .faq-content .faq-category.faq-category-full {
  grid-column: 1/-1; /* Span all columns */
}
.faq-page .faq-content .faq-category-title {
  color: var(--font-color-heading-secondary);
  font-size: clamp(var(--responsive-font-h3));
  line-height: var(--line-height-heading);
  margin-bottom: var(--space-6);
  font-weight: var(--bold);
}
.faq-page .faq-content .faq-list {
  border-top: var(--border-width) solid var(--border-color);
}
.faq-page .faq-content .faq-item {
  border-bottom: var(--border-width) solid var(--border-color);
}
.faq-page .faq-content .faq-question {
  padding: var(--space-4) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--font-color-primary);
  font-weight: var(--semibold);
  font-size: clamp(var(--responsive-font-p));
  transition: color 0.2s ease;
}
.faq-page .faq-content .faq-question:hover {
  color: var(--brand-primary);
}
.faq-page .faq-content .faq-question .accordion-icon svg path {
  fill: var(--brand-secondary);
}
.faq-page .faq-content .faq-answer .accordion-body {
  /* Force the answer to actually collapse at every breakpoint */
  overflow: hidden !important;
  color: var(--text-color-secondary);
  line-height: var(--line-height-body);
  font-size: clamp(var(--responsive-font-p));
}
.faq-page .faq-content .faq-answer .accordion-body p {
  color: var(--text-color-secondary);
  line-height: var(--line-height-body);
}

.payments-page .page-header {
  background-color: var(--section-background-secondary);
  padding: 0 0 var(--section-padding-2xl) 0;
}
.payments-page .page-header h1 {
  color: var(--font-color-heading-secondary);
  font-size: clamp(var(--responsive-font-h1));
  line-height: var(--line-height-heading);
  text-align: center;
}
.payments-page .payments-content {
  background-color: var(--section-background-primary);
  padding: var(--section-padding-lg) 0;
}
.payments-page .payments-content .payments-layout {
  align-items: start;
}
.payments-page .payments-content .payments-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.payments-page .payments-content .payments-info h2 {
  color: var(--font-color-heading-secondary);
  line-height: var(--line-height-heading);
  margin-bottom: var(--space-4);
}
.payments-page .payments-content .payments-info p {
  color: var(--text-color-secondary);
  font-size: clamp(var(--responsive-font-p));
  line-height: var(--line-height-body);
}
.payments-page .payments-content .payments-info .price-highlight {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.payments-page .payments-content .payments-info .price-highlight .price-highlight-label {
  color: var(--font-color-reverse-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.payments-page .payments-content .payments-info .price-highlight .price-highlight-amount {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}
.payments-page .payments-content .payments-info .price-highlight .price-highlight-amount .amount {
  color: var(--font-color-reverse-primary);
  font-family: var(--font-family-primary);
  font-size: clamp(var(--responsive-font-h2));
  font-weight: var(--bold);
  line-height: var(--line-height-heading);
}
.payments-page .payments-content .payments-info .price-highlight .price-highlight-amount .period {
  color: var(--font-color-reverse-secondary);
  font-size: var(--font-size-p);
  font-weight: var(--semibold);
}
.payments-page .payments-content .payments-info .price-highlight .price-highlight-note {
  margin: var(--space-2) 0 0;
  color: var(--font-color-reverse-secondary);
  font-size: var(--font-size-p);
  line-height: var(--line-height-body);
}
.payments-page .payments-content .payments-form-column .payments-form-shell {
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: var(--space-6);
  background-color: var(--color-white);
  min-height: 32rem;
}
.payments-page .payments-terms-section {
  background-color: var(--section-background-secondary);
  padding: var(--section-padding-lg) 0;
  text-align: center;
}
.payments-page .payments-terms-section h2 {
  color: var(--font-color-heading-secondary);
  line-height: var(--line-height-heading);
  margin-bottom: var(--space-6);
}
.payments-page .payments-terms-section .terms-list {
  margin: 0 auto;
  padding-left: 0;
  list-style-position: inside;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 56rem;
}
.payments-page .payments-terms-section .terms-list li {
  color: var(--font-color-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-body);
}

.education-page .page-header {
  background-color: var(--section-background-secondary);
  padding: 0 0 var(--section-padding-2xl) 0;
}
.education-page .page-header h1 {
  color: var(--font-color-heading-secondary);
  font-size: clamp(var(--responsive-font-h1));
  line-height: var(--line-height-heading);
  text-align: center;
}
.education-page .academy-intro-section {
  padding: var(--section-padding-lg) 0 var(--section-padding-lg) 0;
  background: linear-gradient(135deg, var(--surface-color-primary) 0%, var(--surface-color-secondary) 100%);
}
.education-page .academy-intro-section .academy-intro-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}
@media (min-width: 48rem) {
  .education-page .academy-intro-section .academy-intro-grid {
    grid-template-columns: 400px 1fr;
    gap: var(--space-12);
  }
}
@media (min-width: 64rem) {
  .education-page .academy-intro-section .academy-intro-grid {
    gap: var(--space-16);
  }
}
.education-page .academy-intro-section .academy-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-6);
}
.education-page .academy-intro-section .academy-logo img {
  max-width: 100%;
  height: auto;
  width: 100%;
  max-width: 350px;
  object-fit: contain;
}
.education-page .academy-intro-section .academy-description h1 {
  margin-bottom: var(--space-2);
  color: var(--font-color-heading-secondary);
}
.education-page .academy-intro-section .academy-description p {
  line-height: 1.7;
  color: var(--font-color-secondary);
}
.education-page .academy-intro-section .academy-description .body-large {
  font-weight: 500;
}
.education-page .academy-intro-section .academy-description .btn {
  margin-top: var(--space-4);
}
.education-page .continuing-education-section {
  padding: var(--section-padding-lg) 0;
  background: var(--surface-color-primary);
}
.education-page .continuing-education-section .contact-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 48rem) {
  .education-page .continuing-education-section .contact-info-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 64rem) {
  .education-page .continuing-education-section .contact-info-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-10);
  }
}
.education-page .continuing-education-section .contact-card {
  background: var(--surface-color-primary);
  padding: var(--space-8);
  border-radius: var(--border-radius-md);
  border: 1px solid var(--border-color-secondary);
  display: flex;
  flex-direction: column;
}
.education-page .continuing-education-section .contact-card h3 {
  margin-bottom: var(--space-10);
}
.education-page .continuing-education-section .contact-card .contact-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex-grow: 1;
}
.education-page .continuing-education-section .contact-card .contact-details p {
  line-height: 1.7;
  margin: 0;
  color: var(--font-color-secondary);
}
.education-page .continuing-education-section .contact-card .contact-details a {
  color: var(--font-color-accent);
  text-decoration: none;
  transition: color 0.2s ease;
}
.education-page .continuing-education-section .contact-card .contact-details a:hover {
  color: var(--font-color-heading-secondary);
  text-decoration: underline;
}
.education-page .continuing-education-section .contact-card .contact-details strong {
  color: var(--font-color-primary);
  display: block;
}
.education-page .continuing-education-section .contact-card .contact-details .academy-link {
  margin-top: auto;
  padding-top: var(--space-4);
}
.education-page .continuing-education-section .contact-card .contact-details .academy-link .btn {
  width: 100%;
  text-align: center;
}

.reoassoc-payment-form__component-container {
  /* Form Section Header */
}
.reoassoc-payment-form__component-container .form-section-title {
  font-size: clamp(var(--responsive-font-h4));
  color: var(--font-color-heading-secondary);
  line-height: var(--line-height-heading);
  margin-bottom: var(--space-6);
  font-weight: var(--semibold);
}
.reoassoc-payment-form__component-container {
  /* Modal Styles */
}
.reoassoc-payment-form__component-container .form__submit-section {
  border-color: var(--border-color-secondary);
}
.reoassoc-payment-form__component-container {
  /* Text Input Groups */
}
.reoassoc-payment-form__component-container .text__input-group {
  margin-bottom: var(--space-4);
}
.reoassoc-payment-form__component-container .text__input-group label {
  font-size: var(--form-label-font-size);
  color: var(--text-color-primary);
  font-weight: var(--semibold);
  margin-bottom: var(--space-2);
  display: flex;
  gap: var(--space-1);
  align-items: center;
}
.reoassoc-payment-form__component-container .text__input-group input {
  width: 100%;
  padding: var(--text-input-padding);
  font-size: var(--form-field-font-size);
  border: var(--border-width-sm) solid var(--text-input-border-color);
  border-radius: var(--text-input-border-radius);
  background-color: var(--color-white);
  color: var(--text-color-primary);
}
.reoassoc-payment-form__component-container .text__input-group input:focus {
  outline: 2px solid var(--focus-outline-color);
  outline-offset: 2px;
  border-color: var(--brand-primary);
}
.reoassoc-payment-form__component-container .text__input-group input::placeholder {
  color: var(--text-color-tertiary);
}
.reoassoc-payment-form__component-container .text__input-group input:disabled {
  background-color: var(--color-neutral-100);
  cursor: not-allowed;
}
.reoassoc-payment-form__component-container .text__input-group .input-error {
  border-color: var(--color-danger);
}
.reoassoc-payment-form__component-container .text__input-group .error-message {
  color: var(--color-danger);
  font-size: var(--font-size-sm);
  margin-top: var(--space-1);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.reoassoc-payment-form__component-container .text__input-group .error-message svg {
  width: 1rem;
  height: 1rem;
}
.reoassoc-payment-form__component-container .text__input-group svg {
  color: var(--color-danger);
}
.reoassoc-payment-form__component-container .card-input-icon__component-container {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}
.reoassoc-payment-form__component-container {
  /* Select Dropdown Groups */
}
.reoassoc-payment-form__component-container .select__input-group {
  margin-bottom: var(--space-5);
}
.reoassoc-payment-form__component-container .select__input-group label {
  font-size: var(--form-label-font-size);
  color: var(--text-color-primary);
  font-weight: var(--semibold);
  margin-bottom: var(--space-2);
  display: block;
}
.reoassoc-payment-form__component-container .select__input-group select {
  width: 100%;
  padding: var(--select-input-padding);
  font-size: var(--form-field-font-size);
  border: var(--border-width-sm) solid var(--select-input-border-color);
  border-radius: var(--select-input-border-radius);
  background-color: var(--color-white);
  color: var(--text-color-primary);
  cursor: pointer;
}
.reoassoc-payment-form__component-container .select__input-group select:focus {
  outline: 2px solid var(--focus-outline-color);
  outline-offset: 2px;
  border-color: var(--brand-primary);
}
.reoassoc-payment-form__component-container .select__input-group select:disabled {
  background-color: var(--color-neutral-100);
  cursor: not-allowed;
}
.reoassoc-payment-form__component-container {
  /* Textarea Groups */
}
.reoassoc-payment-form__component-container .textarea__input-group {
  margin-bottom: var(--space-5);
}
.reoassoc-payment-form__component-container .textarea__input-group label {
  font-size: var(--form-label-font-size);
  color: var(--text-color-primary);
  font-weight: var(--semibold);
  margin-bottom: var(--space-2);
  display: block;
}
.reoassoc-payment-form__component-container .textarea__input-group textarea {
  width: 100%;
  padding: var(--textarea-input-padding);
  font-size: var(--form-field-font-size);
  border: var(--border-width-sm) solid var(--textarea-input-border-color);
  border-radius: var(--textarea-input-border-radius);
  background-color: var(--color-white);
  color: var(--text-color-primary);
  min-height: 120px;
  resize: vertical;
}
.reoassoc-payment-form__component-container .textarea__input-group textarea:focus {
  outline: 2px solid var(--focus-outline-color);
  outline-offset: 2px;
  border-color: var(--brand-primary);
}
.reoassoc-payment-form__component-container .textarea__input-group textarea::placeholder {
  color: var(--text-color-tertiary);
}
.reoassoc-payment-form__component-container .textarea__input-group textarea:disabled {
  background-color: var(--color-neutral-100);
  cursor: not-allowed;
}
.reoassoc-payment-form__component-container .radio__input-group h3 {
  font-size: var(--form-label-font-size);
  font-weight: var(--semibold);
  margin-bottom: var(--space-2);
}
.reoassoc-payment-form__component-container .radio__input-group .form-component_radio-input-options {
  display: flex;
  gap: var(--space-4);
}
.reoassoc-payment-form__component-container .radio__input-group input {
  display: none;
}
.reoassoc-payment-form__component-container .radio__input-group label {
  display: block;
}
.reoassoc-payment-form__component-container .radio__input-group label:hover {
  cursor: pointer;
}
.reoassoc-payment-form__component-container .radio__input-group input:not(:checked) + label {
  background-color: var(--surface-color-secondary);
  border: 1px solid var(--border-color-primary);
}
.reoassoc-payment-form__component-container .radio__input-group input:checked + label {
  background-color: var(--brand-primary);
  color: var(--color-white);
}
.reoassoc-payment-form__component-container .radio__input-group label {
  padding: var(--space-3) var(--space-4);
  border: var(--border-width-sm) solid var(--border-color);
  border-radius: var(--border-radius-sm);
}
.reoassoc-payment-form__component-container {
  /* Grid Layout for Forms */
}
.reoassoc-payment-form__component-container .form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 48rem) {
  .reoassoc-payment-form__component-container .form-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.reoassoc-payment-form__component-container .form-grid .form-grid-full {
  grid-column: 1/-1;
}
.reoassoc-payment-form__component-container {
  /* Form Row Layout */
}
.reoassoc-payment-form__component-container .form-row {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.reoassoc-payment-form__component-container .form-row > * {
  flex: 1;
}
.reoassoc-payment-form__component-container {
  /* Form Actions */
}
.reoassoc-payment-form__component-container .form-actions {
  margin-top: var(--space-6);
  display: flex;
  gap: var(--space-4);
  justify-content: flex-end;
}
.reoassoc-payment-form__component-container .form-actions .btn {
  min-width: 120px;
}
.reoassoc-payment-form__component-container {
  /* Helper Text */
}
.reoassoc-payment-form__component-container .form-helper-text {
  color: var(--text-color-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-body);
  margin-bottom: var(--space-4);
}
.reoassoc-payment-form__component-container {
  /* Required Indicator */
}
.reoassoc-payment-form__component-container .required-indicator {
  color: var(--color-danger);
  margin-left: var(--space-1);
}
.reoassoc-payment-form__component-container {
  /* Checkbox Groups */
}
.reoassoc-payment-form__component-container .checkbox__input-group {
  margin-bottom: var(--space-5);
}
.reoassoc-payment-form__component-container .checkbox__input-group label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--form-field-font-size);
  color: var(--text-color-primary);
  cursor: pointer;
}
.reoassoc-payment-form__component-container .checkbox__input-group input[type=checkbox] {
  width: 1.125rem;
  height: 1.125rem;
  cursor: pointer;
}
.reoassoc-payment-form__component-container .checkbox__input-group input[type=checkbox]:focus {
  outline: 2px solid var(--focus-outline-color);
  outline-offset: 2px;
}
.reoassoc-payment-form__component-container {
  /* Radio Groups */
}
.reoassoc-payment-form__component-container .radio__input-group {
  margin-bottom: var(--space-5);
}
.reoassoc-payment-form__component-container .radio__input-group .radio-label {
  font-size: var(--form-label-font-size);
  color: var(--text-color-primary);
  font-weight: var(--semibold);
  margin-bottom: var(--space-3);
  display: block;
}
.reoassoc-payment-form__component-container .radio__input-group .radio-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.reoassoc-payment-form__component-container .radio__input-group .radio-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.reoassoc-payment-form__component-container .radio__input-group .radio-option input[type=radio] {
  width: 1.125rem;
  height: 1.125rem;
  cursor: pointer;
}
.reoassoc-payment-form__component-container .radio__input-group .radio-option input[type=radio]:focus {
  outline: 2px solid var(--focus-outline-color);
  outline-offset: 2px;
}
.reoassoc-payment-form__component-container .radio__input-group .radio-option label {
  font-size: var(--form-field-font-size);
  color: var(--text-color-primary);
  cursor: pointer;
}
.reoassoc-payment-form__component-container {
  /* Form Fieldset */
}
.reoassoc-payment-form__component-container fieldset {
  border: var(--border-width-sm) solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}
.reoassoc-payment-form__component-container fieldset legend {
  font-size: var(--form-label-font-size);
  color: var(--font-color-heading-secondary);
  font-weight: var(--semibold);
  padding: 0 var(--space-2);
}
.reoassoc-payment-form__component-container .icon-component-spinner-container {
  width: 1rem;
}
.reoassoc-payment-form__component-container {
  /* Success Message */
}
.reoassoc-payment-form__component-container .form-success-message {
  background-color: var(--color-neutral-100);
  border-left: 4px solid var(--brand-primary);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  border-radius: var(--border-radius-sm);
}
.reoassoc-payment-form__component-container .form-success-message p {
  color: var(--text-color-primary);
  font-size: var(--form-field-font-size);
  line-height: var(--line-height-body);
}
.reoassoc-payment-form__component-container {
  /* Error Message */
}
.reoassoc-payment-form__component-container .form-error-message {
  background-color: var(--color-neutral-100);
  border-left: 4px solid var(--color-danger);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  border-radius: var(--border-radius-sm);
}
.reoassoc-payment-form__component-container .form-error-message p {
  color: var(--color-danger);
  font-size: var(--form-field-font-size);
  line-height: var(--line-height-body);
}

/* Payment Confirmation Summary (inside modal) */
.reoassoc-payment-form__confirm .reoassoc-payment-form__confirm-section {
  margin-bottom: var(--space-6);
}
.reoassoc-payment-form__confirm .reoassoc-payment-form__confirm-section h2 {
  font-size: var(--responsive-font-h5);
  font-weight: var(--semibold);
  color: var(--font-color-heading-secondary);
  margin-bottom: var(--space-2);
}
.reoassoc-payment-form__confirm .reoassoc-payment-form__confirm-section p {
  color: var(--text-color-primary);
  font-size: var(--form-field-font-size);
  line-height: var(--line-height-body);
  margin: 0;
}
.reoassoc-payment-form__confirm .reoassoc-payment-form__confirm-label {
  color: var(--text-color-tertiary);
}
.reoassoc-payment-form__confirm .reoassoc-payment-form__confirm-amount {
  color: var(--color-green-500);
  font-size: var(--responsive-font-h4);
  font-weight: var(--semibold);
}

.modal-component-container {
  display: flex;
  align-items: center;
}
.modal-component-container svg {
  height: auto;
}
.modal-component-container .modal-component-x-button:hover {
  cursor: pointer;
}
.modal-component-container .modal-component__header {
  justify-content: end;
}

.business-cards-page .page-header {
  background-color: var(--section-background-secondary);
  padding: 0 0 var(--section-padding-2xl) 0;
}
.business-cards-page .page-header h1 {
  color: var(--font-color-heading-secondary);
  font-size: clamp(var(--responsive-font-h1));
  line-height: var(--line-height-heading);
  text-align: center;
}
.business-cards-page .business-cards-content {
  background-color: var(--section-background-primary);
  padding: var(--section-padding-lg) 0 var(--section-padding-lg);
}
.business-cards-page .business-cards-content .business-cards-intro {
  margin: 0 auto var(--space-16);
  max-width: 56rem;
  text-align: center;
}
.business-cards-page .business-cards-content .business-cards-intro p {
  color: var(--font-color-secondary);
  font-size: clamp(var(--responsive-font-p));
  line-height: var(--line-height-body);
}
.business-cards-page .business-cards-content .business-cards-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.business-cards-page .business-cards-content .pricing-card,
.business-cards-page .business-cards-content .order-card,
.business-cards-page .business-cards-content .portal-card {
  background-color: var(--surface-color-primary);
  border: 1px solid var(--border-color-secondary);
  border-radius: var(--border-radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
}
.business-cards-page .business-cards-content .pricing-card,
.business-cards-page .business-cards-content .order-card,
.business-cards-page .business-cards-content .portal-card,
.business-cards-page .business-cards-content .business-card-preview {
  width: 100%;
}
.business-cards-page .business-cards-content .pricing-card h2,
.business-cards-page .business-cards-content .pricing-card .h4 {
  margin-bottom: var(--space-6);
  color: var(--font-color-heading-secondary);
}
.business-cards-page .business-cards-content .pricing-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.business-cards-page .business-cards-content .pricing-list .price-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-color-secondary);
  color: var(--font-color-primary);
  font-size: var(--font-size-p);
}
.business-cards-page .business-cards-content .pricing-list .price-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.business-cards-page .business-cards-content .pricing-list .price-item strong {
  color: var(--font-color-heading-secondary);
  font-weight: var(--bold);
}
.business-cards-page .business-cards-content .order-card h2,
.business-cards-page .business-cards-content .order-card .h4 {
  margin-bottom: var(--space-4);
  color: var(--font-color-heading-secondary);
}
.business-cards-page .business-cards-content .order-card p {
  margin: 0 0 var(--space-6);
  color: var(--font-color-secondary);
  line-height: var(--line-height-body);
}
.business-cards-page .business-cards-content .portal-card .portal-label {
  margin: 0 0 var(--space-3);
  color: var(--font-color-heading-secondary);
  font-weight: var(--semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.business-cards-page .business-cards-content .portal-card .portal-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.business-cards-page .business-cards-content .portal-card .portal-info p {
  margin: 0;
  color: var(--font-color-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.business-cards-page .business-cards-content .portal-card .portal-info p span {
  font-weight: var(--semibold);
  color: var(--font-color-secondary);
}
.business-cards-page .business-cards-content .business-card-preview-wrapper {
  display: flex;
}
.business-cards-page .business-cards-content .business-card-preview {
  background-color: var(--surface-color-primary);
  border: 1px solid var(--border-color-secondary);
  border-radius: var(--border-radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  height: fit-content;
}
.business-cards-page .business-cards-content .business-card-preview img {
  display: block;
  width: 100%;
  max-width: 42rem;
  height: auto;
}

.affiliates-page {
  /* Page Header Section */
}
.affiliates-page .page-header {
  background-color: var(--section-background-secondary);
  padding: 0 0 var(--section-padding-2xl) 0;
}
.affiliates-page .page-header h1 {
  color: var(--font-color-heading-secondary);
  font-size: clamp(var(--responsive-font-h1));
  line-height: var(--line-height-heading);
  text-align: center;
}
.affiliates-page {
  /* Affiliates Intro Section */
}
.affiliates-page .affiliates-intro-section {
  background-color: var(--surface-color-primary);
  padding: var(--section-padding-lg) 0;
}
.affiliates-page .affiliates-intro-section .affiliates-intro {
  max-width: 56rem;
  text-align: center;
}
.affiliates-page .affiliates-intro-section .affiliates-benefits {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 56rem;
}
.affiliates-page .affiliates-intro-section .affiliate-benefit {
  justify-content: center;
  color: var(--brand-secondary);
  font-weight: var(--semibold);
  text-align: center;
}
.affiliates-page .affiliates-intro-section .affiliate-benefit .affiliate-benefit-icon {
  flex-shrink: 0;
}
.affiliates-page .affiliates-intro-section .affiliate-benefit .affiliate-benefit-icon svg path {
  fill: var(--brand-secondary);
}
.affiliates-page {
  /* Affiliates Grid Section */
}
.affiliates-page .affiliates-grid-section {
  background-color: var(--surface-color-primary);
  padding: 0 0 var(--section-padding-lg) 0;
}
.affiliates-page .affiliates-grid-section .affiliate-card {
  position: relative;
  background-color: var(--surface-color-primary);
  border: 1px solid var(--border-color-secondary);
  border-radius: var(--border-radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  height: 100%;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease;
}
.affiliates-page .affiliates-grid-section .affiliate-card:hover {
  border-color: var(--brand-primary);
}
.affiliates-page .affiliates-grid-section .affiliate-category {
  align-self: flex-start;
  background-color: var(--action-secondary-bg);
  color: var(--brand-primary);
  font-size: var(--font-size-100);
  font-weight: var(--semibold);
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--border-radius-full);
}
.affiliates-page .affiliates-grid-section .affiliate-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90px;
}
.affiliates-page .affiliates-grid-section .affiliate-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.affiliates-page .affiliates-grid-section .affiliate-divider {
  width: 100%;
  height: 1px;
  background-color: var(--border-color-secondary);
}
.affiliates-page .affiliates-grid-section .affiliate-body h3 {
  margin-bottom: var(--space-3);
  color: var(--font-color-heading-secondary);
}
.affiliates-page .affiliates-grid-section .affiliate-body p {
  margin: 0;
  color: var(--font-color-secondary);
  line-height: var(--line-height-body);
}
.affiliates-page {
  /* Affiliates CTA Section */
}
.affiliates-page .affiliates-cta-section {
  background-color: var(--brand-secondary);
  padding: var(--section-padding-lg) 0;
}
.affiliates-page .affiliates-cta-section h2 {
  color: var(--font-color-reverse-primary);
  line-height: var(--line-height-heading);
}
.affiliates-page .affiliates-cta-section .affiliates-cta-subheading {
  color: var(--font-color-reverse-secondary);
  font-size: clamp(var(--responsive-font-p));
  line-height: var(--line-height-body);
  max-width: 600px;
}
.affiliates-page .affiliates-cta-section .affiliates-cta-btn {
  background-color: var(--color-neutral-50);
  color: var(--brand-primary);
  font-weight: var(--semibold);
}
.affiliates-page .affiliates-cta-section .affiliates-cta-btn:hover {
  background-color: var(--color-neutral-100);
  color: var(--brand-primary);
}

.licensing-page .page-header {
  background-color: var(--section-background-secondary);
  padding: 0 0 var(--section-padding-2xl) 0;
}
.licensing-page .page-header h1 {
  color: var(--font-color-heading-secondary);
  font-size: clamp(var(--responsive-font-h1));
  line-height: var(--line-height-heading);
  text-align: center;
}
.licensing-page .licensing-content {
  background-color: var(--section-background-primary);
  padding: var(--section-padding-lg) 0;
}
.licensing-page .licensing-content .licensing-copy {
  max-width: 48rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.licensing-page .licensing-content .licensing-copy h2 {
  color: var(--font-color-heading-secondary);
  font-size: clamp(var(--responsive-font-h4));
  line-height: var(--line-height-heading);
  margin-top: var(--space-4);
}
.licensing-page .licensing-content .licensing-copy p {
  color: var(--font-color-secondary);
  line-height: var(--line-height-body);
  margin: 0;
}
.licensing-page .licensing-content .licensing-copy ul {
  margin: 0;
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style-type: disc;
}
.licensing-page .licensing-content .licensing-copy ul li {
  color: var(--font-color-secondary);
  line-height: var(--line-height-body);
}
.licensing-page .licensing-content .licensing-copy a {
  color: var(--font-color-accent);
  text-decoration: none;
}
.licensing-page .licensing-content .licensing-copy a:hover {
  color: var(--brand-secondary);
  text-decoration: underline;
}
.licensing-page .licensing-content .licensing-copy strong {
  color: var(--font-color-primary);
}

/** 
====================================================================== 
* Popup Message Reccomended Styles
======================================================================
**/
.pm-component-container {
  background-color: transparent;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pm-component-container.pm-component-container--toast {
  position: fixed;
  bottom: var(--space-10);
  left: 0px;
  height: 0px;
}
.pm-component-container.pm-component-container--inline {
  position: relative;
  width: 100%;
}
.pm-component-container .pm-component-content-container {
  display: grid;
  grid-template-columns: 11fr auto;
  align-items: center;
  width: 500px;
  background-color: var(--color-white);
  border: var(--border-width-sm) solid var(--border-color-primary);
  padding: var(--space-2);
  border-radius: var(--border-radius-sm);
  box-shadow: var(--shadow-md);
}
.pm-component-container .pm-main-content ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
}
.pm-component-container .pm-main-content.pm-message-error {
  color: var(--color-danger, #b3261e);
}
.pm-component-container .pm-main-content.pm-message-warning {
  color: var(--color-warning, #8a6100);
}
.pm-component-container .pm-main-content.pm-message-ok {
  color: var(--color-text, #1f1f1f);
}
.pm-component-container .pm-main-content.pm-message-success {
  color: var(--color-success, #146c2e);
}

/*# sourceMappingURL=main.css.map */