/* Import Oswald and Quicksand Fonts */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Quicksand:wght@300;400;500;600;700&display=swap');

/* Design Tokens */
:root {
    /* Brand Colors */
    --color-primary: #0170b9;
    --color-primary-dark: #015a94;
    --color-primary-light: #0190e8;
    --color-primary-gradient: linear-gradient(135deg, #0170b9 0%, #0190e8 100%);

    /* Status Colors */
    --color-success: #4caf50;
    --color-success-dark: #43a047;
    --color-danger: #f44336;
    --color-danger-dark: #e53935;
    --color-warning: #ff9800;

    /* Text Colors */
    --color-text: #3a3a3a;
    --color-text-light: #666;
    --color-text-muted: #999;

    /* Backgrounds */
    --color-bg: #f5f5f5;
    --color-bg-white: #ffffff;
    --color-bg-dark: #2a2a2a;
    --color-bg-card: #f8fafc;

    /* Borders */
    --color-border: #e0e0e0;
    --color-border-light: #e2e8f0;

    /* Fonts */
    --font-heading: 'Oswald', sans-serif;
    --font-body: 'Quicksand', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

    /* Border Radius */
    --radius: 6px;
    --radius-lg: 12px;

    /* Shadows */
    --shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Lucide Icons - Global Defaults */
[data-lucide] {
    width: 1em;
    height: 1em;
    stroke-width: 2;
    vertical-align: middle;
}

.icon-sm [data-lucide],
[data-lucide].icon-sm {
    width: 16px;
    height: 16px;
}

.icon-md [data-lucide],
[data-lucide].icon-md {
    width: 20px;
    height: 20px;
}

.icon-lg [data-lucide],
[data-lucide].icon-lg {
    width: 24px;
    height: 24px;
}

.icon-xl [data-lucide],
[data-lucide].icon-xl {
    width: 32px;
    height: 32px;
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    line-height: 1.6;
    color: #3a3a3a;
    background-color: #F5F5F5;
    font-weight: 500;
}

/* Header and Navigation */
#header-container {
    position: sticky;
    top: 0;
    z-index: 1000;
}

header {
    background-color: #2a2a2a;
    color: white;
    padding: 0.5rem 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 0 2rem;
}
.navbar .logo { flex-shrink: 0; }
.navbar .header-rank-wrapper { order: 10; flex-shrink: 0; }
.navbar .mobile-menu-toggle { order: 11; margin-left: auto; }

.logo {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
}

.logo:hover {
    text-decoration: none;
}

.logo img {
    height: 80px;
    width: auto;
}

.logo-text {
    display: flex;
    flex-direction: column;
    gap: 0;
    line-height: 1;
}

.logo-text h1 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: white;
}

.logo-text p {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: white;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 1.75rem;
    align-items: center;
}

.nav-links li {
    display: flex;
    align-items: center;
}

.nav-links a {
    color: white;
    text-decoration: none;
    transition: color 0.2s;
    font-size: 1.05rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.3px;
    font-family: 'Quicksand', sans-serif;
    padding: 0.5rem 0;
}

.nav-links a:hover {
    color: #00acff;
}

/* Main Content */
main {
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===========================================
   LOGGED-IN CONTAINER - For authenticated pages
   Desktop: 8rem | Tablet: 4rem | Mobile: 1rem
   =========================================== */
.app-container {
    width: 100%;
    padding: 8rem;
    box-sizing: border-box;
}

@media (max-width: 1023px) {
    .app-container {
        padding: 4rem;
    }
}

@media (max-width: 768px) {
    .app-container {
        padding: 1rem;
    }
}

/* ===========================================
   PUBLIC CONTAINER - For marketing/public pages
   Desktop: 2rem | Tablet: 1.5rem | Mobile: 1rem | max-width: 1200px
   =========================================== */
.public-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    box-sizing: border-box;
}

@media (max-width: 1023px) {
    .public-container {
        padding: 1.5rem;
    }
}

@media (max-width: 768px) {
    .public-container {
        padding: 1rem;
    }
}

/* Hero Section */
.hero {
    background: linear-gradient(rgba(1, 112, 185, 0.85), rgba(1, 112, 185, 0.85)), url('../assetsimages/jet-mechanic-jobs.jpg');
    background-size: cover;
    background-position: center;
    color: white;
    padding: 4rem 3rem;
    border-radius: 5px;
    text-align: center;
    margin-bottom: 3rem;
}

.hero h2 {
    font-size: 2.8rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.hero p {
    font-size: 1.3rem;
    margin-bottom: 2rem;
}

.hero-btn {
    background-color: white;
    color: #0170B9;
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    margin-top: 1rem;
}

.hero-btn:hover {
    background-color: #00acff;
    color: white;
}

/* Dashboard */
.dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

/* Cards */
.card {
    background: white;
    padding: 1rem;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border: 1px solid #dddddd;
}

.card h3 {
    color: #3a3a3a;
    font-weight: 600;
    margin-bottom: 1rem;
    border-bottom: 2px solid #0170B9;
    padding-bottom: 0.5rem;
}

.categories {
    list-style: none;
}

.categories li {
    padding: 0.75rem;
    margin: 0.5rem 0;
    background-color: #F5F5F5;
    border-radius: 5px;
    border: 1px solid #dddddd;
    transition: all 0.3s;
}

.categories li:hover {
    background-color: #0170B9;
    border-color: #0170B9;
}

.categories a {
    color: #0170B9;
    text-decoration: none;
    display: block;
    font-weight: 500;
}

.categories li:hover a {
    color: white;
}

/* Forms */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: #3a3a3a;
    font-weight: 600;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #dddddd;
    border-radius: 5px;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: #0170B9;
    box-shadow: 0 0 0 3px rgba(1, 112, 185, 0.1);
}

.form-subtitle {
    color: var(--color-text-light);
    margin-bottom: 1.5rem;
}

.form-group textarea {
    min-height: 150px;
    resize: vertical;
}

/* Buttons */
/* Base button styles */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.2s;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-family: 'Quicksand', sans-serif;
    text-transform: uppercase;
}

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

/* Two-size button system for logged-in filter/header WHITE cards only
   (.sr-header-card / .ra-header-card). Named distinctly so marketing
   .btn-large / .btn-small are unaffected. line-height is set here so an
   <a class="btn"> and a <button class="btn"> render identical height. */
.btn-filter-sm { padding: 0.4rem 0.75rem; font-size: 0.8rem; line-height: 1.4; white-space: nowrap; }
.btn-filter-lg { padding: 0.6rem 1.25rem; font-size: 0.95rem; line-height: 1.4; white-space: nowrap; }

/* Global mobile: EVERY .btn inside a filter box matches the .btn-filter-sm
   size, so all filter-area action buttons are uniform on mobile. Nav tabs
   (.board-nav-btn) and the Refresh / + Add buttons don't use the .btn class,
   so they're naturally excluded. !important beats the per-page filter-button
   rules (some single-class, some 0,2,0). Desktop untouched for now. */
@media (max-width: 768px) {
    .filter-container .btn,
    .filter-header .btn,
    .filter-body .btn,
    .filter-actions .btn,
    .filter-toggle-row .btn,
    .sr-header-card .btn,
    .ra-header-card .btn,
    .profile-filter-header .btn,
    .sr-filter-actions .btn,
    .ra-filter-actions .btn,
    .ar-filter-actions .btn,
    .sv-filter-actions .btn,
    .btn[class*="filter-clear-mobile"] {
        padding: 0.4rem 0.75rem !important;
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
    }
}

/* Primary button - Blue */
.btn-primary {
    background: #0170b9;
    color: white;
}

.btn-primary:hover {
    background: #015a94;
    color: white;
}

/* Secondary button - Gray */
.btn-secondary {
    background: #6c757d;
    color: white;
    border: none;
}

.btn-secondary:hover {
    background: #5a6268;
    color: white;
}

/* Success/Accept button - Green */
.btn-accept,
.btn-success {
    background: #4caf50;
    color: white;
}

.btn-accept:hover,
.btn-success:hover {
    background: #43a047;
    color: white;
}

/* Danger/Reject button - Red */
.btn-reject,
.btn-danger {
    background: #f44336;
    color: white;
}

.btn-reject:hover,
.btn-danger:hover {
    background: #e53935;
    color: white;
}

/* Warning button - Orange */
.btn-warning {
    background: #f0a500;
    color: #fff;
    border: none;
}

.btn-warning:hover {
    background: #d4920a;
    color: #fff;
}

/* Message button - Blue (same as primary) */
.btn-message {
    background: #0170b9;
    color: white;
}

.btn-message:hover {
    background: #015a94;
    color: white;
}

/* View button - Solid blue */
.btn-view {
    background: #0170b9;
    color: white;
}

.btn-view:hover {
    background: #015a94;
    color: white;
}

/* Delete button - Outlined red */
.btn-delete {
    background: white;
    color: #dc3545;
    border: 2px solid #dc3545;
}

.btn-delete:hover {
    background: #ffebee;
    color: #dc3545;
}

/* Withdraw button - Outlined red (similar to delete) */
.btn-withdraw {
    background: white;
    color: #c62828;
    border: 2px solid #c62828;
}

.btn-withdraw:hover {
    background: #ffebee;
    color: #c62828;
}

/* Disabled button state */
.btn-disabled,
.btn:disabled {
    background: #cccccc;
    color: #666666;
    cursor: not-allowed;
    opacity: 0.6;
}

.btn-disabled:hover,
.btn:disabled:hover {
    background: #cccccc;
    color: #666666;
}

/* Footer styles — the canonical footer block lives further down (search for
   "footer {"). The old duplicate block (+ dead .footer-menus/.footer-menu rules,
   a class the footer no longer renders) was removed; it was fully superseded. */

/* Course & Module Pages */
.course-container {
    width: 100%;
    padding: 8rem;
    box-sizing: border-box;
}

@media (max-width: 1023px) {
    .course-container {
        padding: 4rem;
    }
}

.modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.module-card {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.module-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.module-number {
    display: inline-block;
    background: linear-gradient(135deg, #0170B9, #0056a3);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 1rem;
    width: fit-content;
}

.module-card h3 {
    color: #2a2a2a;
    margin: 0.5rem 0 1rem;
    font-size: 1.5rem;
}

.module-card p {
    color: #666;
    flex-grow: 1;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.module-meta {
    display: none;
}

.course-progress-summary {
    background: white;
    border-radius: 12px;
    padding: 2.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.course-progress-summary h2 {
    margin-top: 0;
    margin-bottom: 2rem;
    color: #2a2a2a;
}

.progress-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
}

.stat-item {
    text-align: center;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.stat-value {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    color: #0170B9;
    margin-bottom: 0.5rem;
}

.stat-label {
    display: block;
    color: #666;
    font-size: 0.95rem;
}

/* Module Detail Pages */
.module-container {
    width: 100%;
    padding: 8rem;
    box-sizing: border-box;
}

@media (max-width: 1023px) {
    .module-container {
        padding: 4rem;
    }
}

.module-header {
    margin-bottom: 2rem;
}

.back-link {
    display: inline-flex;
    align-items: center;
    color: #0170B9;
    text-decoration: none;
    margin-bottom: 1.5rem;
    font-weight: 500;
    transition: color 0.3s ease;
}

.back-link:hover {
    color: #0056a3;
}

.module-title-section {
    background: white;
    padding: 1.5rem 2rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.module-title-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.module-badge {
    display: inline-block;
    background: linear-gradient(135deg, #0170B9, #0056a3);
    color: white;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0;
}

.module-title-section h1 {
    margin: 0;
    color: #2a2a2a;
    font-size: 1.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.module-title-section p {
    color: #666;
    font-size: 1.3rem;
    margin: 0 0 1rem 0;
}

.module-video-section {
    margin: 2rem 0;
}

.video-container {
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.module-content-area {
    background: white;
    padding: 3rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
    min-height: 400px;
}

.module-section {
    margin-bottom: 3rem;
}

.module-section:last-child {
    margin-bottom: 0;
}

.module-section h2 {
    color: #2a2a2a;
    font-size: 1.8rem;
    margin: 0 0 1.5rem;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 1rem;
}

.section-content {
    color: #666;
    line-height: 1.6;
    font-family: 'Quicksand', sans-serif !important;
    font-size: 1.15rem;
}

.section-content p,
.section-content li,
.section-content a,
.section-content span {
    font-family: 'Quicksand', sans-serif !important;
}

.highlight-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.highlight-list li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1rem;
    line-height: 1.8;
}

.highlight-list li::before {
    content: '✈';
    position: absolute;
    left: 0;
    color: #000;
    font-size: 1.2rem;
    font-weight: bold;
}

.content-placeholder {
    text-align: center;
    padding: 4rem 2rem;
    color: #999;
}

.content-placeholder p {
    font-size: 1.2rem;
    margin: 0;
}

/* Welcome section navigation */
.welcome-navigation {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.5rem;
    flex-wrap: wrap;
}

.welcome-navigation .btn {
    flex: 1;
    min-width: 150px;
    box-shadow: none;
}

.btn-slim {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

/* Footer navigation */
.module-navigation-footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.module-navigation-footer .btn {
    flex: 1;
    min-width: 200px;
}

.btn-arrow {
    font-weight: 900;
    font-size: 1.2em;
    display: inline-block;
    text-shadow:
        -0.5px -0.5px 0 currentColor,
        0.5px -0.5px 0 currentColor,
        -0.5px 0.5px 0 currentColor,
        0.5px 0.5px 0 currentColor;
}

/* Responsive Course Pages */
@media (max-width: 968px) {
    .modules-grid {
        grid-template-columns: 1fr;
    }

    .progress-stats {
        grid-template-columns: 1fr;
    }

    .module-content-area {
        padding: 2rem 1.5rem;
    }

    .module-navigation-footer {
        flex-direction: column;
    }

    .module-navigation-footer .btn {
        width: 100%;
    }

    .course-container {
        padding: 1rem;
    }

    .module-container {
        padding: 1rem;
    }
}

/* Work Experience Specific Styles */
.experience-item {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    background-color: #F5F5F5;
    border: 1px solid #dddddd;
    border-radius: 5px;
    transition: box-shadow 0.3s;
}

.experience-item:hover {
    box-shadow: 0 2px 8px rgba(1, 112, 185, 0.1);
}

.experience-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.experience-header h4 {
    color: #3a3a3a;
    font-weight: 600;
    font-size: 1.2rem;
}

.category-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background-color: #0170B9;
    color: white;
    border-radius: 3px;
    font-size: 0.875rem;
    font-weight: 500;
}

.experience-item .company {
    color: #3a3a3a;
    margin-bottom: 0.5rem;
}

.experience-item .date-range {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.experience-item .description {
    color: #3a3a3a;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.experience-item .skills {
    color: #3a3a3a;
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.experience-item .actions {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #dddddd;
}

/* Override main padding/margin for login-style pages so login-container controls its own spacing */
body:has(.login-container) main {
    padding: 0;
    margin-top: 0;
}

/* Shared blue-gradient background used behind login/signup cards.
   Fixed-position so the card sits on top at its own width without
   extra wrapper padding pinching it narrower on mobile. */
.login-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(180deg, #0170b9 0%, #0150a0 50%, #2e5bff 100%);
    z-index: -1;
}
body:has(.login-background) .login-container { background: transparent; }
body:has(.login-background) .login-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

/* Login Page Specific Styles */
.login-container {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 2rem;
}

.login-card {
    max-width: 800px;
    width: 100%;
}
/* Consistent label sizing + spacing inside login/signup cards. Shared by
   supervisor-login.html and supervisor-setup.html so the account-claim
   form matches the signup form. */
.login-card .form-group { margin-bottom: 1.25rem; }
.login-card .form-group label {
    font-size: 0.95rem;
    margin-bottom: 0.4rem;
    display: block;
}
.login-card .form-group small {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.85rem;
    color: #666;
}

/* ============================================================
   Apprenticeship conversation thread (shared)
   Used by the in-page messaging modal on both
   /apprenticeship-finder.html (student side) and
   /supervisor-apprentice-requests.html (supervisor side).
   Namespaced as .msg-thread-* to avoid collision with the generic
   .message / .messages-list rules used for status alerts elsewhere.
   ============================================================ */
.msg-thread-list {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: #f8f9fa;
    min-height: 0;
}
.msg-thread-bubble {
    max-width: 70%;
    padding: 1rem 1.25rem;
    border-radius: 18px;
    position: relative;
}
.msg-thread-sent {
    align-self: flex-end;
    background: #0170b9;
    color: white;
    border-bottom-right-radius: 4px;
}
.msg-thread-received {
    align-self: flex-start;
    background: white;
    color: #333;
    border: 1px solid #e0e0e0;
    border-bottom-left-radius: 4px;
}
.msg-thread-sender {
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    opacity: 0.9;
}
.msg-thread-text {
    line-height: 1.5;
    word-wrap: break-word;
    white-space: pre-wrap;
}
.msg-thread-time {
    font-size: 0.75rem;
    margin-top: 0.5rem;
    opacity: 0.7;
}
.msg-thread-empty {
    text-align: center;
    padding: 4rem 2rem;
    color: #999;
}
.msg-thread-empty h3 { margin-bottom: 0.5rem; }

/* Footer under the thread: either the paid student's compose form
   or the free student's upgrade prompt. */
.msg-thread-input-area {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid #d1d5db;
    background: white;
    flex-shrink: 0;
}
.msg-thread-input-form {
    display: flex;
    gap: 1rem;
    align-items: center;
}
.msg-thread-input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 24px;
    font-size: 1rem;
    font-family: inherit;
    resize: none;
    max-height: 120px;
    min-height: 48px;
}
.msg-thread-input:focus {
    outline: none;
    border-color: #0170b9;
    box-shadow: 0 0 0 2px rgba(1,112,185,0.15);
}
.msg-thread-upgrade-bar {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid #d1d5db;
    background: white;
    flex-shrink: 0;
    text-align: center;
}
.msg-thread-upgrade-bar p {
    margin: 0 0 0.75rem 0;
    color: #666;
    font-size: 0.9rem;
}

/* Global compact CTA button used inside conversation thread bubbles.
   Replaces inline anchor links inside message bodies so the user gets a
   tappable button instead of a hard-to-hit underlined word. Inherits
   color, background, and hover from global .btn / .btn-primary; the
   border-radius matches the rest of the platform's buttons (6px), and
   padding/font are tightened so the button sits cleanly under message
   text without dominating the bubble. Multiple CTAs in one bubble wrap
   naturally with a small gap. */
.msg-thread-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
}
.msg-thread-cta-btn {
    padding: 4px 10px;
    font-size: 0.75rem;
    border-radius: 6px;
    box-shadow: none;
    line-height: 1.3;
    text-decoration: none;
}
/* Sent (blue) bubbles flip the CTA to white-on-blue-text so the button
   doesn't disappear into the bubble background. Hover fills back to a
   slightly translucent white for feedback. */
.msg-thread-sent .msg-thread-cta-btn,
.msg-thread-sent .msg-thread-cta-btn:link,
.msg-thread-sent .msg-thread-cta-btn:visited {
    background: #ffffff;
    color: #0170b9;
    border: 1px solid #ffffff;
}
.msg-thread-sent .msg-thread-cta-btn:hover {
    background: rgba(255, 255, 255, 0.9);
    color: #0170b9;
}

/* Legacy alias — same compact treatment used on the original
   "View Apprentice's Profile" pill in the supervisor thread. Kept for
   any callers that still reference it; new code uses .msg-thread-cta-btn. */
.msg-thread-view-profile-btn {
    margin-top: 0.5rem;
    padding: 4px 10px;
    font-size: 0.75rem;
    border-radius: 6px;
    box-shadow: none;
    line-height: 1.3;
}

/* Pill toggle used inside login/signup forms (e.g. supervisor-login's
   "Show my profile to apprentices?" and supervisor-setup's
   "Listing Type"). Moved here so both pages render it identically. */
.finder-toggle {
    display: inline-flex;
    width: fit-content;
    background: #d5d7db;
    border: none;
    border-radius: 20px;
    padding: 3px;
}
.finder-pill {
    border: none;
    background: transparent;
    padding: 8px 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    border-radius: 17px;
    transition: all 0.2s ease;
    white-space: nowrap;
    user-select: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.finder-pill:hover { color: #222; }
.finder-pill.active {
    background: #0b1d3a;
    color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.login-options {
    margin-top: 1.5rem;
    text-align: center;
}

.login-options a {
    color: #0170B9;
    text-decoration: none;
}

.login-options a:hover {
    color: #00acff;
    text-decoration: underline;
}

.info-card ul {
    margin-left: 1.5rem;
    margin-top: 1rem;
}

.info-card li {
    margin-bottom: 0.5rem;
    color: #3a3a3a;
}

/* Profile Page Specific Styles */
.content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Links */
a {
    color: #0170B9;
    transition: color 0.3s;
}

a:hover {
    color: #00acff;
}

/* Landing Page Specific Styles */
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
}

.section-title {
    text-align: center;
    font-size: 2.2rem;
    color: #3a3a3a;
    margin-bottom: 2rem;
}

.programs {
    margin-bottom: 4rem;
}

.program-card {
    display: flex;
    flex-direction: column;
}

.program-features {
    list-style: none;
    margin: 1.5rem 0;
    flex-grow: 1;
}

.program-features li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: #3a3a3a;
}

.program-features li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #0170B9;
    font-weight: bold;
}

.program-card .btn {
    margin-top: auto;
    text-align: center;
    text-decoration: none;
}

.cta-section {
    background: linear-gradient(135deg, #0170B9 0%, #00acff 100%);
    color: white;
    padding: 4rem 2rem;
    border-radius: 5px;
    text-align: center;
    margin-bottom: 4rem;
}

.cta-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.cta-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

.btn-large {
    padding: 1.2rem 3rem;
    font-size: 1.2rem;
    background-color: white;
    color: #0170B9;
}

.btn-large:hover {
    background-color: #2a2a2a;
    color: white;
}

/* Benefits Table */
.benefits-table-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 5rem 2rem;
    margin-bottom: 4rem;
}

.benefits-table {
    max-width: 800px;
    margin: 0 auto 2rem;
    background: white;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.benefit-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 2rem;
    border-bottom: 1px solid #dddddd;
}

.benefit-row:last-child {
    border-bottom: none;
}

.benefit-row:nth-child(even) {
    background-color: #F5F5F5;
}

.benefit-name {
    font-size: 1.1rem;
    color: #3a3a3a;
    font-weight: 500;
}

.benefit-access {
    color: #0170B9;
    font-weight: 600;
    font-size: 1.1rem;
}

.benefits-cta {
    text-align: center;
    margin-top: 2rem;
}

.price-highlight {
    font-size: 1.5rem;
    color: #3a3a3a;
    margin-bottom: 1.5rem;
}

.price-highlight strong {
    color: #0170B9;
    font-size: 1.8rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero h2 {
        font-size: 1.8rem;
    }

    .hero p {
        font-size: 1.1rem;
    }

    .section-title {
        font-size: 1.8rem;
    }

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

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

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

    .login-container {
        grid-template-columns: 1fr;
        padding: 1rem;
    }

    .legal-page {
        padding: 1.5rem;
    }

    .legal-page h1 {
        font-size: 1.75rem;
    }

    .legal-page h2 {
        font-size: 1.4rem;
    }

    .experience-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .cta-content h2 {
        font-size: 1.8rem;
    }

    .cta-content p {
        font-size: 1rem;
    }

    .benefit-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 1rem 1.5rem;
    }

    .benefit-name {
        font-size: 1rem;
    }

    .benefit-access {
        font-size: 1rem;
    }

    .price-highlight {
        font-size: 1.2rem;
    }

    .price-highlight strong {
        font-size: 1.5rem;
    }
}


/* Checkout Page Styles */
.pricing-details {
    margin: 2rem 0;
}

.price-tag {
    text-align: center;
    padding: 2rem;
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    color: white;
    border-radius: 10px;
    margin-bottom: 2rem;
}

.price-tag .currency {
    font-size: 2rem;
    vertical-align: super;
}

.price-tag .amount {
    font-size: 4rem;
    font-weight: bold;
}

.price-tag .period {
    font-size: 1.5rem;
    opacity: 0.9;
}

.membership-features {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.membership-features h3 {
    color: #FF6B35;
    margin-bottom: 1rem;
}

.membership-features ul {
    list-style: none;
    padding: 0;
}

.membership-features li {
    padding: 0.5rem 0;
    color: #3a3a3a;
    font-size: 1rem;
}

.billing-info {
    padding: 1rem;
    background-color: #e9ecef;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.billing-info p {
    margin: 0.5rem 0;
}

.secure-checkout {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #dee2e6;
}

.secure-checkout p {
    margin: 0.5rem 0;
    color: #6c757d;
}

.small-text {
    font-size: 0.875rem;
}

.testimonial {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-left: 4px solid #FF6B35;
    margin: 1.5rem 0;
    font-style: italic;
}

.faq-item {
    margin: 1rem 0;
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.faq-item p {
    margin: 0.5rem 0;
}

.faq-item strong {
    color: #FF6B35;
}

/* Subscription CTA on Signup Page */
.subscription-cta {
    margin-top: 2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    color: white;
    border-radius: 8px;
    text-align: center;
}

.subscription-cta h3 {
    color: white;
    margin-bottom: 0.5rem;
}

.subscription-cta p {
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

/* Payment Section on Signup Page */
.payment-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid #e0e0e0;
}

.payment-section h3 {
    color: #FF6B35;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.payment-note {
    color: #5a5a5a;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.stripe-card-element {
    padding: 12px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    background-color: white;
    transition: border-color 0.3s;
}

.stripe-card-element:hover {
    border-color: #0170B9;
}

.stripe-card-element.StripeElement--focus {
    border-color: #0170B9;
    box-shadow: 0 0 0 2px rgba(1, 112, 185, 0.1);
}

.stripe-card-element.StripeElement--invalid {
    border-color: #fa755a;
}

.card-errors {
    color: #fa755a;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    min-height: 20px;
}

.billing-address {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e0e0e0;
}

.billing-address h4 {
    color: #3a3a3a;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.form-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 0;
}

.form-group.half-width {
    flex: 1;
}

/* Pricing Highlight on Signup Page */
.pricing-highlight {
    text-align: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    color: white;
    border-radius: 10px;
    margin-bottom: 1.5rem;
}

.price-badge {
    margin-bottom: 0.5rem;
}

.price-badge .currency {
    font-size: 1.5rem;
    vertical-align: super;
}

.price-badge .amount {
    font-size: 3rem;
    font-weight: bold;
}

.price-badge .period {
    font-size: 1.2rem;
    opacity: 0.9;
}

.cancel-note {
    font-size: 0.9rem;
    margin: 0;
    opacity: 0.95;
}

.pricing-features {
    margin-top: 2rem;
}

.feature-highlight {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e0e0e0;
}

.feature-highlight:last-child {
    border-bottom: none;
}

.feature-highlight h4 {
    color: #FF6B35;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.feature-highlight p {
    margin: 0;
    color: #5a5a5a;
}

/* Legal Pages Styling */
.legal-page {
    padding: 2.5rem;
}

.legal-page h1 {
    color: #2a2a2a;
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.legal-page h2 {
    color: #3a3a3a;
    font-size: 1.8rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding-top: 1rem;
    border-top: 2px solid #e0e0e0;
}

.legal-page h3 {
    color: #4a4a4a;
    font-size: 1.3rem;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    border-bottom: none;
    padding-bottom: 0;
}

.legal-page h4 {
    color: #5a5a5a;
    font-size: 1.1rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.legal-page p {
    margin-bottom: 1rem;
    line-height: 1.8;
    color: #3a3a3a;
}

.legal-page ul, .legal-page ol {
    margin-left: 2rem;
    margin-bottom: 1rem;
}

.legal-page li {
    margin-bottom: 0.5rem;
    line-height: 1.8;
}

.legal-page strong {
    color: #2a2a3a;
    font-weight: 600;
}

.last-updated {
    color: #777;
    font-style: italic;
    font-size: 0.95rem;
    margin-bottom: 2rem;
}

.legal-footer {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 3px solid #FF6B35;
    background-color: #fff9f5;
    padding: 1.5rem;
    border-radius: 8px;
}

.legal-footer p {
    margin: 0;
    font-size: 1rem;
}

/* Form Consent Statement */
.form-consent {
    font-size: 0.85rem;
    color: #3a3a3a;
    text-align: center;
    margin-top: 0.75rem;
}

.form-consent a {
    color: #0170B9;
    text-decoration: underline;
}

/* SMS consent — required checkbox above the submit button.
   Font size matches .form-consent (0.85rem) so both consent texts read identically. */
.sms-consent-group {
    margin: 1rem 0;
}

/* Scoped to .form-group.sms-consent-group .sms-consent-label (specificity 0,3,0)
   so it beats .login-card .form-group label (0,2,1) and .form-group label (0,1,1),
   which otherwise force the SMS consent text to 0.95rem / 600-weight / display:block
   and break the flex row. This keeps the SMS line matching the regular-weight
   ".form-consent" (By submitting) text on every form. */
.form-group.sms-consent-group .sms-consent-label {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    font-size: 0.85rem;
    font-weight: 400;
    color: #3a3a3a;
    text-align: left;
    line-height: 1.5;
    margin-bottom: 0;
    cursor: pointer;
}

.form-group.sms-consent-group .sms-consent-label a {
    color: #0170B9;
    text-decoration: underline;
    font-weight: 400;
}

.form-group.sms-consent-group .sms-consent-label input[type="checkbox"] {
    margin-top: 0.15rem;
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    cursor: pointer;
}

/* Consent Checkbox Styling */
.consent-group {
    margin: 1.5rem 0;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #3a3a3a;
}

.checkbox-label input[type="checkbox"] {
    cursor: pointer;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    position: relative;
    top: 4px;
    left: -2px;
}

.checkbox-label a {
    color: #0170B9;
    text-decoration: underline;
    font-weight: 500;
}

.checkbox-label a:hover {
    color: #00acff;
}

/* ================================
   Dashboard Styles
   ================================ */

/* Dashboard page background - applied to body */
body.dashboard-page {
    background: linear-gradient(rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.65)), url('../assetsimages/Aircraft%20Mechanic%20Training-min.jpeg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 100vh;
}

body.dashboard-page main {
    margin: 0;
    padding: 0;
    max-width: none;
}

.dashboard-container {
    width: 100%;
    padding: 8rem;
    box-sizing: border-box;
    min-height: calc(100vh - 80px);
}

/* Global vertical rhythm for logged-in page sections: the gap below the filter
   section matches the gap above it (page-info .page-info margin-bottom: 2rem),
   so the filter card has equal spacing top and bottom. Single source of truth —
   pages must NOT re-declare these margins in their inline <style>. */
.filter-container { margin-bottom: 2rem; }
.records-panel-body { margin-top: 2rem; }
/* Mobile: halve the section spacing to 1rem (matches the halved page-info gaps
   in page-info.js so all three gaps stay equal on mobile). */
@media (max-width: 768px) {
    .filter-container { margin-bottom: 1rem; }
    .records-panel-body { margin-top: 1rem; }
}

@media (max-width: 1023px) {
    .dashboard-container {
        padding: 4rem;
    }
}

.dashboard-header {
    margin-bottom: 2rem;
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.dashboard-header-left {
    flex: 0 0 auto;
}

.dashboard-header h1 {
    font-size: 2.5rem;
    color: #2a2a2a;
    margin-bottom: 0.5rem;
}

.dashboard-header #user-greeting {
    font-size: 1.25rem;
    color: #666;
}

.dashboard-messages {
    flex: 1;
    min-width: 0;
    max-width: 600px;
}

.revolving-messages {
    position: relative;
    min-height: 80px;
    display: flex;
    align-items: center;
}

.message-item {
    position: absolute;
    width: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    font-size: 1rem;
    color: #0170B9;
    font-weight: 500;
    line-height: 1.5;
    padding: 0.5rem;
    background: #f0f8ff;
    border-radius: 4px;
}

.message-item.active {
    opacity: 1;
    position: relative;
}

@media (max-width: 968px) {
    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-messages {
        width: 100%;
        max-width: none;
    }
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
}

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

.dashboard-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-align: center;
    font-family: 'Quicksand', sans-serif;
}

.dashboard-full-width {
    grid-column: 1 / -1;
}

.card-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f0f0f0;
    gap: 1rem;
}

.card-header h2 {
    font-size: 1.5rem;
    color: #2a2a2a;
    margin: 0;
}

.card-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-icon [data-lucide] {
    width: 100%;
    height: 100%;
}

/* Training Hours Stats */
.stats-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

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

.stat-value {
    display: block;
    font-size: 3.5rem;
    font-weight: bold;
    color: #0170B9;
    line-height: 1;
}

.stat-label {
    display: block;
    font-size: 1rem;
    color: #666;
    margin-top: 0.5rem;
    font-family: 'Quicksand', sans-serif;
}

.stat-progress {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.progress-bar {
    width: 100%;
    height: 12px;
    background-color: #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #0170B9 0%, #F7931E 100%);
    border-radius: 6px;
    transition: width 0.5s ease;
}

.progress-label {
    font-size: 0.9rem;
    color: #666;
}

/* Experiences List */
.experiences-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.experience-item {
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #0170B9;
}

.experience-title {
    font-weight: 600;
    color: #2a2a2a;
    margin-bottom: 0.5rem;
}

.experience-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: #666;
}

.experience-hours {
    font-weight: 600;
    color: #0170B9;
}

/* Account Status */
.account-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.status-item {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem;
    background-color: #f8f9fa;
    border-radius: 6px;
}

.status-label {
    font-weight: 600;
    color: #666;
}

.status-value {
    color: #2a2a2a;
}

.status-value.sub-status-active {
    color: #28a745;
    font-weight: 600;
}

.status-value.sub-status-trialing {
    color: #0170B9;
    font-weight: 600;
}

.status-value.sub-status-canceled,
.status-value.sub-status-past_due {
    color: #dc3545;
    font-weight: 600;
}

.status-value.sub-status-canceling,
.status-value.sub-status-downgrading {
    color: #f59e0b;
    font-weight: 600;
}

/* Quick Actions */
.quick-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
    margin-bottom: 1.5rem;
}

.action-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background-color: transparent;
    border-top: 1px solid #e9ecef;
    text-decoration: none;
    color: #2a2a2a;
    transition: background 0.2s ease;
}

.account-actions .action-link:first-child,
.account-actions-grid .action-link:first-child {
    border-top: none;
}

.action-link:hover {
    background-color: #f0f4f8;
}

.action-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.action-icon [data-lucide] {
    width: 100%;
    height: 100%;
}

/* Recent Activity */
.activity-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.activity-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.activity-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.activity-icon [data-lucide] {
    width: 100%;
    height: 100%;
}

.activity-content {
    flex: 1;
}

.activity-title {
    font-weight: 600;
    color: #2a2a2a;
    margin-bottom: 0.25rem;
}

.activity-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: #666;
}

.activity-date {
    color: #999;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 2rem;
    color: #999;
    font-style: italic;
}

/* Toast Notifications */
.toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    padding: 1rem 1.5rem;
    background-color: #2a2a2a;
    color: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 1000;
}

.toast.show {
    transform: translateY(0);
    opacity: 1;
}

.toast-error {
    background-color: #dc3545;
}

.toast-success {
    background-color: #28a745;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .dashboard-container {
        padding: 1rem;
    }

    .dashboard-header h1 {
        font-size: 2rem;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .stat-value {
        font-size: 2.5rem;
    }
}

/* Account Management Styles - Unified Horizontal Layout */
.account-page-container {
    width: 100%;
    padding: 8rem;
    box-sizing: border-box;
}

@media (max-width: 1023px) {
    .account-page-container {
        padding: 4rem;
    }
}

.page-header {
    margin-bottom: 2rem;
}

.page-header h1 {
    font-size: 2.5rem;
    color: #2a2a2a;
    margin-bottom: 0.5rem;
}

.page-header p {
    color: #666;
    font-size: 1.1rem;
}

/* Single Large White Container with Horizontal Sections */
.account-unified-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.25rem;
    align-items: start;
}

/* Full-width container for quiz results */
.account-quiz-container {
    margin-bottom: 1.25rem;
}

.account-quiz-container .account-section {
    overflow-x: auto;
}

/* Section separators are invisible — grid handles spacing */
.section-separator {
    display: none !important;
}

/* Individual Account Sections */
.account-section {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 1.25rem 1.5rem;
}

/* Section Headers */
.section-header {
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f0f0f0;
}

.section-header h2 {
    font-size: 1.1rem;
    color: #2a2a2a;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.section-icon [data-lucide] {
    width: 100%;
    height: 100%;
}

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

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

.form-group label {
    font-weight: 600;
    color: #2a2a2a;
    font-size: 0.82rem;
}

.form-group input,
.form-group select {
    padding: 0.4rem 0.6rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.88rem;
    font-family: inherit;
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: #0170b9;
    box-shadow: 0 0 0 2px rgba(1, 112, 185, 0.1);
}

.form-actions {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    margin-top: 0.25rem;
    justify-content: flex-start;
    align-items: center;
}

.form-actions .btn {
    width: auto;
}

/* Subscription Info */
.subscription-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.88rem;
}

.subscription-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.subscription-actions .btn {
    width: auto;
}

/* Account Actions */
.account-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.account-actions-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.action-link.danger {
    color: #dc3545;
}

.action-link.danger:hover {
    background-color: #dc354510;
}

/* Danger Zone - Separate Container */
.danger-zone-container {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    border: 2px solid #dc3545;
    background-color: #fff5f5;
}

.danger-warning {
    color: #dc3545;
    margin-bottom: 1rem;
    font-weight: 500;
}

.btn-danger {
    background-color: #dc3545;
    color: white;
    border: none;
}

.btn-danger:hover {
    background-color: #c82333;
}

/* Message Styles */
.message {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-top: 1rem;
    font-weight: 500;
    font-size: 0.9rem;
}

.message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.message.warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

.message.info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

/* Status Colors */
.status-active {
    color: #28a745;
    font-weight: 600;
}

.status-canceling {
    color: #ffc107;
    font-weight: 600;
}

.status-canceled {
    color: #dc3545;
    font-weight: 600;
}

.status-past_due {
    color: #dc3545;
    font-weight: 600;
}

/* Toast Notifications */
.toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-weight: 500;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 1000;
    max-width: 400px;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast-success {
    background-color: #28a745;
    color: white;
}

.toast-error {
    background-color: #dc3545;
    color: white;
}

.toast-info {
    background-color: #17a2b8;
    color: white;
}

/* Mobile Responsive for Account Pages */
@media (max-width: 1100px) {
    .account-unified-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .toast {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
    }
}

/* Dynamic Header Navigation Styles */
.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    transition: transform 0.3s ease, color 0.3s ease;
}

.nav-link:hover {
    transform: translateY(-2px);
    color: #0170B9;
}

.btn-get-started {
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    color: white !important;
    padding: 0.6rem 1.2rem !important;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-get-started:hover {
    background: linear-gradient(135deg, #d97706 0%, #ea580c 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);
    color: white !important;
}

/* User Dropdown Menu */
.nav-dropdown {
    position: relative;
}

.dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.user-avatar {
    font-size: 1.5rem;
}

.user-name {
    font-weight: 600;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    background: #333;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    min-width: 240px;
    list-style: none;
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
}

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

.dropdown-arrow {
    font-size: 1rem;
    margin-left: 0.25rem;
    transition: transform 0.3s ease;
}

.nav-dropdown:hover .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-menu li {
    margin: 0;
}

.dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    color: white;
    text-decoration: none;
    transition: all 0.2s ease;
    border-radius: 6px;
    white-space: nowrap;
    font-size: 0.95rem;
}

.dropdown-menu a:hover {
    background: #444;
    color: #00acff;
}

/* Mobile Get Started Button - hidden on desktop */
.mobile-get-started {
    display: none;
}

/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 1001;
}

.hamburger {
    display: block;
    width: 25px;
    height: 2px;
    background-color: white;
    position: relative;
    transition: background-color 0.3s ease;
}

.hamburger::before,
.hamburger::after {
    content: '';
    display: block;
    width: 25px;
    height: 2px;
    background-color: white;
    position: absolute;
    transition: all 0.3s ease;
}

.hamburger::before {
    top: -8px;
}

.hamburger::after {
    top: 8px;
}

.mobile-menu-toggle.active .hamburger {
    background-color: transparent;
}

.mobile-menu-toggle.active .hamburger::before {
    top: 0;
    transform: rotate(45deg);
}

.mobile-menu-toggle.active .hamburger::after {
    top: 0;
    transform: rotate(-45deg);
}

/* Mobile Navigation */
@media (max-width: 968px) {
    header {
        position: sticky;
        top: 0;
        z-index: 1000;
        padding: 0.25rem 0;
    }

    /* Mobile header layout. The desktop gap:2rem + non-shrinking rank badge
       made the row (logo + badge + hamburger) wider than the screen, which
       overflowed and CLIPPED the logo (left) and hamburger (right) off the
       viewport. Fix: constrain the navbar to the viewport, drop the huge gap,
       inset with padding, and let the rank badge shrink so the row always fits. */
    .navbar {
        max-width: 100%;
        padding: 0 0.85rem;
        gap: 0.5rem;
        box-sizing: border-box;
    }
    .navbar .logo { flex-shrink: 0; }

    .logo img {
        height: 50px;
    }

    /* Mobile rank badge — REAL shrink (smaller padding/font), not transform:scale.
       transform:scale visually shrank the badge but kept its full layout width,
       which (with the desktop gap) overflowed the row and clipped the logo +
       hamburger off-screen. Real sizing lets logo + badge + hamburger fit. */
    .header-rank-wrapper {
        order: 5 !important;
        /* auto on BOTH sides splits the free space evenly, centering the badge
           between the logo and the hamburger with equal left/right gaps. */
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 4px !important;
        margin-bottom: 4px !important;
        flex-shrink: 1;
        min-width: 0;
    }
    /* Tighten the badge internals so the whole row fits a ~360px viewport. */
    .header-rank-wrapper > div:not([style*="width:1px"]) { padding: 0.15rem 0.5rem !important; }
    .header-rank-wrapper [style*="font-size:0.9rem"] { font-size: 0.8rem !important; padding: 0.1rem 0.6rem !important; }
    .header-rank-wrapper [style*="font-size:0.75rem"] { font-size: 0.7rem !important; }
    .header-rank-wrapper [style*="font-size:0.6rem"] { font-size: 0.55rem !important; }
    /* Clear the desktop margin-left:auto so the badge's two auto margins fully
       control centering (equal gap each side). */
    .navbar .mobile-menu-toggle { order: 6 !important; flex-shrink: 0; margin-left: 0 !important; }

    /* Mobile Get Started button between logo and hamburger */
    .mobile-get-started {
        display: inline-block;
        background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 8px;
        font-size: 0.8rem;
        font-weight: 600;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-family: 'Oswald', sans-serif;
        margin-left: auto;
        margin-right: 0.75rem;
        white-space: nowrap;
    }

    .mobile-get-started:hover {
        background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
        color: white;
        text-decoration: none;
    }

    .mobile-menu-toggle {
        display: block;
    }

    /* ─── Mobile nav menu container ─── */
    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        background-color: #2a2a2a;
        flex-direction: column;
        padding: 0;
        gap: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        z-index: 999;
    }

    .nav-links.mobile-active {
        max-height: 100vh;
        padding: 0;
        overflow-y: auto;
        border-left: 3px solid #0170b9;
    }

    .nav-links li {
        margin: 0;
        width: 100%;
    }

    .nav-links a {
        padding: 0;
    }

    /* ─── Top-level menu items ─── */
    .nav-link {
        width: 100%;
        display: flex;
        padding: 1rem 1.5rem !important;
        line-height: 1.4;
        justify-content: flex-start;
        align-items: center;
        text-align: left;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        transition: color 0.2s;
    }

    .nav-links > li:last-child > .nav-link,
    .nav-links > li:last-child > .nav-dropdown > .nav-link {
        border-bottom: none;
    }

    /* Hide the Get Started button in the dropdown menu on mobile */
    .btn-get-started {
        display: none !important;
    }

    /* ─── Dropdown containers ─── */
    .nav-dropdown {
        position: static;
        flex-direction: column;
        align-items: stretch;
    }

    .nav-dropdown:hover .dropdown-menu {
        opacity: 0;
        visibility: hidden;
        max-height: 0;
    }

    .dropdown-menu {
        position: static;
        box-shadow: none;
        background: rgba(0, 0, 0, 0.2);
        margin: 0;
        padding: 0;
        opacity: 0;
        visibility: hidden;
        transform: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease, opacity 0.2s ease;
        border-radius: 0;
        min-width: 0;
        width: 100%;
    }

    .dropdown-menu a {
        border-radius: 0;
    }

    .nav-dropdown.active .dropdown-menu {
        opacity: 1;
        visibility: visible;
        max-height: 500px;
        padding: 0.4rem 0;
    }

    .nav-dropdown.active .dropdown-arrow {
        transform: rotate(180deg);
    }

    .dropdown-menu li {
        width: 100%;
    }

    /* ─── Sub-menu items ─── */
    .dropdown-menu a {
        color: rgba(255, 255, 255, 0.85);
        padding: 1rem 1.5rem 1rem 2rem;
        font-size: 0.9rem;
        line-height: 1.4;
        text-align: left;
        display: flex;
        align-items: center;
        transition: background 0.15s, color 0.15s;
    }

    .dropdown-menu a:hover {
        background: rgba(255, 255, 255, 0.06);
        color: #00acff;
    }
}

