/**
 * BARBRI.com Redesign - Main Stylesheet
 *
 * Combined site with product-first navigation structure.
 * Based on pe-site-prototype design patterns.
 *
 * FONTS: Bitter (headings), Nunito (body) - NO EXCEPTIONS
 * SPACING: 8px grid
 */

@import url('/css/variables.css');

/* ===========================================
   RESET & BASE
   =========================================== */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    background-color: white;
    overflow-x: hidden; /* Prevent horizontal scroll from 100vw mega-menus */
}

button,
input,
select,
textarea {
    font-family: inherit;
}

/* Hide native search input clear button */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

input[type="search"]::-ms-clear,
input[type="search"]::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

/* ===========================================
   TYPOGRAPHY
   =========================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-primary);  /* BARBRI Blue - all headers */
}

h1 {
    font-size: var(--font-size-3xl);
}

h2 {
    font-size: var(--font-size-2xl);
}

h3 {
    font-size: var(--font-size-xl);
}

h4 {
    font-size: var(--font-size-lg);
}

p {
    margin-bottom: var(--space-3);
}

a {
    color: var(--color-link);
    text-decoration: none;
    transition: var(--transition-colors);
}

a:hover {
    color: var(--color-link-hover);
    /* No underline on hover per design decision */
}

/* ===========================================
   ACCESSIBILITY - Focus Styles
   WCAG 2.1 AA requires visible focus indicators
   =========================================== */

/* Global focus-visible styles for all interactive elements */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Remove default outline only when focus-visible is supported */
:focus:not(:focus-visible) {
    outline: none;
}

/* Links - visible focus ring */
a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Buttons - visible focus ring */
button:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(42, 84, 136, 0.25);
}

/* Form inputs - visible focus ring */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 0;
    border-color: var(--color-primary);
}

/* Dark mode header - light focus ring for visibility */
body.header-dark-mode .global-header a:focus-visible,
body.header-dark-mode .global-header button:focus-visible {
    outline-color: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25);
}

/* Skip link for keyboard users */
.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    z-index: 10000;
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
}

.skip-link:focus {
    top: var(--space-2);
}

/* ===========================================
   LAYOUT
   =========================================== */

.container {
    width: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.container-narrow {
    max-width: var(--content-max-width-narrow);
}

.container-wide {
    max-width: var(--content-max-width-wide);
}

/* ===========================================
   ANNOUNCEMENT & PROMO BANNERS
   =========================================== */

/* System Announcement Banner - Top of page, site-wide */
.announcement-banner {
    --announcement-height: 36px;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    padding: var(--space-2) var(--space-4);
    text-align: center;
    font-size: var(--font-size-sm);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--announcement-height);
}

.announcement-icon {
    font-size: 18px;
    opacity: 0.9;
}

.announcement-banner a {
    color: var(--color-text-inverse);
    text-decoration: underline;
    font-weight: var(--font-weight-semibold);
}

.announcement-banner a:hover {
    opacity: 0.9;
}

.announcement-banner-dismiss {
    position: absolute;
    right: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-text-inverse);
    cursor: pointer;
    padding: var(--space-1);
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.announcement-banner-dismiss:hover {
    opacity: 1;
}

.announcement-banner-dismiss .material-symbols-outlined {
    font-size: 18px;
}

/* Variant: Warning/Alert */
.announcement-banner-warning {
    background: #f59e0b;
}

/* Variant: Success */
.announcement-banner-success {
    background: var(--color-success);
}

/* Variant: Info (lighter) */
.announcement-banner-info {
    background: var(--color-primary-tint);
    color: var(--color-text-primary);
}

.announcement-banner-info a {
    color: var(--color-primary);
}

/* Contextual Promo Banner - Below subheader, page-specific */
.promo-banner {
    background: #fef9e7;
    border-bottom: 1px solid #f5e6b3;
    padding: var(--space-2) var(--space-4);
}

.promo-banner .container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.promo-banner-content {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.promo-banner-icon {
    width: 40px;
    height: 40px;
    background: var(--color-primary);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.promo-banner-icon .material-symbols-outlined {
    color: var(--color-text-inverse);
    font-size: 20px;
}

.promo-badge {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
}

.promo-coupon {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

.promo-coupon strong {
    font-family: monospace;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: #1a1a1a;
    background: #fff;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    border: 1px dashed #666;
}

.promo-banner-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

.promo-banner-text strong {
    color: var(--color-primary-dark);
}

.promo-banner .btn {
    flex-shrink: 0;
}

/* Variant: Highlight/Sale */
.promo-banner-highlight {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}

/* Variant: Dark */
.promo-banner-dark {
    background: var(--color-primary-dark);
    border-bottom: none;
}

.promo-banner-dark .promo-banner-text {
    color: var(--color-text-inverse);
}

.promo-banner-dark .promo-banner-text strong {
    color: var(--color-text-inverse);
}

.promo-banner-dark .promo-banner-icon {
    background: rgba(255, 255, 255, 0.2);
}

/* Featured Course Card - Base styles */
.featured-course {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: var(--radius-lg);
    color: var(--color-text-inverse);
    margin-bottom: var(--space-4);
}

.featured-course-inner {
    display: flex;
    align-items: center;
}

.featured-course-content {
    flex: 1;
}

.featured-course-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-text-inverse);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--radius-full);
}

.featured-course-title {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold);
    margin: 0;
    color: var(--color-text-inverse);
}

.featured-course-meta {
    display: flex;
    flex-wrap: wrap;
    opacity: 0.85;
}

.featured-course-meta-item {
    display: flex;
    align-items: center;
}

.featured-course-description {
    line-height: 1.5;
    opacity: 0.9;
}

.featured-course-ctas {
    display: flex;
}

.featured-course .btn-primary {
    background: white;
    color: var(--color-primary);
}

.featured-course .btn-primary:hover {
    background: var(--color-primary-tint-hover);
}

.featured-course .btn-secondary {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--color-text-inverse);
}

.featured-course .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.8);
}

.featured-course-visual {
    flex-shrink: 0;
}

.featured-course-thumbnail {
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Featured Course - Small (sm) - Compact inline banner */
.featured-course-sm {
    padding: var(--space-3) var(--space-4);
}

.featured-course-sm .featured-course-inner {
    gap: var(--space-4);
}

.featured-course-sm .featured-course-badge {
    font-size: 9px;
    padding: 2px var(--space-2);
    margin-bottom: var(--space-1);
}

.featured-course-sm .featured-course-badge .material-symbols-outlined {
    font-size: 10px;
}

.featured-course-sm .featured-course-title {
    font-size: var(--font-size-base);
    margin-bottom: var(--space-1);
}

.featured-course-sm .featured-course-meta {
    gap: var(--space-2);
    font-size: 11px;
    margin-bottom: 0;
}

.featured-course-sm .featured-course-meta-item {
    gap: 2px;
}

.featured-course-sm .featured-course-meta-item .material-symbols-outlined {
    font-size: 12px;
}

.featured-course-sm .featured-course-description {
    display: none;
}

.featured-course-sm .featured-course-ctas {
    gap: var(--space-2);
}

.featured-course-sm .featured-course-ctas .btn {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
}

.featured-course-sm .featured-course-visual {
    display: none;
}

/* Featured Course - Medium (md) - Balanced card */
.featured-course-md {
    padding: var(--space-4) var(--space-5);
}

.featured-course-md .featured-course-inner {
    gap: var(--space-5);
}

.featured-course-md .featured-course-badge {
    font-size: 10px;
    padding: 2px var(--space-2);
    margin-bottom: var(--space-2);
}

.featured-course-md .featured-course-badge .material-symbols-outlined {
    font-size: 12px;
}

.featured-course-md .featured-course-title {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-1);
}

.featured-course-md .featured-course-meta {
    gap: var(--space-3);
    font-size: var(--font-size-xs);
    margin-bottom: var(--space-2);
}

.featured-course-md .featured-course-meta-item {
    gap: 2px;
}

.featured-course-md .featured-course-meta-item .material-symbols-outlined {
    font-size: 14px;
}

.featured-course-md .featured-course-description {
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.featured-course-md .featured-course-ctas {
    gap: var(--space-2);
}

.featured-course-md .featured-course-ctas .btn {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
}

.featured-course-md .featured-course-thumbnail {
    width: 160px;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md);
    gap: var(--space-1);
}

.featured-course-md .featured-course-thumbnail .material-symbols-outlined {
    font-size: 28px;
    opacity: 0.7;
}

.featured-course-md .featured-course-thumbnail span:last-child {
    font-size: 10px;
    opacity: 0.7;
}

/* Featured Course - Large (lg) - Full hero card */
.featured-course-lg {
    padding: var(--space-8);
    border-radius: var(--radius-xl);
}

.featured-course-lg .featured-course-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: center;
}

.featured-course-lg .featured-course-badge {
    font-size: var(--font-size-xs);
    padding: var(--space-1) var(--space-3);
    margin-bottom: var(--space-3);
}

.featured-course-lg .featured-course-badge .material-symbols-outlined {
    font-size: 14px;
}

.featured-course-lg .featured-course-title {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-2);
}

.featured-course-lg .featured-course-meta {
    gap: var(--space-4);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-3);
}

.featured-course-lg .featured-course-meta-item {
    gap: var(--space-1);
}

.featured-course-lg .featured-course-meta-item .material-symbols-outlined {
    font-size: 16px;
}

.featured-course-lg .featured-course-description {
    font-size: var(--font-size-base);
    margin-bottom: var(--space-4);
}

.featured-course-lg .featured-course-ctas {
    gap: var(--space-3);
}

.featured-course-lg .featured-course-thumbnail {
    width: 100%;
    max-width: 400px;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    gap: var(--space-2);
}

.featured-course-lg .featured-course-thumbnail .material-symbols-outlined {
    font-size: 48px;
    opacity: 0.7;
}

.featured-course-lg .featured-course-thumbnail span:last-child {
    font-size: var(--font-size-sm);
    opacity: 0.7;
}

@media (max-width: 768px) {
    .announcement-banner {
        padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
        font-size: var(--font-size-xs);
    }

    .announcement-banner-dismiss {
        right: var(--space-2);
    }

    /* Featured course responsive - sm stays same */
    .featured-course-sm .featured-course-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .featured-course-sm .featured-course-ctas {
        width: 100%;
    }

    .featured-course-sm .featured-course-ctas .btn {
        flex: 1;
        text-align: center;
    }

    /* Featured course responsive - md */
    .featured-course-md .featured-course-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .featured-course-md .featured-course-visual {
        display: none;
    }

    .featured-course-md .featured-course-ctas {
        flex-direction: column;
        width: 100%;
    }

    /* Featured course responsive - lg */
    .featured-course-lg {
        padding: var(--space-5);
    }

    .featured-course-lg .featured-course-inner {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .featured-course-lg .featured-course-visual {
        order: -1;
    }

    .featured-course-lg .featured-course-ctas {
        flex-direction: column;
    }

    .promo-banner .container {
        flex-direction: column;
        text-align: center;
        gap: var(--space-3);
    }

    .promo-banner-content {
        flex-direction: column;
        gap: var(--space-2);
    }
}

/* ===========================================
   GLOBAL HEADER - Product First Navigation
   =========================================== */

.global-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background-color: var(--color-bg-card);
    height: var(--header-height);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Remove header shadow when subnav is present (shadow moves to subnav) */
body:has(.product-subheader) .global-header {
    box-shadow: none;
}

/* Dark/Transparent Header Variant (for dark hero pages) */
body.header-dark-mode .global-header {
    background: transparent;
    box-shadow: none;
    position: absolute;
    width: 100%;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

body.header-dark-mode .global-header.header-scrolled {
    position: fixed;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Revert to standard header colors when scrolled */
body.header-dark-mode .global-header.header-scrolled .site-logo img {
    filter: none;
}

body.header-dark-mode .global-header.header-scrolled .global-nav-link {
    color: var(--color-text-primary);
}

body.header-dark-mode .global-header.header-scrolled .global-nav-link:hover {
    background: var(--color-bg-hover-blue);
    color: var(--color-text-primary);
}

body.header-dark-mode .global-header.header-scrolled .header-action-btn,
body.header-dark-mode .global-header.header-scrolled .header-login-link {
    color: var(--color-text-primary);
}

body.header-dark-mode .global-header.header-scrolled .header-action-btn:hover,
body.header-dark-mode .global-header.header-scrolled .header-login-link:hover {
    color: var(--color-primary);
}

body.header-dark-mode .global-header.header-scrolled .global-nav-link .nav-arrow,
body.header-dark-mode .global-header.header-scrolled .global-nav-link .material-symbols-outlined {
    color: var(--color-text-primary);
}

/* Search bar reverts to standard style when scrolled */
body.header-dark-mode .global-header.header-scrolled .header-search {
    background: var(--color-bg-subtle);
    border-color: var(--color-border);
}

body.header-dark-mode .global-header.header-scrolled .header-search:focus-within {
    background: white;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

body.header-dark-mode .global-header.header-scrolled .header-search-input {
    color: var(--color-text-primary);
}

body.header-dark-mode .global-header.header-scrolled .header-search-input::placeholder {
    color: var(--color-text-tertiary);
}

body.header-dark-mode .global-header.header-scrolled .header-search-icon {
    color: var(--color-text-secondary);
}

/* Mobile elements revert to dark when scrolled */
body.header-dark-mode .global-header.header-scrolled .mobile-menu-toggle {
    color: var(--color-text-primary);
}

body.header-dark-mode .global-header.header-scrolled .mobile-search-toggle,
body.header-dark-mode .global-header.header-scrolled .header-cart-btn {
    color: var(--color-text-primary);
}

body.header-dark-mode .global-header.header-scrolled .mobile-search-toggle:hover,
body.header-dark-mode .global-header.header-scrolled .header-cart-btn:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

body.header-dark-mode .site-logo img {
    filter: brightness(0) invert(1);
}

body.header-dark-mode .global-nav-link {
    color: rgba(255, 255, 255, 0.9);
}

body.header-dark-mode .global-nav-link:hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

body.header-dark-mode .global-nav-link .material-symbols-outlined {
    color: rgba(255, 255, 255, 0.7);
}

body.header-dark-mode .header-cta {
    background: white;
    color: var(--color-primary);
}

body.header-dark-mode .header-cta:hover {
    background: rgba(255, 255, 255, 0.9);
}

body.header-dark-mode .mobile-menu-toggle {
    color: white;
}

body.header-dark-mode .header-cart-btn {
    color: rgba(255, 255, 255, 0.9);
}

body.header-dark-mode .header-cart-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Cart button in dark mode */
body.header-dark-mode .header-action-btn {
    color: rgba(255, 255, 255, 0.9);
}

body.header-dark-mode .header-action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Login link in dark mode */
body.header-dark-mode .header-login-link {
    color: rgba(255, 255, 255, 0.9);
}

body.header-dark-mode .header-login-link:hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

/* Mobile search toggle in dark mode */
body.header-dark-mode .mobile-search-toggle {
    color: rgba(255, 255, 255, 0.9);
}

body.header-dark-mode .mobile-search-toggle:hover {
    color: white;
}

/* Search input in dark mode - high contrast for accessibility */
body.header-dark-mode .header-search {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 1);
}

body.header-dark-mode .header-search:focus-within {
    background: white;
    border-color: white;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

body.header-dark-mode .header-search-input {
    color: var(--color-text-primary);
}

body.header-dark-mode .header-search-input::placeholder {
    color: var(--color-text-tertiary);
}

body.header-dark-mode .header-search-icon {
    color: var(--color-text-secondary);
}

/* Global Subheader in dark mode */
body.header-dark-mode .global-subheader {
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.header-dark-mode .global-subheader-link {
    color: rgba(255, 255, 255, 0.7);
}

body.header-dark-mode .global-subheader-link:hover {
    color: white;
}

body.header-dark-mode .global-subheader-divider {
    background: rgba(255, 255, 255, 0.2);
}

/* Adjust main content padding for absolute header */
body.header-dark-mode main {
    padding-top: 0;
}

/* Extra top padding when header overlaps hero */
body.header-dark-mode .hero-stage {
    padding-top: calc(var(--header-height) + var(--space-10));
}

.global-header .container {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: 100%;
    max-width: var(--content-max-width-wide);
}

.site-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.site-logo img {
    height: 22px;
    width: auto;
}

/* ===========================================
   PRIMARY NAVIGATION
   =========================================== */

.global-nav {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.global-nav-list {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.global-nav-item {
    position: relative;
}

.global-nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0 var(--space-3);
    height: var(--header-height);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    transition: color 0.15s ease;
}

.global-nav-link:hover {
    background: var(--color-bg-hover-blue);
    color: var(--color-text-primary);
    text-decoration: none;
}

/* ===========================================
   BAR EXAM SELECTOR - Hero component
   Jurisdiction and date selector for Bar Review
   =========================================== */

.bar-exam-selector {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    padding: var(--space-5);
    text-align: center;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.bar-exam-selector h3 {
    font-size: var(--font-size-lg);
    /* color inherits from global h3 rule (--color-primary) */
    margin-bottom: var(--space-1);
}

.bar-exam-selector > p {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

/* ===========================================
   PLACEHOLDER PANEL - Unified placeholder component
   Use for any placeholder content (images, videos, maps, etc.)
   =========================================== */
.placeholder-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-4);
    background: var(--color-bg-hover-blue);
    border: 2px dashed var(--color-border-default);
    border-radius: 24px 0 24px 0; /* Teardrop */
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: var(--transition-all);
}

.placeholder-panel:hover {
    border-color: var(--color-primary);
    background: var(--color-bg-selected-light);
}

.placeholder-panel .material-symbols-outlined {
    font-size: 48px;
    color: var(--color-primary);
    opacity: 0.7;
}

.placeholder-panel span:last-child,
.placeholder-panel-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

/* Prepend "Placeholder: " to all placeholder labels */
.placeholder-panel span:last-child:not(.material-symbols-outlined)::before,
.placeholder-panel-label::before,
.media-placeholder span:not(.material-symbols-outlined)::before {
    content: "Placeholder: ";
    opacity: 0.7;
}

/* Size variants */
.placeholder-panel-sm {
    padding: var(--space-4) var(--space-3);
    border-radius: 16px 0 16px 0;
}

.placeholder-panel-sm .material-symbols-outlined {
    font-size: 32px;
}

.placeholder-panel-lg {
    padding: var(--space-6) var(--space-5);
    border-radius: 32px 0 32px 0;
}

.placeholder-panel-lg .material-symbols-outlined {
    font-size: 64px;
}

/* Aspect ratio variants */
.placeholder-panel-video {
    aspect-ratio: 16 / 9;
    width: 100%;
    max-width: 480px;
}

.placeholder-panel-square {
    aspect-ratio: 1 / 1;
}

.placeholder-panel-4x3 {
    aspect-ratio: 4 / 3;
}

/* Legacy support - map these to placeholder-panel */
.bar-selector-map-placeholder {
    margin-bottom: var(--space-4);
}

.bar-selector-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.bar-selector-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    text-align: left;
}

.bar-selector-field label {
    font-size: var(--font-size-xs); /* 14px */
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bar-selector-field select {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    font-family: var(--font-family-primary);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    color: var(--color-text-primary);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 18px;
}

.bar-selector-field select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(42, 84, 136, 0.1);
}

.bar-selector-form .btn {
    width: 100%;
    margin-top: var(--space-2);
}

.global-nav-link .nav-arrow {
    font-size: 20px;
    transition: transform 0.2s ease;
}

.global-nav-item.has-mega-menu:hover .nav-arrow {
    transform: rotate(180deg);
}

/* ===========================================
   MEGA MENU - 5-Column Product Navigation
   =========================================== */

/* Base mega menu - dropdown style for smaller menus */
.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 280px;
    background-color: var(--color-bg-card);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: var(--space-5) var(--space-6);
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Prevent interaction when hidden */
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: calc(var(--z-sticky) + 10); /* Must be above sticky header */
}

/* Hover bridge - prevents losing hover when moving to menu */
.mega-menu::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    height: 25px;
    pointer-events: auto;
}

/* Products mega menu - full width, positioned under header */
.mega-menu-products {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    width: 100%;
    border-radius: 0;
}

/* Override the hover bridge for full-width Products menu */
.mega-menu-products::before {
    position: fixed;
    top: calc(var(--header-height) - 15px);
    left: 0;
    right: 0;
    width: 100%;
    height: 20px;
}

/* When subheader is present, all mega-menus need higher z-index to appear above subheader */
body:has(.product-subheader) .mega-menu {
    z-index: var(--z-fixed); /* Must be above sticky subheader (199) */
}

/* Products mega menu stays below main header and overlaps subheader */
body:has(.product-subheader) .mega-menu-products {
    top: var(--header-height);
}

/* When announcement banner is present and NOT scrolled, offset mega menu by banner height */
body:has(.announcement-banner):not(.is-scrolled) .mega-menu-products {
    top: calc(var(--header-height) + 36px);
}

body:has(.announcement-banner):not(.is-scrolled) .mega-menu-products::before {
    top: calc(var(--header-height) + 36px - 15px);
}

body:has(.product-subheader) .mega-menu-products::before {
    top: calc(var(--header-height) - 15px);
}

.mega-menu-products .mega-menu-columns {
    max-width: 1200px;
    margin: 0 auto;
}

/* Column grid layout */
.mega-menu-columns {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-6);
}

/* 4-column variant for Resources with CTA */
.mega-menu-columns-4 {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1000px;
}

/* 3-column variant for Organizations */
.mega-menu-columns-3 {
    grid-template-columns: repeat(3, 1fr);
    max-width: 750px;
}

/* 2-column variant for Resources */
.mega-menu-columns-2 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 500px;
}

/* For Organizations - 3-column dropdown */
/* For Organizations - full-width like Products */
.mega-menu-orgs {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    min-width: 0;
}

.mega-menu-orgs::before {
    content: '';
    position: fixed;
    top: calc(var(--header-height) - 15px);
    left: 0;
    right: 0;
    width: 100%;
    height: 15px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.04) 100%);
    pointer-events: none;
}

.mega-menu-orgs .mega-menu-columns-4 {
    max-width: 1000px;
    margin: 0 auto;
}

/* Handle announcement banner offset */
body:has(.announcement-banner):not(.is-scrolled) .mega-menu-orgs {
    top: calc(var(--header-height) + 36px);
}

body:has(.announcement-banner):not(.is-scrolled) .mega-menu-orgs::before {
    top: calc(var(--header-height) + 36px - 15px);
}

/* For Resources - full-width like Products */
.mega-menu-resources {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    min-width: 0;
}

.mega-menu-resources::before {
    content: '';
    position: fixed;
    top: calc(var(--header-height) - 15px);
    left: 0;
    right: 0;
    width: 100%;
    height: 15px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.04) 100%);
    pointer-events: none;
}

.mega-menu-resources .mega-menu-columns-4 {
    max-width: 1000px;
    margin: 0 auto;
}

/* Handle announcement banner offset */
body:has(.announcement-banner):not(.is-scrolled) .mega-menu-resources {
    top: calc(var(--header-height) + 36px);
}

body:has(.announcement-banner):not(.is-scrolled) .mega-menu-resources::before {
    top: calc(var(--header-height) + 36px - 15px);
}

/* Show mega menu on hover/focus */
.global-nav-item.has-mega-menu:hover .mega-menu,
.global-nav-item.has-mega-menu:focus-within .mega-menu,
.global-nav-item.has-mega-menu .global-nav-link[aria-expanded="true"] + .mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Mega menu column */
.mega-menu-column {
    display: flex;
    flex-direction: column;
    min-width: 0; /* Allow columns to shrink */
}

/* Column header - category title */
.mega-menu-column-header {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin: 0 0 var(--space-3) 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-height: 32px; /* Consistent height for alignment */
    display: flex;
    align-items: flex-end;
}

/* Individual menu links */
.mega-menu-link {
    display: block;
    padding: var(--space-2) 0;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    text-decoration: none;
    transition: color 0.15s ease, padding-left 0.15s ease;
}

.mega-menu-link:hover {
    color: var(--color-primary);
    text-decoration: none;
    padding-left: var(--space-1);
}

/* Overview link - first item, slightly bolder */
.mega-menu-link-overview {
    font-weight: var(--font-weight-semibold);
}

/* CTA link - last item in column */
.mega-menu-link-cta {
    margin-top: auto;
    padding-top: var(--space-3);
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

/* Pricing link - last item with arrow */
.mega-menu-link-pricing {
    margin-top: auto;
    padding-top: var(--space-3);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.mega-menu-link-pricing::after {
    content: ' →';
}

/* Legacy support - .mega-menu-heading maps to column-header */
.mega-menu-heading {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-border-light);
}

/* Legacy support - .mega-menu-links list */
.mega-menu-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mega-menu-links li {
    margin-bottom: 0;
}

.mega-menu-links a {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.mega-menu-links a:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.mega-menu-links a .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-text-tertiary);
    transition: color 0.15s ease;
}

.mega-menu-links a:hover .material-symbols-outlined {
    color: var(--color-primary);
}

/* Featured product promo in mega menu */
.mega-menu-promo {
    background: linear-gradient(135deg, var(--color-bg-hover-blue) 0%, #F0F4FA 100%);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    min-width: 220px;
}

.mega-menu-promo-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin-bottom: var(--space-2);
}

.mega-menu-promo-text {
    font-size: var(--font-size-xs); /* 14px */
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3);
    line-height: 1.4;
}

.mega-menu-promo-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.mega-menu-promo-link .material-symbols-outlined {
    font-size: 18px;
}

/* ===========================================
   MEGA MENU - Products with Promo Card
   =========================================== */

/* Inner wrapper for products mega menu */
.mega-menu-inner {
    display: flex;
    gap: var(--space-6);
    max-width: 1200px;
    margin: 0 auto;
    align-items: flex-start;
}

.mega-menu-inner .mega-menu-columns {
    flex: 1;
}

/* Seasonal Promo Card */
.mega-menu-promo-card {
    width: 200px;
    flex-shrink: 0;
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mega-menu-promo-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-primary);
    background: rgba(255, 255, 255, 0.7);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    width: fit-content;
}

.mega-menu-promo-heading {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0;
}

.mega-menu-promo-desc {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0;
}

.mega-menu-promo-card .btn {
    margin-top: var(--space-2);
}

/* CTA Column - styled like promo card but as a column */
.mega-menu-column-cta {
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mega-menu-column-cta .btn {
    margin-top: var(--space-2);
}

/* ===========================================
   MOBILE NAVIGATION - Slide-in Drawer
   =========================================== */

/* Mobile menu toggle - hidden on desktop */
.mobile-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-primary);
    margin-right: var(--space-2);
    flex-shrink: 0;
}

.mobile-menu-toggle .material-symbols-outlined {
    font-size: 28px;
}

/* Mobile nav overlay - dark backdrop */
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
}

.mobile-nav-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* When mobile menu is open, header needs higher z-index than overlay */
body:has(.global-nav.is-mobile-open) .global-header,
body.mobile-nav-open .global-header {
    z-index: 9500;
}

/* Mobile nav header - shown inside drawer on mobile */
.mobile-nav-header {
    display: none;
}

/* Mobile nav quick links - shown at bottom of drawer on mobile */
.mobile-nav-quick-links {
    display: none;
}

/* ===========================================
   HEADER ACTIONS (Search, Cart, Login)
   =========================================== */

.global-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1;
    justify-content: flex-end;
}

.header-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    transition: var(--transition-all);
    position: relative;
}

.header-action-btn:hover {
    background-color: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.header-action-btn .material-symbols-outlined {
    font-size: var(--font-size-lg); /* 24px */
}

.cart-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: var(--font-size-xs); /* 14px */
    font-weight: var(--font-weight-bold);
    color: var(--color-text-inverse);
    background-color: var(--color-primary);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-login-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: var(--transition-all);
}

.header-login-link:hover {
    background-color: var(--color-bg-hover);
    color: var(--color-text-primary);
    text-decoration: none;
}

.header-login-link .material-symbols-outlined {
    font-size: var(--font-size-lg); /* 24px */
}

/* ===========================================
   HEADER SEARCH BAR (Visible)
   Always visible search bar in header
   =========================================== */

.header-search {
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--color-bg-page);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-full);
    padding: 0 var(--space-3);
    flex: 1;
    min-width: 200px;
    margin-left: var(--space-4);
    margin-right: var(--space-4);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.header-search:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 35, 102, 0.1);
}

.header-search-icon {
    color: var(--color-text-tertiary);
    font-size: 20px;
    flex-shrink: 0;
}

.header-search input[type="search"] {
    flex: 1;
    height: 36px;
    border: none;
    background: none;
    font-size: var(--font-size-sm);
    font-family: var(--font-family-primary);
    color: var(--color-text-primary);
    outline: none;
    padding: 0 var(--space-2);
    min-width: 0;
}

.header-search input::placeholder {
    color: var(--color-text-tertiary);
}

/* Remove default search styling */
.header-search input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

/* Search Results Dropdown */
.search-results-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    min-width: 320px;
    max-height: 400px;
    overflow-y: auto;
    background-color: var(--color-bg-card);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    display: none;
    z-index: var(--z-dropdown);
}

.header-search.has-results .search-results-dropdown {
    display: block;
}

.search-results-section {
    padding: var(--space-2) 0;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    text-decoration: none;
    color: var(--color-text-primary);
    transition: background-color 0.15s ease;
}

.search-result-item:hover {
    background-color: var(--color-bg-hover-blue);
    text-decoration: none;
}

.search-result-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background-color: var(--color-bg-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.search-result-icon .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-text-tertiary);
}

.search-result-content {
    flex: 1;
    min-width: 0;
}

.search-result-title {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-meta {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.search-no-results {
    padding: var(--space-4);
    text-align: center;
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
}

/* Search Results Groups */
.search-results-group {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.search-results-group:last-of-type {
    border-bottom: none;
}

.search-results-group-title {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: var(--space-2) var(--space-4);
    margin: 0;
}

.search-view-all {
    display: block;
    padding: var(--space-3) var(--space-4);
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    text-decoration: none;
    border-top: 1px solid var(--color-border-light);
    transition: background-color 0.15s ease;
}

.search-view-all:hover {
    background-color: var(--color-bg-hover-blue);
    text-decoration: none;
}

/* Search Results - External Links & Case Briefs */
.search-results-source {
    font-weight: var(--font-weight-normal);
    font-size: 10px;
    color: var(--color-text-quaternary);
    text-transform: none;
    letter-spacing: 0;
}

.search-result-external .search-result-meta {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.search-result-external-icon {
    font-size: 12px;
    color: var(--color-text-tertiary);
}

.search-result-case-brief .search-result-icon {
    background-color: #f3e8ff;
}

.search-result-case-brief .search-result-icon .material-symbols-outlined {
    color: #7c3aed;
}

/* ===========================================
   GLOBAL SUBHEADER
   Audience-focused secondary navigation
   =========================================== */

.global-subheader {
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    z-index: calc(var(--z-sticky) - 1);
    background: var(--color-bg-subtle);
    border-bottom: 1px solid var(--color-border-light);
    height: 44px;
}

/* Note: Additional dark-mode subheader styles are with the header dark mode block above */

.global-subheader .container {
    display: flex;
    align-items: center;
    height: 100%;
    max-width: var(--content-max-width-wide);
}

.global-subheader-nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    width: 100%;
}

.global-subheader-link {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: color 0.15s ease, background 0.15s ease;
    white-space: nowrap;
}

.global-subheader-link:hover {
    color: var(--color-primary);
    background: var(--color-bg-hover);
}

.global-subheader-divider {
    width: 1px;
    height: 20px;
    background: var(--color-border);
    margin: 0 var(--space-2);
}

@media (max-width: 900px) {
    .global-subheader {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .global-subheader-nav {
        padding: 0 var(--space-4);
    }

    .global-subheader-link {
        padding: var(--space-2);
        font-size: var(--font-size-xs);
    }
}

/* ===========================================
   PRODUCT SUBHEADER
   Product-specific navigation (no search)
   =========================================== */

.product-subheader {
    position: sticky;
    top: var(--header-height);
    z-index: calc(var(--z-sticky) - 1);
    background-color: var(--color-bg-card);
    border-top: 1px solid var(--color-border-light); /* Divider between header and subheader */
    height: var(--subheader-height);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Adjust sticky sidebars/panels when subheader is present */
body:has(.product-subheader) .course-detail-sidebar,
body:has(.product-subheader) .order-summary-section,
body:has(.product-subheader) .browse-sticky-filters,
body:has(.product-subheader) .wa-detail-sidebar,
body:has(.product-subheader) .resource-toc,
body:has(.product-subheader) .cle-sidebar {
    top: calc(var(--header-height) + var(--subheader-height) + var(--space-6));
}

.product-subheader .container {
    display: flex;
    align-items: center;
    height: 100%;
    max-width: var(--content-max-width-wide);
}

.product-nav {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}

.product-nav-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    text-decoration: none;
    margin-right: auto;
}

.product-nav-title:hover {
    text-decoration: none;
}

/* Title group for product detail pages (Family > Product) */
.product-nav-title-group {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.product-nav-family {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.product-nav-family:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.product-nav-separator {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* CTA button - separate element outside the nav links list */
.product-nav-cta {
    background-color: var(--color-text-primary);
    color: var(--color-text-inverse);
    border-radius: var(--radius-md);
    margin-left: var(--space-4);
    padding: var(--btn-padding-y-sm) var(--btn-padding-x-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    transition: background-color 0.15s ease;
    white-space: nowrap;
}

.product-nav-cta:hover {
    background-color: #333;
    color: var(--color-text-inverse);
    text-decoration: none;
}

.product-nav-links {
    display: flex;
    align-items: stretch; /* Items fill full height */
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
}

.product-nav-item {
    height: 100%;
    display: flex;
    align-items: stretch; /* Regular items fill full height for underline indicator */
}

.product-nav-link {
    display: flex;
    align-items: center; /* Center text vertically within the link */
    height: 100%;
    padding: 0 var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    text-decoration: none;
    position: relative;
    transition: color 0.15s ease;
}

.product-nav-link::after {
    content: '';
    position: absolute;
    bottom: 0; /* Sits at bottom edge of the link (which fills the container) */
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--color-primary);
    transform: scaleX(0);
    transition: transform 0.2s ease;
}

.product-nav-link:hover,
.product-nav-link.active {
    color: var(--color-primary);
    text-decoration: none;
}

.product-nav-link:hover::after,
.product-nav-link.active::after {
    transform: scaleX(1);
}

/* Product Nav Dropdown */
.product-nav-dropdown {
    position: relative;
    height: 100%;
    display: flex;
    align-items: stretch;
}

.product-nav-dropdown-trigger {
    background: none;
    border: none;
    cursor: pointer;
    gap: var(--space-1);
}

.product-nav-dropdown-trigger .material-symbols-outlined {
    font-size: 18px;
    transition: transform 0.2s ease;
}

.product-nav-dropdown:hover .product-nav-dropdown-trigger .material-symbols-outlined {
    transform: rotate(180deg);
}

.product-nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    padding: var(--space-2) 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
    z-index: var(--z-dropdown);
}

.product-nav-dropdown:hover .product-nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.product-nav-dropdown-menu a {
    display: block;
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.product-nav-dropdown-menu a:hover {
    background: var(--color-bg-hover);
    color: var(--color-primary);
}

/* ===========================================
   BUTTONS
   =========================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--btn-padding-y) var(--btn-padding-x);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: var(--transition-all);
}

.btn-primary {
    background-color: var(--color-text-primary);  /* Rich Black #001722, NOT blue */
    color: var(--color-text-inverse);
}

.btn-primary:hover {
    background-color: #1A2832;  /* Slightly lighter Rich Black for hover */
    color: var(--color-text-inverse);
    text-decoration: none;
}

.btn-secondary {
    background-color: transparent;
    color: var(--color-text-primary);  /* Rich Black, NOT blue */
    border: 2px solid var(--color-text-primary);
}

.btn-secondary:hover {
    background-color: var(--color-bg-hover);
    text-decoration: none;
}

.btn-sm {
    padding: var(--btn-padding-y-sm) var(--btn-padding-x-sm);
    font-size: var(--font-size-xs);
}

.btn-ghost {
    background: transparent;
    border: 1px solid var(--color-border-default);
    color: var(--color-text-secondary);
}

.btn-ghost:hover {
    background-color: var(--color-bg-hover);
    color: var(--color-text-primary);
}

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

/* ===========================================
   CHIPS/TAGS
   Size scale: sm (14px), base (14px), lg (16px)
   =========================================== */

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 4px 12px;
    font-size: var(--font-size-xs); /* 14px - base chip size */
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-full);
    background-color: var(--color-bg-hover);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

/* Chip sizes */
.chip-sm {
    padding: 2px 8px;
    font-size: var(--font-size-xs); /* 14px - minimum allowed */
    gap: 2px;
}

.chip-lg {
    padding: 6px 16px;
    font-size: var(--font-size-sm); /* 16px */
    gap: var(--space-1);
}

/* Chip color variants */
.chip-primary {
    background-color: var(--color-bg-hover-blue);
    color: var(--color-primary);
}

.chip-success {
    background-color: var(--color-success-light);
    color: var(--color-success-dark);
}

/* ===========================================
   CARDS
   =========================================== */

.card {
    background-color: var(--color-bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    padding: var(--space-4);
}

.card-hover {
    transition: var(--transition-all);
}

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

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

.hero {
    padding: var(--space-10) 0;
    text-align: center;
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.hero h1 {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--space-4);
}

.hero p {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-5);
}

/* Hero with background */
.hero-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-text-inverse);
}

.hero-primary h1,
.hero-primary p {
    color: var(--color-text-inverse);
}

/* ===========================================
   SECTIONS
   Base: 48px vertical padding (--space-7)
   =========================================== */

.section {
    padding: var(--space-7) 0; /* 48px - standard section spacing */
}

/* Jump link offset for sticky header + subheader */
.section[id],
section[id] {
    scroll-margin-top: 140px;
}

.section-alt {
    background-color: var(--color-bg-page);
}

.section-lg {
    padding: var(--space-10) 0; /* 72px - for major sections needing more breathing room */
}

.section-compact {
    padding: var(--space-5) 0; /* 32px - for tightly grouped content */
}

.section-title {
    font-size: var(--font-size-2xl);
    color: var(--color-primary);
    margin-bottom: var(--space-5);
}

.section-title-center {
    text-align: center;
}

.section-header-center {
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--space-5);
}

.section-header-center h2 {
    font-size: var(--font-size-2xl);
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}

.section-header-center h3 {
    font-size: var(--font-size-xl);
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}

.section-header-center p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: 0;
}

/* Increased spacing for pricing sections */
.product-pricing-section .section-header-center {
    margin-bottom: var(--space-8);
}

/* Divider line above final CTA */
.section-cta-light {
    border-top: 1px solid var(--color-border);
}

.section-cta-light .container {
    max-width: 1120px;
}

/* ===========================================
   PRODUCT FOOTER (Sub-Footer)
   =========================================== */

.product-footer {
    background-color: var(--color-text-primary);
    color: var(--color-text-inverse);
    padding: var(--space-6) 0;
}

.product-footer-inner {
    display: grid;
    grid-template-columns: 200px 1fr 1fr 1fr;
    gap: var(--space-6);
}

.product-footer-brand {
    /* First column */
}

.product-footer-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-inverse);
}

.product-footer-columns {
    display: contents;
}

.product-footer-column h4 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-inverse);
    margin-bottom: var(--space-2);
}

.product-footer-column ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.product-footer-column li {
    margin-bottom: var(--space-1);
}

.product-footer-column a {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: var(--transition-colors);
}

.product-footer-column a:hover {
    color: var(--color-text-inverse);
    text-decoration: underline;
}

/* Footer Divider - separates subfooter from main footer */
/* Now placed inside global-footer so it inherits dark background */
.footer-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Match social row lines */
    margin: 0 auto var(--space-6);
    max-width: var(--content-max-width);
}

/* ===========================================
   GLOBAL FOOTER (Corporate)
   =========================================== */

.global-footer {
    background-color: var(--color-text-primary);
    color: var(--color-text-inverse);
    padding: var(--space-6) 0 var(--space-5);
}

/* When divider is present (product pages), add top padding for the hr */
.global-footer:has(.footer-divider) {
    padding-top: var(--space-6);
}

/* Top line removed per design feedback */

.global-footer-top {
    display: grid;
    grid-template-columns: 200px 1fr 1fr 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

.global-footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;  /* Left justify */
    gap: var(--space-1);
}

.footer-logo {
    height: 24px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    display: block;
}

.global-footer-brand p {
    font-size: var(--font-size-xs);
    color: var(--color-text-inverse);
    margin: 0;
    opacity: 0.7;
    font-style: italic;
    text-align: left;
}

.global-footer-links {
    display: contents;
}

.global-footer-column h4 {
    color: var(--color-text-inverse);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-2);
}

.global-footer-column ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.global-footer-column li {
    margin-bottom: var(--space-1);
}

.global-footer-column a {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--font-size-xs);
    text-decoration: none;
    transition: var(--transition-colors);
}

.global-footer-column a:hover {
    color: var(--color-text-inverse);
    text-decoration: underline;
}

.global-footer-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    margin-bottom: var(--space-4);
}

.global-footer-social::before,
.global-footer-social::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.social-icons {
    display: flex;
    gap: var(--space-4);
    flex-shrink: 0;
}

.social-icons a {
    color: rgba(255, 255, 255, 0.7);
    transition: var(--transition-colors);
}

.social-icons a:hover {
    color: var(--color-text-inverse);
}

.social-icons svg {
    width: 20px;
    height: 20px;
}

.global-footer-bottom {
    text-align: center;
}

.footer-contact p {
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
    line-height: 1.8;
}

/* Footer responsive */
@media (max-width: 768px) {
    /* Product subfooter mobile */
    .product-footer-inner {
        grid-template-columns: 1fr;
        gap: var(--space-4);
        text-align: center;
    }

    .product-footer-brand {
        text-align: center;
    }

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

    .product-footer-column {
        text-align: center;
    }

    .product-footer-column ul {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Global footer mobile */
    .global-footer-top {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .global-footer-brand {
        text-align: center;
        align-items: center;
    }

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

    .global-footer-column {
        text-align: center;
    }

    .global-footer-column ul {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .global-footer-social {
        flex-wrap: wrap;
    }

    .global-footer-social::before,
    .global-footer-social::after {
        flex: 0 0 20%;
    }

    .footer-contact p {
        font-size: var(--font-size-xs); /* 14px */
        line-height: 1.6;
    }
}

/* ===========================================
   MOBILE MENU (see also media query styles)
   =========================================== */

/* ===========================================
   UTILITY CLASSES
   =========================================== */

.text-center { text-align: center; }
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-inverse { color: var(--color-text-inverse); }

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }

/* ===========================================
   RESPONSIVE - Mobile breakpoints
   =========================================== */

@media (max-width: 1024px) {
    /* Show mobile menu toggle */
    .mobile-menu-toggle {
        display: flex !important;
        order: -1; /* Put hamburger first */
    }

    /* Mobile navigation - full-screen drawer from left */
    .global-nav {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        background-color: #FFFFFF !important;
        box-shadow: none !important;
        z-index: 9999 !important;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        overflow-x: hidden;
        display: flex !important;
        flex-direction: column !important;
        opacity: 1 !important;
        visibility: visible !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .global-nav.is-mobile-open {
        transform: translateX(0) !important;
    }

    /* Mobile nav header - close button only */
    .mobile-nav-header {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        padding: var(--space-3) var(--space-4);
        border-bottom: none;
        flex-shrink: 0;
        min-height: 56px;
        background: #FFFFFF;
    }

    .mobile-nav-logo {
        display: none !important;  /* Hide logo in mobile nav */
    }

    .mobile-nav-close {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: none;
        border: none;
        cursor: pointer;
        color: var(--color-text-primary);
        border-radius: var(--radius-md);
        transition: background-color 0.15s ease;
    }

    .mobile-nav-close:hover,
    .mobile-nav-close:active {
        background: var(--color-bg-hover);
    }

    .mobile-nav-close .material-symbols-outlined {
        font-size: 28px;
    }

    /* Mobile nav list - vertical stack */
    .global-nav-list {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 0 !important;
        margin: 0 !important;
        flex: 1;
        width: 100%;
        list-style: none;
    }

    .global-nav-item {
        width: 100%;
        border-bottom: 1px solid var(--color-border-light);
    }

    .global-nav-link {
        display: flex !important;
        width: 100%;
        height: auto !important;
        padding: var(--space-4) var(--space-5) !important;
        justify-content: space-between !important;
        align-items: center;
        font-size: var(--font-size-lg) !important;
        font-weight: var(--font-weight-medium);
        color: var(--color-text-primary);
        text-decoration: none;
        background: #FFFFFF;
    }

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

    /* Override dark mode styles - mobile drawer always has white bg with dark text */
    /* Must cover both scrolled and non-scrolled states */
    body.header-dark-mode .global-nav-link,
    body.header-dark-mode .global-nav-link:hover,
    body.header-dark-mode .global-header.header-scrolled .global-nav-link,
    body.header-dark-mode .global-header.header-scrolled .global-nav-link:hover {
        color: var(--color-text-primary) !important;
        background: #FFFFFF !important;
    }

    body.header-dark-mode .global-nav-link:hover,
    body.header-dark-mode .global-nav-link:active,
    body.header-dark-mode .global-header.header-scrolled .global-nav-link:hover,
    body.header-dark-mode .global-header.header-scrolled .global-nav-link:active {
        background: var(--color-bg-hover) !important;
    }

    body.header-dark-mode .global-nav-link .nav-arrow,
    body.header-dark-mode .global-nav-link .material-symbols-outlined,
    body.header-dark-mode .global-header.header-scrolled .global-nav-link .nav-arrow,
    body.header-dark-mode .global-header.header-scrolled .global-nav-link .material-symbols-outlined {
        color: var(--color-text-primary) !important;
    }

    /* Mobile drawer background must always be white */
    body.header-dark-mode .global-nav,
    body.header-dark-mode .global-header.header-scrolled .global-nav {
        background-color: #FFFFFF !important;
    }

    /* Mobile nav header must always be white with dark text */
    body.header-dark-mode .mobile-nav-header,
    body.header-dark-mode .global-header.header-scrolled .mobile-nav-header {
        background: #FFFFFF !important;
    }

    body.header-dark-mode .mobile-nav-close,
    body.header-dark-mode .global-header.header-scrolled .mobile-nav-close {
        color: var(--color-text-primary) !important;
    }

    .global-nav-link::after {
        display: none !important; /* No hover underline on mobile */
    }

    .global-nav-link .nav-arrow {
        transition: transform 0.2s ease;
        font-size: 24px;
    }

    .global-nav-item.is-expanded .nav-arrow {
        transform: rotate(180deg);
    }

    /* Mega menu becomes accordion on mobile */
    .mega-menu {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        background: var(--color-bg-subtle) !important;
        display: none;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    /* Override fixed positioning for mega-menu-products, mega-menu-resources, and mega-menu-orgs on mobile */
    .mega-menu-products,
    .mega-menu-resources,
    .mega-menu-orgs {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
    }

    /* Hide hover bridge on mobile */
    .mega-menu::before {
        display: none !important;
    }

    .global-nav-item.is-expanded .mega-menu {
        display: block !important;
    }

    .mega-menu-columns {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .mega-menu-columns-4,
    .mega-menu-columns-3,
    .mega-menu-columns-2 {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
    }

    .mega-menu-column {
        width: 100%;
        border-bottom: 1px solid var(--color-border-light);
    }

    .mega-menu-column:last-child {
        border-bottom: none;
    }

    .mega-menu-column-header {
        padding: var(--space-3) var(--space-5);
        margin: 0;
        border-bottom: none;
        font-size: var(--font-size-xs);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--color-text-secondary);
        background: var(--color-bg-subtle);
    }

    .mega-menu-link {
        display: block;
        padding: var(--space-3) var(--space-5);
        padding-left: var(--space-6);
        border-top: 1px solid var(--color-border-light);
        background: #FFFFFF;
    }

    .mega-menu-link:hover,
    .mega-menu-link:active {
        background: var(--color-bg-hover);
    }

    .mega-menu-link:first-of-type {
        border-top: none;
    }

    .mega-menu-link-pricing {
        margin-top: 0;
        padding-top: var(--space-3);
    }

    /* Hide promo card on mobile */
    .mega-menu-promo-card {
        display: none !important;
    }

    .mega-menu-inner {
        display: block !important;
    }

    /* Hide quick links at bottom - icons in main header */
    .mobile-nav-quick-links {
        display: none !important;
    }

    /* Hide full search bar, show search icon */
    .header-search {
        display: none !important;
    }

    /* Mobile search icon */
    .mobile-search-toggle {
        display: flex !important;
    }

    /* Hide login text on mobile */
    .header-login-text {
        display: none !important;
    }

    .header-login-link {
        padding: var(--space-2);
    }

    /* Mobile header layout adjustments */
    .global-header .container {
        justify-content: flex-start;
    }

    .site-logo {
        flex: 0 0 auto;
    }

    .global-header-actions {
        margin-left: auto;
    }

    /* Footer grid on tablet */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile search bar - expandable below header */
.mobile-search-bar {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--space-3) var(--space-4);
    z-index: 201; /* Just above header (200), covers scrolling content */
    box-shadow: var(--shadow-md);
}

.mobile-search-bar.is-visible {
    display: block;
}

.mobile-search-bar .header-search {
    display: flex !important;
    max-width: none;
    width: 100%;
    margin: 0;
    min-width: 0;
}

/* Mobile search toggle button */
.mobile-search-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    transition: var(--transition-all);
}

.mobile-search-toggle:hover {
    background-color: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.mobile-search-toggle .material-symbols-outlined {
    font-size: var(--font-size-lg); /* 24px */
}

@media (max-width: 768px) {
    .hero h1 {
        font-size: var(--font-size-2xl);
    }

    .hero p {
        font-size: var(--font-size-base);
    }

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

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        gap: var(--space-3);
        text-align: center;
    }

    .product-subheader {
        display: none;
    }
}

/* ===========================================
   HOMEPAGE STYLES
   =========================================== */

/* Hero - Homepage with Video */
.hero-home {
    background: linear-gradient(180deg, #FFFFFF 0%, var(--color-bg-hover-blue) 100%);
    padding: var(--space-10) 0;
}

.hero-home-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: center;
}

.hero-home-content {
    max-width: 600px;
}

.hero-home h1 {
    font-size: var(--font-size-3xl);
    color: var(--color-primary);
    margin-bottom: var(--space-4);
    line-height: 1.2;
}

.hero-home-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
    line-height: 1.6;
}

.hero-home-ctas {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* Video Placeholder */
.hero-home-video {
    display: flex;
    justify-content: center;
}

.video-placeholder {
    width: 100%;
    max-width: 480px;
    aspect-ratio: 16 / 9;
    background: var(--color-bg-page);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    cursor: pointer;
    transition: var(--transition-all);
    border: 2px dashed var(--color-border-default);
}

.video-placeholder:hover {
    border-color: var(--color-primary);
    background: var(--color-bg-hover);
}

.video-play-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.video-play-btn .material-symbols-outlined {
    font-size: 72px;
    color: var(--color-primary);
    transition: transform 0.2s ease;
}

.video-placeholder:hover .video-play-btn .material-symbols-outlined {
    transform: scale(1.1);
}

.video-placeholder-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

/* Prepend "Placeholder: " to video placeholder text */
.video-placeholder-text::before {
    content: "Placeholder: ";
    opacity: 0.7;
}

/* Video Thumbnail - Realistic look */
.video-thumbnail {
    position: relative;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    cursor: pointer;
}

.video-thumbnail-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-thumbnail-img + .video-thumbnail-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.6) 100%);
    pointer-events: none;
}

.video-thumbnail-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    z-index: 1;
}

.video-thumbnail .video-play-btn {
    background: rgba(42, 84, 136, 0.9);
    border: 3px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.video-thumbnail .video-play-btn .play-icon {
    width: 32px;
    height: 32px;
    color: white;
    margin-left: 4px; /* Visual centering for play triangle */
}

.video-thumbnail:hover .video-play-btn {
    transform: scale(1.1);
    background: rgba(42, 84, 136, 1);
}

.video-thumbnail-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: white;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Organizations CTA Section */
.organizations-cta {
    background: var(--color-bg-page);
    padding: var(--space-10) 0;
}

.organizations-cta-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.organizations-cta h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-3);
}

.organizations-cta p {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-5);
}

/* Hero responsive */
@media (max-width: 1024px) {
    .hero-home-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-home-content {
        max-width: 700px;
        margin: 0 auto;
    }

    .hero-home-ctas {
        justify-content: center;
    }

    .video-placeholder {
        max-width: 400px;
    }
}

@media (max-width: 480px) {
    .hero-home h1 {
        font-size: var(--font-size-2xl);
    }

    .hero-home-ctas {
        flex-direction: column;
    }

    .hero-home-ctas .btn {
        width: 100%;
    }
}

/* ===========================================
   PRODUCT SECTIONS - Stacked Layout
   =========================================== */

.product-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: center;
    padding: var(--space-8) 0;
}

.product-section-reverse {
    direction: rtl;
}

.product-section-reverse > * {
    direction: ltr;
}

/* Product Brand - Logo + "for X" */
.product-section-brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.product-section-logo {
    height: 24px;
    width: auto;
}

.product-section-wordmark {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    letter-spacing: 0.5px;
}

.product-section-for {
    font-family: var(--font-family-primary);  /* Nunito */
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    padding-top: 5px;  /* Align with logo center */
}

.product-section-content h3 {
    font-size: var(--font-size-lg);
    color: var(--color-primary);
    margin-bottom: var(--space-2);
    line-height: 1.3;
}

.product-section-content > p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-3);
}

.product-section-features {
    list-style: none;
    margin: 0 0 var(--space-4) 0;
    padding: 0;
}

.product-section-features li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

.product-section-features .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-success);
    flex-shrink: 0;
}

.product-section-ctas {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* Product Image Placeholder */
.product-section-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-image-placeholder {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--color-bg-page);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border: 2px dashed var(--color-border-default);
    color: var(--color-text-tertiary);
    text-align: center;
    padding: var(--space-4);
}

.product-image-placeholder .material-symbols-outlined {
    font-size: 48px;
    opacity: 0.5;
}

.product-image-placeholder span:last-child {
    font-size: var(--font-size-xs);
}

/* Prepend "Placeholder: " to product image placeholder labels */
.product-image-placeholder span:last-child:not(.material-symbols-outlined)::before {
    content: "Placeholder: ";
    opacity: 0.7;
}

/* Product sections responsive */
@media (max-width: 1024px) {
    .product-section {
        grid-template-columns: 1fr;
        gap: var(--space-6);
        text-align: center;
    }

    .product-section-reverse {
        direction: ltr;
    }

    .product-section-brand {
        justify-content: flex-start;  /* Keep left-aligned on mobile */
    }

    .product-section-content {
        text-align: left;
    }

    .product-section-features {
        display: inline-block;
        text-align: left;
    }

    .product-section-ctas {
        justify-content: center;
        flex-direction: column;
        width: 100%;
    }

    .product-section-ctas .btn {
        width: 100%;
    }

    .product-section-visual {
        width: 100%;
    }

    .product-section-reverse .product-section-visual {
        width: 100%;
    }

    .product-image-placeholder {
        max-width: none;
        width: 100%;
    }

    /* Video thumbnail full width on mobile */
    .video-thumbnail {
        max-width: none;
        width: 100%;
    }

    .hero-home-video {
        width: 100%;
    }
}

/* ===========================================
   TESTIMONIALS - 2-Column Compact Grid
   =========================================== */

.testimonials-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.testimonial-card-compact {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.testimonial-brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.testimonial-brand-logo {
    height: 16px;
    width: auto;
}

.testimonial-brand-wordmark {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    letter-spacing: 0.3px;
}

.testimonial-brand-text {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    padding-top: 3px;  /* Align with logo */
}

.testimonial-text-compact {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-3);
    font-style: italic;
}

.testimonial-attribution {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.testimonial-photo {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--color-bg-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.testimonial-photo .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-text-tertiary);
}

.testimonial-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-full);
}

.testimonial-attribution-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.testimonial-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.testimonial-school {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

@media (max-width: 768px) {
    .testimonials-grid-2col {
        grid-template-columns: 1fr;
    }
}

/* ===========================================
   EXPERT QUOTE COMPONENT - Industry validation
   =========================================== */

.expert-quote {
    background: var(--color-bg-subtle);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    margin: var(--space-6) 0;
}

.expert-quote-text {
    font-family: var(--font-family-body);
    font-size: var(--font-size-lg);
    font-style: italic;
    color: var(--color-text-primary);
    line-height: var(--line-height-relaxed);
    margin: 0 0 var(--space-4) 0;
}

.expert-quote-text::before {
    content: '"';
}

.expert-quote-text::after {
    content: '"';
}

.expert-quote-attribution {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-4);
}

.expert-quote-source {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.expert-quote-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.expert-quote-title {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.expert-quote-year {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    font-style: italic;
}

/* Expert quote with logo variant */
.expert-quote-with-logo {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.expert-quote-logo {
    height: 32px;
    width: auto;
    opacity: 0.8;
}

/* Featured/large expert quote */
.expert-quote-featured {
    background: white;
    border: 1px solid var(--color-border);
    padding: var(--space-8);
    text-align: center;
}

.expert-quote-featured .expert-quote-text {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-6);
}

.expert-quote-featured .expert-quote-attribution {
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

@media (max-width: 768px) {
    .expert-quote {
        padding: var(--space-4);
    }

    .expert-quote-text {
        font-size: var(--font-size-md);
    }

    .expert-quote-attribution {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
}

/* ===========================================
   ORGANIZATIONS SECTION - Full Width with Stats
   =========================================== */

.section-orgs-full {
    background: var(--color-bg-page);
}

.orgs-full-panel {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.orgs-full-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.orgs-full-logo {
    height: 32px;
    width: auto;
}

.orgs-full-for {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.orgs-full-desc {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
}

.orgs-full-stats {
    display: flex;
    justify-content: center;
    gap: var(--space-8);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

.orgs-stat {
    text-align: center;
}

.orgs-stat-number {
    display: block;
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: var(--space-1);
}

.orgs-stat-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.orgs-full-ctas {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .orgs-full-stats {
        gap: var(--space-5);
    }

    .orgs-stat-number {
        font-size: var(--font-size-xl);
    }

    .orgs-full-ctas {
        flex-direction: column;
        align-items: center;
    }

    .orgs-full-ctas .btn {
        width: 100%;
        max-width: 300px;
    }
}

/* ===========================================
   LIFECYCLE STAGES - Homepage Career Journey
   Numbered lifecycle stages with product cards
   =========================================== */

.lifecycle-stage {
    margin-bottom: var(--space-8);
}

.lifecycle-stage:last-child {
    margin-bottom: 0;
}

.lifecycle-label {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.lifecycle-marker {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: white;
    border-radius: 50%;
    font-weight: 700;
    font-size: var(--font-size-base);
}

.lifecycle-text {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.product-cards-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

/* Compact Product Cards - Horizontal layout for lifecycle stages */
.product-card-compact {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    text-decoration: none;
    color: var(--color-text-primary);
    transition: var(--transition-all);
    position: relative;
}

.product-card-compact:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
    text-decoration: none;
}

.product-card-compact.product-card-featured {
    border-color: var(--color-primary);
    background: linear-gradient(135deg, rgba(30, 80, 161, 0.03), rgba(30, 80, 161, 0.08));
}

.product-featured-tag {
    position: absolute;
    top: -10px;
    left: var(--space-4);
    background: var(--color-primary);
    color: white;
    font-size: var(--font-size-xs); /* 14px */
    font-weight: 700;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.product-card-compact-icon {
    width: 56px;
    height: 56px;
    min-width: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    color: white;
}

.product-card-compact-icon .material-symbols-outlined {
    font-size: 28px;
}

.product-card-compact-content {
    flex: 1;
}

.product-card-compact-content h3 {
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: 600;
    /* color inherits from global rule (--color-primary) */
    margin-bottom: var(--space-1);
}

.product-card-compact-content > p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3);
    line-height: 1.5;
}

.product-quick-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.product-quick-features li {
    font-size: var(--font-size-xs); /* 14px */
    color: var(--color-text-secondary);
    background: var(--color-bg-secondary);
    padding: 4px 10px;
    border-radius: var(--radius-full);
}

.product-card-arrow {
    color: var(--color-primary);
    opacity: 0;
    transform: translateX(-8px);
    transition: var(--transition-all);
    align-self: center;
}

.product-card-compact:hover .product-card-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Responsive adjustments for lifecycle sections */
@media (max-width: 768px) {
    .product-cards-row {
        grid-template-columns: 1fr;
    }

    .product-card-compact {
        flex-direction: column;
    }

    .product-card-arrow {
        display: none;
    }
}

/* Products Grid - 5-column Atlassian-inspired layout */
.products-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-6);
}

/* Product Cards Grid - 4-column for other sections */
.product-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

.product-card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    text-decoration: none;
    color: var(--color-text-primary);
    transition: var(--transition-all);
}

.product-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    text-decoration: none;
}

.product-card-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-hover-blue);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
    flex-shrink: 0;
}

.product-card-icon .material-symbols-outlined {
    font-size: 28px;
    color: white;  /* White icon on colored backgrounds */
}

.product-card-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin-bottom: var(--space-2);
}

.product-card-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: var(--space-3);
    flex: 1;
}

.product-card-features {
    list-style: none;
    margin: 0 0 var(--space-4) 0;
    padding: 0;
}

.product-card-features li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-1);
}

.product-card-features .material-symbols-outlined {
    font-size: 16px;
    color: var(--color-success);
}

.product-card-link {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin-top: auto;
}

.product-card-link .material-symbols-outlined {
    font-size: 18px;
    transition: transform 0.2s ease;
}

.product-card:hover .product-card-link .material-symbols-outlined {
    transform: translateX(4px);
}

/* Product Card Actions - Buttons at bottom */
.product-card-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: auto;
}

.product-card-actions .btn {
    width: 100%;
    justify-content: center;
}

/* Text Button - minimal styling for secondary actions */
.btn-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-link);
    background: transparent;
    border: none;
    border-radius: var(--radius-default);
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition-all);
}

.btn-text:hover {
    color: var(--color-link-hover);
    background: var(--color-bg-hover);
    text-decoration: none;
}

/* Products Grid Responsive */
@media (max-width: 1200px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

/* Feature Split Section */
.feature-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-9);
    align-items: center;
}

.feature-split-reverse {
    direction: rtl;
}

.feature-split-reverse > * {
    direction: ltr;
}

.feature-eyebrow {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-2);
}

.feature-split-content h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-3);
}

.feature-split-content p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

.feature-list {
    list-style: none;
    margin: 0 0 var(--space-5) 0;
    padding: 0;
}

.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

.feature-list .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-success);
    flex-shrink: 0;
    margin-top: 2px;
}

.feature-ctas {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* Stat Card */
.stat-card {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    color: var(--color-text-inverse);
    text-align: center;
}

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

.stat-card-number {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    margin-bottom: var(--space-2);
}

.stat-card-label {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-2);
}

.stat-card-detail {
    font-size: var(--font-size-sm);
    opacity: 0.8;
}

/* Promo Banner */
.section-promo {
    background: linear-gradient(135deg, var(--color-bg-hover-blue) 0%, #F0F4FA 100%);
}

.promo-banner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-6);
    align-items: center;
}

.promo-banner h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-3);
}

.promo-banner p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
    max-width: 600px;
}

.promo-features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    list-style: none;
    margin: 0;
    padding: 0;
}

.promo-features li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.promo-features .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-success);
}

.promo-banner-cta {
    text-align: center;
    background: var(--color-bg-card);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    box-shadow: var(--shadow-md);
}

.promo-price {
    margin-bottom: var(--space-4);
}

.promo-price-label {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-1);
}

.promo-price-amount {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.promo-price-period {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.promo-note {
    display: block;
    margin-top: var(--space-3);
    font-size: var(--font-size-xs); /* 14px */
    color: var(--color-text-tertiary);
}

/* ===========================================
   PRODUCT FAMILY CARDS - Homepage Grid
   =========================================== */

.product-families-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.product-family-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    text-decoration: none;
    color: var(--color-text-primary);
    transition: var(--transition-all);
    position: relative;
}

.product-family-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    text-decoration: none;
}

.product-family-card-featured {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
}

.product-family-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: white;
    font-size: var(--font-size-xs); /* 14px */
    font-weight: var(--font-weight-bold);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.product-family-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
}

.product-family-icon .material-symbols-outlined {
    font-size: 32px;
    color: white;
}

.product-family-card h3 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin-bottom: var(--space-2);
}

.product-family-primary {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

.product-family-desc {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: var(--space-4);
    flex: 1;
}

.product-family-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin-top: auto;
}

.product-family-cta .material-symbols-outlined {
    font-size: 18px;
    transition: transform 0.2s ease;
}

.product-family-card:hover .product-family-cta .material-symbols-outlined {
    transform: translateX(4px);
}

/* Product Families Grid Responsive */
@media (max-width: 1200px) {
    .product-families-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .product-families-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .product-families-grid {
        grid-template-columns: 1fr;
    }
}

/* Organizations Panel - Homepage */
.section-orgs {
    background: var(--color-bg-page);
}

.orgs-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-6);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
}

.orgs-content h2 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-2);
}

.orgs-content p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    max-width: 500px;
}

.orgs-cta {
    display: flex;
    gap: var(--space-3);
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .orgs-panel {
        flex-direction: column;
        text-align: center;
    }

    .orgs-content p {
        max-width: none;
    }

    .orgs-cta {
        flex-direction: column;
        width: 100%;
    }

    .orgs-cta .btn {
        width: 100%;
    }
}

/* Why BARBRI */
.why-barbri-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.why-barbri-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    border: 1px solid var(--color-border-light);
    text-align: center;
}

.why-barbri-icon {
    font-size: 48px;
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}

.why-barbri-card h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-2);
    color: var(--color-text-primary);
}

.why-barbri-card p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: var(--line-height-relaxed);
}

@media (max-width: 900px) {
    .why-barbri-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .why-barbri-card {
        padding: var(--space-5);
    }
}

/* Stats Bar */
.stats-bar {
    background-color: var(--color-primary);
    padding: var(--space-6) 0;
}

.stats-bar-inner {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: var(--space-5);
}

.stat-item {
    text-align: center;
    color: var(--color-text-inverse);
}

.stat-number {
    display: block;
    font-family: var(--font-family-heading);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    margin-bottom: var(--space-1);
}

.stat-label {
    font-size: var(--font-size-sm);
    opacity: 0.85;
}

.stat-source {
    display: block;
    font-size: var(--font-size-xs);
    opacity: 0.7;
    margin-top: var(--space-1);
    font-style: italic;
}

/* Light background variant */
.stats-bar-light .stat-source {
    color: var(--color-text-secondary);
}

/* Exam Info Grid (Jurisdiction Pages) */
.exam-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: start;
}

.exam-info-table {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.exam-info-table table {
    width: 100%;
    border-collapse: collapse;
}

.exam-info-table th,
.exam-info-table td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--color-border-light);
}

.exam-info-table tr:last-child th,
.exam-info-table tr:last-child td {
    border-bottom: none;
}

.exam-info-table th {
    background: var(--color-bg-secondary);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    width: 45%;
}

.exam-info-table td {
    color: var(--color-text-secondary);
}

.exam-info-description {
    padding: var(--space-4);
}

.exam-info-description p {
    margin-bottom: var(--space-4);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
}

.exam-info-description p:last-child {
    margin-bottom: 0;
}

.exam-info-description .external-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

.exam-info-description .external-link .material-symbols-outlined {
    font-size: 16px;
}

.exam-info-description .nextgen-notice {
    background: linear-gradient(135deg, #E5ECF9 0%, #f0f4f8 100%);
    border-left: 4px solid var(--color-primary);
    padding: var(--space-4);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-top: var(--space-4);
    color: var(--color-text-primary);
}

.exam-info-description .nextgen-notice a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

.exam-info-description .nextgen-notice a .material-symbols-outlined {
    font-size: 14px;
}

@media (max-width: 768px) {
    .exam-info-grid {
        grid-template-columns: 1fr;
    }
}

/* Testimonials */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.testimonial-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.testimonial-quote {
    margin-bottom: var(--space-3);
}

.testimonial-quote .material-symbols-outlined {
    font-size: 32px;
    color: var(--color-primary);
    opacity: 0.3;
}

.testimonial-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-style: italic;
    line-height: 1.6;
    margin-bottom: var(--space-4);
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.testimonial-photo {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: var(--color-bg-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.testimonial-photo .material-symbols-outlined {
    font-size: 24px;
    color: var(--color-text-tertiary);
}

.testimonial-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-full);
}

.testimonial-author-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.testimonial-author-name,
.testimonial-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.testimonial-author-title,
.testimonial-school {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

/* Enterprise CTA */
.enterprise-cta {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-6);
    align-items: center;
}

.enterprise-cta h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-3);
}

.enterprise-cta p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
    max-width: 600px;
}

.enterprise-features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.enterprise-feature {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.enterprise-feature .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-primary);
}

.enterprise-cta-action {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Final CTA */
.section-final-cta {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    padding: var(--space-10) 0;
}

.final-cta {
    text-align: center;
    color: var(--color-text-inverse);
}

.final-cta h2 {
    font-size: var(--font-size-2xl);
    color: var(--color-text-inverse);
    margin-bottom: var(--space-3);
}

.final-cta p {
    font-size: var(--font-size-base);
    opacity: 0.9;
    margin-bottom: var(--space-5);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.final-cta-buttons {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.final-cta .btn-primary {
    background-color: var(--color-bg-card);
    color: var(--color-text-primary);  /* Rich Black, NOT blue */
}

.final-cta .btn-primary:hover {
    background-color: var(--color-bg-hover);
}

.final-cta .btn-secondary {
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--color-text-inverse);
}

.final-cta .btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--color-text-inverse);
}

/* ===========================================
   PRODUCT FAMILY LANDING PAGES
   =========================================== */

.product-family-page {
    background: var(--color-bg-card); /* White base */
}

/* Grey background only for testimonials section */
.product-family-page .section:has(.testimonials-grid-2col) {
    background: var(--color-bg-page);
}

/* Hero for Product Family Pages */
.hero-family {
    background: linear-gradient(180deg, #FFFFFF 0%, var(--color-bg-hover-blue) 100%);
    padding: var(--space-10) 0;
}

.hero-family-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: center;
}

.hero-family-content {
    max-width: 600px;
}

.hero-family h1 {
    font-size: var(--font-size-3xl);
    color: var(--color-primary);
    margin-bottom: var(--space-3);
    line-height: var(--line-height-tight);
}

.hero-family-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-5);
    line-height: var(--line-height-normal);
}

.hero-family-ctas {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.hero-family-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Stats card in hero */
.hero-stats-card {
    background: var(--color-bg-card);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 280px;
}

.hero-stat-item {
    text-align: center;
}

.hero-stat-number {
    display: block;
    font-family: var(--font-family-heading);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: var(--space-1);
}

.hero-stat-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* Product badges */
.product-badge {
    display: inline-block;
    background: var(--color-primary-tint);
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.product-badge-featured {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.product-badge-free {
    background: var(--color-success-light);
    color: var(--color-success-dark);
}

/* Price preview in product sections */
.product-price-preview {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.price-from {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.price-amount {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.price-free {
    color: var(--color-success);
}

.price-tiers {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

/* Product family page responsive */
@media (max-width: 1024px) {
    .hero-family-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-family-content {
        max-width: 700px;
        margin: 0 auto;
    }

    .hero-family-ctas {
        justify-content: center;
    }

    .hero-stats-card {
        flex-direction: row;
        justify-content: space-around;
        max-width: 500px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .hero-family {
        padding: var(--space-8) 0;
    }

    .hero-family h1 {
        font-size: var(--font-size-2xl);
    }

    .hero-family-subtitle {
        font-size: var(--font-size-base);
    }

    .hero-family-ctas {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-family-ctas .btn {
        width: 100%;
    }

    .hero-stats-card {
        flex-direction: column;
        max-width: 100%;
    }
}

/* ===========================================
   HOMEPAGE RESPONSIVE
   =========================================== */

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

    .feature-split {
        gap: var(--space-6);
    }
}

@media (max-width: 768px) {
    .hero-home {
        padding: var(--space-8) 0;
    }

    .hero-home h1 {
        font-size: var(--font-size-2xl);
    }

    .hero-home-subtitle {
        font-size: var(--font-size-base);
    }

    .hero-home-ctas {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .hero-home-ctas .btn {
        width: 100%;
    }

    .product-cards-grid {
        grid-template-columns: 1fr;
    }

    .feature-split {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .feature-split-reverse {
        direction: ltr;
    }

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

    .promo-features {
        justify-content: center;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
    }

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

    .enterprise-features {
        justify-content: center;
    }

    .enterprise-cta-action {
        align-items: center;
    }
}

/* ===========================================
   TEARDROP PATTERN
   Signature BARBRI design element
   =========================================== */

.teardrop-panel {
    border-radius: 24px 0 24px 0;
}

.teardrop-panel-sm {
    border-radius: 16px 0 16px 0;
}

.teardrop-panel-lg {
    border-radius: 32px 0 32px 0;
}

.teardrop-sm {
    border-radius: 0 8px 0 8px;
}

.teardrop-md {
    border-radius: 0 16px 0 16px;
}

/* ===========================================
   NEW HOMEPAGE - Atlassian-Style Product Groups
   =========================================== */

/* Hero with Grid Layout (Content + Visual) */
.hero-home-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: center;
    text-align: left;
}

.hero-home-content {
    max-width: none;
    margin: 0;
}

.hero-badge {
    display: inline-block;
    background: var(--color-primary);
    color: white;
    font-size: var(--font-size-xs); /* 14px */
    font-weight: 600;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-4);
    letter-spacing: 0.5px;
}

.hero-home-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-image-placeholder {
    width: 100%;
    max-width: 480px;
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, var(--color-primary) 0%, #1a4578 100%);
    border-radius: 24px 0 24px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    color: white;
    cursor: pointer;
    transition: var(--transition-all);
}

.hero-image-placeholder:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 60px rgba(42, 84, 136, 0.3);
}

/* Prepend "Placeholder: " to hero image placeholder text */
.hero-image-placeholder span:not(.material-symbols-outlined)::before {
    content: "Placeholder: ";
    opacity: 0.7;
}

.hero-image-placeholder .material-symbols-outlined {
    font-size: 64px;
}

.hero-image-text {
    font-size: var(--font-size-lg);
    font-weight: 600;
}

/* Product Stages - Atlassian-style grouped products */
.product-stage {
    margin-bottom: var(--space-10);
    padding: var(--space-6);
    background: var(--color-bg-secondary);
    border-radius: 16px 0 16px 0;
}

.product-stage:last-child {
    margin-bottom: 0;
}

.product-stage-featured {
    background: linear-gradient(135deg, rgba(42, 84, 136, 0.05) 0%, rgba(42, 84, 136, 0.1) 100%);
    border: 2px solid rgba(42, 84, 136, 0.2);
}

.product-stage-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.product-stage-icon {
    width: 56px;
    height: 56px;
    min-width: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: white;
    border-radius: var(--radius-lg);
}

.product-stage-icon .material-symbols-outlined {
    font-size: 28px;
}

.product-stage-intro h3 {
    font-size: var(--font-size-xl);
    color: var(--color-primary);
    margin-bottom: var(--space-1);
}

.product-stage-intro p {
    color: var(--color-text-secondary);
    margin: 0;
}

.product-stage-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
}

.product-stage-cta {
    margin-top: var(--space-5);
    text-align: center;
}

/* Product Mini Cards */
.product-mini-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    text-decoration: none;
    color: var(--color-text-primary);
    transition: var(--transition-all);
}

.product-mini-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    text-decoration: none;
}

.product-mini-card-primary {
    border-color: var(--color-primary);
    background: linear-gradient(135deg, rgba(42, 84, 136, 0.02) 0%, rgba(42, 84, 136, 0.05) 100%);
}

.product-mini-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: white;
    border-radius: var(--radius-md);
}

.product-mini-icon .material-symbols-outlined {
    font-size: var(--font-size-lg); /* 24px */
}

.product-mini-content {
    flex: 1;
}

.product-mini-content h4 {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.product-mini-content p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.5;
}

.product-mini-stat {
    display: inline-block;
    margin-top: var(--space-2);
    font-size: var(--font-size-xs); /* 14px */
    font-weight: 600;
    color: var(--color-primary);
    background: rgba(42, 84, 136, 0.1);
    padding: 4px 10px;
    border-radius: var(--radius-full);
}

.product-mini-arrow {
    color: var(--color-text-tertiary);
    align-self: center;
    transition: var(--transition-all);
}

.product-mini-card:hover .product-mini-arrow {
    color: var(--color-primary);
    transform: translateX(4px);
}

.product-mini-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-self: center;
    flex-shrink: 0;
}

.product-mini-actions .btn {
    white-space: nowrap;
}

.external-badge {
    font-size: var(--font-size-xs); /* 14px */
    font-weight: 500;
    color: var(--color-text-tertiary);
    background: var(--color-bg-secondary);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    margin-left: var(--space-1);
    vertical-align: middle;
}

/* Spotlight Panel */
.section-spotlight {
    background: linear-gradient(135deg, #F0F4F9 0%, #E8EEF5 100%);
}

.spotlight-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: center;
    background: white;
    padding: var(--space-8);
    box-shadow: var(--shadow-xl);
}

.spotlight-content .feature-eyebrow {
    display: inline-block;
    font-size: var(--font-size-xs); /* 14px */
    font-weight: 600;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-3);
}

.spotlight-content h2 {
    font-size: var(--font-size-2xl);
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}

.spotlight-content > p {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

.spotlight-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

.spotlight-image-placeholder {
    width: 100%;
    aspect-ratio: 4/3;
    background: linear-gradient(135deg, var(--color-bg-secondary) 0%, #E0E7EF 100%);
    border-radius: 16px 0 16px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    color: var(--color-text-secondary);
    border: 2px dashed var(--color-border-default);
}

.spotlight-image-placeholder .material-symbols-outlined {
    font-size: 48px;
    color: var(--color-primary);
}

.spotlight-image-label {
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.spotlight-stat {
    position: absolute;
    bottom: -20px;
    right: 20px;
    background: var(--color-primary);
    color: white;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-lg);
}

.spotlight-stat-number {
    display: block;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    line-height: 1;
}

.spotlight-stat-label {
    font-size: var(--font-size-sm);
    opacity: 0.9;
}

/* Promo Panel */
.promo-panel {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-8);
    align-items: center;
    background: white;
    padding: var(--space-8);
    border: 1px solid var(--color-border-light);
}

.promo-panel-cle {
    background: linear-gradient(135deg, #F8FAFC 0%, #EEF2F7 100%);
}

.promo-panel-content .feature-eyebrow {
    display: block;
    font-size: var(--font-size-xs); /* 14px */
    font-weight: 600;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-2);
}

.promo-panel-content h2 {
    font-size: var(--font-size-xl);
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}

.promo-panel-content > p {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
    max-width: 600px;
}

.promo-features-grid {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: var(--space-2) var(--space-5);
}

.promo-feature {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.promo-feature .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-success);
}

.promo-panel-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    text-align: center;
    min-width: 200px;
}

.promo-price-display {
    text-align: center;
}

.promo-price-from {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.promo-price-amount {
    display: block;
    font-size: var(--font-size-3xl); /* 40px */
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.1;
}

.promo-price-period {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* Enterprise Panel */
.section-enterprise {
    background: var(--color-bg-secondary);
}

.enterprise-panel {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-8);
    align-items: center;
    background: white;
    padding: var(--space-8);
    box-shadow: var(--shadow-lg);
}

.enterprise-content h2 {
    font-size: var(--font-size-xl);
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}

.enterprise-content > p {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-5);
}

.enterprise-features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.enterprise-feature {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.enterprise-feature .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-primary);
}

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

/* Updated Testimonials */
.section-testimonials {
    background: linear-gradient(135deg, #F8FAFC 0%, #F0F4F9 100%);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.testimonial-card {
    background: white;
    padding: var(--space-5);
    box-shadow: var(--shadow-md);
}

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

.testimonial-text {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    font-style: italic;
    line-height: 1.6;
    margin: 0;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.testimonial-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--font-size-sm);
}

.testimonial-author-info {
    display: flex;
    flex-direction: column;
}

.testimonial-author-name {
    font-weight: 600;
    color: var(--color-text-primary);
}

.testimonial-author-title {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* Final CTA with outline buttons */
.btn-outline {
    background: transparent;
    border: 2px solid white;
    color: white;
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    text-decoration: none;
}

.final-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
}

/* Homepage Responsive Updates */
@media (max-width: 1024px) {
    .hero-home-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-home-visual {
        order: -1;
    }

    .hero-image-placeholder {
        max-width: 400px;
    }

    .spotlight-panel {
        grid-template-columns: 1fr;
    }

    .spotlight-visual {
        order: -1;
    }

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

    .promo-features-grid {
        justify-content: center;
    }

    .promo-panel-cta {
        width: 100%;
    }

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

    .enterprise-features {
        justify-content: center;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .product-stage {
        padding: var(--space-4);
    }

    .product-stage-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .product-stage-cards {
        grid-template-columns: 1fr;
    }

    .spotlight-panel,
    .promo-panel,
    .enterprise-panel {
        padding: var(--space-5);
    }
}

/* ===========================================
   BAR REVIEW PAGE STYLES
   =========================================== */

/* Bar Hero */
.bar-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    padding: var(--space-10) 0;
    color: var(--color-text-inverse);
}

.bar-hero-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.hero-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-full);
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-4);
}

.bar-hero h1 {
    font-size: var(--font-size-4xl);
    color: var(--color-text-inverse);
    margin-bottom: var(--space-4);
    line-height: 1.15;
}

.bar-hero-subtitle {
    font-size: var(--font-size-lg);
    opacity: 0.9;
    margin-bottom: var(--space-6);
    line-height: 1.5;
}

.bar-hero-ctas {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    margin-bottom: var(--space-7);
    flex-wrap: wrap;
}

.bar-hero .btn-primary {
    background-color: var(--color-bg-card);
    color: var(--color-text-primary);  /* Rich Black, NOT blue */
}

.bar-hero .btn-primary:hover {
    background-color: var(--color-bg-hover);
}

.bar-hero .btn-secondary {
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--color-text-inverse);
}

.bar-hero .btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--color-text-inverse);
}

.bar-hero-stats {
    display: flex;
    justify-content: center;
    gap: var(--space-8);
    flex-wrap: wrap;
}

.bar-hero-stat {
    text-align: center;
}

.bar-hero-stat-number {
    display: block;
    font-family: var(--font-family-heading);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    margin-bottom: var(--space-1);
}

.bar-hero-stat-label {
    font-size: var(--font-size-sm);
    opacity: 0.85;
}

/* Section utilities */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: var(--space-5);
}

.section-subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin-top: var(--space-2);
    margin-bottom: var(--space-6);
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.feature-box {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-align: center;
}

.feature-box-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-hover-blue);
    border-radius: var(--radius-lg);
    margin: 0 auto var(--space-4);
}

.feature-box-icon .material-symbols-outlined {
    font-size: 32px;
    color: var(--color-primary);
}

.feature-box h3 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-md);
    color: var(--color-primary);
    margin-bottom: var(--space-2);
}

.feature-box p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: 0;
}

/* Compact Feature Box - for smaller grid items */
.feature-box-compact {
    padding: var(--space-4);
}

.feature-box-compact .feature-box-icon {
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-3);
}

.feature-box-compact .feature-box-icon .material-symbols-outlined {
    font-size: 24px;
}

.feature-box-compact h3 {
    font-size: var(--font-size-base);
    margin-bottom: var(--space-1);
}

.feature-box-compact p {
    font-size: var(--font-size-xs); /* 14px */
}

/* Featured Testimonial - large quote block */
.testimonial-featured {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    padding: var(--space-8);
    text-align: center;
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.testimonial-quote-mark {
    font-family: Georgia, serif;
    font-size: var(--font-size-8xl); /* 81px - max in scale */
    color: var(--color-primary);
    opacity: 0.15;
    line-height: 1;
    position: absolute;
    top: var(--space-4);
    left: var(--space-6);
}

.testimonial-text {
    font-size: var(--font-size-lg);
    line-height: 1.6;
    color: var(--color-text-primary);
    font-style: italic;
    margin: 0 0 var(--space-5);
    position: relative;
    z-index: 1;
}

.testimonial-author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
}

.testimonial-author-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.testimonial-author-name {
    font-weight: 600;
    color: var(--color-text-primary);
}

.testimonial-author-title {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* How It Works */
.how-it-works-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.how-step {
    flex: 0 0 200px;
    text-align: center;
}

.how-step-number {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-full);
    margin: 0 auto var(--space-3);
}

.how-step h3 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-md);
    color: var(--color-primary);
    margin-bottom: var(--space-2);
}

.how-step p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: 0;
}

.how-step-arrow {
    display: flex;
    align-items: center;
    padding-top: 10px;
    color: var(--color-border-default);
}

.how-step-arrow .material-symbols-outlined {
    font-size: 28px;
}

/* Guarantee Banner */
.guarantee-banner {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    background: linear-gradient(135deg, var(--color-success-light) 0%, #E8F4E0 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
}

.guarantee-icon {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-success);
    border-radius: var(--radius-full);
}

.guarantee-icon .material-symbols-outlined {
    font-size: 40px;
    color: var(--color-text-inverse);
}

.guarantee-content h2 {
    font-size: var(--font-size-xl);
    color: var(--color-success-dark);
    margin-bottom: var(--space-2);
}

.guarantee-content p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

/* States Grid */
.states-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}

.state-card {
    display: flex;
    align-items: center;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    text-decoration: none;
    transition: var(--transition-all);
}

.state-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}

.state-card-name {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    flex: 1;
}

.state-card-exam {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-right: var(--space-3);
}

.state-card-arrow {
    font-size: 20px;
    color: var(--color-primary);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.state-card:hover .state-card-arrow {
    opacity: 1;
    transform: translateX(4px);
}

/* Testimonial Rating */
.testimonial-rating {
    display: flex;
    gap: 2px;
    margin-bottom: var(--space-3);
}

.testimonial-rating .material-symbols-outlined {
    font-size: 18px;
    color: #FFB800;
}

/* Pricing Preview */
.pricing-preview {
    display: flex;
    justify-content: center;
}

.pricing-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    text-align: center;
    max-width: 400px;
    width: 100%;
}

.pricing-card-featured {
    border: 2px solid var(--color-primary);
    position: relative;
}

.pricing-card-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-size: var(--font-size-xs); /* 14px */
    font-weight: var(--font-weight-semibold);
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-full);
}

.pricing-card-name {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}

.pricing-card-price {
    margin-bottom: var(--space-5);
}

.pricing-amount {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.pricing-card-features {
    list-style: none;
    margin: 0 0 var(--space-5) 0;
    padding: 0;
    text-align: left;
}

.pricing-card-features li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

.pricing-card-features .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-success);
}

/* ===========================================
   BAR REVIEW RESPONSIVE
   =========================================== */

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

    .states-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .bar-hero {
        padding: var(--space-8) 0;
    }

    .bar-hero h1 {
        font-size: var(--font-size-2xl);
    }

    .bar-hero-subtitle {
        font-size: var(--font-size-base);
    }

    .bar-hero-stats {
        gap: var(--space-5);
    }

    .bar-hero-stat-number {
        font-size: var(--font-size-2xl);
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .how-it-works-steps {
        flex-direction: column;
        align-items: center;
    }

    .how-step {
        flex: none;
        width: 100%;
        max-width: 300px;
    }

    .how-step-arrow {
        transform: rotate(90deg);
        padding: var(--space-2) 0;
    }

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

    .states-grid {
        grid-template-columns: 1fr;
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }
}

/* ===========================================
   PROFESSIONAL EDUCATION PAGE STYLES
   =========================================== */

/* PE Hero */
.pe-hero {
    background: linear-gradient(135deg, #F8FAFC 0%, #EEF2F7 100%);
    padding: var(--space-9) 0 var(--space-7);
    text-align: center;
}

.pe-hero h1 {
    font-size: var(--font-size-3xl);
    color: var(--color-primary);
    margin-bottom: var(--space-2);
}

.pe-hero-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-5);
}

/* PE Search */
.pe-search {
    position: relative;
    max-width: 640px;
    margin: 0 auto var(--space-4);
}

.pe-search-icon {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: var(--color-text-tertiary);
    pointer-events: none;
}

.pe-search input {
    width: 100%;
    height: 56px;
    padding: 0 var(--space-7) 0 var(--space-9); /* 64px left for icon clearance */
    font-size: var(--font-size-base);
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-full);
    background: var(--color-bg-card);
    transition: var(--transition-all);
}

.pe-search input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus-light);
}

.pe-search-clear {
    position: absolute;
    right: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--color-text-tertiary);
    cursor: pointer;
    border-radius: var(--radius-full);
}

.pe-search-clear:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.pe-search.has-value .pe-search-clear {
    display: flex;
}

.pe-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: var(--space-2);
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    display: none;
    z-index: var(--z-dropdown);
}

.pe-search-dropdown.show {
    display: block;
}

.pe-search-results {
    max-height: 320px;
    overflow-y: auto;
    padding: var(--space-2);
}

.pe-search-browse-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3);
    border-top: 1px solid var(--color-border-light);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    text-decoration: none;
}

.pe-search-browse-all:hover {
    background: var(--color-bg-hover-blue);
    text-decoration: none;
}

.pe-search-empty,
.pe-search-loading {
    padding: var(--space-4);
    text-align: center;
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
}

.pe-search-result {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.pe-search-result:hover {
    background: var(--color-bg-hover);
    text-decoration: none;
}

.pe-search-result-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.pe-search-result-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pe-search-result-meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.pe-search-result > .material-symbols-outlined {
    color: var(--color-text-tertiary);
    font-size: 20px;
}

/* Browse Links */
.pe-browse-links {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.pe-browse-links a {
    color: var(--color-link);
    text-decoration: none;
}

.pe-browse-links a:hover {
    text-decoration: underline;
}

.pe-browse-divider {
    margin: 0 var(--space-2);
    color: var(--color-border-default);
}

/* Pass Banner */
.pe-pass-banner {
    background: var(--color-primary);
    padding: var(--space-4) 0;
}

.pass-banner-inner {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
}

.pass-banner-content {
    flex: 1;
    color: var(--color-text-inverse);
    min-width: 200px;
}

.pass-banner-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs); /* 14px */
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-1);
}

.pass-banner-content h2 {
    font-size: var(--font-size-lg);
    color: var(--color-text-inverse);
    margin-bottom: 0;
}

.pass-banner-content p {
    font-size: var(--font-size-sm);
    opacity: 0.9;
    margin-bottom: 0;
}

.pass-banner-price {
    color: var(--color-text-inverse);
    text-align: center;
}

.pass-price-label {
    display: block;
    font-size: var(--font-size-xs); /* 14px */
    opacity: 0.8;
}

.pass-price-amount {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
}

.pass-price-period {
    font-size: var(--font-size-sm);
    opacity: 0.8;
}

.pe-pass-banner .btn-primary {
    background: var(--color-bg-card);
    color: var(--color-text-primary);  /* Rich Black, NOT blue */
    white-space: nowrap;
}

.pe-pass-banner .btn-primary:hover {
    background: var(--color-bg-hover);
}

/* Courses Dual Panel */
.courses-dual-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
}

.courses-panel {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
}

.courses-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.courses-panel-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.courses-panel-title .material-symbols-outlined {
    font-size: 24px;
    color: var(--color-primary);
}

.courses-panel-title h2 {
    font-size: var(--font-size-md);
    margin: 0;
}

.panel-link {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    text-decoration: none;
}

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

.panel-link .material-symbols-outlined {
    font-size: 16px;
}

/* Course Compact Card */
.course-compact {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-text-primary);
    transition: background 0.15s ease;
}

.course-compact:hover {
    background: var(--color-bg-hover);
    text-decoration: none;
}

.course-compact-date {
    flex-shrink: 0;
    width: 48px;
    text-align: center;
    background: var(--color-bg-hover-blue);
    border-radius: var(--radius-md);
    padding: var(--space-2);
}

.course-compact-month {
    display: block;
    font-size: var(--font-size-xs); /* 14px */
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    text-transform: uppercase;
}

.course-compact-day {
    display: block;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    line-height: 1;
}

.course-compact-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-hover);
    border-radius: var(--radius-md);
}

.course-compact-icon .material-symbols-outlined {
    font-size: 24px;
    color: var(--color-text-secondary);
}

.course-compact-content {
    flex: 1;
    min-width: 0;
}

.course-compact-content .chip {
    margin-right: var(--space-2);
}

.course-compact-time {
    font-size: var(--font-size-xs); /* 14px */
    color: var(--color-text-secondary);
}

.course-compact-area {
    font-size: var(--font-size-xs); /* 14px */
    color: var(--color-text-secondary);
}

.course-compact-title {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: var(--space-1) 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.course-compact-jurisdictions {
    font-size: var(--font-size-xs); /* 14px */
    color: var(--color-text-tertiary);
}

.course-compact-arrow {
    flex-shrink: 0;
    font-size: 20px;
    color: var(--color-text-tertiary);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.course-compact:hover .course-compact-arrow {
    opacity: 1;
}

.courses-panel-empty {
    padding: var(--space-4);
    text-align: center;
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
}

/* Value Props Grid */
.value-props-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

.value-prop-item {
    text-align: center;
    padding: var(--space-4);
}

.value-prop-item .material-symbols-outlined {
    font-size: var(--font-size-3xl); /* 40px */
    color: var(--color-primary);
    margin-bottom: var(--space-2);
}

.value-prop-item h3 {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.value-prop-item p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

/* Jurisdictions Grid */
.jurisdictions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
}

.jurisdiction-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: var(--transition-all);
}

.jurisdiction-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}

.jurisdiction-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.jurisdiction-count {
    font-size: var(--font-size-xs); /* 14px */
    color: var(--color-text-tertiary);
}

/* Chips for course types */
.chip-cle {
    background: #E3F2FD;
    color: #1565C0;
}

.chip-cpe {
    background: #E8F5E9;
    color: #2E7D32;
}

.chip-skills {
    background: #FFF3E0;
    color: #E65100;
}

.chip-microlearning {
    background: #F3E5F5;
    color: #7B1FA2;
}

.chip-simulations {
    background: #FCE4EC;
    color: #C2185B;
}

/* ===========================================
   PE RESPONSIVE
   =========================================== */

@media (max-width: 1024px) {
    .courses-dual-panel {
        grid-template-columns: 1fr;
    }

    .value-props-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .jurisdictions-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .pe-hero h1 {
        font-size: var(--font-size-2xl);
    }

    .pe-search input {
        height: 48px;
        font-size: var(--font-size-sm);
    }

    .pass-banner-inner {
        flex-direction: column;
        text-align: center;
    }

    .value-props-grid {
        grid-template-columns: 1fr;
    }

    .jurisdictions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===========================================
   COURSE DETAIL PAGE (CLE/CPE)
   =========================================== */

.course-detail-page {
    padding: var(--space-6) 0;
}

.course-detail-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: var(--space-8);
    margin-top: var(--space-6);
}

/* Main Content */
.course-detail-main {
    min-width: 0;
}

.course-detail-header {
    margin-bottom: var(--space-6);
}

.course-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.course-detail-header h1 {
    font-size: var(--font-size-3xl);
    font-family: var(--font-family-heading);
    color: var(--color-primary);
    margin: 0 0 var(--space-4);
    line-height: 1.2;
}

.course-detail-info {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.course-detail-info-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.course-detail-info-item .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-primary);
}

/* Type badges */
.course-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    background: var(--color-bg-subtle);
    color: var(--color-text-secondary);
}

.course-type-badge.type-cle {
    background: #E8EEF5;
    color: #2A5488;
}

.course-type-badge.type-cpe {
    background: #F3E5F5;
    color: #7B1FA2;
}

.course-type-badge.type-skills {
    background: #E8F5E9;
    color: #2E7D32;
}

.course-format-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    background: var(--color-bg-subtle);
    color: var(--color-text-secondary);
}

/* Live Banner */
.live-banner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: linear-gradient(135deg, #E8EEF5 0%, #F5F7FA 100%);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
    border-left: 4px solid var(--color-primary);
}

.live-banner .material-symbols-outlined {
    font-size: 32px;
    color: var(--color-primary);
}

.live-banner-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.live-banner-date {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.live-banner-time {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* Section styling */
.course-detail-section {
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border-light);
}

.course-detail-section:last-child {
    border-bottom: none;
}

.course-detail-section h2 {
    font-size: var(--font-size-xl);
    font-family: var(--font-family-heading);
    color: var(--color-primary);
    margin: 0 0 var(--space-4);
}

/* Course Video Preview */
.course-video-section {
    margin-bottom: var(--space-6);
}

.course-video-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    cursor: pointer;
    background: var(--color-bg-subtle);
}

.course-video-thumbnail {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.course-video-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: black;
}

.course-video-placeholder .material-symbols-outlined {
    font-size: 96px;
    color: white;
    opacity: 0.3;
}

.course-video-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    z-index: 1;
    background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.5) 100%);
}

.course-video-play {
    background: rgba(42, 84, 136, 0.9);
    border: 3px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.course-video-play .play-icon {
    width: 32px;
    height: 32px;
    color: white;
    margin-left: 4px; /* Visual centering for play triangle */
}

.course-video-preview:hover .course-video-play {
    transform: scale(1.1);
    background: rgba(42, 84, 136, 1);
}

.course-video-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: white;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.course-detail-description {
    color: var(--color-text-secondary);
    line-height: 1.7;
}

/* Presenters */
.course-detail-presenters {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.presenter-item {
    display: flex;
    gap: var(--space-4);
}

.presenter-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.presenter-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.presenter-initials {
    color: white;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-lg);
}

.presenter-details h4 {
    margin: 0 0 var(--space-1);
    font-size: var(--font-size-base);
}

.presenter-details h4 a {
    color: var(--color-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.presenter-details h4 a:hover {
    text-decoration: underline;
}

.presenter-details h4 .material-symbols-outlined {
    font-size: 14px;
}

.presenter-role {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.presenter-bio {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* Credits Table */
.credits-table-wrapper {
    overflow-x: auto;
}

.credits-table {
    width: 100%;
    border-collapse: collapse;
}

.credits-table th,
.credits-table td {
    padding: var(--space-3);
    text-align: left;
    border-bottom: 1px solid var(--color-border-light);
}

.credits-table th {
    background: var(--color-bg-subtle);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.credits-table td {
    font-size: var(--font-size-sm);
}

.credits-amount {
    font-weight: var(--font-weight-semibold);
    text-align: center;
}

.credit-type-badge {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    background: var(--color-bg-subtle);
    color: var(--color-text-secondary);
}

/* NASBA Section */
.nasba-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.nasba-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.nasba-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    text-transform: uppercase;
}

.nasba-value {
    font-weight: var(--font-weight-semibold);
}

.learning-objectives {
    margin: var(--space-4) 0;
    padding: var(--space-4);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-md);
}

.learning-objectives h3 {
    font-size: var(--font-size-base);
    margin: 0 0 var(--space-2);
}

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

.nasba-sponsor {
    margin-top: var(--space-4);
    padding: var(--space-3);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-sm);
}

.nasba-sponsor p {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    line-height: 1.5;
}

/* Course Outline */
.course-outline {
    margin: 0;
    padding: 0;
    list-style: none;
}

.course-outline li {
    padding: var(--space-3) 0;
    padding-left: var(--space-6);
    border-bottom: 1px solid var(--color-border-light);
    position: relative;
}

.course-outline li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary);
}

.course-outline li:last-child {
    border-bottom: none;
}

/* Sidebar */
.course-detail-sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--space-6)); /* Header (72px) + padding (40px) = 112px */
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    height: fit-content;
}

/* Purchase Card */
.course-purchase-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--color-border-light);
}

.course-purchase-price {
    text-align: center;
    margin-bottom: var(--space-4);
}

.course-purchase-price .price-amount,
.wa-purchase-price .price-amount {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.course-purchase-actions {
    margin-bottom: var(--space-4);
}

.course-purchase-divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-4) 0;
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
}

.course-purchase-divider::before,
.course-purchase-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border-light);
}

.course-purchase-pass {
    text-align: center;
}

.pass-promo-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-3);
}

/* Credit Card Widget */
.course-credit-card,
.course-details-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    border: 1px solid var(--color-border-light);
}

.course-credit-card h3,
.course-details-card h3 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--space-3);
    color: var(--color-text-secondary);
    text-transform: uppercase;
}

.credit-summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.credit-summary .material-symbols-outlined {
    color: var(--color-success);
    font-size: 20px;
}

.course-details-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.course-details-list li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.course-details-list li .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-primary);
}

/* Related Courses Section */
.related-courses-section {
    background: var(--color-bg-subtle);
    padding: var(--space-10) 0;
    margin-top: var(--space-8);
}

.related-courses-section h2 {
    font-size: var(--font-size-2xl);
    font-family: var(--font-family-heading);
    color: var(--color-primary);
    margin: 0 0 var(--space-6);
}

.related-courses-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.related-course-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    text-decoration: none;
    border: 1px solid var(--color-border-light);
    transition: box-shadow 0.2s, transform 0.2s;
}

.related-course-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.related-course-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
}

.related-course-duration {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.related-course-card h3 {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2);
    line-height: 1.4;
}

.related-course-price {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

/* Course Detail Responsive */
@media (max-width: 1024px) {
    .course-detail-layout {
        grid-template-columns: 1fr;
    }

    .course-detail-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }

    .course-purchase-card {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .course-detail-header h1 {
        font-size: var(--font-size-2xl);
    }

    .course-detail-info {
        flex-direction: column;
        gap: var(--space-2);
    }

    .nasba-details {
        grid-template-columns: 1fr;
    }

    .related-courses-grid {
        grid-template-columns: 1fr;
    }

    .course-detail-sidebar {
        grid-template-columns: 1fr;
    }

    .course-purchase-card {
        grid-column: span 1;
    }
}

/* ===========================================
   PRICING PAGE STYLES
   =========================================== */

.pricing-page {
    background: var(--color-bg-page);
}

/* Pricing Hero */
.pricing-hero {
    background: linear-gradient(180deg, #FFFFFF 0%, var(--color-bg-page) 100%);
    padding: var(--space-8) 0 var(--space-6);
    text-align: center;
}

.pricing-hero h1 {
    font-size: var(--font-size-3xl);
    color: var(--color-primary);
    margin-bottom: var(--space-2);
}

.pricing-hero-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin: 0;
}

/* Pricing Configuration Toggles */
.pricing-config-section {
    background: var(--color-bg-page);
    padding: var(--space-6) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.pricing-toggles {
    display: flex;
    justify-content: center;
    gap: var(--space-8);
    flex-wrap: wrap;
}

.pricing-toggle-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.pricing-toggle-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pricing-toggle-options {
    display: flex;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.pricing-toggle-option {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-decoration: none;
    border-right: 1px solid var(--color-border);
    transition: all 0.2s ease;
}

.pricing-toggle-option:last-child {
    border-right: none;
}

.pricing-toggle-option:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.pricing-toggle-option.active {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

/* Pricing Links */
.pricing-links {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
    margin-top: var(--space-5);
    flex-wrap: wrap;
}

.pricing-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    text-decoration: none;
}

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

.pricing-link .material-symbols-outlined {
    font-size: 18px;
}

@media (max-width: 768px) {
    .pricing-toggles {
        flex-direction: column;
        gap: var(--space-4);
    }

    .pricing-toggle-group {
        width: 100%;
    }

    .pricing-toggle-options {
        width: 100%;
    }

    .pricing-toggle-option {
        flex: 1;
        text-align: center;
        padding: var(--space-3) var(--space-2);
    }

    .pricing-links {
        flex-direction: column;
        align-items: center;
        gap: var(--space-3);
    }
}

/* Pricing Cards */
.pricing-cards {
    display: grid;
    gap: var(--space-4);
}

.pricing-cards-2 {
    grid-template-columns: repeat(2, 1fr);
}

.pricing-cards-3 {
    grid-template-columns: repeat(3, 1fr);
}

.pricing-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

@media (max-width: 900px) {
    .pricing-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.pricing-bundle-note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-primary-tint);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--color-primary);
}

.pricing-bundle-note .material-symbols-outlined {
    color: var(--color-primary);
    font-size: 24px;
    flex-shrink: 0;
}

.pricing-bundle-note p {
    margin: 0;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
}

.pricing-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    position: relative;
}

.pricing-card-featured {
    border: 2px solid var(--color-primary);
    box-shadow: 0 4px 20px rgba(42, 84, 136, 0.15);
}

.pricing-card-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-size: var(--font-size-xs); /* 14px */
    font-weight: var(--font-weight-semibold);
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.pricing-card-header h3 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-xl);
    color: var(--color-primary);
    margin: 0;
}

.pricing-card-duration {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: var(--space-1) 0 0;
}

.pricing-card-best-for {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    font-style: italic;
    text-align: center;
    margin: 0 0 var(--space-4);
}

.pricing-card-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
    margin-bottom: var(--space-4);
}

.price-currency {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.price-amount {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.pricing-card-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-5);
    flex: 1;
}

.pricing-card-features li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

.pricing-card-features .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-success);
    flex-shrink: 0;
}

.btn-full {
    width: 100%;
}

/* Pricing Note Box */
.pricing-note-box {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-bg-hover-blue);
    border-radius: var(--radius-lg);
    margin-top: var(--space-5);
}

.pricing-note-box .material-symbols-outlined {
    font-size: 24px;
    color: var(--color-primary);
    flex-shrink: 0;
}

.pricing-note-box p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* Pricing Section Header */
.pricing-section-header {
    text-align: center;
    margin-bottom: var(--space-8);
}

.pricing-section-header h2 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    color: var(--color-primary);
    margin: 0 0 var(--space-2);
}

.pricing-section-header p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Supplement Pricing Grid */
.supplement-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.supplement-pricing-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
}

.supplement-pricing-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.supplement-pricing-header h3 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
    margin: 0;
}

.supplement-pricing-tag {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    background: var(--color-bg-hover-blue);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.supplement-pricing-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-4);
    flex: 1;
}

.supplement-pricing-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.supplement-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-page);
    border-radius: var(--radius-sm);
}

.supplement-option-name {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

.supplement-option-price {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.supplement-option-free .supplement-option-price {
    color: var(--color-success);
}

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

@media (max-width: 640px) {
    .supplement-pricing-grid {
        grid-template-columns: 1fr;
    }
}

/* Comparison Table */
.comparison-table-wrapper {
    overflow-x: auto;
}

.comparison-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.comparison-table th,
.comparison-table td {
    padding: var(--space-3) var(--space-4);
    text-align: center;
    border-bottom: 1px solid var(--color-border-light);
    vertical-align: middle;
}

/* First column (feature labels) - fixed width, remaining space split equally among product columns */
.comparison-table th:first-child,
.comparison-table td:first-child {
    text-align: left;
    font-weight: var(--font-weight-medium);
    width: 200px;
}

.comparison-table th {
    background: var(--color-bg-page);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    vertical-align: top;
    padding: var(--space-4);
}

.comparison-table th .btn {
    display: inline-block;
    margin-top: var(--space-3);
}

.comparison-table .comparison-featured {
    background: var(--color-bg-hover-blue);
}

.comparison-table tbody td.comparison-featured {
    background: rgba(229, 236, 249, 0.5);
}

.comparison-price {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
}

.comparison-table .check-icon {
    color: var(--color-success);
    font-size: 20px;
}

.comparison-table .material-symbols-outlined:not(.check-icon) {
    color: var(--color-text-tertiary);
    font-size: 20px;
}

.comparison-table .close-icon {
    color: var(--color-text-tertiary);
}

.comparison-cta {
    text-align: center;
    margin-top: var(--space-6);
}

.comparison-cta-row td {
    padding: var(--space-4);
    border-bottom: none;
    text-align: center;
}

.comparison-cta-row td .btn {
    display: inline-block;
}

.comparison-cta-row td:first-child {
    background: transparent;
}

thead .comparison-cta-row td {
    border-top: none;
    padding-top: var(--space-3);
}

tbody .comparison-cta-row td {
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

/* ===========================================
   COMPETITIVE COMPARISON - BARBRI vs Competitors
   =========================================== */

.competitive-comparison-wrapper {
    overflow-x: auto;
    margin: 0 calc(-1 * var(--space-4));
    padding: 0 var(--space-4);
}

.competitive-comparison {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--font-size-sm);
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.competitive-comparison th,
.competitive-comparison td {
    padding: var(--space-4);
    text-align: center;
    border-bottom: 1px solid var(--color-border);
}

.competitive-comparison th {
    background: var(--color-bg-page);
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    font-size: var(--font-size-md);
    padding: var(--space-5) var(--space-4);
}

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

.competitive-feature-col {
    text-align: left;
    width: 40%;
    font-weight: var(--font-weight-medium);
}

.competitive-barbri {
    background-color: var(--color-primary-tint);
    font-weight: var(--font-weight-semibold);
}

.competitive-comparison thead th.competitive-barbri {
    background-color: var(--color-primary);
    color: white;
}

.competitive-check {
    color: var(--color-success);
    font-size: 20px;
}

.competitive-dash {
    color: var(--color-text-secondary);
    opacity: 0.5;
    font-size: 20px;
}

.competitive-disclaimer {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-top: var(--space-4);
    font-style: italic;
    text-align: center;
}

@media (max-width: 768px) {
    .competitive-comparison {
        font-size: var(--font-size-xs);
    }

    .competitive-comparison th,
    .competitive-comparison td {
        padding: var(--space-3) var(--space-2);
    }

    .competitive-feature-col {
        width: 45%;
    }

    .competitive-comparison th {
        font-size: var(--font-size-sm);
    }
}

/* Guarantee Section */
.guarantee-section {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
    background: linear-gradient(135deg, var(--color-success-light) 0%, #E8F4E0 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
}

.guarantee-section-icon {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-success);
    border-radius: var(--radius-full);
}

.guarantee-section-icon .material-symbols-outlined {
    font-size: 40px;
    color: var(--color-text-inverse);
}

.guarantee-section-content h2 {
    font-size: var(--font-size-xl);
    color: var(--color-success-dark);
    margin-bottom: var(--space-2);
}

.guarantee-section-content p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

.learn-more-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-success-dark);
}

.learn-more-link:hover {
    text-decoration: underline;
}

.learn-more-link .material-symbols-outlined {
    font-size: 18px;
}

/* Payment Options */
.payment-options-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

.payment-option,
.payment-option-card {
    text-align: center;
    padding: var(--space-5);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
}

.payment-option-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-hover-blue);
    border-radius: var(--radius-lg);
    margin: 0 auto var(--space-3);
}

.payment-option-icon .material-symbols-outlined {
    font-size: 32px;
    color: var(--color-primary);
}

.payment-option h3,
.payment-option-card h3 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-md);
    color: var(--color-primary);
    margin-bottom: var(--space-2);
}

.payment-option p,
.payment-option-card p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

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

@media (max-width: 640px) {
    .payment-options-grid {
        grid-template-columns: 1fr;
    }
}

/* Scholarships Grid */
.scholarships-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

.scholarships-grid-2 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;
    margin: 0 auto;
}

.scholarship-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    text-align: center;
}

.scholarship-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto var(--space-4);
    background: var(--color-primary);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.scholarship-icon .material-symbols-outlined {
    font-size: 24px;
    color: white;
}

.scholarship-card h3 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

.scholarship-card p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-4);
    line-height: 1.5;
}

.scholarship-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    text-decoration: none;
}

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

.scholarship-link .material-symbols-outlined {
    font-size: 18px;
}

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

@media (max-width: 640px) {
    .scholarships-grid,
    .scholarships-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* FAQ Section */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.faq-item {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4);
    background: none;
    border: none;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}

.faq-question:hover {
    background: var(--color-bg-hover);
}

.faq-icon {
    font-size: 24px;
    color: var(--color-text-tertiary);
    transition: transform 0.2s ease;
}

.faq-item.open .faq-icon {
    transform: rotate(180deg);
}

/* FAQ Answer - Button-based accordion (requires JS) */
.faq-item:not(details) .faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 var(--space-4);
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-item.open .faq-answer,
.faq-question[aria-expanded="true"] + .faq-answer {
    max-height: 500px;
    padding: 0 var(--space-4) var(--space-4);
}

.faq-answer p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Pricing Toggle Tabs (Individual/Organization) */
.pricing-toggle {
    display: inline-flex;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-full);
    padding: 4px;
    margin-top: var(--space-6);
}

.pricing-toggle-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    background: none;
    border: none;
    border-radius: var(--radius-full);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.pricing-toggle-btn .material-symbols-outlined {
    font-size: 20px;
}

.pricing-toggle-btn:hover {
    color: var(--color-text-primary);
}

.pricing-toggle-btn.is-active {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

/* Pricing Panels */
.pricing-panel {
    display: none;
    padding: var(--space-8) 0;
}

.pricing-panel.is-active {
    display: block;
}

/* Pricing Cards - Enhanced for pass page */
.pricing-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    max-width: 1000px;
    margin: 0 auto;
}

.pricing-card.is-popular {
    border: 2px solid var(--color-primary);
    box-shadow: 0 8px 32px rgba(42, 84, 136, 0.15);
    transform: scale(1.02);
}

.pricing-card-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-hover-blue);
    border-radius: var(--radius-lg);
    margin: 0 auto var(--space-3);
}

.pricing-card-icon .material-symbols-outlined {
    font-size: 28px;
    color: var(--color-primary);
}

.pricing-card-name {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-xl);
    color: var(--color-primary);
    margin: 0 0 var(--space-1);
    text-align: center;
}

.pricing-card-tagline {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    text-align: center;
}

.pricing-card-header {
    text-align: center;
    margin-bottom: var(--space-4);
}

.price-period {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-normal);
}

.pricing-card-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: auto;
}

.pricing-card-link {
    font-size: var(--font-size-sm);
    color: var(--color-link);
    text-align: center;
}

.pricing-card-link:hover {
    text-decoration: underline;
}

/* Pricing Guarantee */
.pricing-guarantee {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-6);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.pricing-guarantee .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-success);
}

/* Team Pricing Calculator */
.team-pricing-calculator {
    max-width: 600px;
    margin: 0 auto var(--space-8);
}

.calculator-card {
    background: var(--color-bg-card);
    padding: var(--space-6);
    text-align: center;
}

.calculator-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-xl);
    color: var(--color-primary);
    margin: 0 0 var(--space-5);
}

/* Seat Selector */
.seat-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.seat-btn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-hover);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all 0.15s ease;
}

.seat-btn:hover {
    background: var(--color-bg-hover-blue);
    border-color: var(--color-primary);
}

.seat-btn .material-symbols-outlined {
    font-size: 24px;
    color: var(--color-primary);
}

.seat-selector input {
    width: 80px;
    height: 56px;
    text-align: center;
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-lg);
}

.seat-selector input:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* Calculator Pricing Display */
.calculator-pricing {
    margin-bottom: var(--space-5);
}

.price-breakdown {
    display: flex;
    justify-content: center;
    gap: var(--space-8);
    margin-bottom: var(--space-4);
}

.price-column {
    text-align: center;
}

.price-value {
    display: block;
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.price-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.calculator-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    margin-top: var(--space-3);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.calculator-note .material-symbols-outlined {
    font-size: 16px;
}

/* Calculator Contact (20+ seats) */
.calculator-contact {
    padding: var(--space-4) 0;
}

.contact-message {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

/* Pricing Tiers Guide */
.pricing-tiers-guide {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2);
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border-light);
}

.tier-item {
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-page);
    border-radius: var(--radius-md);
    text-align: center;
    transition: all 0.15s ease;
}

.tier-item.is-active {
    background: var(--color-bg-hover-blue);
    border: 1px solid var(--color-primary);
}

.tier-seats {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-bottom: 2px;
}

.tier-price {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.tier-contact .tier-price {
    color: var(--color-text-secondary);
}

/* Organization Benefits */
.pricing-org-benefits {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.pricing-org-benefits h3 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    color: var(--color-primary);
    margin-bottom: var(--space-4);
}

.org-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}

.org-benefit {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
}

.org-benefit .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-primary);
}

.org-benefit span:last-child {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* Pricing FAQ Section */
.pricing-faq {
    padding: var(--space-8) 0;
    background: var(--color-bg-page);
}

.pricing-faq h2 {
    text-align: center;
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    color: var(--color-primary);
    margin-bottom: var(--space-6);
}

.pricing-faq .faq-list {
    max-width: 700px;
    margin: 0 auto;
}

/* ===========================================
   PRICING PAGE RESPONSIVE
   =========================================== */

@media (max-width: 1024px) {
    .pricing-cards-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .pricing-cards-3 .pricing-card:last-child {
        grid-column: span 2;
        max-width: 400px;
        justify-self: center;
    }

    .payment-options-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .payment-options-grid .payment-option:last-child {
        grid-column: span 2;
        max-width: 400px;
        justify-self: center;
    }
}

@media (max-width: 768px) {
    .pricing-hero h1 {
        font-size: var(--font-size-2xl);
    }

    .pricing-cards-2,
    .pricing-cards-3 {
        grid-template-columns: 1fr;
    }

    .pricing-cards-3 .pricing-card:last-child {
        grid-column: span 1;
        max-width: none;
    }

    .comparison-table th,
    .comparison-table td {
        padding: var(--space-2);
        font-size: var(--font-size-xs);
    }

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

    .guarantee-section-icon {
        margin: 0 auto;
    }

    .payment-options-grid {
        grid-template-columns: 1fr;
    }

    .payment-options-grid .payment-option:last-child {
        grid-column: span 1;
        max-width: none;
    }
}

/* ===========================================
   PRE-LAW / POWERSCORE PAGE STYLES
   =========================================== */

/* Pre-Law Hero with Video */
.prelaw-hero {
    background: linear-gradient(180deg, #FFFFFF 0%, var(--color-bg-page) 100%);
    padding: var(--space-10) 0 var(--space-8);
}

.prelaw-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: center;
}

.prelaw-brand-badge {
    display: inline-block;
    margin-bottom: var(--space-3);
}

.brand-badge-text {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    background: var(--color-bg-hover-blue);
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-full);
}

.prelaw-hero h1 {
    font-size: var(--font-size-4xl);
    color: var(--color-primary);
    margin-bottom: var(--space-4);
    line-height: 1.1;
}

.prelaw-hero-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-5);
    line-height: 1.5;
}

.hero-stats-row {
    display: flex;
    gap: var(--space-6);
    margin-bottom: var(--space-5);
}

.hero-stat {
    text-align: center;
}

.hero-stat-number {
    display: block;
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.hero-stat-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.prelaw-hero-ctas {
    display: flex;
    gap: var(--space-3);
}

/* Video Preview Card */
.video-preview-card {
    background: var(--color-bg-card);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.video-preview-placeholder {
    position: relative;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.video-preview-play {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    z-index: 2;
}

.video-preview-play .material-symbols-outlined {
    font-size: 40px;
    color: var(--color-primary);
    margin-left: 4px;
}

.video-preview-placeholder:hover .video-preview-play {
    transform: scale(1.1);
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.3);
}

.video-preview-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-4);
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    color: var(--color-text-inverse);
}

.video-preview-badge {
    display: inline-block;
    padding: 2px var(--space-2);
    background: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-1);
}

.video-preview-title {
    display: block;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
}

.video-preview-caption {
    padding: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-align: center;
    margin: 0;
}

/* Trust Bar */
.trust-bar {
    background: var(--color-primary);
    padding: var(--space-4) 0;
}

.trust-bar-inner {
    display: flex;
    justify-content: center;
    gap: var(--space-8);
}

.trust-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-inverse);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.trust-item .material-symbols-outlined {
    font-size: 20px;
    opacity: 0.9;
}

/* Screenshot Mockup */
.screenshot-mockup {
    background: var(--color-bg-card);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.screenshot-mockup-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-page);
    border-bottom: 1px solid var(--color-border-light);
}

.screenshot-mockup-dots {
    display: flex;
    gap: 6px;
}

.screenshot-mockup-dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-border);
}

.screenshot-mockup-dots span:first-child {
    background: #FF5F57;
}

.screenshot-mockup-dots span:nth-child(2) {
    background: #FFBD2E;
}

.screenshot-mockup-dots span:last-child {
    background: #28C840;
}

.screenshot-mockup-title {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.screenshot-mockup-body {
    padding: var(--space-5);
}

.screenshot-stat-grid {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
    margin-bottom: var(--space-5);
}

.screenshot-stat {
    text-align: center;
}

.screenshot-stat-value {
    display: block;
    font-family: var(--font-family-heading);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.screenshot-stat-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.screenshot-progress-bars {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.screenshot-progress {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.screenshot-progress span {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.screenshot-progress-bar {
    height: 8px;
    background: var(--color-bg-hover);
    border-radius: var(--radius-full);
    position: relative;
    overflow: hidden;
}

.screenshot-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--progress, 0%);
    background: var(--color-primary);
    border-radius: var(--radius-full);
}

/* Testimonial Score Badges */
.testimonial-score-badge {
    position: absolute;
    top: -20px;
    right: var(--space-4);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: 0 4px 12px rgba(42, 84, 136, 0.3);
}

.score-badge-value {
    display: block;
    font-family: var(--font-family-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: 1;
}

.score-badge-label {
    font-size: var(--font-size-xs); /* 14px */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

.testimonial-card {
    position: relative;
    padding: var(--space-6) var(--space-5);
    padding-top: var(--space-8);
    background: var(--color-bg-card);
}

.testimonial-author-avatar {
    width: 48px;
    height: 48px;
    background: var(--color-bg-hover-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial-author-avatar .material-symbols-outlined {
    font-size: 28px;
    color: var(--color-primary);
}

.testimonial-author-school {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

/* Journey Timeline Enhanced */
.journey-timeline {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    margin-top: var(--space-6);
}

.journey-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 180px;
}

.journey-step-marker {
    width: 64px;
    height: 64px;
    background: var(--color-bg-card);
    border: 2px solid var(--color-border-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-3);
    transition: all 0.2s ease;
}

.journey-step-marker .material-symbols-outlined {
    font-size: 28px;
    color: var(--color-text-tertiary);
}

.journey-step-active .journey-step-marker {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.journey-step-active .journey-step-marker .material-symbols-outlined {
    color: var(--color-text-inverse);
}

.journey-step-content h4 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-base);
    color: var(--color-primary);
    margin-bottom: var(--space-1);
}

.journey-step-content p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

.journey-step-badge {
    display: inline-block;
    padding: 2px var(--space-2);
    background: var(--color-success-light);
    color: var(--color-success-dark);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-sm);
}

.journey-step-link {
    font-size: var(--font-size-sm);
    color: var(--color-link);
    font-weight: var(--font-weight-medium);
}

.journey-step-link:hover {
    text-decoration: underline;
}

.journey-connector {
    width: 60px;
    height: 2px;
    background: var(--color-border-light);
    margin-top: 32px;
}

/* Contact Form Card */
.contact-form-card {
    background: var(--color-bg-card);
    padding: var(--space-6);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

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

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.form-group label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: var(--space-3);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    transition: border-color 0.15s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.form-note {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    text-align: center;
    margin: 0;
}

/* Pre-Law Responsive */
@media (max-width: 1024px) {
    .prelaw-hero-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .prelaw-hero h1 {
        font-size: var(--font-size-3xl);
    }

    .hero-stats-row {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .prelaw-hero h1 {
        font-size: var(--font-size-2xl);
    }

    .hero-stats-row {
        flex-wrap: wrap;
        gap: var(--space-4);
    }

    .prelaw-hero-ctas {
        flex-direction: column;
    }

    .trust-bar-inner {
        flex-wrap: wrap;
        gap: var(--space-4);
    }

    .journey-timeline {
        flex-direction: column;
        align-items: center;
    }

    .journey-connector {
        width: 2px;
        height: 40px;
        margin: 0;
    }

    .form-row {
        grid-template-columns: 1fr;
    }
}

/* ===========================================
   ADAPTIBAR PAGE STYLES
   =========================================== */

/* Adaptibar Hero */
.adaptibar-hero {
    background: linear-gradient(180deg, #FFFFFF 0%, var(--color-bg-page) 100%);
    padding: var(--space-10) 0 var(--space-8);
}

.adaptibar-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: center;
}

.adaptibar-hero h1 {
    font-size: var(--font-size-4xl);
    color: var(--color-primary);
    margin-bottom: var(--space-4);
    line-height: 1.1;
}

.adaptibar-hero-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-5);
    line-height: 1.5;
}

.adaptibar-hero-ctas {
    display: flex;
    gap: var(--space-3);
}

/* Subjects Grid */
.subjects-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--space-3);
}

.subject-card {
    background: var(--color-bg-card);
    padding: var(--space-4);
    text-align: center;
}

.subject-card .material-symbols-outlined {
    font-size: 32px;
    color: var(--color-primary);
    margin-bottom: var(--space-2);
}

.subject-card h4 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    margin-bottom: var(--space-1);
}

.subject-card p {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin: 0;
}

/* Bundle Banner */
.bundle-banner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-6);
    padding: var(--space-6);
    background: linear-gradient(135deg, var(--color-bg-hover-blue) 0%, #E5ECF9 100%);
    align-items: center;
}

.bundle-banner-content h2 {
    font-size: var(--font-size-2xl);
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}

.bundle-banner-content p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

.bundle-banner-actions {
    display: flex;
    gap: var(--space-3);
}

.bundle-savings-badge {
    width: 140px;
    height: 140px;
    background: var(--color-primary);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-text-inverse);
    text-align: center;
}

.savings-amount {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.savings-label {
    font-size: var(--font-size-sm);
    opacity: 0.9;
}

/* Adaptibar Responsive */
@media (max-width: 1024px) {
    .adaptibar-hero-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .adaptibar-hero h1 {
        font-size: var(--font-size-3xl);
    }

    .subjects-grid {
        grid-template-columns: repeat(4, 1fr);
    }

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

    .bundle-banner-actions {
        justify-content: center;
    }

    .bundle-banner-visual {
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .adaptibar-hero h1 {
        font-size: var(--font-size-2xl);
    }

    .adaptibar-hero-ctas {
        flex-direction: column;
    }

    .subjects-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bundle-banner-actions {
        flex-direction: column;
    }

    .bundle-savings-badge {
        width: 120px;
        height: 120px;
    }
}

/* ===========================================
   INTERNATIONAL PAGE STYLES
   =========================================== */

/* International Hero */
.intl-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    padding: var(--space-10) 0;
    color: var(--color-text-inverse);
}

.intl-hero-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.intl-hero h1 {
    font-size: var(--font-size-4xl);
    color: var(--color-text-inverse);
    margin-bottom: var(--space-4);
}

.intl-hero-subtitle {
    font-size: var(--font-size-lg);
    opacity: 0.9;
    margin-bottom: var(--space-6);
    line-height: 1.5;
}

.intl-hero-ctas {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* International Hero Grid - content + video side by side */
.intl-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: center;
}

.intl-hero-grid .intl-hero-content {
    text-align: left;
    margin: 0;
    max-width: none;
}

.intl-hero-grid .intl-hero-ctas {
    justify-content: flex-start;
}

.intl-hero-visual {
    display: flex;
    justify-content: center;
}

/* International Hero Stats */
.intl-hero .hero-stats-row {
    display: flex;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

.intl-hero .hero-stat-number {
    color: var(--color-text-inverse);
}

.intl-hero .hero-stat-label {
    color: rgba(255, 255, 255, 0.8);
}

/* Testimonial badge for passed status */
.testimonial-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-top: var(--space-3);
}

.testimonial-badge-passed {
    background: rgba(68, 114, 40, 0.1);
    color: var(--color-success);
}

.testimonial-badge .material-symbols-outlined {
    font-size: 16px;
}

@media (max-width: 768px) {
    .intl-hero-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .intl-hero-grid .intl-hero-content {
        text-align: center;
    }

    .intl-hero-grid .intl-hero-ctas {
        justify-content: center;
    }

    .intl-hero .hero-stats-row {
        flex-wrap: wrap;
        justify-content: center;
    }
}

.intl-hero .btn-primary {
    background-color: var(--color-bg-card);
    color: var(--color-text-primary);
}

.intl-hero .btn-primary:hover {
    background-color: var(--color-bg-hover);
}

.intl-hero .btn-secondary {
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--color-text-inverse);
}

.intl-hero .btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--color-text-inverse);
}

/* International Products Grid */
.intl-products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.intl-product-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    position: relative;
}

.intl-product-featured {
    border: 2px solid var(--color-primary);
    box-shadow: 0 4px 20px rgba(42, 84, 136, 0.15);
}

.intl-product-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-size: var(--font-size-xs); /* 14px */
    font-weight: var(--font-weight-semibold);
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.intl-product-coming {
    background: var(--color-bg-page);
    border-style: dashed;
}

.intl-product-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-hover-blue);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
}

.intl-product-icon .material-symbols-outlined {
    font-size: 32px;
    color: var(--color-primary);
}

.intl-product-card h3 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    color: var(--color-primary);
    margin-bottom: var(--space-1);
}

.intl-product-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3);
}

.intl-product-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: var(--space-4);
}

.intl-product-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-4);
    flex: 1;
}

.intl-product-features li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

.intl-product-features .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-success);
    flex-shrink: 0;
}

.intl-product-coming .intl-product-features .material-symbols-outlined {
    color: var(--color-text-tertiary);
}

.intl-product-pricing {
    margin-bottom: var(--space-4);
    text-align: center;
}

.intl-product-price-from {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

.intl-product-price {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.intl-product-price-note {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    margin-top: var(--space-1);
}

/* 3-column variant for SQE programs */
.intl-products-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
    .intl-products-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .intl-products-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* Qualification Pathway Steps */
.pathway-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.pathway-step {
    text-align: center;
    position: relative;
}

.pathway-step-number {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-radius: 50%;
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    margin: 0 auto var(--space-3);
}

.pathway-step h3 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

.pathway-step p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

@media (max-width: 768px) {
    .pathway-steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .pathway-steps {
        grid-template-columns: 1fr;
    }
}

/* Dual Qualification Banner */
.dual-qual-banner {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
}

.dual-qual-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-hover-blue);
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}

.dual-qual-icon .material-symbols-outlined {
    font-size: 32px;
    color: var(--color-primary);
}

.dual-qual-content {
    flex: 1;
}

.dual-qual-content h3 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

.dual-qual-content p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: var(--space-3);
}

@media (max-width: 640px) {
    .dual-qual-banner {
        flex-direction: column;
        text-align: center;
    }
}

/* Included Items Grid (for SQE page) */
.included-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

.included-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
}

.included-icon {
    font-size: 28px;
    color: var(--color-primary);
    flex-shrink: 0;
}

.included-content h4 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.included-content p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.4;
}

/* Context Cards (SQE Practice Contexts) */
.context-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
}

.context-card {
    flex: 0 0 auto;
    width: 180px;
    text-align: center;
    padding: var(--space-4);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
}

.context-card .material-symbols-outlined {
    font-size: var(--font-size-3xl); /* 40px */
    color: var(--color-primary);
    margin-bottom: var(--space-2);
}

.context-card h4 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.context-card p {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin: 0;
}

/* ===========================================
   INTERNATIONAL PAGE RESPONSIVE
   =========================================== */

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

    .intl-products-grid .intl-product-card:last-child {
        grid-column: span 2;
        max-width: 500px;
        justify-self: center;
    }

    .included-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .intl-hero {
        padding: var(--space-8) 0;
    }

    .intl-hero h1 {
        font-size: var(--font-size-2xl);
    }

    .intl-hero-subtitle {
        font-size: var(--font-size-base);
    }

    .intl-products-grid {
        grid-template-columns: 1fr;
    }

    .intl-products-grid .intl-product-card:last-child {
        grid-column: span 1;
        max-width: none;
    }

    .included-grid {
        grid-template-columns: 1fr;
    }

    .context-cards {
        flex-direction: column;
        align-items: center;
    }

    .context-card {
        width: 100%;
        max-width: 300px;
    }
}


/* ===========================================
   FOR ORGANIZATIONS PAGE
   B2B-focused landing page for teams and enterprises
   =========================================== */

/* Organizations Hero */
.org-hero {
    background: linear-gradient(135deg, var(--color-bg-page) 0%, #F0F4F8 100%);
    padding: var(--space-12) 0;
}

.org-hero-content {
    max-width: 700px;
}

.org-hero h1 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);  /* BARBRI Blue - per brand guidelines */
    margin-bottom: var(--space-4);
    line-height: 1.15;
}

.org-hero-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
    line-height: 1.6;
}

.org-hero-ctas {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* Organization Type Cards */
.org-types-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.org-type-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
}

.org-type-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-hover-blue);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}

.org-type-icon .material-symbols-outlined {
    font-size: 28px;
    color: var(--color-primary);
}

.org-type-card h3 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);  /* BARBRI Blue - per brand guidelines */
    margin-bottom: var(--space-2);
}

.org-type-card > p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
    line-height: 1.5;
}

.org-type-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-4) 0;
    flex: 1;
}

.org-type-features li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.org-type-features .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-success);
    flex-shrink: 0;
}

/* Team Plans CTA */
.team-plans-cta {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-6);
    align-items: center;
    background: var(--color-bg-card);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    border: 1px solid var(--color-border-light);
}

.team-plans-cta h2 {
    margin-bottom: var(--space-3);
}

.team-plans-cta p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    margin-bottom: var(--space-4);
}

.team-plans-highlights {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--space-5);
}

.team-plans-highlights li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.team-plans-highlights .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-success);
}

.team-plans-cta-action {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.team-plans-cta-action .btn {
    width: 100%;
    justify-content: center;
}

@media (max-width: 768px) {
    .team-plans-cta {
        grid-template-columns: 1fr;
    }

    .team-plans-highlights {
        flex-direction: column;
        gap: var(--space-2);
    }
}

/* Team Pricing Grid (Legacy - kept for reference) */
.team-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    margin-top: var(--space-6);
}

.team-pricing-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    position: relative;
}

.team-pricing-card.team-pricing-featured {
    border: 2px solid var(--color-primary);
    box-shadow: var(--shadow-lg);
}

.team-pricing-header h3 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.team-pricing-seats {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

.team-pricing-price {
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin-bottom: var(--space-2);
}

.team-pricing-price .price-currency {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.team-pricing-price .price-amount {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.team-pricing-price .price-unit {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.team-pricing-savings {
    font-size: var(--font-size-sm);
    color: var(--color-success);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-4);
}

.team-pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-5) 0;
    flex: 1;
}

.team-pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.team-pricing-features .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-success);
    flex-shrink: 0;
}

/* Trust Logos */
.trust-logos {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
    margin-top: var(--space-6);
    flex-wrap: wrap;
}

.trust-logo-placeholder {
    width: 150px;
    height: 60px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

/* Contact Form */
.contact-form-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

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

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.form-group label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: var(--space-3);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-family: var(--font-family-body);
    color: var(--color-text-primary);
    background: var(--color-bg-card);
    transition: border-color 0.15s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(35, 91, 168, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.form-note {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    text-align: center;
    margin: 0;
}

/* Stat Card Variants */
.stat-card-secondary {
    background: var(--color-bg-subtle);
    border-color: var(--color-border-default);
}

.stat-card-secondary .stat-card-number {
    color: var(--color-text-primary);
}

/* Feature Split Reverse */
.feature-split-reverse {
    flex-direction: row-reverse;
}

/* Responsive - Organizations */
@media (max-width: 992px) {
    .org-types-grid,
    .team-pricing-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }

    .feature-split,
    .feature-split-reverse {
        flex-direction: column;
    }

    .stat-card-large {
        max-width: 250px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .org-hero {
        padding: var(--space-8) 0;
    }

    .org-hero h1 {
        font-size: var(--font-size-2xl);
    }

    .org-hero-subtitle {
        font-size: var(--font-size-base);
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .trust-logos {
        gap: var(--space-4);
    }

    .trust-logo-placeholder {
        width: 120px;
        height: 50px;
    }
}


/* ===========================================
   STUDY AIDS PAGE
   Quimbee and West Academic showcase
   =========================================== */

/* Study Aids Hero */
.study-aids-hero {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    padding: var(--space-12) 0;
}

.study-aids-hero-content {
    max-width: 700px;
    text-align: center;
    margin: 0 auto;
}

.study-aids-hero .hero-badge {
    background: rgba(255, 255, 255, 0.15);
    color: var(--color-text-inverse);
}

.study-aids-hero h1 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-inverse);
    margin-bottom: var(--space-4);
    line-height: 1.15;
}

.study-aids-hero-subtitle {
    font-size: var(--font-size-lg);
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: var(--space-6);
}

.study-aids-hero-ctas {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.study-aids-hero-ctas .btn .material-symbols-outlined {
    font-size: 18px;
    margin-left: var(--space-1);
}

/* Study Aids Grid */
.study-aids-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}

.study-aid-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
}

.study-aid-card.study-aid-featured {
    border: 2px solid var(--color-primary);
}

.study-aid-brand {
    margin-bottom: var(--space-3);
}

.study-aid-brand-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.study-aid-logo {
    margin-bottom: var(--space-2);
}

.brand-wordmark {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0;
}

.study-aid-tagline {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

.study-aid-description {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-5);
}

.study-aid-features {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    flex: 1;
}

.study-aid-feature {
    display: flex;
    gap: var(--space-3);
}

.study-aid-feature .material-symbols-outlined {
    font-size: 24px;
    color: var(--color-primary);
    flex-shrink: 0;
}

.study-aid-feature strong {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.study-aid-feature p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

.study-aid-pricing {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: var(--space-4);
}

.study-aid-price-from {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.study-aid-price {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.study-aid-price-period {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.study-aid-ctas {
    margin-bottom: var(--space-3);
}

.study-aid-ctas .btn .material-symbols-outlined {
    font-size: 18px;
    margin-left: var(--space-1);
}

.study-aid-trust {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    text-align: center;
    margin: 0;
}

/* Coverage Grid */
.coverage-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.coverage-item {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    text-align: center;
}

.coverage-stage {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-3);
}

.coverage-content h4 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

.coverage-content p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* BARBRI Family Grid */
.barbri-family-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.family-item {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-align: center;
}

.family-item .material-symbols-outlined {
    font-size: var(--font-size-3xl); /* 40px */
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}

.family-item h4 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.family-item p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3);
}

.family-item a {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-link);
    text-decoration: none;
}

.family-item a:hover {
    text-decoration: underline;
}

.family-current {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-success);
}

/* Responsive - Study Aids */
@media (max-width: 992px) {
    .study-aids-grid {
        grid-template-columns: 1fr;
        max-width: 600px;
        margin: 0 auto;
    }

    .coverage-grid,
    .barbri-family-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .study-aids-hero {
        padding: var(--space-8) 0;
    }

    .study-aids-hero h1 {
        font-size: var(--font-size-2xl);
    }

    .coverage-grid,
    .barbri-family-grid {
        grid-template-columns: 1fr;
    }
}


/* ===========================================
   LSAT FEATURES (Pre-Law Page)
   =========================================== */

/* LSAT Features Grid */
.lsat-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    margin-top: var(--space-6);
}

.lsat-feature-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-align: center;
}

.lsat-feature-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-hover-blue);
    border-radius: var(--radius-full);
    margin: 0 auto var(--space-4) auto;
}

.lsat-feature-icon .material-symbols-outlined {
    font-size: 32px;
    color: var(--color-primary);
}

.lsat-feature-card h3 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

.lsat-feature-card p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* LSAT CTA Box */
.lsat-cta-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    background: var(--color-bg-hover-blue);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
    margin-top: var(--space-6);
}

.lsat-cta-content h3 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.lsat-cta-content p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: 0;
}

/* Admissions Packages */
.admissions-packages {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    margin-top: var(--space-6);
}

.admissions-package {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    position: relative;
}

.admissions-package.admissions-package-featured {
    border: 2px solid var(--color-primary);
    box-shadow: var(--shadow-lg);
}

.admissions-package-header h3 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.admissions-package-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

.admissions-package-price {
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin-bottom: var(--space-4);
}

.admissions-package-price .price-currency {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.admissions-package-price .price-amount {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.admissions-package-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-5) 0;
    flex: 1;
}

.admissions-package-features li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.admissions-package-features .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-success);
    flex-shrink: 0;
}

/* Journey Timeline */
.journey-timeline {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    margin-top: var(--space-8);
    flex-wrap: wrap;
}

.journey-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 160px;
}

.journey-step-number {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-3);
}

.journey-step-content h4 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.journey-step-content p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

.journey-step-link {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-link);
    text-decoration: none;
}

.journey-step-link:hover {
    text-decoration: underline;
}

.journey-connector {
    width: 60px;
    height: 2px;
    background: var(--color-border-default);
    margin-top: 24px;
    flex-shrink: 0;
}

/* Responsive - Pre-Law */
@media (max-width: 992px) {
    .lsat-features-grid,
    .admissions-packages {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }

    .lsat-cta-box {
        flex-direction: column;
        text-align: center;
    }

    .journey-timeline {
        flex-direction: column;
        align-items: center;
    }

    .journey-connector {
        width: 2px;
        height: 40px;
        margin: 0;
    }
}

@media (max-width: 768px) {
    .prelaw-hero {
        padding: var(--space-8) 0;
    }

    .prelaw-hero h1 {
        font-size: var(--font-size-2xl);
    }

    .prelaw-hero-subtitle {
        font-size: var(--font-size-base);
    }
}

/* ===========================================
   CART BADGE
   =========================================== */

.cart-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: var(--font-size-xs); /* 14px */
    font-weight: var(--font-weight-bold);
    color: var(--color-text-inverse);
    background-color: var(--color-error);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===========================================
   CART FLYOUT
   Slide-out cart panel from right side
   =========================================== */

.cart-flyout-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: var(--z-modal-backdrop);
}

.cart-flyout-overlay.active {
    opacity: 1;
    visibility: visible;
}

.cart-flyout {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 480px;
    max-width: 100vw;
    background: var(--color-bg-card);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: var(--z-modal);
}

.cart-flyout.active {
    transform: translateX(0);
}

.cart-flyout-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    flex-shrink: 0;
}

.cart-flyout-header h2 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0;
}

.cart-flyout-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--color-text-secondary);
    background: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-all);
}

.cart-flyout-close:hover {
    color: var(--color-text-primary);
    background-color: var(--color-bg-hover);
}

.cart-flyout-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 var(--space-5) var(--space-4);
}

/* Empty state */
.cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-8) 0;
    text-align: center;
}

.cart-empty-icon {
    font-size: 48px;
    color: var(--color-text-tertiary);
}

.cart-empty p {
    color: var(--color-text-secondary);
    margin: 0;
}

/* Cart items */
.cart-items {
    display: flex;
    flex-direction: column;
}

.cart-item {
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.cart-item:last-child {
    border-bottom: none;
}

.cart-item-header {
    display: flex;
    gap: var(--space-3);
}

.cart-item-info {
    flex: 1;
    min-width: 0;
}

.cart-item-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
}

.cart-item-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
}

.cart-item-inline-price {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    white-space: nowrap;
    flex-shrink: 0;
}

.cart-item-meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: var(--space-1) 0 0 0;
}

.cart-item-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--color-text-tertiary);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 0;
    transition: var(--transition-all);
    flex-shrink: 0;
}

.cart-item-remove:hover {
    color: var(--color-error);
    background: var(--color-bg-hover);
}

.cart-item-remove .material-symbols-outlined {
    font-size: 20px;
}

/* Footer */
.cart-flyout-footer {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border-light);
    background: var(--color-bg-card);
    flex-shrink: 0;
}

/* Promo code section */
.cart-promo-section {
    padding: var(--space-2) 0;
}

.cart-promo-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    padding: 0;
}

.cart-promo-toggle:hover {
    text-decoration: underline;
}

.cart-promo-toggle .material-symbols-outlined {
    font-size: 18px;
}

.cart-promo-toggle-arrow {
    transition: transform 0.2s;
}

.cart-promo-toggle.expanded .cart-promo-toggle-arrow {
    transform: rotate(180deg);
}

.cart-promo-form {
    margin-top: var(--space-3);
}

.cart-promo-input-wrapper {
    display: flex;
    gap: var(--space-2);
}

.cart-promo-input-wrapper input {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-family: var(--font-family-primary);
}

.cart-promo-input-wrapper input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.cart-promo-error {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-error);
    font-size: var(--font-size-sm);
    margin-top: var(--space-2);
}

.cart-promo-error .material-symbols-outlined {
    font-size: 16px;
}

.cart-promo-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-success-light);
    border: 1px solid var(--color-success);
    border-radius: var(--radius-md);
}

.cart-promo-applied-text {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-success);
}

.cart-promo-applied-text .material-symbols-outlined {
    font-size: 18px;
}

.cart-promo-remove-btn {
    background: transparent;
    border: none;
    color: var(--color-success);
    font-size: var(--font-size-sm);
    cursor: pointer;
    text-decoration: underline;
}

.cart-promo-remove-btn:hover {
    color: #2e5016;
}

/* Totals section */
.cart-totals {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.cart-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

.cart-total-row.cart-discount {
    color: var(--color-success);
}

.cart-total-row.cart-total-final {
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-light);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
}

/* Actions */
.cart-flyout-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Utility classes for cart */
.hidden {
    display: none !important;
}

/* Mobile responsive */
@media (max-width: 480px) {
    .cart-flyout {
        width: 100vw;
    }
}

/* Cart error message */
.cart-error {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
    background-color: var(--color-error-light);
    border-radius: var(--radius-md);
    color: var(--color-error);
    font-size: var(--font-size-sm);
}

.cart-error .material-symbols-outlined {
    font-size: 18px;
    flex-shrink: 0;
}

/* Cart item breakdown (receipt-style) */
.cart-item-breakdown {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px dashed var(--color-border-light);
}

.cart-item-line {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    padding: var(--space-1) 0;
}

.cart-item-line-addon {
    color: var(--color-text-tertiary);
}

.cart-item-line-sum {
    border-top: 1px solid var(--color-border-light);
    margin-top: var(--space-2);
    padding-top: var(--space-2);
}

.cart-item-line-discount {
    color: var(--color-success);
}

.cart-item-line-discount .material-symbols-outlined {
    font-size: 14px;
    vertical-align: middle;
    margin-right: var(--space-1);
}

.cart-item-line-total {
    border-top: 1px solid var(--color-border-light);
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

/* Mixed currency warning */
.cart-mixed-currency-warning {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
    background-color: var(--color-warning-light);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--color-warning-dark);
}

.cart-mixed-currency-warning .material-symbols-outlined {
    font-size: 18px;
    flex-shrink: 0;
}

/* ===========================================
   ADAPTIBAR PAGE STYLES
   =========================================== */

.adaptibar-page {
    background-color: white;
}

/* Hero */
.adaptibar-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, #1A4580 100%);
    color: white;
    padding: var(--space-12) 0;
}

.adaptibar-hero-content {
    max-width: 700px;
}

.adaptibar-hero h1 {
    font-family: var(--font-family-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-4);
    color: white;
}

.adaptibar-hero-subtitle {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-6);
    opacity: 0.9;
}

.adaptibar-hero-ctas {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* Features Grid */
.adaptibar-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin-top: var(--space-8);
}

@media (max-width: 992px) {
    .adaptibar-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .adaptibar-features-grid {
        grid-template-columns: 1fr;
    }
}

.adaptibar-feature-card {
    padding: var(--space-5);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    transition: var(--transition-all);
}

.adaptibar-feature-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
}

.adaptibar-feature-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg-hover-blue);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}

.adaptibar-feature-icon .material-symbols-outlined {
    font-size: 28px;
    color: var(--color-primary);
}

.adaptibar-feature-card h3 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-2);
    color: var(--color-text-primary);
}

.adaptibar-feature-card p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}

/* Steps */
.adaptibar-steps {
    list-style: none;
    padding: 0;
    margin: var(--space-5) 0 var(--space-6);
    counter-reset: step;
}

.adaptibar-steps li {
    position: relative;
    padding-left: 48px;
    margin-bottom: var(--space-4);
    counter-increment: step;
}

.adaptibar-steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary);
    color: white;
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
}

.adaptibar-steps li strong {
    color: var(--color-text-primary);
}

/* MBE Subjects */
.mbe-subjects-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-8);
}

@media (max-width: 992px) {
    .mbe-subjects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .mbe-subjects-grid {
        grid-template-columns: 1fr;
    }
}

.mbe-subject-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-4);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    transition: var(--transition-all);
}

.mbe-subject-card:hover {
    border-color: var(--color-primary);
    background-color: var(--color-bg-hover-blue);
}

.mbe-subject-card .material-symbols-outlined {
    font-size: 32px;
    color: var(--color-primary);
    margin-bottom: var(--space-2);
}

.mbe-subject-card h4 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
}

/* Pricing Cards */
.adaptibar-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin-top: var(--space-8);
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 992px) {
    .adaptibar-pricing-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
    }
}

.adaptibar-pricing-card {
    position: relative;
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
}

.adaptibar-pricing-featured {
    border: 2px solid var(--color-primary);
    box-shadow: var(--shadow-lg);
}

.adaptibar-pricing-header h3 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-1) 0;
}

.adaptibar-pricing-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

.adaptibar-pricing-price {
    display: flex;
    align-items: baseline;
    margin: var(--space-5) 0;
}

.adaptibar-pricing-price .price-currency {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.adaptibar-pricing-price .price-amount {
    font-family: var(--font-family-heading);
    font-size: 3rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: 1;
}

.adaptibar-pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-6) 0;
    flex: 1;
}

.adaptibar-pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.adaptibar-pricing-features li .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-success);
    flex-shrink: 0;
}

.adaptibar-pricing-features li strong {
    color: var(--color-text-primary);
}

/* ===========================================
   LANDING PAGE (Professional Education)
   =========================================== */

.landing-page {
    padding-top: 0;
    padding-bottom: 0;
}

/* Landing Hero - Search Focused */
.landing-hero {
    background: linear-gradient(180deg, #FFFFFF 0%, var(--color-bg-hover-blue) 100%);
    padding: var(--space-8) 0;
    text-align: center;
}

.landing-hero h1 {
    margin-bottom: var(--space-2);
}

.landing-hero-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
}

/* Landing Search Bar */
.landing-search {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 720px;
    margin: 0 auto var(--space-4);
    background: white;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-1);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.landing-search:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(42, 84, 136, 0.1);
}

.landing-search-icon {
    padding: 0 var(--space-3);
    color: var(--color-text-tertiary);
    font-size: 24px;
}

.landing-search input {
    flex: 1;
    border: none;
    outline: none;
    font-size: var(--font-size-base);
    padding: var(--space-2) 0;
    background: transparent;
}

.landing-search input::placeholder {
    color: var(--color-text-tertiary);
}

/* Search clear button */
.landing-search-clear {
    display: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: var(--space-1);
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius-full);
    color: var(--color-text-tertiary);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.landing-search-clear:hover {
    background-color: var(--color-bg-hover);
    color: var(--color-text-secondary);
}

.landing-search-clear .material-symbols-outlined {
    font-size: 18px;
}

.landing-search.has-value .landing-search-clear {
    display: flex;
}

/* Search Dropdown */
.landing-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: var(--space-1);
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
    z-index: var(--z-dropdown);
    overflow: hidden;
}

.landing-search-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.landing-search-results {
    max-height: 320px;
    overflow-y: auto;
}

.landing-search-result {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    color: var(--color-text-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--color-border-light);
    transition: background-color 0.15s ease;
    text-align: left;
}

.landing-search-result:last-child {
    border-bottom: none;
}

.landing-search-result:hover {
    background-color: var(--color-bg-hover);
    text-decoration: none;
}

.landing-search-result-icon {
    flex-shrink: 0;
    color: var(--color-text-tertiary);
    font-size: 20px;
    margin-top: 2px;
}

.landing-search-result-content {
    flex: 1;
    min-width: 0;
}

.landing-search-result-title {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.landing-search-result-meta {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.landing-search-empty {
    padding: var(--space-4);
    text-align: center;
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
}

.landing-search-browse-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-page);
    border-top: 1px solid var(--color-border-light);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.landing-search-browse-all:hover {
    background-color: var(--color-bg-hover-blue);
    text-decoration: none;
}

.landing-search-browse-all .material-symbols-outlined {
    font-size: 18px;
}

/* Browse Text Links */
.landing-browse-text {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    margin: 0;
}

.landing-browse-text a {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.landing-browse-text a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Hero B2B Boxes */
.hero-b2b-boxes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    max-width: 1000px;
    margin: var(--space-8) auto 0;
}

.hero-b2b-box {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: 0 8px 0 8px;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hero-b2b-box:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    text-decoration: none;
}

.hero-b2b-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--color-bg-hover-blue);
    border-radius: var(--radius-sm);
    color: var(--color-primary);
    font-size: var(--font-size-lg); /* 24px */
    flex-shrink: 0;
}

.hero-b2b-content {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.hero-b2b-content h3 {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 2px;
}

.hero-b2b-content p {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    margin: 0;
    line-height: var(--line-height-snug);
}

.hero-b2b-arrow {
    color: var(--color-text-tertiary);
    font-size: 18px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.hero-b2b-box:hover .hero-b2b-arrow {
    opacity: 1;
    transform: translateX(2px);
}

/* Landing Sections */
.landing-section {
    padding: var(--space-8) 0;
}

.landing-section-alt {
    background-color: var(--color-bg-page);
}

.landing-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-5);
}

.landing-section-header h2 {
    font-size: var(--font-size-xl);
    margin: 0;
}

.landing-section-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    text-decoration: none;
}

.landing-section-link:hover {
    text-decoration: underline;
}

.landing-section-link .material-symbols-outlined {
    font-size: 18px;
}

.landing-section-title-center {
    text-align: center;
    margin-bottom: var(--space-3);
}

.landing-section-subtitle {
    text-align: center;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
}

/* Courses Dual Panel */
.courses-dual-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.courses-panel {
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: 0 8px 0 8px;
    overflow: hidden;
}

.courses-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-light);
    background: var(--color-bg-page);
}

.courses-panel-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.courses-panel-title h2 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin: 0;
}

.courses-panel-icon {
    color: var(--color-primary);
    font-size: 20px;
}

.courses-panel-list {
    display: flex;
    flex-direction: column;
}

.courses-panel-header .landing-section-link {
    font-size: var(--font-size-xs);
}

.courses-panel-header .landing-section-link .material-symbols-outlined {
    font-size: 14px;
}

.courses-panel-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    text-align: center;
    color: var(--color-text-tertiary);
}

.courses-panel-empty .material-symbols-outlined {
    font-size: 32px;
    margin-bottom: var(--space-2);
    opacity: 0.5;
}

.courses-panel-empty p {
    margin-bottom: var(--space-2);
    font-size: var(--font-size-sm);
}

.courses-panel-empty a {
    font-size: var(--font-size-xs);
}

/* Compact Course Card */
.course-card-compact {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-3);
    text-decoration: none;
    border-bottom: 1px solid var(--color-border-light);
    transition: background-color 0.15s ease;
}

.course-card-compact:last-child {
    border-bottom: none;
}

.course-card-compact:hover {
    background-color: var(--color-bg-hover);
    text-decoration: none;
}

.course-card-compact-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--color-bg-hover-blue);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.course-card-compact-month {
    font-size: var(--font-size-xs); /* 14px */
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    text-transform: uppercase;
    line-height: 1;
}

.course-card-compact-day {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    line-height: 1;
}

.course-card-compact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--color-bg-hover-blue);
    border-radius: var(--radius-sm);
    color: var(--color-primary);
    font-size: 20px;
    flex-shrink: 0;
}

.course-card-compact-content {
    flex: 1;
    min-width: 0;
}

.course-card-compact-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: 2px;
}

.course-card-compact-time {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.course-card-compact-area {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.course-card-compact-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.course-card-compact-arrow {
    color: var(--color-text-tertiary);
    font-size: 18px;
    flex-shrink: 0;
}

/* Pass Promo */
.pass-promo {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    margin-top: var(--space-4);
    padding: var(--space-6);
    background: var(--color-primary);
    border-radius: 0 16px 0 16px;
    color: white;
}

.pass-promo-content {
    flex: 1;
}

.pass-promo-content h3 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--space-2);
    color: white;
}

.pass-promo-content p {
    font-size: var(--font-size-sm);
    margin: 0 0 var(--space-3);
    opacity: 0.9;
}

.pass-promo-features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    list-style: none;
    margin: 0;
    padding: 0;
}

.pass-promo-features li {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
}

.pass-promo-features .material-symbols-outlined {
    font-size: 16px;
}

.pass-promo-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.pass-promo-price {
    text-align: center;
}

.pass-promo-price-label {
    display: block;
    font-size: var(--font-size-xs);
    opacity: 0.8;
}

.pass-promo-price-amount {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
}

.pass-promo-price-period {
    font-size: var(--font-size-sm);
    opacity: 0.8;
}

.pass-promo-note {
    font-size: var(--font-size-xs);
    opacity: 0.7;
    text-align: center;
}

.pass-promo .btn-primary {
    background: white;
    color: var(--color-primary);
}

.pass-promo .btn-primary:hover {
    background: rgba(255, 255, 255, 0.9);
}

/* Value Prop Split */
.value-prop-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: center;
}

.value-prop-split-reverse {
    direction: rtl;
}

.value-prop-split-reverse > * {
    direction: ltr;
}

.value-prop-content {
    max-width: 540px;
}

.value-prop-eyebrow {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-2);
}

.value-prop-content h2 {
    font-size: var(--font-size-2xl);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-3);
}

.value-prop-content p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

.value-prop-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.value-prop-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.value-prop-list .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-success);
    flex-shrink: 0;
    margin-top: 2px;
}

.value-prop-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.value-prop-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    background: var(--color-bg-hover-blue);
    border-radius: 0 16px 0 16px;
    text-align: center;
    min-width: 200px;
}

.value-prop-card-icon {
    font-size: 48px;
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}

.value-prop-card-stat {
    font-family: var(--font-family-heading);
    font-size: 2.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: var(--space-1);
}

.value-prop-card-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* Browse Cards Grid */
.jurisdiction-grid,
.credit-type-grid,
.practice-area-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-3);
}

.browse-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-4);
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: 0 8px 0 8px;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.browse-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    text-decoration: none;
}

.browse-card-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.browse-card-action {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--color-primary);
}

.browse-card-action .material-symbols-outlined {
    font-size: 14px;
}

/* Final CTA - Grey background variant for PE pages */
.final-cta-grey {
    text-align: center;
    padding: var(--space-10) 0;
    background: var(--color-bg-page);
}

.final-cta-grey .final-cta-inner {
    max-width: 600px;
    margin: 0 auto;
}

.final-cta-grey h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-3);
}

.final-cta-grey p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-5);
}

.final-cta-grey .final-cta-buttons {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 991px) {
    .hero-b2b-boxes {
        grid-template-columns: 1fr;
        max-width: 400px;
    }

    .courses-dual-panel {
        grid-template-columns: 1fr;
    }

    .value-prop-split {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .value-prop-split-reverse {
        direction: ltr;
    }

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

    .pass-promo-content {
        text-align: center;
    }

    .pass-promo-features {
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .landing-hero {
        padding: var(--space-6) 0;
    }

    .landing-section {
        padding: var(--space-6) 0;
    }

    .jurisdiction-grid,
    .credit-type-grid,
    .practice-area-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===========================================
   SUPPLEMENTS PAGE STYLES
   Cards for bar review supplement products
   =========================================== */

/* Supplements Grid */
.supplements-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
}

/* Supplement Card */
.supplement-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
}

.supplement-card-icon {
    width: 56px;
    height: 56px;
    background: var(--color-bg-hover-blue);
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
}

.supplement-card-icon .material-symbols-outlined {
    font-size: 28px;
    color: var(--color-primary);
}

.supplement-card h3 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    color: var(--color-primary);
    margin-bottom: var(--space-2);
}

.supplement-card > p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
    line-height: 1.5;
}

.supplement-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-4) 0;
    flex: 1;
}

.supplement-features li {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    padding: var(--space-1) 0;
    padding-left: var(--space-4);
    position: relative;
}

.supplement-features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    background: var(--color-primary);
    border-radius: 50%;
}

.supplement-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    margin-top: auto;
}

.supplement-price {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

/* Feature Price (used in supplements feature split) */
.feature-price {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}

/* Bundle Savings inline */
.bundle-savings {
    font-size: var(--font-size-sm);
    color: var(--color-success);
    font-weight: var(--font-weight-semibold);
}

/* Info Cards Grid (MPRE page) */
.info-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.info-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-5);
}

.info-card h4 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-base);
    color: var(--color-primary);
    margin-bottom: var(--space-2);
}

.info-card p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* Supplements Responsive */
@media (max-width: 991px) {
    .supplements-grid {
        grid-template-columns: 1fr;
    }

    .info-cards-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .supplement-card-footer {
        flex-direction: column;
        gap: var(--space-3);
        text-align: center;
    }

    .supplement-card-footer .btn {
        width: 100%;
    }
}

/* ===========================================
   PRODUCT CHIPS - Category Labels
   Used on product family landing pages
   =========================================== */

.product-chip {
    display: inline-block;
    background: var(--color-primary-tint);
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Dark variant - white text for better contrast */
.product-chip-dark {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

/* Success/free variant - green */
.product-chip-success {
    background: var(--color-success-light);
    color: var(--color-success-dark);
}

/* ===========================================
   PRICE CHIPS - Quimbee-style price display
   Shows "Starting at $X" after CTAs
   =========================================== */

.price-chip {
    display: inline-flex;
    align-items: center;
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
    font-size: var(--font-size-xs); /* 14px - minimum allowed */
    font-weight: var(--font-weight-semibold);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border-default);
    white-space: nowrap;
    width: fit-content; /* Always hug content */
}

/* Free price chip - green styling */
.price-chip-free {
    background: var(--color-success-light);
    color: var(--color-success-dark);
    border-color: var(--color-success-light);
}

/* ===========================================
   GUARANTEE PANEL - Eye-catching guarantee display
   =========================================== */

.guarantee-panel {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    background: linear-gradient(135deg, var(--color-success-light) 0%, #E0F2E0 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    border: 2px solid var(--color-success);
}

.guarantee-panel-badge {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-success);
    border-radius: var(--radius-full);
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3);
}

.guarantee-panel-badge .material-symbols-outlined {
    font-size: 40px;
    color: var(--color-text-inverse);
}

.guarantee-panel-content h2 {
    font-size: var(--font-size-xl);
    color: var(--color-success-dark);
    margin-bottom: var(--space-2);
}

.guarantee-panel-content p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
    max-width: 600px;
}

@media (max-width: 768px) {
    .guarantee-panel {
        flex-direction: column;
        text-align: center;
    }

    .guarantee-panel-content {
        text-align: center;
    }

    .guarantee-panel-content p {
        max-width: none;
    }
}

/* ===========================================
   LIGHT GREY FINAL CTA SECTION
   Alternative to dark blue final CTA
   =========================================== */

.section-cta-light {
    background: var(--color-bg-card); /* White background */
    padding: var(--space-10) 0;
}

.final-cta-light {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.final-cta-light h2 {
    font-size: var(--font-size-2xl);
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}

.final-cta-light p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-5);
}

.final-cta-light .final-cta-buttons {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

@media (max-width: 480px) {
    .final-cta-light .final-cta-buttons {
        flex-direction: column;
    }

    .final-cta-light .final-cta-buttons .btn {
        width: 100%;
    }
}

/* ===========================================
   PRODUCT SECTION CTA ALIGNMENT
   Ensure price chip aligns with buttons
   =========================================== */

.product-section-ctas {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    align-items: center;
}

/* Price chip appears ABOVE buttons using CSS order */
.product-section-ctas .price-chip {
    order: -1; /* Move to beginning */
}

/* Line break after price chip, before buttons */
.product-section-ctas::before {
    content: '';
    order: 0;
    flex-basis: 100%;
    height: 0;
}

@media (max-width: 1024px) {
    .product-section-ctas {
        justify-content: flex-start;
        flex-direction: column;
        width: 100%;
    }

    .product-section-ctas .btn {
        width: 100%;
    }

    .product-section-ctas::before {
        display: none; /* Not needed in column layout */
    }

    .product-section-ctas .price-chip {
        align-self: flex-start;
        flex-basis: auto;
    }
}

/* External Site Link (Visit X.com) */
.external-site-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.external-site-link:hover {
    color: var(--color-primary);
}

.external-site-link .material-symbols-outlined {
    font-size: 16px;
}

/* ===========================================
   PROFESSIONAL EDUCATION LANDING PAGE
   Search-focused variant with course discovery
   =========================================== */

.pe-landing-page {
    background: var(--color-bg-card);
}

/* Hero with centered content and search */
.hero-family-search {
    text-align: center;
    padding: var(--space-10) 0 var(--space-6);
}

.hero-family-content-centered {
    max-width: 700px;
    margin: 0 auto;
}

.product-section-brand-centered {
    justify-content: center;
}

/* PE Search Bar */
.pe-search-bar {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--color-bg-card);
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-full);
    padding: var(--space-2) var(--space-4);
    margin: var(--space-5) auto var(--space-3);
    max-width: 600px;
    box-shadow: var(--shadow-md);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pe-search-bar:focus-within {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-lg);
}

.pe-search-icon {
    color: var(--color-text-tertiary);
    font-size: 24px;
    margin-right: var(--space-2);
}

.pe-search-bar .pe-search-icon {
    position: static;
    transform: none;
    flex-shrink: 0;
    margin-right: var(--space-3);
}

.pe-search-bar input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    padding: var(--space-2) 0;
    outline: none;
}

.pe-search-bar input::placeholder {
    color: var(--color-text-tertiary);
}

.pe-search-clear {
    display: none;
    background: none;
    border: none;
    padding: var(--space-1);
    cursor: pointer;
    color: var(--color-text-tertiary);
}

.pe-search-bar.has-value .pe-search-clear {
    display: flex;
}

.pe-search-clear:hover {
    color: var(--color-text-primary);
}

/* PE Search Dropdown */
.pe-search-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    display: none;
    z-index: var(--z-dropdown);
    overflow: hidden;
}

.pe-search-dropdown.show {
    display: block;
}

.pe-search-results {
    max-height: 360px;
    overflow-y: auto;
}

.pe-search-result {
    display: flex;
    align-items: center;
    padding: var(--space-3);
    text-decoration: none;
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border-light);
    transition: background 0.15s ease;
}

.pe-search-result:hover {
    background: var(--color-bg-hover);
    text-decoration: none;
}

.pe-search-result-icon {
    color: var(--color-primary);
    font-size: 20px;
    margin-right: var(--space-3);
}

.pe-search-result-content {
    flex: 1;
    min-width: 0;
}

.pe-search-result-title {
    display: block;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pe-search-result-meta {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.pe-search-empty {
    padding: var(--space-5);
    text-align: center;
    color: var(--color-text-tertiary);
}

.pe-search-browse-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--color-bg-hover);
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: background 0.15s ease;
}

.pe-search-browse-all:hover {
    background: var(--color-bg-active);
    text-decoration: none;
}

.pe-browse-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-2);
}

.pe-browse-text a {
    color: var(--color-primary);
    text-decoration: none;
}

.pe-browse-text a:hover {
    text-decoration: underline;
}

/* PE Promo Boxes */
.pe-promo-boxes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.pe-promo-boxes-2 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;
    margin: 0 auto;
}

.pe-promo-box {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    text-decoration: none;
    color: var(--color-text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pe-promo-box:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}

.pe-promo-icon {
    font-size: 32px;
    color: var(--color-primary);
    flex-shrink: 0;
}

.pe-promo-content {
    flex: 1;
    min-width: 0;
}

.pe-promo-content h3 {
    font-size: var(--font-size-base);
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.pe-promo-content p {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.4;
}

.pe-promo-arrow {
    color: var(--color-text-tertiary);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.pe-promo-box:hover .pe-promo-arrow {
    transform: translateX(4px);
}

/* PE Courses Dual Panel */
.pe-courses-dual {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
}

.pe-courses-panel {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.pe-courses-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-hover);
    border-bottom: 1px solid var(--color-border-light);
}

.pe-courses-panel-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.pe-courses-panel-title .material-symbols-outlined {
    color: var(--color-primary);
    font-size: 24px;
}

.pe-courses-panel-title h2 {
    font-size: var(--font-size-lg);
    margin: 0;
}

.pe-courses-view-all {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--color-primary);
    text-decoration: none;
}

.pe-courses-view-all:hover {
    text-decoration: underline;
}

.pe-courses-view-all .material-symbols-outlined {
    font-size: 18px;
}

.pe-courses-list {
    padding: var(--space-2);
}

.pe-course-card-wrapper {
    position: relative;
}

.pe-course-card-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.pe-course-card-wrapper .pe-course-card {
    flex: 1;
}

.pe-course-card-wrapper .pe-course-card .pe-course-arrow {
    display: none;
}

.pe-course-calendar .calendar-dropdown-btn {
    padding: 8px;
    color: var(--color-text-tertiary);
    border-radius: var(--radius-sm);
}

.pe-course-calendar .calendar-dropdown-btn:hover {
    color: var(--color-text-primary);
    background-color: #e5e5e5;
}

.pe-course-calendar .calendar-dropdown-btn .material-symbols-outlined {
    font-size: 20px;
}

.pe-course-calendar .calendar-dropdown-menu {
    right: 0;
    left: auto;
}

.pe-course-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    text-decoration: none;
    color: var(--color-text-primary);
    border-radius: var(--radius-md);
    transition: background 0.15s ease;
}

.pe-course-card:hover {
    background: var(--color-bg-hover);
    text-decoration: none;
}

.pe-course-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.pe-course-month {
    font-size: var(--font-size-xs); /* 14px */
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pe-course-day {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    line-height: 1;
}

.pe-course-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--color-bg-hover);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.pe-course-icon .material-symbols-outlined {
    font-size: 28px;
    color: var(--color-primary);
}

.pe-course-content {
    flex: 1;
    min-width: 0;
}

.pe-course-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
    flex-wrap: wrap;
}

.pe-course-type {
    font-size: var(--font-size-xs); /* 14px */
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    background: var(--color-bg-hover);
    color: var(--color-text-secondary);
}

.pe-course-type-cle {
    background: #E3F2FD;
    color: #1565C0;
}

.pe-course-type-cpe {
    background: #E8F5E9;
    color: #2E7D32;
}

.pe-course-time,
.pe-course-area {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.pe-course-title {
    font-size: var(--font-size-sm);
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pe-course-arrow {
    color: var(--color-text-tertiary);
    flex-shrink: 0;
}

.pe-courses-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    color: var(--color-text-tertiary);
    text-align: center;
}

.pe-courses-empty .material-symbols-outlined {
    font-size: 48px;
    margin-bottom: var(--space-3);
    opacity: 0.5;
}

.pe-courses-empty p {
    margin-bottom: var(--space-2);
}

.pe-courses-empty a {
    color: var(--color-primary);
}

/* Single course panel (for CPE page) */
.pe-courses-single .pe-courses-panel {
    max-width: 800px;
    margin: 0 auto;
}

/* Browse Grid (topic cards) */
.pe-browse-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.pe-browse-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--color-text-primary);
    transition: all 0.2s ease;
}

.pe-browse-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(42, 84, 136, 0.1);
}

.pe-browse-card .material-symbols-outlined {
    font-size: 32px;
    color: var(--color-primary);
}

.pe-browse-card span:last-child {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.pe-browse-all {
    text-align: center;
}

.pe-browse-all .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* Value Props Grid */
.pe-value-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

.pe-value-item {
    text-align: center;
    padding: var(--space-4);
}

.pe-value-item .material-symbols-outlined {
    font-size: 40px;
    color: var(--color-primary);
    margin-bottom: var(--space-2);
}

.pe-value-item h3 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--space-1);
}

.pe-value-item p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

/* PE Features Grid - alias for consistency */
.pe-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

.pe-feature-item {
    text-align: center;
    padding: var(--space-4);
}

.pe-feature-item .material-symbols-outlined {
    font-size: 40px;
    color: var(--color-primary);
    margin-bottom: var(--space-2);
}

.pe-feature-item h3 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--space-1);
}

.pe-feature-item p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

/* Section Header with Link */
.section-header-with-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-5);
}

.section-header-with-link h2 {
    margin: 0;
    font-size: var(--font-size-2xl);
}

.section-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    text-decoration: none;
}

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

.section-link .material-symbols-outlined {
    font-size: 18px;
}

/* Browse Cards Grid */
.browse-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-3);
}

.browse-card-count {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

/* PE Responsive */
@media (max-width: 1024px) {
    .pe-promo-boxes {
        grid-template-columns: 1fr;
    }

    .pe-promo-boxes-2 {
        grid-template-columns: 1fr;
        max-width: 480px;
    }

    .pe-courses-dual {
        grid-template-columns: 1fr;
    }

    .pe-browse-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .pe-value-grid,
    .pe-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .hero-family-search {
        padding: var(--space-6) 0 var(--space-4);
    }

    .pe-search-bar {
        margin: var(--space-4) auto var(--space-2);
    }

    .pe-promo-box {
        padding: var(--space-3);
    }

    .pe-promo-icon {
        font-size: 28px;
    }

    .pe-course-card {
        padding: var(--space-2);
    }

    .pe-course-date,
    .pe-course-icon {
        width: 40px;
        height: 40px;
    }

    .pe-course-day {
        font-size: var(--font-size-base);
    }

    .pe-browse-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pe-value-grid,
    .pe-features-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3);
    }

    .pe-value-item,
    .pe-feature-item {
        padding: var(--space-3);
    }

    .pe-feature-item .material-symbols-outlined {
        font-size: 32px;
    }

    .section-header-with-link {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .pe-value-item .material-symbols-outlined {
        font-size: 32px;
    }
}

/* ===========================================
   RECOMMENDED RESOURCES - Scrollable Panel
   =========================================== */

.resources-section {
    padding: var(--space-10) 0;
}

/* Resources section background */
.section:has(.resources-header) {
    background-color: var(--color-bg-subtle);
}

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

.resources-header h2 {
    font-size: var(--font-size-2xl);
    margin: 0;
}

.resources-view-all {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    text-decoration: none;
    transition: var(--transition-all);
}

.resources-view-all:hover {
    text-decoration: underline;
}

.resources-view-all .material-symbols-outlined {
    font-size: 18px;
    transition: transform 0.2s ease;
}

.resources-view-all:hover .material-symbols-outlined {
    transform: translateX(4px);
}

/* Resources scroll container with navigation buttons */
.resources-wrapper {
    position: relative;
}

.resources-scroll {
    margin: 0 calc(-1 * var(--space-4));
    padding: 0 var(--space-4);
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Scroll navigation buttons - circular, larger, with shadow */
.resources-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-card);
    border: none;
    border-radius: var(--radius-full);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    color: var(--color-text-primary);
    cursor: pointer;
    z-index: 2;
    transition: var(--transition-all);
}

.resources-nav-btn:hover {
    background: var(--color-bg-card);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    color: var(--color-primary);
}

.resources-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.resources-nav-btn .material-symbols-outlined {
    font-size: 24px;
}

.resources-nav-prev {
    left: var(--space-2);
}

.resources-nav-next {
    right: var(--space-2);
}

.resources-scroll::-webkit-scrollbar {
    height: 6px;
}

.resources-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.resources-scroll::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: var(--radius-full);
}

.resources-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-tertiary);
}

.resources-track {
    display: flex;
    gap: var(--space-4);
    padding-bottom: var(--space-3);
}

/* OLD resource-card styles removed - using new browse page grid styles instead */

/* Resources responsive */
@media (max-width: 768px) {
    .resources-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
}

/* ===========================================
   PRODUCT DETAIL PAGE STYLES
   =========================================== */

/* Product Hero */
.hero-product {
    padding: var(--space-10) 0;
    background: linear-gradient(180deg, var(--color-bg-page) 0%, var(--color-bg-card) 100%);
}

.hero-product-fade {
    background: linear-gradient(180deg, #FFFFFF 0%, var(--color-bg-hover-blue) 100%);
}

/* Centered hero content (for guarantee pages, etc.) */
.hero-product-content-centered {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.hero-product-ctas {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-start;
    margin-top: var(--space-6);
}

.guarantee-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    background: white;
}

.guarantee-hero-badge .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-primary);
}

/* Feature note (small text after feature list) */
.feature-note {
    margin-top: var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* ===========================================
   TIER CARDS (Condensed pricing preview)
   =========================================== */

.tier-cards {
    display: grid;
    gap: var(--space-5);
}

.tier-cards-3 {
    grid-template-columns: repeat(3, 1fr);
}

.tier-cards-1 {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.tier-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    position: relative;
}

.tier-card-small {
    transform: scale(0.95);
    opacity: 0.9;
}

.tier-card-featured {
    border-color: var(--color-primary);
    box-shadow: 0 4px 20px rgba(42, 84, 136, 0.15);
    transform: scale(1.02);
    z-index: 1;
}

.tier-card-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.tier-card-header {
    margin-bottom: var(--space-2);
}

.tier-card-header h3 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    margin: 0;
}

.tier-card-pricing {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.tier-card-savings-chip {
    background: var(--color-success);
    color: var(--color-text-inverse);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
}

.tier-card-price-original {
    font-size: var(--font-size-base);
    color: var(--color-text-tertiary);
    text-decoration: line-through;
}

.tier-card-price {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.tier-card-best-for {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0 0 var(--space-2) 0;
}

.tier-card-feature {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    line-height: 1.5;
    margin: 0 0 var(--space-4) 0;
    flex-grow: 1;
}

.tier-card-duration {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-normal);
    margin-top: var(--space-1);
}

.tier-card-price-period {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
}

.tier-card .btn {
    margin-top: auto;
}

/* Tier card feature list (checkmarks) */
.tier-card-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-4) 0;
    flex-grow: 1;
}

.tier-card-features li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

.tier-card-features li:last-child {
    margin-bottom: 0;
}

.tier-card-features .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-success);
    flex-shrink: 0;
    margin-top: 2px;
}

/* 2-column tier cards */
.tier-cards-2 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 700px;
    margin: 0 auto;
}

/* 4-column tier cards */
.tier-cards-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
    .tier-cards-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .tier-cards-3 {
        grid-template-columns: 1fr;
    }

    .tier-card-featured {
        order: -1;
    }
}

@media (max-width: 600px) {
    .tier-cards-2,
    .tier-cards-4 {
        grid-template-columns: 1fr;
    }
}

/* ===========================================
   BUNDLE PANEL (for upsell/alternative sections)
   =========================================== */

.bundle-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

.bundle-content {
    flex: 1;
}

.bundle-badge {
    display: inline-block;
    background: var(--color-primary-tint);
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bundle-content h2 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--space-2) 0;
}

.bundle-content > p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-4) 0;
    line-height: 1.6;
}

.bundle-includes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.bundle-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.bundle-item .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-primary);
}

.bundle-cta {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .bundle-panel {
        flex-direction: column;
        text-align: center;
    }

    .bundle-includes {
        justify-content: center;
    }

    .bundle-cta {
        width: 100%;
    }

    .bundle-cta .btn {
        width: 100%;
    }
}

/* ===========================================
   PAYMENT TABS (for pricing pages)
   =========================================== */

.payment-tabs {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}

.payment-tab {
    padding: var(--space-3) var(--space-6);
    border: 2px solid var(--color-border);
    background: white;
    border-radius: var(--radius-full);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.2s ease;
}

.payment-tab:hover {
    border-color: var(--color-primary);
}

.payment-tab.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

/* ===========================================
   PRICING PAGE SECTION HEADER
   =========================================== */

.pricing-section-header {
    text-align: center;
    margin-bottom: var(--space-6);
}

.pricing-section-header h2 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin: 0 0 var(--space-2);
}

.pricing-section-header p {
    margin: 0;
    color: var(--color-text-secondary);
}

/* ===========================================
   INCLUDED GRID (Centered variant for pricing)
   =========================================== */

.included-grid-center {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

.included-grid-center .included-item {
    text-align: center;
    flex-direction: column;
    align-items: center;
}

.included-grid-center .included-item .material-symbols-outlined {
    font-size: 48px;
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}

.included-grid-center .included-item h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-2);
}

.included-grid-center .included-item p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

@media (max-width: 900px) {
    .included-grid-center {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* ===========================================
   SERIES HIGHLIGHT (for West Academic)
   =========================================== */

.series-highlight {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.series-highlight-item {
    background: white;
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    text-align: center;
}

.series-highlight-item h3 {
    font-size: var(--font-size-lg);
    color: var(--color-primary);
    margin-bottom: var(--space-2);
}

.series-highlight-item p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

@media (max-width: 768px) {
    .series-highlight {
        grid-template-columns: 1fr;
    }
}

/* ===========================================
   HORIZONTAL PRICING CARDS (for bundles)
   =========================================== */

.pricing-cards-horizontal {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 800px;
    margin: 0 auto;
}

.pricing-card-horizontal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-5) var(--space-6);
    background: white;
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    position: relative;
}

.pricing-card-horizontal.is-featured {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(42, 84, 136, 0.15);
}

.pricing-card-horizontal .tier-card-badge {
    position: absolute;
    top: -12px;
    left: var(--space-5);
}

.pricing-card-horizontal-content {
    flex: 1;
}

.pricing-card-horizontal-content h3 {
    margin: 0 0 var(--space-1);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
}

.pricing-card-horizontal-content p {
    margin: 0;
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
}

.pricing-card-horizontal-content .card-subjects {
    margin-top: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

.pricing-card-horizontal-pricing {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-shrink: 0;
}

.pricing-card-horizontal-price-group {
    text-align: right;
}

.pricing-card-horizontal-price {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    line-height: 1;
}

.pricing-card-horizontal-price-original {
    font-size: var(--font-size-base);
    color: var(--color-text-tertiary);
    text-decoration: line-through;
    display: block;
    margin-bottom: var(--space-1);
}

.pricing-card-horizontal-price-suffix {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
    display: block;
    margin-top: var(--space-1);
}

.pricing-card-horizontal-pricing .btn {
    min-width: 140px;
}

@media (max-width: 640px) {
    .pricing-card-horizontal {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .pricing-card-horizontal-pricing {
        width: 100%;
        justify-content: space-between;
        margin-top: var(--space-4);
        padding-top: var(--space-4);
        border-top: 1px solid var(--color-border-light);
    }

    .pricing-card-horizontal-price-group {
        text-align: left;
    }
}

.hero-product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
    align-items: center;
}

.hero-product-content h1 {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--space-4);
}

.hero-product-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
    line-height: 1.6;
}

.hero-product-stats {
    display: flex;
    gap: var(--space-6);
}

.hero-stat {
    display: flex;
    flex-direction: column;
}

.hero-stat-number {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.hero-stat-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.hero-product-visual {
    display: flex;
    justify-content: center;
}

/* Pricing Section on Product Pages */
.product-pricing-section {
    background: var(--color-bg-page);
}

/* Pricing Tabs */
.pricing-tabs-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.pricing-tabs {
    display: inline-flex;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-full);
    padding: var(--space-1);
}

.pricing-tabs-timing {
    /* Primary tabs - larger */
}

.pricing-tabs-funding {
    /* Secondary tabs - can be styled differently if needed */
}

.pricing-tab {
    display: inline-block;
    padding: var(--space-2) var(--space-5);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    background: none;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: var(--transition-all);
    text-decoration: none;
}

.pricing-tab:hover {
    color: var(--color-text-primary);
    text-decoration: none;
}

.pricing-tab.active {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.pricing-tab.active:hover {
    color: var(--color-text-inverse);
}

/* Pricing Tab Content */
.pricing-tab-content {
    display: none;
}

.pricing-tab-content.active {
    display: block;
}

/* Pricing Links (scholarships, payment plans) */
.pricing-links {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border-light);
}

.pricing-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    text-decoration: none;
    transition: var(--transition-colors);
}

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

.pricing-link .material-symbols-outlined {
    font-size: 20px;
}

/* Pricing Note */
.pricing-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-4);
}

.pricing-note .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-text-tertiary);
}

.pricing-note p {
    margin: 0;
}

.pricing-note a {
    color: var(--color-primary);
}

/* Pricing Testimonials (inline with pricing section) */
.pricing-testimonials {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border-light);
}

.pricing-testimonial {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    border-left: 4px solid var(--color-primary);
}

.pricing-testimonial blockquote {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    line-height: 1.6;
    margin: 0 0 var(--space-3) 0;
    font-style: italic;
}

.pricing-testimonial cite {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-style: normal;
    font-weight: var(--font-weight-medium);
}

/* Pricing Card Subtitle */
.pricing-card-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-4) 0;
}

/* Single Pricing Card (centered) */
.pricing-cards-single {
    display: flex;
    justify-content: center;
}

.pricing-cards-single .pricing-card {
    margin: 0 auto;
}

/* ===========================================
   FEATURES GRID
   =========================================== */

.features-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

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

.feature-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-align: center;
}

.feature-card-icon {
    font-size: 40px;
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}

.feature-card h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-2);
}

.feature-card p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.6;
}

.feature-icon {
    font-size: 40px;
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}

/* Features Grid Base */
.features-grid {
    display: grid;
    gap: var(--space-5);
}

@media (max-width: 900px) {
    .features-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* Feature Box (alternative style with icon container) */
.feature-box {
    text-align: center;
    padding: var(--space-5);
}

.feature-box-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: var(--color-bg-hover-blue);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
}

.feature-box-icon .material-symbols-outlined {
    font-size: 32px;
    color: var(--color-primary);
}

.feature-box h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-2);
}

.feature-box p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

/* ===========================================
   EXTERNAL PURCHASE NOTE
   =========================================== */

.external-purchase-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding: var(--space-4);
    background: var(--color-bg-hover-blue);
    border-radius: var(--radius-lg);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.external-purchase-note .material-symbols-outlined {
    font-size: 24px;
    color: var(--color-primary);
    flex-shrink: 0;
}

.external-purchase-note p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.external-purchase-note a {
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

/* ===========================================
   PRODUCT SECTION DIVIDER
   =========================================== */

.product-section-divider {
    text-align: center;
    padding: var(--space-10) 0 var(--space-6);
    margin-top: var(--space-8);
    border-top: 2px solid var(--color-border-light);
}

.product-section-divider h2 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin: 0 0 var(--space-2);
}

.product-section-divider p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: 0;
}

/* ===========================================
   LANDING PAGE PRODUCT HERO
   =========================================== */

.product-hero {
    background: var(--color-bg-hover-blue);
    padding: var(--space-12) 0;
}

.product-hero .container {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--space-8);
    align-items: center;
}

.product-hero-eyebrow {
    display: inline-block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--space-2);
}

.product-hero h1 {
    font-size: var(--font-size-3xl);
    color: var(--color-text-primary);
    margin-bottom: var(--space-4);
}

.product-hero-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-6);
}

.product-hero-cta {
    display: flex;
    gap: var(--space-3);
}

@media (max-width: 992px) {
    .product-hero .container {
        grid-template-columns: 1fr;
    }

    .product-hero-visual {
        display: none;
    }
}

@media (max-width: 768px) {
    .product-hero-cta {
        flex-direction: column;
    }
}

/* ===========================================
   SKILLS BENEFITS LIST
   =========================================== */

.skills-benefits-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.skill-benefit-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    font-weight: 500;
}

.skill-benefit-item .material-symbols-outlined {
    color: var(--color-primary);
}

/* ===========================================
   PRACTICE AREAS GRID (Skills Page)
   =========================================== */

.practice-areas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

@media (max-width: 992px) {
    .practice-areas-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .practice-areas-grid {
        grid-template-columns: 1fr;
    }
}

/* ===========================================
   SCHEDULE TABLE (LSAT Page)
   =========================================== */

.schedule-filters {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-5);
    gap: var(--space-4);
    flex-wrap: wrap;
}

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

.schedule-filter-group label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.schedule-filter-select {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    background: white;
    cursor: pointer;
}

.schedule-table-wrapper {
    overflow-x: auto;
    margin-bottom: var(--space-4);
}

.schedule-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.schedule-table thead {
    background: var(--color-primary);
    color: white;
}

.schedule-table th {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.schedule-table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-light);
    font-size: var(--font-size-sm);
}

.schedule-table tbody tr:hover {
    background: var(--color-bg-hover-blue);
}

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

.schedule-date {
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.schedule-topic {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    margin-right: var(--space-2);
}

.schedule-topic-lg {
    background: #e3f2fd;
    color: #1565c0;
}

.schedule-topic-lr {
    background: #f3e5f5;
    color: #7b1fa2;
}

.schedule-topic-rc {
    background: #e8f5e9;
    color: #2e7d32;
}

.schedule-topic-pt {
    background: #fff3e0;
    color: #e65100;
}

.schedule-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.schedule-page-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.schedule-page-btn:hover:not(:disabled) {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.schedule-page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.schedule-page-info {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.schedule-note {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

@media (max-width: 600px) {
    .schedule-filters {
        flex-direction: column;
        align-items: flex-start;
    }

    .schedule-table th,
    .schedule-table td {
        padding: var(--space-2) var(--space-3);
    }
}

/* ===========================================
   BENEFITS GRID
   =========================================== */

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

@media (max-width: 900px) {
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.benefit-card {
    text-align: center;
    padding: var(--space-5);
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
}

.benefit-card .material-symbols-outlined {
    font-size: 40px;
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}

.benefit-card h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-2);
}

.benefit-card p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

/* ===========================================
   REQUIREMENTS GRID
   =========================================== */

.requirements-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

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

.requirement-card {
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    padding: var(--space-5);
    text-align: center;
}

.requirement-number {
    width: 48px;
    height: 48px;
    background: var(--color-primary);
    color: white;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-3);
}

.requirement-card h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-2);
}

.requirement-card p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

/* ===========================================
   FEATURES GRID - What's Included sections
   =========================================== */

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

.feature-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-align: center;
}

.feature-card .feature-card-icon {
    width: 56px;
    height: 56px;
    background: var(--color-primary-tint);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-4);
}

.feature-card .feature-card-icon .material-symbols-outlined {
    font-size: 28px;
    color: var(--color-primary);
}

.feature-card h3 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2);
}

.feature-card p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* 3-column variant */
.features-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* 2-column variant */
.features-grid-2 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1000px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .features-grid,
    .features-grid-3,
    .features-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* ===========================================
   FEATURE CARDS GRID (Variant with Icon)
   =========================================== */

.feature-cards-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
    max-width: 900px;
    margin: 0 auto;
}

@media (max-width: 640px) {
    .feature-cards-grid-2 {
        grid-template-columns: 1fr;
    }
}

.feature-card-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-tint);
    border-radius: var(--radius-full);
}

.feature-card-icon .material-symbols-outlined {
    font-size: 28px;
    color: var(--color-primary);
}

/* ===========================================
   STEPS GRID
   =========================================== */

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

.step-card {
    text-align: center;
    position: relative;
}

.step-number {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-full);
    margin: 0 auto var(--space-4);
}

.step-card h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-2);
}

.step-card p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

/* Guarantee Page Styles */
.guarantee-hero-icon {
    font-size: 64px;
    color: var(--color-primary);
    margin-bottom: var(--space-4);
}

.eligibility-card {
    background: white;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

.eligibility-intro {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-4);
}

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

.eligibility-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--font-size-md);
    line-height: var(--line-height-relaxed);
}

.eligibility-list .material-symbols-outlined {
    font-size: 24px;
    color: var(--color-success);
    flex-shrink: 0;
    margin-top: 2px;
}

/* ===========================================
   CTA BANNER
   =========================================== */

.section-cta {
    background: var(--color-primary);
}

.cta-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
}

.cta-banner-content h2 {
    color: var(--color-text-inverse);
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-2);
}

.cta-banner-content p {
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.cta-banner-actions {
    display: flex;
    gap: var(--space-3);
    flex-shrink: 0;
}

.cta-banner-actions .btn-primary {
    background: var(--color-bg-card);
    color: var(--color-primary);
}

.cta-banner-actions .btn-primary:hover {
    background: var(--color-bg-page);
}

.cta-banner-actions .btn-secondary {
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--color-text-inverse);
}

.cta-banner-actions .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--color-text-inverse);
}

/* ===========================================
   STATS BAR LARGE (Product Detail Pages)
   =========================================== */

.stats-section {
    background: var(--color-bg-page);
}

.stats-bar-large {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
    text-align: center;
}

.stat-large {
    padding: var(--space-6);
}

.stat-large-number {
    display: block;
    font-family: var(--font-family-heading);
    font-size: 56px;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: var(--space-3);
}

.stat-large-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* ===========================================
   BREADCRUMBS (Inside Hero)
   =========================================== */

.breadcrumbs {
    margin-bottom: var(--space-6); /* 24px - hero padding adds the rest */
}

.breadcrumb-list {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--font-size-sm);
}

.breadcrumb-list li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.breadcrumb-list li:not(:last-child)::after {
    content: "/";
    color: var(--color-text-tertiary);
}

.breadcrumb-list a {
    color: var(--color-primary);
    text-decoration: none;
    transition: var(--transition-colors);
}

.breadcrumb-list a:hover {
    text-decoration: underline;
}

.breadcrumb-list li[aria-current="page"] {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
}

/* ===========================================
   FAQ STYLES
   =========================================== */

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

.faq-item {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-4) var(--space-5);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    list-style: none;
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-question span:first-child {
    flex: 1;
    padding-right: var(--space-4);
}

.faq-icon {
    font-size: 24px;
    color: var(--color-text-tertiary);
    transition: transform 0.2s ease;
}

.faq-item[open] .faq-icon {
    transform: rotate(180deg);
}

.faq-item[open] .faq-question {
    border-bottom: 1px solid var(--color-border-light);
}

.faq-answer {
    padding: var(--space-4) var(--space-5);
}

.faq-answer p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin: 0;
}

.faq-answer p + p {
    margin-top: var(--space-3);
}

/* Curriculum Grid - Used on certificate product pages */
.curriculum-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.curriculum-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.curriculum-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
    .curriculum-grid-3,
    .curriculum-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .curriculum-grid,
    .curriculum-grid-3,
    .curriculum-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* Bundle Promo - Used on ACEDS pages */
.bundle-promo {
    text-align: center;
    margin-top: var(--space-6);
    padding: var(--space-4);
    background: var(--color-bg-hover-blue);
    border-radius: var(--radius-lg);
}

.bundle-promo p {
    margin: 0;
    color: var(--color-text-secondary);
}

.bundle-promo a {
    color: var(--color-primary);
}

.curriculum-card {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-align: center;
}

.curriculum-card .material-symbols-outlined {
    font-size: 40px;
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}

.curriculum-card h3 {
    font-size: var(--font-size-base);
    margin-bottom: var(--space-2);
}

.curriculum-card p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

/* ===========================================
   PRODUCT DETAIL RESPONSIVE
   =========================================== */

@media (max-width: 1024px) {
    .hero-product-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .hero-product-content {
        text-align: center;
    }

    .hero-product-stats {
        justify-content: center;
    }

    .features-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .features-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pricing-testimonials {
        grid-template-columns: 1fr 1fr;
    }

    .stats-bar-large {
        gap: var(--space-4);
    }

    .stat-large-number {
        font-size: 44px;
    }
}

@media (max-width: 768px) {
    .hero-product {
        padding: var(--space-6) 0;
    }

    .hero-product-content h1 {
        font-size: var(--font-size-2xl);
    }

    .hero-product-stats {
        flex-direction: column;
        gap: var(--space-3);
        align-items: center;
    }

    .hero-stat {
        align-items: center;
    }

    .pricing-tabs-wrapper {
        width: 100%;
    }

    .pricing-tabs {
        flex-wrap: wrap;
        justify-content: center;
        border-radius: var(--radius-lg);
    }

    .pricing-tab {
        padding: var(--space-2) var(--space-3);
        font-size: var(--font-size-xs);
    }

    .pricing-cards-3,
    .pricing-cards-2 {
        grid-template-columns: 1fr;
    }

    .pricing-links {
        flex-direction: column;
        align-items: center;
        gap: var(--space-3);
    }

    .features-grid-3,
    .features-grid-4 {
        grid-template-columns: 1fr;
    }

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

    .guarantee-hero-icon {
        font-size: 48px;
    }

    .eligibility-card {
        padding: var(--space-4);
    }

    .eligibility-intro {
        font-size: var(--font-size-md);
    }

    .eligibility-list li {
        font-size: var(--font-size-sm);
    }

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

    .cta-banner-content h2 {
        font-size: var(--font-size-xl);
    }

    .cta-banner-actions {
        flex-direction: column;
        width: 100%;
    }

    .cta-banner-actions .btn {
        width: 100%;
    }

    .faq-question {
        padding: var(--space-3) var(--space-4);
    }

    .faq-answer {
        padding: var(--space-3) var(--space-4);
    }

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

    .stats-bar-large {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .stat-large {
        padding: var(--space-4);
        border-bottom: 1px solid var(--color-border-light);
    }

    .stat-large:last-child {
        border-bottom: none;
    }

    .stat-large-number {
        font-size: 40px;
    }

    .stat-large-label {
        font-size: var(--font-size-xs);
    }

    .breadcrumb-list {
        font-size: var(--font-size-xs);
        flex-wrap: wrap;
    }
}

/* ===========================================
   CONFIGURATION PAGE
   =========================================== */

.configuration-page {
    padding: var(--space-8) 0;
    min-height: 80vh;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-6);
    transition: color 0.2s;
}

.back-link:hover {
    color: var(--color-primary);
}

.back-link .material-symbols-outlined {
    font-size: 20px;
}

.configuration-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-8);
    align-items: start;
}

.configuration-form-section h1 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    color: var(--color-text-primary);
    margin-bottom: var(--space-6);
}

.config-step {
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

.config-step:last-child {
    border-bottom: none;
}

.config-step h2 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
    margin-bottom: var(--space-4);
}

.config-field label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

.config-field select {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-base);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: white;
    cursor: pointer;
}

.config-field select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

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

.config-option {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.config-option:hover {
    border-color: var(--color-primary-light);
    background: var(--color-background-subtle);
}

.config-option.selected,
.config-option:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary-tint);
}

.config-option input[type="radio"] {
    margin-top: 2px;
    accent-color: var(--color-primary);
}

.config-option-content {
    flex: 1;
}

.config-option-title {
    display: block;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.config-option-desc {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.config-option-price {
    display: block;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin-bottom: var(--space-1);
}

.config-option-savings {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-success);
    background: var(--color-success-light);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-1);
}

.config-option-badge {
    position: absolute;
    top: -10px;
    left: var(--space-4);
    background: var(--color-primary);
    color: white;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    padding: 2px var(--space-3);
    border-radius: var(--radius-sm);
}

.config-option-featured {
    border-color: var(--color-primary);
}

.config-options-tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

/* Order Summary */
.order-summary-section {
    position: sticky;
    top: calc(var(--header-height) + var(--space-6)); /* Header (72px) + padding (40px) = 112px */
}

.order-summary {
    background: var(--color-background-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

.order-summary h2 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-5);
}

.order-summary-product {
    display: flex;
    gap: var(--space-4);
    padding-bottom: var(--space-5);
    margin-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.order-summary-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.order-summary-details h3 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-1);
}

.order-summary-tier {
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

.order-summary-meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.order-summary-line {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3);
}

.order-summary-total {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    margin-bottom: var(--space-5);
    border-top: 1px solid var(--color-border);
}

.order-summary-note {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    text-align: center;
    margin-top: var(--space-3);
}

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

    .config-options-tiers {
        grid-template-columns: 1fr;
    }

    .order-summary-section {
        position: static;
    }
}

/* ===========================================
   BROWSE PAGE - Course Search & Filtering
   =========================================== */

.browse-page {
    padding: var(--space-5) 0 var(--space-9);
}

.browse-header {
    margin-bottom: var(--space-4);
}

.browse-header h1 {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--space-1);
}

.browse-results-summary {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

/* Sticky filter section */
.browse-sticky-filters {
    position: sticky;
    top: calc(var(--header-height) + var(--space-6)); /* Header (72px) + padding (40px) = 112px */
    z-index: 50;
    background-color: var(--color-bg-page);
    padding: var(--space-3);
    margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) var(--space-3) calc(-1 * var(--space-3));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0);
    transition: box-shadow 0.2s ease;
}

.browse-sticky-filters.is-stuck {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.search-filters-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.browse-search {
    display: flex;
    align-items: center;
    flex: 1;
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-2) var(--space-3);
}

.browse-search:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(42, 84, 136, 0.1);
}

.browse-search > .material-symbols-outlined:first-child {
    font-size: 20px;
    color: var(--color-text-tertiary);
    margin-right: var(--space-2);
}

.browse-search input {
    flex: 1;
    padding: var(--space-1) 0;
    font-size: var(--font-size-sm);
    font-family: var(--font-family-body);
    border: none;
    background: transparent;
    color: var(--color-text-primary);
}

.browse-search input:focus {
    outline: none;
}

.browse-search input::placeholder {
    color: var(--color-text-tertiary);
}

.search-clear-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    color: var(--color-text-tertiary);
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.search-clear-btn:hover {
    color: var(--color-text-primary);
    background-color: var(--color-border-light);
}

.search-clear-btn .material-symbols-outlined {
    font-size: 18px;
}

.search-btn {
    margin-left: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
}

.filters-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* Active Filter Chips */
.browse-active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-5);
    background-color: var(--color-border-light);
    border-radius: var(--radius-md);
}

.active-filters-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    margin-right: var(--space-1);
}

.filter-chip-label {
    font-weight: var(--font-weight-normal);
    color: var(--color-text-tertiary);
}

.active-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.active-filter-chip:hover {
    background-color: var(--color-border-light);
    text-decoration: none;
}

.active-filter-chip .material-symbols-outlined {
    font-size: 14px;
}

.clear-all-filters {
    margin-left: auto;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-decoration: none;
}

.clear-all-filters:hover {
    color: var(--color-primary);
}

/* Course Cards List */
.course-cards-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background-color: var(--color-border-light);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.course-cards-list {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-card);
}

.course-card-row {
    display: grid;
    grid-template-columns: 1fr 100px 120px 140px 90px;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-light);
    transition: background-color 0.15s ease;
}

.course-card-row:last-child {
    border-bottom: none;
}

.course-card-row:nth-child(even) {
    background-color: #f9fafb;
}

.course-card-row:hover {
    background-color: #f5f5f5;
}

.course-cards-header {
    display: grid;
    grid-template-columns: 1fr 100px 120px 140px 90px;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-primary);
    color: white;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.course-cards-header span:last-child {
    text-align: right;
}

.course-card-main {
    min-width: 0;
}

h3.course-card-title {
    font-family: var(--font-family-body);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    margin: 0 0 2px 0;
}

.course-card-title a {
    color: var(--color-primary);
    text-decoration: none;
}

.course-card-title a:hover {
    text-decoration: underline;
}

.course-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.course-card-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    color: var(--color-text-tertiary);
}

.course-card-meta-item .material-symbols-outlined {
    font-size: 14px;
}

.course-card-tags {
    display: none;
}

.course-card-type {
    display: flex;
    justify-content: flex-start;
}

.course-card-type .chip {
    font-size: 12px;
    padding: 4px 10px;
}

.course-card-credits {
    display: flex;
    justify-content: flex-start;
}

.course-card-credits .chip {
    font-size: 12px;
    padding: 4px 10px;
    cursor: pointer;
    border: none;
    background-color: #f1f1f1;
}

.course-card-credits .chip:hover {
    background-color: #e5e5e5;
}

.course-card-price-col {
    display: flex;
    align-items: center;
    justify-content: center;
}

.course-card-price {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.course-card-action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.course-card-action .btn {
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 12px;
}

.course-card-action .btn-secondary {
    display: none;
}

/* Promo Pricing */
.course-card-pricing-promo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.promo-badge {
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: white;
    background-color: #dc2626;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    width: fit-content;
}

.promo-original {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    text-decoration: line-through;
}

.promo-sale {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: #dc2626;
}

/* Calendar Dropdown */
.calendar-dropdown {
    position: relative;
    display: inline-flex;
}

.calendar-dropdown-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    color: var(--color-text-secondary);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.calendar-dropdown-btn:hover {
    background-color: #e5e5e5;
    color: var(--color-text-primary);
}

.calendar-dropdown-btn .material-symbols-outlined {
    font-size: 16px;
    flex-shrink: 0;
}

.calendar-dropdown-btn .dropdown-arrow {
    font-size: 14px;
    transition: transform 0.2s ease;
    margin-left: 2px;
}

/* Browse table calendar styling */
.course-card-meta .calendar-dropdown {
    margin-left: 0;
}

.course-card-meta .calendar-dropdown-btn {
    padding: 2px 6px;
    margin: -2px 0;
    font-size: 12px;
    background-color: #f5f5f5;
    border-radius: var(--radius-sm);
}

.course-card-meta .calendar-dropdown-btn:hover {
    background-color: #e0e0e0;
}

.calendar-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}

.calendar-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    min-width: 180px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.calendar-dropdown.open .calendar-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.calendar-dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: 13px;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 0.15s ease;
}

.calendar-dropdown-menu .dropdown-item:first-child {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.calendar-dropdown-menu .dropdown-item:last-child {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.calendar-dropdown-menu .dropdown-item:hover {
    background-color: var(--color-bg-hover, #f5f5f5);
}

.calendar-dropdown-menu .dropdown-item .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-text-secondary);
}

/* Filter Tags */
.filter-tag {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
    white-space: nowrap;
}

.filter-tag:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Chips */
.chip {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.chip-sm {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-sm);
}

.chip-cle {
    background-color: #E8F0FE;
    color: #1A73E8;
}

.chip-cpe {
    background-color: #E6F4EA;
    color: #137333;
}

.chip-skills {
    background-color: #FCE8E6;
    color: #C5221F;
}

.chip-microlearning {
    background-color: #FEF7E0;
    color: #B06000;
}

.chip-simulation {
    background-color: #F3E8FD;
    color: #7627BB;
}

.chip-neutral {
    background-color: var(--color-border-light);
    color: var(--color-text-secondary);
}

.chip-clickable {
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.chip-clickable:hover {
    opacity: 0.8;
}

.chip-outline {
    background-color: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
}

.resource-card-meta .chip-sm {
    font-size: 11px;
    padding: 4px 10px;
}

/* Resource Cards Grid */
.resources-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.resource-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-4);
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--color-text-primary);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.resource-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    transform: translateY(-2px);
}

.resource-card-link {
    display: contents;
}

.resource-card-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: var(--space-3);
    /* Background set inline based on category */
}

.resource-card-icon .material-symbols-outlined {
    font-size: 32px;
    color: white;
}

.resource-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.resource-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.resource-card-title {
    font-family: var(--font-family-body);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2) 0;
}

.resource-card:hover .resource-card-title {
    color: var(--color-primary);
}

.resource-card-description {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-3) 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.resource-card-footer {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    margin-top: auto;
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border-light);
}

.resource-card-author {
    font-weight: var(--font-weight-medium);
}

.resource-card-date {
    color: var(--color-text-tertiary);
}

.resource-card-arrow {
    display: none;
}

.browse-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin: var(--space-2) 0 0 0;
}

.browse-results-meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-2);
}

/* Browse empty state */
.browse-empty {
    text-align: center;
    padding: var(--space-9) var(--space-4);
}

.browse-empty-icon {
    font-size: 64px;
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-4);
}

.browse-empty h2 {
    font-size: var(--font-size-2xl);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

.browse-empty p {
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-5);
}

.browse-empty-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
}

/* Pagination Bar */
.pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
}

.results-count {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.pagination-controls label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.per-page-select {
    padding: 6px var(--space-2);
    font-size: var(--font-size-sm);
    font-family: var(--font-family-body);
    color: var(--color-text-primary);
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.page-info {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    min-width: 120px;
    text-align: right;
}

.page-nav-buttons {
    display: flex;
    gap: var(--space-1);
}

.page-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--color-text-secondary);
    background-color: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.page-nav-btn:hover:not(:disabled) {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.page-nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-nav-btn .material-symbols-outlined {
    font-size: 20px;
}

/* Filter Drawer */
.filter-drawer {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    max-width: 100vw;
    height: 100vh;
    background-color: var(--color-bg-card);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

.filter-drawer.open {
    right: 0;
}

.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    z-index: 999;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.drawer-overlay.open {
    opacity: 1;
    visibility: visible;
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border-light);
    flex-shrink: 0;
}

.drawer-header .drawer-title {
    font-size: var(--font-size-xl);
    margin: 0;
}

.drawer-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--color-text-secondary);
    background: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.drawer-close-btn:hover {
    color: var(--color-text-primary);
    background-color: var(--color-border-light);
}

.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-5);
}

.drawer-footer {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border-light);
    background-color: var(--color-bg-card);
    flex-shrink: 0;
}

.drawer-footer .btn {
    flex: 1;
}

/* Filter Sections */
.filter-section {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border-light);
}

.filter-section:last-of-type {
    border-bottom: none;
}

.filter-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-2) 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.filter-section-header:hover {
    color: var(--color-primary);
}

.filter-section-title {
    font-family: var(--font-family-body);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.filter-section-header .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-text-tertiary);
    transition: transform 0.2s ease;
}

.filter-section-header[aria-expanded="false"] .material-symbols-outlined {
    transform: rotate(-90deg);
}

.filter-section-content {
    padding-top: var(--space-2);
}

.filter-options-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.filter-options-list.collapsed .filter-checkbox:nth-child(n+6) {
    display: none;
}

.filter-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: background-color 0.15s ease;
}

.filter-checkbox:hover {
    background-color: var(--color-border-light);
}

.filter-checkbox input[type="checkbox"],
.filter-checkbox input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
}

.filter-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.filter-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.filter-count {
    color: var(--color-text-tertiary);
    font-size: 12px;
}

.filter-format-icon {
    font-size: 18px;
    vertical-align: middle;
    margin-right: 4px;
}

.filter-show-more {
    margin-top: var(--space-2);
    padding: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    background: none;
    border: none;
    cursor: pointer;
}

.filter-show-more:hover {
    text-decoration: underline;
}

.filter-date-inputs {
    display: flex;
    gap: var(--space-3);
}

.filter-date-field {
    flex: 1;
}

.filter-date-field label {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.filter-date-field input[type="date"] {
    width: 100%;
    padding: var(--space-2);
    font-size: var(--font-size-sm);
    font-family: var(--font-family-body);
    color: var(--color-text-primary);
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

/* Browse Empty State */
.browse-empty {
    text-align: center;
    padding: var(--space-12) var(--space-4);
}

.browse-empty-icon {
    font-size: 64px;
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-4);
}

.browse-empty h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-2);
}

.browse-empty p {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
}

.browse-empty-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
}

/* ===========================================
   WEST ACADEMIC BROWSE
   =========================================== */

.wa-browse-results {
    margin-top: var(--space-4);
}

.wa-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.wa-results-count {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.wa-results-sort {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.wa-results-sort label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.wa-sort-select {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    font-family: var(--font-family-body);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    cursor: pointer;
}

/* Title Cards Grid */
.wa-titles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

@media (max-width: 1200px) {
    .wa-titles-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .wa-titles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* Title Card */
.wa-title-card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: var(--color-text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wa-title-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    text-decoration: none;
}

.wa-title-card-cover {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wa-title-card-cover .material-symbols-outlined {
    font-size: 32px;
    color: rgba(255, 255, 255, 0.6);
}

.wa-title-card-content {
    padding: var(--space-4);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.wa-title-card-series {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: white;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-2);
    align-self: flex-start;
}

.wa-title-card-content h3 {
    font-family: var(--font-family-body);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    margin: 0 0 var(--space-1) 0;
    color: var(--color-text-primary);
}

.wa-title-card-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-1) 0;
    line-height: var(--line-height-tight);
}

.wa-title-card-authors {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    margin: 0;
}

.wa-title-card-pricing {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-light);
}

.wa-title-card-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-3);
}

.wa-title-card-actions .btn {
    width: 100%;
    text-align: center;
}

.wa-title-card-content h3 a {
    color: inherit;
    text-decoration: none;
}

.wa-title-card-content h3 a:hover {
    color: var(--color-primary);
}

.wa-title-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-light);
}

.wa-title-card-price {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.wa-title-card-collection {
    color: var(--color-success);
}

.wa-title-card-collection .material-symbols-outlined {
    font-size: 20px;
}

/* ===========================================
   WEST ACADEMIC TITLE DETAIL PAGE
   Two-column layout matching CLE/CPE pattern
   =========================================== */

.wa-detail-page {
    padding: var(--space-6) 0;
}

.wa-detail-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: var(--space-8);
    margin-top: var(--space-6);
}

/* Main Content */
.wa-detail-main {
    min-width: 0;
}

.wa-detail-header {
    margin-bottom: var(--space-6);
}

.wa-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.wa-series-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    color: white;
    text-decoration: none;
}

.wa-series-badge:hover {
    text-decoration: none;
    opacity: 0.9;
}

.wa-collection-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    background: #E8F5E9;
    color: #2E7D32;
}

.wa-collection-badge .material-symbols-outlined {
    font-size: 16px;
}

.wa-detail-header h1 {
    font-size: var(--font-size-3xl);
    font-family: var(--font-family-heading);
    color: var(--color-primary);
    margin: 0 0 var(--space-3);
    line-height: 1.2;
}

.wa-detail-authors {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-4);
}

.wa-detail-info {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.wa-detail-info-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.wa-detail-info-item .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-primary);
}

/* Section styling */
.wa-detail-section {
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border-light);
}

.wa-detail-section:last-child {
    border-bottom: none;
}

.wa-detail-section h2 {
    font-size: var(--font-size-xl);
    font-family: var(--font-family-heading);
    color: var(--color-primary);
    margin: 0 0 var(--space-4);
}

.wa-detail-description {
    color: var(--color-text-secondary);
    line-height: 1.7;
}

/* Formats List */
.wa-formats-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.wa-format-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-md);
}

.wa-format-icon {
    font-size: 24px;
    color: var(--color-primary);
}

.wa-format-details {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.wa-format-name {
    font-weight: var(--font-weight-semibold);
}

.wa-format-isbn {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.wa-format-price {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

/* Subjects */
.wa-subjects-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.wa-subject-tag {
    display: inline-block;
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    text-decoration: none;
    color: var(--color-text-primary);
    transition: background-color 0.15s ease;
}

.wa-subject-tag:hover {
    background: var(--color-primary-tint);
    color: var(--color-primary);
    text-decoration: none;
}

/* Sidebar */
.wa-detail-sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--space-6)); /* Header (72px) + padding (40px) = 112px */
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    height: fit-content;
}

/* Purchase Card */
.wa-purchase-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--color-border-light);
}

.wa-purchase-price {
    text-align: center;
    margin-bottom: var(--space-4);
}

.wa-purchase-price .price-from {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-1);
}

.wa-purchase-price .price-amount {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.wa-purchase-heading {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--space-4);
    color: var(--color-text-primary);
}

.wa-format-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.wa-format-buy-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-subtle);
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.wa-format-buy-btn:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-tint);
}

.wa-format-buy-info {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.wa-format-buy-info .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-primary);
}

.wa-format-buy-label {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.wa-format-buy-savings {
    font-size: var(--font-size-xs);
    color: var(--color-success);
    font-weight: var(--font-weight-medium);
    margin-left: var(--space-2);
}

.wa-format-buy-price {
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    font-size: var(--font-size-lg);
}

.wa-format-buy-bundle {
    background: var(--color-primary-tint);
    border-color: var(--color-primary);
}

.wa-format-buy-bundle:hover {
    background: var(--color-primary-tint-hover);
}

/* Series Panel (in main content) */
.wa-series-panel {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
}

.wa-series-panel .wa-series-icon {
    flex-shrink: 0;
}

.wa-series-panel .wa-series-text {
    flex: 1;
}

.wa-series-panel .wa-series-text strong {
    display: block;
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-1);
}

.wa-series-panel .wa-series-text p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.5;
}

.wa-series-panel .btn {
    flex-shrink: 0;
    align-self: center;
}

@media (max-width: 600px) {
    .wa-series-panel {
        flex-direction: column;
        text-align: center;
    }

    .wa-series-panel .wa-series-icon {
        margin: 0 auto;
    }

    .wa-series-panel .btn {
        width: 100%;
    }
}

.wa-purchase-divider {
    text-align: center;
    position: relative;
    margin: var(--space-4) 0;
}

.wa-purchase-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--color-border-light);
}

.wa-purchase-divider span {
    position: relative;
    z-index: 1;
    background: white;
    padding: 0 var(--space-3);
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
}

.wa-purchase-collection {
    text-align: center;
}

.collection-promo-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-3);
}

.collection-price {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

/* Series Info Card */
.wa-series-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    border: 1px solid var(--color-border-light);
}

.wa-series-card h3 {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--space-3);
    color: var(--color-text-secondary);
}

.wa-series-info {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.wa-series-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wa-series-icon .material-symbols-outlined {
    font-size: 24px;
    color: white;
}

.wa-series-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.wa-series-text strong {
    font-size: var(--font-size-sm);
}

.wa-series-text span {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* Related Section */
.wa-related-section {
    background: var(--color-bg-subtle);
    padding: var(--space-8) 0;
}

.wa-related-section h2 {
    font-size: var(--font-size-2xl);
    font-family: var(--font-family-heading);
    color: var(--color-primary);
    margin: 0 0 var(--space-6);
}

.wa-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.wa-related-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    text-decoration: none;
    border: 1px solid var(--color-border-light);
    transition: box-shadow 0.2s, transform 0.2s;
}

.wa-related-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    text-decoration: none;
}

.wa-related-meta {
    margin-bottom: var(--space-2);
}

.wa-series-badge-sm {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: white;
}

.wa-related-card h3 {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-1);
    line-height: 1.4;
}

.wa-related-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-2);
}

.wa-related-authors {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    margin: 0 0 var(--space-2);
}

.wa-related-price {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

/* Mobile Responsive */
@media (max-width: 1024px) {
    .wa-detail-layout {
        grid-template-columns: 1fr;
    }

    .wa-detail-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }

    .wa-purchase-card {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .wa-detail-header h1 {
        font-size: var(--font-size-2xl);
    }

    .wa-detail-info {
        flex-direction: column;
        gap: var(--space-2);
    }

    .wa-related-grid {
        grid-template-columns: 1fr;
    }

    .wa-detail-sidebar {
        grid-template-columns: 1fr;
    }

    .wa-purchase-card {
        grid-column: span 1;
    }
}

/* ===========================================
   WEST ACADEMIC SERIES PAGE
   =========================================== */

.wa-series-hero {
    background: linear-gradient(135deg, var(--series-color) 0%, color-mix(in srgb, var(--series-color) 70%, black) 100%);
    color: white;
    padding: var(--space-8) 0 var(--space-12) 0;
}

.wa-series-hero .breadcrumbs-light a,
.wa-series-hero .breadcrumbs-light span {
    color: rgba(255, 255, 255, 0.8);
}

.wa-series-hero .breadcrumbs-light a:hover {
    color: white;
}

.wa-series-hero-content {
    display: flex;
    gap: var(--space-8);
    align-items: flex-start;
    margin-top: var(--space-6);
}

.wa-series-hero-icon {
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wa-series-hero-icon .material-symbols-outlined {
    font-size: 64px;
}

.wa-series-hero-text h1 {
    margin: 0 0 var(--space-3) 0;
    font-size: var(--font-size-4xl);
}

.wa-series-hero-tagline {
    font-size: var(--font-size-lg);
    margin: 0 0 var(--space-4) 0;
    opacity: 0.9;
}

.wa-series-hero-meta {
    display: flex;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

.wa-series-hero-meta span {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    opacity: 0.9;
}

.wa-series-hero-ctas {
    display: flex;
    gap: var(--space-3);
}

.wa-series-hero .btn-primary {
    background: white;
    color: var(--series-color);
}

.wa-series-hero .btn-primary:hover {
    background: rgba(255, 255, 255, 0.9);
}

.wa-series-hero .btn-secondary {
    border-color: rgba(255, 255, 255, 0.5);
    color: white;
}

.wa-series-hero .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: white;
}

/* Series Features Section */
.wa-series-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
}

.wa-series-feature-main h2 {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 var(--space-2) 0;
}

.wa-series-best-for {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-3) 0;
}

.wa-series-format {
    color: var(--color-text-secondary);
    margin: 0;
}

.wa-series-feature-list h3 {
    font-size: var(--font-size-lg);
    margin: 0 0 var(--space-4) 0;
}

.wa-series-feature-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-3);
}

.wa-series-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    color: var(--color-text-secondary);
}

.wa-series-feature-list li .material-symbols-outlined {
    color: var(--color-success);
    font-size: 20px;
    flex-shrink: 0;
}

/* Titles by Subject */
.wa-series-titles-by-subject {
    display: grid;
    gap: var(--space-8);
}

.wa-subject-group h3 {
    font-size: var(--font-size-xl);
    margin: 0 0 var(--space-4) 0;
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-primary);
}

.wa-subject-titles {
    display: grid;
    gap: var(--space-2);
}

.wa-title-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wa-title-row:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    text-decoration: none;
}

.wa-title-row-main {
    flex: 1;
    min-width: 0;
}

.wa-title-row-title {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.wa-title-row-subtitle {
    color: var(--color-text-secondary);
    margin-left: var(--space-2);
}

.wa-title-row-authors {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    min-width: 200px;
}

.wa-title-row-meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.wa-title-row-collection {
    color: var(--color-success);
}

.wa-title-row-collection .material-symbols-outlined {
    font-size: 20px;
}

.wa-title-row-price {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    min-width: 80px;
    text-align: right;
}

.wa-title-row-arrow {
    color: var(--color-text-secondary);
    transition: transform 0.2s ease;
}

.wa-title-row:hover .wa-title-row-arrow {
    transform: translateX(4px);
}

/* Collection Banner */
.wa-collection-banner {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    padding: var(--space-8);
    color: white;
}

.wa-collection-banner-content {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.wa-collection-banner-icon {
    font-size: 48px;
    flex-shrink: 0;
}

.wa-collection-banner-text {
    flex: 1;
}

.wa-collection-banner-text h3 {
    margin: 0 0 var(--space-2) 0;
    font-size: var(--font-size-2xl);
}

.wa-collection-banner-text p {
    margin: 0;
    opacity: 0.9;
}

.wa-collection-banner .btn {
    flex-shrink: 0;
    background: white;
    color: var(--color-primary);
}

.wa-collection-banner .btn:hover {
    background: var(--color-primary-tint-hover);
}

/* Related Series */
.wa-related-series {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

.wa-related-series-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wa-related-series-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    text-decoration: none;
}

.wa-related-series-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.wa-related-series-icon .material-symbols-outlined {
    font-size: 24px;
}

.wa-related-series-content h3 {
    font-size: var(--font-size-md);
    margin: 0 0 var(--space-1) 0;
}

.wa-related-series-count {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.section-header-count {
    color: var(--color-text-secondary);
    font-size: var(--font-size-md);
}

/* ===========================================
   WEST ACADEMIC SUBJECTS PAGE
   =========================================== */

.wa-subjects-page .hero-family-compact {
    padding: var(--space-8) 0;
}

.wa-subject-category h2 {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0 0 var(--space-2) 0;
    font-size: var(--font-size-2xl);
}

.wa-subject-category h2 .material-symbols-outlined {
    font-size: 28px;
    color: var(--color-primary);
}

.wa-subject-category-desc {
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-6) 0;
}

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

.wa-subject-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5);
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.wa-subject-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    text-decoration: none;
}

.wa-subject-card-content h3 {
    margin: 0 0 var(--space-1) 0;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
}

.wa-subject-count {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.wa-subject-arrow {
    color: var(--color-text-secondary);
    transition: transform 0.2s ease, color 0.2s ease;
}

.wa-subject-card:hover .wa-subject-arrow {
    color: var(--color-primary);
    transform: translateX(4px);
}

/* All Subjects List */
.wa-all-subjects {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
}

.wa-all-subjects-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-card);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    text-decoration: none;
    color: var(--color-text-primary);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.wa-all-subjects-item:hover {
    background: var(--color-primary-tint);
    border-color: var(--color-primary);
    text-decoration: none;
}

.wa-all-subjects-count {
    background: var(--color-bg-subtle);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* Subjects Page Responsive */
@media (max-width: 1024px) {
    .wa-subjects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .wa-subjects-grid {
        grid-template-columns: 1fr;
    }

    .wa-all-subjects {
        grid-template-columns: 1fr;
    }
}

/* ===========================================
   WEST ACADEMIC SERIES OVERVIEW PAGE
   =========================================== */

.wa-series-overview-page .hero-family-compact {
    padding: var(--space-8) 0;
}

.wa-series-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}

.wa-series-overview-card {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wa-series-overview-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.wa-series-overview-header {
    padding: var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
}

.wa-series-overview-header .material-symbols-outlined {
    font-size: 40px;
}

.wa-series-overview-count {
    background: rgba(255, 255, 255, 0.2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.wa-series-overview-content {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.wa-series-overview-content h2 {
    font-size: var(--font-size-xl);
    margin: 0 0 var(--space-3) 0;
}

.wa-series-overview-content p {
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-4) 0;
    flex: 1;
    line-height: 1.6;
}

.wa-series-overview-meta {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.wa-series-overview-meta span {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.wa-series-overview-meta .material-symbols-outlined {
    font-size: 18px;
}

.wa-series-overview-ctas {
    display: flex;
    gap: var(--space-3);
}

.wa-series-overview-ctas .btn {
    flex: 1;
    text-align: center;
}

/* How to Choose Guide */
.wa-choose-guide {
    display: grid;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.wa-choose-item {
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
}

.wa-choose-item h3 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-2) 0;
    font-size: var(--font-size-lg);
    color: var(--color-primary);
}

.wa-choose-item h3 .material-symbols-outlined {
    font-size: 24px;
}

.wa-choose-item p {
    margin: 0;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.wa-choose-item p strong {
    color: var(--color-text-primary);
}

/* Series Overview Responsive */
@media (max-width: 1024px) {
    .wa-series-overview-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .wa-series-overview-ctas {
        flex-direction: column;
    }
}

/* Series Page Responsive */
@media (max-width: 1024px) {
    .wa-related-series {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .wa-series-hero-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .wa-series-hero-icon {
        width: 80px;
        height: 80px;
    }

    .wa-series-hero-icon .material-symbols-outlined {
        font-size: 40px;
    }

    .wa-series-hero-text h1 {
        font-size: var(--font-size-3xl);
    }

    .wa-series-hero-meta {
        justify-content: center;
    }

    .wa-series-hero-ctas {
        flex-direction: column;
        width: 100%;
    }

    .wa-series-features {
        grid-template-columns: 1fr;
    }

    .wa-title-row {
        flex-wrap: wrap;
    }

    .wa-title-row-authors {
        flex-basis: 100%;
        order: 2;
        margin-top: var(--space-1);
    }

    .wa-title-row-meta {
        order: 1;
    }

    .wa-collection-banner-content {
        flex-direction: column;
        text-align: center;
    }

    .wa-related-series {
        grid-template-columns: 1fr;
    }
}

/* ===========================================
   WEST ACADEMIC LANDING PAGE
   =========================================== */

/* Search Bar */
.wa-search-bar {
    position: relative;
    max-width: 600px;
    margin: var(--space-6) auto var(--space-4);
}

.wa-search-bar input {
    width: 100%;
    padding: var(--space-4) var(--space-12) var(--space-4) var(--space-12);
    font-size: var(--font-size-md);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-full);
    background: white;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.wa-search-bar input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(42, 84, 136, 0.1);
}

.wa-search-icon {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-secondary);
    pointer-events: none;
}

.wa-search-clear {
    position: absolute;
    right: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-secondary);
    padding: var(--space-1);
    display: none;
}

.wa-search-bar.has-value .wa-search-clear {
    display: flex;
}

.wa-search-dropdown {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 100;
    display: none;
}

.wa-search-dropdown.show {
    display: block;
}

.wa-search-result {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    text-decoration: none;
    color: var(--color-text-primary);
    transition: background-color 0.15s;
}

.wa-search-result:hover {
    background: var(--color-bg-subtle);
}

.wa-search-result-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wa-search-result-icon .material-symbols-outlined {
    color: white;
    font-size: 20px;
}

.wa-search-result-content {
    flex: 1;
    min-width: 0;
}

.wa-search-result-title {
    display: block;
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wa-search-result-meta {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wa-search-empty {
    padding: var(--space-4);
    text-align: center;
    color: var(--color-text-secondary);
}

.wa-search-browse-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border);
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
}

.wa-search-browse-all:hover {
    background: var(--color-primary-tint);
}

.wa-browse-text {
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.wa-browse-text a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
}

.wa-browse-text a:hover {
    text-decoration: underline;
}

/* Promo Boxes - match PE pattern */
.wa-promo-boxes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

@media (max-width: 900px) {
    .wa-promo-boxes {
        grid-template-columns: 1fr;
    }
}

.wa-promo-box {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    text-decoration: none;
    color: var(--color-text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wa-promo-box:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}

.wa-promo-icon {
    font-size: 32px;
    color: var(--color-primary);
    flex-shrink: 0;
}

.wa-promo-content {
    flex: 1;
    min-width: 0;
}

.wa-promo-content h3 {
    font-size: var(--font-size-base);
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.wa-promo-content p {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.4;
}

.wa-promo-arrow {
    color: var(--color-text-tertiary);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.wa-promo-box:hover .wa-promo-arrow {
    transform: translateX(4px);
}

/* Landing Page Series Grid */
.wa-landing-page .wa-series-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

@media (max-width: 768px) {
    .wa-landing-page .wa-series-grid {
        grid-template-columns: 1fr;
    }
}

.wa-landing-page .wa-series-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--color-text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.wa-landing-page .wa-series-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.wa-series-card-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wa-series-card-icon .material-symbols-outlined {
    font-size: 28px;
    color: white;
}

.wa-series-card-content {
    flex: 1;
    min-width: 0;
}

.wa-series-card-content h3 {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-1);
}

.wa-series-card-content p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-2) 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wa-series-card-count {
    font-size: var(--font-size-xs);
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

.wa-series-card-arrow {
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

/* Landing Page Titles Grid Override */
.wa-landing-page .wa-titles-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

@media (max-width: 900px) {
    .wa-landing-page .wa-titles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .wa-landing-page .wa-titles-grid {
        grid-template-columns: 1fr;
    }
}

.wa-landing-page .wa-title-card-cover {
    height: 120px;
    background: linear-gradient(135deg, var(--color-primary-tint), #d4e4f4);
}

.wa-landing-page .wa-title-card-cover .material-symbols-outlined {
    font-size: 48px;
    color: var(--color-primary);
    opacity: 0.5;
}

/* Subject Chips (Landing Page) */
.wa-landing-page .wa-subjects-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
}

.wa-subject-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    text-decoration: none;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    transition: border-color 0.2s, background-color 0.2s;
}

.wa-subject-chip:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-tint);
}

.wa-subject-chip .wa-subject-count {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    background: var(--color-bg-subtle);
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

/* Audience Grid */
.wa-audience-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

@media (max-width: 768px) {
    .wa-audience-grid {
        grid-template-columns: 1fr;
    }
}

.wa-audience-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-6);
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--color-text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.wa-audience-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.wa-audience-icon {
    font-size: 48px;
    color: var(--color-primary);
    margin-bottom: var(--space-4);
}

.wa-audience-card h3 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-2);
}

.wa-audience-card p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-4) 0;
    flex: 1;
}

.wa-audience-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
}

.wa-audience-link .material-symbols-outlined {
    font-size: 18px;
}

/* Section CTA Center */
.section-cta-center {
    text-align: center;
    margin-top: var(--space-6);
}

/* Calendar Dropdown */
.course-card-calendar-dropdown {
    position: relative;
    display: inline-flex;
}

.course-card-calendar-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    padding: 2px 6px;
    margin: -2px -6px;
    border-radius: var(--radius-sm);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.course-card-calendar-btn:hover {
    background-color: var(--color-border-light);
    color: var(--color-primary);
}

.course-card-calendar-btn .calendar-chevron {
    font-size: 16px;
    transition: transform 0.2s ease;
}

.course-card-calendar-dropdown.open .calendar-chevron {
    transform: rotate(180deg);
}

.course-card-calendar-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    min-width: 180px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.course-card-calendar-dropdown.open .course-card-calendar-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.course-card-calendar-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: background 0.15s ease;
}

.course-card-calendar-menu .dropdown-item:first-child {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.course-card-calendar-menu .dropdown-item:last-child {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.course-card-calendar-menu .dropdown-item:hover {
    background: var(--color-border-light);
}

.course-card-calendar-menu .dropdown-item .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-text-secondary);
}

/* Jurisdictions Flyout */
.jurisdictions-flyout {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    max-width: 100vw;
    height: 100vh;
    background-color: var(--color-bg-card);
    box-shadow: var(--shadow-xl);
    z-index: 1001;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

.jurisdictions-flyout.open {
    right: 0;
}

.jurisdictions-flyout-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.jurisdictions-flyout-overlay.open {
    opacity: 1;
    visibility: visible;
}

.jurisdictions-flyout-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border-light);
}

.jurisdictions-flyout-header h2 {
    font-size: var(--font-size-lg);
    margin: 0;
    color: var(--color-primary);
}

.jurisdictions-flyout-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--color-text-secondary);
    background: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.jurisdictions-flyout-close:hover {
    color: var(--color-text-primary);
    background-color: var(--color-bg-hover);
}

.jurisdictions-flyout-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4) var(--space-5);
}

.jurisdictions-flyout-course {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border-light);
}

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

a.jurisdiction-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    gap: var(--space-3);
    padding: var(--space-3);
    background-color: var(--color-bg-page);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

a.jurisdiction-card:hover {
    background-color: var(--color-bg-hover);
    text-decoration: none;
}

.jurisdiction-card-info {
    flex: 1;
    min-width: 0;
}

.jurisdiction-card-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.jurisdiction-card-credits {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.jurisdiction-card-expiry {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    margin-top: 4px;
}

.jurisdiction-card-arrow {
    color: var(--color-text-tertiary);
    font-size: 20px;
    flex-shrink: 0;
}

a.jurisdiction-card:hover .jurisdiction-card-arrow {
    color: var(--color-primary);
}

.flyout-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-6);
    color: var(--color-text-secondary);
}

.flyout-loading .material-symbols-outlined {
    animation: spin 1s linear infinite;
}

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

/* Clickable jurisdiction chip */
.chip-clickable {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.chip-clickable:hover {
    background-color: var(--color-bg-hover);
}

@media (max-width: 768px) {
    .jurisdictions-flyout {
        width: 100%;
        right: -100%;
    }
}

/* Browse Page Responsive */
@media (max-width: 991px) {
    .course-cards-header {
        display: none;
    }

    .course-card-row {
        grid-template-columns: 1fr;
        gap: var(--space-2);
        padding: var(--space-4);
    }

    .course-card-row:nth-child(even) {
        background-color: transparent;
    }

    .course-card-row:not(:last-child) {
        border-bottom: 1px solid var(--color-border);
    }

    h3.course-card-title {
        font-size: var(--font-size-base);
    }

    .course-card-type,
    .course-card-credits {
        display: inline-flex;
    }

    .course-card-type .chip,
    .course-card-credits .chip {
        font-size: 13px;
        padding: 4px 12px;
    }

    .course-card-price-col {
        margin-top: var(--space-2);
    }

    .course-card-pricing-promo {
        flex-direction: row;
        align-items: center;
        gap: var(--space-3);
    }

    .course-card-action {
        margin-top: var(--space-2);
    }

    .pagination-bar {
        flex-direction: column;
        gap: var(--space-3);
    }

    .pagination-controls {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 1200px) {
    .resources-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991px) {
    .resources-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .resources-grid {
        grid-template-columns: 1fr !important;
    }

    .resource-card {
        padding: var(--space-3);
    }

    .resource-card-icon {
        width: 56px;
        height: 56px;
    }

    .resource-card-icon .material-symbols-outlined {
        font-size: 28px;
    }

    .resource-card-title {
        font-size: var(--font-size-md);
    }

    .resource-card-description {
        font-size: 13px;
        -webkit-line-clamp: 2;
    }

    .resource-card-meta .chip {
        font-size: 11px;
        padding: 2px 8px;
    }

    .resource-card-footer {
        font-size: 11px;
    }
}

@media (max-width: 767px) {
    .search-filters-bar {
        flex-direction: column;
    }

    .browse-search {
        width: 100%;
    }

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

    .browse-empty-actions {
        flex-direction: column;
    }
}


/* ===========================================
   COURSE DETAIL PAGE
   =========================================== */

.course-detail-page {
    padding: var(--space-6) 0 var(--space-9);
}

.course-detail-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-5);
    align-items: start;
}

/* Main Content */
.course-detail-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.course-detail-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.course-detail-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.course-detail-title {
    font-size: var(--font-size-3xl);
    line-height: var(--line-height-tight);
    color: var(--color-primary);
    margin: 0;
}

.course-detail-info {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.course-detail-info-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.course-detail-info-item .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-text-tertiary);
}

/* Sections */
.course-detail-section {
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border-light);
}

.course-detail-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.course-detail-section-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin: 0 0 var(--space-3) 0;
}

/* Thumbnail */
.course-detail-thumbnail {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--color-bg-hover);
}

.course-detail-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.course-detail-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.2s ease;
    cursor: pointer;
}

.course-detail-thumbnail:hover .course-detail-play-overlay {
    opacity: 1;
}

.course-detail-play-overlay .material-symbols-outlined {
    font-size: 72px;
    color: white;
}

/* Description */
.course-detail-description {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
}

/* Presenters */
.course-detail-presenters {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.presenter-card {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-bg-page);
    border-radius: var(--radius-lg);
}

.presenter-item {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
}

.presenter-avatar {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-md);
    overflow: hidden;
}

.presenter-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.presenter-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.presenter-name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
}

.presenter-title {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

.presenter-bio {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    margin: var(--space-2) 0 0 0;
    line-height: var(--line-height-normal);
}

.presenter-item .presenter-details {
    flex: 1;
    min-width: 0;
}

.presenter-item .presenter-details h4 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 4px 0;
    color: var(--color-text-primary);
}

.presenter-item .presenter-role {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin: 0 0 8px 0;
}

.presenter-item .presenter-bio {
    font-size: var(--font-size-xs);
    line-height: 1.5;
    color: var(--color-text-tertiary);
    margin: 0;
}

.presenter-item .presenter-initials {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}

/* Credits Table */
.course-detail-credits {
    overflow-x: auto;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background: white;
}

.credits-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.credits-table th,
.credits-table td {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-light);
}

.credits-table th {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    background: var(--color-bg-page);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.credits-table th:first-child {
    border-top-left-radius: var(--radius-lg);
}

.credits-table th:last-child {
    border-top-right-radius: var(--radius-lg);
}

.credits-table td {
    color: var(--color-text-primary);
}

.credits-table tbody tr:hover {
    background: var(--color-bg-hover);
}

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

.jurisdiction-abbr {
    color: var(--color-text-tertiary);
    margin-left: 4px;
}

.credits-amount {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.credits-table .jurisdiction-link {
    color: var(--color-primary);
    text-decoration: none;
}

.credits-table .jurisdiction-link:hover {
    text-decoration: underline;
}

/* Materials */
.course-detail-materials {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.material-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-page);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}

.material-item .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-primary);
}

.material-title {
    flex: 1;
    color: var(--color-text-primary);
}

.material-type {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-xs);
}

/* Transcript */
.course-detail-transcript {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}

.transcript-preview {
    margin: 0 0 var(--space-3) 0;
}

.transcript-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    padding: 0;
}

.transcript-toggle:hover {
    text-decoration: underline;
}

.transcript-toggle .material-symbols-outlined {
    font-size: 20px;
}

.transcript-full {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-light);
}

/* Sidebar */
.course-detail-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    position: sticky;
    top: calc(var(--header-height) + var(--space-6)); /* Header (72px) + padding (40px) = 112px */
}

/* Purchase Card */
.course-purchase-card {
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: 16px 0 16px 0; /* Teardrop shape */
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.course-purchase-price {
    text-align: center;
}

.course-purchase-price .price-amount {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.price-amount.price-included {
    font-size: var(--font-size-lg);
    color: var(--color-success);
}

.course-purchase-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.course-purchase-actions .btn {
    width: 100%;
    justify-content: center;
}

.course-purchase-divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
}

.course-purchase-divider::before,
.course-purchase-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border-light);
}

.course-purchase-pass {
    text-align: center;
}

.pass-promo-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-3) 0;
}

.btn-outline-primary {
    background: transparent;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    width: 100%;
    justify-content: center;
}

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

/* Credit Info Card (Sidebar) */
.course-credit-card {
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: 16px 0 16px 0; /* Teardrop shape */
    padding: var(--space-4);
}

.course-credit-card h3 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-3) 0;
}

/* View Credits Button */
.view-credits-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 16px;
    background: var(--color-bg-page);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font-family: var(--font-family-body);
}

.view-credits-btn:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-border);
}

.view-credits-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.view-credits-text strong {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.view-credits-text span {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.view-credits-btn .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-text-secondary);
}

/* Live Course Banner */
.live-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: linear-gradient(135deg, #E8F0F8 0%, #DEEBFF 100%);
    border: 1px solid #B3D4FF;
    border-radius: 8px;
    margin-bottom: 24px;
}

.live-banner > .material-symbols-outlined {
    font-size: 28px;
    color: var(--color-primary);
}

.live-banner-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.live-banner-date {
    font-weight: var(--font-weight-semibold);
    color: #1E3D66;
    font-size: var(--font-size-sm);
}

.live-banner-time {
    color: var(--color-primary);
    font-size: var(--font-size-xs);
}

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

.calendar-dropdown .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.calendar-dropdown .btn-secondary .material-symbols-outlined {
    font-size: 18px;
    transition: transform 0.2s ease;
}

.calendar-dropdown.open .btn-secondary .material-symbols-outlined {
    transform: rotate(180deg);
}

.calendar-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 200px;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.calendar-dropdown.open .calendar-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.calendar-dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: var(--font-size-xs);
    transition: background 0.15s ease;
}

.calendar-dropdown-menu .dropdown-item:first-child {
    border-radius: 8px 8px 0 0;
}

.calendar-dropdown-menu .dropdown-item:last-child {
    border-radius: 0 0 8px 8px;
}

.calendar-dropdown-menu .dropdown-item:hover {
    background: var(--color-bg-hover);
}

.calendar-dropdown-menu .dropdown-item .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-text-secondary);
}

/* NASBA Details Section */
.nasba-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.nasba-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nasba-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.nasba-value {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

.learning-objectives {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-light);
}

.learning-objectives h3 {
    font-family: var(--font-family-body);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2) 0;
}

.objectives-content {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}

.objectives-content ul {
    margin: 0;
    padding-left: var(--space-4);
}

.objectives-content li {
    margin-bottom: var(--space-1);
}

.nasba-sponsor {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-light);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.nasba-sponsor img {
    width: 80px;
    height: auto;
    flex-shrink: 0;
}

.nasba-sponsor p {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    line-height: var(--line-height-relaxed);
    margin: 0;
}

/* Course Outline */
.course-outline {
    margin: 0;
    padding-left: var(--space-4);
}

.course-outline li {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-2);
}

/* Mobile Sticky CTA Bar */
.mobile-sticky-cta {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky);
    background: white;
    border-top: 1px solid var(--color-border-light);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.mobile-sticky-cta.visible {
    transform: translateY(0);
}

.mobile-sticky-cta-inner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    max-width: 100%;
}

.mobile-sticky-price {
    flex-shrink: 0;
}

.mobile-sticky-price-amount {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.mobile-sticky-actions {
    display: flex;
    gap: var(--space-2);
    flex: 1;
    min-width: 0;
}

.mobile-sticky-actions .btn {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
}

/* Related Courses Section */
.related-courses-section {
    background: var(--color-bg-page);
    padding: var(--space-8) 0;
    border-top: 1px solid var(--color-border-light);
}

.related-courses-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-4) 0;
}

.related-courses-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.related-course-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.related-course-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.related-course-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.related-course-duration {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.related-course-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
    line-height: var(--line-height-normal);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-course-price {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

/* Toast Notifications */
.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 16px 24px;
    border-radius: 8px;
    background: var(--color-rich-black);
    color: white;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    animation: toastSlideIn 0.3s ease;
}

.toast-success {
    background: var(--color-success);
}

.toast-error {
    background: var(--color-error);
}

.toast-close {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    opacity: 0.7;
    padding: 0;
    line-height: 1;
}

.toast-close:hover {
    opacity: 1;
}

@keyframes toastSlideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Course Detail Responsive */
@media (max-width: 1024px) {
    .course-detail-layout {
        grid-template-columns: 1fr;
    }

    .course-detail-sidebar {
        position: static;
        order: -1;
    }

    .related-courses-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .mobile-sticky-cta {
        display: block;
    }

    .course-detail-page ~ .product-footer {
        padding-bottom: 80px;
    }
}

@media (max-width: 640px) {
    .course-detail-title {
        font-size: var(--font-size-2xl);
    }

    .course-detail-info {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .related-courses-grid {
        grid-template-columns: 1fr;
    }

    .course-purchase-price .price-amount {
        font-size: var(--font-size-2xl);
    }

    .live-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .nasba-details {
        grid-template-columns: 1fr;
    }

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

    .presenter-item .presenter-avatar {
        margin: 0 auto;
    }

    .toast {
        left: 16px;
        right: 16px;
        bottom: 16px;
    }
}

@media (min-width: 769px) {
    .mobile-sticky-cta {
        display: none !important;
    }
}


/* ===========================================
   ORGANIZATIONS PAGES
   =========================================== */

/* Partner Logos */
.partner-logos-label {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-4);
}

.partner-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-8);
    flex-wrap: wrap;
}

.partner-logo-placeholder {
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-page);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
}

/* Products Icon Grid */
.products-icon-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.products-icon-grid-3 {
    grid-template-columns: repeat(3, 1fr);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.product-icon-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-5);
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.product-icon-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.product-icon-card-featured {
    border-color: var(--color-primary);
    background: var(--color-primary-tint);
}

.product-icon-card-icon {
    width: 64px;
    height: 64px;
    background: var(--color-primary-tint);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-3);
}

.product-icon-card-featured .product-icon-card-icon {
    background: var(--color-primary);
}

.product-icon-card-icon .material-symbols-outlined {
    font-size: 32px;
    color: var(--color-primary);
}

.product-icon-card-featured .product-icon-card-icon .material-symbols-outlined {
    color: white;
}

.product-icon-card h3 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-1) 0;
}

.product-icon-card p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: var(--line-height-normal);
}

/* Product Section Pricing */
.product-section-pricing {
    background: var(--color-bg-page);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin-bottom: var(--space-4);
}

.pricing-tier-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border-light);
    font-size: var(--font-size-sm);
}

.pricing-tier-row:last-child {
    border-bottom: none;
}

.pricing-tier-seats {
    color: var(--color-text-secondary);
}

.pricing-tier-value {
    font-weight: var(--font-weight-semibold);
    color: var(--color-success);
}

/* Self-Service Banner */
.self-service-banner {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-6);
    background: white;
    border: 2px solid var(--color-primary);
}

.self-service-content {
    flex: 1;
}

.self-service-content h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-2);
}

.self-service-content p {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

.self-service-ctas {
    display: flex;
    gap: var(--space-3);
}

.self-service-features {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.self-service-feature {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.self-service-feature .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-primary);
}

/* Additional Products Grid */
.additional-products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.additional-product-card {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-4);
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
}

.additional-product-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background: var(--color-primary-tint);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.additional-product-icon .material-symbols-outlined {
    font-size: 24px;
    color: var(--color-primary);
}

.additional-product-content h3 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--space-2) 0;
}

.additional-product-content p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-3) 0;
    line-height: var(--line-height-normal);
}

.btn-text {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: none;
    border: none;
    padding: 0;
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    cursor: pointer;
}

.btn-text:hover {
    text-decoration: underline;
}

.btn-text .material-symbols-outlined {
    font-size: 18px;
}

/* Org Hub Grid (overview page) */
.org-hub-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    margin-top: var(--space-6);
}

.org-hub-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-6);
    background: white;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.org-hub-card-icon {
    width: 64px;
    height: 64px;
    background: var(--color-primary-tint);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
}

.org-hub-card-icon .material-symbols-outlined {
    font-size: 32px;
    color: var(--color-primary);
}

.org-hub-card h3 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2) 0;
}

.org-hub-card p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-4) 0;
    line-height: var(--line-height-relaxed);
}

.org-hub-card-products {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-4) 0;
    flex: 1;
}

.org-hub-card-products li {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    padding: var(--space-1) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.org-hub-card-products li:last-child {
    border-bottom: none;
}

.org-hub-card-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
}

.org-hub-card-cta .material-symbols-outlined {
    font-size: 18px;
    transition: transform 0.2s ease;
}

.org-hub-card:hover .org-hub-card-cta .material-symbols-outlined {
    transform: translateX(4px);
}

/* Study Aids Grid (law schools) */
.study-aids-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
    margin-top: var(--space-6);
}

.study-aid-card {
    padding: var(--space-5);
    background: white;
}

.study-aid-header {
    margin-bottom: var(--space-4);
}

.study-aid-logo {
    height: 32px;
    width: auto;
}

.study-aid-card h3 {
    font-size: var(--font-size-xl);
    margin: 0 0 var(--space-1) 0;
}

.study-aid-tagline {
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-2);
}

.study-aid-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-4);
}

.study-aid-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-4) 0;
}

.study-aid-features li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.study-aid-features li:last-child {
    border-bottom: none;
}

.study-aid-features .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-success);
}

.study-aid-ctas {
    display: flex;
    gap: var(--space-2);
}

.study-aid-ctas .btn {
    flex: 1;
    justify-content: center;
}

/* Mega Menu Footer */
.mega-menu-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    margin-top: var(--space-3);
    border-top: 1px solid var(--color-border-light);
    background: var(--color-bg-page);
}

.mega-menu-footer-link {
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
}

.mega-menu-footer-link:hover {
    text-decoration: underline;
}

.mega-menu-footer-link-cta {
    padding: var(--space-2) var(--space-4);
    background: var(--color-primary);
    color: white;
    border-radius: var(--radius-md);
}

.mega-menu-footer-link-cta:hover {
    background: var(--color-primary-dark);
    text-decoration: none;
}

.mega-menu-footer-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.mega-menu-footer-cta {
    font-size: var(--font-size-sm);
    padding: var(--space-2) var(--space-4);
    background: var(--color-primary);
    color: white;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
}

.mega-menu-footer-cta:hover {
    background: var(--color-primary-dark);
}

/* Org mega menu CTA - dark instead of blue */

/* Organizations Page Responsive */
@media (max-width: 991px) {
    .products-icon-grid,
    .products-icon-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .org-hub-grid {
        grid-template-columns: 1fr;
    }

    .study-aids-grid {
        grid-template-columns: 1fr;
    }

    .additional-products-grid {
        grid-template-columns: 1fr;
    }

    .self-service-banner {
        flex-direction: column;
        text-align: center;
    }

    .self-service-ctas {
        justify-content: center;
    }

    .self-service-features {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .products-icon-grid {
        grid-template-columns: 1fr;
    }

    .partner-logos {
        gap: var(--space-4);
    }
}

/* ===========================================
   HOMEPAGE - THE STAGE HERO
   =========================================== */

.hero-stage {
    position: relative;
    min-height: 620px;
    display: flex;
    align-items: center;
    padding: var(--space-12) 0 calc(var(--space-12) + 80px);
    overflow: hidden;
}

/* Bold BARBRI blue gradient - light to dark, top to bottom */
.hero-stage-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #3a6a9e 0%, #2a5488 50%, #1e3a5f 100%);
    z-index: 0;
}

.hero-gradient-mesh {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 100% 50% at 50% 0%, rgba(255, 255, 255, 0.08) 0%, transparent 60%);
}

/* Grid layout */
.hero-stage-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--space-10);
    align-items: center;
}

/* Left content - headline and video */
.hero-stage-content {
    text-align: left;
}

.hero-stage-headline {
    font-family: var(--font-family-heading);
    font-size: clamp(2.25rem, 4.5vw, 3.25rem);
    font-weight: var(--font-weight-bold);
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: white;
    margin: 0 0 var(--space-4);
}

.hero-stage-subtitle {
    font-size: var(--font-size-lg);
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin: 0 0 var(--space-6);
    max-width: 520px;
}

/* Video panel in hero */
.hero-video-panel {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-lg);
    max-width: 320px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hero-video-panel:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.35);
}

.hero-video-thumb {
    position: relative;
    width: 100px;
    height: 60px;
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
}

.hero-video-placeholder {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
}

.hero-video-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.hero-video-play svg {
    width: 28px;
    height: 28px;
    color: white;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.hero-video-panel:hover .hero-video-play {
    background: rgba(0, 0, 0, 0.4);
}

.hero-video-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.hero-video-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: white;
}

.hero-video-duration {
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, 0.7);
}

/* Stats bar at bottom of hero */
.hero-stats-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-stats-bar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-5) 0;
}

.hero-stats-bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    flex: 1;
}

.hero-stats-bar-number {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: white;
}

.hero-stats-bar-label {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.7);
}

/* Right side - horizontal intent cards */
.hero-stage-router {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.intent-router-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.intent-cards-horizontal {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

.intent-card-h {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-4);
    background: white;
    border: none;
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all 0.2s ease;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.intent-card-h:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.intent-card-h .material-symbols-outlined {
    font-size: 28px;
    color: var(--color-primary);
}

.intent-card-h-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.3;
}

/* Responsive */
@media (max-width: 1100px) {
    .hero-stage-grid {
        grid-template-columns: 1fr 320px;
        gap: var(--space-8);
    }

    .intent-cards-horizontal {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .hero-stage {
        min-height: auto;
        padding: var(--space-10) 0 calc(var(--space-10) + 80px);
    }

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

    .hero-stage-content {
        text-align: center;
    }

    .hero-stage-headline {
        font-size: clamp(1.75rem, 5vw, 2.5rem);
    }

    .hero-stage-subtitle {
        max-width: none;
    }

    .hero-video-panel {
        margin: 0 auto;
    }

    .hero-stage-router {
        align-items: center;
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
    }

    .intent-router-label {
        text-align: center;
    }

    .intent-cards-horizontal {
        grid-template-columns: repeat(3, 1fr);
        width: 100%;
    }

    .hero-stats-bar-inner {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-4);
    }

    .hero-stats-bar-item {
        flex: 0 0 auto;
        padding: 0 var(--space-4);
    }
}

@media (max-width: 600px) {
    .hero-stage {
        display: block;
        padding: var(--space-8) 0 0;
    }

    .hero-stage-headline {
        font-size: 1.5rem;
    }

    .hero-stage-subtitle {
        font-size: var(--font-size-base);
    }

    .hero-stage-router {
        max-width: 100%;
    }

    .intent-cards-horizontal {
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
        gap: var(--space-2);
    }

    .intent-card-h {
        padding: var(--space-3) var(--space-2);
    }

    .intent-card-h .material-symbols-outlined {
        font-size: 22px;
    }

    .intent-card-h-label {
        font-size: 12px;
        line-height: 1.2;
    }

    .hero-stats-bar {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        margin-top: var(--space-6);
    }

    .hero-stats-bar-inner {
        gap: var(--space-2);
    }

    .hero-stats-bar-item {
        flex: 0 0 50%;
        padding: var(--space-2) 0;
    }

    .hero-stats-bar-number {
        font-size: var(--font-size-xl);
    }

    .hero-stats-bar-label {
        font-size: var(--font-size-xs);
    }
}

@media (max-width: 380px) {
    .hero-stage-headline {
        font-size: 1.35rem;
    }

    .intent-card-h {
        padding: var(--space-2);
    }

    .intent-card-h .material-symbols-outlined {
        font-size: 20px;
    }

    .intent-card-h-label {
        font-size: 11px;
    }
}

/* ===========================================
   HOMEPAGE - VIDEO PROMO SECTION
   =========================================== */

.home-video-section {
    background: var(--color-bg-subtle);
}

.home-video-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
    align-items: center;
}

.home-video-content h2 {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--space-4);
}

.home-video-content p {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
    line-height: 1.6;
}

.home-video-player {
    display: flex;
    justify-content: center;
}

.home-video-player .video-thumbnail {
    width: 100%;
    max-width: 560px;
    aspect-ratio: 16 / 9;
}

.video-placeholder-dark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a2744 0%, #0d1321 100%);
}

.video-placeholder-dark .material-symbols-outlined {
    font-size: 80px;
    color: rgba(255, 255, 255, 0.15);
}

@media (max-width: 900px) {
    .home-video-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
        text-align: center;
    }

    .home-video-content h2 {
        font-size: var(--font-size-2xl);
    }

    .home-video-content .btn {
        display: inline-flex;
    }
}

/* ===========================================
   SUPPORT PAGE
   =========================================== */

.support-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    padding: var(--space-12) 0;
    text-align: center;
}

.support-hero h1 {
    color: white;
    margin-bottom: var(--space-3);
}

.support-hero-subtitle {
    color: rgba(255,255,255,0.9);
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-6);
}

.support-search {
    max-width: 500px;
    margin: 0 auto;
    position: relative;
}

.support-search .material-symbols-outlined {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-secondary);
}

.support-search input {
    width: 100%;
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-10);
    border: none;
    border-radius: var(--radius-full);
    font-size: var(--font-size-base);
}

.support-categories {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
}

.support-category-card {
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    text-align: center;
    text-decoration: none;
    transition: all 0.2s;
}

.support-category-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.support-category-card .material-symbols-outlined {
    font-size: 40px;
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}

.support-category-card h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-2);
    color: var(--color-text-primary);
}

.support-category-card p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

.product-support-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
    margin-top: var(--space-6);
}

.product-support-card {
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.product-support-card h3 {
    font-size: var(--font-size-lg);
    color: var(--color-primary);
    margin-bottom: var(--space-4);
}

.support-links {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-4);
}

.support-links li {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.support-links li:last-child {
    border-bottom: none;
}

.support-links a {
    font-size: var(--font-size-sm);
    color: var(--color-link);
}

.contact-options-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    margin-top: var(--space-6);
}

.contact-option {
    text-align: center;
    padding: var(--space-6);
    background: var(--color-bg-hover);
    border-radius: var(--radius-lg);
}

.contact-option .material-symbols-outlined {
    font-size: 40px;
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}

.contact-option h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-2);
}

.contact-option p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3);
}

.contact-value {
    display: block;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.contact-hours {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-1);
}

@media (max-width: 900px) {
    .support-categories,
    .product-support-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-options-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 500px) {
    .support-categories,
    .product-support-grid {
        grid-template-columns: 1fr;
    }
}

/* ===========================================
   CAREERS PAGE
   =========================================== */

.careers-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    padding: var(--space-12) 0;
    text-align: center;
}

.careers-hero h1 {
    color: white;
    font-size: var(--font-size-4xl);
    margin-bottom: var(--space-4);
}

.careers-hero-subtitle {
    color: rgba(255,255,255,0.9);
    font-size: var(--font-size-lg);
    max-width: 600px;
    margin: 0 auto var(--space-6);
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    margin-top: var(--space-8);
}

.benefit-card {
    text-align: center;
    padding: var(--space-6);
    background: var(--color-bg-hover);
    border-radius: var(--radius-lg);
}

.benefit-card .material-symbols-outlined {
    font-size: 40px;
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}

.benefit-card h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-2);
}

.benefit-card p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

.jobs-list {
    max-width: 800px;
    margin: var(--space-6) auto 0;
}

.job-category {
    margin-bottom: var(--space-6);
}

.job-category h3 {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border-light);
}

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

.job-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4);
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all 0.2s;
}

.job-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.job-title {
    display: block;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.job-meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.job-card .material-symbols-outlined {
    color: var(--color-primary);
}

.jobs-cta {
    text-align: center;
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border-light);
}

.jobs-cta p {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3);
}

@media (max-width: 900px) {
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .careers-hero h1 {
        font-size: var(--font-size-3xl);
    }
}

/* ===========================================
   BLOG PAGE
   =========================================== */

.blog-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    padding: var(--space-10) 0;
    text-align: center;
}

.blog-hero h1 {
    color: white;
    margin-bottom: var(--space-3);
}

.blog-hero-subtitle {
    color: rgba(255,255,255,0.9);
    font-size: var(--font-size-lg);
}

.featured-post {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    align-items: center;
    background: var(--color-bg-hover);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.featured-post-image .placeholder-panel {
    min-height: 300px;
    border-radius: 0;
}

.featured-post-content {
    padding: var(--space-6);
}

.post-category {
    display: inline-block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-2);
}

.featured-post-content h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-3);
}

.featured-post-content h2 a {
    color: var(--color-text-primary);
    text-decoration: none;
}

.featured-post-content h2 a:hover {
    color: var(--color-primary);
}

.featured-post-content p {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3);
}

.post-meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.blog-categories {
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--space-4) 0;
}

.category-tabs {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
}

.category-tab {
    padding: var(--space-2) var(--space-4);
    background: none;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.category-tab:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.category-tab.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.post-card {
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all 0.2s;
}

.post-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.post-card-image .placeholder-panel {
    min-height: 150px;
    border-radius: 0;
}

.post-card-content {
    padding: var(--space-4);
}

.post-card-content h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-2);
}

.post-card-content h3 a {
    color: var(--color-text-primary);
    text-decoration: none;
}

.post-card-content h3 a:hover {
    color: var(--color-primary);
}

.post-card-content p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3);
}

.post-date {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

.posts-pagination {
    text-align: center;
    margin-top: var(--space-8);
}

.newsletter-signup {
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
}

.newsletter-signup h2 {
    margin-bottom: var(--space-2);
}

.newsletter-signup > p {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-5);
}

.newsletter-form {
    display: flex;
    gap: var(--space-2);
}

.newsletter-form input {
    flex: 1;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-default);
}

.newsletter-note {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    margin-top: var(--space-2);
}

@media (max-width: 900px) {
    .featured-post {
        grid-template-columns: 1fr;
    }

    .posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .newsletter-form {
        flex-direction: column;
    }
}

/* ===========================================
   RESOURCE ARTICLE PAGES
   =========================================== */

.resource-article {
    padding-bottom: var(--space-12);
}

.resource-hero {
    background: var(--color-bg-light);
    padding: var(--space-8) 0 var(--space-10) 0;
}

.resource-hero-content {
    max-width: 800px;
}

.resource-hero-chips {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.resource-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}

.resource-chip-category {
    background: var(--color-primary-tint);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.resource-chip-type {
    background: white;
    color: var(--color-text-secondary);
}

.resource-hero h1 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}

.resource-hero-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-4) 0;
    line-height: var(--line-height-relaxed);
}

.resource-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.resource-meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

.resource-meta-item .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-primary);
}

.resource-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--space-10);
    padding-top: var(--space-10);
}

.resource-toc {
    position: sticky;
    top: calc(var(--header-height) + var(--space-6));
    align-self: start;
}

.resource-toc h2 {
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}

.resource-toc nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.resource-toc nav li {
    margin-bottom: var(--space-2);
}

.resource-toc nav a {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.2s;
}

.resource-toc nav a:hover {
    color: var(--color-primary);
}

.resource-content {
    max-width: 720px;
}

.resource-content section {
    margin-bottom: var(--space-10);
}

.resource-content h2 {
    font-size: var(--font-size-2xl);
    color: var(--color-primary);
    margin-bottom: var(--space-4);
    padding-top: var(--space-4);
}

.resource-content h3 {
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
    margin-top: var(--space-6);
    margin-bottom: var(--space-3);
}

.resource-content p {
    margin-bottom: var(--space-4);
    line-height: 1.7;
}

.resource-content ul,
.resource-content ol {
    margin-bottom: var(--space-4);
    padding-left: var(--space-6);
}

.resource-content li {
    margin-bottom: var(--space-2);
    line-height: 1.6;
}

.resource-cta-box {
    background: var(--color-bg-light);
    border-left: 4px solid var(--color-primary);
    padding: var(--space-6);
    margin-top: var(--space-8);
}

.resource-cta-box h3 {
    color: var(--color-primary);
    margin-top: 0;
    margin-bottom: var(--space-2);
}

.resource-cta-box p {
    margin-bottom: var(--space-4);
}

.resource-cta-panel {
    display: flex;
    gap: var(--space-5);
    background: var(--color-primary-tint);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-top: var(--space-10);
}

.resource-cta-icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    background: var(--color-primary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.resource-cta-icon .material-symbols-outlined {
    font-size: 32px;
    color: white;
}

.resource-cta-content {
    flex: 1;
}

.resource-cta-content h3 {
    font-size: var(--font-size-xl);
    color: var(--color-primary);
    margin: 0 0 var(--space-2) 0;
}

.resource-cta-content p {
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-4) 0;
    line-height: var(--line-height-relaxed);
}

.resource-cta-buttons {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* Resource Card Compact (for related resources horizontal scroll) */
.resource-card-compact {
    display: flex;
    flex-direction: column;
    min-width: 280px;
    max-width: 300px;
    padding: var(--space-4);
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--color-text-primary);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.resource-card-compact:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.resource-card-compact .resource-card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: var(--space-3);
}

.resource-card-compact .resource-card-icon .material-symbols-outlined {
    font-size: 24px;
    color: white;
}

.resource-card-compact .resource-card-chips {
    display: flex;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
}

.resource-chip-sm {
    display: inline-flex;
    padding: 2px var(--space-2);
    background: var(--color-bg-hover);
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.resource-card-compact .resource-card-title {
    font-family: var(--font-family-body);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2) 0;
}

.resource-card-compact .resource-card-description {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.example-brief {
    background: var(--color-bg-hover);
    padding: var(--space-5);
    border-radius: var(--radius-md);
    margin: var(--space-4) 0;
}

.example-brief p {
    margin-bottom: var(--space-3);
}

.example-brief p:last-child {
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .resource-layout {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .resource-toc {
        position: static;
        padding: var(--space-4);
        background: var(--color-bg-hover);
        border-radius: var(--radius-md);
    }

    .resource-toc nav ul {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2) var(--space-4);
    }

    .resource-toc nav li {
        margin-bottom: 0;
    }

    .resource-cta-panel {
        flex-direction: column;
        gap: var(--space-4);
    }

    .resource-cta-icon {
        width: 56px;
        height: 56px;
    }

    .resource-cta-icon .material-symbols-outlined {
        font-size: 28px;
    }

    .resource-cta-buttons {
        flex-direction: column;
    }

    .resource-cta-buttons .btn {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .resource-hero {
        padding: var(--space-6) 0;
    }

    .resource-hero h1 {
        font-size: 1.75rem;
    }

    .resource-hero-subtitle {
        font-size: var(--font-size-md);
    }

    .resource-hero-meta {
        flex-direction: column;
        gap: var(--space-2);
    }
}

/* ===========================================
   HELP PAGE
   =========================================== */

.help-hero {
    background: var(--color-bg-light);
    padding: var(--space-10) 0;
    text-align: center;
}

.help-hero h1 {
    font-size: clamp(2rem, 4vw, 2.75rem);
    color: var(--color-primary);
    margin-bottom: var(--space-4);
}

.help-search {
    max-width: 500px;
    margin: 0 auto;
}

.help-search input {
    width: 100%;
    padding: var(--space-4);
    font-size: var(--font-size-lg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
}

.help-categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.help-category {
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

.help-category h3 {
    font-size: var(--font-size-lg);
    color: var(--color-primary);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.help-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.help-links li {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.help-links li:last-child {
    border-bottom: none;
}

.help-links a {
    color: var(--color-link);
    font-size: var(--font-size-sm);
}

@media (max-width: 768px) {
    .help-categories {
        grid-template-columns: 1fr;
    }
}

/* ===========================================
   REUSABLE SECTION PATTERNS
   Standard content blocks for product pages
   =========================================== */

/* -------------------------------------------
   WHY BARBRI SECTION
   Differentiator/comparison block
   ------------------------------------------- */
.why-section {
    background: var(--color-bg-page);
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.why-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    border: 1px solid var(--color-border-light);
    text-align: center;
}

.why-card-icon {
    width: 56px;
    height: 56px;
    background: var(--color-primary-tint);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-4);
}

.why-card-icon .material-symbols-outlined {
    font-size: 28px;
    color: var(--color-primary);
}

.why-card h3 {
    font-size: var(--font-size-lg);
    color: var(--color-primary);
    margin-bottom: var(--space-2);
}

.why-card p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.6;
}

@media (max-width: 900px) {
    .why-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
}

/* -------------------------------------------
   WHAT TO EXPECT SECTION
   Experience preview / timeline
   ------------------------------------------- */
.expect-section {
    background: white;
}

.expect-timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    position: relative;
}

.expect-timeline::before {
    content: '';
    position: absolute;
    top: 28px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: var(--color-border);
    z-index: 0;
}

.expect-step {
    text-align: center;
    position: relative;
    z-index: 1;
}

.expect-step-number {
    width: 56px;
    height: 56px;
    background: var(--color-primary);
    color: white;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    margin: 0 auto var(--space-3);
}

.expect-step h4 {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.expect-step p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

@media (max-width: 900px) {
    .expect-timeline {
        grid-template-columns: repeat(2, 1fr);
    }

    .expect-timeline::before {
        display: none;
    }
}

@media (max-width: 500px) {
    .expect-timeline {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------
   RECOMMENDATION CALLOUT
   Guidance banner for product selection
   ------------------------------------------- */
.recommendation-callout {
    background: linear-gradient(135deg, var(--color-primary-tint) 0%, #E8F4E8 100%);
    border: 1px solid var(--color-primary);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.recommendation-callout-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: var(--color-primary);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.recommendation-callout-icon .material-symbols-outlined {
    font-size: 20px;
    color: white;
}

.recommendation-callout-content h4 {
    font-size: var(--font-size-base);
    color: var(--color-primary);
    margin: 0 0 var(--space-1);
}

.recommendation-callout-content p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

@media (max-width: 600px) {
    .recommendation-callout {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
}

/* -------------------------------------------
   EMPATHY STATEMENT
   Acknowledges user anxiety/stress
   ------------------------------------------- */
.empathy-statement {
    text-align: center;
    padding: var(--space-6) var(--space-8);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-lg);
    margin: var(--space-6) 0;
}

.empathy-statement p {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    font-style: italic;
    margin: 0;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.empathy-statement p strong {
    color: var(--color-primary);
    font-style: normal;
}

/* -------------------------------------------
   GUARANTEE CALLOUT
   Prominent pass guarantee display
   ------------------------------------------- */
.guarantee-callout {
    background: linear-gradient(135deg, #1E3D5C 0%, var(--color-primary) 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    display: flex;
    align-items: center;
    gap: var(--space-8);
    color: white;
}

.guarantee-callout-badge {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    background: rgba(255,255,255,0.15);
    border: 3px solid rgba(255,255,255,0.3);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.guarantee-callout-badge .material-symbols-outlined {
    font-size: 48px;
    color: white;
}

.guarantee-callout-content h3 {
    font-size: var(--font-size-2xl);
    color: white;
    margin: 0 0 var(--space-2);
}

.guarantee-callout-content p {
    font-size: var(--font-size-base);
    color: rgba(255,255,255,0.9);
    margin: 0 0 var(--space-4);
    max-width: 500px;
}

.guarantee-callout-content .btn {
    background: white;
    color: var(--color-primary);
}

.guarantee-callout-content .btn:hover {
    background: rgba(255,255,255,0.9);
}

@media (max-width: 768px) {
    .guarantee-callout {
        flex-direction: column;
        text-align: center;
        padding: var(--space-6);
    }

    .guarantee-callout-badge {
        width: 80px;
        height: 80px;
    }

    .guarantee-callout-badge .material-symbols-outlined {
        font-size: 36px;
    }

    .guarantee-callout-content p {
        max-width: none;
    }
}

/* -------------------------------------------
   INSTRUCTOR CREDENTIALS
   Shows who teaches the course
   ------------------------------------------- */
.instructors-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
}

.instructor-card {
    text-align: center;
}

.instructor-photo {
    width: 80px;
    height: 80px;
    background: var(--color-primary-tint);
    border-radius: var(--radius-full);
    margin: 0 auto var(--space-3);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.instructor-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.instructor-photo .material-symbols-outlined {
    font-size: 36px;
    color: var(--color-primary);
}

.instructor-card h4 {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-1);
}

.instructor-card .instructor-title {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-1);
}

.instructor-card .instructor-school {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    margin: 0;
}

@media (max-width: 900px) {
    .instructors-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* -------------------------------------------
   TEAM GRID - Authors, Contributors, Panelists
   Reusable component for displaying people with bios
   ------------------------------------------- */

.team-section {
    padding: var(--space-10) 0;
}

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

.team-header h2 {
    margin-bottom: var(--space-2);
}

.team-header p {
    color: var(--color-text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

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

/* 3-column variant */
.team-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.team-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.team-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.team-card-photo {
    aspect-ratio: 1;
    background: var(--color-bg-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.team-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-card-photo .material-symbols-outlined {
    font-size: 64px;
    color: var(--color-border);
}

.team-card-info {
    padding: var(--space-4);
}

.team-card-name {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-1);
}

.team-card-title {
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
    margin: 0 0 var(--space-2);
}

.team-card-credentials {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    margin: 0;
}

/* Expandable bio */
.team-card-bio {
    padding: 0 var(--space-4) var(--space-4);
    border-top: 1px solid var(--color-border-light);
    margin-top: var(--space-3);
}

.team-card-bio-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-3) 0 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
}

.team-card-bio-toggle .material-symbols-outlined {
    font-size: 20px;
    transition: transform 0.2s ease;
}

.team-card-bio-toggle[aria-expanded="true"] .material-symbols-outlined {
    transform: rotate(180deg);
}

.team-card-bio-content {
    display: none;
    padding-top: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.team-card-bio-content.is-open {
    display: block;
}

/* Compact variant - smaller photos, inline layout */
.team-grid-compact .team-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.team-grid-compact .team-card-photo {
    width: 100px;
    min-width: 100px;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    margin: var(--space-4);
}

.team-grid-compact .team-card-info {
    padding: var(--space-4) var(--space-4) var(--space-4) 0;
}

.team-grid-compact .team-card-bio {
    display: none; /* Hide bio toggle in compact mode */
}

/* Circular photo variant */
.team-grid-circular .team-card-photo {
    width: 120px;
    height: 120px;
    border-radius: var(--radius-full);
    margin: var(--space-5) auto var(--space-3);
}

.team-grid-circular .team-card {
    text-align: center;
}

.team-grid-circular .team-card-info {
    text-align: center;
}

/* Responsive */
@media (max-width: 1100px) {
    .team-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .team-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 800px) {
    .team-grid,
    .team-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .team-grid-compact .team-card {
        flex-direction: column;
    }

    .team-grid-compact .team-card-photo {
        width: 100%;
        margin: 0;
        border-radius: 0;
    }

    .team-grid-compact .team-card-info {
        padding: var(--space-4);
    }
}

@media (max-width: 500px) {
    .team-grid,
    .team-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------
   AUDIENCE GUIDE / DECISION HELPER
   Helps users identify which product is right for them
   Use: 2-3 cards showing audience type + recommendation
   ------------------------------------------- */
.audience-guide {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    margin: var(--space-6) 0;
}

.audience-card {
    display: block;
    background: var(--color-bg-card);
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-align: center;
    text-decoration: none;
    transition: var(--transition-all);
}

.audience-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}

.audience-card-icon {
    width: 56px;
    height: 56px;
    background: var(--color-primary);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-4);
}

.audience-card-icon .material-symbols-outlined {
    font-size: 28px;
    color: white;
}

.audience-card h4 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2);
}

.audience-card p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0 0 var(--space-4);
}

.audience-card .audience-recommendation {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.audience-card .audience-recommendation .material-symbols-outlined {
    font-size: 18px;
}

@media (max-width: 900px) {
    .audience-guide {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ===========================================
   SEARCH RESULTS PAGE
   =========================================== */

.search-results-page {
    min-height: 60vh;
    padding-bottom: var(--space-12);
}

.search-results-header {
    text-align: center;
    margin-bottom: var(--space-6);
}

.search-results-header h1 {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--space-2);
}

.search-results-query {
    color: var(--color-text-secondary);
    font-size: var(--font-size-lg);
}

.search-results-form {
    max-width: 600px;
    margin: 0 auto var(--space-8);
}

.search-form-inline {
    display: flex;
    gap: var(--space-3);
}

.search-input-wrapper {
    flex: 1;
    position: relative;
}

.search-input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-tertiary);
    font-size: 24px;
}

.search-input-large {
    width: 100%;
    padding: var(--space-4) var(--space-4) var(--space-4) 52px;
    font-size: var(--font-size-lg);
    border: 2px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-input-large:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(42, 84, 136, 0.1);
}

/* Empty States */
.search-empty-state {
    text-align: center;
    padding: var(--space-12) var(--space-6);
    max-width: 500px;
    margin: 0 auto;
}

.search-empty-icon {
    font-size: 64px;
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-4);
}

.search-empty-state h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-2);
}

.search-empty-state > p {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
}

.search-suggestions {
    text-align: left;
    background: var(--color-bg-secondary);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
}

.search-suggestions h3 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-3);
}

.search-suggestions h3:not(:first-child) {
    margin-top: var(--space-5);
}

.search-suggestions-list {
    margin: 0 0 0 var(--space-5);
    padding: 0;
    color: var(--color-text-secondary);
}

.search-suggestions-list li {
    margin-bottom: var(--space-2);
}

.search-suggestion-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.chip {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    background: white;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    text-decoration: none;
    transition: all 0.15s ease;
}

.chip:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
    text-decoration: none;
}

/* Results Sections */
.search-results-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.search-results-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--color-border-light);
}

.search-results-section-title .material-symbols-outlined {
    color: var(--color-primary);
}

.search-results-count {
    font-size: var(--font-size-sm);
    font-weight: normal;
    color: var(--color-text-tertiary);
    margin-left: auto;
}

/* Results Grid */
.search-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--space-4);
}

.search-result-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4);
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--color-text-primary);
    transition: all 0.15s ease;
}

.search-result-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}

.search-result-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--color-bg-hover-blue);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.search-result-icon .material-symbols-outlined {
    font-size: 24px;
    color: var(--color-primary);
}

.search-result-icon-course {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

.search-result-icon-course .material-symbols-outlined {
    color: white;
}

.search-result-icon-study-aid {
    background: linear-gradient(135deg, #2E5D8C 0%, #1A3D5C 100%);
}

.search-result-icon-study-aid .material-symbols-outlined {
    color: white;
}

.search-result-price {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.search-result-collection {
    color: var(--color-success);
    display: flex;
    align-items: center;
}

.search-result-collection .material-symbols-outlined {
    font-size: 16px;
}

.search-result-content {
    flex: 1;
    min-width: 0;
}

.search-result-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-1);
    color: var(--color-primary);
}

.search-result-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-result-category {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.search-result-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
}

.search-result-type {
    padding: 2px 8px;
    background: var(--color-bg-hover);
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-medium);
}

.search-result-credits,
.search-result-area {
    color: var(--color-text-tertiary);
}

.search-result-arrow {
    color: var(--color-text-tertiary);
    flex-shrink: 0;
    align-self: center;
}

.search-result-card:hover .search-result-arrow {
    color: var(--color-primary);
}

/* Results List (for pages) */
.search-results-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.search-result-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-text-primary);
    transition: all 0.15s ease;
}

.search-result-link:hover {
    border-color: var(--color-primary);
    background: var(--color-bg-hover-blue);
    text-decoration: none;
}

.search-result-link .material-symbols-outlined:first-child {
    color: var(--color-text-tertiary);
    font-size: 20px;
}

.search-result-link-title {
    flex: 1;
}

.search-result-link-arrow {
    color: var(--color-text-tertiary);
    font-size: 20px;
}

.search-result-link:hover .search-result-link-arrow {
    color: var(--color-primary);
}

/* More Results Link */
.search-results-more {
    margin-top: var(--space-4);
    text-align: center;
}

.search-results-more .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* Search Results Responsive */
@media (max-width: 768px) {
    .search-form-inline {
        flex-direction: column;
    }

    .search-results-grid {
        grid-template-columns: 1fr;
    }

    .search-result-card {
        padding: var(--space-3);
    }

    .search-result-icon {
        width: 40px;
        height: 40px;
    }

    .search-result-icon .material-symbols-outlined {
        font-size: 20px;
    }
}

/* ============================================
   Mobile Hero CTAs - Stack & Full Width
   ============================================ */
@media (max-width: 768px) {
    .hero-home-ctas,
    .hero-family-ctas,
    .bar-hero-ctas,
    .prelaw-hero-ctas,
    .adaptibar-hero-ctas,
    .intl-hero-ctas,
    .org-hero-ctas,
    .study-aids-hero-ctas,
    .product-section-ctas {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .hero-home-ctas .btn,
    .hero-family-ctas .btn,
    .bar-hero-ctas .btn,
    .prelaw-hero-ctas .btn,
    .adaptibar-hero-ctas .btn,
    .intl-hero-ctas .btn,
    .org-hero-ctas .btn,
    .study-aids-hero-ctas .btn,
    .product-section-ctas .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ===========================================
   CART FLYOUT
   =========================================== */

.cart-flyout-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.cart-flyout-overlay.active {
    opacity: 1;
    visibility: visible;
}

.cart-flyout {
    position: fixed;
    top: 0;
    right: 0;
    width: 420px;
    max-width: 100%;
    height: 100vh;
    background: white;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
}

.cart-flyout.active {
    transform: translateX(0);
}

.cart-flyout-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border-light);
}

.cart-flyout-header h2 {
    margin: 0;
    font-size: var(--font-size-xl);
    font-family: var(--font-family-heading);
    color: var(--color-primary);
}

.cart-flyout-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-2);
    color: var(--color-text-secondary);
    border-radius: var(--radius-sm);
}

.cart-flyout-close:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.cart-flyout-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4) var(--space-5);
}

.cart-empty {
    text-align: center;
    padding: var(--space-8) 0;
}

.cart-empty-icon {
    font-size: 64px;
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-3);
}

.cart-empty p {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

/* Cart Items */
.cart-items {
    display: flex;
    flex-direction: column;
}

.cart-item {
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.cart-item:first-child {
    padding-top: 0;
}

.cart-item:last-child {
    border-bottom: none;
}

.cart-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.cart-item-info {
    flex: 1;
    min-width: 0;
}

.cart-item-title-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.cart-item-title {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
}

.cart-item-inline-price {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    white-space: nowrap;
}

.cart-item-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.4;
}

.cart-item-live-date {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-tertiary);
}

.cart-item-live-date .material-symbols-outlined {
    font-size: 14px;
}

/* Cart Item Breakdown */
.cart-item-breakdown {
    background: var(--color-bg-subtle, #f9fafb);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
}

.cart-item-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 2px 0;
    color: var(--color-text-secondary);
}

.cart-item-line-addon {
    color: var(--color-text-tertiary);
}

.cart-item-line-sum {
    border-top: 1px solid var(--color-border-light);
    margin-top: var(--space-1);
    padding-top: var(--space-1);
}

.cart-item-line-discount {
    color: var(--color-success);
    display: flex;
    align-items: center;
    gap: 4px;
}

.cart-item-line-discount .material-symbols-outlined {
    font-size: 14px;
}

.cart-item-line-total {
    border-top: 1px solid var(--color-border-light);
    margin-top: var(--space-1);
    padding-top: var(--space-1);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
}

.cart-item-remove {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: var(--color-text-tertiary);
    border-radius: var(--radius-sm);
    line-height: 1;
}

.cart-item-remove .material-symbols-outlined {
    font-size: 18px;
}

.cart-item-remove:hover {
    color: var(--color-error);
}

/* Mixed Currency Warning */
.cart-mixed-currency-warning {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
    background: #FFF3E0;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    color: #E65100;
}

.cart-mixed-currency-warning .material-symbols-outlined {
    font-size: 18px;
    flex-shrink: 0;
}

/* Cart Flyout Footer */
.cart-flyout-footer {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border-light);
    background: white;
}

.cart-totals {
    margin-bottom: var(--space-4);
}

.cart-total-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2) 0;
    font-size: var(--font-size-sm);
}

.cart-total-row.cart-discount {
    color: var(--color-success);
}

.cart-total-row.cart-total-final {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.cart-flyout-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.cart-flyout-actions .btn-ghost {
    color: var(--color-text-secondary);
}

.cart-flyout-actions .btn-ghost:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

/* Cart Promo Code Section */
.cart-promo-section {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border-light);
}

.cart-promo-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) 0;
    border: none;
    background: transparent;
    font-size: var(--font-size-sm);
    color: var(--color-link);
    cursor: pointer;
    transition: color 0.15s ease;
}

.cart-promo-toggle:hover {
    color: var(--color-primary);
}

.cart-promo-toggle .material-symbols-outlined {
    font-size: 18px;
}

.cart-promo-toggle-arrow {
    margin-left: auto;
    transition: transform 0.2s ease;
}

.cart-promo-toggle.expanded .cart-promo-toggle-arrow {
    transform: rotate(180deg);
}

.cart-promo-form {
    margin-top: var(--space-2);
}

.cart-promo-input-wrapper {
    display: flex;
    gap: var(--space-2);
}

.cart-promo-input-wrapper input {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
}

.cart-promo-input-wrapper input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.cart-promo-error {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding: var(--space-2);
    background: #FEF2F2;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    color: var(--color-error);
}

.cart-promo-error .material-symbols-outlined {
    font-size: 16px;
}

.cart-promo-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    background: #ECFDF5;
    border-radius: var(--radius-sm);
}

.cart-promo-applied-text {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-success);
}

.cart-promo-applied-text .material-symbols-outlined {
    font-size: 18px;
}

.cart-promo-remove-btn {
    border: none;
    background: transparent;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    cursor: pointer;
    text-decoration: underline;
}

.cart-promo-remove-btn:hover {
    color: var(--color-error);
}

@media (max-width: 480px) {
    .cart-flyout {
        width: 100%;
    }
}

/* ===========================================
   ABOUT PAGE
   =========================================== */

.about-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    padding: var(--space-12) 0;
    text-align: center;
}

.about-hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.about-hero h1 {
    color: var(--color-text-inverse);
    font-size: var(--font-size-4xl);
    margin-bottom: var(--space-4);
}

.about-hero-subtitle {
    color: var(--color-text-inverse);
    opacity: 0.9;
    font-size: var(--font-size-lg);
    line-height: 1.6;
}

.about-story {
    max-width: 800px;
    margin: 0 auto;
}

.about-story-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.about-story-content p {
    font-size: var(--font-size-base);
    line-height: 1.7;
    color: var(--color-text-secondary);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    margin-top: var(--space-8);
}

.value-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-align: center;
}

.value-card-icon {
    width: 56px;
    height: 56px;
    background: var(--color-primary-tint);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-4);
}

.value-card-icon .material-symbols-outlined {
    font-size: 28px;
    color: var(--color-primary);
}

.value-card h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-2);
}

.value-card p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.leadership-intro {
    max-width: 800px;
    margin: 0 auto var(--space-6);
    text-align: center;
}

.leadership-intro p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-4);
}

.leadership-cta {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
}

.brands-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    margin-top: var(--space-8);
}

.brand-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.brand-card h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-2);
    color: var(--color-primary);
}

.brand-card p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-3);
}

.brand-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-link);
}

.brand-link:hover {
    color: var(--color-link-hover);
}

.brand-link .material-symbols-outlined {
    font-size: 18px;
}

.stat-card-large {
    background: var(--color-primary-tint);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    text-align: center;
}

.stat-card-number {
    font-family: var(--font-family-heading);
    font-size: 72px;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: var(--space-2);
}

.stat-card-label {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.stat-card-detail {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.section-final-cta {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    padding: var(--space-10) 0;
}

.final-cta {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.final-cta h2 {
    color: var(--color-text-inverse);
    font-size: var(--font-size-3xl);
    margin-bottom: var(--space-3);
}

.final-cta p {
    color: var(--color-text-inverse);
    opacity: 0.9;
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-6);
}

.final-cta-buttons {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
}

@media (max-width: 991px) {
    .values-grid,
    .brands-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-hero h1 {
        font-size: var(--font-size-3xl);
    }
}

@media (max-width: 767px) {
    .values-grid,
    .brands-grid {
        grid-template-columns: 1fr;
    }

    .about-hero {
        padding: var(--space-8) 0;
    }

    .about-hero h1 {
        font-size: var(--font-size-2xl);
    }

    .leadership-cta,
    .final-cta-buttons {
        flex-direction: column;
    }

    .stat-card-number {
        font-size: 56px;
    }
}

/* ===========================================
   CONTACT PAGE
   =========================================== */

.contact-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    padding: var(--space-10) 0;
    text-align: center;
}

.contact-hero h1 {
    color: var(--color-text-inverse);
    margin-bottom: var(--space-3);
}

.contact-hero-subtitle {
    color: var(--color-text-inverse);
    opacity: 0.9;
    font-size: var(--font-size-lg);
    max-width: 600px;
    margin: 0 auto;
}

.contact-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-6);
    align-items: start;
}

.contact-form-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
}

.contact-form-card h2 {
    margin-bottom: var(--space-5);
}

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

.form-group {
    margin-bottom: var(--space-4);
}

.form-group label {
    display: block;
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-2);
    color: var(--color-text-primary);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-default);
    font-size: var(--font-size-base);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(42, 84, 136, 0.15);
}

.contact-info-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.contact-info-card {
    background: var(--color-bg-page);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.contact-info-card h3 {
    font-size: var(--font-size-md);
    margin-bottom: var(--space-2);
}

.contact-info-card p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-3);
}

.contact-phone,
.contact-email {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-link);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-2);
}

.contact-phone:hover,
.contact-email:hover {
    color: var(--color-link-hover);
}

.contact-phone .material-symbols-outlined,
.contact-email .material-symbols-outlined {
    font-size: 20px;
}

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

    .form-row {
        grid-template-columns: 1fr;
    }
}

/* =========================================================================
   CHECKOUT FLOW STYLES
   Added: 2026-02-28
   ========================================================================= */

/* =========================================================================
   CHECKOUT FLOW LAYOUT
   ========================================================================= */

.checkout-flow-container {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-5);
    /* align-items: start REMOVED - breaks sticky positioning */
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0; /* Padding moved to .checkout-main */
    box-sizing: border-box;
}

/* Single column variant for confirmation pages */
.checkout-flow-container.checkout-flow-centered {
    grid-template-columns: 1fr;
    max-width: 800px;
}

.checkout-flow-form-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
    padding-top: var(--space-6); /* Give form breathing room, but not summary column */
}

.checkout-flow-summary-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

@media (max-width: 900px) {
    .checkout-flow-container {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .checkout-flow-summary-column {
        order: -1;
    }
}

@media (max-width: 640px) {
    .checkout-flow-container {
        padding: var(--space-4);
    }
}

/* =========================================================================
   CHECKOUT FLOW CARD
   ========================================================================= */

.checkout-flow-card {
    background: var(--color-bg-card, white);
    border: 1px solid var(--color-border-light);
    padding: var(--space-5);
}

.checkout-flow-title {
    font-family: var(--font-family-heading, 'Bitter', serif);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin-bottom: var(--space-1);
}

.checkout-flow-subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

/* =========================================================================
   IDENTITY SECTION (choose sign in / create account / guest)
   ========================================================================= */

.checkout-identity-section {
    margin-bottom: var(--space-6);
}

.checkout-identity-error {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-4);
    background: var(--color-error-light, #FDEAE3);
    color: var(--color-error, #D44400);
}

.checkout-identity-error .material-symbols-outlined {
    font-size: 20px;
}

.checkout-identity-tabs {
    display: flex;
    background: var(--color-bg-subtle, #F5F5F5);
    border-radius: var(--radius-md);
    padding: 4px;
    margin-bottom: var(--space-5);
}

.checkout-identity-tab {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.checkout-identity-tab.active {
    background: white;
    color: var(--color-text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.checkout-identity-tab:hover:not(.active) {
    color: var(--color-text-primary);
}

.checkout-identity-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.checkout-identity-form.hidden {
    display: none;
}

.checkout-identity-form .form-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    margin-top: var(--space-1);
}

/* =========================================================================
   EMAIL-FIRST IDENTITY FLOW
   ========================================================================= */

.checkout-welcome-back {
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: var(--color-bg-subtle, #F9FAFB);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-success, #447228);
}

.checkout-welcome-back.hidden,
.checkout-guest-details.hidden {
    display: none;
}

.checkout-welcome-message {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.checkout-welcome-message .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-success, #447228);
}

.checkout-switch-guest {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    padding: var(--space-2) 0;
    cursor: pointer;
    text-decoration: underline;
    margin-top: var(--space-2);
}

.checkout-switch-guest:hover {
    color: var(--color-primary-dark);
}

.checkout-guest-details {
    margin-top: var(--space-4);
}

/* =========================================================================
   USER IDENTITY (shown when identity is established)
   ========================================================================= */

.checkout-user-identity {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3);
    margin-bottom: var(--space-5);
    background: var(--color-bg-subtle, #F9FAFB);
    border-radius: var(--radius-md);
}

.checkout-user-info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.checkout-user-info .material-symbols-outlined {
    font-size: 32px;
    color: var(--color-text-secondary);
}

.checkout-user-label {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.checkout-user-email {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.checkout-user-switch {
    font-size: var(--font-size-sm);
    color: var(--color-link);
    text-decoration: none;
}

.checkout-user-switch:hover {
    text-decoration: underline;
}

/* =========================================================================
   FORM SECTIONS WITH NUMBERED HEADINGS
   Matches pe-site-prototype exactly
   ========================================================================= */

.form-section {
    margin-bottom: var(--space-6);
}

.form-section:last-child {
    margin-bottom: 0;
}

.form-section-title {
    font-family: var(--font-family-heading, 'Bitter', serif);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.section-number {
    width: 28px;
    height: 28px;
    background: var(--color-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    flex-shrink: 0;
    font-family: var(--font-family-body, 'Nunito', sans-serif);
}

.section-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: calc(-1 * var(--space-2)) 0 var(--space-4);
}

/* Company Section */
.checkout-company-section {
    margin-bottom: var(--space-5);
}

.checkout-company-section .checkout-flow-title {
    margin-bottom: var(--space-3);
}

/* =========================================================================
   SCHEDULE OPTIONS (Payment Plan Selection)
   ========================================================================= */

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

.schedule-option {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    gap: var(--space-1) var(--space-3);
    align-items: start;
    padding: var(--space-4);
    background: white;
    border: 2px solid var(--color-border-default);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s ease;
}

.schedule-option:hover {
    border-color: var(--color-primary);
    background: var(--color-bg-subtle, #F9FAFB);
}

.schedule-option.selected {
    border-color: var(--color-primary);
    background: var(--color-selected-light, #E5ECF9);
}

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

.schedule-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.option-radio {
    grid-column: 1;
    grid-row: 1;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border-default);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    margin-top: 2px;
}

.option-radio::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-primary);
    transform: scale(0);
    transition: transform 0.15s ease;
}

.schedule-option.selected .option-radio {
    border-color: var(--color-primary);
}

.schedule-option.selected .option-radio::after {
    transform: scale(1);
}

.schedule-option-content {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-width: 0;
}

.schedule-option-title {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.schedule-option-price {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.schedule-option-desc {
    grid-column: 2;
    grid-row: 2;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* Inline Schedule Option Details (shown when selected) */
.schedule-option-details {
    display: none;
    grid-column: 2;
    grid-row: 3;
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-light);
}

.schedule-option.selected .schedule-option-details {
    display: block;
}

.schedule-option-details .form-group {
    margin-bottom: var(--space-2);
}

.schedule-option-details .form-group label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-1);
}

.schedule-option-details .form-hint {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-top: var(--space-2);
    margin-bottom: 0;
}

.schedule-option-details .form-hint .material-symbols-outlined {
    font-size: 16px;
    flex-shrink: 0;
    color: var(--color-primary);
}

/* =========================================================================
   PARTIAL PAYMENT BREAKDOWN
   ========================================================================= */

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

.partial-row {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.partial-row.partial-total {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border-default);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

/* =========================================================================
   PAYMENT PLAN - DEPOSIT CUSTOMIZATION
   ========================================================================= */

.deposit-input-wrapper {
    display: flex;
    align-items: center;
    position: relative;
}

.deposit-currency {
    position: absolute;
    left: var(--space-3);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    pointer-events: none;
}

.deposit-input {
    padding-left: var(--space-6) !important;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-lg);
}

.deposit-slider {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--color-border-light);
    border-radius: 3px;
    outline: none;
    margin: var(--space-3) 0 var(--space-2);
    cursor: pointer;
}

.deposit-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--color-primary, #2A5488);
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.deposit-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.deposit-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--color-primary, #2A5488);
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

.deposit-range-labels {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-3);
}

.form-hint-inline {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    margin-top: var(--space-1);
    margin-bottom: 0;
}

.plan-fee-note {
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-subtle, #f9fafb);
    border-radius: var(--radius-sm);
}

.plan-breakdown {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    background: var(--color-bg-subtle, #f9fafb);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    margin-top: var(--space-3);
}

.plan-breakdown-row {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.plan-breakdown-row.plan-breakdown-total {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border-default);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

/* =========================================================================
   EXPRESS CHECKOUT (Apple Pay / Google Pay)
   ========================================================================= */

.express-checkout {
    margin-bottom: var(--space-5);
}

.express-buttons {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.express-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: white;
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: 48px;
}

.express-btn:hover {
    border-color: var(--color-text-secondary);
    background: var(--color-bg-subtle, #F9FAFB);
}

.express-btn-apple {
    background: #000;
    border-color: #000;
    color: white;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.5px;
}

.express-btn-apple:hover {
    background: #333;
    border-color: #333;
}

.express-btn-google {
    background: white;
}

.express-btn-google img {
    height: 24px;
    width: auto;
}

.express-divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
}

.express-divider::before,
.express-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border-light);
}

/* =========================================================================
   FORM FIELDS
   ========================================================================= */

.form-group {
    margin-bottom: var(--space-4);
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-group label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    height: 44px;
    padding: 0 var(--space-3);
    font-size: var(--font-size-base);
    font-family: var(--font-family-body, 'Nunito', sans-serif);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: white;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(42, 84, 136, 0.1);
}

.form-group input::placeholder {
    color: var(--color-text-disabled, var(--color-text-tertiary));
}

/* Form Rows */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.form-row-3col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-4);
}

@media (max-width: 640px) {
    .form-row,
    .form-row-2col,
    .form-row-3col {
        display: flex;
        flex-direction: column;
    }
}

/* Field Validation States */
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
    border-color: var(--color-error, #D44400);
}

.form-group.has-error input:focus,
.form-group.has-error select:focus,
.form-group.has-error textarea:focus {
    border-color: var(--color-error, #D44400);
    box-shadow: 0 0 0 3px rgba(212, 68, 0, 0.1);
}

.field-error {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--color-error, #D44400);
}

/* =========================================================================
   CHECKBOX LABELS
   ========================================================================= */

.checkbox-label {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    cursor: pointer;
    font-size: var(--font-size-sm);
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--color-primary);
}

/* =========================================================================
   EMPLOYER PAY SECTION
   ========================================================================= */

.employer-method-tabs {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border-light);
    padding-bottom: var(--space-2);
}

.employer-tab {
    padding: var(--space-2) var(--space-3);
    border: none;
    background: transparent;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
}

.employer-tab:hover {
    color: var(--color-text-primary);
    background: var(--color-bg-subtle, #F9FAFB);
}

.employer-tab.active {
    color: var(--color-primary);
    background: var(--color-selected-light, #E5ECF9);
}

.employer-search-container {
    position: relative;
}

.employer-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-height: 240px;
    overflow-y: auto;
    z-index: 100;
    display: none;
}

.employer-search-results.visible {
    display: block;
}

.employer-search-result {
    padding: var(--space-3);
    cursor: pointer;
    font-size: var(--font-size-sm);
    border-bottom: 1px solid var(--color-border-light);
}

.employer-search-result:last-child {
    border-bottom: none;
}

.employer-search-result:hover {
    background: var(--color-bg-subtle, #F9FAFB);
}

.employer-search-result.no-results {
    color: var(--color-text-secondary);
    cursor: default;
}

.employer-search-result.no-results:hover {
    background: transparent;
}

.employer-search-result.highlighted {
    background: var(--color-selected-light, #E5ECF9);
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.employer-selected {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--color-selected-light, #E5ECF9);
    border-radius: var(--radius-md);
    margin-top: var(--space-3);
}

.employer-selected .material-symbols-outlined {
    color: var(--color-primary);
    font-size: 20px;
}

.employer-selected span:nth-child(2) {
    flex: 1;
    font-weight: var(--font-weight-medium);
}

.employer-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--color-text-secondary);
    border-radius: 50%;
    transition: all 0.15s ease;
}

.employer-clear:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--color-text-primary);
}

.employer-clear .material-symbols-outlined {
    font-size: 18px;
}

/* =========================================================================
   ALERTS
   ========================================================================= */

.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}

.alert .material-symbols-outlined {
    font-size: 20px;
    flex-shrink: 0;
}

.alert-info {
    background: var(--color-info-light, #DEEBFF);
    color: var(--color-info, #0065FF);
}

.alert-success {
    background: var(--color-success-light, #E8F0E4);
    color: var(--color-success, #447228);
}

.alert-warning {
    background: var(--color-warning-light, #FFF4E5);
    color: var(--color-warning-dark, #B37400);
}

.alert-error {
    background: var(--color-error-light, #FDEAE3);
    color: var(--color-error, #D44400);
}

/* =========================================================================
   BUTTONS
   Three styles: Primary, Secondary, Ghost (Tertiary)
   Heights: sm=36px, md=44px, lg=48px
   Font: 18px for all sizes
   ========================================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-family-body, 'Nunito', sans-serif);
    font-size: 18px;
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 13px 24px;  /* 44px height default */
}

.btn:hover {
    text-decoration: none;
}

/* Primary: Rich Black background, white text */
.btn-primary {
    background-color: #001722;
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background-color: #1a2e3b;
    color: white;
}

/* Secondary: Transparent, dark border, dark text */
.btn-secondary {
    background-color: transparent;
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-dark, #7E878E);
}

.btn-secondary:hover:not(:disabled) {
    background-color: var(--color-text-primary);
    color: white;
    border-color: var(--color-text-primary);
}

/* Ghost/Tertiary: Transparent, no border */
.btn-ghost,
.btn-tertiary {
    background-color: transparent;
    color: var(--color-text-primary);
    border: none;
}

.btn-ghost:hover:not(:disabled),
.btn-tertiary:hover:not(:disabled) {
    background-color: var(--color-bg-hover, #F4F5F7);
}

/* Size variants */
.btn-sm {
    font-size: 18px;
    padding: 9px 16px;   /* 36px height */
}

.btn-md {
    font-size: 18px;
    padding: 13px 24px;  /* 44px height */
}

/* Disabled states */
.btn:disabled,
.btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--color-border-default, #8C969E);
    border-color: var(--color-border-default, #8C969E);
}

/* Full width */
.btn-full {
    width: 100%;
}

/* Button with icon */
.btn .material-symbols-outlined {
    font-size: 20px;
}

/* =========================================================================
   SUBMIT BUTTON SPECIFIC
   ========================================================================= */

#submit-btn {
    margin-top: var(--space-4);
}

.checkout-authorization-note {
    text-align: center;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    margin-top: var(--space-3);
    margin-bottom: 0;
}

.checkout-secure-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.checkout-secure-note .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-success, #447228);
}

/* =========================================================================
   ORDER SUMMARY CARD
   Matches pe-site-prototype/css/style.css exactly
   ========================================================================= */

.order-summary-card {
    background: var(--color-bg-card, white);
    border: 1px solid var(--color-border-light);
    border-radius: 16px 0 16px 0; /* Teardrop corners */
    padding: var(--space-5);
}

/* Make summary sticky on desktop but stop before footer */
.checkout-flow-summary-column .order-summary-card {
    position: sticky;
    top: var(--space-6); /* Match form column padding (40px) */
    max-height: calc(100vh - var(--space-6) - var(--space-2));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.order-summary-mixed-currency-warning {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
    background: #FFF3E0;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    color: #E65100;
}

.order-summary-mixed-currency-warning .material-symbols-outlined {
    font-size: 18px;
    flex-shrink: 0;
}

.order-summary-header {
    flex-shrink: 0;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border-light);
}

.order-summary-title {
    font-family: var(--font-family-heading, 'Bitter', serif);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin: 0;
}

.order-summary-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-3) 0;
}

/* Remove border from items in body - footer border-top provides separation */
.order-summary-body .order-summary-item {
    border-bottom: none;
}

.order-summary-item {
    display: block; /* Override flex from style.css - stack vertically */
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.order-summary-item:last-child {
    border-bottom: none;
}

.order-item-header {
    margin-bottom: var(--space-2);
}

/* Simple items within body shouldn't have border */
.order-summary-body .order-summary-item-simple {
    border-bottom: none;
}

.order-item-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-1) 0;
    line-height: var(--line-height-tight, 1.25);
    display: block;
}

.order-item-type {
    margin: 0 0 4px 0;
}

.order-item-meta {
    margin: 0;
    line-height: 1.4;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

/* Order Item Breakdown - Receipt Style */
.order-item-breakdown {
    display: flex;
    flex-direction: column;
    background: var(--color-bg-subtle, #f9fafb);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
}

.order-item-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 2px 0;
    color: var(--color-text-secondary);
}

.order-item-line-addon {
    color: var(--color-text-tertiary);
}

.order-item-line-sum {
    border-top: 1px solid var(--color-border-light);
    margin-top: var(--space-1);
    padding-top: var(--space-1);
}

.order-item-line-discount {
    color: var(--color-success);
    display: flex;
    align-items: center;
    gap: 4px;
}

.order-item-line-discount .material-symbols-outlined {
    font-size: 14px;
}

.order-item-line-total {
    border-top: 1px solid var(--color-border-light);
    margin-top: var(--space-1);
    padding-top: var(--space-1);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
}

/* Order summary footer */
.order-summary-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--color-border-light);
    padding-top: var(--space-4);
}

.order-summary-totals {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.order-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.order-summary-row.order-summary-total {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    padding-top: var(--space-2);
    margin-top: var(--space-2);
    border-top: 1px solid var(--color-border-light);
}

.order-summary-discount {
    color: var(--color-success-dark, var(--color-success, #447228));
}

.order-summary-plan-fee {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.order-summary-fee {
    color: var(--color-text-secondary);
}

/* =========================================================================
   PRODUCT TYPE CHIPS
   ========================================================================= */

.chip {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: 1;
}

.chip-sm {
    padding: 3px var(--space-2);
    font-size: 11px;
}

.chip-sqe {
    background: #EBF0F5;
    color: #2A5488;
}

.chip-bar {
    background: #E8EDF3;
    color: #1a4580;
}

.chip-adaptibar {
    background: #E5EFFF;
    color: #0065FF;
}

.chip-neutral {
    background: var(--color-bg-subtle, #F5F5F5);
    color: var(--color-text-secondary);
}

/* =========================================================================
   PROMO CODE SECTION
   ========================================================================= */

.promo-code-section {
    margin-bottom: var(--space-4);
}

.promo-code-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) 0;
    border: none;
    background: none;
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-link, var(--color-primary));
    text-align: left;
}

.promo-code-toggle .material-symbols-outlined {
    font-size: 18px;
}

.promo-toggle-arrow {
    margin-left: auto;
    transition: transform 0.2s ease;
}

.promo-code-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.promo-input-wrapper {
    display: flex;
    gap: var(--space-2);
}

.promo-input-wrapper input {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
}

.promo-input-wrapper input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(42, 84, 136, 0.1);
}

.promo-input-wrapper input.input-error {
    border-color: var(--color-error, #D44400);
}

.promo-code-error {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--color-error, #D44400);
}

.promo-code-error .material-symbols-outlined {
    font-size: 16px;
}

.promo-code-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3);
    background: var(--color-success-light, #E8F0E4);
    border-radius: var(--radius-md);
}

.promo-applied-text {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-success, #447228);
}

.promo-applied-text .material-symbols-outlined {
    font-size: 18px;
}

.promo-remove-btn {
    border: none;
    background: none;
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.promo-remove-btn:hover {
    color: var(--color-text-primary);
    text-decoration: underline;
}

/* =========================================================================
   DUE TODAY SECTION
   Matches pe-site-prototype - uses dashed border
   ========================================================================= */

.order-summary-due-today {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px dashed var(--color-border-light);
}

.due-today-row {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.due-today-note {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-1);
    margin-bottom: 0;
}

/* =========================================================================
   MOBILE COLLAPSIBLE ORDER SUMMARY
   ========================================================================= */

/* Mobile header - hidden on desktop */
.order-summary-mobile-header {
    display: none;
}

/* Desktop header - visible by default */
.order-summary-desktop-only {
    display: block;
}

/* Simple item styling (single row: title + price) */
.order-summary-item-simple {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.order-summary-item-simple:last-child {
    border-bottom: none;
}

.order-item-simple-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
}

.order-item-simple-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.order-item-simple-info .order-item-title {
    margin: 0;
}

.order-item-meta-inline {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.order-item-live-date {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-tertiary);
}

.order-item-live-date .material-symbols-outlined {
    font-size: 14px;
}

.order-item-simple-price {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    white-space: nowrap;
}

/* =========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================= */

@media (max-width: 900px) {
    .checkout-flow-summary-column {
        order: -1;
    }

    .order-summary-card {
        max-height: none;
        overflow: visible;
        padding: 0;
        /* Keep teardrop when not floating */
        border-radius: 16px 0 16px 0;
        transition: box-shadow 0.2s ease, border-radius 0.2s ease;
    }

    /* When scrolled past, card becomes fixed at top */
    .order-summary-card.is-fixed {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 100;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        /* Remove teardrop when floating - full width bar */
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-top: none;
    }

    /* Placeholder to prevent layout jump when card becomes fixed */
    .order-summary-placeholder {
        display: none;
    }

    .order-summary-placeholder.is-active {
        display: block;
    }

    /* Constrain expanded content height when fixed */
    .order-summary-card.is-fixed .order-summary-content {
        max-height: 50vh;
        overflow-y: auto;
    }

    /* Show mobile collapsible header */
    .order-summary-mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: var(--space-3) var(--space-4);
        background: white;
        border: none;
        cursor: pointer;
        font-family: inherit;
        text-align: left;
    }

    .order-summary-mobile-left {
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

    .order-summary-mobile-left .material-symbols-outlined {
        font-size: 20px;
        color: var(--color-text-secondary);
    }

    .order-summary-mobile-title {
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-primary);
        font-size: var(--font-size-base);
    }

    .order-summary-mobile-count {
        font-size: var(--font-size-sm);
        color: var(--color-text-tertiary);
    }

    .order-summary-mobile-right {
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

    .order-summary-mobile-total {
        font-weight: var(--font-weight-bold);
        font-size: var(--font-size-lg);
        color: var(--color-text-primary);
    }

    .order-summary-chevron {
        font-size: 24px;
        color: var(--color-text-secondary);
        transition: transform 0.2s ease;
    }

    .order-summary-mobile-header[aria-expanded="true"] .order-summary-chevron {
        transform: rotate(180deg);
    }

    /* Hide desktop header on mobile */
    .order-summary-desktop-only {
        display: none;
    }

    /* Collapsible content - hidden by default on mobile */
    .order-summary-content {
        display: none;
        padding: var(--space-3) var(--space-4) var(--space-4);
        border-top: 1px solid var(--color-border-light);
        background: white;
        max-height: 60vh;
        overflow-y: auto;
    }

    .order-summary-content.expanded {
        display: block;
    }

    .order-summary-header {
        padding-bottom: 0;
        border-bottom: none;
    }

    .order-summary-header .order-summary-title {
        margin-bottom: var(--space-4);
    }

    /* Add spacing before first item in body */
    .order-summary-body {
        overflow: visible;
        padding: 0;
        padding-top: var(--space-2);
    }

    .order-summary-footer {
        border-top: 1px solid var(--color-border-light);
        margin-top: var(--space-3);
        padding-top: var(--space-3);
    }
}

@media (max-width: 640px) {
    .checkout-flow-card {
        padding: var(--space-4);
    }

    .order-summary-card {
        padding: var(--space-4);
    }

    .express-buttons {
        flex-direction: column;
    }
}

/* =========================================================================
   UTILITY CLASSES
   ========================================================================= */

.hidden {
    display: none !important;
}

.rotated {
    transform: rotate(180deg);
}

.promo-toggle-arrow {
    transition: transform 0.2s ease;
}

.promo-toggle-arrow.rotated {
    transform: rotate(180deg);
}

/* =========================================================================
   CONFIRMATION PAGE
   ========================================================================= */

.confirmation-content {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-5);
}

.confirmation-header {
    text-align: center;
    margin-bottom: var(--space-6);
}

.confirmation-icon {
    margin-bottom: var(--space-3);
}

.confirmation-icon .material-symbols-outlined {
    font-size: 72px;
    color: var(--color-success, #447228);
}

.confirmation-header h1 {
    font-family: var(--font-family-heading, 'Bitter', serif);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin-bottom: var(--space-2);
}

.confirmation-subtitle {
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
}

/* Confirmation Cards */
.confirmation-card {
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
}

.confirmation-card h2 {
    font-family: var(--font-family-heading, 'Bitter', serif);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin-bottom: var(--space-4);
}

.confirmation-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.confirmation-card-header h2 {
    margin-bottom: 0;
}

.order-id {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-family: monospace;
}

/* Detail Rows */
.confirmation-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.confirmation-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border-light);
}

.confirmation-detail-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.detail-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.detail-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.detail-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.detail-value {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    text-align: right;
    max-width: 60%;
}

/* Totals Section */
.confirmation-totals {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 2px solid var(--color-border-default);
}

.confirmation-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.confirmation-total-row.total-highlight {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

/* Note with Icon */
.confirmation-note {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-4);
    padding: var(--space-3);
    background: var(--color-bg-subtle, #F9FAFB);
    border-radius: var(--radius-md);
}

.confirmation-note .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-primary);
}

/* Guest Checkout Account Notice */
.guest-account-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background: #E8F5E9;
    border: 1px solid #A5D6A7;
    border-radius: var(--radius-md);
    margin-top: var(--space-4);
}

.guest-account-notice .material-symbols-outlined {
    font-size: 24px;
    color: var(--color-success, #447228);
    flex-shrink: 0;
}

.guest-account-notice strong {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--color-text-primary);
}

.guest-account-notice p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.guest-account-notice p strong {
    display: inline;
    color: var(--color-text-primary);
}

/* CTA Buttons */
.confirmation-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-6);
    margin-bottom: var(--space-6);
}

/* Secondary Actions (Download, Print) */
.confirmation-secondary-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* Support Info */
.confirmation-support {
    text-align: center;
    padding: var(--space-4);
    background: var(--color-bg-subtle, #F9FAFB);
    border-radius: var(--radius-lg);
}

.confirmation-support p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

.confirmation-support a {
    color: var(--color-link, #235BA8);
    text-decoration: none;
}

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

/* Print Styles */
@media print {
    .checkout-header,
    .checkout-footer,
    .confirmation-actions,
    .confirmation-support {
        display: none;
    }

    .confirmation-card {
        border: 1px solid #ccc;
        page-break-inside: avoid;
    }
}

/* Responsive - Confirmation */
@media (max-width: 768px) {
    .confirmation-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .detail-value {
        max-width: 50%;
    }
}

/* =========================================================================
   SPECIAL ENROLLMENT BANNERS (Guarantee, Deferral, Alumni)
   ========================================================================= */

.special-enrollment-banner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-5);
}

.special-enrollment-banner .material-symbols-outlined {
    font-size: 32px;
    flex-shrink: 0;
}

.special-enrollment-banner strong {
    display: block;
    font-size: var(--font-size-base);
    margin-bottom: var(--space-1);
}

.special-enrollment-banner p {
    margin: 0;
    font-size: var(--font-size-sm);
    opacity: 0.9;
}

/* Guarantee Banner - Green */
.special-enrollment-banner.guarantee {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.special-enrollment-banner.guarantee .material-symbols-outlined {
    color: #059669;
}

/* Deferral Banner - Blue */
.special-enrollment-banner.deferral {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    color: #075985;
}

.special-enrollment-banner.deferral .material-symbols-outlined {
    color: #0284c7;
}

/* Alumni Banner - Purple */
.special-enrollment-banner.alumni {
    background: #faf5ff;
    border: 1px solid #e9d5ff;
    color: #581c87;
}

.special-enrollment-banner.alumni .material-symbols-outlined {
    color: #7c3aed;
}

/* =========================================================================
   CONFIRMATION PAGE - SPECIAL ENROLLMENT VARIANTS
   ========================================================================= */

/* Guarantee confirmation header */
.confirmation-header.guarantee .confirmation-icon {
    background: #dcfce7;
}

.confirmation-header.guarantee .confirmation-icon .material-symbols-outlined {
    color: #059669;
}

/* Deferral confirmation header */
.confirmation-header.deferral .confirmation-icon {
    background: #dbeafe;
}

.confirmation-header.deferral .confirmation-icon .material-symbols-outlined {
    color: #0284c7;
}

/* Alumni confirmation header */
.confirmation-header.alumni .confirmation-icon {
    background: #f3e8ff;
}

.confirmation-header.alumni .confirmation-icon .material-symbols-outlined {
    color: #7c3aed;
}

/* Free total highlight */
.confirmation-total-row.free span:last-child {
    color: #059669;
    font-weight: var(--font-weight-bold);
}

/* Deferral confirmation banner */
.deferral-confirmation-banner {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}

.deferral-change-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
}

.deferral-date-box {
    text-align: center;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    min-width: 140px;
}

.deferral-date-box.old {
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.deferral-date-box.new {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.deferral-date-box .label {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-1);
}

.deferral-date-box .value {
    display: block;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.deferral-date-box.old .value {
    color: #dc2626;
    text-decoration: line-through;
}

.deferral-date-box.new .value {
    color: #059669;
}

.deferral-change-display .deferral-arrow {
    font-size: 28px;
    color: #0284c7;
}

@media (max-width: 480px) {
    .deferral-change-display {
        flex-direction: column;
    }

    .deferral-change-display .deferral-arrow {
        transform: rotate(90deg);
    }

    .deferral-date-box {
        width: 100%;
    }
}

/* =========================================================================
   CHECKOUT HEADER STYLES
   Added: 2026-02-28
   ========================================================================= */

.checkout-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-subtle, #F9FAFB);
}

.checkout-header {
    background: white;
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--space-3) 0;
}

.checkout-header-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.checkout-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.checkout-logo img {
    height: 28px;
    width: auto;
}

.checkout-secure-badge {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 13px;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

.checkout-secure-badge .material-symbols-outlined {
    font-size: 16px;
    color: var(--color-success, #447228);
}

/* Step Indicator - in header */
.checkout-steps-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
}

.checkout-step {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.checkout-step-indicator {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    background: var(--color-border-light);
    color: var(--color-text-tertiary);
    transition: all 0.2s ease;
}

.checkout-step-label {
    font-size: 13px;
    color: var(--color-text-tertiary);
    font-weight: var(--font-weight-medium);
    transition: color 0.2s ease;
}

/* Step states */
.checkout-step.completed .checkout-step-indicator {
    background: var(--color-success, #447228);
    color: white;
}

.checkout-step.completed .checkout-step-label {
    color: var(--color-text-secondary);
}

.checkout-step.active .checkout-step-indicator {
    background: var(--color-primary, #2A5488);
    color: white;
}

.checkout-step.active .checkout-step-label {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
}

/* Step connector */
.checkout-step-connector {
    width: 32px;
    height: 2px;
    background: var(--color-border-light);
    margin: 0 var(--space-1);
}

.checkout-step-connector.completed {
    background: var(--color-success, #447228);
}

/* Hide step labels on mobile, show numbers only */
@media (max-width: 768px) {
    .checkout-steps-list {
        gap: var(--space-1);
    }

    .checkout-step-label {
        display: none;
    }

    .checkout-step-connector {
        width: 24px;
    }
}

/* Main content area */
.checkout-main {
    flex: 1;
    padding: 0 var(--space-4) var(--space-6);
    overflow: visible; /* Explicitly set to allow sticky to work */
}

/* =========================================================================
   CHECKOUT FOOTER STYLES
   Added: 2026-02-28
   ========================================================================= */

.checkout-footer {
    background: var(--color-surface-secondary, #F9FAFB);
    border-top: 1px solid var(--color-border-light);
    padding: var(--space-6) 0;
    margin-top: auto;
}

.checkout-footer-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 var(--space-5);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.checkout-footer-links {
    display: flex;
    gap: var(--space-4);
}

.checkout-footer-links a {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.checkout-footer-links a:hover {
    color: var(--color-primary);
}

.checkout-footer-copy {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

.checkout-footer-copy p {
    margin: 0;
}

.checkout-footer-trust {
    display: flex;
    gap: var(--space-4);
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.trust-badge .material-symbols-outlined {
    font-size: 16px;
    color: var(--color-success, #447228);
}

@media (max-width: 768px) {
    .checkout-footer-inner {
        flex-direction: column;
        text-align: center;
    }

    .checkout-footer-links {
        order: 1;
    }

    .checkout-footer-trust {
        order: 2;
    }

    .checkout-footer-copy {
        order: 3;
    }
}