/* Hide scrollbars like mobile */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Hide scrollbar for Firefox */
    scrollbar-width: none;
    /* Hide scrollbar for IE and Edge Legacy */
    -ms-overflow-style: none;
}

/* Hide scrollbars for webkit browsers (Chrome, Safari, Edge) */
*::-webkit-scrollbar {
    display: none;
}

:root {
    --primary: #3b82f6;
    --primary-dark: #2563eb;
    --secondary: #8b5cf6;
    --success: #10b981;
    --danger: #ef4444;
    --dark: #1e293b;
    --gray: #64748b;
    --light-gray: #f1f5f9;
    --white: #ffffff;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: var(--dark);
    background: var(--white);
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 1rem 0;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark);
    text-decoration: none;
    cursor: pointer;
}

.logo-accent {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-links {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.nav-links a {
    text-decoration: none;
    color: var(--gray);
    font-weight: 500;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: var(--primary);
}

.nav-links a.btn-primary {
    color: var(--white);
}

.btn {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

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

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}

.btn-outline {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
}

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

/* Main Tabs */
.main-tabs {
    position: fixed;
    top: 73px;
    width: 100%;
    background: var(--white);
    border-bottom: 2px solid var(--light-gray);
    z-index: 999;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 0 2rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
}

.main-tabs::-webkit-scrollbar {
    display: none;
}

.main-tab {
    padding: 1.25rem 2rem;
    border: none;
    background: transparent;
    cursor: pointer;
    font-weight: 600;
    color: var(--gray);
    transition: all 0.3s;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    font-size: 1rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.main-tab:hover {
    color: var(--primary);
}

.main-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.tab-content {
    display: none;
    padding-top: 145px;
    min-height: 100vh;
}

.tab-content.active {
    display: block;
}

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

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--dark);
}

.section-subtitle {
    font-size: 1.25rem;
    color: var(--gray);
    margin-bottom: 3rem;
}

/* What is FCM Styles */
.fcm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    margin-top: 3rem;
    align-items: start;
}

.fcm-content h3 {
    font-size: 1.75rem;
    margin-bottom: 1rem;
    color: var(--dark);
}

.fcm-content p {
    color: var(--gray);
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}

.fcm-benefits {
    list-style: none;
    margin-top: 2rem;
}

.fcm-benefits li {
    padding: 1rem;
    background: var(--light-gray);
    border-radius: 8px;
    margin-bottom: 1rem;
    display: flex;
    align-items: start;
    gap: 1rem;
}

.fcm-benefits li::before {
    content: '\2713';
    color: var(--success);
    font-weight: bold;
    font-size: 1.5rem;
    flex-shrink: 0;
}

/* Network Visualization */
.network-container {
    background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
    border-radius: 16px;
    padding: 2rem;
    min-height: 500px;
    position: relative;
}

.network-canvas {
    width: 100%;
    height: 500px;
    position: relative;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.network-node {
    position: absolute;
    width: 100px;
    height: 100px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
     font-size: 0.8rem;
    text-align: center;
    padding: 0.5rem;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    transition: all 0.3s;
     z-index: 10;
     cursor: pointer;
}

.network-node:hover {
    transform: scale(1.15);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.6);
    z-index: 20;
}

.legend {
    margin-top: 1rem;
    padding: 1rem;
    background: white;
    border-radius: 8px;
    display: flex;
    gap: 2rem;
    justify-content: center;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.legend-line {
    width: 40px;
    height: 4px;
    border-radius: 2px;
}

.legend-line.positive {
    background: var(--primary);
}

.legend-line.negative {
    background: var(--danger);
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.feature-card {
    padding: 2rem;
    background: var(--light-gray);
    border-radius: 12px;
    transition: all 0.3s;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    background: white;
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.feature-card h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--dark);
}

.feature-card p {
    color: var(--gray);
}

/* Use Cases */
.use-cases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.use-case-card {
    padding: 2.5rem;
    background: linear-gradient(135deg, var(--light-gray) 0%, white 100%);
    border-radius: 16px;
    border-left: 4px solid var(--primary);
    transition: all 0.3s;
    cursor: pointer;
    position: relative;
}

.use-case-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-left-width: 6px;
}

.use-case-card::after {
    content: '\1F449 Click to see example';
    position: absolute;
    bottom: 1rem;
    right: 1.5rem;
    color: var(--primary);
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.3s;
}

.use-case-card:hover::after {
    opacity: 1;
}

/* Use Case Demo Modal */
.use-case-demo-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    z-index: 2000;
    padding: 2rem;
    overflow-y: auto;
}

.use-case-demo-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo-content {
    background: white;
    border-radius: 20px;
    max-width: 1400px;
    width: 100%;
    max-height: 95vh;
    overflow-y: auto;
    position: relative;
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.demo-header {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    padding: 2.5rem;
    border-radius: 20px 20px 0 0;
    position: relative;
}

.demo-close-btn {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s;
}

.demo-close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.demo-body {
    padding: 2.5rem;
}

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

.demo-section h3 {
    color: var(--dark);
    font-size: 1.5rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 2rem;
    margin-top: 1.5rem;
}

.comparison-card {
    background: var(--light-gray);
    border-radius: 12px;
    padding: 1.5rem;
    border: 2px solid transparent;
    transition: all 0.3s;
}

.comparison-card:hover {
    border-color: var(--primary);
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.2);
}

.comparison-card h4 {
    color: var(--dark);
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.network-preview {
    width: 100%;
    height: 300px;
    background: white;
    border-radius: 8px;
    margin-bottom: 1rem;
    border: 1px solid #e2e8f0;
}

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

.insight-list li {
    padding: 0.75rem 0;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: start;
    gap: 0.5rem;
}

.insight-list li:last-child {
    border-bottom: none;
}

.insight-icon {
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.stat-box {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    border: 2px solid var(--primary);
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
    display: block;
}

.stat-label {
    font-size: 0.85rem;
    color: var(--gray);
    display: block;
    margin-top: 0.25rem;
}

.cta-box {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    margin-top: 2rem;
}

.cta-box h3 {
    color: white;
    margin-bottom: 1rem;
}

.cta-box .btn {
    background: white;
    color: var(--primary);
    font-weight: 600;
}

.cta-box .btn:hover {
    transform: scale(1.05);
}

.use-case-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.use-case-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--dark);
}

.use-case-card p {
    color: var(--gray);
    margin-bottom: 1rem;
}

.use-case-example {
    font-style: italic;
    color: var(--primary);
    font-size: 0.95rem;
}