/* Tablet Navigation */
@media (max-width: 1024px) and (min-width: 969px) {
    .nav-links {
        gap: 0.5rem;
    }

    .nav-link {
        padding: 0.5rem 0.6rem;
        font-size: 0.9rem;
    }

    .user-name {
        display: none;
    }
}


/* Message Admin Styles */
.messages-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.message-admin-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #f9f9f9;
    border-left: 4px solid #0170B9;
    border-radius: 4px;
    gap: 1rem;
}

.message-admin-content {
    flex: 1;
}

.message-admin-content p {
    margin: 0 0 0.5rem 0;
    color: #333;
    font-weight: 500;
}

.message-admin-content small {
    color: #666;
}

.message-admin-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.btn-small {
    padding: 0.4rem 0.8rem;
    font-size: 0.875rem;
}

.btn-danger {
    background-color: #dc3545;
    color: white;
}

.btn-danger:hover {
    background-color: #c82333;
}

/* ==================== QUIZ SYSTEM STYLES ==================== */

/* Quiz Container */
.quiz-container {
    max-width: 900px;
    margin: 0 auto 3rem auto;
    padding: 2rem;
    background-color: white;
    min-height: calc(100vh - 200px);
}

.quiz-inner {
    margin: 0 0 3rem 0;
    padding: 0;
}

/* Quiz Header */
.quiz-header {
    margin-bottom: 2rem;
}

.quiz-title-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
}

.quiz-title-section h1 {
    color: #2a2a2a;
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: none;
}

.quiz-title-section p {
    color: #666;
    font-size: 1rem;
    margin-bottom: 1rem;
}

/* Quiz Header Actions */
.quiz-header-actions {
    width: 100%;
}

/* Quiz Info */
.quiz-info {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    padding: 0.75rem 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    width: 100%;
}

.quiz-info-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
}

.quiz-info-item strong {
    color: #2a2a2a;
    font-weight: 600;
    font-size: 0.88rem;
}

.quiz-info-item span {
    color: #444;
    font-size: 0.88rem;
}

/* Quiz Start Section */
.quiz-start-section {
    margin-top: 1.25rem;
    text-align: center;
}

.quiz-start-section .btn {
    font-size: 1rem;
    padding: 0.75rem 2.5rem;
}

/* Progress Bar */
.quiz-progress-container {
    margin: 2rem 0;
}

.quiz-progress-bar {
    width: 100%;
    height: 8px;
    background-color: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.quiz-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #0170B9, #0056a3);
    transition: width 0.3s ease;
}

.quiz-progress-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
    color: #666;
}

/* Quiz Content */
.quiz-content-area {
    margin-top: 2rem;
}

/* Quiz Questions */
.quiz-question {
    padding: 2rem 0;
    margin-bottom: 0;
    border-bottom: 1px solid #e0e0e0;
}

.quiz-question:last-child {
    border-bottom: none;
}

.question-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f0f0f0;
}

.question-number {
    font-weight: 600;
    color: #0170B9;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.question-points {
    font-size: 0.9rem;
    color: #c2410c;
    background-color: #fff7ed;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    border: 1px solid #fed7aa;
}

/* Quiz nav / results buttons — equal-width, inline, wrap only when the viewport
   can't fit them. Replaces the per-button inline styles + the nested group. */