/* Pricing */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.pricing-card {
    background: var(--white);
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s;
    position: relative;
    border: 2px solid var(--light-gray);
}

.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.pricing-card.featured {
    border: 3px solid var(--primary);
    transform: scale(1.05);
}

.pricing-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: var(--white);
    padding: 0.5rem 1.5rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.875rem;
}

.pricing-card h3 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    color: var(--dark);
}

.pricing-card .price {
    font-size: 3rem;
    font-weight: 800;
    color: var(--primary);
    margin: 1rem 0;
}

.pricing-card .price span {
    font-size: 1.25rem;
    color: var(--gray);
    font-weight: 400;
}

.pricing-features {
    list-style: none;
    margin: 2rem 0;
}

.pricing-features li {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--light-gray);
    color: var(--gray);
}

.pricing-features li::before {
    content: '\2713';
    color: var(--success);
    font-weight: bold;
    margin-right: 0.5rem;
}

.pricing-features li.unavailable {
    opacity: 0.5;
}

.pricing-features li.unavailable::before {
    content: '\2013';
    color: var(--gray);
}

.pricing-cta-enterprise {
    text-align: center;
    margin-top: 40px;
    padding: 40px 20px;
    background: var(--white);
    border-radius: 12px;
    border: 1px solid var(--light-gray);
}

.pricing-cta-enterprise h3 {
    font-size: 1.5rem;
    margin-bottom: 12px;
    color: var(--dark);
}

.pricing-cta-enterprise p {
    color: var(--gray);
    margin-bottom: 20px;
}

/* Pricing Sub-Tabs */
.pricing-tabs {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 2rem 0;
    flex-wrap: wrap;
}

.pricing-tab {
    background: white;
    border: 2px solid var(--light-gray);
    padding: 0.875rem 1.75rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    color: var(--gray);
}

.pricing-tab:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.pricing-tab.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.pricing-tab-content {
    margin-top: 2rem;
    display: none;
}

.pricing-tab-content.active {
    display: block;
}

/* Demo specific */
.demo-tabs {
    display: flex;
    gap: 1rem;
    margin: 2rem 0;
    border-bottom: 2px solid var(--light-gray);
}

.demo-tab {
    padding: 1rem 2rem;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gray);
    transition: all 0.3s;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}

.demo-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.demo-content-inner {
    display: none;
    padding: 2rem 0;
}

.demo-content-inner.active {
    display: block;
}

.model-info {
    background: var(--light-gray);
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
}

.concept-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}

.concept-tag {
    padding: 0.75rem 1rem;
    background: var(--primary);
    color: white;
    border-radius: 8px;
    text-align: center;
    font-weight: 500;
    transition: all 0.3s;
}

.concept-tag:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Footer */
.footer {
    background: var(--dark);
    color: var(--white);
    padding: 2rem;
    text-align: center;
    margin-top: 4rem;
}

.footer p {
    opacity: 0.8;
}

/* Workflow Section Styles */
.workflow-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.workflow-card {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    position: relative;
    transition: transform 0.3s, box-shadow 0.3s;
}

.workflow-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.2);
}

.workflow-number {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.25rem;
}

.workflow-icon {
    font-size: 3rem;
    margin: 1rem 0;
}

.workflow-card h3 {
    font-size: 1.25rem;
    color: var(--dark);
    margin-bottom: 0.75rem;
}

.workflow-card p {
    color: var(--gray);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.workflow-link {
    display: inline-block;
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s;
}

.workflow-link:hover {
    color: var(--primary-dark);
}

/* Hamburger Menu Styles */
.hamburger-menu {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

.hamburger-menu span {
    width: 25px;
    height: 3px;
    background: var(--dark);
    border-radius: 3px;
    transition: all 0.3s;
}

.hamburger-menu.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger-menu.active span:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* Responsive */
@media (max-width: 968px) {
    .fcm-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .main-tabs {
        justify-content: flex-start;
    }

    .main-tab {
        padding: 1rem 1.5rem;
    }

    .pricing-card.featured {
        transform: none;
    }
}

/* ===================================
   MOBILE RESPONSIVENESS
   =================================== */

/* Tablets and smaller (768px)
   Nav links collapse to hamburger at this breakpoint now */
@media (max-width: 768px) {
    /* Typography */
    .section-title {
        font-size: 2rem !important;
    }

    .section-subtitle {
        font-size: 1rem !important;
    }

    h2 {
        font-size: 1.5rem !important;
    }

    h3 {
        font-size: 1.25rem !important;
    }

    /* Layout spacing */
    .content-section {
        padding: 2rem 1rem !important;
    }

    .tab-content {
        padding-top: 120px !important;
    }

    /* Navigation — collapse to hamburger at 768px */
    .nav-container {
        padding: 0 1rem;
    }

    .hamburger-menu {
        display: flex;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        flex-direction: column;
        padding: 1rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        gap: 1rem;
        z-index: 999;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links a,
    .nav-links .btn {
        width: 100%;
        text-align: center;
        font-size: 1rem;
    }

    .btn {
        padding: 0.65rem 1.25rem;
        font-size: 0.9rem;
    }

    /* Main tabs — horizontal scroll with fade hint */
    .main-tabs {
        padding: 0 1rem;
        gap: 0.25rem;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to right, transparent, black 1rem, black calc(100% - 2rem), transparent);
        mask-image: linear-gradient(to right, transparent, black 1rem, black calc(100% - 2rem), transparent);
    }

    .main-tabs::-webkit-scrollbar {
        display: none;
    }

    .main-tab {
        padding: 1rem 1.25rem;
        font-size: 0.9rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Grids to 2 columns */
    .features-grid,
    .use-cases-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem;
    }

    .pricing-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem;
    }

    /* Workflow grid to 2 columns (third card spans both) */
    .workflow-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .workflow-card:last-child {
        grid-column: 1 / -1;
        max-width: 400px;
        margin: 0 auto;
    }

    /* Cards */
    .feature-card,
    .use-case-card,
    .pricing-card {
        padding: 1.5rem;
    }

    .pricing-card.featured {
        transform: none;
    }

    /* Network visualization */
    .network-canvas {
        height: 400px !important;
    }

    /* Intervention optimizer demo */
    .intervention-range-labels {
        font-size: 0.6rem;
    }

    .intervention-value {
        font-size: 0.85rem;
    }

    /* Causal findings / analysis panels */
    .causal-findings {
        font-size: 0.9rem;
    }

    .analysis-panel-title {
        font-size: 0.95rem;
    }

    .analysis-panel-subtitle {
        font-size: 0.75rem;
    }

    /* AI recommendation card */
    .ai-recommendation-card {
        font-size: 0.9rem;
    }

    .ai-recommendation-card .btn {
        width: 100%;
        margin-top: 0.5rem;
    }

    /* Legend items stack vertically */
    .legend {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* Mobile phones (480px) */
@media (max-width: 480px) {
    /* Typography - smaller */
    .section-title {
        font-size: 1.75rem !important;
        line-height: 1.3;
    }

    .section-subtitle {
        font-size: 0.95rem !important;
    }

    /* Hero waitlist section */
    #tab-waitlist .section-title {
        font-size: 2rem !important;
    }

    /* Spacing */
    .content-section {
        padding: 1.5rem 1rem !important;
    }

    .complete-solution-section {
        padding: 2.5rem 1rem !important;
    }

    /* Nav already collapsed at 768px — just shrink logo */
    .logo {
        font-size: 1.25rem;
    }

    /* Main tabs — tighter on phone */
    .main-tabs {
        padding: 0 0.5rem;
    }

    .main-tab {
        padding: 0.85rem 1rem;
        font-size: 0.85rem;
    }

    /* All grids to single column */
    .features-grid,
    .use-cases-grid,
    .pricing-grid,
    .workflow-grid,
    .fcm-grid,
    .comparison-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }

    /* Center the FCM example network on mobile */
    .fcm-grid .network-container {
        margin: 0 auto;
        min-height: 420px;
    }

    .fcm-grid .network-canvas {
        height: 380px !important;
    }

    .workflow-card:last-child {
        grid-column: auto;
        max-width: none;
    }

    /* Cards */
    .feature-card,
    .use-case-card,
    .pricing-card,
    .workflow-card {
        padding: 1.25rem;
    }

    /* Forms */
    input[type="email"],
    input[type="text"],
    textarea,
    select {
        font-size: 16px !important;
        min-height: 44px;
    }

    button,
    .btn {
        min-height: 44px;
        font-size: 1rem !important;
    }

    /* Pricing billing toggle */
    .billing-toggle-container {
        font-size: 0.9rem;
    }

    /* Network visualization */
    .network-canvas {
        height: 300px !important;
    }

    /* Demo tabs */
    .demo-tabs {
        flex-direction: column;
        gap: 0.5rem;
    }

    .demo-tab {
        width: 100%;
        text-align: center;
    }

    /* Pricing tabs */
    .pricing-tabs {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .pricing-tab {
        flex: 1 1 45%;
        min-width: 140px;
    }

    /* Hamburger/nav already collapsed at 768px */

    /* Intervention sliders — tighter on phone */
    .intervention-slider-group {
        gap: 0.3rem;
    }

    .intervention-range-labels {
        font-size: 0.55rem;
    }

    .impact-label {
        min-width: 70px;
        font-size: 0.75rem;
    }

    .impact-value {
        font-size: 0.8rem;
    }
}

/* Small phones (360px) */
@media (max-width: 360px) {
    .section-title {
        font-size: 1.5rem !important;
    }

    .logo {
        font-size: 1.1rem;
    }

    .main-tab {
        padding: 0.75rem 0.85rem;
        font-size: 0.8rem;
    }

    .workflow-icon {
        font-size: 2.5rem;
    }

    .feature-icon {
        font-size: 2.5rem;
    }
}

/* Landscape phones */
@media (max-width: 768px) and (orientation: landscape) {
    .tab-content {
        padding-top: 100px !important;
    }

    .network-canvas {
        height: 250px !important;
    }
}

/* =========================================================================
   Utility Classes (added for CSP compliance - no inline styles)
   ========================================================================= */

.hidden {
    display: none !important;
}

body.modal-open {
    overflow: hidden;
}

/* Billing toggle label states */
.billing-label-active {
    font-weight: bold;
    color: var(--primary);
}

.billing-label-inactive {
    font-weight: normal;
    color: var(--gray);
}

/* Contact form message states */
.contact-msg {
    display: block;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-top: 1rem;
    font-size: 0.95rem;
}

.contact-msg.hidden {
    display: none !important;
}

.contact-msg-success {
    background: #d4edda;
    color: #155724;
}

.contact-msg-error {
    background: #f8d7da;
    color: #721c24;
}

/* Demo use-case modal template styles */
.demo-heading-icon {
    font-size: 1.5rem;
}

.demo-challenge-text {
    font-size: 1.1rem;
    color: var(--gray);
    line-height: 1.8;
}

.stat-box-secondary {
    border-color: var(--secondary);
}

.stat-box-success {
    border-color: var(--success);
}

.cta-description {
    margin-bottom: 1.5rem;
    opacity: 0.9;
}

/* ===================================
   CSP-COMPLIANT SEMANTIC CLASSES
   Replacing ALL inline style="" attributes
   =================================== */

/* Hero Section (Waitlist Tab) */
.hero-section {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    padding: 4rem 2rem;
}

.hero-title {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.hero-subtitle {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    color: var(--gray);
}

.mental-model-link {
    color: var(--primary);
    text-decoration: underline;
    cursor: pointer;
}

/* Problem-Agitate-Solution Card */
.problem-card {
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    padding: 2.5rem;
    border-radius: 16px;
    margin-bottom: 2.5rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #bae6fd;
}

.problem-card-title {
    color: var(--primary);
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.problem-card-body {
    text-align: left;
    color: #0c4a6e;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.problem-card-body p {
    margin-bottom: 1rem;
}

.problem-card-body p:last-child {
    margin: 0;
}

.solution-highlight {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

.solution-highlight p {
    margin: 0;
    color: white;
    font-weight: 600;
    font-size: 1.15rem;
    text-align: center;
}

/* Waitlist Form Area */
.waitlist-form-container {
    background: var(--light-gray);
    padding: 2.5rem;
    border-radius: 16px;
    max-width: 600px;
    margin: 0 auto 3rem;
}

.waitlist-form-title {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--dark);
}

.waitlist-form-desc {
    font-size: 0.95rem;
    color: var(--gray);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

/* Founding Member banner (waitlist form) */
.founding-member-banner {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(59, 130, 246, 0.12) 100%);
    border: 1px solid rgba(37, 99, 235, 0.25);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.founding-member-banner p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--dark);
    line-height: 1.5;
}

.founding-member-banner i {
    color: #f59e0b;
    margin-right: 0.25rem;
}

/* Optional-field label hint */
.form-label-optional {
    font-weight: 400;
    color: var(--gray);
    font-size: 0.85rem;
    margin-left: 0.25rem;
}

.mb-3 {
    margin-bottom: 1rem;
}

.mb-3-lg {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--dark);
}

.form-input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 1rem;
}

.form-textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 1rem;
    resize: vertical;
}