.quiz-nav-btn {
    flex: 1 1 11rem;
    max-width: 15rem;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    background: #0170b9;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
}
.quiz-nav-btn:hover { background: #015a91; }
.quiz-nav-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.question-text {
    font-size: 1.2rem;
    font-weight: 600;
    color: #2a2a2a;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

/* Quiz Answers */
.question-answers {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.quiz-answer {
    position: relative;
}

.quiz-answer label {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.quiz-answer label:hover {
    border-color: #0170B9;
    background-color: #f9f9f9;
}

.quiz-answer input[type="radio"],
.quiz-answer input[type="checkbox"] {
    margin-top: 0.25rem;
    width: 20px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
}

.quiz-answer input[type="radio"]:checked + .answer-text,
.quiz-answer input[type="checkbox"]:checked + .answer-text {
    font-weight: 600;
}

.quiz-answer label:has(input:checked) {
    border-color: #0170B9;
    background-color: #f0f8ff;
}

.answer-text {
    flex: 1;
    font-size: 1.05rem;
    color: #3a3a3a;
    line-height: 1.5;
}

/* Text Input for Fill in the Blank */
.quiz-text-input {
    width: 100%;
    padding: 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-size: 1.05rem;
    font-family: inherit;
    transition: border-color 0.2s;
}

.quiz-text-input:focus {
    outline: none;
    border-color: #0170B9;
}

/* Quiz Submit Section */
.quiz-submit-section {
    margin-top: 3rem;
    text-align: center;
    padding-top: 2rem;
    border-top: 2px solid #f0f0f0;
}

.quiz-submit-section .btn {
    font-size: 1.1rem;
    padding: 1rem 3rem;
}

.quiz-submit-section .btn-primary {
    background: #0170b9;
    color: white;
}

.quiz-submit-section .btn-primary:hover {
    background: #015a94;
    color: white;
}

/* Results Section */
.quiz-results-section {
    margin-top: 2rem;
}

.results-card {
    padding: 1rem 0;
}

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

.results-header h2 {
    font-size: 2rem;
    color: #2a2a2a;
    margin-bottom: 1rem;
}

.results-status {
    margin: 1rem 0;
}

/* Canonical .status-badge lives further down (one definition, table-pill size:
   0.25rem 0.75rem / 0.85rem / radius 12px). The older large duplicate that was
   here (0.5rem 1.5rem / 1.1rem) was dead — overridden by that later block — and
   its unscoped .status-pass/.status-fail were superseded by the scoped
   .status-badge.status-pass/.status-fail rules. Removed during table globalize. */

/* Score Display */
.results-score {
    text-align: center;
    margin: 2rem 0;
}

.score-circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin: 0 auto 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 8px solid #e0e0e0;
    position: relative;
}

.score-circle.score-pass {
    border-color: #28a745;
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
}

.score-circle.score-fail {
    border-color: #dc3545;
    background: linear-gradient(135deg, #ffebee, #ffcdd2);
}

.score-percentage {
    font-size: 3rem;
    font-weight: 700;
    color: #2a2a2a;
}

.score-details {
    margin-top: 1rem;
}

.score-details p {
    margin: 0.5rem 0;
    font-size: 1.1rem;
    color: #3a3a3a;
}

/* Results Review */
.results-review {
    margin-top: 3rem;
}

.results-review h3 {
    font-size: 1.5rem;
    color: #2a2a2a;
    margin-bottom: 1.5rem;
    text-align: center;
}

.review-item {
    background-color: white;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.review-item.review-correct {
    border-left: 4px solid #28a745;
    background-color: #f8fff9;
}

.review-item.review-incorrect {
    border-left: 4px solid #dc3545;
    background-color: #fff8f8;
}

.review-item.review-neutral {
    border-left: 4px solid #6c757d;
    background-color: #f8f9fa;
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e0e0e0;
}

.review-number {
    font-weight: 600;
    color: #666;
    font-size: 0.9rem;
}

.review-status {
    font-weight: 600;
    font-size: 0.95rem;
}

.review-correct .review-status {
    color: #28a745;
}

.review-incorrect .review-status {
    color: #dc3545;
}

.review-question {
    font-weight: 600;
    font-size: 1.1rem;
    color: #2a2a2a;
    margin-bottom: 1rem;
}

.review-item p {
    margin: 0.5rem 0;
    font-size: 1rem;
    color: #3a3a3a;
}

.review-explanation {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e0e0e0;
    color: #666 !important;
    font-style: italic;
}

/* Results Actions */
.results-actions {
    margin-top: 3rem;
    text-align: center;
    display: flex;
    gap: 1rem;
    justify-content: center;
}

/* Loading Indicator */
.quiz-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 1rem;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #0170B9;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ==================== Footer ==================== */
footer {
    background-color: #2a2a2a;
    color: #ccc;
    padding: 3rem 0 0;
    font-size: 0.9rem;
    line-height: 1.7;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.footer-main {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 2.5rem;
}

.footer-mission h3 {
    color: white;
    font-size: 1.3rem;
    margin-bottom: 0.75rem;
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
}

.footer-mission p {
    color: #aaa;
    line-height: 1.8;
    margin: 0;
}

.footer-column h4 {
    color: white;
    font-size: 1rem;
    margin-bottom: 1rem;
    font-weight: 600;
    font-family: 'Quicksand', sans-serif;
}

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

.footer-column ul li {
    margin-bottom: 0.5rem;
}

.footer-column ul li a {
    color: #aaa;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-column ul li a:hover {
    color: #00acff;
}

/* YouTube subscribe button */
.yt-subscribe-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: #333;
    border: 1px solid #555;
    border-radius: 24px;
    padding: 0.5rem 1rem 0.5rem 0.6rem;
    text-decoration: none;
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background 0.2s, border-color 0.2s;
}

.yt-subscribe-btn:hover {
    background: #444;
    border-color: #777;
    color: white;
}

.yt-subscribe-btn .yt-icon {
    width: 28px;
    height: 20px;
    flex-shrink: 0;
}

.footer-bottom {
    margin-top: 2.5rem;
    padding: 1.25rem 0;
    border-top: 1px solid #444;
    text-align: center;
}

.footer-bottom p {
    margin: 0;
    color: #777;
    font-size: 0.85rem;
}

/* Footer responsive */
@media (max-width: 1024px) {
    .footer-main {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 2rem;
    }

    .footer-mission {
        grid-column: 1 / -1;
    }
}

@media (max-width: 680px) {
    .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }

    .footer-mission {
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {
    .footer-main {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    footer {
        padding: 2rem 0 0;
    }
}

.quiz-loading p {
    font-size: 1.1rem;
    color: #666;
}

/* Error Message */
.quiz-error {
    text-align: center;
    padding: 3rem 2rem;
}

.quiz-error p {
    font-size: 1.2rem;
    color: #dc3545;
    margin-bottom: 2rem;
}

/* Lead Magnet Gate (for public quiz access) */
.lead-magnet-gate {
    max-width: 500px;
    margin: 2rem auto;
    padding: 0;
}

.lead-magnet-gate .lead-magnet-content {
    display: block;
    text-align: center;
}

.lead-magnet-content h2 {
    color: #1e40af;
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    font-weight: 700;
}

.lead-magnet-content > p {
    color: #666;
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.lead-form-error {
    background-color: #fee2e2;
    border: 1px solid #ef4444;
    color: #dc2626;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    text-align: left;
    font-size: 0.9rem;
}

.lead-magnet-form {
    text-align: left;
}

.lead-form-group {
    margin-bottom: 1.25rem;
}

.lead-form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: #333;
    font-weight: 600;
    font-size: 0.95rem;
}

.lead-form-group input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.lead-form-group input:focus {
    outline: none;
    border-color: #0170b9;
    box-shadow: 0 0 0 3px rgba(1, 112, 185, 0.1);
}

.lead-submit-btn {
    width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
    margin-top: 0.5rem;
}

.lead-submit-btn:disabled {
    background-color: #9ca3af;
    cursor: not-allowed;
}

.lead-privacy-notice {
    font-size: 0.8rem;
    color: #666;
    text-align: center;
    margin-top: 1rem;
    line-height: 1.5;
}

/* Responsive Styles for Quiz */
@media (max-width: 768px) {
    .quiz-container,
    .quiz-inner {
        padding: 0;
    }

    .quiz-title-section {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .quiz-header-actions {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    .quiz-header-actions .btn {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
        white-space: nowrap;
    }

    .quiz-question {
        padding: 1.5rem 0;
    }

    .quiz-start-section {
        text-align: left;
    }

    .quiz-start-section .btn {
        width: 100%;
        display: block;
        box-sizing: border-box;
    }

    .quiz-submit-section .btn {
        width: 100%;
        display: block;
        box-sizing: border-box;
    }

    .question-text {
        font-size: 1.1rem;
    }

    .quiz-info {
        gap: 1rem;
    }

    .results-card {
        padding: 0.5rem 0;
    }

    .score-circle {
        width: 150px;
        height: 150px;
    }

    .score-percentage {
        font-size: 2.5rem;
    }

    .results-actions {
        flex-direction: column;
    }

    /* Grade bar mobile fixes */
    #customGradeBar {
        margin: 1.5rem 0 !important;
        overflow: visible;
    }

    #customGradeBar .grade-bar-container {
        height: 40px !important;
    }

    #customGradeBar .grade-bar-labels {
        flex-direction: column !important;
        gap: 0.15rem;
        margin-top: 0.75rem !important;
    }

    #customGradeBar .grade-bar-label {
        flex: none !important;
        min-width: 0 !important;
        text-align: left !important;
        display: flex;
        gap: 0.35rem;
        align-items: baseline;
    }

    #customGradeBar .grade-bar-label > div {
        font-size: 0.75rem !important;
    }

    /* Grade message text */
    #gradeMessage h3 {
        font-size: 1.4rem !important;
        word-wrap: break-word;
    }

    #gradeMessage p {
        font-size: 0.95rem !important;
    }

    /* Score details text */
    .score-details p {
        font-size: 1rem !important;
    }

    /* Review items on mobile */
    .review-item {
        padding: 1rem;
    }
}

/* ==================== END QUIZ SYSTEM STYLES ==================== */


/* ==================== QUIZ RESULTS TABLE STYLES ==================== */

/* Quiz Results Table */
.quiz-results-table {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
}

.quiz-results-header {
    display: grid;
    grid-template-columns: 2fr 1.2fr 0.8fr 0.8fr 0.8fr 1fr;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: #f8f9fa;
    border-bottom: 2px solid #e0e0e0;
    font-weight: 600;
    color: #2a2a2a;
    font-size: 0.9rem;
}

.quiz-result-row {
    display: grid;
    grid-template-columns: 2fr 1.2fr 0.8fr 0.8fr 0.8fr 1fr;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #f0f0f0;
    align-items: center;
    transition: background-color 0.2s;
}

.quiz-result-row:hover {
    background-color: #f9f9f9;
}

.quiz-result-row:last-child {
    border-bottom: none;
}

.quiz-result-col {
    color: #333;
}

.quiz-col-title strong {
    color: #2a2a2a;
    font-size: 1rem;
}

.quiz-col-date {
    color: #666;
    font-size: 0.9rem;
}

.quiz-score {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.95rem;
}

.quiz-score.score-pass {
    background-color: #d4edda;
    color: #155724;
}

.quiz-score.score-fail {
    background-color: #f8d7da;
    color: #721c24;
}

.status-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Clickable status badges are rendered as <a> in some tables (e.g. the
   apprentice's My Activity "Offer Received" pill). The global a:hover turns
   link text blue — wrong for a colored badge. Neutralize the underline and
   darken the whole pill on hover; each color variant class re-asserts its own
   text color on hover (so it stays its color, not blue) where it's defined. */
a.status-badge,
a.status-badge:hover,
a.status-badge:focus {
    text-decoration: none;
}
a.status-badge:hover {
    filter: brightness(0.9);
}

.status-badge.status-pass {
    background-color: #28a745;
    color: white;
}

.status-badge.status-fail {
    background-color: #dc3545;
    color: white;
}

.quiz-col-time {
    color: #666;
    font-size: 0.9rem;
}

.quiz-col-action .btn {
    padding: 0.4rem 1rem;
    font-size: 0.9rem;
    text-decoration: none;
    display: inline-block;
}

/* Responsive Quiz Results Table */
@media (max-width: 1024px) {
    .quiz-results-header {
        grid-template-columns: 1.5fr 1fr 0.8fr 0.8fr 1fr;
        gap: 0.75rem;
        padding: 1rem;
    }

    .quiz-result-row {
        grid-template-columns: 1.5fr 1fr 0.8fr 0.8fr 1fr;
        gap: 0.75rem;
        padding: 1rem;
    }

    .quiz-col-time {
        display: none;
    }
}

@media (max-width: 768px) {
    .quiz-results-header {
        display: none;
    }

    .quiz-result-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        padding: 1.25rem 1rem;
        border-bottom: 1px solid #e0e0e0;
    }

    .quiz-result-col {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .quiz-col-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
        margin-bottom: 0.5rem;
    }

    .quiz-col-title strong {
        font-size: 1.1rem;
    }

    .quiz-result-col::before {
        content: attr(data-label);
        font-weight: 600;
        color: #666;
        font-size: 0.85rem;
    }

    .quiz-col-title::before {
        display: none;
    }

    .quiz-col-action {
        justify-content: flex-end;
        margin-top: 0.5rem;
    }

    .quiz-col-action::before {
        display: none;
    }

    .quiz-col-action .btn {
        width: 100%;
        text-align: center;
    }
}

/* ==================== END QUIZ RESULTS TABLE STYLES ==================== */


/* ==================== QUIZ BUILDER ADMIN STYLES ==================== */

/* Admin Container */
.admin-container {
    width: 100%;
    padding: 8rem;
    box-sizing: border-box;
}

@media (max-width: 1023px) {
    .admin-container {
        padding: 4rem;
    }
}

.admin-header {
    margin-bottom: 2rem;
}

.admin-header h1 {
    color: #2a2a2a;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.admin-header p {
    color: #666;
    font-size: 1.1rem;
}

/* Quiz List */
.quiz-list {
    display: grid;
    gap: 1.5rem;
}

.quiz-item {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5rem;
    transition: box-shadow 0.2s;
}

.quiz-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.quiz-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.quiz-item-header h3 {
    color: #2a2a2a;
    font-size: 1.3rem;
    margin: 0;
}

.quiz-status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
}

.status-active {
    background-color: #28a745;
    color: white;
}

.status-draft {
    background-color: #6c757d;
    color: white;
}

.quiz-description {
    color: #666;
    margin-bottom: 1rem;
}

.quiz-item-meta {
    display: flex;
    gap: 2rem;
    color: #888;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.quiz-item-actions {
    display: flex;
    gap: 0.5rem;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    overflow-y: auto;
}

.modal.show {
    display: flex;
}

.modal-content {
    background-color: white;
    border-radius: 12px;
    border: 2px solid #ffffff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    max-width: 900px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.quiz-builder-modal {
    max-width: 1000px;
}

.modal-header {
    padding: 0.75rem 1.5rem;
    border-bottom: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, #5a5a5a, #7a7a7a);
}

.modal-header h2,
.modal-header h3 {
    margin: 0;
    color: white;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.modal-close {
    background: #dc2626;
    border: none;
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    padding: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.modal-close:hover {
    background-color: #b91c1c;
}

.modal-body {
    padding: 1.5rem 2rem 2rem 2rem;
    flex: 1;
    overflow-y: auto;
}

.modal-footer {
    padding: 1rem 2rem;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    background: #f8f9fa;
}

.modal-footer .btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

/* Info Modal (lightweight modal for help/info popups) */
.info-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.info-modal-overlay.show {
    display: flex;
}

.info-modal {
    background-color: white;
    border-radius: 12px;
    border: 2px solid #ffffff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    max-width: 520px;
    width: 90%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.info-modal .modal-header {
    padding: 0.75rem 1.5rem;
    border-bottom: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, #5a5a5a, #7a7a7a);
}

.info-modal .modal-header h3 {
    margin: 0;
    color: white;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-modal .modal-body {
    padding: 1.5rem 2rem 2rem 2rem;
    font-size: 0.9rem;
    color: #444;
    line-height: 1.6;
}

.info-modal .modal-body p {
    margin: 0 0 1rem;
}

.info-modal .modal-body p:last-child {
    margin-bottom: 0;
}

.info-modal .modal-body strong {
    color: #0b1d3a;
}

/* Info icon button (circled question mark) */
.info-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #0170B9;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
    border: none;
    transition: background 0.2s;
    line-height: 1;
}

.info-icon-btn:hover {
    background: #015a94;
}

/* Form Sections */
.form-section {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background-color: #f9f9f9;
    border-radius: 8px;
}

.form-section h3 {
    color: #2a2a2a;
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #e0e0e0;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.form-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    font-size: 1rem;
}

.checkbox-label input[type='checkbox'] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

/* Question Builder */
.question-builder {
    background-color: white;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.question-builder-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.question-builder-header:hover {
    background: #e9ecef;
}

.question-builder.collapsed .question-builder-header {
    margin-bottom: 0;
    border-radius: 8px;
}

.question-builder-header h4 {
    margin: 0;
    color: #0170B9;
    font-size: 1.1rem;
}

.collapse-icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0170B9;
    transition: transform 0.2s;
}

.question-builder-content {
    padding-top: 1rem;
    transition: all 0.3s ease;
}

.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: background-color 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-icon [data-lucide] {
    width: 24px;
    height: 24px;
}

.btn-icon:hover {
    background-color: #f0f0f0;
}

.btn-icon.btn-danger {
    color: #000000;
}

.btn-icon.btn-danger:hover {
    background-color: #dc3545;
    color: white;
}

/* Answers Section */
.answers-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e0e0e0;
}

.answer-builder {
    margin-bottom: 0.75rem;
}

.answer-builder-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.answer-builder-row input[type='radio'],
.answer-builder-row input[type='checkbox'] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
}

.answer-builder-row input[type='text'] {
    padding: 0.5rem;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 1rem;
}

/* Button Sizes */
.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

.btn-large {
    padding: 1rem 2rem;
    font-size: 1.1rem;
}

/* Empty States */
.empty-state {
    text-align: center;
    padding: 2rem;
    color: #888;
}

.empty-state-sm {
    text-align: center;
    padding: 1rem;
    color: #888;
    font-size: 0.9rem;
}

/* Grade Level Builder */
.grade-level-builder {
    background-color: white;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.grade-level-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.grade-level-header:hover {
    background: #e9ecef;
}

.grade-level-builder.collapsed .grade-level-header {
    margin-bottom: 0;
    border-radius: 8px;
}

.grade-level-content {
    padding-top: 1rem;
    transition: all 0.3s ease;
}


/* Loading Container */
.loading-container {
    text-align: center;
    padding: 3rem;
    color: #666;
}

/* Responsive */
@media (max-width: 768px) {
    .admin-container {
        padding: 1rem;
    }

    /* All standard modals fullscreen on mobile */
    .modal {
        padding: 0;
    }

    .modal .modal-content {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        border: none;
    }

    .modal .modal-header {
        padding: 1rem;
    }

    .modal .modal-body {
        padding: 1rem;
        overflow-y: auto;
    }

    .modal .modal-footer {
        padding: 1rem;
        gap: 0.5rem;
    }

    .modal .modal-footer .btn {
        flex: 1;
    }

    /* Info-modal-overlay modals fullscreen on mobile */
    .info-modal-overlay {
        padding: 0;
    }

    .info-modal-overlay .info-modal {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        border: none;
    }

    .info-modal-overlay .info-modal .modal-body {
        padding: 1rem;
        overflow-y: auto;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .quiz-item-actions {
        flex-wrap: wrap;
    }
}

/* ==================== END QUIZ BUILDER ADMIN STYLES ==================== */

/* Start A&P OJT Button Styles */
#startOJTBtn {
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
}

#startOJTBtn:hover {
    background-color: #000000 !important;
    border-color: #000000 !important;
}

/* Lead Magnet Section Styles */
.lead-magnet-section {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    padding: 4rem 2rem;
    margin: 3rem 0;
}

.lead-magnet-container {
    max-width: 1000px;
    margin: 0 auto;
}

.lead-magnet-header {
    text-align: center;
    margin-bottom: 3rem;
}

.lead-magnet-header h2 {
    color: #1e40af;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.lead-magnet-header p {
    color: #4b5563;
    font-size: 1.2rem;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
}

.lead-magnet-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

.benefits-list {
    background: white;
    border-left: 4px solid #3b82f6;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.benefits-list h3 {
    color: #1e40af;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
}

.benefits-list ul {
    list-style: none;
    padding: 0;
}

.benefits-list li {
    padding: 0.75rem 0;
    padding-left: 2rem;
    position: relative;
    color: #374151;
    font-size: 1.1rem;
}

.benefits-list li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #22c55e;
    font-weight: bold;
    font-size: 1.5rem;
}

.lead-form-wrapper {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.lead-form .form-group {
    margin-bottom: 1.5rem;
}

.lead-form .form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: #374151;
    font-weight: 600;
    font-size: 1rem;
}

.lead-form .form-group input {
    width: 100%;
    padding: 0.875rem;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s;
    box-sizing: border-box;
}

.lead-form .form-group input:focus {
    outline: none;
    border-color: #3b82f6;
}

.lead-form button[type="submit"] {
    width: 100%;
    margin-top: 0.5rem;
}

.lead-form button[type="submit"]:disabled {
    background-color: #9ca3af;
    cursor: not-allowed;
}

.error-message {
    background-color: #fee2e2;
    border: 1px solid #ef4444;
    color: #dc2626;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.privacy-notice {
    font-size: 0.875rem;
    color: #6b7280;
    text-align: center;
    margin-top: 1rem;
    line-height: 1.5;
}

/* Responsive Design */
@media (max-width: 768px) {
    .lead-magnet-section {
        padding: 3rem 1.5rem;
    }

    .lead-magnet-header h2 {
        font-size: 1.875rem;
    }

    .lead-magnet-header p {
        font-size: 1rem;
    }

    .lead-magnet-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .benefits-list li {
        font-size: 1rem;
    }
}

/* ==========================================================================
   HOME PAGE REDESIGN - Evidence-Based Conversion Optimized Layout
   ========================================================================== */

/* Hero Section - Above the Fold with F-Pattern Layout */
.hero-redesign {
    background:
        linear-gradient(135deg, rgba(42, 42, 42, 0.80) 0%, rgba(58, 58, 58, 0.80) 100%),
        url('/assetsimages/aircraft-mechanic-ojt-training-min.jpeg') center/cover no-repeat;
    padding: 6rem 2rem;
    color: white;
    position: relative;
}

.hero-content-wrapper {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.hero-content-wrapper.hero-centered {
    grid-template-columns: 1fr;
    max-width: 1200px;
    text-align: center;
}

.hero-centered .hero-text {
    padding-right: 0;
}

.hero-centered .hero-trust-signals {
    justify-content: center;
}

.hero-text {
    padding-right: 2rem;
}

.hero-headline {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: white;
}

.hero-subheadline {
    font-size: 1.25rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.95);
}

.hero-trust-signals {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
}

.trust-icon {
    background: #0170b9;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.hero-cta {
    margin-top: 2.5rem;
}

.hero-cta-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    max-width: 600px;
    margin: 0 auto;
}