.form-submit-btn {
    width: 100%;
    font-size: 1.1rem;
    padding: 1rem;
}

/* Waitlist Success */
.waitlist-success {
    text-align: center;
    padding: 2rem;
}

.waitlist-success-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.waitlist-success h3 {
    color: var(--success);
    margin-bottom: 0.5rem;
}

.waitlist-position-text {
    margin-top: 1rem;
    font-weight: 600;
    color: var(--dark);
}

/* Waitlist Error */
.waitlist-error {
    padding: 1rem;
    background: #fee;
    border-radius: 8px;
    color: var(--danger);
    text-align: center;
}

/* Choose Your Path Section */
.path-section {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #e2e8f0;
}

.path-section-title {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 2rem;
    color: var(--dark);
}

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

.path-card {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.path-card .btn {
    margin-top: auto;
}

.path-card-featured {
    border: 2px solid var(--primary);
}

.path-card-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.path-card h4 {
    margin-bottom: 0.75rem;
    color: var(--dark);
}

.path-card p {
    color: var(--gray);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

/* Beta Benefits Banner */
.beta-banner {
    text-align: center;
    padding: 1.5rem;
    background: var(--light-gray);
    border-radius: 12px;
}

.beta-banner p {
    margin: 0;
    color: var(--gray);
}

/* Quick FAQ Preview */
.faq-preview-section {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #e2e8f0;
}

.faq-preview-container {
    max-width: 700px;
    margin: 0 auto;
}

.faq-preview-card {
    background: white;
    padding: 1.25rem 1.5rem;
    border-radius: 10px;
    margin-bottom: 0.75rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.faq-preview-card:last-child {
    margin-bottom: 1rem;
}

.faq-preview-card h4 {
    color: var(--primary);
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.faq-preview-card p {
    color: var(--gray);
    line-height: 1.6;
    margin: 0;
    font-size: 0.95rem;
}

.faq-view-all {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

/* Complete FCM Solution Section */
.complete-solution-section {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    padding: 4rem 2rem;
    margin-bottom: 3rem;
}

.solution-inner {
    max-width: 1000px;
    margin: 0 auto;
}

.solution-title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--dark);
}

.solution-subtitle {
    text-align: center;
    color: var(--gray);
    font-size: 1.1rem;
    margin-bottom: 3rem;
}

.solution-cta-banner {
    text-align: center;
    margin-top: 2.5rem;
    padding: 1.5rem;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 12px;
    border: 2px solid var(--primary);
}

.solution-cta-primary {
    margin: 0;
    font-weight: 600;
    color: var(--primary);
    font-size: 1.1rem;
}

.solution-cta-secondary {
    margin: 0.5rem 0 0 0;
    color: var(--gray);
}

/* Demo Network Section */
.network-container-tall {
    min-height: 600px;
}

.network-canvas-tall {
    height: 600px;
}

.network-title {
    text-align: center;
    margin-bottom: 1rem;
    color: var(--dark);
}

.network-title-lg {
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--dark);
}

/* Demo description text */
.demo-desc {
    margin: 1rem 0;
    color: var(--gray);
}

/* Info box (reusable light-gray background) */
.info-box {
    background: var(--light-gray);
    padding: 1.5rem;
    border-radius: 8px;
    margin-top: 2rem;
}

/* Demo Insight Cards */
.insight-cards-container {
    margin: 2rem 0;
}

.insight-card {
    padding: 1.5rem;
    color: white;
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.insight-card:last-child {
    margin-bottom: 0;
}

.insight-card-drivers {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.insight-card-loops {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.insight-card-intervention {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.insight-card-risk {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.insight-card h4 {
    color: white;
    margin-bottom: 0.5rem;
}

.insight-card p {
    margin: 0;
}

/* =============================================
   DEMO TAB OVERHAUL — New Components
   ============================================= */

/* Fictional scenario disclaimer */
.demo-fictional-banner {
    background: var(--light-gray);
    color: var(--gray);
    text-align: center;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-style: italic;
    margin-bottom: 1rem;
}

/* Research question card */
.research-question-card {
    border-left: 4px solid var(--primary);
    background: #f0f9ff;
    padding: 1.5rem 1.5rem 1.5rem 2rem;
    border-radius: 0 12px 12px 0;
    margin: 1.5rem 0;
}

.research-question-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.research-question-text {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--dark);
    margin: 0;
    font-weight: 500;
}

/* Workshop description */
.demo-workshop-desc {
    margin: 1.5rem 0;
    color: var(--gray);
    line-height: 1.7;
}

/* Demo network sizes */
.demo-network-sm {
    min-height: auto;
}

.demo-network-canvas-sm {
    height: 500px;
}

.demo-network-canvas-lg {
    height: 1000px;
}

.demo-network-canvas-md {
    height: 550px;
}

.demo-network-lg,
.demo-network-md {
    min-height: auto;
}

.demo-network-hint {
    text-align: center;
    font-size: 0.85rem;
    color: var(--gray);
    font-style: italic;
    margin-top: 0.5rem;
}

/* Concept pill grid */
.concept-pill-grid {
    margin: 2rem 0;
}

.concept-pill-header {
    color: var(--dark);
    margin-bottom: 1rem;
}

.concept-pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.concept-pill {
    padding: 0.5rem 1rem;
    background: var(--primary);
    color: white;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
}

/* Transition bar between tabs */
.demo-transition-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
    margin: 2rem 0;
}

.demo-transition-stats {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.demo-transition-stat {
    font-size: 0.95rem;
    color: var(--dark);
}

.demo-transition-divider {
    width: 1px;
    height: 16px;
    background: #93c5fd;
}

/* Survey preview mockup */
.survey-preview-mockup {
    background: white;
    border: 2px solid var(--light-gray);
    border-radius: 12px;
    padding: 2rem;
    margin: 1.5rem 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.survey-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.survey-preview-badge {
    background: var(--primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.survey-preview-progress {
    color: var(--gray);
    font-size: 0.9rem;
}

.survey-preview-question {
    font-size: 1.15rem;
    color: var(--dark);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

/* FCM wizard-style concept pills in question */
.concept-driver {
    display: inline;
    background: #dbeafe;
    color: #1e40af;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-weight: 600;
}

.concept-target {
    display: inline;
    background: #dcfce7;
    color: #166534;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-weight: 600;
}

/* 7-point scale options */
.survey-scale-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.25rem 0;
    justify-content: center;
}

.scale-option {
    padding: 0.5rem 0.85rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--gray);
    background: white;
    cursor: default;
    transition: all 0.15s;
}

.scale-option-zero {
    border-color: #cbd5e1;
    color: var(--dark);
    font-weight: 600;
}

.scale-option-selected {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
}

.scale-option-na {
    border-style: dashed;
    color: #94a3b8;
    font-style: italic;
}

.survey-preview-note {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.survey-preview-caption {
    font-size: 0.85rem;
    color: var(--gray);
    font-style: italic;
    text-align: center;
}

/* Deployment stats */
.deployment-stats,
.quality-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.stat-card-mini {
    background: white;
    border: 1px solid var(--light-gray);
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.stat-card-mini-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark);
}

.stat-card-mini-label {
    display: block;
    font-size: 0.8rem;
    color: var(--gray);
    margin-top: 0.25rem;
}

/* Completion progress */
.completion-progress {
    background: white;
    border: 1px solid var(--light-gray);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.completion-progress-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    color: var(--dark);
}

.pulse-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--success);
    border-radius: 50%;
    animation: pulseGreen 2s ease-in-out infinite;
}

@keyframes pulseGreen {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.5); }
}

.progress-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.progress-row:last-child {
    margin-bottom: 0;
}

.progress-label {
    font-size: 0.9rem;
    color: var(--dark);
    min-width: 180px;
    font-weight: 500;
}

.progress-bar-track {
    flex: 1;
    height: 10px;
    background: var(--light-gray);
    border-radius: 5px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    border-radius: 5px;
    width: 0;
    transition: width 1.2s ease-out;
}

.progress-fill-blue { background: var(--primary); }
.progress-fill-purple { background: var(--secondary); }
.progress-fill-green { background: var(--success); }
.progress-fill-amber { background: #f59e0b; }

.progress-value {
    font-size: 0.85rem;
    color: var(--gray);
    min-width: 120px;
    text-align: right;
}

/* Live feed indicator */
.demo-live-feed {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gray);
    font-size: 0.9rem;
    margin: 1rem 0;
}

/* GAN callout */
.demo-gan-callout {
    border: 2px solid #f59e0b;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    background: #fffbeb;
    margin: 1.5rem 0;
    color: var(--dark);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Scale banner */
.scale-banner {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    text-align: center;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    font-size: 1.05rem;
    margin: 1.5rem 0;
}

/* Group selector */
.group-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.5rem 0;
}

.group-selector-btn {
    padding: 0.6rem 1.2rem;
    border: 2px solid var(--light-gray);
    background: white;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--gray);
    transition: all 0.2s;
}

.group-selector-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.group-selector-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* Consensus panel */
.consensus-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 2rem 0;
}

.consensus-column-title {
    margin-bottom: 1rem;
    font-size: 1rem;
}

.consensus-column-agree .consensus-column-title {
    color: var(--success);
}

.consensus-column-diverge .consensus-column-title {
    color: var(--danger);
}

.consensus-row {
    padding: 1rem;
    background: var(--light-gray);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    border-left: 3px solid transparent;
}

.consensus-column-agree .consensus-row {
    border-left-color: var(--success);
}

.consensus-column-diverge .consensus-row {
    border-left-color: var(--danger);
}

.consensus-row:hover {
    background: #e2e8f0;
    transform: translateX(2px);
}

.consensus-edge {
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 0.25rem;
}

.consensus-detail {
    font-size: 0.85rem;
    color: var(--gray);
    margin: 0;
}

/* Analysis panel accordion */
.analysis-panel-card {
    border: 1px solid var(--light-gray);
    border-radius: 12px;
    margin-bottom: 1rem;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.analysis-panel-header {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1.25rem 1.5rem;
    /* Offset for the fixed .navbar when toggleAnalysisPanel() scrolls
       this header into view after a sibling panel collapses. Without
       this offset the header would land flush behind the navbar. */
    scroll-margin-top: 96px;
    border: none;
    background: white;
    cursor: pointer;
    text-align: left;
    gap: 1rem;
    transition: background 0.2s;
}

.analysis-panel-header:hover {
    background: var(--light-gray);
}

.analysis-panel-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--dark);
}

.analysis-panel-subtitle {
    font-size: 0.85rem;
    color: var(--gray);
    flex: 1;
}

.analysis-panel-chevron {
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--gray);
    border-bottom: 2px solid var(--gray);
    transform: rotate(45deg);
    transition: transform 0.3s;
    flex-shrink: 0;
}

.analysis-panel-header.active .analysis-panel-chevron {
    transform: rotate(-135deg);
}

.analysis-panel-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    padding: 0 1.5rem;
}

.analysis-panel-body.expanded {
    max-height: 2000px;
    padding: 0 1.5rem 1.5rem;
}

/* Causal findings */
.causal-findings {
    margin-top: 1.5rem;
}

.causal-finding {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    background: var(--light-gray);
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.causal-finding p {
    margin: 0;
    color: var(--dark);
    font-size: 0.95rem;
    line-height: 1.5;
}

.causal-badge {
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 2px;
}

.causal-badge-confirmed {
    background: var(--primary);
    color: white;
}

.causal-badge-discovered {
    background: var(--success);
    color: white;
}

.causal-badge-removed {
    background: var(--gray);
    color: white;
}

/* Legend line variants for causal DAG */
.legend-line-confirmed {
    background: var(--primary);
    height: 4px;
    width: 40px;
    border-radius: 2px;
}

.legend-line-potential {
    height: 4px;
    width: 40px;
    background: repeating-linear-gradient(
        90deg,
        var(--primary) 0px,
        var(--primary) 6px,
        transparent 6px,
        transparent 10px
    );
}

.legend-line-removed {
    height: 2px;
    width: 40px;
    background: repeating-linear-gradient(
        90deg,
        var(--gray) 0px,
        var(--gray) 3px,
        transparent 3px,
        transparent 7px
    );
}

/* Intervention simulator */
.intervention-simulator {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin: 1rem 0;
}

.intervention-sliders {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.intervention-slider-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.intervention-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--dark);
}

.demo-range-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: var(--light-gray);
    border-radius: 4px;
    outline: none;
    cursor: pointer;
}