.hero-cta-buttons .btn {
    flex: 1;
    padding: 0.85rem 1.5rem;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 10px;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}
.hero-cta-buttons .btn svg {
    flex-shrink: 0;
}

.btn-primary-large {
    background-color: #0170b9;
    color: white;
}

.btn-primary-large:hover {
    background-color: #015a94;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.btn-secondary-large {
    background-color: #f7941d;
    color: white;
}

.btn-secondary-large:hover {
    background-color: #e8850a;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.hero-cta .cta-subtext {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: white !important;
}

.hero-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

/* Two Paths Comparison Section */
.comparison-section {
    padding: 80px 2rem;
    position: relative;
    width: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.7) 100%), url('/assetsimages/aircraft-piston-engine-overhaul-min.jpeg') center center no-repeat;
    background-size: cover;
}

.comparison-section .container {
    max-width: 1100px;
    margin: 0 auto;
}

.comparison-section .section-header {
    text-align: center;
    margin-bottom: 60px;
}

.comparison-section .section-header h1,
.comparison-section .section-header h2 {
    font-size: 2.2rem;
    color: #fff;
    margin-bottom: 10px;
    font-weight: 700;
    display: block;
}

.comparison-section .section-header p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.75);
    max-width: 600px;
    margin: 0 auto;
}

.comparison-section .comparison-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 50px;
}

.comparison-column {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    min-width: 0;
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
}

.comparison-column:first-child {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-top: 4px solid #dc2626;
}

.comparison-column.highlight {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-top: 4px solid #0170b9;
}

.column-header {
    padding: 1.25rem 1.5rem;
    text-align: left;
    border-bottom: 1px solid #f1f5f9;
    background: #fff;
}

.comparison-column:first-child .column-header {
    background: #fff;
    border-bottom: 1px solid #f1f5f9;
}

.comparison-column:first-child .column-header h2 {
    color: #dc2626;
}

.comparison-column:first-child .column-header p {
    color: #94a3b8;
}

.comparison-column.highlight .column-header {
    background: #fff;
    border-bottom: 1px solid #f1f5f9;
}

.comparison-column.highlight .column-header h2 {
    color: #0170b9;
}

.column-header h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.2rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.column-header p {
    font-size: 0.82rem;
    color: #94a3b8;
    margin: 0;
}

.comparison-body {
    padding: 0;
    flex: 1;
}

.comparison-row {
    padding: 0.85rem 1.5rem;
    border-bottom: 1px solid #f8fafc;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.comparison-row:last-child {
    border-bottom: none;
}

.comparison-column:first-child .comparison-row {
    border-bottom-color: #f8fafc;
}

.comparison-column:first-child .comparison-row:first-child .row-value {
    color: #dc2626;
    font-weight: 700;
}

.comparison-column.highlight .comparison-row {
    border-bottom-color: #f8fafc;
}

.comparison-column.highlight .comparison-row:first-child .row-value {
    color: #0170b9;
    font-weight: 700;
}

.row-label {
    font-size: 0.68rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-bottom: 3px;
}

.row-value {
    font-family: 'Oswald', sans-serif;
    font-size: 1.1rem;
    color: #1e293b;
    font-weight: 600;
    margin-bottom: 2px;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

.row-description {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.5;
}

.comparison-section .cta-section {
    text-align: center;
    margin-top: 60px;
    padding: 50px 30px;
    background: #f8f9fa;
    border-radius: 8px;
}

.comparison-section .cta-section h3 {
    font-size: 1.8rem;
    color: #222;
    margin-bottom: 15px;
    font-weight: 700;
}

.comparison-section .cta-section p {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 30px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.cta-button {
    display: inline-block;
    background: #2563eb;
    color: #fff;
    padding: 15px 40px;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.cta-button:hover {
    background: #1d4ed8;
    transform: translateY(-2px);
    color: #fff;
}

@media (max-width: 768px) {
    .comparison-section .comparison-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .comparison-section .comparison-wrapper .comparison-column.highlight {
        order: -1;
    }

    .comparison-section .section-header h1 {
        font-size: 2.2rem;
    }

    .comparison-section .section-header p {
        font-size: 1.1rem;
    }

    .comparison-section {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}

/* Problem-Solution Framework */
.problem-solution {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 5rem 2rem;
    background: #f9fafb;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.section-headline {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 3rem;
    text-align: center;
}

.section-headline.solution-headline {
    color: #1e40af;
    margin-top: 4rem;
}

.section-subheadline {
    font-size: 1.25rem;
    color: #64748b;
    margin-top: -2rem;
    margin-bottom: 3rem;
}

.section-subheadline.centered,
.section-headline.centered {
    text-align: center;
}

.problem-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 3rem;
}

.problem-item {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.problem-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.problem-icon [data-lucide] {
    width: 100%;
    height: 100%;
}

.problem-item h3 {
    font-size: 1.5rem;
    color: #dc2626;
    margin-bottom: 1rem;
}

.problem-item p {
    color: #64748b;
    line-height: 1.6;
}

.solution-grid {
    display: grid;
    gap: 3rem;
    margin-bottom: 3rem;
}

.solution-item {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 2rem;
    align-items: center;
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.solution-item:nth-child(even) {
    grid-template-columns: 1.5fr 1fr;
}

.solution-item:nth-child(even) img {
    order: 2;
}

.solution-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
}

.solution-content h3 {
    font-size: 1.75rem;
    color: #1e40af;
    margin-bottom: 1rem;
}

.solution-content p {
    color: #475569;
    line-height: 1.7;
    font-size: 1.1rem;
}

.section-cta {
    text-align: center;
    margin-top: 3rem;
}

/* Features & Benefits */
.features-benefits {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 5rem 2rem;
    background: white;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.feature-card {
    background: #f9fafb;
    padding: 2.5rem;
    border-radius: 12px;
    border: 2px solid #e5e7eb;
    transition: all 0.3s ease;
}

.feature-card:hover {
    border-color: #3b82f6;
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.15);
}

.feature-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.feature-icon [data-lucide] {
    width: 100%;
    height: 100%;
}

.feature-card h3 {
    font-size: 1.5rem;
    color: #1e293b;
    margin-bottom: 1rem;
}

.feature-card p {
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.feature-list {
    list-style: none;
    padding: 0;
}

.feature-list li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: #475569;
}

.feature-list li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #22c55e;
    font-weight: bold;
}

/* Social Proof */
.social-proof {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 5rem 2rem;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
}

.stats-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin: 3rem 0;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.stat-item {
    text-align: center;
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.stat-number {
    font-size: 3rem;
    font-weight: 800;
    color: #1e40af;
    display: block;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 1rem;
    color: #64748b;
    font-weight: 600;
}

.trust-badges {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin: 3rem 0;
}

.badge-item {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    border: 2px solid #bfdbfe;
}

.badge-item h4 {
    color: #1e40af;
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.badge-item p {
    color: #64748b;
    line-height: 1.5;
}

/* Price Lock Guarantee Section - Professional Design */
.price-lock-guarantee {
    padding-top: 6rem;
    padding-bottom: 6rem;
    background: linear-gradient(135deg, #0a1929 0%, #1a2f42 50%, #0a1929 100%);
    position: relative;
    overflow: hidden;
}

.price-lock-guarantee.white-bg {
    background: #ffffff;
}

.price-lock-guarantee.white-bg::before {
    display: none;
}

.price-lock-guarantee.white-bg .price-lock-wrapper {
    box-shadow: none;
    padding: 2rem 0;
}

.price-lock-guarantee::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(1, 112, 185, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(1, 112, 185, 0.15) 0%, transparent 50%);
    pointer-events: none;
}

.price-lock-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    background: white;
    padding: 3.5rem 4rem;
    border-radius: 12px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(1, 112, 185, 0.1);
    position: relative;
    z-index: 1;
}

/* Top Badge */
.price-lock-badge-top {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, #0170B9 0%, #0056a3 100%);
    padding: 0.65rem 1.75rem;
    border-radius: 50px;
    margin-bottom: 2rem;
    box-shadow: 0 4px 12px rgba(1, 112, 185, 0.25);
}

.shield-icon {
    width: 24px;
    height: 24px;
    color: white;
}

.badge-label {
    color: white;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Headlines */
.price-lock-headline {
    font-size: 3rem;
    font-weight: 700;
    color: #0a1929;
    margin: 0 0 1rem 0;
    font-family: 'Oswald', sans-serif;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.price-lock-subheadline {
    font-size: 1.35rem;
    color: #64748b;
    margin: 0 0 2.5rem 0;
    font-weight: 500;
}

/* Header Section */
.price-lock-header {
    text-align: left;
    margin-bottom: 2.5rem;
}

/* Two Column Layout */
.price-lock-two-column {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 3rem;
    align-items: stretch;
    margin-bottom: 2.5rem;
}

.price-lock-left {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.price-lock-right {
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.price-lock-benefits {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Visual Image Section */
.price-lock-visual {
    position: relative;
    width: 100%;
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

.price-lock-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
    max-height: 400px;
    object-fit: cover;
}

.price-lock-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(1, 112, 185, 0.75) 0%, transparent 50%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 2rem;
}

.overlay-badge {
    background: rgba(255, 255, 255, 0.95);
    padding: 1rem 2.5rem;
    border-radius: 50px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
}

.overlay-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0170B9;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Content Grid */
.price-lock-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-bottom: 2.5rem;
}

.price-lock-main {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.price-lock-description {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #475569;
    margin: 0;
    text-align: center;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* Guarantee Stats */
.guarantee-stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.stat-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 1.5rem 3rem;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    flex: 1;
    max-width: 400px;
}

.stat-icon {
    width: 44px;
    height: 44px;
    color: #0170B9;
    flex-shrink: 0;
}

.stat-content {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #0170B9;
    font-family: 'Oswald', sans-serif;
    line-height: 1;
}

.stat-label {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 600;
    margin-top: 0.25rem;
}

/* Benefits Cards - styles moved to .price-lock-benefits above */

.benefit-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 12px;
    border: 2px solid #bae6fd;
    transition: all 0.3s ease;
}

.benefit-card:hover {
    border-color: #0170B9;
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(1, 112, 185, 0.15);
}

.benefit-icon {
    width: 32px;
    height: 32px;
    color: #0170B9;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.benefit-text h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0a1929;
    margin: 0 0 0.5rem 0;
    font-family: 'Oswald', sans-serif;
}

.benefit-text p {
    font-size: 0.95rem;
    color: #475569;
    margin: 0;
    line-height: 1.5;
}

/* CTA Section */
.price-lock-cta {
    text-align: center;
    padding-top: 2.5rem;
    border-top: 2px solid #e2e8f0;
}

.btn-price-lock {
    display: inline-block;
    background: linear-gradient(135deg, #0170B9 0%, #0056a3 100%);
    color: white;
    padding: 1.25rem 3.5rem;
    font-size: 1.2rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow:
        0 8px 20px rgba(1, 112, 185, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.btn-price-lock:hover {
    transform: translateY(-2px);
    box-shadow:
        0 12px 28px rgba(1, 112, 185, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    background: linear-gradient(135deg, #0056a3 0%, #004080 100%);
    color: white;
}

.cta-fine-print {
    font-size: 0.95rem;
    color: #64748b;
    margin: 1rem 0 0 0;
    font-weight: 500;
}

.price-lock-disclaimer {
    font-size: 0.8rem;
    color: #94a3b8;
    margin: 1rem 0 0 0;
    font-style: italic;
    line-height: 1.5;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Responsive Design for Price Lock */
@media (max-width: 992px) {
    .price-lock-two-column {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .price-lock-right {
        position: static;
        order: -1;
    }

    .price-lock-image {
        max-height: 300px;
    }

    .price-lock-content-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .guarantee-stats {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 768px) {
    .price-lock-guarantee {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .price-lock-wrapper {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    .price-lock-header {
        margin-bottom: 1.5rem;
    }

    .price-lock-headline {
        font-size: 2.25rem;
    }

    .price-lock-subheadline {
        font-size: 1.15rem;
    }

    .price-lock-badge-top {
        display: flex;
        justify-content: flex-start;
        width: 100%;
    }

    .price-lock-image {
        max-height: 250px;
    }

    .price-lock-visual {
        margin: 0 0 1.5rem 0;
    }

    .price-lock-image-overlay {
        padding: 1.5rem;
    }

    .overlay-badge {
        padding: 0.85rem 1.75rem;
    }

    .overlay-text {
        font-size: 1rem;
    }

    .price-lock-description {
        text-align: center;
        font-size: 1rem;
    }

    .guarantee-stats {
        flex-direction: column;
        align-items: center;
    }

    .stat-box {
        width: 100%;
        max-width: 300px;
    }

    .price-lock-benefits {
        gap: 1rem;
    }

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

    .btn-price-lock {
        width: 100%;
        padding: 1.25rem 2rem;
        font-size: 1.1rem;
    }
}

/* Lead Magnet Redesign */
.lead-magnet-redesign {
    display: flex;
    align-items: center;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: white;
}

.lead-magnet-redesign .container {
    max-width: 960px;
}

.lead-magnet-wrapper {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 3rem;
    align-items: stretch;
}

.lead-magnet-left {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.lead-magnet-right {
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.lead-magnet-right .pdf-report-preview {
    margin-top: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.lead-magnet-right .pdf-report-preview img {
    flex: 1;
    width: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: top;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: none;
    display: block;
}

.lead-magnet-headline {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: white;
    line-height: 1.2;
}

.lead-magnet-subheadline {
    font-size: 1.25rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
}

.lead-benefits {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.lead-benefit-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
}

.benefit-check {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
}

.lead-form-card {
    background: white;
    padding: 1.25rem;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    width: 100%;
}

.lead-form-card h3 {
    color: #1e293b;
    font-size: 1.75rem;
    margin-bottom: 2rem;
    text-align: center;
}

#free-aptitude-test {
    scroll-margin-top: 0;
}

.lead-form-redesign .form-group {
    margin-bottom: 1rem;
}

.lead-form-redesign label {
    display: block;
    color: #1e293b;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.lead-form-redesign input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: border-color 0.3s;
}

.lead-form-redesign input:focus {
    outline: none;
    border-color: #3b82f6;
}

.btn-secondary-large {
    width: 100%;
    background-color: #f59e0b;
    color: white;
    padding: 0.85rem 1.25rem;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-secondary-large:hover {
    background-color: #d97706;
    transform: translateY(-2px);
}

.privacy-text {
    text-align: center;
    font-size: 0.85rem;
    color: #64748b;
    margin-top: 1rem;
}

/* PDF Report Preview */
.pdf-report-preview {
    margin-top: 1.5rem;
    text-align: center;
}

.pdf-report-preview img {
    max-width: 100%;
    max-height: 350px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 3px solid rgba(255, 255, 255, 0.2);
}

/* Override for lead magnet section — image fills full column height */
.lead-magnet-right .pdf-report-preview img {
    max-height: none;
    max-width: none;
}

.pdf-preview-caption {
    margin-top: 1rem;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    font-style: italic;
}

.lead-form-subtitle {
    color: #64748b;
    font-size: 0.95rem;
    text-align: center;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

/* FAQ Section */
.faq-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 5rem;
    padding-bottom: 5rem;
    background: white;
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.faq-item {
    background: #f9fafb;
    padding: 2rem;
    border-radius: 12px;
    border-left: 4px solid #3b82f6;
}

.faq-item h3 {
    color: #1e293b;
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.faq-item p {
    color: #475569;
    line-height: 1.7;
}

/* Final CTA */
.final-cta {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 6rem 2rem;
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    color: white;
}

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

.final-cta-content h2 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    color: white;
}

.final-cta-text {
    font-size: 1.25rem;
    margin-bottom: 3rem;
    color: rgba(255, 255, 255, 0.95);
}

.price-box {
    background: rgba(255, 255, 255, 0.15);
    padding: 3rem;
    border-radius: 16px;
    margin-bottom: 2rem;
    backdrop-filter: blur(10px);
}

.price-amount {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.price-amount .currency {
    font-size: 2rem;
    font-weight: 700;
}

.price-amount .number {
    font-size: 5rem;
    font-weight: 900;
    line-height: 1;
}

.price-amount .period {
    font-size: 1.5rem;
    font-weight: 600;
}

.price-description {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
}

.btn-primary-xlarge {
    background-color: white;
    color: #1e40af;
    padding: 1.5rem 4rem;
    font-size: 1.5rem;
    font-weight: 700;
    border-radius: 12px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    margin: 2rem 0;
}

.btn-primary-xlarge:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    background-color: #f0f9ff;
}

.guarantee-box {
    background: rgba(255, 255, 255, 0.1);
    padding: 2rem;
    border-radius: 12px;
    margin: 2rem 0;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.guarantee-box h4 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    color: white;
}

.guarantee-box p {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
}

.final-trust-items {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    font-size: 1rem;
    margin-top: 2rem;
}

.final-trust-items span {
    font-weight: 600;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .hero-redesign {
        padding: 3rem 1.5rem;
    }

    .hero-content-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .hero-text {
        padding-right: 0;
    }

    .hero-headline {
        font-size: 2rem;
    }

    .hero-subheadline {
        font-size: 1.1rem;
    }

    .hero-trust-signals {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }

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

    .solution-item {
        grid-template-columns: 1fr;
    }

    .solution-item:nth-child(even) {
        grid-template-columns: 1fr;
    }

    .solution-item:nth-child(even) img {
        order: 0;
    }

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

    .stats-bar {
        grid-template-columns: 1fr;
    }

    .trust-badges {
        grid-template-columns: 1fr;
    }

    .hero-cta-buttons {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        max-width: 100%;
    }

    .btn-primary-large,
    .btn-secondary-large {
        width: 100%;
        max-width: 350px;
        text-align: center;
    }

    .lead-magnet-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .lead-magnet-headline {
        font-size: 1.75rem;
    }

    .lead-form-card {
        padding: 1.25rem;
    }

    .lead-form-redesign .form-group {
        margin-bottom: 0.6rem;
    }

    .lead-form-redesign input {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }

    .lead-form-card .btn-secondary-large {
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
        white-space: nowrap;
    }

    .pdf-report-preview {
        margin-top: 2rem;
    }

    .pdf-report-preview img {
        max-height: 250px;
    }

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

    .final-cta-content h2 {
        font-size: 2rem;
    }

    .price-amount .number {
        font-size: 3.5rem;
    }

    .btn-primary-xlarge {
        padding: 1.25rem 2rem;
        font-size: 1.25rem;
    }

    .final-trust-items {
        flex-direction: column;
        gap: 1rem;
    }

    /* Left-align headings and intro text on mobile after hero */
    .membership-value-stack h2,
    .membership-value-stack > .container > div:first-child,
    .pricing-feature-detail h2,
    .pricing-feature-detail .feature-detail-intro,
    .price-lock-guarantee h2,
    .price-lock-guarantee .price-lock-headline,
    .lead-magnet-redesign .lead-magnet-content,
    .lead-magnet-headline,
    .lead-magnet-subhead,
    .faq-section .section-headline {
        text-align: left !important;
    }
}

/* Tablet text alignment (between 768px and 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    /* Left-align headings and intro text on tablet after hero */
    .membership-value-stack h2,
    .membership-value-stack > .container > div:first-child,
    .pricing-feature-detail h2,
    .pricing-feature-detail .feature-detail-intro,
    .price-lock-guarantee h2,
    .price-lock-guarantee .price-lock-headline,
    .lead-magnet-redesign .lead-magnet-content,
    .lead-magnet-headline,
    .lead-magnet-subhead,
    .faq-section .section-headline {
        text-align: left !important;
    }
}

/* ========================================
   Pricing Page Styles
   ======================================== */

/* Extend hero section to full page height */
.hero-redesign.pricing-hero {
    min-height: calc(100vh - 80px);
    padding-bottom: 100px;
    background: linear-gradient(135deg, #0170b9 0%, #2e5bff 100%) !important;
}

/* Center hero heading and subheadline on pricing page */
.hero-redesign.pricing-hero .hero-headline,
.hero-redesign.pricing-hero .hero-subheadline {
    text-align: center;
}

.pricing-value-box {
    max-width: 800px;
    margin: 40px auto;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    padding: 40px;
    text-align: center;
}

.pricing-value-box-title {
    font-family: 'Oswald', sans-serif;
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 30px;
    color: #0170B9;
}

.intro-text {
    font-size: 1.1rem;
    color: #2a2a2a;
    margin-bottom: 30px;
    text-align: center;
    line-height: 1.6;
}

.pricing-features-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.pricing-features-table tr {
    border-bottom: 1px solid #e0e0e0;
}

.pricing-features-table tr:last-child {
    border-bottom: none;
}

.pricing-features-table td {
    padding: 20px;
    display: flex;
    align-items: flex-start;
    text-align: left;
}

.pricing-features-table td > div {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.feature-content {
    flex: 1;
    display: block;
}

.checkmark {
    color: #0170B9;
    font-size: 1.5rem;
    margin-right: 15px;
    flex-shrink: 0;
    font-weight: bold;
}

.feature-title {
    display: block;
    margin-bottom: 5px;
    color: #2a2a2a;
    font-weight: 600;
    font-size: 1.15rem;
}

.feature-description {
    color: #666;
    font-size: 1.05rem;
    line-height: 1.5;
}

.learn-more-btn {
    display: inline-block;
    flex-shrink: 0;
    padding: 6px 14px;
    background-color: #0170B9;
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.learn-more-btn:hover {
    background-color: #015a94;
    color: white;
    transform: translateY(-1px);
}

.cta-container {
    text-align: center;
    margin-top: 40px;
}

.cta-subtext {
    margin-top: 15px;
    color: #666;
    font-size: 0.9rem;
}

.pricing-amount {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    margin-top: 40px;
    padding-top: 40px;
    border-top: 2px solid #e0e0e0;
}

.pricing-amount-text {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.pricing-amount .price {
    font-family: 'Oswald', sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    color: #2a2a2a;
    line-height: 1;
}

.pricing-amount .price-period {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    color: #666;
    margin-left: 0;
}

.pricing-cta-button {
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    color: #2a2a2a;
    padding: 16px 48px;
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 12px;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.2);
}

.pricing-cta-button:hover {
    background: linear-gradient(135deg, #F7931E 0%, #FF6B35 100%);
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
    color: #2a2a2a;
}

.pricing-cta-button .arrow-right {
    margin-left: 10px;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.pricing-cta-button .arrow-right svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* Membership Value Stack Section */
.membership-value-stack {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* Pricing Feature Detail Sections */
.pricing-feature-detail {
    padding-top: 80px;
    padding-bottom: 80px;
    background: #f8fafc;
}

.pricing-feature-detail.dark-section {
    background: #1e293b;
}

.pricing-feature-detail.dark-section h2,
.pricing-feature-detail.dark-section h3 {
    color: #ffffff;
}

.pricing-feature-detail.dark-section .feature-detail-intro {
    color: #cbd5e1;
}

.pricing-feature-detail.dark-section .course-video-container {
    border: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: none;
}

.pricing-feature-detail.dark-section .course-info-card {
    background: #334155;
    border-left-color: #f97316;
    box-shadow: none;
}

.pricing-feature-detail.dark-section .course-info-card h3 {
    color: #ffffff !important;
}

.pricing-feature-detail.dark-section .course-info-card p {
    color: #cbd5e1;
}

.pricing-feature-detail.dark-section .course-info-card p:last-child {
    color: #f97316;
}

.pricing-feature-detail.dark-section .feature-detail-content {
    background: #334155;
    border-left: 4px solid #f97316;
    box-shadow: none;
}

.pricing-feature-detail.dark-section .feature-detail-content h3 {
    color: #ffffff !important;
}

.pricing-feature-detail.dark-section .feature-detail-content p {
    color: #cbd5e1;
}

.pricing-feature-detail.dark-section .feature-detail-content p strong {
    color: #ffffff;
}

.pricing-feature-detail.dark-section .feature-detail-list li {
    color: #cbd5e1;
    border-bottom-color: #475569;
}

.pricing-feature-detail.dark-section .feature-detail-list li strong {
    color: #ffffff;
}

/* Blue Section Styling - matches pricing hero gradient */
.pricing-feature-detail.blue-section {
    background: linear-gradient(135deg, #0170b9 0%, #2e5bff 100%);
}

.pricing-feature-detail.blue-section h2,
.pricing-feature-detail.blue-section h3 {
    color: #ffffff;
}

.pricing-feature-detail.blue-section .feature-detail-intro {
    color: rgba(255, 255, 255, 0.9);
}

.pricing-feature-detail.blue-section .course-info-card {
    background: white;
    border-left-color: #f97316;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.pricing-feature-detail.blue-section .course-info-card h3 {
    color: #1e293b !important;
}

.pricing-feature-detail.blue-section .course-info-card p {
    color: #475569;
}

.pricing-feature-detail.blue-section .course-info-card p:last-child {
    color: #f97316;
}

.pricing-feature-detail.blue-section .feature-detail-content {
    background: white;
    border-left: 4px solid #f97316;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.pricing-feature-detail.blue-section .feature-detail-content h3 {
    color: #1e293b !important;
}

.pricing-feature-detail.blue-section .feature-detail-list li {
    color: #475569;
    border-bottom-color: #e0e0e0;
}

.pricing-feature-detail.blue-section .feature-detail-list li strong {
    color: #1e293b;
}

.tech-pubs-disclaimer {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
    text-align: center;
    margin-top: 30px;
    font-style: italic;
}

.pricing-feature-detail .feature-detail-content h3 {
    color: #1e293b;
}

.pricing-feature-detail .container {
    max-width: 1200px;
    margin: 0 auto;
}

.pricing-feature-detail h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 2.2rem;
    color: #1e293b;
    margin-bottom: 20px;
    text-align: left;
}

.pricing-feature-detail .feature-detail-intro {
    font-size: 1.15rem;
    color: #475569;
    text-align: left;
    margin-bottom: 40px;
    line-height: 1.7;
}

.pricing-feature-detail .feature-detail-content {
    background: white;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-left: 4px solid #f97316;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.pricing-feature-detail h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 1.5rem;
    color: #1e293b;
    margin-bottom: 25px;
}

.pricing-feature-detail .feature-detail-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pricing-feature-detail .feature-detail-list li:first-child {
    padding-top: 0;
}

.pricing-feature-detail .feature-detail-list li {
    padding: 15px 0;
    border-bottom: 1px solid #e2e8f0;
    color: #475569;
    line-height: 1.6;
}

.pricing-feature-detail .feature-detail-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.pricing-feature-detail .feature-detail-list li strong {
    color: #1e293b;
}

.pricing-feature-detail .feature-detail-cta {
    text-align: center;
    margin-top: 30px;
}

/* Two Column Layout */
.feature-detail-two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: stretch;
}

/* Course Video Column Styles */
.course-video-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.course-video {
    display: flex;
    align-items: flex-start;
}

.course-video-container {
    width: 100%;
    line-height: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.course-video-container .section-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 12px;
}

.course-info-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-left: 4px solid #f97316;
    margin-top: 20px;
}

.course-info-card h3 {
    color: #1e293b;
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.course-info-card p {
    color: #475569;
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

.course-info-card p:last-child {
    margin-bottom: 0;
    color: #f97316;
}

.vimeo-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.vimeo-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 900px) {
    .feature-detail-two-column {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .course-video-column {
        order: -1;
    }
}

@media (max-width: 768px) {
    .pricing-feature-detail {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .pricing-feature-detail h2 {
        font-size: 1.8rem;
    }

    .pricing-feature-detail .feature-detail-content {
        padding: 25px 20px;
    }
}

@media (max-width: 768px) {
    .hero-redesign.pricing-hero {
        min-height: auto;
        padding-bottom: 60px;
    }

    .pricing-value-box {
        padding: 30px 20px;
        margin: 30px 20px;
    }

    .pricing-features-table td {
        padding: 15px 10px;
    }

    .checkmark {
        font-size: 1.2rem;
        margin-right: 10px;
    }

    .pricing-amount .price {
        font-size: 2.75rem;
    }

    .pricing-cta-button {
        width: 100%;
        text-align: center;
        padding: 14px 32px;
    }

    .sticky-cta-bar .btn {
        width: 100%;
    }

    /* Mechanic course section - wider content on mobile with background transition */
    .mechanic-course-section {
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.65) 50%, rgba(30, 41, 59, 0.9) 75%, #1e293b 100%), url('/assetsimages/how-to-become-an-aircraft-mechanic-course-min.jpeg') center top no-repeat !important;
        background-size: cover !important;
    }

    /* Comparison section - image on header, dark gray below */
    .comparison-section {
        background: #333 !important; /* Dark gray for entire section */
        padding: 0 !important; /* Remove all padding so image is full width */
    }

    .comparison-section .container {
        padding: 0;
    }

    .comparison-section .section-header {
        background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('/assetsimages/aircraft-piston-engine-overhaul-min.jpeg') center center no-repeat !important;
        background-size: cover !important;
        padding: 60px 12px !important; /* Equal padding top/bottom to center content */
        margin-bottom: 2rem !important; /* Space below image before first card */
    }

    .comparison-section .section-header h2,
    .comparison-section .section-header p {
        color: #fff !important;
    }

    .comparison-section .comparison-wrapper {
        padding: 0 16px; /* Side padding for the cards area */
        padding-bottom: 2rem; /* Space below last card before blue section */
        margin-bottom: 0; /* Remove default margin that creates white gap */
    }

    /* Global mobile section padding - all sections with containers */
    section {
        padding-left: 16px;
        padding-right: 16px;
    }

    section > .container {
        padding: 0;
    }

    /* Exception: hero needs full-bleed background, use its own padding */
    .hero-redesign {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    /* Exception: comparison-section has special full-bleed handling */
    .comparison-section {
        padding: 0 !important;
    }

    /* Course pages - match homepage 16px edge spacing */
    body:has(.course-container) main,
    body:has(.module-container) main {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .course-container,
    .module-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Stack module badge above heading on mobile */
    .module-title-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .price-lock-guarantee {
        padding-top: 3rem !important;
        margin-top: 0 !important;
    }

    .price-lock-wrapper {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .pricing-feature-detail .feature-detail-content,
    .pricing-feature-detail .course-info-card,
    .pricing-feature-detail .course-video-container,
    .price-lock-wrapper,
    .comparison-column,
    .pdf-report-preview img {
        border-radius: 8px;
    }
}

/* ── Blurred locked overlay (shared: public profile, apprenticeship finder) ── */
.locked-section-wrap { position: relative; overflow: hidden; border-radius: 8px; }
.locked-section-content { filter: blur(5px); user-select: none; pointer-events: none; }
.locked-section-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    background: rgba(255,255,255,0.4); z-index: 2;
    font-size: 0.9rem; font-weight: 600;
}
.locked-section-overlay svg { width: 18px; height: 18px; flex-shrink: 0; }
.locked-section-overlay a { color: var(--color-primary); text-decoration: underline; font-weight: 700; }
.locked-section-overlay .btn { color: #fff !important; text-decoration: none; }

/* ── Welcome / Onboarding Page ── */
.welcome-content {
    width: 100%;
}

.welcome-card {
    padding: 2.5rem;
}

.welcome-section {
    margin-bottom: 2.5rem;
}

.welcome-section:last-child {
    margin-bottom: 0;
}

.welcome-section h2 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    color: #0170b9;
}

.welcome-section h3 {
    font-size: 1.15rem;
    margin-bottom: 0.75rem;
    color: #333;
}

.welcome-section p {
    line-height: 1.8;
    color: #555;
    margin-bottom: 1.25rem;
}

.welcome-section .btn {
    padding: 0.45rem 1.25rem;
    font-size: 0.85rem;
}

.welcome-support-email a {
    color: #0170b9;
    font-weight: 600;
    text-decoration: none;
}

.welcome-support-email a:hover {
    text-decoration: underline;
}

.welcome-cta {
    padding-top: 1.5rem;
    border-top: 1px solid #eee;
}

@media (max-width: 768px) {
    .welcome-card {
        padding: 1.5rem;
    }
}

/* Dashboard "Next Step: Complete A&P Profile" badge.
   .welcome-cta-flashy aliases the same treatment so callsites can opt in
   by class instead of duplicating the id (which was already being reused
   across multiple welcome panels). */
#profile-incomplete-badge,
.welcome-cta-flashy {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1rem;
    padding: 0.75rem 1.25rem 0.75rem 1.1rem;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 55%, #c2410c 100%);
    background-size: 200% 200%;
    color: #fff;
    border-radius: 8px;
    font-family: 'Oswald', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(234, 88, 12, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-position 0.4s ease;
    animation: profile-badge-pulse 2.8s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

#profile-incomplete-badge::before,
.welcome-cta-flashy::before {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-20deg);
    animation: profile-badge-sheen 3.2s ease-in-out infinite;
}

#profile-incomplete-badge i,
.welcome-cta-flashy i {
    width: 18px;
    height: 18px;
    stroke-width: 2.25;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

#profile-incomplete-badge span,
.welcome-cta-flashy span {
    position: relative;
    z-index: 1;
    white-space: nowrap;
}

#profile-incomplete-badge .arrow,
.welcome-cta-flashy .arrow {
    margin-left: 0.15rem;
    transition: transform 0.18s ease;
}

#profile-incomplete-badge:hover,
.welcome-cta-flashy:hover {
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(234, 88, 12, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    background-position: 100% 0;
    animation-play-state: paused;
}

#profile-incomplete-badge:hover .arrow,
.welcome-cta-flashy:hover .arrow {
    transform: translateX(3px);
}

@keyframes profile-badge-pulse {
    0%, 100% { box-shadow: 0 4px 14px rgba(234, 88, 12, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
    50% { box-shadow: 0 6px 22px rgba(234, 88, 12, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
}

@keyframes profile-badge-sheen {
    0% { left: -60%; }
    60%, 100% { left: 120%; }
}

@media (prefers-reduced-motion: reduce) {
    #profile-incomplete-badge,
    #profile-incomplete-badge::before,
    .welcome-cta-flashy,
    .welcome-cta-flashy::before {
        animation: none;
    }
}

@media (max-width: 600px) {
    #profile-incomplete-badge,
    .welcome-cta-flashy {
        max-width: 100%;
        padding: 0.6rem 0.9rem;
        font-size: 0.78rem;
        letter-spacing: 0.3px;
        text-align: center;
    }
    #profile-incomplete-badge span,
    .welcome-cta-flashy span {
        white-space: normal;
        line-height: 1.25;
    }
}

/* Supervisor activity badge — AP{n} or API{n} */
.supervisor-badge,
.supervisor-badge-ia {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    color: #fff;
    line-height: 1.4;
    white-space: nowrap;
}
.supervisor-badge {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    box-shadow: 0 2px 6px rgba(234, 88, 12, 0.35);
}
.supervisor-badge-ia {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.35);
}
.supervisor-badge-lg {
    padding: 0.4rem 1rem;
    font-size: 1rem;
}

/* Hide reCAPTCHA badge — attribution text shown inline per Google's terms */
.grecaptcha-badge { visibility: hidden; }

/* reCAPTCHA attribution text */
.recaptcha-attribution {
    font-size: 0.85rem;
    color: #3a3a3a;
    line-height: 1.5;
    margin-top: 0.75rem;
}
.recaptcha-attribution a {
    color: #0170B9;
    text-decoration: underline;
}

/* ============================================================
   Visibility dropdown + option cards
   Shared across: apprenticeship-finder.html (student profile +
   OJT visibility) and recruit-apprentices.html (supervisor
   listing visibility). Kept in one place to stay in sync.
   ============================================================ */
.visibility-section { margin-bottom: 16px; }
.visibility-section-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #333;
    margin-bottom: 6px;
}
.visibility-radio-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.visibility-radio-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid #e0e0e0;
    border-left: 3px solid #d0d0d0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    background: #fff;
}
.visibility-radio-option:hover {
    border-color: #ccc;
    background: #fafafa;
}
.visibility-radio-option.active {
    border-left-color: #0170b9;
    background: #f0f7fd;
    border-color: #b3d7f0;
}
.visibility-radio-option.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.visibility-radio-option.disabled:hover {
    background: #fff;
    border-color: #e0e0e0;
}
/* Paid-gated options shown to free users: NOT grayed out — normal colors,
   with the UPGRADE badge acting as a link to the upgrade path. The row body
   isn't selectable (handler ignores .upgrade-locked); only the badge navigates. */
.visibility-radio-option.upgrade-locked { cursor: default; }
.visibility-radio-option.upgrade-locked .visibility-radio-circle { border-color: #ccc; }
.visibility-radio-circle {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #ccc;
    flex-shrink: 0;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}
.visibility-radio-option.active .visibility-radio-circle { border-color: #0170b9; }
.visibility-radio-option.active .visibility-radio-circle::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #0170b9;
}
.visibility-radio-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
}
.visibility-radio-option.active .visibility-radio-label { color: #0170b9; }
.visibility-radio-desc {
    font-size: 0.78rem;
    color: #888;
    margin-top: 0;
    line-height: 1.25;
}
.visibility-radio-option.disabled .visibility-radio-label,
.visibility-radio-option.disabled .visibility-radio-desc { color: #aaa; }
.visibility-upgrade-tag {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #f97316;
    background: #fff7ed;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 6px;
    white-space: nowrap;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
/* When the badge is a link (a.visibility-upgrade-tag), make it feel clickable. */
a.visibility-upgrade-tag:hover { background: #f97316; color: #fff; }

/* Collapsible <details>-based wrapper that hides the option list
   behind a single clickable summary row. */
.visibility-dropdown { position: relative; }
.visibility-dropdown > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid #b3d7f0;
    border-left: 3px solid #0170b9;
    border-radius: 6px;
    background: #f0f7fd;
    transition: all 0.15s ease;
}
.visibility-dropdown > summary::-webkit-details-marker { display: none; }
.visibility-dropdown > summary::marker { content: ''; }
.visibility-dropdown > summary:hover { background: #e6f1fa; }
.visibility-dropdown-summary-body { flex: 1; min-width: 0; }
.visibility-dropdown-summary-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #0170b9;
}
.visibility-dropdown-summary-desc {
    font-size: 0.78rem;
    color: #888;
    line-height: 1.25;
}
.visibility-dropdown-chevron {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: #0170b9;
    transition: transform 0.15s ease;
}
.visibility-dropdown[open] > summary .visibility-dropdown-chevron {
    transform: rotate(180deg);
}
.visibility-dropdown-panel {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
    padding: 6px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
}
/* Free-tier viewers: locked default option drops to the bottom so
   upgrade-tagged options appear above the user's current selection. */
.visibility-dropdown[data-viewer-tier="free"] .visibility-radio-option[data-tier="free"] {
    order: 10;
}

/* ============================================================
   Profile / Listing edit layout
   Shared card + header + status-row styles used by the student
   apprentice profile (apprenticeship-finder.html #my-profile) and
   the supervisor recruit-listing editor (recruit-apprentices.html
   #my-listing). Keep them here so both pages stay pixel-matched.
   ============================================================ */
.profile-filter-header {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.profile-filter-header .profile-title-block { flex: 0 0 auto; }
.profile-filter-header .board-nav { flex: 0 0 auto; }
.profile-filter-header > .profile-help-wrap-desktop { margin-left: auto; }
.profile-help-wrap-mobile { display: none !important; }
.profile-help-wrap-desktop { display: inline-flex; }
@media (max-width: 768px) {
    .profile-filter-header {
        flex-direction: row !important;
        flex-wrap: wrap;
        padding: 0.5rem 0.75rem !important;
        gap: 0.5rem 0.5rem;
        align-items: center !important;
    }
    .profile-filter-header .profile-title-block {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
    }
    .profile-filter-header .profile-title-block h2 {
        font-size: 0.9rem;
        text-align: left;
        white-space: nowrap;
        margin: 0;
    }
    .profile-help-wrap-mobile { display: inline-flex !important; }
    .profile-filter-header > .profile-help-wrap-desktop { display: none; }
    .profile-filter-header .board-nav {
        flex: 1 1 100%;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .profile-filter-header .board-nav-btn {
        flex: 1 1 calc(50% - 0.25rem);
        min-width: calc(50% - 0.25rem);
        text-align: center;
        padding: 0.4rem 0.5rem;
        font-size: 0.72rem;
        white-space: normal;
    }
}

/* Status + visibility top row inside the header card body. 3 columns
   on desktop, stacked on mobile. */
.profile-status-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
    margin-bottom: 16px;
}
.profile-status-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}
@media (max-width: 768px) {
    .profile-status-row {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* Shared form-label style used for non-<label> text labels (like
   Profile Status) so they match the uppercase field labels above. */
.profile-form-label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
}

/* Section cards sit below the header card as siblings and hold each
   chunk of the form (Basic Info, Location, etc.). */
.profile-sections-wrap { margin-top: 1rem; }
.profile-section {
    background: #f8fafc;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    margin-bottom: 1.25rem;
}
.profile-section:last-of-type { margin-bottom: 0; }
.profile-section h3 {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 1.1rem;
    color: #1a3a5c;
    border-bottom: 2px solid #1a3a5c;
    padding-bottom: 0.5rem;
    margin: 0 0 1.25rem 0;
}
.profile-section label {
    font-weight: 600;
    font-size: 0.85rem;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
@media (max-width: 768px) {
    .profile-section {
        padding: 1.25rem 1rem;
        border-radius: 8px;
    }
}

/* Sticky save/view footer bar shared by both edit surfaces.
   Parent JS (IntersectionObserver) parks it above the site footer
   when scrolling; CSS here handles base look + button styling. */
.profile-sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #2a2a2a;
    /* Thin white line under the bar so when it parks above the footer
       the two dark surfaces are visually separated. */
    border-bottom: 1px solid #ffffff;
    padding: 0.6rem 2rem;
    display: none;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    z-index: 100;
}
.profile-sticky-bar.active { display: flex; }
.profile-sticky-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 1.25rem;
    background: #0170b9;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, transform 0.05s;
    line-height: 1.2;
}
.profile-sticky-btn:hover { background: #015a94; }
.profile-sticky-btn:active { transform: translateY(1px); }
.profile-sticky-btn i[data-lucide] {
    width: 16px;
    height: 16px;
    stroke-width: 2.25;
    flex-shrink: 0;
}
@media (max-width: 768px) {
    .profile-sticky-bar {
        padding: 0.5rem 1rem;
    }
    .profile-sticky-btn {
        padding: 0.45rem 0.9rem;
        font-size: 0.8rem;
    }
}

/* ========================================================================
   Global dialog modal + toast (js/components/dialog.js)
   Replaces native browser alert/confirm calls with branded modals that
   match the canonical .modal/.modal-content pattern. Toast surface is
   separate (top-right stack, auto-dismissing).
   ======================================================================== */
.gp-dialog-modal .modal-content { max-width: 460px; }
.gp-dialog-modal .modal-body { font-size: 0.95rem; line-height: 1.5; }
.gp-dialog-modal .modal-body .gp-dialog-message { margin: 0; white-space: pre-wrap; }

.gp-toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}
.gp-toast {
    pointer-events: auto;
    min-width: 240px;
    max-width: 360px;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: gp-toast-in 0.2s ease-out;
}
.gp-toast.removing { animation: gp-toast-out 0.2s ease-in forwards; }
.gp-toast-success { background: #4caf50; }
.gp-toast-info    { background: #0170b9; }
.gp-toast-warning { background: #f0a500; color: #212529; }
.gp-toast-danger  { background: #f44336; }
@keyframes gp-toast-in  { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes gp-toast-out { from { opacity: 1; } to { opacity: 0; transform: translateX(20px); } }

/* ========================================================================
   Red pulsing "new" badge — the canonical pill used for unread-message
   counts ("1 New", "5 New"), freshly-arrived requests the user hasn't
   acted on yet, and "A&P Withdrawn"-style status alerts. Always lives
   in the Actions cell of the row (NOT inside the Status badge — that
   slot belongs to the colored status pill + small dimmed activity-text
   sibling). Slightly tighter than the prior page-scoped declaration in
   apprenticeship-finder.html so the pill sits flush with the row's
   icon buttons without dominating them.
   See memory/reference_new_message_badge.md for the standard.
   ======================================================================== */
.new-message-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: #f44336;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    height: 22px;
    padding: 0 0.6rem;
    border-radius: 6px;
    line-height: 1;
    white-space: nowrap;
    min-width: 20px;
    text-decoration: none;
    animation: pulse 2s infinite;
}
.new-message-badge:hover,
.new-message-badge:visited { color: white; }

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ------------------------------------------------------------------------
   Two-signal "new / owed-action" message indicator (global standard).
   - Signal 1: the "N New" pill (.new-message-badge) in the Actions cell =
     UNSEEN items in the conversation modal. Shows a count, pulses, and clears
     when the modal is opened.
   - Signal 2: .action-icon-dot below = a persistent solid red dot on the
     message icon/button meaning "you still owe an action here" (reply,
     complete Pre-Qual, accept/decline offer, decide Pre-Qual, approve
     reconnect). It persists across stages and is NOT cleared by opening the
     modal — only by doing the action. NO animation (only the pill pulses).
   Pair either with .action-icon-badge-wrap (relative-positioned host).
   NEVER overlay a count on the message icon — counts live in the pill.
   ------------------------------------------------------------------------ */
.action-icon-badge-wrap {
    position: relative;
    display: inline-flex;
}
.action-icon-dot {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 9px;
    height: 9px;
    box-sizing: border-box;
    background: #f44336;
    border-radius: 50%;
    border: 1.5px solid #fff;
    pointer-events: none;
}

/* ========================================================================
   TABLE SORT + PAGINATION STANDARD
   Canonical rules promoted from training-records.html (the source of
   truth). See memory/reference_table_sort_pagination.md for the full
   contract — markup, page-reset rules, button-disabled states, etc.

   Sort affordance: `<th class="sortable">` on a .records-table shows a
   faded ⇅ at rest, swaps to solid ▲ (sort-asc) / ▼ (sort-desc) when
   active. Inline ::after — no inner span, no absolute positioning. DO
   NOT add a th.sortable:hover background tint on the dark gradient
   thead — a white overlay reads as a broken cell.

   Pagination: `<div class="pagination-controls">` is a full-footer bar
   that sits flush under .records-table-container. 25/50/75/100 rows
   per page, First/Prev/Next/Last buttons, "Showing X-Y of N" info.
   Compact 2-button bars are a SEPARATE pattern — use a different class.

   BASE TABLE STYLE (added — single source of truth). Every interactive
   record table uses `.records-table`; pages no longer re-declare the base
   inline. `.mechanics-table` was merged into this. Intentional per-page
   exceptions: admin-media / admin-core-pages / admin-lesson-builder keep
   `table-layout:fixed` (+ colgroup) for their fixed column widths.
   ======================================================================== */
.records-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}
.records-table th {
    background: #3a3a3a;
    color: #fff;
    padding: 0.75rem 0.5rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    line-height: 1.2;
    border-bottom: none;
    border-right: 1px solid #777;
    vertical-align: middle;
}
.records-table th:last-child { border-right: none; }
.records-table td {
    padding: 0.75rem 0.5rem;
    vertical-align: middle;
    font-size: 0.875rem;
    border-bottom: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
    white-space: normal;
}
.records-table td:last-child { border-right: none; }
.records-table tbody tr { background: #fff; border-bottom: 1px solid #f0f0f0; }
.records-table tbody tr:hover { background: #f0f7ff; }

/* In-table ICON buttons — unify the two existing class names (.action-btn from
   recruit/requests, .action-icon from admin-*) to ONE look + 18px icon, so
   icons stop being hand-sized inline on every row. */
.records-table .action-btn,
.records-table .action-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.3rem 0.4rem;
    margin: 0 1px;
    /* width/height:auto neutralizes the legacy .action-icon{width:24px;height:24px}
       (~line 2332) which, under global border-box, ate the content box and shrank
       the flex-child <svg> below 18px (the Learning Center bug). */
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0170b9;            /* default icon color (view/primary); add ONE .action-* modifier below for other roles */
    text-decoration: none;     /* <a> action icons render flat */
    transition: background 0.15s;
}
.records-table .action-btn:hover,
.records-table .action-icon:hover { background: #f0f0f0; }
.records-table .action-btn i, .records-table .action-btn svg,
.records-table .action-icon i, .records-table .action-icon svg { width: 18px; height: 18px; }
.records-table .record-actions { display: flex; gap: 0.25rem; align-items: center; }

/* Semantic action-icon colors — ONE global source of truth. Each role gets a
   distinct color so no two icons in the same Actions cell ever match. Apply at
   most ONE modifier to .action-btn/.action-icon; the icon's <svg>/<i data-lucide>
   must use currentColor. Default (no modifier) = blue (view/primary). */
.records-table .action-success   { color: #16a34a; }   /* send / accept / take-quiz / download */
.records-table .action-edit      { color: #f59e0b; }   /* edit / approve / cancel-subscription */
.records-table .action-delete,
.records-table .action-btn.danger,
.records-table .action-icon.danger { color: #dc3545; } /* delete / decline / dismiss / disconnect */
.records-table .action-records   { color: #475569; }   /* records / clipboard / cert package */
.records-table .action-secondary { color: #a21caf; }   /* view-profile / duplicate / archive / impersonate */
.records-table .action-notes     { color: #ff9800; }   /* notes */
/* in-hue hover tints (replace the gray box for colored icons) */
.records-table .action-success:hover   { background: #f0fdf4; }
.records-table .action-edit:hover      { background: #fffbeb; }
.records-table .action-delete:hover,
.records-table .action-btn.danger:hover,
.records-table .action-icon.danger:hover { background: #fef2f2; }
.records-table .action-records:hover   { background: #f1f5f9; }
.records-table .action-secondary:hover { background: #fdf4ff; }
.records-table .action-notes:hover     { background: #fff7ed; }
/* disabled icon (e.g. no phone on file) — no inline style needed */
.records-table .action-btn.is-disabled,
.records-table .action-icon.is-disabled { opacity: 0.3; cursor: default; }
/* clock toggle (admin-todo time tracking): idle = red, running = green */
.records-table .action-clock.clock-idle { color: #dc3545; }
.records-table .action-clock.clock-idle:hover { background: rgba(220,53,69,0.12); }
.records-table .action-clock.clock-active { color: #22c55e; }
.records-table .action-clock.clock-active:hover { background: rgba(34,197,94,0.12); }

/* In-table TEXT buttons (Sign/Void/View/Records …) — one compact size, SCOPED
   to .records-table so global/modal .btn sizing is untouched. Colour variants
   (.btn-success/.btn-danger/.btn-view/.btn-secondary) keep their own colours. */
.records-table .btn { padding: 0.35rem 0.7rem; font-size: 0.8rem; }

/* ── In-row chip + button COORDINATION (global) ──────────────────────────
   Within a record row, status badges (labels) and action buttons (clickable)
   are different shapes on purpose — badges are 12px pills, buttons are 6px —
   but they must read as ONE system: same height, same font-size, vertically
   centred. We lock all three (status-badge / supervisor rank pill / in-table
   .btn) to a shared min-height + inline-flex centring + 0.8rem font, so a
   "Connected" pill and a "Disconnect" button on the same row line up.
   (Promoted from the per-page apprenticeship-finder rule so every records
   table coordinates the same way.) */
.records-table .status-badge,
.records-table .supervisor-badge,
.records-table .supervisor-badge-ia,
.records-table .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.6rem;
    font-size: 0.8rem;
    line-height: 1;
    box-sizing: border-box;
}
/* Badges stay rounded pills; in-table buttons stay 6px; icon buttons get a
   small radius so they aren't sharp-cornered next to the rounded chips. */
.records-table .status-badge { border-radius: 12px; }
.records-table .btn { border-radius: 6px; }
.records-table .action-btn,
.records-table .action-icon { border-radius: 4px; }

/* Mobile: keep rows short (≤~3 lines) by widening columns; the table overflows
   and .table-scroll (overflow-x:auto) lets it swipe sideways. First column is
   typically a lock/checkbox/icon — keep it narrow. */
@media (max-width: 768px) {
    .records-table th, .records-table td { min-width: 8em; }
    .records-table th:first-child, .records-table td:first-child { min-width: 3.5em; }
}

/* Horizontal-scroll affordance for record tables — an always-visible dark-gray
   scrollbar on the table scroller (desktop/Android/Firefox; iOS hides overlay
   scrollbars regardless). */
/* Record-table card box — ONE global source of truth (was duplicated in ~8 page
   <style> blocks). Top-only radius: the bottom edge is closed by the pagination
   footer. Pages override locally only for a real difference: full radius when
   there's no footer (video-lessons, admin-feedback), a parent that already draws
   the card (recruit / signed-records / supervisor-students / admin-web-flows
   neutralize it), or a distinct public look (supervisor-locations #94a3b8). */
.records-table-container {
    background: #fff;
    border: 1px solid #d1d5db;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    overflow: hidden;
}
.records-table-container .table-scroll { overflow-x: auto; }

.records-table-container .table-scroll { scrollbar-color: #6c757d #e2e8f0; }
.records-table-container .table-scroll::-webkit-scrollbar { height: 8px; }
.records-table-container .table-scroll::-webkit-scrollbar-track { background: #e2e8f0; border-radius: 4px; }
.records-table-container .table-scroll::-webkit-scrollbar-thumb { background: #6c757d; border-radius: 4px; }
.records-table-container .table-scroll::-webkit-scrollbar-thumb:hover { background: #5a6268; }

/* Horizontal-scroll arrows injected into the pagination bar corners by
   js/components/footer.js (initTableScrollArrows). The right arrow shows when
   there's more table to the right, the left arrow when you can scroll back;
   each hides at its end (and both hide if the table doesn't overflow).
   Pure indicators — not clickable. */
.pagination-scroll-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 6px;
    color: #0170b9;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
.pagination-scroll-arrow.show { opacity: 1; visibility: visible; }
@keyframes gp-arrow-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2px); } }
.pagination-scroll-arrow.scroll-right.show { animation: gp-arrow-nudge 1.2s ease-in-out infinite; }
.pagination-scroll-arrow.scroll-left.show { animation: gp-arrow-nudge 1.2s ease-in-out infinite reverse; }

.records-table th.sortable {
    cursor: pointer;
    user-select: none;
}
.records-table th.sortable::after {
    content: ' ⇅';
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    margin-left: 0.25rem;
    display: inline-block;
    vertical-align: middle;
}
.records-table th.sort-asc::after {
    content: ' ▲';
    color: #ffffff;
    font-size: 0.75rem;
    margin-left: 0.25rem;
    display: inline-block;
    vertical-align: middle;
}
.records-table th.sort-desc::after {
    content: ' ▼';
    color: #ffffff;
    font-size: 0.75rem;
    margin-left: 0.25rem;
    display: inline-block;
    vertical-align: middle;
}

.pagination-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    /* Light gray (matches the global modal-footer) so the footer bar reads
       as a distinct band instead of blending into the white table rows. */
    background: #f8f9fa;
    border: 1px solid #d1d5db;
    border-top: 1px solid #e0e0e0;
    border-radius: 0 0 12px 12px;
    gap: 1rem;
    flex-wrap: wrap;
}
.pagination-info {
    font-size: 0.875rem;
    color: #666;
}
.pagination-controls-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.pagination-per-page {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #666;
}
.pagination-per-page select {
    padding: 0.4rem 0.6rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.875rem;
    font-family: inherit;
    cursor: pointer;
    background: #ffffff;
}
.pagination-buttons {
    display: flex;
    gap: 0.5rem;
}
.pagination-buttons button {
    padding: 0.4rem 0.8rem;
    border: 1px solid #d1d5db;
    background: #ffffff;
    border-radius: 6px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
    color: #333;
}
.pagination-buttons button:hover:not(:disabled) {
    background: #f8f9fa;
    border-color: #0170b9;
    color: #0170b9;
}
.pagination-buttons button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.pagination-buttons button.active {
    background: #0170b9;
    color: #ffffff;
    border-color: #0170b9;
}

@media (max-width: 768px) {
    .pagination-controls {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
    }
    .pagination-info {
        font-size: 0.8rem;
    }
    .pagination-controls-right {
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
    }
    .pagination-per-page {
        justify-content: center;
        font-size: 0.8rem;
    }
    .pagination-buttons {
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
    }
    .pagination-buttons button {
        flex: 1;
        padding: 0.45rem 0.4rem;
        font-size: 0.8rem;
    }
}

/* ============================================================
   FEATURE CARD GRID STANDARD — reusable icon-on-top cards.
   Centered circular icon tile, bold heading, subtext. Use for
   audience / use-case / feature grids. Wrap cards in .gp-card-grid
   (defaults to a responsive 2-up; add .cols-3 for a 3-up grid).
   Cards stack to one column on mobile. Icons: inline SVG with
   stroke:currentColor so they inherit the blue tile color.
   ============================================================ */
.gp-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.gp-card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.gp-feature-card {
    background: #fff;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: 2rem 1.75rem;
    box-shadow: 0 6px 20px rgba(15, 42, 74, 0.10);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.gp-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(15, 42, 74, 0.16);
    border-color: var(--color-primary);
}
.gp-feature-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: #eef5fb;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.gp-feature-icon svg { width: 26px; height: 26px; }
.gp-feature-card h3 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: #1a1a1a;
    margin: 0 0 0.4rem;
}
.gp-feature-card p {
    font-size: 0.92rem;
    color: var(--color-text-light);
    margin: 0;
    line-height: 1.55;
}
@media (max-width: 768px) {
    .gp-card-grid, .gp-card-grid.cols-3 { grid-template-columns: 1fr; }
}

/* ============================================================
   GLOBAL FAQ STANDARD — collapsible <details> accordion, lifted
   from the free-signup-landing design. ONE component, two variants:
     .gp-faq            -> LIGHT background (default)
     .gp-faq .gp-faq--dark (add gp-faq--dark on the wrapper) -> DARK bg
   Markup contract:
     <div class="gp-faq [gp-faq--dark]">
       <details class="gp-faq-item">
         <summary>Question</summary>            (plain text question)
         <div class="gp-faq-a"><p>Answer</p></div>
       </details>
       <details class="gp-faq-item">
         <summary><h3 class="gp-faq-q">Question</h3></summary>   (keep an SEO heading)
         <div class="gp-faq-a"><p>Answer</p></div>
       </details>
     </div>
   No JS — native <details>. The +/- toggle is a CSS ::after on the
   summary (orange in both variants). Never hand-roll page-scoped
   .faq-* styles — use this component for every FAQ.
   ============================================================ */
.gp-faq { display: flex; flex-direction: column; gap: 0.85rem; }
.gp-faq-item {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.25rem 1.5rem;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.gp-faq-item:hover { border-color: #cbd5e1; }
.gp-faq-item[open] { border-color: rgba(249, 115, 22, 0.55); }
.gp-faq-item > summary {
    list-style: none;
    cursor: pointer;
    padding: 1.15rem 0;
    font-family: 'Quicksand', var(--font-heading, 'Oswald'), sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1a2e;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.gp-faq-item > summary::-webkit-details-marker { display: none; }
.gp-faq-item > summary::after {
    content: '+';
    font-family: 'Quicksand', sans-serif;
    font-size: 1.75rem;
    font-weight: 400;
    color: #f97316;
    flex-shrink: 0;
    line-height: 1;
    transition: transform 0.15s ease;
}
.gp-faq-item[open] > summary::after { content: '\2212'; }
/* Question rendered as an <h3> inside the summary (location + blog FAQs keep
   the heading for SEO); make it look exactly like the summary text. */
.gp-faq-item > summary .gp-faq-q { margin: 0; padding: 0; font: inherit; color: inherit; text-transform: none; letter-spacing: normal; }
.gp-faq-a { padding: 0 2.5rem 1.1rem 0; color: #475569; font-size: 1rem; line-height: 1.65; }
.gp-faq-a > :first-child { margin-top: 0; }
.gp-faq-a > :last-child { margin-bottom: 0; }
.gp-faq-a p { color: inherit; }
.gp-faq-a ul, .gp-faq-a ol { margin: 0.6rem 0; padding-left: 1.25rem; }
.gp-faq-a li { margin-bottom: 0.4rem; }
.gp-faq-a a { color: var(--color-primary, #0170b9); text-decoration: underline; }

/* DARK variant — translucent cards on a dark band (e.g. free-signup-landing). */
.gp-faq--dark .gp-faq-item { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.12); }
.gp-faq--dark .gp-faq-item:hover { border-color: rgba(255, 255, 255, 0.25); }
.gp-faq--dark .gp-faq-item[open] { background: rgba(255, 255, 255, 0.06); border-color: rgba(249, 115, 22, 0.5); }
.gp-faq--dark .gp-faq-item > summary { color: #ffffff; }
.gp-faq--dark .gp-faq-a { color: rgba(255, 255, 255, 0.78); }
.gp-faq--dark .gp-faq-a a { color: #fbbf24; }
.gp-faq--dark .gp-faq-a a:hover { color: #fde68a; }

@media (max-width: 768px) {
    .gp-faq-item { padding: 0.15rem 1.1rem; }
    .gp-faq-item > summary { font-size: 1rem; padding: 1rem 0; }
}

/* ===== Members-only lesson locked preview (api/blog-post-page.js: buildLockedVideo / buildUnlockBand) ===== */
.gp-locked-video {
    display: block;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
}
.gp-locked-video img {
    display: block;
    filter: brightness(0.55);
    transition: filter 0.2s ease, transform 0.3s ease;
}
.gp-locked-video:hover img {
    filter: brightness(0.45);
    transform: scale(1.02);
}
.gp-lock-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    text-align: center;
    padding: 1rem;
}
.gp-lock-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    padding: 1.25rem 1.9rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    max-width: 88%;
}
.gp-lock-card svg { color: #fff; margin-bottom: 0.25rem; }
.gp-lock-card strong { font-size: 1.15rem; font-weight: 700; }
.gp-lock-card span { font-size: 0.9rem; opacity: 0.9; }

.gp-unlock-band {
    margin: 1.5rem 0;
    padding: 2rem 1.5rem;
    text-align: center;
    background: linear-gradient(135deg, #eef5fb 0%, #e3eefb 100%);
    border: 1px solid #cbe0f5;
    border-radius: 12px;
}
.gp-unlock-band svg { color: #0170b9; margin-bottom: 0.5rem; }
.gp-unlock-band h3 { margin: 0 0 0.5rem; font-size: 1.25rem; color: #1e293b; }
.gp-unlock-band p { margin: 0 0 1.25rem; color: #475569; }

/* Members-only lesson banner (above the video) — dark conversion panel.
   Matches the lesson page's own dark "On this page" rail / quiz card and the
   site's high-conversion CTA gradient. Free preview vs members-unlock. */
.gp-member-banner {
    margin: 0 0 1.5rem;
    padding: 1.75rem 1.75rem 2rem;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #0170b9 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 6px 22px rgba(15, 23, 42, 0.28);
    color: #e2e8f0;
}
.gp-member-banner-eyebrow {
    display: inline-flex; align-items: center; gap: 0.4rem;
    color: #f97316; font-weight: 700; font-size: 0.8rem;
    letter-spacing: 0.12em; text-transform: uppercase;
}
.gp-member-banner-eyebrow svg { flex-shrink: 0; }
.gp-member-banner-title {
    margin: 0.55rem 0 0; padding: 0; border: 0;
    font-family: 'Oswald', sans-serif;
    font-size: 1.6rem; font-weight: 600; line-height: 1.15;
    color: #fff; text-transform: uppercase; letter-spacing: 0.4px;
}
.gp-member-banner-sub { margin: 0.5rem 0 1.4rem; color: #cbd5e1; font-size: 1rem; line-height: 1.5; }
/* Members-unlock list: plain text on the banner background (no card), green checkmarks. */
.gp-member-unlock-title { margin: 0 0 0.7rem; font-size: 1.05rem; font-weight: 700; color: #fff; }
.gp-member-unlock-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.5rem; }
.gp-member-unlock-list li { position: relative; padding-left: 1.6rem; color: #e2e8f0; font-size: 0.98rem; line-height: 1.45; }
.gp-member-unlock-list li::before { content: "\2713"; position: absolute; left: 0; color: #34d399; font-weight: 700; }
.gp-member-unlock-list li a { color: #7cc4f5; font-weight: 600; text-decoration: underline; }
.gp-member-unlock-list li a:hover { color: #fff; }
@media (max-width: 640px) { .gp-member-unlock-list { grid-template-columns: 1fr; } }
.gp-member-banner-cta {
    margin-top: 1.5rem; display: inline-flex; align-items: center;
    background: #f97316; border-color: #f97316; color: #fff;
}
.gp-member-banner-cta:hover { background: #ea670c; border-color: #ea670c; color: #fff; }

/* ===== Global on-page section nav / "jump to" (dark slate pill rail) =====
   Single source of truth. Page templates use class="gp-section-nav".
   Used by lessons (with the .lesson-nav prev/next navigator), insights,
   supervisor listings, and public profiles. */
.gp-section-nav {
    display: flex; flex-direction: column; gap: 1rem;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px; padding: 1.1rem 1.25rem; margin: 0 0 1.5rem;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.22);
}
/* Lesson navigator (lessons only): circular prev/next + progress bar */
.gp-section-nav .lesson-nav { display: flex; align-items: center; gap: 0.85rem; }
.gp-section-nav .lesson-nav-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08); color: #fff; text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.gp-section-nav .lesson-nav-btn:hover {
    background: var(--color-primary, #0170b9); color: #fff;
    border-color: var(--color-primary, #0170b9);
    box-shadow: 0 2px 10px rgba(1, 112, 185, 0.45);
}
.gp-section-nav .lesson-nav-btn.is-disabled {
    color: rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08); pointer-events: none;
}
.gp-section-nav .lesson-nav-progress {
    display: flex; flex-direction: column; gap: 0.4rem;
    flex: 1; min-width: 0; text-decoration: none;
}
.gp-section-nav .lesson-nav-count {
    font-size: 1.1rem; font-weight: 700; color: #fff; letter-spacing: 0.2px;
}
.gp-section-nav .lesson-nav-count span { color: rgba(255, 255, 255, 0.5); font-weight: 600; margin: 0 0.15rem; }
.gp-section-nav .lesson-nav-bar { height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.15); overflow: hidden; }
.gp-section-nav .lesson-nav-bar > span {
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #0190e8, #38bdf8);
    transition: width 0.3s ease;
}
/* Jump-to: horizontal scrolling chip rail */
.gp-section-nav .section-nav-rail { display: flex; flex-direction: column; gap: 0.5rem; }
.gp-section-nav .section-nav-label {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.6px; color: rgba(255, 255, 255, 0.6);
}
.gp-section-nav .section-nav-buttons {
    display: flex; gap: 0.5rem; align-items: center;
    overflow-x: auto; padding-bottom: 4px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.gp-section-nav .section-nav-buttons::-webkit-scrollbar { display: none; }
.gp-section-nav .section-jump {
    display: inline-flex; align-items: center; white-space: nowrap; flex-shrink: 0;
    scroll-snap-align: start;
    padding: 0.5rem 0.95rem; border-radius: 999px;
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff;
    font-size: 0.8rem; font-weight: 600; text-decoration: none; cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.gp-section-nav .section-jump:hover, .gp-section-nav .section-jump:focus {
    background: var(--color-primary, #0170b9); color: #fff; border-color: var(--color-primary, #0170b9);
    box-shadow: 0 2px 10px rgba(1, 112, 185, 0.45);
}
@media (max-width: 768px) {
    .gp-section-nav { padding: 0.9rem 1rem; gap: 0.85rem; }
}

/* Hero meta line — small orange label before each value (lesson + insight post heroes).
   Each item stays whole on wrap; the .hero-meta flex gap handles spacing (no dividers). */
.hero-meta-item { white-space: nowrap; }
.hero-meta-label {
    color: #e8860c; font-weight: 700; text-transform: uppercase;
    font-size: 0.9rem; letter-spacing: 0.5px; margin-right: 0.15rem;
}