.demo-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--primary);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.demo-range-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--primary);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.intervention-value {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--primary);
    text-align: center;
}

/* Impact readout */
.impact-readout-title {
    margin-bottom: 1rem;
    color: var(--dark);
}

.impact-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.impact-label {
    font-size: 0.85rem;
    color: var(--dark);
    min-width: 120px;
    font-weight: 500;
}

.impact-bar-track {
    flex: 1;
    height: 12px;
    background: var(--light-gray);
    border-radius: 6px;
    overflow: hidden;
}

.impact-bar-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.4s ease-out;
}

.impact-fill-green { background: var(--success); }
.impact-fill-blue { background: var(--primary); }
.impact-fill-purple { background: var(--secondary); }
.impact-fill-amber { background: #f59e0b; }
.impact-fill-red { background: var(--error, #dc2626); }

.intervention-range-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: var(--gray);
    margin-top: 2px;
}

.impact-value {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--dark);
    min-width: 40px;
    text-align: right;
}

/* AI recommendation card */
.ai-recommendation-card {
    border-left: 4px solid var(--secondary);
    background: #faf5ff;
    padding: 1.25rem 1.5rem;
    border-radius: 0 12px 12px 0;
    margin-top: 1.5rem;
}

.ai-recommendation-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--secondary);
    margin-bottom: 0.5rem;
}

.ai-recommendation-card p {
    color: var(--dark);
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* SHAP chart */
.shap-chart {
    margin: 1rem 0 1.5rem;
}

.shap-chart-title {
    color: var(--dark);
    margin-bottom: 1rem;
}

.shap-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.shap-label {
    font-size: 0.85rem;
    color: var(--dark);
    min-width: 160px;
    font-weight: 500;
}

.shap-bar-track {
    flex: 1;
    height: 14px;
    background: var(--light-gray);
    border-radius: 7px;
    overflow: hidden;
}

.shap-bar {
    height: 100%;
    border-radius: 7px;
    transition: width 0.6s ease-out;
}

.shap-bar-positive {
    background: var(--primary);
}

.shap-bar-negative {
    background: var(--danger);
}

.shap-value {
    font-weight: 700;
    font-size: 0.85rem;
    min-width: 40px;
    text-align: right;
}

.shap-value-pos {
    color: var(--primary);
}

.shap-value-neg {
    color: var(--danger);
}

/* Fade-in animation */
@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Comparison cards: hidden on desktop, shown on mobile */
.comparison-cards {
    display: none;
    gap: 1.5rem;
}

/* Responsive: tablet */
@media (max-width: 768px) {
    .path-grid {
        grid-template-columns: 1fr;
    }

    .consensus-panel {
        grid-template-columns: 1fr;
    }

    .intervention-simulator {
        grid-template-columns: 1fr;
    }

    .group-selector {
        gap: 0.4rem;
    }

    .group-selector-btn {
        font-size: 0.75rem;
        padding: 0.5rem 0.8rem;
    }

    .demo-network-canvas-lg {
        height: 400px;
    }

    .demo-network-canvas-md {
        height: 350px;
    }

    .demo-network-canvas-sm {
        height: 440px;
    }

    .progress-label {
        min-width: 120px;
        font-size: 0.8rem;
    }

    .progress-value {
        min-width: 90px;
        font-size: 0.75rem;
    }

    .demo-transition-bar {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .survey-weight-scale {
        flex-direction: column;
        gap: 0.5rem;
    }

    .scale-label {
        text-align: center;
    }

    .shap-label {
        min-width: 120px;
        font-size: 0.8rem;
    }

    .impact-label {
        min-width: 90px;
        font-size: 0.8rem;
    }

    /* Comparison: swap table for cards on mobile */
    .table-wrapper {
        display: none;
    }

    .comparison-cards {
        display: grid;
        grid-template-columns: 1fr;
    }
}

/* Responsive: mobile */
@media (max-width: 480px) {
    .group-selector {
        flex-direction: column;
    }

    .group-selector-btn {
        width: 100%;
        text-align: center;
    }

    .demo-network-canvas-lg {
        height: 300px;
    }

    .demo-network-canvas-md {
        height: 280px;
    }

    .demo-network-canvas-sm {
        height: 380px;
    }

    .deployment-stats,
    .quality-dashboard {
        grid-template-columns: 1fr 1fr;
    }

    .progress-row {
        flex-wrap: wrap;
    }

    .progress-value {
        width: 100%;
        text-align: left;
        margin-top: 0.25rem;
    }

    .shap-row {
        flex-wrap: wrap;
    }

    .shap-label {
        min-width: 100%;
    }
}

/* Impact Scenario Box */
.impact-scenario {
    padding: 2rem;
    border: 3px solid var(--primary);
    border-radius: 12px;
    background: white;
    margin-top: 2rem;
}

.impact-scenario h4 {
    color: var(--primary);
}

.impact-scenario p {
    margin-top: 1rem;
    color: var(--gray);
}

/* Features Stage Headers */
.stage-header {
    margin-top: 3rem;
}

.stage-header-lg {
    margin-top: 4rem;
}

.stage-title {
    color: var(--primary);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    text-align: center;
}

.stage-subtitle {
    text-align: center;
    color: var(--gray);
    margin-bottom: 2rem;
}

.stage-subtitle-sm {
    text-align: center;
    color: var(--gray);
    margin-bottom: 1.5rem;
}

/* Key Insight Callout */
.insight-callout {
    max-width: 800px;
    margin: 0 auto 2.5rem;
    padding: 1.75rem 2rem;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-radius: 12px;
    border-left: 4px solid var(--primary);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

.insight-callout-quote {
    margin: 0;
    font-size: 1.15rem;
    font-style: italic;
    color: var(--dark);
    font-weight: 500;
    line-height: 1.6;
    text-align: center;
}

.insight-callout-desc {
    margin: 1rem 0 0 0;
    font-size: 0.95rem;
    color: var(--gray);
    text-align: center;
    line-height: 1.6;
}

/* FAQ Item Styling */
.faq-item {
    background: white;
    padding: 1.5rem 2rem;
    border-radius: 12px;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.faq-item h3 {
    color: var(--primary);
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.faq-item p {
    color: var(--gray);
    line-height: 1.7;
    margin: 0;
}

.faq-container {
    max-width: 900px;
    margin: 3rem auto;
}

/* FAQ CTA */
.faq-cta {
    text-align: center;
    margin-top: 3rem;
    padding: 2rem;
    background: var(--light-gray);
    border-radius: 16px;
}

.faq-cta h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.faq-cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.faq-email-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.faq-email-link:hover {
    text-decoration: underline;
}

/* Pricing Description */
.pricing-desc {
    text-align: center;
    color: var(--gray);
    max-width: 800px;
    margin: 0 auto 2rem;
    font-size: 1.1rem;
    line-height: 1.7;
}

/* Billing Toggle */
.billing-toggle-container {
    text-align: center;
    margin: 2rem 0;
}

.billing-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
    margin: 0 1rem;
    vertical-align: middle;
}

.billing-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.billing-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: 0.3s ease;
    border-radius: 30px;
}

.billing-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.3s ease;
    border-radius: 50%;
}

.billing-switch input:checked + .billing-slider {
    background-color: var(--primary);
}

.billing-switch input:checked + .billing-slider:before {
    transform: translateX(30px);
}

.billing-option {
    vertical-align: middle;
}

.annual-save {
    color: var(--success);
    font-weight: bold;
}

/* Price display spans (toggled by JS) */
.monthly-price,
.annual-price {
    display: inline;
}

/* Pricing card description */
.pricing-card-desc {
    color: var(--gray);
    margin-bottom: 1rem;
}

.pricing-card-desc-bold {
    color: var(--gray);
    margin-bottom: 1rem;
    font-weight: 600;
}

/* Savings Badge (additional selector for non-hidden state) */
.savings-badge {
    color: var(--success);
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

/* Pricing Badge Success */
.pricing-badge-success {
    background: var(--success);
}

/* Pricing Note */
.pricing-note {
    text-align: center;
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--light-gray);
    border-radius: 12px;
}

.pricing-note p {
    color: var(--gray);
    margin: 0;
}

/* Pricing sub-tab description */
.pricing-subtab-title {
    text-align: center;
    margin-bottom: 1rem;
}

.pricing-subtab-desc {
    text-align: center;
    color: var(--gray);
    max-width: 700px;
    margin: 0 auto 3rem;
}

/* Workshop price range span */
.price-range-sep {
    font-size: inherit;
    font-weight: 700;
    vertical-align: middle;
}

.price-starting {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--gray);
    letter-spacing: 0.02em;
}

/* Bundle savings/regular price box */
.bundle-regular-price {
    text-align: center;
    margin-top: 1rem;
    padding: 0.75rem;
    background: var(--light-gray);
    border-radius: 8px;
    font-size: 0.9rem;
}

/* Pricing card small text */
.pricing-card-note {
    text-align: center;
    font-size: 0.85rem;
    color: var(--gray);
    margin-top: 0.5rem;
}

/* Feature Comparison Table */
.comparison-section {
    margin-top: 4rem;
}

.comparison-note {
    text-align: center;
    color: var(--gray);
    font-size: 0.95rem;
    margin-bottom: 2rem;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.comparison-table thead tr {
    background: var(--light-gray);
    color: var(--dark);
}

/* Tier group header row */
.tier-group-row {
    background: var(--light-gray) !important;
}

.tier-group-row th {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
    color: var(--gray);
    background: var(--light-gray);
}

.tier-group-row th:first-child {
    background: var(--light-gray);
}

.tier-group-academic {
    color: var(--primary) !important;
    border-bottom: 3px solid var(--primary);
}

.tier-group-commercial {
    color: #8b5cf6 !important;
    border-bottom: 3px solid #8b5cf6;
}

.tier-group-enterprise {
    color: #7c3aed !important;
    border-bottom: 3px solid #7c3aed;
}

/* Recommended tier badge */
.tier-recommended {
    position: relative;
}

.tier-badge {
    display: inline-block;
    background: #fbbf24;
    color: #1e293b;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    vertical-align: middle;
    margin-left: 0.25rem;
}

/* Feature info tooltips */
.feature-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    cursor: help;
    font-size: 0.8rem;
    margin-left: 0.35rem;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.feature-tip:hover,
.feature-tip:focus {
    opacity: 1;
    outline: none;
}

.feature-tip:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Styled tooltip via [data-tip] — replaces native title attribute so it
   works on touch (mobile tap -> :focus) as well as desktop (hover). */
.feature-tip[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a1a;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.4;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    white-space: normal;
    width: max-content;
    max-width: 260px;
    text-align: left;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 100;
}

.feature-tip[data-tip]::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1a1a1a;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 100;
}

.feature-tip[data-tip]:hover::after,
.feature-tip[data-tip]:focus::after,
.feature-tip[data-tip]:hover::before,
.feature-tip[data-tip]:focus::before {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 480px) {
    .feature-tip[data-tip]::after {
        max-width: 220px;
        font-size: 0.7rem;
    }
}

/* Smart-flip: when a tip is near the top of the viewport (e.g. on the
   Free card at the top of the mobile pricing list) the default upward
   tooltip can clip above the viewport. Add `data-tip-position="below"`
   to flip the tooltip so it opens downward instead. */
.feature-tip[data-tip][data-tip-position="below"]::after {
    bottom: auto;
    top: calc(100% + 10px);
}

.feature-tip[data-tip][data-tip-position="below"]::before {
    bottom: auto;
    top: calc(100% + 4px);
    border-top-color: transparent;
    border-bottom-color: #1a1a1a;
}

/* Tooltips inside the desktop comparison table default to opening
   downward. `.table-wrapper` has `overflow-x: auto`, which per CSS spec
   forces `overflow-y` to `auto` as well — so upward tooltips from the
   top rows of the table would get clipped at the wrapper's top edge.
   Opening downward sidesteps the clipping since there is plenty of
   room below those rows. */
.comparison-table .feature-tip[data-tip]::after {
    bottom: auto;
    top: calc(100% + 10px);
}

.comparison-table .feature-tip[data-tip]::before {
    bottom: auto;
    top: calc(100% + 4px);
    border-top-color: transparent;
    border-bottom-color: #1a1a1a;
}

/* On narrow mobile screens, default every feature-tip inside a mobile
   pricing card to open below — cards are vertically stacked and the
   upward tooltip on the top card (Free) would clip above the viewport.
   The desktop comparison table keeps the default upward behavior. */
@media (max-width: 768px) {
    .comparison-card .feature-tip[data-tip]::after,
    .pricing-card .feature-tip[data-tip]::after {
        bottom: auto;
        top: calc(100% + 10px);
    }
    .comparison-card .feature-tip[data-tip]::before,
    .pricing-card .feature-tip[data-tip]::before {
        bottom: auto;
        top: calc(100% + 4px);
        border-top-color: transparent;
        border-bottom-color: #1a1a1a;
    }
}

.comparison-table th {
    padding: 0.75rem 0.5rem;
    text-align: left;
    font-size: 0.85rem;
    white-space: nowrap;
}

.comparison-table th:not(:first-child) {
    text-align: center;
}

.comparison-table td {
    padding: 0.75rem 0.5rem;
    font-size: 0.9rem;
}

.comparison-table td:not(:first-child) {
    text-align: center;
}

.comparison-table td:first-child {
    font-weight: 600;
    position: sticky;
    left: 0;
    background: white;
    z-index: 1;
    white-space: nowrap;
}

.comparison-table tr:nth-child(even) td:first-child {
    background: var(--light-gray);
}

.comparison-table th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--light-gray);
}

.comparison-table tr {
    border-bottom: 1px solid var(--light-gray);
}

.comparison-table tr:nth-child(even) {
    background: var(--light-gray);
}

/* Group divider lines: after Feature, after Free, after Academic group, after Commercial group */
.comparison-table thead tr:not(.tier-group-row) th:nth-child(3),
.comparison-table thead tr:not(.tier-group-row) th:nth-child(6),
.comparison-table thead tr:not(.tier-group-row) th:nth-child(9),
.comparison-table td:nth-child(3),
.comparison-table td:nth-child(6),
.comparison-table td:nth-child(9) {
    border-left: 2px solid var(--gray);
}

.comparison-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.comparison-card-popular {
    border: 2px solid var(--primary);
}

.comparison-card-header {
    background: var(--primary);
    color: white;
    padding: 1.25rem 1.5rem;
}

.comparison-card-header h3 {
    margin: 0 0 0.25rem;
    font-size: 1.25rem;
}

.comparison-card-price {
    font-size: 1.5rem;
    font-weight: 700;
    display: block;
}

.comparison-card-license {
    font-size: 0.8rem;
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.comparison-card-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comparison-card-features li {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--light-gray);
    font-size: 0.95rem;
}

.comparison-card-features li:last-child {
    border-bottom: none;
}

.comparison-card-features li span:first-child {
    color: var(--gray);
}

.comparison-card-features li span:last-child {
    font-weight: 600;
    color: var(--dark);
}

/* Pricing FAQ */
.pricing-faq {
    margin-top: 4rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Contact Section */
.contact-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 4rem 2rem;
}

.contact-container {
    max-width: 600px;
    margin: 0 auto;
}

.contact-title {
    color: white;
    text-align: center;
    font-size: 36px;
    margin-bottom: 1rem;
}

.contact-subtitle {
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    margin-bottom: 2rem;
}

.contact-form {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.contact-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #1e293b;
}

.contact-input {
    width: 100%;
    padding: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 16px;
}

.contact-textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 16px;
    resize: vertical;
}

.contact-submit-btn {
    width: 100%;
    padding: 14px;
    font-size: 16px;
}

/* Footer links */
.footer-email {
    color: white;
}

/* Footer link rows — flex-wrap so links reflow cleanly on narrow
   screens. Pipe separators are rendered as a ::after pseudo-element
   on each link (except the last), so each flex item is "Home |" as a
   single unit that wraps together and never leaves an orphaned pipe
   at the start of a new row. */
.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    row-gap: 0.25rem;
    padding: 0 1rem;
    margin: 0 auto;
    max-width: 900px;
    list-style: none;
}

.footer-links-secondary {
    margin-top: 0.85rem;
    font-size: 0.9rem;
    opacity: 0.85;
}

.footer-link {
    color: white;
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

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

.footer-links .footer-link:not(:last-child)::after {
    content: '|';
    margin: 0 0.7rem;
    opacity: 0.4;
    font-weight: 300;
    text-decoration: none;
    pointer-events: none;
}

@media (max-width: 480px) {
    .footer-links {
        font-size: 0.95rem;
    }
    .footer-links .footer-link:not(:last-child)::after {
        margin: 0 0.55rem;
    }
    .footer-links-secondary {
        font-size: 0.85rem;
    }
}

/* Demo Modal Title/Subtitle */
.demo-modal-title {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.demo-modal-subtitle {
    opacity: 0.9;
    font-size: 1.1rem;
}

/* Insights description text */
.insights-desc {
    color: var(--gray);
    margin-bottom: 1.5rem;
    font-style: italic;
}

/* Relationship example box */
.relationship-example {
    background: var(--light-gray);
    padding: 1.5rem;
    border-radius: 8px;
    margin-top: 2rem;
}

/* Button margin-top helper */
.btn-mt-2 {
    margin-top: 2rem;
}

/* Full-width button */
.btn-full {
    width: 100%;
}

/* Inline-block full-width link button */
.btn-link-full {
    width: 100%;
    display: inline-block;
    text-decoration: none;
    background: white;
    color: var(--primary);
    border: 2px solid var(--primary);
}

/* Scroll to waitlist button in path card */
.btn-scroll-waitlist {
    width: 100%;
}

/* Detail description text */
.detail {
    font-size: 0.95rem;
    color: var(--gray);
    margin-top: 0.5rem;
    line-height: 1.6;
}

/* Overflow wrapper for table */
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    /* Persistent visible scrollbar so users on tablet / narrow desktop
       realize the pricing table is horizontally scrollable. */
    scrollbar-width: thin;
    scrollbar-color: rgba(107, 114, 128, 0.7) rgba(0, 0, 0, 0.08);
    padding-bottom: 4px;
}

.table-wrapper::-webkit-scrollbar {
    height: 10px;
}

.table-wrapper::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.06);
    border-radius: 5px;
}

.table-wrapper::-webkit-scrollbar-thumb {
    background: rgba(107, 114, 128, 0.7);
    border-radius: 5px;
}

.table-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(107, 114, 128, 0.95);
}

/* Below 1200px the 9-column pricing table is likely to overflow. Force
   the scrollbar to remain visible (not auto-hide) so the scroll
   affordance is discoverable. Above 1200px the table usually fits. */
@media (max-width: 1199px) {
    .table-wrapper {
        overflow-x: scroll;
    }
}

.table-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to left, rgba(255,255,255,0.9), transparent);
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s;
}

.table-wrapper.scrolled-end::after {
    opacity: 0;
}

/* Utility Classes */
.text-center {
    text-align: center;
}

.text-gray {
    color: var(--gray);
}

.text-danger {
    color: #ef4444;
}

.text-line-through {
    text-decoration: line-through;
}

.mt-1 {
    margin-top: 1rem;
}