/* Palette + tokens live in _tokens.css (loaded before this file). */

body {
    font-family: var(--mc-font-sans);
    color: var(--micantis-text);
    padding-top: 72px;
}

/* Responsive navbar adjustments */
@media (max-width: 1199.98px) {
    body {
        padding-top: 68px;
    }
}

.navbar {
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    padding: 0.4rem 0;
    box-shadow: none;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

/* Make navbar more compact */
.navbar-nav .nav-link {
    padding: 0.4rem 0.7rem;
    font-size: 0.9rem;
}

.navbar-brand {
    padding: 0.15rem 0;
}

.navbar-brand img {
    height: 44px;
    filter: none;
    transition: opacity 0.2s ease;
}

.navbar-brand:hover img {
    opacity: 0.82;
}

/* Fixed navbar styles */
.navbar.fixed-top {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    width: 100% !important;
    min-height: 64px;
}

/* Navigation divider for mobile/tablet */
.nav-divider {
    margin: 1rem 0 0.5rem 0;
    border: none;
    border-top: 1px solid #dee2e6;
    width: 100%;
}

/* Force navbar to be collapsed below xl breakpoint */
@media (max-width: 1199.98px) {
    /* Force the navbar to be collapsed */
    .navbar-collapse:not(.show) {
        display: none !important;
    }
    
    /* Show the hamburger button */
    .navbar-toggler {
        display: block !important;
    }
    
    /* When expanded, make it scrollable */
    .navbar-collapse.show {
        display: block !important;
        max-height: 70vh;
        overflow-y: auto;
    }
}

/* On large screens, show expanded navbar */
@media (min-width: 1200px) {
    .navbar-collapse {
        display: flex !important;
    }
    
    .navbar-toggler {
        display: none !important;
    }
}

.nav-link {
    color: #1f2937 !important;
    font-weight: 500;
    letter-spacing: -0.005em;
    margin: 0 0.1rem;
    padding: 0.5rem 0.85rem !important;
    border-radius: 7px;
    transition: color 0.18s ease, background 0.18s ease;
}

.nav-link:hover {
    color: var(--micantis-blue) !important;
    background: rgba(85, 109, 175, 0.07);
    transform: none;
    box-shadow: none;
}

.nav-link.dropdown-toggle::after {
    margin-left: 0.4rem;
    vertical-align: 0.1em;
    border-top-width: 4px;
    border-right-width: 4px;
    border-left-width: 4px;
    opacity: 0.55;
}

/* Refined dropdown — lighter, more neutral hover state */
.dropdown-menu {
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
    padding: 0.55rem 0.4rem;
    margin-top: 0.35rem;
    min-width: 14rem;
}

.dropdown-item {
    color: #1f2937 !important;
    padding: 0.55rem 0.85rem;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.15s ease, background 0.15s ease;
    border-radius: 7px;
    margin: 0;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: rgba(85, 109, 175, 0.08) !important;
    color: var(--micantis-blue) !important;
}

.dropdown-item.dropdown-subitem {
    font-size: 0.82rem;
    color: #64748B !important;
    padding-left: 1.4rem;
}

.dropdown-item.dropdown-subitem i {
    margin-right: 0.4rem;
    opacity: 0.65;
}

.dropdown-divider {
    border-top-color: rgba(15, 23, 42, 0.06);
    margin: 0.4rem 0.6rem;
}

/* ==================================================================
   Hover-triggered dropdown (desktop only; no Bootstrap JS toggle).
   Applied to navbar nav-items that carry `nav-item-hover-dropdown`.
   ================================================================== */
@media (min-width: 1200px) {
    .navbar .nav-item-hover-dropdown > .dropdown-menu {
        display: block;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.3s;
    }

    .navbar .nav-item-hover-dropdown:hover > .dropdown-menu,
    .navbar .nav-item-hover-dropdown:focus-within > .dropdown-menu {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
    }

    /* Transparent hover-bridge above the panel so the cursor can travel
       from the trigger link down into the panel without losing :hover
       on the parent nav-item. Eliminates the "menu disappears mid-cursor" bug. */
    .navbar .nav-item-hover-dropdown > .dropdown-menu.dropdown-mega::before {
        content: '';
        position: absolute;
        top: -0.75rem;
        left: 0;
        right: 0;
        height: 0.75rem;
        background: transparent;
        pointer-events: auto;
    }

    /* Mega variant: only translateY for the entrance; horizontal
       position is set by site.js (anchored to trigger, clamped to viewport). */
    .navbar .nav-item-hover-dropdown > .dropdown-menu.dropdown-mega {
        transform: translateY(-4px);
    }

    .navbar .nav-item-hover-dropdown:hover > .dropdown-menu.dropdown-mega,
    .navbar .nav-item-hover-dropdown:focus-within > .dropdown-menu.dropdown-mega {
        transform: translateY(0);
    }
}

/* ==================================================================
   Mega dropdown — wide panel with a 2- or 3-column card grid.
   Used by the Platform and Solutions navbar dropdowns.
   ================================================================== */
.navbar .dropdown-menu.dropdown-mega {
    position: fixed;
    top: calc(100% + 0.5rem);
    left: 0;  /* horizontal position set by site.js per trigger */
    min-width: 0;
    width: min(720px, calc(100vw - 32px));
    padding: 0.85rem;
    margin-top: 0;
}

.dropdown-mega-grid {
    display: grid;
    gap: 0.35rem;
}

.dropdown-mega-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dropdown-mega-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dropdown-mega-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 0.75rem 0.85rem;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
}

.dropdown-mega-card:hover,
.dropdown-mega-card:focus-visible {
    background: rgba(85, 109, 175, 0.07);
    text-decoration: none;
    color: inherit;
    outline: none;
}

.dropdown-mega-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: rgba(85, 109, 175, 0.10);
    color: var(--micantis-primary);
    font-size: 1.05rem;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.dropdown-mega-card:hover .dropdown-mega-card-icon,
.dropdown-mega-card:focus-visible .dropdown-mega-card-icon {
    background: rgba(85, 109, 175, 0.16);
}

.dropdown-mega-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.dropdown-mega-card-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: #1f2937;
    letter-spacing: -0.005em;
    line-height: 1.3;
}

.dropdown-mega-card-desc {
    font-size: 0.8rem;
    font-weight: 400;
    color: #64748B;
    line-height: 1.45;
}

/* Full-width CTA footer at the bottom of a mega dropdown (e.g., Try MOOSE Live
   in the About menu). Visually distinct from the cards above but quieter than
   a primary button — reads as "one more thing" rather than a co-equal entry. */
.dropdown-mega-footer {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-top: 0.35rem;
    padding: 0.85rem 1rem;
    background: rgba(85, 109, 175, 0.06);
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 0 0 10px 10px;
    color: var(--micantis-primary);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease;
}

.dropdown-mega-footer:hover,
.dropdown-mega-footer:focus-visible {
    background: rgba(85, 109, 175, 0.12);
    text-decoration: none;
    color: var(--micantis-primary-dark);
    outline: none;
}

.dropdown-mega-footer-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: rgba(85, 109, 175, 0.14);
    color: var(--micantis-primary);
    font-size: 0.9rem;
    flex-shrink: 0;
}

.dropdown-mega-footer-text {
    flex-shrink: 0;
}

.dropdown-mega-footer-meta {
    margin-left: auto;
    font-weight: 400;
    color: #64748B;
    font-size: 0.82rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* Mobile / tablet hamburger menu: mega flows inline, stripped of
   panel chrome so it reads as nested nav items under the trigger. */
@media (max-width: 1199.98px) {
    .navbar .dropdown-menu.dropdown-mega {
        /* Override desktop fixed positioning + any JS-set inline left */
        position: static !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;

        /* Always visible inline inside the hamburger expansion */
        display: block;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;

        /* Strip panel chrome — surface is the hamburger itself */
        background: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border: none;
        box-shadow: none;

        width: auto;
        min-width: 0;
        margin: 0.15rem 0 0.5rem;
        padding: 0 0 0 1rem;
    }

    .dropdown-mega-grid--two,
    .dropdown-mega-grid--three {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }

    .dropdown-mega-card {
        padding: 0.5rem 0.6rem;
    }

    .dropdown-mega-card-icon {
        width: 28px;
        height: 28px;
        font-size: 0.9rem;
        border-radius: 7px;
    }

    .dropdown-mega-card-desc {
        font-size: 0.78rem;
    }

    /* Contact Us CTA at the bottom of the hamburger: full-width, centered,
       proper top margin so it reads as the primary action, not a misshapen pill. */
    .navbar .navbar-nav .nav-item.d-xl-none .contact-us-nav-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 1rem 0.5rem 0.5rem;
        padding: 0.75rem 1rem !important;
        border-radius: 12px;
        font-size: 0.95rem;
    }
}

/* Special styling for AI Demo link */
.ai-demo-link {
    /* Using standard nav-link styling - no accent color */
}

.ai-demo-link:hover {
    /* Inherits standard nav-link hover behavior */
}

/* New Article Badge Enhanced */
.new-article-link {
    position: relative;
}

.badge-new {
    background: linear-gradient(135deg, #ff6b6b, #ff8e8e) !important;
    font-size: 0.6rem;
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
    margin-right: 0.5rem;
    box-shadow: 0 2px 4px rgba(255, 107, 107, 0.3);
}

/* Contact Us Nav Button — quiet brand-blue tint, no shadow at rest. */
.contact-us-nav-btn {
    background: rgba(85, 109, 175, 0.08) !important;
    color: var(--micantis-primary) !important;
    padding: 0.45rem 0.95rem !important;
    border-radius: 8px;
    font-weight: 600;
    transition: background 0.18s ease, color 0.18s ease;
    margin-left: 0.5rem;
}

.contact-us-nav-btn:hover {
    background: rgba(85, 109, 175, 0.15) !important;
    color: var(--micantis-primary-dark) !important;
}

/* Try MOOSE Live secondary CTA — outline style, quieter than Contact Us */
.try-moose-nav-btn {
    background: transparent !important;
    color: var(--micantis-primary) !important;
    border: 1px solid rgba(85, 109, 175, 0.28) !important;
    padding: 0.42rem 0.9rem !important;
    border-radius: 8px;
    font-weight: 600;
    margin-left: 0.4rem;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.try-moose-nav-btn:hover {
    background: rgba(85, 109, 175, 0.07) !important;
    border-color: var(--micantis-primary) !important;
    color: var(--micantis-primary-dark) !important;
}

.contact-us-nav-btn i {
    margin-right: 0.5rem;
}

/* Standardized Button Classes */
.btn-request-demo {
    background: linear-gradient(135deg, var(--micantis-primary), var(--micantis-primary-light)) !important;
    color: white !important;
    border: none !important;
    border-radius: 35px !important;
    padding: 0.625rem 1.25rem !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 150px !important;
    font-size: 0.95rem !important;
}

.btn-request-demo:hover {
    background: linear-gradient(135deg, var(--micantis-primary-dark), var(--micantis-primary)) !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(85, 109, 175, 0.3) !important;
}

.btn-contact-us {
    background: linear-gradient(135deg, #f1c40f, #f4d03f) !important;
    color: #2c3e50 !important;
    border: none !important;
    border-radius: 35px !important;
    padding: 0.625rem 1.25rem !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 150px !important;
    font-size: 0.95rem !important;
}

.btn-contact-us:hover {
    background: linear-gradient(135deg, #f4d03f, #f7dc6f) !important;
    color: #2c3e50 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(241, 196, 15, 0.4) !important;
}

.btn-get-started {
    background-color: var(--micantis-blue);
    color: white !important;
    padding: 0.5rem 1.5rem !important;
    border-radius: 25px;
    margin-left: 1rem;
}

.btn-get-started:hover {
    background-color: var(--micantis-dark-blue);
    color: white !important;
}

.hero-section {
    background: linear-gradient(145deg, var(--micantis-primary-dark) 0%, var(--micantis-primary) 35%, var(--micantis-primary-light) 100%);
    color: white;
    padding: 120px 0 140px;
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.hero-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('/images/hero-battery.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.6;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: multiply;
}

.hero-section .container {
    position: relative;
    z-index: 2;
}

.hero-section::before {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 60px;
    background: white;
    z-index: 2;
    clip-path: polygon(
        0% 85%, 
        2% 82%, 
        4% 78%, 
        6% 72%, 
        8% 65%, 
        10% 58%, 
        12% 50%, 
        14% 43%, 
        16% 37%, 
        18% 33%, 
        20% 30%, 
        22% 29%, 
        24% 30%, 
        26% 33%, 
        28% 37%, 
        30% 43%, 
        32% 50%, 
        34% 58%, 
        36% 65%, 
        38% 72%, 
        40% 78%, 
        42% 82%, 
        44% 85%, 
        46% 87%, 
        48% 88%, 
        50% 87%, 
        52% 85%, 
        54% 82%, 
        56% 78%, 
        58% 72%, 
        60% 65%, 
        62% 58%, 
        64% 50%, 
        66% 43%, 
        68% 37%, 
        70% 33%, 
        72% 30%, 
        74% 29%, 
        76% 30%, 
        78% 33%, 
        80% 37%, 
        82% 43%, 
        84% 50%, 
        86% 58%, 
        88% 65%, 
        90% 72%, 
        92% 78%, 
        94% 82%, 
        96% 85%, 
        98% 87%, 
        100% 88%, 
        100% 100%, 
        0% 100%
    );
}

.hero-company {
    font-size: 3.5rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    line-height: 1;
    text-transform: uppercase;
    color: white;
    text-shadow: 
        0 1px 0 rgba(0,0,0,0.5),
        0 4px 10px rgba(0,0,0,0.3),
        0 0 20px rgba(255,255,255,0.1);
    position: relative;
}

.hero-company::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--micantis-accent) 0%, transparent 100%);
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(189, 159, 3, 0.5);
}

.hero-tagline {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    margin-bottom: 1.5rem;
    opacity: 0.9;
    text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
    color: rgba(255,255,255,0.95);
}

.hero-logo {
    max-width: 400px;
    height: auto;
    opacity: 0.95;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 20px rgba(255,255,255,0.08));
    margin-bottom: 2rem;
    transition: all 0.3s ease;
}

.hero-logo:hover {
    opacity: 1;
    transform: translateY(-3px);
    filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 25px rgba(255,255,255,0.12));
}

.hero-section h1 {
    font-weight: 800;
    margin-bottom: 1.5rem;
    letter-spacing: -1px;
    text-shadow: 
        0 2px 0 rgba(0,0,0,0.3),
        0 6px 15px rgba(0,0,0,0.2),
        0 0 25px rgba(255,255,255,0.1);
    color: white;
}

.hero-section .lead {
    font-size: 1.75rem;
    margin-bottom: 1rem;
    font-weight: 300;
    text-shadow: 0 3px 12px rgba(0,0,0,0.3);
    opacity: 0.92;
    color: rgba(255,255,255,0.95);
}

.hero-subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
    max-width: 700px;
    margin: 0 auto 2rem;
}

.hero-buttons {
    margin-bottom: 3rem;
    position: relative;
    z-index: 3;
}

.hero-buttons .btn {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.hero-buttons .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transition: left 0.5s ease;
}

.hero-buttons .btn:hover::before {
    left: 100%;
}

.hero-buttons .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.hero-stats {
    position: relative;
    z-index: 10;
    padding: 0 20px;
}

.hero-stats .col-md-4 {
    position: relative;
    z-index: 2;
}

.stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.5rem;
    display: block;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
    position: relative;
}

.stat-unit {
    font-size: 0.6em;
    font-weight: 600;
    margin-left: 0.1em;
    opacity: 0.85;
    vertical-align: baseline;
}

.stat-number::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background: var(--micantis-accent);
    border-radius: 2px;
    box-shadow: 0 0 15px rgba(189, 159, 3, 0.6);
}

.stat-label {
    font-size: 1rem;
    opacity: 0.8;
    display: block;
    margin-top: 1rem;
    padding: 0 0.5rem;
}

/* Override Bootstrap's Primary Button */
.btn-primary {
    background-color: var(--micantis-primary) !important;
    color: white !important;
    border: none !important;
    padding: 0.75rem 2rem;
    font-weight: 600;
    border-radius: 30px;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--micantis-primary-dark) !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.btn-primary:focus,
.btn-primary:active {
    background-color: var(--micantis-primary-dark) !important;
    box-shadow: 0 0 0 0.25rem rgba(85, 109, 175, 0.25) !important;
}

/* White Button Variant for Hero Sections */
.btn-white {
    background-color: white;
    color: var(--micantis-primary);
    border: none;
    padding: 0.75rem 2rem;
    font-weight: 600;
    border-radius: 30px;
    transition: all 0.3s ease;
}

.btn-white:hover {
    background-color: var(--micantis-gray-100);
    color: var(--micantis-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.btn-outline-light {
    border: 2px solid white;
    color: white;
    padding: 0.75rem 2rem;
    font-weight: 600;
    border-radius: 30px;
}

.btn-outline-light:hover {
    background-color: white;
    color: var(--micantis-blue);
}

.btn-outline-primary {
    border: 2px solid var(--micantis-primary) !important;
    color: var(--micantis-primary) !important;
    background-color: transparent !important;
    padding: 0.75rem 2rem;
    font-weight: 600;
    border-radius: 30px;
    transition: all 0.3s ease;
}

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

/* Energy Button Variant (Teal) */
.btn-energy {
    background-color: var(--micantis-energy);
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    font-weight: 600;
    border-radius: 30px;
    transition: all 0.3s ease;
}

.btn-energy:hover {
    background-color: var(--micantis-energy-dark);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 200, 150, 0.3);
}

/* Accent Button Variant (Gold) */
.btn-accent {
    background-color: var(--micantis-accent);
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    font-weight: 600;
    border-radius: 30px;
    transition: all 0.3s ease;
}

.btn-accent:hover {
    background-color: var(--micantis-accent-dark);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(189, 159, 3, 0.3);
}

.btn-outline-accent {
    color: var(--micantis-accent);
    border: 2px solid var(--micantis-accent);
    background-color: transparent;
    padding: 0.75rem 2rem;
    font-weight: 600;
    border-radius: 30px;
    transition: all 0.3s ease;
}

.btn-outline-accent:hover {
    background-color: var(--micantis-accent);
    border-color: var(--micantis-accent);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(189, 159, 3, 0.3);
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--micantis-dark-blue);
    margin-bottom: 1.5rem;
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: var(--micantis-accent);
    border-radius: 2px;
}

.value-prop-section {
    padding: 80px 0;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin-top: 2rem;
}

.feature-list li {
    padding: 0.75rem 0;
    font-size: 1.1rem;
}

.feature-list i {
    color: var(--micantis-accent);
    margin-right: 1rem;
    font-size: 1.25rem;
}

.features-section {
    padding: 80px 0;
    background-color: var(--micantis-light-gray);
}

.feature-card {
    background: white;
    padding: 2.5rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    text-align: center;
}

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

.feature-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--micantis-accent), var(--micantis-accent-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.feature-icon i {
    font-size: 2rem;
    color: white;
}

.feature-card h3 {
    color: var(--micantis-dark-blue);
    margin-bottom: 1rem;
    font-weight: 600;
}

.testimonial-section {
    padding: 80px 0;
}

.blockquote {
    font-size: 1.5rem;
    font-style: italic;
    color: var(--micantis-text);
}

.blockquote-footer {
    font-size: 1.1rem;
    color: var(--micantis-blue);
}

.cta-section {
    padding: 100px 0;
    background: linear-gradient(135deg, var(--micantis-gray-100) 0%, var(--micantis-gray-200) 100%);
}

.footer {
    background-color: var(--micantis-light-gray);
    border-top: 1px solid #dee2e6;
}

/* Page Header */
.page-header-section,
.careers-hero-section {
    background: linear-gradient(145deg, var(--micantis-primary-dark) 0%, var(--micantis-primary) 35%, var(--micantis-primary-light) 100%);
    color: white;
    padding: 60px 0;
    margin-bottom: 60px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.page-header-section::after,
.careers-hero-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('/images/hero-battery.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.6;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: multiply;
}

.page-title {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

.page-subtitle {
    font-size: 1.25rem;
    opacity: 0.9;
}

/* About Page Specific */
.about-intro-section .lead {
    font-size: 1.25rem;
    color: var(--micantis-dark-blue);
}

.value-card {
    text-align: center;
    padding: 2rem;
}

.value-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--micantis-blue), var(--micantis-light-blue));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.value-icon i {
    font-size: 1.75rem;
    color: white;
}

.team-photo {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center center;
    border: 5px solid var(--micantis-light-gray);
    background-color: var(--micantis-light-gray);
}

/* Specific adjustment for Jonathan's portrait image - now has built-in padding */
img[alt="Jonathan Awerbuch"].team-photo {
    object-fit: cover;
    object-position: center top;
    transform: scale(1) translateY(0);
}

/* Founders Section Photos */
.founders-images {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.founders-photo-container {
    display: flex;
    gap: 2rem;
    justify-content: center;
    align-items: flex-start;
}

.founder-container {
    text-align: center;
    flex: 1;
    max-width: 280px;
}

.founder-photo-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    margin: 0 auto 1rem;
    background-color: #f5f5f5;
}

.founder-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    border: 4px solid var(--micantis-light-gray);
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #f5f5f5;
}

.founder-photo-wrapper:hover .founder-photo {
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}

/* Specific adjustment for Jonathan's image in founders section - now has built-in padding */
img[alt="Jonathan Awerbuch"].founder-photo {
    object-fit: cover;
    object-position: center top;
    transform: scale(1) translateY(0);
}

.founder-photo-wrapper:hover img[alt="Jonathan Awerbuch"].founder-photo {
    transform: scale(1) translateY(-5px);
}

.founder-name {
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
    color: var(--micantis-blue);
}

.founder-title {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .founders-photo-container {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }
    
    .founder-photo-wrapper {
        max-width: 180px;
    }
}

.stats-section {
    background: var(--micantis-blue) !important;
}

.investor-logo {
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.investor-logo:hover {
    opacity: 1;
}

@media (max-width: 768px) {
    .hero-company {
        font-size: 2.5rem;
    }
    
    .hero-logo {
        max-width: 280px;
    }
    
    .hero-section {
        padding: 70px 0 100px;
    }

    .hero-section h1 {
        font-size: 2.25rem;
    }

    .hero-section .lead {
        font-size: 1.25rem;
    }

    .hero-subtitle {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    .hero-buttons {
        margin-bottom: 2rem;
    }

    .hero-buttons .btn {
        width: 100%;
        max-width: 320px;
    }

    .hero-stats {
        margin-top: 2rem !important;
    }

    .stat-number {
        font-size: 2rem;
    }

    .hero-stats .col-md-4 {
        margin-bottom: 2rem;
    }

    .hero-stats .col-md-4:last-child {
        margin-bottom: 0;
    }

    .stat-label {
        font-size: 0.95rem;
        line-height: 1.4;
    }

    .section-title {
        font-size: 2rem;
    }
    
    .page-title {
        font-size: 2rem;
    }
}

/* Industries Page */
.industry-title {
    color: var(--micantis-dark-blue);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.industry-features {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.industry-features li {
    padding: 0.75rem 0;
    padding-left: 2rem;
    position: relative;
}

.industry-features li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--micantis-blue);
    font-weight: bold;
}

.industry-stats .badge {
    font-size: 0.9rem;
    font-weight: 500;
}

.industry-card {
    padding: 2rem;
    height: 100%;
}

.industry-icon {
    font-size: 3rem;
    color: var(--micantis-blue);
    margin-bottom: 1rem;
    display: block;
}

/* Battery Designers Page */
.feature-detail h3 {
    color: var(--micantis-dark-blue);
    margin-bottom: 1rem;
}

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

.feature-detail li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
}

.feature-detail li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--micantis-accent);
    font-weight: bold;
}

/* Supplier Feature Cards - Used across multiple pages */
.supplier-feature-card {
    background: white;
    border-radius: 15px;
    padding: 3rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}

.supplier-feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.supplier-feature-card h3 {
    color: var(--micantis-primary);
    font-weight: 700;
    margin-bottom: 1rem;
}

.supplier-feature-card .lead {
    color: var(--micantis-accent);
    font-weight: 600;
    margin-bottom: 1.5rem;
}

/* Accent Highlights and Special Elements */
.accent-highlight {
    color: var(--micantis-accent);
    font-weight: 700;
    text-shadow: 0 0 20px rgba(189, 159, 3, 0.3);
}

.stat-number.accent-highlight {
    background: linear-gradient(135deg, var(--micantis-accent), var(--micantis-accent-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 10px rgba(189, 159, 3, 0.4));
}

.accent-number {
    background: var(--micantis-accent);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    display: inline-block;
    min-width: 2rem;
    text-align: center;
}

.accent-border-left {
    border-left: 4px solid var(--micantis-accent);
    padding-left: 1rem;
}

.accent-underline {
    position: relative;
}

.accent-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--micantis-accent);
    border-radius: 2px;
}

.workflow-step {
    padding: 2rem 1rem;
}

.step-number {
    width: 60px;
    height: 60px;
    background: var(--micantis-blue);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0 auto 1rem;
}

.case-study-stats h3 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

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

.specs-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #e9ecef;
}

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

/* Product Companies Page */
.value-prop-item {
    margin-bottom: 1.5rem;
}

.value-prop-item h4 {
    color: var(--micantis-dark-blue);
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.challenge-card {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.challenge-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.12);
}

.challenge-icon {
    width: 60px;
    height: 60px;
    background: rgba(85, 109, 175, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.challenge-icon i {
    font-size: 1.75rem;
    color: var(--micantis-blue);
}

.solution {
    color: var(--micantis-blue);
    font-size: 0.95rem;
}

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

.integration-list li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
}

.integration-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--micantis-blue);
    font-weight: bold;
}

.roi-metric h3 {
    margin-bottom: 0.5rem;
}

.story-card {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    height: 100%;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

.story-header {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

.story-logo {
    width: 60px;
    height: 60px;
    margin-right: 1rem;
    object-fit: contain;
}

.story-quote {
    font-style: italic;
    color: #666;
    margin-bottom: 1.5rem;
    padding-left: 1rem;
    border-left: 3px solid var(--micantis-blue);
}

.feature-item {
    text-align: center;
}

.feature-icon-small {
    font-size: 2.5rem;
    color: var(--micantis-blue);
    margin-bottom: 1rem;
    display: block;
}

/* Insights Page */
.featured-article {
    padding: 2rem;
    background: white;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

.article-category {
    color: var(--micantis-blue);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.article-title {
    font-size: 2rem;
    color: var(--micantis-dark-blue);
    margin-bottom: 1rem;
}

.article-meta {
    color: #666;
    margin-bottom: 1.5rem;
}

.article-excerpt {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.insights-sidebar {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

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

.topic-list li {
    padding: 0.75rem 0;
    border-bottom: 1px solid #e9ecef;
}

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

.topic-list a {
    color: var(--micantis-text);
    text-decoration: none;
    transition: color 0.3s ease;
}

.topic-list a:hover {
    color: var(--micantis-blue);
}

.category-card {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    height: 100%;
    transition: all 0.3s ease;
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.category-icon {
    font-size: 3rem;
    color: var(--micantis-blue);
    margin-bottom: 1rem;
}

.category-link {
    color: var(--micantis-blue);
    text-decoration: none;
    font-weight: 600;
}

.article-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    height: 100%;
}

.article-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.12);
}

.article-image {
    height: 200px;
    overflow: hidden;
}

.article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-content {
    padding: 1.5rem;
}

.article-tag {
    background: var(--micantis-blue);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 600;
}

.article-card h3 {
    margin: 1rem 0;
    color: var(--micantis-dark-blue);
}

.article-date {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.read-more {
    color: var(--micantis-blue);
    text-decoration: none;
    font-weight: 600;
}

.resource-card {
    text-align: center;
    padding: 2rem;
    background: white;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    height: 100%;
}

.resource-icon {
    font-size: 3rem;
    color: var(--micantis-blue);
    margin-bottom: 1rem;
    display: block;
}

.newsletter-form {
    max-width: 500px;
    margin: 0 auto;
}

/* Get Started Page */
.option-card {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    position: relative;
    transition: all 0.3s ease;
}

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

.option-card.featured {
    border: 2px solid var(--micantis-blue);
}

.featured-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--micantis-blue);
    color: white;
    padding: 0.25rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
}

.option-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--micantis-blue), var(--micantis-light-blue));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.option-icon i {
    font-size: 2rem;
    color: white;
}

.option-features {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
    text-align: left;
}

.option-features li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
}

.option-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--micantis-blue);
    font-weight: bold;
}

.trial-form {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

.comparison-table {
    background: white;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

.comparison-table th {
    background: var(--micantis-blue);
    color: white;
    font-weight: 600;
    text-align: center;
}

.comparison-table td:first-child {
    font-weight: 600;
}

.accordion-button {
    font-weight: 600;
    color: var(--micantis-dark-blue);
}

.accordion-button:not(.collapsed) {
    background-color: rgba(85, 109, 175, 0.05);
    color: var(--micantis-blue);
}

.contact-options .btn {
    min-width: 200px;
    margin-bottom: 1rem;
}

/* ROI Section */
.roi-section {
    background: #f8f9fa;
}

.roi-card {
    background: white;
    border-radius: 15px;
    padding: 2.5rem;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.roi-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}

.roi-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--micantis-accent) 0%, var(--micantis-energy-dark) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.roi-icon i {
    font-size: 2rem;
    color: white;
}

.roi-metric {
    font-size: 3rem;
    font-weight: 800;
    color: var(--micantis-primary);
    margin-bottom: 1rem;
    line-height: 1;
}

.roi-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--micantis-primary);
    margin-bottom: 1.5rem;
}

.roi-description {
    color: var(--micantis-gray-600);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.roi-impact {
    background: rgba(85, 109, 175, 0.1);
    border-radius: 10px;
    padding: 1rem;
    font-size: 0.9rem;
    color: var(--micantis-primary);
    line-height: 1.4;
    margin-top: auto;
}

.manager-benefits-card {
    background: white;
    border-radius: 20px;
    padding: 3rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    border: 2px solid var(--micantis-primary);
}

.manager-benefits-card h3 {
    color: var(--micantis-primary);
    font-weight: 700;
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.benefit-item i {
    font-size: 1.5rem;
    color: var(--micantis-accent);
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.benefit-content {
    color: var(--micantis-gray-700);
    line-height: 1.5;
}

.benefit-content strong {
    color: var(--micantis-primary);
}

/* Quality Control Section */
.qc-card {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    position: relative;
}

.qc-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.qc-card.featured {
    border: 2px solid var(--micantis-blue);
}

.qc-badge {
    position: absolute;
    top: -12px;
    right: 20px;
    background: var(--micantis-energy);
    color: white;
    padding: 0.25rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 200, 150, 0.3);
}

.qc-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--micantis-blue), var(--micantis-light-blue));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.qc-icon i {
    font-size: 2rem;
    color: white;
}

.qc-subtitle {
    color: var(--micantis-blue);
    font-weight: 600;
    margin-bottom: 1rem;
}

.qc-features {
    list-style: none;
    padding: 0;
    margin-top: 1.5rem;
}

.qc-features li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
}

.qc-features li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--micantis-blue);
    font-weight: bold;
}

/* Prediction Model Section */
.model-benefits {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.model-benefits li {
    padding: 0.5rem 0;
    font-size: 1.1rem;
}

.price-box {
    background: rgba(255,255,255,0.1);
    padding: 2rem;
    border-radius: 10px;
    text-align: center;
}

.price-box h3 {
    margin-bottom: 0.5rem;
}

.price-display {
    margin: 1.5rem 0;
}

.price-display h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

/* Case Study Cards */
.case-study-card {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

.case-study-card h4 {
    color: var(--micantis-dark-blue);
    margin-bottom: 0.5rem;
}

.case-study-card hr {
    margin: 1rem 0;
}

/* Stat Cards */
.stat-card {
    background: var(--micantis-light-gray);
    padding: 2rem;
    border-radius: 10px;
    margin-bottom: 1rem;
}

.stat-card h3 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

/* AI Demo Link */
.ai-demo-link {
    color: var(--micantis-accent-teal) !important;
    font-weight: 500;
    transition: all 0.3s ease;
}

.ai-demo-link:hover {
    color: var(--micantis-dark-teal) !important;
    transform: translateY(-1px);
}

.ai-demo-link i {
    margin-right: 5px;
}

/* New Article Link Styling */
.new-article-link {
    background: linear-gradient(135deg, var(--micantis-accent), #ff8585);
    color: white !important;
    padding: 0.5rem 1rem !important;
    border-radius: 25px;
    font-weight: 600;
    transition: all 0.3s ease;
    margin-left: 1rem;
    position: relative;
    overflow: hidden;
}

.new-article-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
    color: white !important;
}

.new-article-link .badge-new {
    background: #fff;
    color: var(--micantis-accent);
    font-size: 0.65rem;
    padding: 0.2rem 0.4rem;
    border-radius: 10px;
    font-weight: 700;
    margin-right: 0.5rem;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

/* Article Callout in Hero */
.article-callout {
    display: inline-block;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    padding: 1.5rem 2rem;
    margin-top: 2rem;
    animation: float 3s ease-in-out infinite;
}

.article-callout .callout-text {
    color: white;
    font-size: 1.1rem;
}

.article-callout .callout-link {
    color: var(--micantis-accent-light);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.article-callout .callout-link:hover {
    color: white;
    text-decoration: underline;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}

/* Enterprise Features Section */
.enterprise-features-section {
    background-color: var(--micantis-bg-section);
}

.enterprise-card {
    background: white;
    border-radius: 15px;
    padding: 2.5rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    height: 100%;
}

.enterprise-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

.enterprise-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--micantis-primary), var(--micantis-primary-light));
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.enterprise-icon i {
    font-size: 2rem;
    color: white;
}

.enterprise-card h3 {
    color: var(--micantis-primary-dark);
    margin-bottom: 1rem;
    font-weight: 700;
}

.enterprise-card .lead {
    color: var(--micantis-text-secondary);
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

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

.enterprise-features li {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--micantis-gray-200);
    font-size: 0.95rem;
    line-height: 1.6;
}

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

.enterprise-features strong {
    color: var(--micantis-primary-dark);
    font-weight: 600;
}

.enterprise-badge .badge {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.code-example {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1rem;
    overflow-x: auto;
}

.code-example pre {
    margin: 0;
    font-size: 0.875rem;
}

.code-example code {
    color: #333;
}

.availability-stats {
    background: linear-gradient(135deg, var(--micantis-primary) 0%, var(--micantis-primary-light) 100%);
    border-radius: 10px;
    padding: 1.5rem;
    color: white;
}

.stat-mini {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.stat-mini-label {
    font-size: 0.875rem;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* UN 38.3 Section */
.un383-section {
    position: relative;
}

.un-features-card {
    background: var(--micantis-bg-section);
    border-radius: 15px;
    padding: 2rem;
    height: 100%;
}

.un-features-card h4 {
    color: var(--micantis-primary);
}

.feature-item h5 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--micantis-primary-dark);
    margin-bottom: 0.5rem;
}

.un-benefits h4 {
    color: var(--micantis-primary-dark);
    font-weight: 600;
}

.un-benefits ul li {
    padding: 0.25rem 0;
}

.un-benefits i {
    margin-right: 0.5rem;
}

.un-value-props {
    margin-top: 2rem;
}

.value-metric {
    padding: 1.5rem;
    background: white;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    height: 100%;
    transition: transform 0.3s ease;
}

.value-metric:hover {
    transform: translateY(-5px);
}

.value-metric h3 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.value-metric p {
    font-size: 0.9rem;
    color: var(--micantis-text-secondary);
    margin: 0;
}

@media (max-width: 768px) {
    .enterprise-card {
        padding: 1.5rem;
    }
    
    .code-example {
        font-size: 0.75rem;
    }
    
    .un-features-card {
        margin-top: 2rem;
    }
    
    .value-metric {
        margin-bottom: 1rem;
    }
}

/* Navigation Separators */
.nav-separator {
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    color: var(--micantis-accent);
    font-weight: 600;
    font-size: 0.875rem;
    opacity: 0.8;
}

/* Hide separators on mobile */
@media (max-width: 991.98px) {
    .nav-separator {
        display: none;
    }
}

/* Mobile footer fixes */
@media (max-width: 768px) {
    /* Ensure footer doesn't block content */
    .footer {
        position: static;
        margin-top: 2rem;
        white-space: normal;
        line-height: 1.8;
        padding: 1rem 0;
    }
    
    /* Add bottom padding to body to prevent content from being hidden behind footer */
    body {
        margin-bottom: 0;
        padding-bottom: 2rem;
    }
    
    /* Ensure CTA sections have enough bottom margin on mobile */
    .cta-section {
        margin-bottom: 2rem;
        padding-bottom: 3rem !important;
    }
}

/* Manufacturing Workflow Styles for Outgoing Quality */
.manufacturing-workflow {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.workflow-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.workflow-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    min-width: 120px;
    transition: transform 0.3s ease;
}

.workflow-item:hover {
    transform: translateY(-2px);
}

.workflow-item.highlighted {
    background: linear-gradient(135deg, var(--micantis-blue), var(--micantis-light-blue));
    color: white;
}

.workflow-icon {
    width: 40px;
    height: 40px;
    background: var(--micantis-blue);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.workflow-item.highlighted .workflow-icon {
    background: rgba(255,255,255,0.2);
}

.workflow-icon i {
    font-size: 1.2rem;
}

.workflow-label {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    line-height: 1.2;
}

.workflow-status {
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.workflow-status i {
    font-size: 0.9rem;
}

.workflow-arrow {
    color: var(--micantis-blue);
    font-size: 1.5rem;
    margin: 0 0.25rem;
}

@media (max-width: 768px) {
    .workflow-row {
        flex-direction: column;
        gap: 1rem;
    }
    
    .workflow-arrow {
        transform: rotate(90deg);
        margin: 0.5rem 0;
    }
    
    .workflow-item {
        min-width: 140px;
    }
}

/* ================================================================
   LANDING PAGE STYLES
   Used by BlindSpot.cshtml and JustDoTheJob.cshtml
   ================================================================ */

/* Section label (small caps, brand color) */
.section-label {
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--micantis-primary);
    margin-bottom: 0.75rem;
    display: block;
}

/* Landing page hero — dark variant without the wave/image overlays */
.landing-hero {
    background: linear-gradient(145deg, var(--micantis-header-text) 0%, var(--micantis-primary-dark) 40%, var(--micantis-primary) 100%);
    color: white;
    padding: 100px 0 80px;
    position: relative;
    overflow: hidden;
}

.landing-hero h1 {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 1.5rem;
}

.landing-hero .lead {
    font-size: 1.25rem;
    opacity: 0.9;
    line-height: 1.7;
    max-width: 700px;
}

.landing-hero .btn-primary {
    font-size: 1.1rem;
    padding: 0.85rem 2.5rem;
}

/* Landing page secondary nav (sticky below main nav) */
.landing-page-nav {
    background: white;
    border-bottom: 1px solid var(--micantis-gray-200);
    position: sticky;
    top: 76px;
    z-index: 1020;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.landing-page-nav .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.landing-page-nav .nav {
    flex-wrap: nowrap;
    gap: 0;
}

.landing-page-nav .nav-link {
    color: var(--micantis-text-secondary) !important;
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.875rem 1rem !important;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    background: none !important;
}

.landing-page-nav .nav-link:hover {
    color: var(--micantis-primary) !important;
    border-bottom-color: var(--micantis-primary);
    background: none !important;
    transform: none !important;
    box-shadow: none !important;
}

.landing-page-nav .btn {
    font-size: 0.85rem;
    padding: 0.5rem 1.25rem;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .landing-page-nav .nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .landing-page-nav .nav-link {
        font-size: 0.8rem;
        padding: 0.75rem 0.75rem !important;
    }
    .landing-page-nav .btn {
        display: none;
    }
    .landing-hero h1 {
        font-size: 2rem;
    }
}

/* Dark content sections (mid-page dark bands) */
.landing-dark-section {
    background: linear-gradient(145deg, var(--micantis-header-text) 0%, var(--micantis-primary-dark) 50%, var(--micantis-primary) 100%);
    color: white;
    padding: 80px 0;
}

.landing-dark-section .section-label {
    color: var(--micantis-accent);
}

.landing-dark-section .section-title {
    color: white;
}

.landing-dark-section .section-title::after {
    background: var(--micantis-accent);
}

/* Quote divider */
.landing-quote {
    background: linear-gradient(145deg, var(--micantis-header-text) 0%, var(--micantis-primary-dark) 100%);
    color: white;
    padding: 60px 0;
    text-align: center;
}

.landing-quote blockquote {
    font-size: 1.75rem;
    font-style: italic;
    font-weight: 300;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    padding: 0 2rem;
}

.landing-quote blockquote::before {
    content: '\201C';
    font-size: 5rem;
    color: var(--micantis-accent);
    position: absolute;
    top: -30px;
    left: -10px;
    opacity: 0.5;
    line-height: 1;
}

.landing-quote .moose-divider {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-top: 1.5rem;
    opacity: 0.3;
    color: white;
}

@media (max-width: 767.98px) {
    .landing-quote blockquote {
        font-size: 1.25rem;
    }
}

/* Landing page feature cards (text-left variant) */
.landing-card {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    border: 1px solid var(--micantis-gray-200);
    transition: all 0.3s ease;
    height: 100%;
}

.landing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.12);
}

.landing-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--micantis-primary-dark);
    margin-bottom: 0.75rem;
}

.landing-card p {
    color: var(--micantis-text-secondary);
    line-height: 1.65;
    margin-bottom: 0;
}

/* Step number indicators */
.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--micantis-primary), var(--micantis-primary-light));
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    flex-shrink: 0;
}

/* Comparison grid (Blind Spot differentiation section) */
.comparison-grid {
    display: grid;
    gap: 1rem;
}

.comparison-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.comparison-item {
    padding: 1.25rem 1.5rem;
    border-radius: 10px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.comparison-item.old-way {
    background: var(--micantis-gray-100);
    color: var(--micantis-text-secondary);
    border: 1px solid var(--micantis-gray-200);
}

.comparison-item.new-way {
    background: rgba(85, 109, 175, 0.08);
    color: var(--micantis-primary-dark);
    border: 1px solid rgba(85, 109, 175, 0.2);
    font-weight: 500;
}

.comparison-header {
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
}

.comparison-header.old-way {
    background: var(--micantis-gray-200);
    color: var(--micantis-text-secondary);
}

.comparison-header.new-way {
    background: var(--micantis-primary);
    color: white;
}

@media (max-width: 767.98px) {
    .comparison-row {
        grid-template-columns: 1fr;
    }
    .comparison-item.old-way {
        border-left: 3px solid var(--micantis-gray-400);
    }
    .comparison-item.new-way {
        border-left: 3px solid var(--micantis-primary);
    }
}

/* Time badges (workflow demos) */
.time-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.time-manual {
    background: #fef2f2;
    color: #dc3545;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    text-decoration: line-through;
    opacity: 0.7;
}

.time-arrow {
    color: var(--micantis-text-secondary);
    font-size: 1rem;
}

.time-micantis {
    background: rgba(0, 200, 150, 0.1);
    color: var(--micantis-energy-dark);
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-weight: 700;
}

/* Video placeholder */
.video-placeholder {
    background: var(--micantis-gray-100);
    border: 2px dashed var(--micantis-gray-300);
    border-radius: 10px;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--micantis-text-secondary);
    margin-top: 1rem;
}

.video-placeholder i {
    font-size: 2.5rem;
    opacity: 0.4;
}

.video-placeholder span {
    font-size: 0.85rem;
    opacity: 0.6;
}

/* Engineer quote cards */
.engineer-quote-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 1.5rem;
    position: relative;
    height: 100%;
}

.engineer-quote-card::before {
    content: '\201C';
    font-size: 3rem;
    color: var(--micantis-accent);
    line-height: 1;
    opacity: 0.6;
    position: absolute;
    top: 10px;
    left: 15px;
}

.engineer-quote-card p {
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
    padding-top: 1.5rem;
    color: rgba(255, 255, 255, 0.9);
}

/* Objection accordion */
.objection-accordion details {
    background: white;
    border: 1px solid var(--micantis-gray-200);
    border-radius: 10px;
    margin-bottom: 0.75rem;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.objection-accordion details:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.objection-accordion details[open] {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    border-color: var(--micantis-primary);
}

.objection-accordion summary {
    padding: 1.25rem 1.5rem;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--micantis-primary-dark);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.objection-accordion summary::-webkit-details-marker {
    display: none;
}

.objection-accordion summary::after {
    content: '\002B';
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--micantis-primary);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.objection-accordion details[open] summary::after {
    content: '\2212';
}

.objection-accordion .accordion-body {
    padding: 0 1.5rem 1.5rem;
    color: var(--micantis-text-secondary);
    line-height: 1.7;
}

/* Landing page stat items (horizontal proof row) */
.landing-stats {
    display: flex;
    gap: 3rem;
    margin-top: 2.5rem;
    flex-wrap: wrap;
}

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

.landing-stat .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    display: block;
    color: white;
}

.landing-stat .stat-desc {
    font-size: 0.85rem;
    opacity: 0.7;
    display: block;
    margin-top: 0.25rem;
}

/* Landing page dark section step cards */
.landing-step-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 1.75rem;
    height: 100%;
}

.landing-step-card .step-number {
    background: var(--micantis-accent);
}

.landing-step-card h4 {
    color: white;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.landing-step-card p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.65;
    margin-bottom: 0;
}

/* Social proof logo row */
.logo-placeholder-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.logo-placeholder {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--micantis-text-secondary);
    opacity: 0.5;
    padding: 1rem 2rem;
    border: 1px dashed var(--micantis-gray-300);
    border-radius: 8px;
}

/* Cross-link between landing pages */
.landing-crosslink {
    text-align: center;
    padding: 2rem 0 3rem;
    background: var(--micantis-gray-50);
}

.landing-crosslink a {
    color: var(--micantis-primary);
    font-weight: 500;
    text-decoration: none;
    font-size: 0.95rem;
}

.landing-crosslink a:hover {
    text-decoration: underline;
}

/* Moose icon sizing */
.moose-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    vertical-align: middle;
    color: var(--micantis-primary);
}

.moose-icon-sm {
    width: 20px;
    height: 20px;
}

/* Landing CTA section */
.landing-cta-section {
    background: linear-gradient(145deg, var(--micantis-header-text) 0%, var(--micantis-primary-dark) 50%, var(--micantis-primary) 100%);
    color: white;
    padding: 80px 0;
    text-align: center;
}

.landing-cta-section h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

.landing-cta-section p {
    font-size: 1.15rem;
    opacity: 0.85;
    max-width: 600px;
    margin: 0 auto 2rem;
    line-height: 1.7;
}

.landing-cta-section .btn-primary {
    font-size: 1.1rem;
    padding: 0.85rem 2.5rem;
}

@media (max-width: 767.98px) {
    .landing-cta-section h2 {
        font-size: 1.75rem;
    }
}

/* Tighter mono eyebrow for this hero specifically */
.mc-page.mc-page--warm .home-where .section-eyebrow {
    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Courier New', monospace;
    font-size: 0.74rem;
    letter-spacing: 0.28em;
    color: rgba(255, 255, 255, 0.68);
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

/* Where to start grid */
.mc-page.mc-page--warm .home-where {
    background: var(--hv-bg);
    padding: 64px 0 96px;
    border-top: 1px solid rgba(40, 35, 30, 0.08);
}

.mc-page.mc-page--warm .home-where .section-eyebrow {
    margin-bottom: 1rem;
}

.mc-page.mc-page--warm .home-where-sub {
    font-size: 1rem;
    color: var(--hv-muted);
    font-style: italic;
    max-width: 38rem;
    margin: 0 0 1rem;
}

.mc-page.mc-page--warm .home-step-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 14px;
    padding: 1.75rem 1.6rem 1.4rem;
    height: 100%;
    text-decoration: none;
    color: var(--hv-text);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.mc-page.mc-page--warm .home-step-card:hover {
    border-color: var(--hv-border-strong);
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
    color: var(--hv-text);
    text-decoration: none;
}

.mc-page.mc-page--warm .home-step-num {
    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Courier New', monospace;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--hv-accent);
    letter-spacing: 0.06em;
}

.mc-page.mc-page--warm .home-step-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--hv-text);
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1.3;
}

.mc-page.mc-page--warm .home-step-card p {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--hv-muted);
    margin: 0;
    flex-grow: 1;
}

.mc-page.mc-page--warm .home-step-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.75rem;
}

.mc-page.mc-page--warm .home-step-tag {
    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Courier New', monospace;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--hv-muted);
    background: rgba(40, 35, 30, 0.06);
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
}

.mc-page.mc-page--warm .home-step-arrow {
    color: var(--hv-accent);
    font-size: 1.1rem;
    transition: transform 0.2s ease;
}

.mc-page.mc-page--warm .home-step-card:hover .home-step-arrow {
    transform: translateX(4px);
}

/* Solutions: rich-card extras (quote line + stat list) layered onto home-step-card */
.mc-page.mc-page--warm .home-step-card .home-step-quote {
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--hv-text);
    border-left: 2px solid var(--hv-accent);
    padding-left: 0.85rem;
    margin: 0.5rem 0 0.25rem;
    flex-grow: 0;
}

.mc-page.mc-page--warm .home-step-card .home-step-stats {
    list-style: none;
    padding: 0;
    margin: 0.4rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex-grow: 1;
}

.mc-page.mc-page--warm .home-step-card .home-step-stats li {
    font-size: 0.88rem;
    color: var(--hv-muted);
    padding-left: 1rem;
    position: relative;
    line-height: 1.45;
}

.mc-page.mc-page--warm .home-step-card .home-step-stats li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--hv-energy);
}

.mc-page.mc-page--warm .home-step-card .home-step-stats strong {
    color: var(--hv-text);
    font-weight: 700;
}

/* ----- Homepage: clickable industry cards (audience + Learn More) ----- */
.mc-page a.iqc-industry-card--link,
.mc-page .iqc-industry-card--link {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--hv-text);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.mc-page a.iqc-industry-card--link:hover {
    color: var(--hv-text);
    text-decoration: none;
}

.mc-page .iqc-industry-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    color: var(--hv-accent);
    font-size: 0.88rem;
    font-weight: 600;
    transition: gap 0.2s ease;
}

.mc-page a.iqc-industry-card--link:hover .iqc-industry-card-link {
    gap: 0.6rem;
}

/* Indented sub-item under a dropdown parent (e.g. "Learn more about QC"
   nested visually under "Incoming Quality Control"). */
.dropdown-menu .dropdown-subitem {
    padding-left: 2rem;
    font-size: 0.88rem;
    color: #6e7891;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.dropdown-menu .dropdown-subitem i {
    color: #4A5AA8;
    font-size: 0.95rem;
}

.dropdown-menu .dropdown-subitem:hover,
.dropdown-menu .dropdown-subitem:focus {
    color: var(--micantis-header-text);
    background: rgba(74, 90, 168, 0.06);
}

/* ===========================================================
   Series spotlight on Insights + Quality Control Guide page
   =========================================================== */
.mc-page.mc-page--warm .insights-card-tag--series {
    background: linear-gradient(120deg, var(--hv-accent), #6B7AC4);
    color: #fff;
}

.mc-page.mc-page--warm .insights-series-section {
    padding: 64px 0;
    background: var(--hv-bg);
}

.mc-page.mc-page--warm .insights-series-card {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 0;
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
    text-decoration: none;
    color: var(--hv-text);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.mc-page.mc-page--warm .insights-series-card:hover {
    border-color: var(--hv-border-strong);
    transform: translateY(-3px);
    box-shadow: 0 30px 70px rgba(15, 23, 42, 0.12);
    color: var(--hv-text);
    text-decoration: none;
}

.mc-page.mc-page--warm .insights-series-body {
    padding: 2rem 2.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mc-page.mc-page--warm .insights-series-title {
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    font-weight: 800;
    color: var(--hv-text);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 0.85rem;
}

.mc-page.mc-page--warm .insights-series-excerpt {
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--hv-muted);
    margin: 0 0 1.25rem;
}

.mc-page.mc-page--warm .insights-series-toc {
    background:
        radial-gradient(900px 500px at 100% 100%, rgba(74, 90, 168, 0.08), transparent 65%),
        var(--hv-bg);
    padding: 1.75rem 1.85rem;
    border-left: 1px solid var(--hv-border);
}

.mc-page.mc-page--warm .insights-series-toc ol {
    list-style: none;
    counter-reset: none;
    padding: 0;
    margin: 0;
}

.mc-page.mc-page--warm .insights-series-toc li {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.45rem 0;
    font-size: 0.9rem;
    color: var(--hv-text);
    font-weight: 500;
}

.mc-page.mc-page--warm .insights-series-num {
    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Courier New', monospace;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--hv-accent);
    letter-spacing: 0.04em;
    flex-shrink: 0;
    min-width: 20px;
}

@media (max-width: 991.98px) {
    .mc-page.mc-page--warm .insights-series-card {
        grid-template-columns: 1fr;
    }
    .mc-page.mc-page--warm .insights-series-toc {
        border-left: none;
        border-top: 1px solid var(--hv-border);
    }
}

/* ----- Quality Control Guide chapters (full series page) ----- */
.mc-page.mc-page--warm .qcg-chapters-section {
    padding: 64px 0 88px;
    background: var(--hv-bg);
    border-top: 1px solid var(--hv-border);
}

.mc-page.mc-page--warm .qcg-chapter-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.mc-page.mc-page--warm .qcg-chapter {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 1.25rem;
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 14px;
    padding: 1.5rem 1.75rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mc-page.mc-page--warm .qcg-chapter:hover {
    border-color: var(--hv-border-strong);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

.mc-page.mc-page--warm .qcg-chapter-num {
    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Courier New', monospace;
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--hv-accent);
    letter-spacing: -0.02em;
    line-height: 1;
}

.mc-page.mc-page--warm .qcg-chapter-body { display: flex; flex-direction: column; gap: 0.5rem; }

.mc-page.mc-page--warm .qcg-chapter-tag {
    align-self: flex-start;
    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Courier New', monospace;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--hv-accent);
    background: var(--hv-accent-soft);
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
}

.mc-page.mc-page--warm .qcg-chapter-body h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--hv-text);
    letter-spacing: -0.015em;
    margin: 0;
    line-height: 1.3;
}

.mc-page.mc-page--warm .qcg-chapter-body p {
    color: var(--hv-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

.mc-page.mc-page--warm .qcg-chapter-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    font-size: 0.83rem;
    color: var(--hv-muted);
    margin-top: 0.25rem;
}

.mc-page.mc-page--warm .qcg-chapter-meta i { color: var(--hv-accent); margin-right: 0.3rem; }

.mc-page.mc-page--warm .qcg-chapter-meta-dot { color: rgba(15, 23, 42, 0.3); }

.mc-page.mc-page--warm .qcg-chapter-status {
    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Courier New', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.mc-page.mc-page--warm .qcg-chapter-status--coming { color: #8A6300; }
.mc-page.mc-page--warm .qcg-chapter-status--published { color: #007A5C; }

/* Tag color buckets — mirror the homepage stack tiles */
.mc-page.mc-page--warm .qcg-chapter-tag--coach {
    background: rgba(122, 128, 154, 0.12);
    color: var(--hv-muted);
}
.mc-page.mc-page--warm .qcg-chapter-tag--connect {
    background: var(--hv-accent-soft);
    color: var(--hv-accent);
}
.mc-page.mc-page--warm .qcg-chapter-tag--software {
    background: rgba(15, 23, 42, 0.07);
    color: var(--hv-text);
}
.mc-page.mc-page--warm .qcg-chapter-tag--foreword {
    background: var(--hv-text);
    color: var(--hv-surface);
}

/* Lead chapter (Foreword) — visually pulled forward */
.mc-page.mc-page--warm .qcg-chapter--lead {
    background: var(--hv-text);
    border-color: var(--hv-text);
    margin-bottom: 1.5rem;
}
.mc-page.mc-page--warm .qcg-chapter--lead:hover {
    border-color: var(--hv-text);
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.18);
}
.mc-page.mc-page--warm .qcg-chapter--lead .qcg-chapter-num { color: var(--hv-surface); }
.mc-page.mc-page--warm .qcg-chapter--lead .qcg-chapter-body h3 { color: var(--hv-surface); }
.mc-page.mc-page--warm .qcg-chapter--lead .qcg-chapter-body p { color: rgba(255, 255, 255, 0.78); }
.mc-page.mc-page--warm .qcg-chapter--lead .qcg-chapter-meta { color: rgba(255, 255, 255, 0.6); }
.mc-page.mc-page--warm .qcg-chapter--lead .qcg-chapter-meta i { color: rgba(255, 255, 255, 0.85); }
.mc-page.mc-page--warm .qcg-chapter--lead .qcg-chapter-meta-dot { color: rgba(255, 255, 255, 0.3); }
.mc-page.mc-page--warm .qcg-chapter--lead .qcg-chapter-status--coming { color: #F2C871; }

/* Clickable chapter — wrapper anchor must not break the chapter's grid */
.mc-page.mc-page--warm .qcg-chapter-link {
    display: contents;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

/* Lead foreword is live — lift it on hover to signal it's clickable */
.mc-page.mc-page--warm .qcg-chapter--lead {
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.mc-page.mc-page--warm .qcg-chapter--lead:hover {
    transform: translateY(-3px);
    box-shadow: 0 26px 56px rgba(15, 23, 42, 0.22);
}

/* "Read now" CTA — a filled pill that pops on the dark foreword card */
.mc-page.mc-page--warm .qcg-chapter--lead .qcg-chapter-status--published {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--hv-text);
    background: #6FE3C0;
    padding: 0.34rem 0.85rem;
    border-radius: 999px;
    transition: background 0.2s ease;
}
.mc-page.mc-page--warm .qcg-chapter--lead .qcg-chapter-status--published i {
    transition: transform 0.2s ease;
}
.mc-page.mc-page--warm .qcg-chapter--lead:hover .qcg-chapter-status--published {
    background: #8AEDD0;
}
.mc-page.mc-page--warm .qcg-chapter--lead:hover .qcg-chapter-status--published i {
    transform: translateX(3px);
}

@media (max-width: 575.98px) {
    .mc-page.mc-page--warm .qcg-chapter {
        grid-template-columns: 1fr;
        padding: 1.25rem 1.4rem;
    }
    .mc-page.mc-page--warm .qcg-chapter-num { font-size: 1.8rem; }
}

/* ===========================================================
   Predictive Models page (warm v2)
   =========================================================== */

/* "Established" / "Custom" tag pills on prediction cards */
.mc-page.mc-page--warm .pm-card-tag {
    align-self: flex-start;
    display: inline-block;
    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Courier New', monospace;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    margin-bottom: 0.85rem;
}

.mc-page.mc-page--warm .pm-card-tag--established {
    background: rgba(0, 200, 150, 0.13);
    color: #007A5C;
}

.mc-page.mc-page--warm .pm-card-tag--custom {
    background: var(--hv-accent-soft);
    color: var(--hv-accent);
}

.mc-page.mc-page--warm .pm-card-tag--featured {
    background: linear-gradient(120deg, var(--hv-accent), var(--hv-energy));
    color: #fff;
}

/* Methodology numbered flow */
.mc-page.mc-page--warm .pm-method-card {
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 18px;
    padding: 1.75rem 1.85rem;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.05);
}

/* ----- Predictive Models: ways to apply ML (clean typography) ----- */
.mc-page.mc-page--warm .pm-app-num {
    font-family: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--hv-accent);
    margin-bottom: 0.9rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--hv-border);
}

.mc-page.mc-page--warm .pm-app-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--hv-text);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 0.65rem;
}

.mc-page.mc-page--warm .pm-app-body {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--hv-muted);
    margin: 0 0 0.65rem;
}

.mc-page.mc-page--warm .pm-app-eg {
    font-size: 0.88rem;
    font-style: italic;
    color: var(--hv-muted);
    line-height: 1.5;
    margin: 0;
    opacity: 0.85;
}

/* ----- Predictive Models hero flow chart ----- */
.mc-page.mc-page--warm .pm-hero-flow {
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 20px;
    padding: 1.5rem 1.5rem 1.25rem;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

.mc-page.mc-page--warm .pm-flow-eyebrow {
    font-family: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--hv-muted);
    margin-bottom: 1rem;
    display: block;
}

.mc-page.mc-page--warm .pm-flow-step {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem 0;
}

.mc-page.mc-page--warm .pm-flow-num {
    font-family: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--hv-muted);
    letter-spacing: 0.1em;
}

.mc-page.mc-page--warm .pm-flow-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(74, 90, 168, 0.1);
    color: var(--hv-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.mc-page.mc-page--warm .pm-flow-step--final .pm-flow-icon {
    background: rgba(0, 200, 150, 0.12);
    color: #00A67E;
}

.mc-page.mc-page--warm .pm-flow-meta {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.mc-page.mc-page--warm .pm-flow-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--hv-text);
    line-height: 1.25;
}

.mc-page.mc-page--warm .pm-flow-detail {
    font-size: 0.82rem;
    color: var(--hv-muted);
    line-height: 1.35;
}

.mc-page.mc-page--warm .pm-flow-connector {
    width: 2px;
    height: 20px;
    background: linear-gradient(to bottom, transparent, rgba(74, 90, 168, 0.35), transparent);
    margin-left: calc(0.5rem + 0.5ch);
    margin-block: -2px;
}

.mc-page.mc-page--warm .pm-flow-loop {
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--hv-border);
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.mc-page.mc-page--warm .pm-flow-loop svg {
    width: 28px;
    height: 22px;
    flex-shrink: 0;
    transform: rotate(180deg);
    opacity: 0.85;
}

.mc-page.mc-page--warm .pm-flow-loop-label {
    font-size: 0.78rem;
    color: var(--hv-muted);
    font-style: italic;
    line-height: 1.35;
}

@media (max-width: 991.98px) {
    .mc-page.mc-page--warm .pm-hero-flow {
        margin-top: 1.5rem;
    }
}

.mc-page.mc-page--warm .pm-method-flow {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.mc-page.mc-page--warm .pm-method-flow li {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 1rem;
    align-items: flex-start;
}

.mc-page.mc-page--warm .pm-method-num {
    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Courier New', monospace;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--hv-accent);
    line-height: 1;
}

.mc-page.mc-page--warm .pm-method-flow h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--hv-text);
    letter-spacing: -0.01em;
    margin: 0 0 0.25rem;
}

.mc-page.mc-page--warm .pm-method-flow p {
    color: var(--hv-muted);
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0;
}

/* Money back guarantee callout */
.mc-page.mc-page--warm .pm-guarantee-card {
    background:
        radial-gradient(900px 500px at 0% 0%, rgba(74, 90, 168, 0.10), transparent 65%),
        radial-gradient(700px 400px at 100% 100%, rgba(0, 200, 150, 0.08), transparent 65%),
        var(--hv-surface);
    border: 1px solid var(--hv-border-strong);
    border-radius: 22px;
    padding: 2.75rem 2.5rem;
    box-shadow: 0 30px 70px rgba(15, 23, 42, 0.08);
}

.mc-page.mc-page--warm .pm-guarantee-title {
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    font-weight: 800;
    color: var(--hv-text);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0.85rem 0 0.85rem;
    max-width: 50rem;
}

.mc-page.mc-page--warm .pm-guarantee-sub {
    color: var(--hv-muted);
    font-size: 1.05rem;
    line-height: 1.55;
    max-width: 46rem;
    margin: 0 0 2rem;
}

.mc-page.mc-page--warm .pm-guarantee-points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.mc-page.mc-page--warm .pm-guarantee-point {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.mc-page.mc-page--warm .pm-guarantee-point i {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--hv-accent-soft);
    color: var(--hv-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.mc-page.mc-page--warm .pm-guarantee-point h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--hv-text);
    margin: 0 0 0.25rem;
}

.mc-page.mc-page--warm .pm-guarantee-point p {
    color: var(--hv-muted);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 991.98px) {
    .mc-page.mc-page--warm .pm-guarantee-points { grid-template-columns: 1fr; gap: 1rem; }
    .mc-page.mc-page--warm .pm-guarantee-card { padding: 2rem 1.75rem; }
}

/* ===========================================================
   MOOSE AI page (warm v2)
   =========================================================== */

/* Two-pillar overview right under the hero */
.mc-page.mc-page--warm .moose-pillars-section {
    padding: 16px 0 64px;
    background: var(--hv-bg);
}

.mc-page.mc-page--warm .moose-pillar-card {
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 18px;
    padding: 2rem 2.25rem;
    height: 100%;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.05);
    display: flex;
    flex-direction: column;
}

.mc-page.mc-page--warm .moose-pillar-card--alt {
    background:
        radial-gradient(700px 320px at 100% 0%, rgba(0, 200, 150, 0.07), transparent 65%),
        radial-gradient(600px 320px at 0% 100%, rgba(74, 90, 168, 0.06), transparent 65%),
        var(--hv-surface);
    border-color: rgba(74, 90, 168, 0.2);
}

.mc-page.mc-page--warm .moose-pillar-tag {
    display: inline-block;
    align-self: flex-start;
    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Courier New', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--hv-accent);
    background: var(--hv-accent-soft);
    padding: 0.32rem 0.75rem;
    border-radius: 999px;
    margin-bottom: 1.1rem;
}

.mc-page.mc-page--warm .moose-pillar-tag--alt {
    background: linear-gradient(120deg, var(--hv-accent), var(--hv-energy));
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.mc-page.mc-page--warm .moose-pillar-cross {
    font-family: inherit;
    font-weight: 800;
    font-size: 0.85rem;
    opacity: 0.85;
}

.mc-page.mc-page--warm .moose-pillar-title {
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    font-weight: 800;
    color: var(--hv-text);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 0.85rem;
}

.mc-page.mc-page--warm .moose-pillar-sub {
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--hv-muted);
    margin: 0 0 1.25rem;
}

.mc-page.mc-page--warm .moose-pillar-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    flex-grow: 1;
}

.mc-page.mc-page--warm .moose-pillar-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--hv-text);
}

.mc-page.mc-page--warm .moose-pillar-list i {
    color: var(--hv-accent);
    font-size: 1rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.mc-page.mc-page--warm .moose-pillar-list strong { font-weight: 700; color: var(--hv-text); }

.mc-page.mc-page--warm .moose-pillar-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--hv-accent);
    text-decoration: none;
    transition: gap 0.2s ease;
    margin-top: auto;
}

.mc-page.mc-page--warm .moose-pillar-link:hover {
    gap: 0.6rem;
    color: var(--hv-text);
}
.mc-page.mc-page--warm .moose-example-pair {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.mc-page.mc-page--warm .moose-example-block {
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 12px;
    padding: 0.85rem 1rem;
}

.mc-page.mc-page--warm .moose-example-label {
    display: inline-block;
    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Courier New', monospace;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--hv-accent);
    margin-bottom: 0.35rem;
}

.mc-page.mc-page--warm .moose-example-block p {
    color: var(--hv-text);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
    font-style: italic;
}

.mc-page.mc-page--warm .moose-cap-example {
    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Courier New', monospace;
    background: var(--hv-bg);
    border-left: 3px solid var(--hv-accent);
    padding: 0.6rem 0.85rem;
    font-size: 0.82rem;
    color: var(--hv-text);
    line-height: 1.5;
    margin: 0.85rem 0 0;
    border-radius: 0 6px 6px 0;
}

.mc-page.mc-page--warm .moose-workflow-card-v2 {
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 12px;
    padding: 1.1rem 1.1rem 1rem;
    text-align: left;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.mc-page.mc-page--warm .moose-workflow-card-v2:hover {
    border-color: var(--hv-border-strong);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.mc-page.mc-page--warm .moose-workflow-card-v2 i {
    font-size: 1.4rem;
    color: var(--hv-accent);
    margin-bottom: 0.5rem;
    display: block;
}

.mc-page.mc-page--warm .moose-workflow-card-v2 h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--hv-text);
    letter-spacing: -0.01em;
    margin: 0 0 0.35rem;
}

.mc-page.mc-page--warm .moose-workflow-card-v2 p {
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--hv-muted);
    margin: 0;
}

/* Viz example card */
.mc-page.mc-page--warm .moose-viz-card {
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 16px;
    padding: 1.5rem 1.6rem;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.05);
}

.mc-page.mc-page--warm .moose-viz-row {
    margin-bottom: 1rem;
}

.mc-page.mc-page--warm .moose-viz-row p {
    color: var(--hv-text);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

.mc-page.mc-page--warm .moose-viz-row ul {
    margin: 0.4rem 0 0 0;
    padding-left: 1.25rem;
    color: var(--hv-muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

.mc-page.mc-page--warm .moose-viz-label {
    display: inline-block;
    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Courier New', monospace;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--hv-accent);
    margin-bottom: 0.4rem;
}

.mc-page.mc-page--warm .moose-viz-foot {
    font-size: 0.82rem;
    color: var(--hv-accent);
    font-weight: 600;
    padding-top: 0.6rem;
    border-top: 1px solid var(--hv-border);
}

/* Compact security strip on the MOOSE AI page: 4 centered stacks
   (icon → bold label → small description). */
.mc-page.mc-page--warm .moose-security-strip {
    padding: 32px 0 48px;
}
.mc-page.mc-page--warm .moose-sec-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    padding: 0 0.5rem;
}
.mc-page.mc-page--warm .moose-sec-item i {
    color: var(--hv-accent);
    font-size: 1.4rem;
    line-height: 1;
}
.mc-page.mc-page--warm .moose-sec-item strong {
    color: var(--hv-text);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: -0.005em;
}
.mc-page.mc-page--warm .moose-sec-item span {
    color: var(--hv-muted);
    font-size: 0.82rem;
    line-height: 1.45;
    max-width: 220px;
}

/* ===========================================================
   Insights page (blog-style, warm v2)
   =========================================================== */

.mc-page.mc-page--warm .insights-featured-section,
.mc-page.mc-page--warm .insights-feed-section,
.mc-page.mc-page--warm .insights-coming-section,
.mc-page.mc-page--warm .insights-newsletter-section {
    padding: 64px 0;
    background: var(--hv-bg);
}

.mc-page.mc-page--warm .insights-feed-section,
.mc-page.mc-page--warm .insights-coming-section,
.mc-page.mc-page--warm .insights-newsletter-section {
    border-top: 1px solid var(--hv-border);
}

.mc-page.mc-page--warm .insights-coming-section {
    background: var(--hv-surface);
}

/* Tag pills shared across cards */
.mc-page.mc-page--warm .insights-card-tag {
    display: inline-block;
    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Courier New', monospace;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--hv-accent);
    background: var(--hv-accent-soft);
    border-radius: 999px;
    padding: 0.3rem 0.7rem;
    margin-bottom: 0.85rem;
}

.mc-page.mc-page--warm .insights-card-tag--feature { background: linear-gradient(120deg, var(--hv-accent), var(--hv-energy)); color: #fff; }
.mc-page.mc-page--warm .insights-card-tag--technical { background: rgba(255, 184, 0, 0.15); color: #8A6300; }
.mc-page.mc-page--warm .insights-card-tag--guide { background: rgba(0, 200, 150, 0.13); color: #007A5C; }
.mc-page.mc-page--warm .insights-card-tag--case { background: rgba(74, 90, 168, 0.12); color: var(--hv-accent); }

/* Card meta line: author / date / read time */
.mc-page.mc-page--warm .insights-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    color: var(--hv-muted);
    font-size: 0.85rem;
    font-weight: 500;
}

.mc-page.mc-page--warm .insights-card-meta-dot {
    color: rgba(15, 23, 42, 0.3);
}

.mc-page.mc-page--warm .insights-card-meta i {
    color: var(--hv-accent);
}

/* Featured article hero card */
.mc-page.mc-page--warm .insights-featured-card {
    display: block;
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
    text-decoration: none;
    color: var(--hv-text);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.mc-page.mc-page--warm .insights-featured-card:hover {
    border-color: var(--hv-border-strong);
    transform: translateY(-3px);
    box-shadow: 0 30px 70px rgba(15, 23, 42, 0.12);
    color: var(--hv-text);
    text-decoration: none;
}

.mc-page.mc-page--warm .insights-featured-img {
    background: var(--hv-bg);
    min-height: 280px;
}

.mc-page.mc-page--warm .insights-featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 280px;
}

.mc-page.mc-page--warm .insights-featured-body {
    padding: 2rem 2.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mc-page.mc-page--warm .insights-featured-title {
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
    font-weight: 800;
    color: var(--hv-text);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 0.85rem;
}

.mc-page.mc-page--warm .insights-featured-excerpt {
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--hv-muted);
    margin: 0.85rem 0 1.25rem;
}

.mc-page.mc-page--warm .insights-featured-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
    color: var(--hv-accent);
    font-size: 0.95rem;
    transition: gap 0.2s ease;
}

.mc-page.mc-page--warm .insights-featured-card:hover .insights-featured-link {
    gap: 0.65rem;
}

/* Blog post card (feed) */
.mc-page.mc-page--warm .insights-post-card {
    display: flex;
    flex-direction: column;
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: var(--hv-text);
    height: 100%;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.mc-page.mc-page--warm .insights-post-card:hover {
    border-color: var(--hv-border-strong);
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    color: var(--hv-text);
    text-decoration: none;
}

.mc-page.mc-page--warm .insights-post-img {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--hv-bg);
}

.mc-page.mc-page--warm .insights-post-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.mc-page.mc-page--warm .insights-post-card:hover .insights-post-img img {
    transform: scale(1.04);
}

.mc-page.mc-page--warm .insights-post-img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 30% 30%, rgba(74, 90, 168, 0.12), transparent 60%),
        radial-gradient(circle at 70% 70%, rgba(0, 200, 150, 0.10), transparent 60%),
        var(--hv-bg);
    color: var(--hv-accent);
    font-size: 2.5rem;
}

.mc-page.mc-page--warm .insights-post-body {
    padding: 1.5rem 1.5rem 1.4rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.mc-page.mc-page--warm .insights-post-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--hv-text);
    letter-spacing: -0.015em;
    line-height: 1.3;
    margin: 0 0 0.6rem;
}

.mc-page.mc-page--warm .insights-post-excerpt {
    font-size: 0.93rem;
    line-height: 1.55;
    color: var(--hv-muted);
    margin: 0 0 1rem;
    flex-grow: 1;
}

/* Coming soon card */
.mc-page.mc-page--warm .insights-coming-card {
    background: var(--hv-bg);
    border: 1px dashed var(--hv-border-strong);
    border-radius: 14px;
    padding: 1.75rem;
}

/* Newsletter card */
.mc-page.mc-page--warm .insights-newsletter-card {
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 18px;
    padding: 2.5rem;
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.06);
}

.mc-page.mc-page--warm .insights-newsletter-form {
    width: 100%;
}

.mc-page.mc-page--warm .insights-newsletter-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.mc-page.mc-page--warm .insights-newsletter-input {
    flex: 1 1 220px;
    background: var(--hv-bg);
    border: 1px solid var(--hv-border);
    border-radius: 999px;
    padding: 0.65rem 1.1rem;
    font-size: 0.95rem;
    color: var(--hv-text);
    outline: none;
    transition: border-color 0.2s ease;
}

.mc-page.mc-page--warm .insights-newsletter-input:focus {
    border-color: var(--hv-accent);
    background: var(--hv-surface);
}

.mc-page.mc-page--warm .insights-newsletter-status {
    margin: 0.75rem 0 0 1.1rem;
    font-size: 0.9rem;
    color: var(--hv-muted);
}

.mc-page.mc-page--warm .insights-newsletter-status.is-error {
    color: var(--micantis-danger, #E55555);
}

/* ===========================================================
   Team page — featured leadership cards
   =========================================================== */
.mc-page.mc-page--warm .team-section {
    padding: 4rem 0 5rem;
    background: var(--hv-bg);
}

.mc-page.mc-page--warm .team-card-v3 {
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.mc-page.mc-page--warm .team-card-v3-photo {
    width: 180px;
    height: 180px;
    margin: 2.25rem auto 0;
    border-radius: 50%;
    overflow: hidden;
}

.mc-page.mc-page--warm .team-card-v3-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
    display: block;
    transition: transform 0.4s ease;
}

/* Per-headshot focal-point tuning — each source photo is framed
   slightly differently, so we lock face position individually. */
.mc-page.mc-page--warm .team-card-v3-photo img[alt="Howard Alt"] {
    object-position: center center;
}
.mc-page.mc-page--warm .team-card-v3-photo img[alt="Jonathan Awerbuch"] {
    object-position: center 12%;
}
.mc-page.mc-page--warm .team-card-v3-photo img[alt="Mykela DeLuca"] {
    object-position: center 28%;
}

/* Hover scale removed: cards aren't links, so they shouldn't telegraph interactivity. */

.mc-page.mc-page--warm .team-card-v3-body {
    padding: 1.4rem 1.6rem 1.6rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: center;
    text-align: center;
}

.mc-page.mc-page--warm .team-card-v3-role {
    font-family: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--hv-accent);
    margin: 0 0 0.4rem;
}

.mc-page.mc-page--warm .team-card-v3-name {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--hv-text);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 0.75rem;
}

.mc-page.mc-page--warm .team-card-v3-bio {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--hv-muted);
    margin: 0 0 1.1rem;
    flex-grow: 1;
}

.mc-page.mc-page--warm .team-card-v3-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--hv-accent);
    text-decoration: none;
    margin-top: 0.5rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--hv-border);
    transition: color 0.18s ease;
    align-self: center;
    justify-content: center;
    min-width: 9rem;
}

.mc-page.mc-page--warm .team-card-v3-link:hover {
    color: var(--hv-text);
}

.mc-page.mc-page--warm .team-card-v3-link i {
    font-size: 1rem;
    color: #0A66C2;
}

/* ===========================================================
   About / Team page (warm v2)
   =========================================================== */
.mc-page.mc-page--warm .about-founder-stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: 420px;
    margin-left: auto;
}

.mc-page.mc-page--warm .about-founder-tile {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1rem;
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.mc-page.mc-page--warm .about-founder-tile:hover {
    transform: translateY(-2px);
    border-color: rgba(74, 90, 168, 0.3);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
    color: inherit;
    text-decoration: none;
}

.mc-page.mc-page--warm .about-founder-tile img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--hv-border);
}

.mc-page.mc-page--warm .about-founder-meta {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.mc-page.mc-page--warm .about-founder-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--hv-text);
    letter-spacing: -0.01em;
}

.mc-page.mc-page--warm .about-founder-title {
    font-size: 0.82rem;
    color: var(--hv-muted);
}

.mc-page.mc-page--warm .about-story-callout {
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    background: var(--hv-surface);
    border-left: 3px solid var(--hv-accent);
    border-radius: 0 10px 10px 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--hv-text);
    line-height: 1.5;
}

.mc-page.mc-page--warm .about-team-card {
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 18px;
    padding: 1.75rem;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.mc-page.mc-page--warm .about-team-card:hover {
    transform: translateY(-2px);
    border-color: rgba(74, 90, 168, 0.25);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.07);
}

.mc-page.mc-page--warm .about-team-photo {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1rem;
    border: 2px solid var(--hv-border);
}

.mc-page.mc-page--warm .about-team-body h4 {
    margin: 0 0 0.25rem;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.mc-page.mc-page--warm .about-team-body h4 a {
    color: var(--hv-text);
    text-decoration: none;
}

.mc-page.mc-page--warm .about-team-body h4 a:hover {
    color: var(--hv-accent);
}

.mc-page.mc-page--warm .about-team-role {
    font-family: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--hv-accent);
    margin: 0 0 0.75rem;
}

.mc-page.mc-page--warm .about-team-bio {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--hv-muted);
    margin: 0;
}

/* ===========================================================
   Spreadsheets vs Build vs Micantis comparison table
   =========================================================== */
.mc-page.mc-page--warm .iqc-compare-wrap {
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
    overflow-x: auto;
}

.mc-page.mc-page--warm .iqc-compare-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
}

.mc-page.mc-page--warm .iqc-compare-table th,
.mc-page.mc-page--warm .iqc-compare-table td {
    padding: 0.85rem 1.1rem;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid var(--hv-border);
    font-size: 0.92rem;
}

.mc-page.mc-page--warm .iqc-compare-table thead th {
    background: rgba(74, 90, 168, 0.04);
    font-family: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--hv-muted);
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
}

.mc-page.mc-page--warm .iqc-compare-table thead th.iqc-compare-col--mc {
    color: var(--hv-accent);
    background: rgba(74, 90, 168, 0.08);
}

.mc-page.mc-page--warm .iqc-compare-table tbody th {
    text-align: left;
    font-weight: 600;
    color: var(--hv-text);
    background: var(--hv-surface);
    width: 36%;
    line-height: 1.3;
}

.mc-page.mc-page--warm .iqc-compare-table tbody tr:last-child th,
.mc-page.mc-page--warm .iqc-compare-table tbody tr:last-child td {
    border-bottom: none;
}

.mc-page.mc-page--warm .iqc-compare-table tbody tr:nth-child(even) th,
.mc-page.mc-page--warm .iqc-compare-table tbody tr:nth-child(even) td {
    background: rgba(15, 23, 42, 0.015);
}

.mc-page.mc-page--warm .iqc-compare-table .iqc-compare-col--mc {
    background: rgba(74, 90, 168, 0.05);
    border-left: 1px solid rgba(74, 90, 168, 0.18);
    border-right: 1px solid rgba(74, 90, 168, 0.18);
    font-weight: 600;
    color: var(--hv-text);
}

.mc-page.mc-page--warm .iqc-compare-table tbody tr:nth-child(even) .iqc-compare-col--mc {
    background: rgba(74, 90, 168, 0.08);
}

.mc-page.mc-page--warm .iqc-compare-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 0.95rem;
    line-height: 1;
}

.mc-page.mc-page--warm .iqc-compare-icon--yes {
    background: rgba(0, 200, 150, 0.18);
    color: #00A67E;
}

.mc-page.mc-page--warm .iqc-compare-icon--no {
    background: rgba(229, 85, 85, 0.12);
    color: #C84141;
}

.mc-page.mc-page--warm .iqc-compare-cell-note {
    font-size: 0.85rem;
    color: var(--hv-muted);
}

.mc-page.mc-page--warm .iqc-compare-cell-note--warn { color: #B73838; }
.mc-page.mc-page--warm .iqc-compare-cell-note--good { color: #007A5C; font-weight: 600; }

@media (max-width: 767.98px) {
    .mc-page.mc-page--warm .iqc-compare-table th,
    .mc-page.mc-page--warm .iqc-compare-table td { padding: 0.65rem 0.75rem; font-size: 0.85rem; }
}

/* ===========================================================
   Pricing page (warm v2)
   =========================================================== */

/* Small inline perks row above plan cards: icon + short label per item. */
.mc-page.mc-page--warm .pricing-perks-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    margin: 0.25rem 0 2.5rem;
}

.mc-page.mc-page--warm .pricing-perk {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--hv-text);
}

.mc-page.mc-page--warm .pricing-perk i {
    color: var(--hv-accent);
    font-size: 1rem;
}

/* Unlimited-data banner above plan cards */
.mc-page.mc-page--warm .pricing-unlimited-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 760px;
    margin: 0 auto 2.5rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, rgba(74, 90, 168, 0.08), rgba(0, 200, 150, 0.08));
    border: 1px solid rgba(74, 90, 168, 0.2);
    border-radius: 14px;
}

.mc-page.mc-page--warm .pricing-unlimited-banner-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--hv-accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.mc-page.mc-page--warm .pricing-unlimited-banner-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.mc-page.mc-page--warm .pricing-unlimited-banner-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--hv-text);
    letter-spacing: -0.01em;
}

.mc-page.mc-page--warm .pricing-unlimited-banner-sub {
    font-size: 0.88rem;
    color: var(--hv-muted);
    line-height: 1.4;
}

/* Featured benefit card variant (highlights the unlimited-data tile) */
.mc-page.mc-page--warm .iqc-benefit-card--featured {
    background: linear-gradient(135deg, rgba(74, 90, 168, 0.06), rgba(0, 200, 150, 0.06));
    border-color: rgba(74, 90, 168, 0.25);
}

.mc-page.mc-page--warm .iqc-benefit-card--featured .iqc-benefit-icon {
    background: var(--hv-accent);
    color: #fff;
}
.mc-page.mc-page--warm .iqc-benefit-card--featured .iqc-benefit-icon i {
    color: #fff;
}

.mc-page.mc-page--warm .pricing-plan-v2 {
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 18px;
    padding: 2rem 2rem 1.75rem;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Featured-plan highlight removed: both plans render identically white. */

.mc-page.mc-page--warm .pricing-plan-badge {
    position: absolute;
    top: -14px;
    left: 28px;
    background: linear-gradient(120deg, var(--hv-accent), var(--hv-energy));
    color: #fff;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    box-shadow: 0 8px 22px rgba(74, 90, 168, 0.32);
}

.mc-page.mc-page--warm .pricing-plan-name {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--hv-text);
    letter-spacing: -0.015em;
    margin: 0 0 0.4rem;
}

.mc-page.mc-page--warm .pricing-plan-desc {
    color: var(--hv-muted);
    font-size: 0.95rem;
    margin: 0 0 1.25rem;
}

/* Reserve two tagline lines at desktop so the price rows align across side-by-side plan cards. */
@media (min-width: 992px) {
    .mc-page.mc-page--warm .pricing-plan-name + .pricing-plan-desc {
        min-height: 3em;
    }
}

/* Alternative contact path inside the shared contact modal. */
.contact-modal-alt {
    margin-top: 0.25rem;
    padding-top: 0.9rem;
    border-top: 1px solid #e9ecef;
    font-size: 0.9rem;
    color: #6C757D;
}

.contact-modal-alt a {
    font-weight: 600;
    color: #556DAF;
}

.mc-page.mc-page--warm .pricing-plan-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}

.mc-page.mc-page--warm .pricing-plan-price-from {
    font-size: 0.8rem;
    color: var(--hv-muted);
    font-weight: 500;
    margin-right: 0.2rem;
}

.mc-page.mc-page--warm .pricing-plan-price-amount {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--hv-text);
    letter-spacing: -0.025em;
    line-height: 1;
}

.mc-page.mc-page--warm .pricing-plan-price-period {
    font-size: 0.95rem;
    color: var(--hv-muted);
}

.mc-page.mc-page--warm .pricing-plan-seats {
    color: var(--hv-muted);
    font-size: 0.85rem;
    font-style: italic;
    margin-bottom: 1.25rem;
}

.mc-page.mc-page--warm .pricing-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex-grow: 1;
}

.mc-page.mc-page--warm .pricing-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.95rem;
    color: var(--hv-text);
    line-height: 1.45;
}

.mc-page.mc-page--warm .pricing-plan-features i {
    color: var(--hv-energy);
    font-size: 1rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.mc-page.mc-page--warm .pricing-plan-features strong { color: var(--hv-text); font-weight: 700; }

.mc-page.mc-page--warm .pricing-plan-note {
    background: var(--hv-bg);
    border: 1px solid var(--hv-border);
    border-radius: 10px;
    padding: 0.7rem 0.9rem;
    color: var(--hv-muted);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0 0 0.5rem;
}

/* Per-seat tier label sits above the tier name in the comparison table */
.mc-page.mc-page--warm .pricing-tier-label {
    display: inline-block;
    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Courier New', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--hv-accent);
    margin-bottom: 0.5rem;
}

/* Compact plan cards on /pro: a price-first strip right under the hero. */
.mc-page.mc-page--warm .pricing-plan-v2--compact {
    padding: 1.4rem 1.5rem 1.1rem;
}

.mc-page.mc-page--warm .pricing-plan-v2--compact .pricing-plan-price {
    margin: 0.25rem 0 0.5rem;
}

/* Clickable plan card: a stretched link on the plan name makes the whole card navigate,
   while inner links and buttons sit above it and keep their own targets. */
.mc-page.mc-page--warm .pricing-plan-v2--clickable:hover {
    border-color: var(--hv-accent);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.10);
}

.mc-page.mc-page--warm .pricing-plan-name-link {
    color: inherit;
    text-decoration: none;
}

.mc-page.mc-page--warm .pricing-plan-v2--clickable a:not(.stretched-link),
.mc-page.mc-page--warm .pricing-plan-v2--clickable button {
    position: relative;
    z-index: 2;
}

/* "learn more about seat types" link inside the WebApp note */
.mc-page.mc-page--warm .pricing-plan-note-link {
    color: var(--hv-accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mc-page.mc-page--warm .pricing-plan-note-link:hover {
    color: var(--hv-text);
}

/* Seat comparison table — stronger contrast, alternating row stripes */
.mc-page.mc-page--warm .pricing-seat-table-wrap {
    background: var(--hv-surface);
    border: 1px solid var(--hv-border-strong);
    border-radius: 18px;
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    overflow-x: auto;
}

.mc-page.mc-page--warm .pricing-seat-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    min-width: 780px;
}

.mc-page.mc-page--warm .pricing-seat-table thead th {
    background: #ECEEF4;
    border-bottom: 2px solid rgba(15, 23, 42, 0.18);
    padding: 1rem 1.25rem 0.85rem;
    text-align: center;
    vertical-align: top;
    width: 19%;
}

.mc-page.mc-page--warm .pricing-seat-table thead th.pricing-seat-row-head {
    width: 24%;
    text-align: left;
    background: #ECEEF4;
    vertical-align: bottom;
}

/* Plan group row above the seat-type names: "Micantis Pro" over its column,
   "Micantis Team" centered across the three seat columns. */
.mc-page.mc-page--warm .pricing-seat-table thead tr.pricing-seat-group-row th:not(.pricing-seat-row-head) {
    width: auto;
    padding: 0.85rem 1.25rem 0;
    border-bottom: none;
}

.mc-page.mc-page--warm .pricing-seat-table thead tr.pricing-seat-group-row .pricing-tier-label {
    margin-bottom: 0;
}

.mc-page.mc-page--warm .pricing-seat-tier-name {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--hv-text);
    letter-spacing: -0.01em;
    margin-bottom: 0.3rem;
}

.mc-page.mc-page--warm .pricing-seat-tier-name i {
    color: var(--hv-accent);
    font-size: 1rem;
}

.mc-page.mc-page--warm .pricing-seat-tier-desc {
    display: block;
    font-size: 0.85rem;
    color: #475569;
    font-weight: 500;
    line-height: 1.4;
}

.mc-page.mc-page--warm .pricing-seat-table tbody td {
    padding: 0.55rem 1.25rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.09);
    text-align: center;
    font-size: 0.93rem;
    line-height: 1.3;
    color: var(--hv-text);
    vertical-align: middle;
}

.mc-page.mc-page--warm .pricing-seat-table tbody tr:last-child td {
    border-bottom: none;
}

/* Alternating row stripes for scan-ability */
.mc-page.mc-page--warm .pricing-seat-table tbody tr:nth-child(even) td {
    background: #FAFBFC;
}

/* Row hover removed: rows aren't interactive, no need to highlight. */

.mc-page.mc-page--warm .pricing-seat-table .pricing-seat-row-head {
    text-align: left;
    color: var(--hv-text);
    font-weight: 600;
}

.mc-page.mc-page--warm .pricing-seat-yes {
    color: var(--micantis-energy-dark);
    font-size: 1.5rem;
    font-weight: 900;
    -webkit-text-stroke: 0.5px var(--micantis-energy-dark);
}

.mc-page.mc-page--warm .pricing-seat-no {
    display: inline-block;
    color: #94A3B8;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1;
}

/* FAQ accordion themed for v2 warm */
.mc-page.mc-page--warm .pricing-faq .accordion-item {
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.mc-page.mc-page--warm .pricing-faq .accordion-button {
    background: var(--hv-surface);
    color: var(--hv-text);
    font-weight: 600;
    font-size: 1rem;
    padding: 1rem 1.25rem;
    box-shadow: none;
}

.mc-page.mc-page--warm .pricing-faq .accordion-button:not(.collapsed) {
    color: var(--hv-accent);
    background: var(--hv-bg);
    box-shadow: none;
}

.mc-page.mc-page--warm .pricing-faq .accordion-button:focus {
    box-shadow: none;
    border-color: var(--hv-border-strong);
}

.mc-page.mc-page--warm .pricing-faq .accordion-body {
    color: var(--hv-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    padding: 0.85rem 1.25rem 1.25rem;
}

/* ============================================
   About v2 (sleek refinement layer)
   ============================================ */
/* Tokens come from :root in _tokens.css. Wrapper just adopts the text color. */
.about-v2 {
    color: var(--hv-text);
}

.about-v2 .container { max-width: 1200px; }

/* ----- Hero header ----- */
.about-v2 .about-hero {
    margin-bottom: 0;
    padding: 64px 0 72px;
    background: linear-gradient(160deg, #1E2742 0%, #2A3556 35%, var(--micantis-primary-dark) 100%);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.about-v2 .about-hero::after { display: none; }

.about-v2 .hero-grid-overlay {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(1100px 700px at 50% 60%, black 40%, transparent 85%);
    -webkit-mask-image: radial-gradient(1100px 700px at 50% 60%, black 40%, transparent 85%);
    z-index: 0;
    pointer-events: none;
}

.about-v2 .hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

.about-v2 .hero-glow--a {
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(85, 109, 175, 0.55), transparent 65%);
    top: -180px; left: -120px;
}

.about-v2 .hero-glow--b {
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(0, 200, 150, 0.32), transparent 65%);
    bottom: -200px; right: -120px;
}

.about-v2 .about-hero-content {
    text-align: center;
    max-width: 920px;
    margin: 0 auto;
    position: relative;
}

/* Pill chip */
.about-v2 .hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.95rem;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin-bottom: 1.75rem;
}

.about-v2 .hero-chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hv-energy);
    box-shadow: 0 0 12px var(--hv-energy);
    animation: about-hero-pulse 2.4s ease-in-out infinite;
}

@keyframes about-hero-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.85); }
}

.about-v2 .page-title {
    font-size: clamp(2.4rem, 5.2vw, 4rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: #fff;
    font-weight: 700;
    margin: 0 auto 1.5rem;
    max-width: 22ch;
}

.about-v2 .page-title-accent {
    background: linear-gradient(120deg, var(--micantis-energy) 0%, var(--micantis-primary-light) 60%, #ffffff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

/* Mission quote */
.about-v2 .mission-quote {
    position: relative;
    max-width: 38rem;
    margin: 0 auto 2rem;
    padding: 0 1.5rem;
}

.about-v2 .mission-quote-mark {
    position: absolute;
    top: -30px;
    left: 0;
    font-size: 5rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.12);
    font-family: Georgia, "Times New Roman", serif;
    pointer-events: none;
}

.about-v2 .page-subtitle {
    font-size: 1.18rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.86);
    max-width: none;
    margin: 0;
    position: relative;
}

/* Meta row */
.about-v2 .hero-meta {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.85rem 1.25rem;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.88rem;
}

.about-v2 .hero-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.about-v2 .hero-meta-item i {
    color: var(--hv-energy);
    font-size: 1rem;
}

.about-v2 .hero-meta-divider {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
}

@media (max-width: 575.98px) {
    .about-v2 .hero-meta-divider { display: none; }
    .about-v2 .hero-meta { gap: 0.6rem; }
}

.about-v2 .page-subtitle {
    font-size: 1.18rem;
    color: rgba(255, 255, 255, 0.86);
    margin: 0;
}

/* ----- Section rhythm + titles ----- */
.about-v2 .about-intro-section,
.about-v2 .mission-section,
.about-v2 .values-section,
.about-v2 .team-section,
.about-v2 .cta-section {
    padding: 88px 0;
}

.about-v2 .about-intro-section { padding-bottom: 40px; }
.about-v2 .values-section { padding-top: 40px; }

.about-v2 .about-intro-section { background: #fff; }
.about-v2 .mission-section { background: var(--hv-bg); }
.about-v2 .values-section { background: #fff; }
.about-v2 .team-section { background: var(--hv-bg); }
.about-v2 .cta-section {
    background:
        radial-gradient(800px 400px at 50% 0%, rgba(85, 109, 175, 0.12), transparent 70%),
        var(--hv-surface);
    border-top: 1px solid var(--hv-border);
    text-align: center;
}

.about-v2 .section-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--hv-accent);
    margin-bottom: 0.75rem;
}

.about-v2 .section-title {
    font-size: clamp(1.85rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--hv-text);
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
}

.about-v2 .section-title::after { display: none; }

.about-v2 .lead {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--hv-text);
}

.about-v2 .about-intro-section p {
    color: var(--hv-muted);
    font-size: 1rem;
    line-height: 1.7;
}

.about-v2 .story-callout {
    margin-top: 1.5rem;
    padding: 1.25rem 1.5rem;
    border-left: 3px solid var(--hv-accent);
    background: var(--hv-accent-soft);
    color: var(--hv-text) !important;
    border-radius: 0 12px 12px 0;
    font-weight: 500;
}

/* ----- Founder stack (right column of story) ----- */
.about-v2 .founder-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.about-v2 .founder-tile {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem;
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 16px;
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.about-v2 .founder-tile:hover {
    border-color: var(--hv-border-strong);
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

.about-v2 .founder-photo-v2 {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center center;
    flex-shrink: 0;
    background: var(--hv-bg);
}

.about-v2 img[alt="Jonathan Awerbuch"].founder-photo-v2,
.about-v2 img[alt="Jonathan Awerbuch"].team-photo-v2 {
    object-position: center top;
}

.about-v2 .founder-meta { min-width: 0; }

.about-v2 .founder-name-v2 {
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0 0 0.15rem 0;
    color: var(--hv-text);
}

.about-v2 .founder-title-v2 {
    font-size: 0.9rem;
    color: var(--hv-muted);
    margin: 0;
}

.about-v2 .founder-name-v2 a,
.about-v2 .team-card-v2 h4 a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.about-v2 .founder-name-v2 a:hover,
.about-v2 .team-card-v2 h4 a:hover {
    color: var(--hv-accent);
}

/* ----- Mission card ----- */
.about-v2 .mission-card {
    max-width: 880px;
    margin: 0 auto;
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 20px;
    padding: 3rem;
    text-align: center;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.06);
    position: relative;
    overflow: hidden;
}

.about-v2 .mission-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(600px 300px at 50% 0%, rgba(85, 109, 175, 0.08), transparent 70%);
    pointer-events: none;
}

.about-v2 .mission-headline {
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--hv-text);
    margin-bottom: 1rem;
    position: relative;
}

.about-v2 .mission-body {
    color: var(--hv-muted);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
    position: relative;
}

/* ----- Value cards ----- */
.about-v2 .value-card-v2 {
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 16px;
    padding: 1.75rem;
    height: 100%;
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    text-align: left;
}

.about-v2 .value-card-v2:hover {
    border-color: var(--hv-border-strong);
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.about-v2 .value-icon-v2 {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--hv-accent-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.about-v2 .value-icon-v2 i {
    font-size: 1.25rem;
    color: var(--hv-accent);
}

.about-v2 .value-card-v2 h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--hv-text);
    letter-spacing: -0.01em;
    margin-bottom: 0.5rem;
}

.about-v2 .value-card-v2 p {
    color: var(--hv-muted);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
}

/* ----- Team cards ----- */
.about-v2 .team-card-v2 {
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.about-v2 .team-card-v2:hover {
    border-color: var(--hv-border-strong);
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.about-v2 .team-photo-v2 {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center center;
    display: block;
    background: var(--hv-bg);
}

.about-v2 .team-card-body {
    padding: 1.5rem 1.75rem 1.75rem;
}

.about-v2 .team-card-v2 h4 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--hv-text);
    letter-spacing: -0.01em;
    margin: 0 0 0.25rem 0;
}

.about-v2 .team-role {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--hv-accent);
    font-weight: 600;
    margin-bottom: 0.85rem;
}

.about-v2 .team-bio {
    color: var(--hv-muted);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
}

/* ----- CTA ----- */
.about-v2 .cta-title {
    font-size: clamp(1.75rem, 2.5vw, 2.5rem);
    font-weight: 700;
    color: var(--hv-text);
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}

.about-v2 .cta-lead {
    color: var(--hv-muted);
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.about-v2 .cta-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.about-v2 .btn-outline-primary {
    border-color: var(--hv-border-strong);
    color: var(--hv-text);
    border-radius: 999px !important;
    padding: 0.6rem 1.4rem;
    font-weight: 600;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.about-v2 .btn-outline-primary:hover {
    background: var(--hv-text);
    border-color: var(--hv-text);
    color: #fff;
}

/* ============================================
   Incoming Quality Control v2 (sleek refinement layer)
   ============================================ */
/* Tokens come from :root in _tokens.css. Wrapper just adopts the text color. */
.mc-page {
    color: var(--hv-text);
}

.mc-page .container { max-width: 1200px; }

/* Warm-theme palette is defined in _tokens.css via .theme-warm,
   .mc-page--warm, .mc-page--warm — change once, applies everywhere. */

/* All warm-variant sections share the same paper bg. No alternation,
   no dot-grid texture — just one consistent canvas with hairline
   dividers between sections. */
.mc-page.mc-page--warm .iqc-cover,
.mc-page.mc-page--warm .iqc-features-header,
.mc-page.mc-page--warm .iqc-feature-deck-wrap,
.mc-page.mc-page--warm .iqc-industries-section,
.mc-page.mc-page--warm .iqc-benefits-section,
.mc-page.mc-page--warm .iqc-integration-section,
.mc-page.mc-page--warm .cta-section {
    background: var(--hv-bg);
    background-image: none;
}

/* Surfaces (cards) sit on warmed-white so they read against the paper bg */
.mc-page.mc-page--warm .qc-card,
.mc-page.mc-page--warm .workflow-card,
.mc-page.mc-page--warm .case-card,
.mc-page.mc-page--warm .iqc-benefit-card,
.mc-page.mc-page--warm .iqc-industry-card,
.mc-page.mc-page--warm .iqc-history-card,
.mc-page.mc-page--warm .alert-demo-v2,
.mc-page.mc-page--warm .brand-pill {
    background: var(--hv-surface);
}

/* Carousel itself has no surface — sits directly on the section bg */
.mc-page.mc-page--warm .iqc-deck { background: transparent; }

.mc-page.mc-page--warm .alert-row,
.mc-page.mc-page--warm .case-stat,
.mc-page.mc-page--warm .solution-target-v2 {
    background: var(--hv-bg);
}

/* Warm-tuned hero: keeps Micantis blue as the dominant base but
   warms the deepest tones, swaps the bright-teal glow for a soft
   amber/honey, and adjusts the headline gradient so the accent
   text resolves to warm cream instead of cool white. */
.mc-page.mc-page--warm .iqc-hero {
    background: linear-gradient(160deg, #25263E 0%, #2F314F 38%, #46476E 100%);
}

.mc-page.mc-page--warm .hero-glow--a {
    background: radial-gradient(circle, rgba(85, 109, 175, 0.55), transparent 65%);
}

.mc-page.mc-page--warm .hero-glow--b {
    background: radial-gradient(circle, rgba(216, 168, 110, 0.30), transparent 65%);
}

/* Replace cool grid overlay with a warm dot pattern that echoes
   the body background — same vocabulary, different intensity. */
.mc-page.mc-page--warm .hero-grid-overlay {
    background-image: radial-gradient(circle, rgba(245, 240, 230, 0.09) 1px, transparent 1.5px);
    background-size: 32px 32px;
    background-position: center center;
    mask-image: radial-gradient(1100px 700px at 50% 60%, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(1100px 700px at 50% 60%, black 30%, transparent 80%);
}

.mc-page.mc-page--warm .page-title-accent {
    background: linear-gradient(120deg, #D8A86E 0%, var(--micantis-primary-light) 60%, #FBF7EE 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

/* Slightly warm the hero chip and meta strip so they harmonize */
.mc-page.mc-page--warm .hero-chip {
    background: rgba(245, 240, 230, 0.08);
    border-color: rgba(245, 240, 230, 0.20);
    color: rgba(255, 250, 240, 0.92);
}

.mc-page.mc-page--warm .hero-industries-label {
    color: rgba(245, 240, 230, 0.55);
}

.mc-page.mc-page--warm .hero-industry-chip {
    background: rgba(245, 240, 230, 0.07);
    border-color: rgba(245, 240, 230, 0.18);
    color: rgba(255, 250, 240, 0.92);
}

.mc-page.mc-page--warm .hero-industry-chip i {
    color: #E2BB85;
}

.mc-page.mc-page--warm .hero-industry-chip:hover {
    border-color: rgba(216, 168, 110, 0.5);
    background: rgba(216, 168, 110, 0.12);
    color: #fff;
}

.mc-page.mc-page--warm .hero-chip-dot {
    background: #E2BB85;
    box-shadow: 0 0 12px #E2BB85;
}

/* ----- Editorial cover (replaces the navy hero on the warm IQC) ----- */
.mc-page.mc-page--warm .iqc-cover {
    padding: 96px 0 80px;
}

/* Full-width centered cover (Platform page) */
.mc-page.mc-page--warm .iqc-cover--full {
    padding: 80px 0 32px;
    text-align: center;
}

.mc-page.mc-page--warm .iqc-cover-center {
    max-width: 56rem;
    margin: 0 auto;
}

.mc-page.mc-page--warm .iqc-cover-center .iqc-cover-title {
    margin-left: auto;
    margin-right: auto;
}

.mc-page.mc-page--warm .iqc-cover-center .iqc-cover-sub {
    max-width: 38rem;
    margin-left: auto;
    margin-right: auto;
}

.mc-page.mc-page--warm .iqc-cover-center .iqc-cover-industries {
    justify-content: center;
    max-width: none;
}

/* Flow section sits between hero and features header */
.mc-page.mc-page--warm .iqc-flow-section {
    padding: 0 0 24px;
    background: var(--hv-bg);
    margin-top: -32px;
}

.mc-page.mc-page--warm .iqc-flow-card {
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 18px;
    padding: 2rem 2.5rem;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.05);
    max-width: 1100px;
    margin: 0 auto;
}

.mc-page.mc-page--warm .iqc-flow-card .workflow-flow-v2 {
    margin: 0;
}

/* Static flow diagram image — multiply blend drops the white background
   so the diagram sits directly on the paper section bg. */
.mc-page.mc-page--warm .platform-flow-img {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

.mc-page.mc-page--warm .platform-flow-img img {
    width: 100%;
    height: auto;
    display: block;
}

/* Three-column legend that maps the diagram segments to the products.
   Column widths are tuned so each column's CENTER lines up with the
   center of the matching box in platform-flow.png:
   Box centers (measured): 12.00% / 39.56% / 77.89% of image width. */
.mc-page.mc-page--warm .platform-flow-legend {
    max-width: 1200px;
    margin: 8px auto 0;
    display: grid;
    grid-template-columns: 24% 31% 45%;
    gap: 0;
    padding: 0;
}

.mc-page.mc-page--warm .platform-flow-legend-col {
    text-align: center;
    padding: 16px 16px 12px;
    border-top: 2px solid rgba(85, 109, 175, 0.18);
    margin: 0 6px;
}

.mc-page.mc-page--warm .platform-flow-legend-col--product {
    border-top-color: var(--micantis-primary);
}

.mc-page.mc-page--warm .platform-flow-legend-eyebrow {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--micantis-primary);
    margin: 0 0 6px;
    opacity: 0.9;
}

.mc-page.mc-page--warm .platform-flow-legend-col:not(.platform-flow-legend-col--product) .platform-flow-legend-eyebrow {
    color: #8a8580;
    opacity: 1;
}

.mc-page.mc-page--warm .platform-flow-legend-name {
    font-size: 17px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}

.mc-page.mc-page--warm .platform-flow-legend-name a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}

.mc-page.mc-page--warm .platform-flow-legend-name a:hover {
    color: var(--micantis-primary);
    text-decoration: underline;
}

.mc-page.mc-page--warm .platform-flow-legend-desc {
    font-size: 13.5px;
    line-height: 1.55;
    color: #555;
    margin: 0;
}

.mc-page.mc-page--warm .platform-flow-legend-desc a {
    color: var(--micantis-primary);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}

.mc-page.mc-page--warm .platform-flow-legend-desc a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .mc-page.mc-page--warm .platform-flow-legend {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 16px;
    }
    .mc-page.mc-page--warm .platform-flow-legend-col {
        padding-top: 12px;
    }
}

/* Sources → Micantis → Outputs hub diagram (legacy, no longer used) */
.mc-page.mc-page--warm .platform-flow {
    display: grid;
    grid-template-columns: 1fr 60px 1.4fr 60px 1fr;
    gap: 0;
    align-items: stretch;
    max-width: 1100px;
    margin: 0 auto;
}

.mc-page.mc-page--warm .platform-flow-col {
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 16px;
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
}

.mc-page.mc-page--warm .platform-flow-col--platform {
    background:
        radial-gradient(800px 400px at 50% 0%, rgba(0, 200, 150, 0.08), transparent 70%),
        var(--hv-surface);
    border-color: rgba(85, 109, 175, 0.3);
    box-shadow: 0 24px 50px rgba(85, 109, 175, 0.10);
}

.mc-page.mc-page--warm .platform-flow-col-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--hv-muted);
    margin-bottom: 1rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--hv-border);
}

.mc-page.mc-page--warm .platform-flow-platform-mark {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    align-self: flex-start;
    padding: 0.3rem 0.7rem;
    background: var(--hv-accent-soft);
    border: 1px solid rgba(85, 109, 175, 0.2);
    border-radius: 999px;
    color: var(--hv-accent);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    margin-bottom: 0.85rem;
}

.mc-page.mc-page--warm .platform-flow-platform-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hv-energy);
    box-shadow: 0 0 0 3px rgba(0, 200, 150, 0.18);
}

.mc-page.mc-page--warm .platform-flow-platform-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--hv-text);
    letter-spacing: -0.015em;
    line-height: 1.3;
    margin-bottom: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--hv-border);
}

.mc-page.mc-page--warm .platform-flow-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.mc-page.mc-page--warm .platform-flow-list li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--hv-text);
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.3;
}

.mc-page.mc-page--warm .platform-flow-list i {
    color: var(--hv-accent);
    font-size: 1rem;
    flex-shrink: 0;
}

.mc-page.mc-page--warm .platform-flow-list--platform li {
    font-weight: 600;
}

.mc-page.mc-page--warm .platform-flow-arrow {
    align-self: center;
}

.mc-page.mc-page--warm .platform-flow-arrow svg {
    width: 100%;
    height: 24px;
    display: block;
}

@media (max-width: 991.98px) {
    .mc-page.mc-page--warm .platform-flow {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .mc-page.mc-page--warm .platform-flow-arrow {
        height: 32px;
        margin: 0 auto;
        width: 24px;
        transform: rotate(90deg);
    }
}

.mc-page.mc-page--warm .iqc-cover-title {
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--hv-text);
    margin: 0 0 1.25rem 0;
}

.mc-page.mc-page--warm .iqc-cover-accent {
    color: var(--hv-accent);
}

.mc-page.mc-page--warm .iqc-cover-sub {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--hv-muted);
    max-width: 30rem;
    margin-bottom: 1.75rem;
}

.mc-page.mc-page--warm .iqc-cover-industries {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
    max-width: 32rem;
}

/* Single-column / full-width cover variant (used on Contract Testing Labs):
   lift the max-width caps on the sub paragraph and chip row so they breathe
   across the full container width. */
.mc-page.mc-page--warm .iqc-cover--wide .iqc-cover-sub,
.mc-page.mc-page--warm .iqc-cover--wide .iqc-cover-industries {
    max-width: none;
}

/* Industry tags as inline labels separated by hairline vertical bars */
.mc-page.mc-page--warm .iqc-cover-industries {
    gap: 0.6rem 0;
    align-items: center;
}

.mc-page.mc-page--warm .iqc-cover-industries .hero-industry-chip {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0 0.85rem;
    color: var(--hv-muted);
    font-size: 0.82rem;
    font-weight: 500;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    position: relative;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.15s ease;
}

.mc-page.mc-page--warm a.hero-industry-chip {
    cursor: pointer;
}

.mc-page.mc-page--warm .iqc-cover-industries .hero-industry-chip + .hero-industry-chip::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 14px;
    width: 1px;
    background: var(--hv-border-strong);
}

.mc-page.mc-page--warm .iqc-cover-industries .hero-industry-chip i {
    color: var(--hv-accent);
    font-size: 0.95rem;
}

.mc-page.mc-page--warm .iqc-cover-industries .hero-industry-chip:hover {
    background: transparent;
    border: none;
    color: var(--hv-text);
}

/* Right column: vertical rule on desktop separates the two halves */
@media (min-width: 992px) {
    .mc-page.mc-page--warm .iqc-cover-right {
        border-left: 1px solid var(--hv-border);
        padding-left: 3rem !important;
    }
}

/* Stacked cover images: two same-sized screenshots tilted in opposite
   directions like a deck of cards. Aspect-ratio sized so both fit
   without leaving big empty space above the front card. */
.mc-page.mc-page--warm .iqc-cover-stack {
    position: relative;
    aspect-ratio: 5 / 4;
    margin-bottom: 1rem;
}

.mc-page.mc-page--warm .iqc-cover-shot {
    position: relative;
    background: linear-gradient(180deg, #F2F4F8 0%, #E7EAF1 100%);
    border-radius: 12px;
    padding: 32px 0 0;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.12);
    border: 1px solid rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.mc-page.mc-page--warm .iqc-cover-shot::before {
    content: '';
    position: absolute; top: 11px; left: 12px;
    width: 10px; height: 10px; border-radius: 50%;
    background: #FF5F57;
    box-shadow: 16px 0 0 #FEBC2E, 32px 0 0 #28C840;
}

.mc-page.mc-page--warm .iqc-cover-shot img {
    display: block;
    width: 100%;
    height: auto;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

/* Both cards same width, absolutely positioned, straight (no rotation),
   offset diagonally so each card's content slice is visible. */
.mc-page.mc-page--warm .iqc-cover-stack .iqc-cover-shot--back {
    position: absolute;
    top: 0;
    left: 0;
    width: 70%;
    z-index: 1;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
}

.mc-page.mc-page--warm .iqc-cover-stack .iqc-cover-shot--front {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 70%;
    z-index: 2;
    box-shadow: 0 26px 55px rgba(15, 23, 42, 0.22);
}

/* Metric "tiles" are plain text columns separated by hairline vertical
   bars — no box, no border, no hover state. */
.mc-page.mc-page--warm .iqc-cover-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    margin-top: 2rem;
    margin-bottom: 1.25rem;
}

.mc-page.mc-page--warm .iqc-stat-tile {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    transition: none;
}

.mc-page.mc-page--warm .iqc-stat-tile::before {
    content: '\2713';
    color: var(--hv-accent);
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

.mc-page.mc-page--warm .iqc-stat-tile:hover { border: none; }

/* Single sentence per tile, body text in ink color. */
.mc-page.mc-page--warm .iqc-stat-message {
    font-size: 0.95rem;
    line-height: 1.45;
    font-weight: 400;
    color: var(--hv-text);
    letter-spacing: normal;
}

/* "Learn more about quality control" link */
.mc-page.mc-page--warm .iqc-cover-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--hv-accent);
    text-decoration: none;
    transition: gap 0.2s ease, color 0.2s ease;
}

.mc-page.mc-page--warm .iqc-cover-link:hover {
    color: var(--hv-text);
    gap: 0.6rem;
}

@media (max-width: 575.98px) {
    .mc-page.mc-page--warm .iqc-cover-stats { grid-template-columns: 1fr; }
}

/* IQC hero compact QC flow chart */
.mc-page.mc-page--warm .iqc-hero-flow {
    margin-top: 1.5rem;
    padding: 0.95rem 1.1rem 0.85rem;
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: 540px;
}

.mc-page.mc-page--warm .iqc-hero-flow-eyebrow {
    font-family: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--hv-muted);
}

.mc-page.mc-page--warm .iqc-hero-flow-steps {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.45rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.mc-page.mc-page--warm .iqc-hero-flow-steps::-webkit-scrollbar { display: none; }

.mc-page.mc-page--warm .iqc-hero-flow-step {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.mc-page.mc-page--warm .iqc-hero-flow-num {
    font-family: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--hv-muted);
    letter-spacing: 0.06em;
}

.mc-page.mc-page--warm .iqc-hero-flow-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--hv-text);
    letter-spacing: -0.005em;
    white-space: nowrap;
}

.mc-page.mc-page--warm .iqc-hero-flow-step--final .iqc-hero-flow-label {
    color: #00A67E;
}

.mc-page.mc-page--warm .iqc-hero-flow-arrow {
    color: var(--hv-accent);
    width: 22px;
    height: 10px;
    flex-shrink: 0;
    opacity: 0.7;
    display: inline-flex;
    align-items: center;
}

.mc-page.mc-page--warm .iqc-hero-flow-arrow svg {
    width: 100%;
    height: 100%;
    display: block;
}

.mc-page.mc-page--warm .iqc-hero-flow-link {
    align-self: flex-start;
    font-family: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--hv-accent);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.15rem;
    transition: gap 0.2s ease;
}

.mc-page.mc-page--warm .iqc-hero-flow-link:hover {
    gap: 0.55rem;
    color: var(--hv-text);
}

/* ----- Technical-platform typography (dialed back from editorial) ----- */

/* Eyebrows: sans, tracked, no left tick — clean platform feel */
.mc-page.mc-page--warm .section-eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    color: var(--hv-accent);
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 1rem;
}

/* Section titles: slightly heavier than default but not magazine-dramatic */
.mc-page.mc-page--warm .section-title {
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.022em;
}

/* Hairline dividers between sections to replace bg alternation */
.mc-page.mc-page--warm .iqc-features-header,
.mc-page.mc-page--warm .iqc-industries-section,
.mc-page.mc-page--warm .iqc-benefits-section,
.mc-page.mc-page--warm .iqc-integration-section,
.mc-page.mc-page--warm .cta-section {
    border-top: 1px solid var(--hv-border);
}

/* ----- Hero ----- */
.mc-page .iqc-hero {
    margin-bottom: 0;
    padding: 64px 0 72px;
    background: linear-gradient(160deg, #1E2742 0%, #2A3556 35%, var(--micantis-primary-dark) 100%);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.mc-page .iqc-hero::after { display: none; }

.mc-page .hero-grid-overlay {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(1100px 700px at 50% 60%, black 40%, transparent 85%);
    -webkit-mask-image: radial-gradient(1100px 700px at 50% 60%, black 40%, transparent 85%);
    z-index: 0;
    pointer-events: none;
}

.mc-page .hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

.mc-page .hero-glow--a {
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(85, 109, 175, 0.55), transparent 65%);
    top: -180px; left: -120px;
}

.mc-page .hero-glow--b {
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(0, 200, 150, 0.32), transparent 65%);
    bottom: -200px; right: -120px;
}

.mc-page .iqc-hero-content {
    text-align: center;
    max-width: 920px;
    margin: 0 auto;
    position: relative;
}

.mc-page .hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.95rem;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin-bottom: 1.5rem;
}

.mc-page .hero-chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hv-energy);
    box-shadow: 0 0 12px var(--hv-energy);
    animation: about-hero-pulse 2.4s ease-in-out infinite;
}

.mc-page .page-title {
    font-size: clamp(2.4rem, 5.2vw, 4rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: #fff;
    font-weight: 700;
    margin: 0 auto 1.25rem;
    max-width: 22ch;
}

.mc-page .page-title-accent {
    background: linear-gradient(120deg, var(--micantis-energy) 0%, var(--micantis-primary-light) 60%, #ffffff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

.mc-page .page-subtitle {
    font-size: 1.15rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.86);
    max-width: 44rem;
    margin: 0 auto 1.75rem;
}

.mc-page .hero-meta {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.85rem 1.25rem;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.88rem;
}

.mc-page .hero-meta-item { display: inline-flex; align-items: center; gap: 0.5rem; }
.mc-page .hero-meta-item i { color: var(--hv-energy); font-size: 1rem; }
.mc-page .hero-meta-divider { width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); }

@media (max-width: 575.98px) {
    .mc-page .hero-meta-divider { display: none; }
    .mc-page .hero-meta { gap: 0.6rem; }
}

/* ----- Hero industries strip ----- */
.mc-page .hero-industries-label {
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 0.85rem 0;
}

.mc-page .hero-industries {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem;
}

.mc-page .hero-industry-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.8rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.82rem;
    font-weight: 600;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.mc-page .hero-industry-chip:hover {
    border-color: rgba(0, 200, 150, 0.45);
    color: #fff;
    background: rgba(0, 200, 150, 0.1);
}

.mc-page .hero-industry-chip i {
    color: var(--hv-energy);
    font-size: 0.95rem;
}

/* ----- Section rhythm + titles ----- */
.mc-page .iqc-intro-section,
.mc-page .iqc-features-header,
.mc-page .iqc-feature-blocks,
.mc-page .iqc-ml-section,
.mc-page .iqc-industries-section,
.mc-page .iqc-benefits-section,
.mc-page .iqc-integration-section,
.mc-page .cta-section {
    padding: 88px 0;
}

.mc-page .iqc-industries-section { background: var(--hv-bg); }
.mc-page .iqc-benefits-section { background: #fff; }

.mc-page .iqc-industry-card {
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 16px;
    padding: 1.75rem;
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.mc-page .iqc-industry-card:hover {
    border-color: var(--hv-border-strong);
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.mc-page .iqc-industry-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--hv-accent-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.mc-page .iqc-industry-icon i { font-size: 1.25rem; color: var(--hv-accent); }

.mc-page .iqc-industry-card h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--hv-text);
    letter-spacing: -0.01em;
    margin-bottom: 0.5rem;
}

.mc-page .iqc-industry-card p {
    color: var(--hv-muted);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
}

.mc-page .iqc-features-header { padding: 40px 0 8px; background: var(--hv-bg); }
.mc-page .iqc-feature-blocks { padding-top: 32px; padding-bottom: 64px; background: var(--hv-bg); }
.mc-page .iqc-intro-section { background: #fff; }
.mc-page .iqc-ml-section { background: #fff; }
.mc-page .iqc-benefits-section { background: #fff; }
.mc-page .iqc-integration-section { background: var(--hv-bg); }

.mc-page .cta-section {
    background:
        radial-gradient(800px 400px at 50% 0%, rgba(85, 109, 175, 0.12), transparent 70%),
        var(--hv-surface);
    border-top: 1px solid var(--hv-border);
    text-align: center;
}

.mc-page .section-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--hv-accent);
    margin-bottom: 0.75rem;
}

.mc-page .section-title {
    font-size: clamp(1.85rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--hv-text);
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
}

.mc-page .section-title::after { display: none; }

.mc-page .lead { font-size: 1.15rem; line-height: 1.6; color: var(--hv-text); }
.mc-page .iqc-body { color: var(--hv-muted); font-size: 1rem; line-height: 1.7; }

/* ----- Workflow card (intro right column) ----- */
.mc-page .workflow-card {
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 18px;
    padding: 2rem;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.06);
}

.mc-page .workflow-flow-v2 {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.mc-page .flow-step-v2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    flex: 0 0 auto;
}

.mc-page .flow-icon-v2 {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--hv-accent-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--hv-accent);
    font-size: 1.4rem;
    transition: transform 0.25s ease;
}

.mc-page .flow-step-v2:hover .flow-icon-v2 { transform: translateY(-3px); }

.mc-page .flow-label-v2 {
    color: var(--hv-text);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
}

.mc-page .flow-arrow-v2 {
    flex: 1;
    height: 4px;
    list-style: none;
}

.mc-page .flow-arrow-v2 svg { width: 100%; height: 100%; display: block; }

.mc-page .workflow-subtitle-v2 {
    color: var(--hv-muted);
    font-size: 0.92rem;
    margin: 0;
    text-align: center;
}

@media (max-width: 575.98px) {
    .mc-page .workflow-flow-v2 { flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
    .mc-page .flow-arrow-v2 { display: none; }
}

/* ----- Feature blocks (alternating screenshot + copy) ----- */
.mc-page .iqc-feature-row { padding: 32px 0; }
.mc-page .iqc-feature-row + .iqc-feature-row { border-top: 1px solid var(--hv-border); }

/* ----- Rotating feature deck ----- */
.mc-page .iqc-feature-deck-wrap {
    background: var(--hv-bg);
    padding: 32px 0 88px;
}

.mc-page .iqc-deck {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.mc-page .iqc-deck-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.25rem;
    padding: 0 0 1rem;
    border-bottom: 1px solid var(--hv-border);
    justify-content: center;
    white-space: nowrap;
}

.mc-page .iqc-deck-tab {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    color: var(--hv-muted);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: -0.005em;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    margin-bottom: 0.75rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.mc-page .iqc-deck-tab:hover {
    color: var(--hv-text);
    background: var(--hv-bg);
}

.mc-page .iqc-deck-tab.is-active {
    color: var(--hv-accent);
    background: var(--hv-accent-soft);
    border-color: rgba(85, 109, 175, 0.18);
}

.mc-page .iqc-deck-stage {
    position: relative;
    padding: 2.5rem 0 0;
    display: grid;
    grid-template-areas: "panel";
}

/* Give the screenshot column more room than content inside the deck */
@media (min-width: 992px) {
    .mc-page .iqc-deck-panel .row > [class*="col-lg-6"]:first-of-type {
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }
    .mc-page .iqc-deck-panel .row > [class*="col-lg-6"]:nth-of-type(2) {
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }
    .mc-page .iqc-deck-panel .row.g-5 {
        --bs-gutter-x: 2rem;
        --bs-gutter-y: 2rem;
    }
}

.mc-page .iqc-deck-panel {
    grid-area: panel;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.55s ease, transform 0.55s ease, visibility 0s linear 0.55s;
}

.mc-page .iqc-deck-panel.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.55s ease, transform 0.55s ease, visibility 0s linear 0s;
}

/* Below desktop, allow horizontal scroll on the tab row instead of wrapping */
@media (max-width: 991.98px) {
    .mc-page .iqc-deck-tabs {
        overflow-x: auto;
        justify-content: flex-start;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .mc-page .iqc-deck-tabs::-webkit-scrollbar { display: none; }
}

@media (max-width: 575.98px) {
    .mc-page .iqc-deck-stage { padding: 1.5rem 1.25rem; }
    .mc-page .iqc-deck-tabs { padding: 0.75rem 0.5rem 0; }
    .mc-page .iqc-deck-tab { font-size: 0.78rem; padding: 0.4rem 0.65rem; }
}

@media (prefers-reduced-motion: reduce) {
    .mc-page .iqc-deck-panel { transition: opacity 0.2s linear, visibility 0s linear 0.2s; transform: none; }
    .mc-page .iqc-deck-panel.is-active { transform: none; transition: opacity 0.2s linear, visibility 0s linear 0s; }
}

.mc-page .feature-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--hv-accent);
    background: var(--hv-accent-soft);
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}

.mc-page .iqc-feature-row h3 {
    font-size: clamp(1.4rem, 2vw, 1.85rem);
    font-weight: 700;
    color: var(--hv-text);
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
}

.mc-page .iqc-feature-list {
    list-style: none;
    padding: 0;
    margin-top: 1rem;
}

.mc-page .iqc-feature-list li {
    position: relative;
    padding: 0.55rem 0 0.55rem 1.5rem;
    border-bottom: 1px solid var(--hv-border);
    color: var(--hv-text);
    font-size: 0.96rem;
    line-height: 1.5;
}

.mc-page .iqc-feature-list li:last-child { border-bottom: none; }

.mc-page .iqc-feature-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.95rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--hv-energy);
    box-shadow: 0 0 0 3px rgba(0, 200, 150, 0.15);
}

.mc-page .iqc-feature-list strong { color: var(--hv-text); font-weight: 700; }

.mc-page .iqc-feature-shot {
    position: relative;
    background: linear-gradient(180deg, #F2F4F8 0%, #E7EAF1 100%);
    border-radius: 14px;
    padding: 38px 0 0;
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.16);
    border: 1px solid rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.mc-page .iqc-feature-shot::before {
    content: '';
    position: absolute;
    top: 14px;
    left: 14px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #FF5F57;
    box-shadow:
        20px 0 0 #FEBC2E,
        40px 0 0 #28C840;
}

.mc-page .iqc-feature-shot::after {
    content: '';
    position: absolute;
    top: 11px;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(120px, 35%, 240px);
    height: 18px;
    background: rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 6px;
}

.mc-page .iqc-feature-shot img {
    display: block;
    width: 100%;
    height: auto;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.mc-page .iqc-feature-shot video {
    display: block;
    width: 100%;
    height: auto;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

/* Stacked layout for the Data Cleaning panel: heading on top,
   image stack + video in a row below, body text spanning both columns. */
.mc-page .moose-cleaning-head {
    margin-bottom: 18px;
}
.mc-page .moose-cleaning-head h3 {
    margin-bottom: 0;
}
.mc-page .moose-cleaning-media {
    margin-bottom: 28px;
}
.mc-page .moose-cleaning-body .iqc-body {
    max-width: 880px;
}
.mc-page .moose-cleaning-bullets {
    columns: 2;
    column-gap: 36px;
    margin-top: 12px;
}
.mc-page .moose-cleaning-bullets li {
    break-inside: avoid;
}
@media (max-width: 768px) {
    .mc-page .moose-cleaning-bullets {
        columns: 1;
    }
}

/* Staggered before / after used in the Data Cleaning carousel panel.
   Two tiles of similar size: original in the top-right, cleaned in
   the bottom-left, overlapping diagonally so both charts read clearly. */
.mc-page .moose-cleaning-stack {
    position: relative;
    aspect-ratio: 1 / 1.05;
    width: 100%;
}
.mc-page .moose-cleaning-tile {
    position: absolute;
    width: 78%;
    margin: 0;
    background: #fff;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.10);
    overflow: hidden;
}
.mc-page .moose-cleaning-tile img {
    display: block;
    width: 100%;
    height: auto;
}
.mc-page .moose-cleaning-tile--back {
    top: 0;
    left: 0;
}
.mc-page .moose-cleaning-tile--front {
    bottom: 0;
    right: 0;
    box-shadow: 14px 18px 38px rgba(15, 23, 42, 0.18);
}
.mc-page .moose-cleaning-tile-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
}
.mc-page .moose-cleaning-tile-tag--back {
    background: rgba(15, 23, 42, 0.78);
    color: #fff;
}
.mc-page .moose-cleaning-tile-tag--front {
    background: var(--micantis-primary);
    color: #fff;
}
@media (max-width: 768px) {
    .mc-page .moose-cleaning-stack {
        aspect-ratio: 1 / 1.1;
    }
    .mc-page .moose-cleaning-tile {
        width: 82%;
    }
}

/* "Output written to cell metadata" tile shown alongside the Python video */
.mc-page .moose-python-output {
    margin-top: 18px;
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 10px;
    padding: 12px 16px 14px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}
.mc-page .moose-python-output--side {
    margin-top: 0;
    padding: 14px 18px 16px;
}
.mc-page .moose-python-output-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--micantis-primary);
    margin-bottom: 8px;
}
.mc-page .moose-python-output img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
    border: 1px solid rgba(15, 23, 42, 0.05);
}

/* Placeholder tile while a use-case video is being filmed */
.mc-page .moose-video-placeholder {
    background: #fff;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    aspect-ratio: 16 / 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #8a8580;
    text-align: center;
    padding: 2rem;
}
.mc-page .moose-video-placeholder i {
    font-size: 56px;
    color: var(--micantis-primary);
    opacity: 0.6;
    margin-bottom: 12px;
}
.mc-page .moose-video-placeholder p {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0;
}

/* In-app chart screen rendered like a real product screenshot */
.mc-page .iqc-feature-shot .iqc-chart-screen {
    background: #fff;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    padding: 1rem 1.25rem 1.25rem;
}

.mc-page .iqc-feature-shot .iqc-chart-screen-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    margin-bottom: 0.5rem;
}

.mc-page .iqc-feature-shot .iqc-chart-screen-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--hv-text);
    letter-spacing: -0.01em;
}

.mc-page .iqc-feature-shot .iqc-chart-screen-legend {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    align-items: center;
}

.mc-page .iqc-feature-shot .iqc-chart-screen-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--hv-text);
}

.mc-page .iqc-feature-shot .iqc-chart-screen-svg {
    width: 100%;
    height: auto;
    display: block;
    max-height: 360px;
    border-top: none;
}

/* AI demo video, no browser chrome, sized down */
.mc-page .iqc-ai-video {
    max-width: 380px;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
}

.mc-page .iqc-ai-video video {
    display: block;
    width: 100%;
    height: auto;
}

/* ----- Test Management stacked overlay ----- */
.mc-page .iqc-test-stack {
    position: relative;
    padding-bottom: 60px;
}

.mc-page .iqc-test-overlay {
    position: absolute;
    right: -16px;
    bottom: 0;
    width: min(72%, 380px);
    z-index: 2;
}

.mc-page .iqc-test-overlay .iqc-feature-shot {
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.22);
}

.mc-page .iqc-test-overlay.iqc-test-overlay--lg {
    width: min(92%, 520px);
    right: -32px;
    bottom: -16px;
}

@media (max-width: 991.98px) {
    .mc-page .iqc-test-stack { padding-bottom: 0; }
    .mc-page .iqc-test-overlay {
        position: static;
        width: 100%;
        margin-top: 1rem;
    }
}

/* ----- Traceability stacked overlay ----- */
.mc-page .iqc-trace-stack {
    position: relative;
    padding-bottom: 60px;
}

.mc-page .iqc-history-card {
    position: absolute;
    right: -16px;
    bottom: 0;
    width: min(82%, 440px);
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 14px;
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.18);
    overflow: hidden;
    z-index: 2;
}

.mc-page .iqc-history-head {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--hv-border);
    background: var(--hv-bg);
}

.mc-page .iqc-history-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--hv-text);
    letter-spacing: -0.01em;
}

.mc-page .iqc-history-table {
    padding: 0.4rem 0.6rem 0.6rem;
}

.mc-page .iqc-history-row {
    display: grid;
    grid-template-columns: 1.4fr 0.9fr 0.7fr 0.7fr 1.4fr;
    gap: 0.6rem;
    align-items: center;
    padding: 0.4rem 0.4rem;
    font-size: 0.78rem;
    color: var(--hv-text);
    border-bottom: 1px solid var(--hv-border);
}

.mc-page .iqc-history-row:last-child { border-bottom: none; }

.mc-page .iqc-history-row--head {
    color: var(--hv-muted);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    border-bottom-color: var(--hv-border-strong);
}

.mc-page .iqc-history-row span:nth-child(2) {
    font-weight: 600;
    color: var(--hv-accent);
}

@media (max-width: 991.98px) {
    .mc-page .iqc-trace-stack { padding-bottom: 0; }
    .mc-page .iqc-history-card {
        position: static;
        width: 100%;
        margin-top: 1rem;
    }
}

@media (max-width: 575.98px) {
    .mc-page .iqc-history-row {
        grid-template-columns: 1fr 0.8fr 0.6fr 0.6fr;
        font-size: 0.72rem;
    }
    .mc-page .iqc-history-row span:nth-child(5) { display: none; }
}

/* ----- OQC cover overlay: manufacturing flow on top of the screenshot ----- */
.mc-page .oqc-cover-stack {
    position: relative;
    padding-bottom: 36px;
}

.mc-page .oqc-flow-overlay {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 12px;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.18);
    padding: 0.85rem 1.1rem;
    z-index: 2;
    width: min(94%, 460px);
}

.mc-page .oqc-flow-overlay-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--hv-accent);
    margin-bottom: 0.55rem;
}

.mc-page .oqc-flow-overlay-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hv-energy);
    box-shadow: 0 0 0 3px rgba(0, 200, 150, 0.18);
}

.mc-page .oqc-flow-overlay-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.mc-page .oqc-flow-overlay-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 1 auto;
}

.mc-page .oqc-flow-overlay-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--hv-accent-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--hv-accent);
    font-size: 0.95rem;
    flex-shrink: 0;
}

.mc-page .oqc-flow-overlay-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--hv-text);
    letter-spacing: -0.005em;
    white-space: nowrap;
}

.mc-page .oqc-flow-overlay-arrow {
    color: var(--hv-muted);
    font-size: 0.85rem;
    flex: 0 0 auto;
    display: inline-flex;
}

@media (max-width: 575.98px) {
    .mc-page .oqc-flow-overlay {
        position: static;
        transform: none;
        width: 100%;
        margin-top: 0.75rem;
    }
    .mc-page .oqc-cover-stack { padding-bottom: 0; }
    .mc-page .oqc-flow-overlay-name { font-size: 0.78rem; }
}

/* ----- OQC custom mockups (lot trace, plan, process monitor) ----- */
.mc-page .oqc-trace-card,
.mc-page .oqc-plan-card,
.mc-page .oqc-monitor-card {
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.08);
}

.mc-page .oqc-trace-head,
.mc-page .oqc-plan-head,
.mc-page .oqc-monitor-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.25rem;
    background: var(--hv-bg);
    border-bottom: 1px solid var(--hv-border);
    font-weight: 600;
    color: var(--hv-text);
    font-size: 0.95rem;
}

.mc-page .oqc-trace-head i { color: var(--hv-accent); }
.mc-page .oqc-monitor-head i { color: var(--hv-accent); }

/* Lot genealogy */
.mc-page .oqc-trace-body { padding: 1.25rem; }

.mc-page .oqc-trace-tier { display: flex; flex-direction: column; gap: 0.4rem; }

.mc-page .oqc-trace-tier-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--hv-muted);
}

.mc-page .oqc-trace-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.mc-page .oqc-trace-pill {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--hv-border);
    background: var(--hv-bg);
    color: var(--hv-text);
}

.mc-page .oqc-trace-pill--cathode { background: rgba(85, 109, 175, 0.1); border-color: rgba(85, 109, 175, 0.25); color: var(--hv-accent); }
.mc-page .oqc-trace-pill--anode { background: rgba(0, 200, 150, 0.1); border-color: rgba(0, 200, 150, 0.25); color: #007A5C; }
.mc-page .oqc-trace-pill--electrolyte { background: rgba(255, 184, 0, 0.12); border-color: rgba(255, 184, 0, 0.3); color: #8A6300; }
.mc-page .oqc-trace-pill--batch { background: var(--hv-text); border-color: var(--hv-text); color: #fff; }
.mc-page .oqc-trace-pill--ship { background: var(--hv-bg); }
.mc-page .oqc-trace-pill--hold { background: rgba(229, 85, 85, 0.1); border-color: rgba(229, 85, 85, 0.25); color: #B73838; }

.mc-page .oqc-trace-arrow {
    text-align: center;
    color: var(--hv-muted);
    margin: 0.75rem 0;
    font-size: 1.1rem;
}

/* Customer test plan card */
.mc-page .oqc-plan-head {
    justify-content: space-between;
}

.mc-page .oqc-plan-pill {
    background: var(--hv-accent-soft);
    color: var(--hv-accent);
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.mc-page .oqc-plan-rev {
    font-size: 0.78rem;
    color: var(--hv-muted);
    font-weight: 500;
}

.mc-page .oqc-plan-list {
    list-style: none;
    padding: 0.6rem 0.6rem 0.85rem;
    margin: 0;
}

.mc-page .oqc-plan-list li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid var(--hv-border);
    font-size: 0.92rem;
    color: var(--hv-text);
}

.mc-page .oqc-plan-list li:last-child { border-bottom: none; }

.mc-page .oqc-plan-list i {
    color: var(--hv-energy);
    font-size: 1rem;
    flex-shrink: 0;
}

.mc-page .oqc-plan-list .oqc-plan-pending {
    color: var(--hv-muted);
}

/* Process monitor card */
.mc-page .oqc-monitor-body {
    padding: 0.6rem 0.6rem 0.85rem;
    display: flex;
    flex-direction: column;
}

.mc-page .oqc-monitor-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.65rem 0.7rem;
    border-bottom: 1px solid var(--hv-border);
    font-size: 0.92rem;
    color: var(--hv-text);
}

.mc-page .oqc-monitor-row:last-child { border-bottom: none; }

.mc-page .oqc-monitor-row--alert {
    background: rgba(255, 184, 0, 0.08);
    border-left: 3px solid #FFB800;
    padding-left: 0.5rem;
    border-radius: 6px;
    margin-top: 0.3rem;
    border-bottom: none;
}

.mc-page .oqc-monitor-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mc-page .oqc-monitor-dot--ok { background: var(--hv-energy); box-shadow: 0 0 0 3px rgba(0, 200, 150, 0.15); }
.mc-page .oqc-monitor-dot--warn { background: #FFB800; box-shadow: 0 0 0 3px rgba(255, 184, 0, 0.18); }
.mc-page .oqc-monitor-dot--alert { background: var(--micantis-danger); box-shadow: 0 0 0 3px rgba(229, 85, 85, 0.18); }

.mc-page .oqc-monitor-meta {
    font-size: 0.78rem;
    color: var(--hv-muted);
    white-space: nowrap;
}

/* ----- Battery Testing Labs custom mockups ----- */
.mc-page .btl-brand-card,
.mc-page .btl-tenant-card,
.mc-page .btl-rbac-card,
.mc-page .btl-projects-card,
.mc-page .btl-request-card {
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.08);
}

.mc-page .btl-brand-head,
.mc-page .btl-tenant-head,
.mc-page .btl-rbac-head,
.mc-page .btl-projects-head,
.mc-page .btl-request-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.25rem;
    background: var(--hv-bg);
    border-bottom: 1px solid var(--hv-border);
    font-weight: 600;
    color: var(--hv-text);
    font-size: 0.95rem;
}

.mc-page .btl-brand-head { justify-content: space-between; }

.mc-page .btl-brand-mark {
    display: flex; align-items: center; gap: 0.5rem;
    color: #0EA5E9;
    font-weight: 700;
}

.mc-page .btl-brand-mark i { font-size: 1.2rem; }

.mc-page .btl-brand-meta {
    font-size: 0.78rem;
    color: var(--hv-muted);
    font-weight: 500;
    font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
}

.mc-page .btl-brand-body {
    padding: 0.5rem 0.75rem 0.85rem;
}

.mc-page .btl-brand-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--hv-border);
    font-size: 0.88rem;
}

.mc-page .btl-brand-row:last-child { border-bottom: none; }

.mc-page .btl-brand-label {
    color: var(--hv-muted);
    font-weight: 500;
}

.mc-page .btl-brand-value {
    color: var(--hv-text);
    font-weight: 600;
}

.mc-page .btl-brand-swatch {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid rgba(15, 23, 42, 0.12);
}

/* Tenant list */
.mc-page .btl-tenant-head i { color: var(--hv-accent); }

.mc-page .btl-tenant-list { padding: 0.5rem 0.75rem 0.85rem; }

.mc-page .btl-tenant-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.85rem;
    align-items: center;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--hv-border);
}

.mc-page .btl-tenant-row:last-child { border-bottom: none; }

.mc-page .btl-tenant-avatar {
    width: 32px; height: 32px;
    border-radius: 8px;
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mc-page .btl-tenant-meta { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }

.mc-page .btl-tenant-name {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--hv-text);
}

.mc-page .btl-tenant-detail {
    font-size: 0.78rem;
    color: var(--hv-muted);
}

.mc-page .btl-tenant-status {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--hv-bg);
    border: 1px solid var(--hv-border);
    color: var(--hv-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.mc-page .btl-tenant-status--active {
    background: rgba(0, 200, 150, 0.12);
    border-color: rgba(0, 200, 150, 0.25);
    color: #007A5C;
}

.mc-page .btl-tenant-status--queued {
    background: rgba(255, 184, 0, 0.15);
    border-color: rgba(255, 184, 0, 0.3);
    color: #8A6300;
}

/* Engineer project filter card */
\.mc-page .btl-projects-head i { color: var(--hv-accent); }

\.mc-page .btl-projects-body {
    padding: 0;
}

\.mc-page .btl-projects-filter {
    padding: 0.85rem 1.25rem;
    background: var(--hv-bg);
    border-bottom: 1px solid var(--hv-border);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

\.mc-page .btl-projects-filter-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
}

\.mc-page .btl-projects-filter-label {
    font-family: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--hv-muted);
    min-width: 88px;
}

\.mc-page .btl-projects-filter-value {
    font-weight: 600;
    color: var(--hv-text);
}

\.mc-page .btl-projects-filter-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

\.mc-page .btl-projects-chip {
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--hv-text);
    padding: 0.18rem 0.6rem;
}

\.mc-page .btl-projects-chip--active {
    background: rgba(0, 200, 150, 0.12);
    border-color: rgba(0, 200, 150, 0.3);
    color: #007A5C;
}

\.mc-page .btl-projects-list {
    padding: 0.5rem 0.75rem 0.85rem;
}

\.mc-page .btl-projects-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.85rem;
    align-items: center;
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--hv-border);
}

\.mc-page .btl-projects-row:last-child { border-bottom: none; }

\.mc-page .btl-projects-meta {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

\.mc-page .btl-projects-name {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--hv-text);
}

\.mc-page .btl-projects-detail {
    font-size: 0.78rem;
    color: var(--hv-muted);
}

\.mc-page .btl-projects-status {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

\.mc-page .btl-projects-status--active {
    background: rgba(0, 200, 150, 0.12);
    border-color: rgba(0, 200, 150, 0.25);
    color: #007A5C;
}

/* Test request card */
\.mc-page .btl-request-head i { color: var(--hv-accent); }

\.mc-page .btl-request-body {
    padding: 0.5rem 0.75rem 0.85rem;
}

\.mc-page .btl-request-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--hv-border);
    font-size: 0.88rem;
    flex-wrap: wrap;
}

\.mc-page .btl-request-row:last-child { border-bottom: none; }

\.mc-page .btl-request-label {
    font-family: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--hv-muted);
    min-width: 110px;
}

\.mc-page .btl-request-value {
    color: var(--hv-text);
    font-weight: 600;
}

\.mc-page .btl-request-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

\.mc-page .btl-request-chip {
    background: rgba(74, 90, 168, 0.1);
    border: 1px solid rgba(74, 90, 168, 0.22);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--hv-accent);
    padding: 0.18rem 0.65rem;
}

\.mc-page .btl-request-criteria {
    margin-top: 0.4rem;
    padding: 0.75rem 0.75rem 0.6rem;
    background: rgba(0, 200, 150, 0.06);
    border-top: 1px solid var(--hv-border);
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
}

\.mc-page .btl-request-criteria-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.35rem;
}

\.mc-page .btl-request-tag {
    font-family: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #007A5C;
    background: rgba(0, 200, 150, 0.18);
    border: 1px solid rgba(0, 200, 150, 0.3);
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
}

\.mc-page .btl-request-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

\.mc-page .btl-request-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--hv-text);
}

\.mc-page .btl-request-list li i {
    color: #00A67E;
    font-size: 0.95rem;
}

/* RBAC grid */
.mc-page .btl-rbac-head i { color: var(--hv-accent); }

.mc-page .btl-rbac-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    padding: 0.5rem 0.5rem 0.85rem;
    gap: 0;
}

.mc-page .btl-rbac-cell {
    padding: 0.55rem 0.65rem;
    font-size: 0.86rem;
    color: var(--hv-text);
    border-bottom: 1px solid var(--hv-border);
    display: flex; align-items: center;
}

.mc-page .btl-rbac-cell--head {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hv-muted);
    border-bottom-color: var(--hv-border-strong);
}

.mc-page .btl-rbac-row-label {
    font-weight: 600;
    color: var(--hv-text);
    background: var(--hv-bg);
}

.mc-page .btl-rbac-cell i.bi-check-lg { color: var(--hv-energy); font-size: 1.05rem; }
.mc-page .btl-rbac-cell--off { color: var(--hv-muted); }
.mc-page .btl-rbac-cell--off i.bi-x { color: rgba(15, 23, 42, 0.25); font-size: 1.2rem; }

/* Removed bottom borders on the last row of the rbac grid */
.mc-page .btl-rbac-grid > .btl-rbac-cell:nth-last-child(-n+4) {
    border-bottom: none;
}

/* ----- Case study ----- */
.mc-page .iqc-case-study {
    padding: 88px 0;
    background: var(--hv-bg);
}

.mc-page .iqc-case-study--featured {
    padding: 96px 0 104px;
    background: var(--hv-bg);
}

.mc-page .iqc-case-study--featured .section-title {
    font-size: clamp(2.2rem, 4vw, 3.1rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.mc-page .iqc-case-study--featured .case-card {
    border-color: rgba(74, 90, 168, 0.18);
}

/* Case study carousel: each panel has its own title + lead above the case-card */
.mc-page .pm-case-deck .iqc-deck-stage {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}

.mc-page .pm-case-deck .iqc-deck-tabs {
    border-bottom: none;
    margin-bottom: 1.5rem;
    padding-bottom: 0;
    justify-content: flex-start;
}

.mc-page .pm-case-deck .iqc-deck-tab {
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    color: var(--hv-text);
    padding: 0.55rem 1.1rem;
    font-size: 0.88rem;
}

.mc-page .pm-case-deck .iqc-deck-tab.is-active {
    background: var(--hv-accent);
    color: #fff;
    border-color: var(--hv-accent);
}

.mc-page .case-panel-head {
    margin-bottom: 1.75rem;
    max-width: 850px;
}

.mc-page .case-panel-title {
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--hv-text);
    margin: 0 0 0.75rem;
}

.mc-page .case-panel-lead {
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--hv-muted);
    margin: 0;
}

/* Vision teardown gallery (case 2) */
.mc-page .pm-vision-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    padding: 0.4rem 0 0.2rem;
}

.mc-page .pm-vision-thumb {
    aspect-ratio: 1;
    border-radius: 8px;
    background:
        radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.55), transparent 55%),
        radial-gradient(ellipse at 70% 70%, rgba(15,23,42,0.18), transparent 60%),
        linear-gradient(135deg, #e2e8f0, #94a3b8);
    border: 1px solid var(--hv-border);
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}

.mc-page .pm-vision-thumb::before {
    content: '';
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 35% 35%, rgba(255,255,255,0.6), transparent 50%),
        radial-gradient(circle at center, #cbd5e1 30%, #94a3b8 75%);
    box-shadow: inset 0 0 6px rgba(15,23,42,0.3), 0 0 0 1px rgba(15,23,42,0.15);
}

.mc-page .pm-vision-thumb--fail {
    background:
        radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.55), transparent 55%),
        radial-gradient(ellipse at 70% 70%, rgba(229,85,85,0.25), transparent 65%),
        linear-gradient(135deg, #e2e8f0, #94a3b8);
}

.mc-page .pm-vision-thumb--fail::before {
    background:
        radial-gradient(ellipse at 70% 60%, rgba(229,85,85,0.45), transparent 50%),
        radial-gradient(ellipse at 35% 35%, rgba(255,255,255,0.5), transparent 50%),
        radial-gradient(circle at center, #cbd5e1 30%, #94a3b8 75%);
}

.mc-page .pm-vision-tag {
    position: absolute;
    bottom: 5px;
    left: 5px;
    right: 5px;
    font-family: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
    padding: 0.18rem 0.3rem;
    border-radius: 4px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.mc-page .pm-vision-tag--pass {
    background: rgba(0, 200, 150, 0.85);
    color: #fff;
}

.mc-page .pm-vision-tag--fail {
    background: rgba(229, 85, 85, 0.85);
    color: #fff;
}

.mc-page .pm-vision-swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
    margin-right: 0.3rem;
}

.mc-page .pm-vision-swatch--pass { background: #00C896; }
.mc-page .pm-vision-swatch--fail { background: #E55555; }

/* Hero classifier output: teardown photo with bounding-box overlay */
.mc-page .pm-vision-detection {
    position: relative;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #1a1a1a;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}

.mc-page .pm-vision-detection img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mc-page .pm-vision-detection-box {
    position: absolute;
    top: 18%;
    left: 32%;
    width: 38%;
    height: 22%;
    border: 2px dashed #E55555;
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(229, 85, 85, 0.4), inset 0 0 0 1px rgba(255,255,255,0.25);
    pointer-events: none;
    animation: pm-vision-pulse 2.4s ease-in-out infinite;
}

@keyframes pm-vision-pulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(229, 85, 85, 0.4), inset 0 0 0 1px rgba(255,255,255,0.25); }
    50% { box-shadow: 0 0 0 4px rgba(229, 85, 85, 0.18), inset 0 0 0 1px rgba(255,255,255,0.25); }
}

.mc-page .pm-vision-detection-label {
    position: absolute;
    top: 14%;
    left: 32%;
    transform: translateY(-100%);
    background: #E55555;
    color: #fff;
    font-family: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.22rem 0.5rem;
    border-radius: 3px 3px 3px 0;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.25);
    white-space: nowrap;
}

.mc-page .pm-vision-status-tag {
    font-family: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #fff;
    background: #E55555;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
}

/* Sleek prediction-vs-actual chart inside the case card */
.mc-page .case-chart {
    margin: 0 0 2rem;
    padding: 1.5rem 1.75rem 0.5rem;
    background: linear-gradient(180deg, rgba(247, 248, 245, 0.7), transparent);
    border: 1px solid var(--hv-border);
    border-radius: 16px;
    overflow: hidden;
}

/* Compact variant: lives inside the case-stats aside, beneath the headline stat */
.mc-page .case-chart--compact {
    margin: 1.25rem 0 0;
    padding: 0.85rem 1rem 0.4rem;
    border-radius: 12px;
}

.mc-page .case-chart--compact .case-chart-caption {
    margin-bottom: 0.5rem;
    gap: 0.5rem 1rem;
}

.mc-page .case-chart--compact .case-chart-eyebrow {
    margin-bottom: 0;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
}

.mc-page .case-chart--compact .case-chart-legend {
    gap: 0.65rem;
}

.mc-page .case-chart--compact .case-chart-legend-item {
    font-size: 0.72rem;
}

.mc-page .case-chart--compact .case-chart-svg {
    max-height: 220px;
}

.mc-page .case-chart-caption {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin-bottom: 0.85rem;
}

.mc-page .case-chart-eyebrow {
    font-family: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--hv-muted);
    display: block;
    margin-bottom: 0.25rem;
}

.mc-page .case-chart-title {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--hv-text);
    line-height: 1.3;
    letter-spacing: -0.01em;
    display: block;
    flex: 1 1 280px;
}

.mc-page .case-chart-legend {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    align-items: center;
    flex-shrink: 0;
}

.mc-page .case-chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--hv-text);
}

.mc-page .case-chart-swatch {
    width: 18px;
    height: 2px;
    border-radius: 2px;
    display: inline-block;
    position: relative;
}

.mc-page .case-chart-swatch--actual {
    background: repeating-linear-gradient(to right, #0F172A 0 5px, transparent 5px 9px);
    height: 2px;
}

.mc-page .case-chart-swatch--predicted {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #4A5AA8;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(74, 90, 168, 0.35);
}

.mc-page .case-chart-svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 360px;
}

@media (max-width: 575.98px) {
    .mc-page .case-chart {
        padding: 1rem 0.85rem 0.4rem;
    }
    .mc-page .case-chart-title { font-size: 0.95rem; }
}

.mc-page .case-card {
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 22px;
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
}

.mc-page .case-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(700px 320px at 100% 0%, rgba(0, 200, 150, 0.08), transparent 65%),
                radial-gradient(600px 320px at 0% 100%, rgba(85, 109, 175, 0.07), transparent 65%);
    pointer-events: none;
}

.mc-page .case-card-head {
    position: relative;
    max-width: 60rem;
    margin-bottom: 2rem;
}

.mc-page .case-title {
    font-size: clamp(1.85rem, 3.4vw, 2.65rem);
    font-weight: 700;
    color: var(--hv-text);
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0.5rem 0 0.75rem 0;
}

.mc-page .case-lead {
    color: var(--hv-muted);
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0;
}

.mc-page .case-card-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 2.5rem;
    position: relative;
}

@media (max-width: 991.98px) {
    .mc-page .case-card-grid { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 575.98px) {
    .mc-page .case-card { padding: 1.75rem 1.5rem; border-radius: 18px; }
}

.mc-page .case-narrative {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.mc-page .case-step {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.mc-page .case-step-num {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--hv-accent-soft);
    color: var(--hv-accent);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mc-page .case-step-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--hv-accent);
    margin: 0 0 0.4rem 0;
}

.mc-page .case-step-body {
    color: var(--hv-text);
    font-size: 0.98rem;
    line-height: 1.65;
    margin: 0;
}

.mc-page .case-stats {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.mc-page .case-stat-row {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
}

.mc-page .case-stat {
    flex: 1;
    background: var(--hv-bg);
    border: 1px solid var(--hv-border);
    border-radius: 14px;
    padding: 1rem 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-align: left;
}

.mc-page .case-stat--accent {
    background: linear-gradient(160deg, rgba(85, 109, 175, 0.08), rgba(0, 200, 150, 0.08));
    border-color: rgba(85, 109, 175, 0.22);
}

.mc-page .case-stat-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--hv-muted);
}

.mc-page .case-stat--accent .case-stat-label { color: var(--hv-accent); }

.mc-page .case-stat-value {
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--hv-text);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.mc-page .case-stat-unit {
    font-size: 0.82rem;
    color: var(--hv-muted);
}

.mc-page .case-stat-arrow {
    display: flex;
    align-items: center;
    width: 32px;
    flex-shrink: 0;
}

.mc-page .case-stat-arrow svg { width: 100%; height: 12px; display: block; }

.mc-page .case-headline-stat {
    background: linear-gradient(135deg, #2A3556 0%, var(--micantis-primary-dark) 50%, var(--micantis-primary) 100%);
    border-radius: 16px;
    padding: 1.5rem 1.5rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    align-items: flex-start;
    box-shadow: 0 16px 36px rgba(85, 109, 175, 0.22);
    position: relative;
    overflow: hidden;
}

.mc-page .case-headline-stat::after {
    content: '';
    position: absolute;
    width: 220px;
    height: 220px;
    right: -60px;
    top: -80px;
    background: radial-gradient(circle, rgba(0, 200, 150, 0.4), transparent 70%);
    pointer-events: none;
}

.mc-page .case-headline-stat-value {
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    position: relative;
}

.mc-page .case-headline-stat-unit {
    font-size: 1.6rem;
    font-weight: 600;
    margin-left: 0.2rem;
    color: var(--hv-energy);
}

.mc-page .case-headline-stat-label {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    position: relative;
}

.mc-page .case-quote {
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 14px;
    padding: 1.25rem 1.4rem 1.25rem 1.4rem;
    margin: 0;
    position: relative;
}

.mc-page .case-quote-mark {
    position: absolute;
    top: 0.55rem;
    right: 0.85rem;
    font-size: 1.6rem;
    color: rgba(85, 109, 175, 0.25);
}

.mc-page .case-quote p {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--hv-text);
    font-style: italic;
    margin: 0 0 0.55rem 0;
}

.mc-page .case-quote cite {
    font-size: 0.82rem;
    color: var(--hv-muted);
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ----- Alert demo card ----- */
.mc-page .alert-demo-v2 {
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.08);
}

.mc-page .alert-demo-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.25rem;
    background: var(--hv-bg);
    border-bottom: 1px solid var(--hv-border);
    font-weight: 600;
    color: var(--hv-text);
    font-size: 0.95rem;
}

.mc-page .alert-demo-header i { color: var(--micantis-danger); }

.mc-page .alert-demo-body { padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }

.mc-page .alert-row {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    border-left: 3px solid var(--hv-border-strong);
    background: var(--hv-bg);
}

.mc-page .alert-row > i { font-size: 1.1rem; margin-top: 0.15rem; flex-shrink: 0; }
.mc-page .alert-row--critical { background: rgba(229, 85, 85, 0.06); border-left-color: var(--micantis-danger); }
.mc-page .alert-row--critical > i { color: var(--micantis-danger); }
.mc-page .alert-row--warning { background: rgba(255, 184, 0, 0.07); border-left-color: #FFB800; }
.mc-page .alert-row--warning > i { color: #FFB800; }
.mc-page .alert-row--success { background: rgba(0, 200, 150, 0.06); border-left-color: var(--hv-energy); }
.mc-page .alert-row--success > i { color: var(--hv-energy); }

.mc-page .alert-row-text { font-size: 0.92rem; color: var(--hv-text); line-height: 1.45; }
.mc-page .alert-row-meta { font-size: 0.78rem; color: var(--hv-muted); margin-top: 0.2rem; }
.mc-page .alert-row-tags { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.5rem; }

.mc-page .alert-tag {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--hv-bg);
    color: var(--hv-text);
    border: 1px solid var(--hv-border);
}

.mc-page .alert-tag--danger { background: rgba(229, 85, 85, 0.12); color: #B73838; border-color: rgba(229, 85, 85, 0.25); }
.mc-page .alert-tag--warning { background: rgba(255, 184, 0, 0.15); color: #8A6300; border-color: rgba(255, 184, 0, 0.3); }
.mc-page .alert-tag--info { background: rgba(85, 109, 175, 0.1); color: var(--hv-accent); border-color: rgba(85, 109, 175, 0.2); }
.mc-page .alert-tag--success { background: rgba(0, 200, 150, 0.12); color: #007A5C; border-color: rgba(0, 200, 150, 0.25); }
.mc-page .alert-tag--neutral { background: var(--hv-bg); color: var(--hv-muted); }

/* ----- Benefits ----- */
.mc-page .iqc-benefit-card {
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 16px;
    padding: 1.75rem;
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    text-align: left;
}

/* Hover lift is reserved for clickable variants (--link). Static benefit
   cards stay at rest so they don't suggest interaction they don't have. */
.mc-page .iqc-benefit-card--link:hover {
    border-color: var(--hv-border-strong);
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.mc-page .iqc-benefit-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--hv-accent-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.mc-page .iqc-benefit-icon i { font-size: 1.25rem; color: var(--hv-accent); }

.mc-page .iqc-benefit-card h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--hv-text);
    letter-spacing: -0.01em;
    margin-bottom: 0.5rem;
}

.mc-page .iqc-benefit-card p {
    color: var(--hv-muted);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
}

/* Clickable benefit card variant */
.mc-page .iqc-benefit-card--link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.mc-page .iqc-benefit-card--link:hover {
    border-color: rgba(74, 90, 168, 0.35);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}

.mc-page .iqc-benefit-card--link .iqc-benefit-link {
    margin-top: auto;
    padding-top: 0.85rem;
    font-family: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--hv-accent);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.mc-page .iqc-benefit-card--link:hover .iqc-benefit-link i {
    transform: translateX(3px);
    transition: transform 0.2s ease;
}

/* ----- Integrations ----- */
.mc-page .brand-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}

.mc-page .brand-pill {
    display: inline-block;
    padding: 0.55rem 1.1rem;
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 999px;
    color: var(--hv-text);
    font-weight: 600;
    font-size: 0.9rem;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.mc-page .brand-pill:hover {
    border-color: var(--hv-accent);
    background: var(--hv-accent);
    color: #fff;
}

/* ----- CTA ----- */
.mc-page .cta-title {
    font-size: clamp(1.75rem, 2.5vw, 2.5rem);
    font-weight: 700;
    color: var(--hv-text);
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}

.mc-page .cta-lead {
    color: var(--hv-muted);
    font-size: 1.1rem;
    margin-bottom: 2rem;
    max-width: 38rem;
    margin-left: auto;
    margin-right: auto;
}

.mc-page .cta-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.mc-page .btn-outline-primary {
    border-color: var(--hv-border-strong);
    color: var(--hv-text);
    border-radius: 999px !important;
    padding: 0.6rem 1.4rem;
    font-weight: 600;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.mc-page .btn-outline-primary:hover {
    background: var(--hv-text);
    border-color: var(--hv-text);
    color: #fff;
}

/* ============================================
   R&D v2 (sleek refinement layer)
   ============================================ */
/* Tokens come from :root in _tokens.css. Wrapper just adopts the text color. */
.mc-page {
    color: var(--hv-text);
}

.mc-page .container { max-width: 1200px; }

/* R&D warm variant — palette is in _tokens.css. Below are page-specific
   layout / typography overrides only. */

/* Unify section backgrounds — drop alternation, drop dot grid */
.mc-page.mc-page--warm .rd-cover,
.mc-page.mc-page--warm .rd-features-header,
.mc-page.mc-page--warm .rd-feature-deck-wrap,
.mc-page.mc-page--warm .rd-workflow-section,
.mc-page.mc-page--warm .rd-equipment-section,
.mc-page.mc-page--warm .rd-pricing-section,
.mc-page.mc-page--warm .cta-section {
    background: var(--hv-bg);
    background-image: none;
}

/* Hairline section dividers replace bg alternation */
.mc-page.mc-page--warm .rd-features-header,
.mc-page.mc-page--warm .rd-workflow-section,
.mc-page.mc-page--warm .rd-equipment-section,
.mc-page.mc-page--warm .rd-pricing-section,
.mc-page.mc-page--warm .cta-section {
    border-top: 1px solid var(--hv-border);
}

/* Carousel sits transparently on the page bg, no card chrome */
.mc-page.mc-page--warm .rd-deck { background: transparent; }

/* Eyebrows: tracked-caps sans, no left tick */
.mc-page.mc-page--warm .section-eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    color: var(--hv-accent);
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 1rem;
}

.mc-page.mc-page--warm .section-title {
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.022em;
}

/* ----- Editorial cover ----- */
.mc-page.mc-page--warm .rd-cover { padding: 96px 0 80px; }

.mc-page.mc-page--warm .rd-cover-title {
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--hv-text);
    margin: 0 0 1.25rem 0;
}

.mc-page.mc-page--warm .rd-cover-accent { color: var(--hv-accent); }

.mc-page.mc-page--warm .rd-cover-sub {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--hv-muted);
    max-width: 30rem;
    margin-bottom: 1.75rem;
}

/* Audience labels: inline text separated by hairline vertical bars */
.mc-page.mc-page--warm .rd-cover-audiences {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0;
    margin-bottom: 1.5rem;
    max-width: 32rem;
}

.mc-page.mc-page--warm .rd-audience-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0 0.85rem;
    color: var(--hv-muted);
    font-size: 0.82rem;
    font-weight: 500;
    position: relative;
}

.mc-page.mc-page--warm .rd-audience-chip i {
    color: var(--hv-accent);
    font-size: 0.95rem;
}

.mc-page.mc-page--warm .rd-audience-chip + .rd-audience-chip::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 14px;
    width: 1px;
    background: var(--hv-border-strong);
}

@media (min-width: 992px) {
    .mc-page.mc-page--warm .rd-cover-right {
        border-left: 1px solid var(--hv-border);
        padding-left: 3rem !important;
    }
}

/* Stacked cover screenshots: two same-size cards offset diagonally */
.mc-page.mc-page--warm .rd-cover-stack {
    position: relative;
    aspect-ratio: 5 / 4;
    margin-bottom: 1rem;
}

.mc-page.mc-page--warm .rd-cover-shot {
    position: relative;
    background: linear-gradient(180deg, #F2F4F8 0%, #E7EAF1 100%);
    border-radius: 12px;
    padding: 32px 0 0;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.12);
    border: 1px solid rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.mc-page.mc-page--warm .rd-cover-shot::before {
    content: '';
    position: absolute; top: 11px; left: 12px;
    width: 10px; height: 10px; border-radius: 50%;
    background: #FF5F57;
    box-shadow: 16px 0 0 #FEBC2E, 32px 0 0 #28C840;
}

.mc-page.mc-page--warm .rd-cover-shot img {
    display: block;
    width: 100%;
    height: auto;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.mc-page.mc-page--warm .rd-cover-shot--back {
    position: absolute;
    top: 0;
    left: 0;
    width: 70%;
    z-index: 1;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
}

.mc-page.mc-page--warm .rd-cover-shot--front {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 70%;
    z-index: 2;
    box-shadow: 0 26px 55px rgba(15, 23, 42, 0.22);
}

/* Stat tiles: claim on top, support line below in muted text, in a card. */
.mc-page.mc-page--warm .rd-cover-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    margin-top: 2rem;
    margin-bottom: 1.25rem;
}

.mc-page.mc-page--warm .rd-stat-tile {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

.mc-page.mc-page--warm .rd-stat-tile::before {
    content: '\2713';
    color: var(--hv-accent);
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

.mc-page.mc-page--warm .rd-stat-message {
    font-size: 0.95rem;
    line-height: 1.45;
    font-weight: 400;
    color: var(--hv-text);
    letter-spacing: normal;
}

.mc-page.mc-page--warm .rd-cover-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--hv-accent);
    text-decoration: none;
    transition: gap 0.2s ease, color 0.2s ease;
}

.mc-page.mc-page--warm .rd-cover-link:hover {
    color: var(--hv-text);
    gap: 0.6rem;
}

/* Mac browser frame for any rd-feature-shot inside the warm variant */
.mc-page.mc-page--warm .rd-feature-shot {
    background: linear-gradient(180deg, #F2F4F8 0%, #E7EAF1 100%);
    border-radius: 12px;
    padding: 32px 0 0;
}

/* AI demo video, no chrome, sized down */
.mc-page.mc-page--warm .rd-ai-video {
    max-width: 380px;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
}

.mc-page.mc-page--warm .rd-ai-video video {
    display: block;
    width: 100%;
    height: auto;
}

/* ----- Hero ----- */
.mc-page .rd-hero {
    margin-bottom: 0;
    padding: 64px 0 72px;
    background: linear-gradient(160deg, #1E2742 0%, #2A3556 35%, var(--micantis-primary-dark) 100%);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.mc-page .rd-hero::after { display: none; }

.mc-page .hero-grid-overlay {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(1100px 700px at 50% 60%, black 40%, transparent 85%);
    -webkit-mask-image: radial-gradient(1100px 700px at 50% 60%, black 40%, transparent 85%);
    z-index: 0; pointer-events: none;
}

.mc-page .hero-glow {
    position: absolute; border-radius: 50%; filter: blur(80px);
    pointer-events: none; z-index: 0;
}

.mc-page .hero-glow--a {
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(85, 109, 175, 0.55), transparent 65%);
    top: -180px; left: -120px;
}

.mc-page .hero-glow--b {
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(0, 200, 150, 0.32), transparent 65%);
    bottom: -200px; right: -120px;
}

.mc-page .rd-hero-content {
    text-align: center;
    max-width: 920px;
    margin: 0 auto;
    position: relative;
}

.mc-page .hero-chip {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.4rem 0.95rem;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.78rem; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin-bottom: 1.5rem;
}

.mc-page .hero-chip-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--hv-energy);
    box-shadow: 0 0 12px var(--hv-energy);
    animation: about-hero-pulse 2.4s ease-in-out infinite;
}

.mc-page .page-title {
    font-size: clamp(2.4rem, 5.2vw, 4rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: #fff; font-weight: 700;
    margin: 0 auto 1.25rem;
    max-width: 22ch;
}

.mc-page .page-title-accent {
    background: linear-gradient(120deg, var(--micantis-energy) 0%, var(--micantis-primary-light) 60%, #ffffff 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; display: inline-block;
}

.mc-page .page-subtitle {
    font-size: 1.15rem; line-height: 1.55;
    color: rgba(255, 255, 255, 0.86);
    max-width: 44rem; margin: 0 auto 1.75rem;
}

.mc-page .hero-meta {
    display: inline-flex; align-items: center; flex-wrap: wrap;
    justify-content: center; gap: 0.85rem 1.25rem;
    color: rgba(255, 255, 255, 0.75); font-size: 0.88rem;
}

.mc-page .hero-meta-item { display: inline-flex; align-items: center; gap: 0.5rem; }
.mc-page .hero-meta-item i { color: var(--hv-energy); font-size: 1rem; }
.mc-page .hero-meta-divider { width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); }

@media (max-width: 575.98px) {
    .mc-page .hero-meta-divider { display: none; }
    .mc-page .hero-meta { gap: 0.6rem; }
}

/* ----- Section rhythm ----- */
.mc-page .rd-intro-section,
.mc-page .rd-features-header,
.mc-page .rd-feature-deck-wrap,
.mc-page .rd-workflow-section,
.mc-page .rd-equipment-section,
.mc-page .rd-pricing-section,
.mc-page .cta-section {
    padding: 88px 0;
}

.mc-page .rd-features-header { padding: 40px 0 8px; background: var(--hv-bg); }
.mc-page .rd-feature-deck-wrap { padding-top: 32px; padding-bottom: 64px; background: var(--hv-bg); }
.mc-page .rd-intro-section { background: #fff; }
.mc-page .rd-workflow-section { background: #fff; }
.mc-page .rd-equipment-section { background: var(--hv-bg); }
.mc-page .rd-pricing-section { background: #fff; }

.mc-page .cta-section {
    background:
        radial-gradient(800px 400px at 50% 0%, rgba(85, 109, 175, 0.12), transparent 70%),
        var(--hv-surface);
    border-top: 1px solid var(--hv-border);
    text-align: center;
}

.mc-page .section-eyebrow {
    font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--hv-accent);
    margin-bottom: 0.75rem;
}

.mc-page .section-title {
    font-size: clamp(1.85rem, 3vw, 2.5rem);
    font-weight: 700; color: var(--hv-text);
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
}

.mc-page .section-title::after { display: none; }

.mc-page .lead { font-size: 1.15rem; line-height: 1.6; color: var(--hv-text); }
.mc-page .rd-body { color: var(--hv-muted); font-size: 1rem; line-height: 1.7; }

/* ----- Mac-style screenshot frame ----- */
.mc-page .rd-feature-shot {
    position: relative;
    background: linear-gradient(180deg, #F2F4F8 0%, #E7EAF1 100%);
    border-radius: 14px;
    padding: 38px 0 0;
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.16);
    border: 1px solid rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.mc-page .rd-feature-shot::before {
    content: '';
    position: absolute; top: 14px; left: 14px;
    width: 12px; height: 12px; border-radius: 50%;
    background: #FF5F57;
    box-shadow: 20px 0 0 #FEBC2E, 40px 0 0 #28C840;
}

.mc-page .rd-feature-shot::after {
    content: '';
    position: absolute; top: 11px; left: 50%;
    transform: translateX(-50%);
    width: clamp(120px, 35%, 240px); height: 18px;
    background: rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 6px;
}

.mc-page .rd-feature-shot img {
    display: block; width: 100%; height: auto;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

/* ----- Feature deck (rotating, R&D) ----- */
.mc-page .rd-deck {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

/* R&D features carousel: matches the white-box treatment used on the
   Platform and IQC pages for visual consistency across feature decks. */
.mc-page.mc-page--warm .rd-feature-deck-wrap .rd-deck {
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 18px;
    padding: 1.4rem 1.5rem 1.6rem;
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.06);
}

.mc-page .rd-deck-tabs {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    padding: 0 0 1rem;
    border-bottom: 1px solid var(--hv-border);
    justify-content: center;
}

.mc-page .rd-deck-tab {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    color: var(--hv-muted);
    font-weight: 600; font-size: 0.92rem;
    padding: 0.5rem 0.95rem;
    border-radius: 999px; cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    margin-bottom: 0.75rem;
}

.mc-page .rd-deck-tab:hover { color: var(--hv-text); background: var(--hv-bg); }

.mc-page .rd-deck-tab.is-active {
    color: var(--hv-accent);
    background: var(--hv-accent-soft);
    border-color: rgba(85, 109, 175, 0.18);
}

.mc-page .rd-deck-stage {
    position: relative;
    padding: 2.5rem 0 0;
    display: grid;
    grid-template-areas: "panel";
}

/* Give the screenshot column more room than content inside the deck */
@media (min-width: 992px) {
    .mc-page .rd-deck-panel .row > [class*="col-lg-6"]:first-of-type {
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }
    .mc-page .rd-deck-panel .row > [class*="col-lg-6"]:nth-of-type(2) {
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }
    .mc-page .rd-deck-panel .row.g-5 {
        --bs-gutter-x: 2rem;
        --bs-gutter-y: 2rem;
    }
}

.mc-page .rd-deck-panel {
    grid-area: panel;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.55s ease, transform 0.55s ease, visibility 0s linear 0.55s;
}

.mc-page .rd-deck-panel.is-active {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.55s ease, transform 0.55s ease, visibility 0s linear 0s;
}

@media (max-width: 575.98px) {
    .mc-page .rd-deck-stage { padding: 1.5rem 1.25rem; }
    .mc-page .rd-deck-tabs { padding: 0.75rem 0.75rem 0; }
    .mc-page .rd-deck-tab { font-size: 0.85rem; padding: 0.4rem 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
    .mc-page .rd-deck-panel { transition: opacity 0.2s linear, visibility 0s linear 0.2s; transform: none; }
    .mc-page .rd-deck-panel.is-active { transform: none; transition: opacity 0.2s linear, visibility 0s linear 0s; }
}

/* ----- Feature panels content ----- */
.mc-page .feature-tag {
    display: inline-block;
    font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--hv-accent);
    background: var(--hv-accent-soft);
    padding: 0.35rem 0.7rem; border-radius: 999px;
    margin-bottom: 1rem;
}

.mc-page .rd-deck-panel h3 {
    font-size: clamp(1.4rem, 2vw, 1.85rem);
    font-weight: 700; color: var(--hv-text);
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
}

.mc-page .rd-feature-list {
    list-style: none; padding: 0; margin-top: 1rem;
}

.mc-page .rd-feature-list li {
    position: relative;
    padding: 0.55rem 0 0.55rem 1.5rem;
    border-bottom: 1px solid var(--hv-border);
    color: var(--hv-text); font-size: 0.96rem; line-height: 1.5;
}

.mc-page .rd-feature-list li:last-child { border-bottom: none; }

.mc-page .rd-feature-list li::before {
    content: '';
    position: absolute; left: 0; top: 0.95rem;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--hv-energy);
    box-shadow: 0 0 0 3px rgba(0, 200, 150, 0.15);
}

.mc-page .rd-feature-list strong { color: var(--hv-text); font-weight: 700; }

/* ----- Code card (Developer APIs panel) ----- */
.mc-page .code-card,
.mc-page .code-card {
    background: var(--hv-text);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.mc-page .code-card-head,
.mc-page .code-card-head {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mc-page .code-card-dots,
.mc-page .code-card-dots { display: inline-flex; gap: 6px; }
.mc-page .code-card-dots span,
.mc-page .code-card-dots span {
    width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.2);
}
.mc-page .code-card-dots span:nth-child(1),
.mc-page .code-card-dots span:nth-child(1) { background: #FF5F57; }
.mc-page .code-card-dots span:nth-child(2),
.mc-page .code-card-dots span:nth-child(2) { background: #FEBC2E; }
.mc-page .code-card-dots span:nth-child(3),
.mc-page .code-card-dots span:nth-child(3) { background: #28C840; }

.mc-page .code-card-title,
.mc-page .code-card-title {
    font-size: 0.78rem; font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.04em;
}

.mc-page .code-card-body,
.mc-page .code-card-body {
    padding: 1rem 1.25rem 1.25rem;
    color: #d4d4d4;
    font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace;
    font-size: 0.78rem;
    overflow-x: auto;
}

.mc-page .code-card-body pre,
.mc-page .code-card-body pre { margin: 0; white-space: pre; color: #d4d4d4; }
.mc-page .code-keyword, .mc-page .code-keyword { color: #569cd6; }
.mc-page .code-string, .mc-page .code-string { color: #ce9178; }
.mc-page .code-comment, .mc-page .code-comment { color: #6a9955; }
.mc-page .code-function, .mc-page .code-function { color: #dcdcaa; }
.mc-page .code-method, .mc-page .code-method { color: #dcdcaa; }
.mc-page .code-variable, .mc-page .code-variable { color: #9cdcfe; }
.mc-page .code-number, .mc-page .code-number { color: #b5cea8; }
.mc-page .code-operator, .mc-page .code-operator { color: #d4d4d4; }

/* ----- Workflow card ----- */
.mc-page .workflow-card {
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 18px;
    padding: 2rem;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.06);
}

.mc-page .workflow-flow-v2 {
    list-style: none; padding: 0; margin: 0;
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
}

.mc-page .flow-step-v2 {
    display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
    flex: 0 0 auto;
}

.mc-page .flow-icon-v2 {
    width: 56px; height: 56px; border-radius: 14px;
    background: var(--hv-accent-soft);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--hv-accent); font-size: 1.4rem;
    transition: transform 0.25s ease;
}

.mc-page .flow-step-v2:hover .flow-icon-v2 { transform: translateY(-3px); }

.mc-page .flow-label-v2 {
    color: var(--hv-text);
    font-weight: 600; font-size: 0.9rem;
    letter-spacing: 0.04em;
}

.mc-page .flow-detail-v2 {
    color: var(--hv-muted);
    font-size: 0.78rem; text-align: center;
    max-width: 14ch;
}

.mc-page .flow-arrow-v2 {
    flex: 1; height: 4px; list-style: none;
}

.mc-page .flow-arrow-v2 svg { width: 100%; height: 100%; display: block; }

@media (max-width: 575.98px) {
    .mc-page .workflow-flow-v2 { flex-wrap: wrap; justify-content: center; gap: 1rem; }
    .mc-page .flow-arrow-v2 { display: none; }
}

/* ----- Equipment cards ----- */
.mc-page .rd-equipment-card {
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 16px;
    padding: 1.75rem;
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.mc-page .rd-equipment-card:hover {
    border-color: var(--hv-border-strong);
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.mc-page .rd-equipment-icon {
    width: 48px; height: 48px; border-radius: 12px;
    background: var(--hv-accent-soft);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 1rem;
}

.mc-page .rd-equipment-icon i { font-size: 1.25rem; color: var(--hv-accent); }

.mc-page .rd-equipment-card h4 {
    font-size: 1.1rem; font-weight: 700;
    color: var(--hv-text); letter-spacing: -0.01em;
    margin-bottom: 0.5rem;
}

.mc-page .rd-equipment-card p {
    color: var(--hv-muted);
    font-size: 0.95rem; line-height: 1.55;
    margin: 0 0 1.25rem 0;
}

.mc-page .brand-row {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
}

.mc-page .brand-pill {
    display: inline-block;
    padding: 0.4rem 0.85rem;
    background: var(--hv-bg);
    border: 1px solid var(--hv-border);
    border-radius: 999px;
    color: var(--hv-text); font-weight: 600;
    font-size: 0.82rem;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.mc-page .brand-pill:hover {
    border-color: var(--hv-accent);
    background: var(--hv-accent);
    color: #fff;
}

/* ----- Pricing ----- */
.mc-page .rd-plan {
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 18px;
    padding: 2rem;
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    display: flex; flex-direction: column;
    position: relative;
}

.mc-page .rd-plan:hover {
    border-color: var(--hv-border-strong);
    transform: translateY(-3px);
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.08);
}

.mc-page .rd-plan--featured {
    border-color: rgba(85, 109, 175, 0.35);
    box-shadow: 0 30px 60px rgba(85, 109, 175, 0.14);
    background:
        linear-gradient(180deg, rgba(85, 109, 175, 0.04), rgba(0, 200, 150, 0.02)),
        var(--hv-surface);
}

.mc-page .rd-plan-badge {
    position: absolute; top: -14px; left: 24px;
    background: linear-gradient(120deg, var(--hv-accent), var(--hv-energy));
    color: #fff;
    padding: 0.3rem 0.8rem; border-radius: 999px;
    font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    box-shadow: 0 8px 20px rgba(85, 109, 175, 0.3);
}

.mc-page .rd-plan-name {
    font-size: 1.25rem; font-weight: 700;
    color: var(--hv-text); letter-spacing: -0.01em;
    margin: 0 0 0.4rem 0;
}

.mc-page .rd-plan-desc {
    color: var(--hv-muted);
    font-size: 0.95rem; line-height: 1.5;
    margin-bottom: 1.5rem;
}

.mc-page .rd-plan-features {
    list-style: none; padding: 0; margin: 0 0 1.75rem 0;
    display: flex; flex-direction: column; gap: 0.55rem;
    flex-grow: 1;
}

.mc-page .rd-plan-features li {
    display: flex; align-items: flex-start; gap: 0.6rem;
    color: var(--hv-text); font-size: 0.92rem; line-height: 1.45;
}

.mc-page .rd-plan-features i {
    color: var(--hv-energy); font-size: 1rem;
    margin-top: 0.15rem; flex-shrink: 0;
}

/* ----- CTA ----- */
.mc-page .cta-title {
    font-size: clamp(1.75rem, 2.5vw, 2.5rem);
    font-weight: 700; color: var(--hv-text);
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}

.mc-page .cta-lead {
    color: var(--hv-muted);
    font-size: 1.1rem; margin-bottom: 2rem;
}

.mc-page .cta-actions {
    display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
}

.mc-page .btn-outline-primary {
    border-color: var(--hv-border-strong);
    color: var(--hv-text);
    border-radius: 999px !important;
    padding: 0.6rem 1.4rem;
    font-weight: 600;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.mc-page .btn-outline-primary:hover {
    background: var(--hv-text);
    border-color: var(--hv-text);
    color: #fff;
}

/* Platform features carousel: contained in a white panel, similar to
   the home page QC carousel, but without the connector arrows between
   tabs. Same surface vocabulary so the two pages feel cohesive. */
.mc-page.mc-page--warm .iqc-feature-deck-wrap .iqc-deck {
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 18px;
    padding: 1.4rem 1.5rem 1.6rem;
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.06);
}

/* Qualification panel: comparison table behind, application form inset on top.
   Used by the supplier-selection / qualification panel on the home page QC
   carousel AND the IQC page features carousel. */
.mc-page.mc-page--warm .qc-qualification-stack {
    position: relative;
}

.mc-page.mc-page--warm .qc-qualification-inset {
    position: absolute;
    top: 8%;
    right: -32px;
    width: clamp(200px, 42%, 290px);
    z-index: 2;
}

.mc-page.mc-page--warm .qc-qualification-inset .iqc-feature-shot {
    box-shadow: 0 22px 40px rgba(15, 23, 42, 0.22);
}

@media (max-width: 575.98px) {
    .mc-page.mc-page--warm .qc-qualification-inset {
        position: static;
        width: 100%;
        margin-top: 1rem;
    }
}

/* Compact mini-card variant for the QC steps grid */
.mc-page.mc-page--warm .home-mini-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 11px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    height: 100%;
}

.mc-page.mc-page--warm .home-mini-card:hover {
    transform: translateY(-2px);
    border-color: rgba(74, 90, 168, 0.28);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
    text-decoration: none;
    color: inherit;
}

.mc-page.mc-page--warm .home-mini-card:hover .home-mini-arrow {
    transform: translateX(3px);
    opacity: 1;
}

.mc-page.mc-page--warm .home-mini-num {
    font-family: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--hv-accent);
    letter-spacing: 0.06em;
    background: rgba(74, 90, 168, 0.08);
    padding: 0.3rem 0.5rem;
    border-radius: 7px;
    min-width: 32px;
    text-align: center;
}

.mc-page.mc-page--warm .home-mini-meta {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.mc-page.mc-page--warm .home-mini-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--hv-text);
    letter-spacing: -0.005em;
    line-height: 1.2;
}

.mc-page.mc-page--warm .home-mini-detail {
    font-size: 0.8rem;
    color: var(--hv-muted);
    line-height: 1.35;
}

.mc-page.mc-page--warm .home-mini-arrow {
    color: var(--hv-accent);
    font-size: 0.85rem;
    opacity: 0.5;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Split copy inside .home-step-card (You decide / We help) */
.mc-page.mc-page--warm .home-step-card .home-step-you {
    display: block;
    color: var(--hv-text);
    font-weight: 600;
    margin-bottom: 0.4rem;
    font-size: 0.92rem;
    line-height: 1.5;
}

.mc-page.mc-page--warm .home-step-card .home-step-we {
    display: block;
    color: var(--hv-muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

/* Tile badges (responsibility variants) */
.mc-page.mc-page--warm .home-step-tag--coach {
    background: rgba(122, 128, 154, 0.12);
    color: var(--hv-muted);
}

.mc-page.mc-page--warm .home-step-tag--connect {
    background: var(--hv-accent-soft);
    color: var(--hv-accent);
}

.mc-page.mc-page--warm .home-step-tag--software {
    background: rgba(15, 23, 42, 0.07);
    color: var(--hv-text);
}

/* Compatibility strip */
.mc-page.mc-page--warm .home-compat {
    padding: 2.5rem 0;
    background: var(--hv-bg);
    text-align: center;
}

.mc-page.mc-page--warm .home-compat-text {
    font-size: 0.95rem;
    color: var(--hv-muted);
    line-height: 1.6;
    margin: 0;
}

.mc-page.mc-page--warm .home-compat-text + .home-compat-text {
    margin-top: 0.5rem;
}

.mc-page.mc-page--warm .home-compat-text strong {
    color: var(--hv-text);
    font-weight: 600;
}

.mc-page.mc-page--warm .home-industry-card {
    display: block;
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 8px;
    padding: 1.6rem 1.5rem;
    height: 100%;
    text-decoration: none;
    color: var(--hv-text);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.mc-page.mc-page--warm .home-industry-card:hover {
    border-color: var(--hv-border-strong);
    background: rgba(15, 23, 42, 0.02);
    color: var(--hv-text);
    text-decoration: none;
}

.mc-page.mc-page--warm .home-industry-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--hv-text);
    margin-bottom: 0.3rem;
    letter-spacing: -0.01em;
}

.mc-page.mc-page--warm .home-industry-trig {
    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Courier New', monospace;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--hv-accent);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.7rem;
}

.mc-page.mc-page--warm .home-industry-consequence {
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--hv-muted);
    margin: 0;
}

/* ==========================================================================
   Contact modal — "Schedule a call" / "Send an email" switch
   Markup: Views/Shared/_Layout.cshtml  ·  Behaviour: wwwroot/js/contact-modal.js
   ========================================================================== */

.contact-mode-switch {
    display: flex;
    gap: 0.5rem;
    padding: 0.3rem;
    margin-bottom: 1.25rem;
    background: var(--micantis-gray-100);
    border-radius: 30px;
}

.contact-mode-btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    border: none;
    border-radius: 30px;
    background: transparent;
    color: var(--micantis-gray-600);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.contact-mode-btn:hover {
    color: var(--micantis-primary-dark);
    background: var(--micantis-header-button-hover);
}

.contact-mode-btn.active {
    background: var(--micantis-primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(85, 109, 175, 0.28);
}

.contact-mode-btn.active:hover {
    background: var(--micantis-primary-dark);
    color: #fff;
}

.contact-mode-btn:focus-visible {
    outline: 2px solid var(--micantis-primary);
    outline-offset: 2px;
}

.contact-pane-hint {
    margin-bottom: 1rem;
    color: var(--micantis-gray-600);
    font-size: 0.95rem;
}

/* Direct contact remains available if the modal cannot open. */
.contact-open-fallback {
    position: fixed;
    z-index: 1100;
    right: 1rem;
    bottom: 1rem;
    width: min(420px, calc(100vw - 2rem));
    padding: 1.25rem;
    border: 1px solid #c9cfdd;
    border-radius: 12px;
    background: #fff;
    color: #212529;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .2);
}
.contact-open-fallback .btn-close { float: right; }
.contact-open-fallback p:last-child { margin-bottom: 0; }

/* Calendly needs an explicit height on its parent element. */
.contact-calendly-embed {
    height: clamp(560px, 72vh, 720px);
    min-width: 320px;
}

.contact-calendly-embed.is-loading {
    background: var(--micantis-gray-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38' stroke='%23556DAF'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(1 1)' stroke-width='2'%3E%3Ccircle stroke-opacity='.25' cx='18' cy='18' r='18'/%3E%3Cpath d='M36 18c0-9.94-8.06-18-18-18'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 18 18' to='360 18 18' dur='1s' repeatCount='indefinite'/%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
    border-radius: 10px;
}

@media (max-width: 575.98px) {
    .contact-mode-switch {
        flex-direction: column;
    }

    .contact-calendly-embed {
        height: 80vh;
        min-height: 620px;
    }
}

/* ==========================================================================
   Micantis Pro post-checkout pages (/pro/welcome, /pro/cancelled)
   ========================================================================== */
.pro-checkout-result {
    max-width: 660px;
    margin: 0 auto;
    padding: 110px 0 90px;
    text-align: center;
}

.pro-checkout-icon {
    width: 84px;
    height: 84px;
    margin: 0 auto 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 200, 150, 0.12);
    color: var(--micantis-energy-dark);
    font-size: 2.5rem;
}

.pro-checkout-icon--muted {
    background: var(--hv-accent-soft);
    color: var(--hv-accent);
}

.pro-checkout-result h1 {
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--hv-text);
    margin-bottom: 1.25rem;
    font-size: clamp(1.9rem, 4vw, 2.6rem);
}

.pro-checkout-lead {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--hv-muted);
    margin-bottom: 2.5rem;
}

.pro-checkout-steps {
    text-align: left;
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 14px;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 2rem;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.pro-checkout-step {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    color: var(--hv-text);
    line-height: 1.55;
}

.pro-checkout-step-num {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--hv-accent-soft);
    color: var(--hv-accent);
    font-weight: 700;
    font-size: 0.9rem;
}

.pro-checkout-support {
    color: var(--hv-muted);
    margin-bottom: 0.75rem;
}

.pro-checkout-support a {
    color: var(--hv-accent);
    font-weight: 600;
}

.pro-checkout-ref {
    font-size: 0.85rem;
    color: var(--micantis-text-light);
    word-break: break-all;
}

.pro-checkout-ref code {
    color: var(--hv-muted);
    background: var(--micantis-gray-100);
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
}

.pro-checkout-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ==========================================================================
   Micantis Pro plan page (/pro)
   ========================================================================== */
.pro-hero-lead {
    max-width: 720px;
    margin: 1.25rem auto 1.75rem;
    font-size: 1.15rem;
    line-height: 1.65;
    color: var(--hv-muted);
}

.pro-hero-actions {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.pro-hero-secondary {
    color: var(--hv-accent);
    font-weight: 600;
    text-decoration: none;
}

.pro-hero-secondary:hover {
    color: var(--hv-accent);
    text-decoration: underline;
}

.pro-hero-fineprint {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--hv-muted);
}

.pro-feature {
    height: 100%;
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 14px;
    padding: 1.5rem;
}

.pro-feature i {
    font-size: 1.5rem;
    color: var(--hv-accent);
}

.pro-feature h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0.75rem 0 0.5rem;
    color: var(--hv-text);
}

.pro-feature p {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--hv-muted);
    margin: 0;
}

.pro-feature code {
    color: var(--hv-accent);
    background: var(--hv-accent-soft);
    padding: 0.1rem 0.35rem;
    border-radius: 6px;
    font-size: 0.85em;
}

.pro-steps-wrap {
    max-width: 640px;
    margin: 0 auto;
}

.pro-not {
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-left: 4px solid var(--hv-accent);
    border-radius: 12px;
    padding: 1.75rem 2rem;
}

.pro-not h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--hv-text);
    margin-bottom: 1rem;
}

.pro-not ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1rem;
}

.pro-not li {
    color: var(--hv-muted);
    line-height: 1.6;
    margin-bottom: 0.6rem;
}

.pro-not li strong {
    color: var(--hv-text);
}

.pro-not-link a {
    color: var(--hv-accent);
    font-weight: 600;
}

.pro-trial-callout {
    max-width: 640px;
    margin: 2rem auto 0;
    background: rgba(0, 200, 150, 0.08);
    border: 1px solid rgba(0, 200, 150, 0.25);
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
    text-align: center;
}

.pro-trial-callout h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--hv-text);
    margin-bottom: 0.5rem;
}

.pro-trial-callout p {
    color: var(--hv-muted);
    margin: 0;
    line-height: 1.6;
}

.pro-details-toggle {
    color: var(--hv-muted);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
}

.pro-details-toggle:hover {
    color: var(--hv-accent);
}

.pro-details-toggle i {
    display: inline-block;
    transition: transform 0.2s ease;
}

.pro-details-toggle:not(.collapsed) i {
    transform: rotate(180deg);
}

/* DroneQC battery services — all styles are scoped to this page. */
.droneqc-page {
    --navy: #1a2133;
    --blue: #556daf;
    --green: #33d4a8;
    --green-ink: #007657;
    --warm: #f6f5f1;
    --ink: #172236;
    --muted: #536070;
    --line: #dde1e5;
    --white: #fff;
    font-family: var(--mc-font-sans);
    color: var(--ink);
    background: var(--white);
    font-synthesis: none;
}

.droneqc-page * {
    box-sizing: border-box;
}

.droneqc-page a {
    color: inherit;
    text-underline-offset: 4px;
}

.droneqc-page button,
.droneqc-page a {
    -webkit-tap-highlight-color: transparent;
}

.droneqc-page a:focus-visible,
.droneqc-page summary:focus-visible {
    outline: 3px solid var(--green-ink);
    outline-offset: 5px;
}

.droneqc-page img {
    max-width: 100%;
    height: auto;
}

.droneqc-page p {
    font-size: 16px;
    line-height: 1.65;
    margin: 0 0 17px;
}

.droneqc-page h1,
.droneqc-page h2,
.droneqc-page h3,
.droneqc-page h4 {
    margin: 0;
    letter-spacing: -.04em;
}

.droneqc-page h1 {
    font-size: clamp(38px,4.45vw,61px);
    line-height: 1.08;
    font-weight: 720;
}

.droneqc-page h2 {
    font-size: clamp(30px,3.2vw,43px);
    line-height: 1.16;
    font-weight: 680;
}

.droneqc-page h3 {
    font-size: 28px;
    line-height: 1.18;
    font-weight: 650;
}

.droneqc-page h4 {
    font-size: 14px;
    letter-spacing: 0;
    font-weight: 700;
}

.droneqc-page .dq-wrap {
    width: min(1136px,calc(100% - 80px));
    margin: 0 auto;
}

.droneqc-page .dq-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    background: var(--blue);
    color: white;
    border: 1px solid transparent;
    border-radius: 5px;
    padding: 14px 19px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.3;
    transition: background .15s;
}

.droneqc-page .dq-button:hover {
    background: #3a4a7a;
}

.droneqc-page .dq-button span {
    font-size: 18px;
}

.droneqc-page .dq-text-link {
    font-size: 14px;
    font-weight: 650;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #3b5091;
}

.droneqc-page .dq-text-link:hover {
    text-decoration: underline;
}

.droneqc-page .dq-eyebrow {
    font-size: 10px;
    letter-spacing: .15em;
    font-weight: 750;
    color: var(--blue);
    margin-bottom: 20px;
    line-height: 1.5;
}

.droneqc-page .dq-hero {
    background: var(--warm);
    border-bottom: 1px solid var(--line);
}

.droneqc-page .dq-hero-grid {
    display: grid;
    grid-template-columns: minmax(0,1.68fr) minmax(270px,1fr);
    gap: 55px;
    padding-top: 71px;
    padding-bottom: 69px;
    align-items: center;
}

.droneqc-page .dq-hero h1 span {
    color: var(--green-ink);
}

.droneqc-page .dq-hero-lead {
    font-size: 20px;
    line-height: 1.55;
    margin-top: 26px;
    font-weight: 500;
    letter-spacing: -.015em;
}

.droneqc-page .dq-hero-support {
    max-width: 560px;
    color: var(--muted);
    font-size: 16px;
}

.droneqc-page .dq-actions {
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
    margin-top: 26px;
}

.droneqc-page .dq-reassurance {
    font-size: 12px;
    color: var(--muted);
    margin-top: 15px;
    margin-bottom: 0;
}

.droneqc-page .dq-problem-menu {
    padding: 28px 28px 17px;
    border-top: 3px solid var(--blue);
    background: white;
    box-shadow: 0 18px 40px -35px #1a213350;
}

.droneqc-page .dq-problem-menu .dq-eyebrow {
    color: var(--muted);
    font-size: 9px;
    margin-bottom: 5px;
}

.droneqc-page .dq-problem-menu>a {
    display: grid;
    grid-template-columns: 22px 1fr 16px;
    align-items: center;
    gap: 12px;
    padding: 23px 0;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: -.015em;
}

.droneqc-page .dq-problem-menu>a:last-child {
    border-bottom: 0;
}

.droneqc-page .dq-problem-menu>a:hover {
    color: var(--green-ink);
}

.droneqc-page .dq-problem-num {
    font-family: Consolas,monospace;
    font-size: 11px;
    font-weight: 400;
    color: var(--blue);
}

.droneqc-page .dq-problem-menu>a>span:last-child {
    color: var(--blue);
}

.droneqc-page .dq-section-space {
    padding-top: 75px;
    padding-bottom: 76px;
}

.droneqc-page .dq-section-intro {
    max-width: 760px;
    margin-bottom: 43px;
}

.droneqc-page .dq-section-intro .dq-eyebrow {
    margin-bottom: 14px;
}

.droneqc-page .dq-section-intro>p:last-child {
    color: var(--muted);
    max-width: 665px;
    margin-top: 20px;
}

.droneqc-page .dq-service {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 72px;
    border-top: 1px solid var(--line);
    padding: 42px 0 44px;
    scroll-margin-top: 96px;
}

.droneqc-page .dq-service:last-child {
    padding-bottom: 0;
}

.droneqc-page .dq-section-num {
    font-size: 10px;
    letter-spacing: .15em;
    font-weight: 650;
    display: block;
    color: var(--blue);
    margin-bottom: 21px;
}

.droneqc-page .dq-service h3 {
    font-size: 29px;
    line-height: 1.2;
}

.droneqc-page .dq-service-detail>p {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.7;
}

.droneqc-page .dq-deliverable {
    border-left: 3px solid #b2bece;
    padding-left: 17px;
    margin: 25px 0 23px;
}

.droneqc-page .dq-deliverable h4 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--blue);
}

.droneqc-page ul {
    padding-left: 19px;
    margin: 10px 0 0;
}

.droneqc-page li {
    padding-left: 3px;
    font-size: 14px;
    line-height: 1.65;
    margin: 4px 0;
}

.droneqc-page .dq-ownership-band {
    background: var(--navy);
    color: white;
    padding: 62px 0 64px;
}

.droneqc-page .dq-ownership-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 85px;
}

.droneqc-page .dq-ownership-band .dq-eyebrow {
    color: var(--green);
    margin-bottom: 16px;
}

.droneqc-page .dq-ownership-band h2 {
    font-size: 38px;
    line-height: 1.22;
}

.droneqc-page .dq-ownership-band h2 span {
    color: var(--green);
}

.droneqc-page .dq-ownership-band p:not(.dq-eyebrow) {
    color: #c3ccda;
    font-size: 15px;
    margin-top: 20px;
    margin-bottom: 0;
}

.droneqc-page .dq-ownership-list {
    border-left: 1px solid #ffffff29;
    padding-left: 37px;
}

.droneqc-page .dq-ownership-list>p:first-child {
    font-size: 10px;
    margin: 1px 0 15px;
    letter-spacing: .14em;
    font-weight: 650;
    color: var(--green);
}

.droneqc-page .dq-ownership-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.droneqc-page .dq-ownership-list li {
    font-size: 19px;
    padding: 10px 0;
    border-bottom: 1px solid #ffffff1a;
    letter-spacing: -.02em;
    margin: 0;
}

.droneqc-page .dq-ownership-list .dq-ownership-note {
    font-size: 12px!important;
    line-height: 1.6!important;
}

.droneqc-page .dq-software-section {
    padding-bottom: 70px;
}

.droneqc-page .dq-plans {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 20px;
}

.droneqc-page .dq-plan {
    padding: 26px 25px 27px;
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    border-radius: 7px;
}

.droneqc-page .dq-service-plan {
    background: var(--warm);
    border-color: var(--warm);
}

.droneqc-page .dq-plan-type {
    font-size: 9px;
    line-height: 1.4;
    letter-spacing: .08em;
    color: var(--blue);
    font-weight: 700;
    margin-bottom: 16px;
}

.droneqc-page .dq-plan h3 {
    font-size: 24px;
}

.droneqc-page .dq-plan .dq-plan-price {
    font-size: 13px;
    min-height: 42px;
    line-height: 1.4;
    margin: 12px 0 17px;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 7px;
}

.droneqc-page .dq-plan-price strong {
    font-size: 32px;
    letter-spacing: -.035em;
    font-weight: 650;
}

.droneqc-page .dq-plan>p:not(.dq-plan-type):not(.dq-plan-price) {
    font-size: 14px;
    line-height: 1.65;
    color: var(--muted);
}

.droneqc-page .dq-plan ul {
    padding-left: 16px;
    margin: 0 0 28px;
}

.droneqc-page .dq-plan li {
    font-size: 13px;
    margin: 6px 0;
}

.droneqc-page .dq-plan .dq-text-link {
    margin-top: auto;
}

.droneqc-page .dq-plan-note {
    font-size: 12px;
    line-height: 1.65;
    color: var(--muted);
    max-width: 940px;
    margin: 19px 0 31px;
}

.droneqc-page .dq-team-path {
    border-top: 1px solid var(--line);
    padding-top: 24px;
    display: grid;
    grid-template-columns: .7fr 1.3fr auto;
    gap: 28px;
    align-items: start;
}

.droneqc-page .dq-team-path strong {
    font-size: 15px;
    line-height: 1.5;
}

.droneqc-page .dq-team-path p {
    font-size: 13px;
    color: var(--muted);
    margin: 0;
    line-height: 1.6;
}

.droneqc-page .dq-team-path .dq-text-link {
    font-size: 13px;
    margin-top: 3px;
    white-space: nowrap;
}

.droneqc-page .dq-how-starts {
    background: var(--warm);
}

.droneqc-page .dq-how-starts .dq-section-intro {
    margin-bottom: 34px;
}

.droneqc-page .dq-steps {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 43px;
}

.droneqc-page .dq-steps>div {
    border-top: 1px solid #ccd2da;
    padding-top: 22px;
}

.droneqc-page .dq-steps span {
    font-family: Consolas,monospace;
    color: var(--blue);
    font-size: 12px;
}

.droneqc-page .dq-steps h3 {
    font-size: 20px;
    letter-spacing: -.025em;
    margin: 16px 0 12px;
}

.droneqc-page .dq-steps p {
    font-size: 14px;
    color: var(--muted);
    margin: 0;
}

.droneqc-page .dq-faq-section {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 70px;
}

.droneqc-page .dq-faq-section .dq-eyebrow {
    margin-bottom: 13px;
}

.droneqc-page .dq-faqs details {
    border-bottom: 1px solid var(--line);
    padding: 0 0 18px;
    margin-bottom: 18px;
}

.droneqc-page .dq-faqs summary {
    font-size: 15px;
    line-height: 1.5;
    font-weight: 600;
    cursor: pointer;
    padding-right: 8px;
}

.droneqc-page .dq-faqs details>p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--muted);
    margin: 15px 0 0;
}

.droneqc-page .dq-contact-section {
    background: var(--navy);
    color: white;
    padding: 67px 0;
}

.droneqc-page .dq-contact-grid {
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    gap: 105px;
    align-items: center;
}

.droneqc-page .dq-contact-section .dq-eyebrow {
    color: var(--green);
    margin-bottom: 14px;
}

.droneqc-page .dq-contact-section h2 {
    font-size: 40px;
}

.droneqc-page .dq-contact-section p {
    color: #c3ccda;
    font-size: 15px;
    margin: 22px 0;
}

.droneqc-page .dq-contact-section .dq-button-green {
    background: var(--green);
    color: var(--navy);
}

.droneqc-page .dq-contact-section .dq-button-green:hover {
    background: #72e4c5;
}

.droneqc-page .dq-contact-section .dq-contact-email {
    font-size: 13px;
    margin: 13px 0 0;
    color: #e3e8ee;
}

.droneqc-page .dq-contact-section .dq-nda-note {
    font-size: 12px;
    margin: 10px 0 0;
    color: #bcc6d3;
}

.droneqc-page .dq-contact-section aside {
    border-left: 1px solid #ffffff29;
    padding-left: 34px;
}

.droneqc-page .dq-contact-section aside h3 {
    font-size: 20px;
}

.droneqc-page .dq-contact-section li {
    font-size: 14px;
    color: #d3dae5;
    margin: 10px 0;
}

.droneqc-page .dq-contact-section aside p {
    font-size: 12px;
    line-height: 1.6;
}

.droneqc-page .dq-contact-section aside a {
    color: var(--green);
    font-size: 13px;
    line-height: 1.6;
    display: inline-block;
}

@media (min-width:1450px) {
    .droneqc-page .dq-hero-grid {
        gap: 70px;
    }

    .droneqc-page h1 {
        font-size: 61px;
    }
}

@media (max-width:1050px) {
    .droneqc-page .dq-wrap {
        width: calc(100% - 48px);
    }

    .droneqc-page .dq-hero-grid {
        gap: 32px;
        grid-template-columns: 1.5fr 1fr;
    }

    .droneqc-page h1 {
        font-size: 45px;
    }

    .droneqc-page .dq-hero-lead {
        font-size: 18px;
    }

    .droneqc-page .dq-problem-menu {
        padding: 23px 21px 13px;
    }

    .droneqc-page .dq-problem-menu>a {
        font-size: 14px;
        padding: 22px 0;
    }

    .droneqc-page .dq-actions {
        gap: 17px;
    }

    .droneqc-page .dq-button {
        font-size: 13px;
    }

    .droneqc-page .dq-service {
        gap: 42px;
        grid-template-columns: .85fr 1.15fr;
    }

    .droneqc-page .dq-ownership-grid {
        gap: 40px;
    }

    .droneqc-page .dq-ownership-band h2 {
        font-size: 33px;
    }

    .droneqc-page .dq-plan {
        padding: 24px 19px;
    }

    .droneqc-page .dq-team-path {
        grid-template-columns: 1fr 1.8fr;
    }

    .droneqc-page .dq-team-path .dq-text-link {
        grid-column: 2;
    }

    .droneqc-page .dq-contact-grid {
        gap: 55px;
    }

    .droneqc-page .dq-contact-section h2 {
        font-size: 36px;
    }
}

@media (max-width:760px) {
    .droneqc-page .dq-hero-grid {
        grid-template-columns: 1fr;
        gap: 35px;
        padding-top: 43px;
        padding-bottom: 43px;
    }

    .droneqc-page .dq-hero-copy {
        max-width: 630px;
    }

    .droneqc-page h1 {
        font-size: clamp(35px,6.2vw,47px);
    }

    .droneqc-page .dq-hero-lead {
        font-size: 18px;
    }

    .droneqc-page .dq-problem-menu {
        padding: 22px 24px 13px;
    }

    .droneqc-page .dq-problem-menu>a {
        padding: 18px 0;
        grid-template-columns: 24px 1fr 18px;
        font-size: 16px;
    }

    .droneqc-page .dq-problem-menu br {
        display: none;
    }

    .droneqc-page .dq-problem-menu .dq-eyebrow {
        font-size: 10px;
    }

    .droneqc-page .dq-section-space {
        padding-top: 49px;
        padding-bottom: 50px;
    }

    .droneqc-page .dq-section-intro {
        margin-bottom: 29px;
    }

    .droneqc-page h2 {
        font-size: 33px;
    }

    .droneqc-page .dq-section-intro br {
        display: none;
    }

    .droneqc-page .dq-service {
        grid-template-columns: 1fr;
        gap: 21px;
        padding: 30px 0;
    }

    .droneqc-page .dq-service h3 {
        font-size: 29px;
    }

    .droneqc-page .dq-service h3 br {
        display: none;
    }

    .droneqc-page .dq-section-num {
        margin-bottom: 12px;
    }

    .droneqc-page .dq-service-detail>p {
        font-size: 15px;
    }

    .droneqc-page .dq-ownership-band {
        padding: 43px 0;
    }

    .droneqc-page .dq-ownership-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .droneqc-page .dq-ownership-band h2 {
        font-size: 32px;
    }

    .droneqc-page .dq-ownership-list {
        padding-left: 0;
        border-left: 0;
    }

    .droneqc-page .dq-ownership-list li {
        font-size: 18px;
    }

    .droneqc-page .dq-plans {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .droneqc-page .dq-plan {
        padding: 25px;
    }

    .droneqc-page .dq-plan-type {
        font-size: 10px;
    }

    .droneqc-page .dq-plan .dq-plan-price {
        min-height: 0;
        margin-bottom: 12px;
    }

    .droneqc-page .dq-plan>p:not(.dq-plan-type):not(.dq-plan-price) {
        font-size: 15px;
    }

    .droneqc-page .dq-plan li {
        font-size: 14px;
    }

    .droneqc-page .dq-plan ul {
        margin-bottom: 20px;
    }

    .droneqc-page .dq-team-path {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .droneqc-page .dq-team-path .dq-text-link {
        grid-column: auto;
    }

    .droneqc-page .dq-steps {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .droneqc-page .dq-steps h3 {
        margin: 12px 0 9px;
    }

    .droneqc-page .dq-faq-section {
        grid-template-columns: 1fr;
        gap: 27px;
    }

    .droneqc-page .dq-contact-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .droneqc-page .dq-contact-section {
        padding: 45px 0;
    }

    .droneqc-page .dq-contact-section h2 {
        font-size: 33px;
    }

    .droneqc-page .dq-contact-section aside {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid #ffffff29;
        padding-top: 29px;
    }

    .droneqc-page .dq-contact-section aside ul {
        columns: 2;
        column-gap: 24px;
    }

    .droneqc-page .dq-contact-section aside li {
        break-inside: avoid;
        margin-top: 0;
    }

    .droneqc-page .dq-contact-section h2 br {
        display: none;
    }
}

@media (max-width:420px) {
    .droneqc-page .dq-wrap {
        width: calc(100% - 36px);
    }

    .droneqc-page .dq-hero h1 {
        font-size: 34px;
        letter-spacing: -.045em;
    }

    .droneqc-page .dq-hero-lead br {
        display: none;
    }

    .droneqc-page .dq-hero-lead {
        font-size: 17px;
    }

    .droneqc-page .dq-hero-support {
        font-size: 15px;
    }

    .droneqc-page .dq-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .droneqc-page .dq-button {
        padding: 13px 15px;
        font-size: 12px;
        gap: 12px;
    }

    .droneqc-page .dq-reassurance {
        font-size: 11px;
    }

    .droneqc-page .dq-problem-menu {
        padding: 20px 19px 12px;
    }

    .droneqc-page .dq-problem-menu>a {
        font-size: 14px;
        gap: 7px;
    }

    .droneqc-page .dq-problem-menu .dq-eyebrow {
        font-size: 9px;
    }

    .droneqc-page .dq-ownership-band h2 {
        font-size: 29px;
    }

    .droneqc-page h2 {
        font-size: 30px;
    }

    .droneqc-page .dq-service h3 {
        font-size: 27px;
    }

    .droneqc-page .dq-contact-section h2 {
        font-size: 31px;
    }

    .droneqc-page .dq-contact-section aside ul {
        columns: 1;
    }
}

@media (prefers-reduced-motion:reduce) {
    .droneqc-page .dq-button {
        transition: none;
    }
}

/* Leave room for the shared fixed navigation when following an ad or page anchor. */
.droneqc-page [id] {
    scroll-margin-top: 96px;
}

.droneqc-page .dq-anchor-alias {
    display: block;
    height: 0;
}

.droneqc-page button.dq-button {
    font-family: inherit;
    cursor: pointer;
}

.droneqc-page button:focus-visible {
    outline: 3px solid var(--green-ink);
    outline-offset: 5px;
}

.droneqc-page .dq-contact-section :is(a, button):focus-visible {
    outline-color: var(--green);
}


/* ==========================================================================
   Homepage — September 2026 redesign (scoped to .mc-home)
   --------------------------------------------------------------------------
   Micantis blue grounds for the hero, the showcase and the closing CTA; beige
   paper for the middle of the page. One accent (--mc-accent, with -bright for
   text on blue) marks the hero payoff line, live state and the alert in the
   product scenes, and the savings figures in the ROI calculator — nothing else. Rules are prefixed .mc-page.mc-home so
   they win ties against the shared .mc-page / .mc-page--warm rules above.
   Behaviour (showcase, FAQ) lives in wwwroot/js/home.js.
   ========================================================================== */

.mc-page.mc-home {
    --hv-bg: var(--mc-beige);
    --hv-surface: #FFFFFF;
    --hv-text: #1A2133;
    --hv-muted: #5B6478;
    --hv-border: rgba(26, 33, 51, 0.10);
    --hv-border-strong: rgba(26, 33, 51, 0.18);
    --hv-accent: var(--micantis-primary-dark);
    --hv-accent-soft: rgba(85, 109, 175, 0.10);
    --mc-blue-tint: #EEF1F9;
    background: var(--hv-bg);
    color: var(--hv-text);
    font-family: var(--mc-font-sans);
}

/* ----- shared type ----- */
.mc-page.mc-home .section-eyebrow {
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--hv-accent);
    margin-bottom: 0.9rem;
}

.mc-page.mc-home .section-title {
    font-size: clamp(1.9rem, 3.4vw, 2.9rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.08;
    color: var(--hv-text);
    margin-bottom: 0.75rem;
    text-wrap: balance;
}

/* ----- buttons ----- */
.mc-page.mc-home .btn-request-demo {
    font-size: 1rem !important;
    font-weight: 600 !important;
    padding: 0.7rem 1.4rem !important;
    letter-spacing: -0.005em;
}

.mc-page.mc-home .btn-request-demo.mc-btn-light {
    background: #fff !important;
    color: var(--micantis-primary-dark) !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.18) !important;
}

.mc-page.mc-home .btn-request-demo.mc-btn-light:hover,
.mc-page.mc-home .btn-request-demo.mc-btn-light:focus {
    background: #F3F5FB !important;
    color: var(--mc-blue-ink) !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.26) !important;
}

/* ----- blue grounds (hero + closing CTA) ----- */
.mc-page.mc-home .home-hero,
.mc-page.mc-home .cta-section.home-cta {
    color: #fff;
    background:
        radial-gradient(70% 90% at 100% 0%, rgba(116, 137, 198, 0.45), transparent 60%),
        radial-gradient(45% 55% at 0% 100%, rgba(85, 109, 175, 0.40), transparent 60%),
        linear-gradient(135deg, #2B3862 0%, #3A4A7A 55%, #4E64A6 100%);
    border: 0;
}

/* ----- hero ----- */
.mc-page.mc-home .home-hero {
    padding: clamp(64px, 8.5vw, 108px) 0 clamp(24px, 3vw, 40px);
    /* Runs top-to-bottom and lands on the showcase's starting navy (#2A3660),
       so the hero and "Micantis, at work" read as one continuous ground. */
    background:
        radial-gradient(70% 80% at 100% 0%, rgba(116, 137, 198, 0.42), transparent 60%),
        radial-gradient(45% 55% at 0% 30%, rgba(85, 109, 175, 0.30), transparent 60%),
        linear-gradient(180deg, #3A4A7A 0%, #2E3B68 70%, #2A3660 100%);
}

.mc-page.mc-home .home-hero-title {
    font-size: clamp(2.15rem, 4.1vw, 3.3rem);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -0.035em;
    color: #fff;
    margin: 0 0 1.6rem;
}

.mc-page.mc-home .home-hero-line { display: block; text-wrap: balance; }
.mc-page.mc-home .home-hero-line + .home-hero-line { margin-top: 0.1em; }
.mc-page.mc-home .home-hero-line-accent { color: var(--mc-accent); }

.mc-page.mc-home .home-hero-sub {
    font-size: 1.12rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
    max-width: 37rem;
    margin: 0;
}

.mc-page.mc-home .home-hero-lead { display: block; color: #fff; font-weight: 600; margin-bottom: 0.4rem; }
.mc-page.mc-home .home-hero-actions { margin-top: 1.9rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* "Micantis empowers" card — the white object on the blue ground */
.mc-page.mc-home .home-pipeline-mini {
    background: #fff;
    border: 0;
    border-radius: 16px;
    padding: 1.5rem 1.6rem 1.15rem;
    display: flex;
    flex-direction: column;
    color: var(--hv-text);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.30), 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.mc-page.mc-home .home-pipeline-mini-eyebrow {
    font-family: var(--mc-font-sans);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--hv-muted);
    margin: 0 0 0.35rem;
    padding: 0;
    border: 0;
}

.mc-page.mc-home .home-pipeline-step {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 0.7rem;
    margin: 0 -0.7rem;
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
    transition: background 0.18s ease;
}

.mc-page.mc-home .home-pipeline-step:hover,
.mc-page.mc-home .home-pipeline-step:focus-visible {
    background: var(--hv-accent-soft);
    color: inherit;
    text-decoration: none;
}

.mc-page.mc-home .home-pipeline-step-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--mc-blue-tint);
    color: var(--micantis-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.mc-page.mc-home .home-pipeline-step-meta { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.mc-page.mc-home .home-pipeline-step-title { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; color: var(--hv-text); line-height: 1.25; }
.mc-page.mc-home .home-pipeline-step-detail { font-size: 0.86rem; line-height: 1.45; color: var(--hv-muted); }
.mc-page.mc-home .home-pipeline-step-arrow { color: var(--micantis-primary); font-size: 0.95rem; opacity: 0.55; transition: transform 0.2s ease, opacity 0.2s ease; }
.mc-page.mc-home .home-pipeline-step:hover .home-pipeline-step-arrow { transform: translateX(3px); opacity: 1; }

.mc-page.mc-home .home-pipeline-mini-divider {
    display: flex;
    justify-content: center;
    margin: 0.5rem 0 0.2rem;
    padding-top: 0.8rem;
    border: 0;
    background: linear-gradient(to right, transparent, var(--hv-border) 48px, var(--hv-border) calc(100% - 48px), transparent) no-repeat top / 100% 1px;
    font-family: var(--mc-font-sans);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--hv-muted);
}

@media (max-width: 991.98px) {
    .mc-page.mc-home .home-pipeline-mini { margin-top: 0.5rem; }
}

/* ----- showcase: "Micantis, at work" ----- */
.mc-page.mc-home .home-showcase {
    position: relative;
    overflow: hidden;
    padding: clamp(16px, 2vw, 32px) 0 clamp(48px, 6vw, 72px);
    color: #fff;
    background:
        radial-gradient(60% 55% at 85% 62%, rgba(85, 109, 175, 0.42), transparent 65%),
        linear-gradient(180deg, #2A3660 0%, #1F2A4D 100%);
}

.mc-page.mc-home .home-showcase .section-eyebrow { color: rgba(255, 255, 255, 0.62); }

.mc-page.mc-home .mcs-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.mc-page.mc-home .mcs-title {
    font-size: clamp(1.6rem, 2.8vw, 2.25rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.04;
    color: #fff;
    margin: 0;
}

.mc-page.mc-home .mcs-arrows { display: flex; gap: 0.6rem; }

.mc-page.mc-home .mcs-nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: transparent;
    color: #fff;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.mc-page.mc-home .mcs-nav-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.5); }

.mc-page.mc-home .mcs-nav-btn:focus-visible,
.mc-page.mc-home .mcs-play:focus-visible,
.mc-page.mc-home .mcs-dot:focus-visible { outline: 2px solid var(--mc-accent); outline-offset: 2px; }

.mc-page.mc-home .mcs-rail { position: relative; }
.mc-page.mc-home .mcs-track { position: relative; transition: height 0.5s cubic-bezier(0.65, 0, 0.35, 1); }

/* Before the script runs, the cards simply stack. */
.mc-page.mc-home .mcs-track:not(.is-ready) .mcs-card { position: relative; margin: 0 auto 16px; opacity: 1; }

.mc-page.mc-home .mcs-card {
    position: absolute;
    top: 0;
    left: 50%;
    width: min(82%, 1000px);
    transform: translateX(-50%);
    transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.7s ease;
    will-change: transform;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    padding: clamp(1.4rem, 4vw, 3.25rem);
    border-radius: 22px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    opacity: 0.35;
    cursor: pointer;
}

.mc-page.mc-home .mcs-card.is-active { opacity: 1; cursor: default; }
.mc-page.mc-home .mcs-copy { display: flex; flex-direction: column; gap: 1.1rem; }

.mc-page.mc-home .mcs-kicker {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.13);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mc-page.mc-home .mcs-card h3 {
    font-size: clamp(1.55rem, 2.8vw, 2.5rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: #fff;
    margin: 0;
    text-wrap: balance;
}

.mc-page.mc-home .mcs-card p {
    font-size: 1.05rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
    text-wrap: pretty;
}

.mc-page.mc-home .mcs-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-start;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    padding-bottom: 2px;
    transition: border-color 0.18s ease;
}

.mc-page.mc-home .mcs-link:hover { color: #fff; border-color: #fff; text-decoration: none; }
.mc-page.mc-home .mcs-link i { font-size: 0.85em; }

.mc-page.mc-home .mcs-scene { min-width: 0; aspect-ratio: 1 / 0.96; overflow: visible; }

.mc-page.mc-home .mcs-foot { display: flex; justify-content: center; align-items: center; gap: 0.75rem; margin-top: 2.5rem; }

.mc-page.mc-home .mcs-dots {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.mc-page.mc-home .mcs-dot {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    border: 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.28);
    overflow: hidden;
    cursor: pointer;
    transition: width 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.mc-page.mc-home .mcs-dot.is-active { width: 48px; }
.mc-page.mc-home .mcs-dot-fill { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--micantis-primary-light); transition: width 0.1s linear; }

.mc-page.mc-home .mcs-play {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.mc-page.mc-home .mcs-play:hover { background: rgba(255, 255, 255, 0.18); }

/* Product scenes — a light app window on the blue card. Tokens mirror the
   Micantis app (light chrome, blue accent); ramps run 100 = darkest → 900 = lightest. */
.mc-page.mc-home .mcs-scene {
    --sc-bg: #F3F4F6;
    --sc-surface: #FFFFFF;
    --sc-text: #1A2133;
    --sc-muted: #5B6478;
    --sc-divider: rgba(26, 33, 51, 0.12);
    --sc-accent: #556DAF;
    --sc-accent-100: #1F2A4D;
    --sc-accent-200: #2E3D6B;
    --sc-accent-300: #3A4A7A;
    --sc-accent-400: #556DAF;
    --sc-accent-500: #7489C6;
    --sc-accent-600: #98A8D8;
    --sc-accent-700: #C3CCE9;
    --sc-accent-800: #E3E8F5;
    --sc-accent-900: #EEF1F9;
    --sc-n-100: #1A2133;
    --sc-n-200: #2F3648;
    --sc-n-300: #4A5265;
    --sc-n-400: #6B7387;
    --sc-n-500: #8C93A5;
    --sc-n-600: #ADB3C2;
    --sc-n-700: #CDD1DC;
    --sc-n-800: #E2E5EC;
    --sc-n-900: #EEF0F4;
    --sc-shadow-sm: 0 0 0 1px rgba(26, 33, 51, 0.08);
    --sc-shadow-md: 0 0 0 1px rgba(26, 33, 51, 0.08), 0 12px 32px rgba(15, 23, 42, 0.22);
    /* Accent usages inside the scenes (live dots, the flagged cell, the spec highlight) follow
       --mc-accent. The alert bubble is deliberately orange so it reads as a warning. */
    --sc-hot: var(--mc-accent);
    --sc-highlight: rgba(76, 194, 110, 0.45);
    --sc-alert-fill: #FFF3E0;
    --sc-alert-edge: #FFB340;
    --sc-alert-text: #7A3E00;
    --sc-danger: #D14343;
    --sc-danger-soft: rgba(209, 67, 67, 0.12);
    color: var(--sc-text);
    text-align: left;
    cursor: default;
}

.mc-page.mc-home .mcs-frame {
    width: 100%;
    background: var(--sc-surface);
    border-radius: 18px;
    box-shadow: var(--sc-shadow-md);
    overflow: hidden;
    color: var(--sc-text);
    font-family: var(--mc-font-sans);
    line-height: 1.4;
}

.mc-page.mc-home .mcs-frame-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--sc-divider);
    font-size: 12px;
    color: var(--sc-muted);
}

.mc-page.mc-home .mcs-frame-dot { width: 7px; height: 7px; border-radius: 4px; background: var(--sc-hot); animation: mcPulse 1.6s ease-in-out infinite; }

.mc-page.mc-home .mcs-frame-body {
    padding: 22px;
    aspect-ratio: 1 / 0.82;
    position: relative;
    display: flex;
    flex-direction: column;
    container-type: inline-size;
    font-size: 12px;
}

.mc-page.mc-home .mcs-frame i.bi { line-height: 1; }

.mc-page.mc-home .mcs-tag {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 0.02em;
    padding: 3px 10px;
    border-radius: 6px;
    white-space: nowrap;
}

.mc-page.mc-home .mcs-tag--accent { background: var(--sc-accent-800); color: var(--sc-accent-100); }
.mc-page.mc-home .mcs-tag--neutral { background: var(--sc-n-800); color: var(--sc-n-100); }
.mc-page.mc-home .mcs-tag--danger { background: var(--sc-danger-soft); color: var(--sc-danger); border: 1px solid var(--sc-danger); padding: 2px 9px; }

@keyframes mcIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes mcFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mcOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes mcDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mcLane { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes mcGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes mcScaleX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mcScan { 0% { top: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes mcDragFile {
    0%, 22% { left: 6%; top: 8%; transform: scale(1) rotate(0); }
    32% { left: 8%; top: 12%; transform: scale(1.06) rotate(-4deg); }
    78% { left: 30%; top: 58%; transform: scale(0.92) rotate(-2deg); opacity: 1; }
    100% { left: 30%; top: 58%; transform: scale(0.8); opacity: 0; }
}
@keyframes mcDropGlow { 0% { border-color: var(--sc-divider); box-shadow: none; } 100% { border-color: var(--sc-accent); box-shadow: 0 0 18px rgba(85, 109, 175, 0.35); } }
@keyframes mcPulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .mc-page.mc-home .mcs-card { transition: opacity 0.3s ease; }
}

/* ----- ROI calculator (markup + logic unchanged; this is the reskin) ----- */
.mc-page.mc-home .roi-calc {
    background: var(--hv-bg);
    border: 0;
    padding: clamp(64px, 8.5vw, 104px) 0 clamp(48px, 6vw, 80px);
}

.mc-page.mc-home .roi-calc .section-title { margin-bottom: 0.6rem; }
.mc-page.mc-home .roi-calc-intro { font-size: 1.05rem; color: var(--hv-muted); max-width: 44rem; margin: 0 0 1.6rem; }
.mc-page.mc-home .roi-tabs-control { display: flex; justify-content: flex-end; align-items: center; margin: 0 0 0.6rem; }

@media (min-width: 992px) {
    .mc-page.mc-home .roi-tabs-control { margin-top: -2.9rem; }
}

.mc-page.mc-home .roi-switch { display: inline-flex; align-items: center; gap: 0.55rem; cursor: pointer; user-select: none; }
.mc-page.mc-home .roi-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mc-page.mc-home .roi-switch-track { position: relative; width: 42px; height: 23px; border-radius: 999px; background: #CDD1DC; transition: background 0.22s ease; flex-shrink: 0; }
.mc-page.mc-home .roi-switch-thumb { position: absolute; top: 2.5px; left: 2.5px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.35); transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1); }
.mc-page.mc-home .roi-switch input:checked + .roi-switch-track { background: var(--micantis-primary); }
.mc-page.mc-home .roi-switch input:checked + .roi-switch-track .roi-switch-thumb { transform: translateX(19px); }
.mc-page.mc-home .roi-switch input:focus-visible + .roi-switch-track { box-shadow: 0 0 0 3px rgba(85, 109, 175, 0.35); }
.mc-page.mc-home .roi-switch-label { font-size: 0.82rem; font-weight: 600; color: var(--hv-muted); }

.mc-page.mc-home .roi-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-bottom: 1.75rem; }

.mc-page.mc-home .roi-tab {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    width: 100%;
    text-align: left;
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid var(--hv-border);
    background: var(--hv-surface);
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.mc-page.mc-home .roi-tab:hover { border-color: var(--hv-border-strong); }

.mc-page.mc-home .roi-tab-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: var(--mc-blue-tint);
    color: var(--micantis-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    transition: background 0.18s ease, color 0.18s ease;
}

.mc-page.mc-home .roi-tab-meta { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.mc-page.mc-home .roi-tab-title { font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; color: var(--hv-text); line-height: 1.2; }
.mc-page.mc-home .roi-tab-detail { font-size: 0.8rem; line-height: 1.4; color: var(--hv-muted); }
.mc-page.mc-home .roi-tab-arrow { display: none; }
.mc-page.mc-home .roi-tab.is-active { border-color: var(--micantis-primary); background: var(--mc-blue-tint); box-shadow: 0 0 0 1px var(--micantis-primary); }
.mc-page.mc-home .roi-tab.is-active .roi-tab-icon { background: var(--micantis-primary); color: #fff; }

@media (max-width: 991.98px) {
    .mc-page.mc-home .roi-tabs { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 479.98px) {
    .mc-page.mc-home .roi-tabs { grid-template-columns: 1fr; }
}

.mc-page.mc-home .roi-inputs-col { display: flex; flex-direction: column; }

.mc-page.mc-home .roi-panel {
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 14px;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 1px 2px rgba(26, 33, 51, 0.04);
}

.mc-page.mc-home .roi-pane { margin-bottom: 1rem; }
.mc-page.mc-home .roi-pane:last-child { margin-bottom: 0; }
.mc-page.mc-home .roi-pane-title { display: flex; align-items: center; gap: 0.55rem; font-size: 1.08rem; font-weight: 600; letter-spacing: -0.01em; color: var(--hv-text); margin: 0 0 1.1rem; }
.mc-page.mc-home .roi-pane-title i { color: var(--micantis-primary); }
.mc-page.mc-home .roi-slider { margin-bottom: 1.15rem; }
.mc-page.mc-home .roi-slider:last-child { margin-bottom: 0; }
.mc-page.mc-home .roi-slider-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.4rem; }
.mc-page.mc-home .roi-slider-head label { font-size: 0.95rem; font-weight: 500; color: var(--hv-text); margin: 0; line-height: 1.4; }
.mc-page.mc-home .roi-slider-value { font-weight: 600; color: var(--micantis-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mc-page.mc-home .roi-unit { font-weight: 500; color: var(--hv-muted); font-size: 0.85em; }
.mc-page.mc-home .roi-info { color: #A0A7B8; font-size: 0.85em; cursor: help; }
.mc-page.mc-home .roi-info:hover { color: var(--micantis-primary); }
.mc-page.mc-home .roi-translate { margin-top: 0.45rem; font-size: 0.8rem; color: var(--hv-muted); text-align: right; font-variant-numeric: tabular-nums; }

.mc-page.mc-home .roi-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; background: #E2E5EC; outline: none; cursor: pointer; margin: 0; }
.mc-page.mc-home .roi-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--micantis-primary); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.25); cursor: pointer; }
.mc-page.mc-home .roi-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--micantis-primary); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.25); cursor: pointer; }
.mc-page.mc-home .roi-range:focus-visible { box-shadow: 0 0 0 3px rgba(85, 109, 175, 0.35); }

.mc-page.mc-home .roi-pane-sum {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin: 1.4rem -1.75rem -1.5rem;
    padding: 0.85rem 1.75rem;
    border-radius: 0 0 13px 13px;
    background: var(--mc-blue-tint);
    color: var(--hv-text);
    font-variant-numeric: tabular-nums;
}

.mc-page.mc-home .roi-pane-sum-label { font-weight: 600; font-size: 0.92rem; color: var(--micantis-primary-dark); }
.mc-page.mc-home .roi-pane-sum strong { font-weight: 600; font-size: 1.05rem; }

.mc-page.mc-home .roi-result-card {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    padding: 1.5rem 1.6rem;
    color: #fff;
    background: linear-gradient(170deg, #3A4A7A 0%, #26325A 100%);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
}

@media (min-width: 992px) {
    .mc-page.mc-home .roi-result-card { position: sticky; top: 92px; }
}

.mc-page.mc-home .roi-breakdown-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.3rem 0; font-size: 0.95rem; color: rgba(255, 255, 255, 0.82); }
.mc-page.mc-home .roi-breakdown-row strong { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.mc-page.mc-home .roi-result-card .roi-unit { color: rgba(255, 255, 255, 0.55); }
.mc-page.mc-home .roi-total-block { padding-top: 0.9rem; margin-top: 0.4rem; border-top: 1px solid rgba(255, 255, 255, 0.16); margin-bottom: 0.9rem; }
.mc-page.mc-home .roi-total-block--ref { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: 0.9rem; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.mc-page.mc-home .roi-result-label { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.mc-page.mc-home .roi-result-total { font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; margin: 0; font-variant-numeric: tabular-nums; }
.mc-page.mc-home .roi-reduction { padding-top: 0.2rem; }
.mc-page.mc-home .roi-reduction .roi-slider { margin-bottom: 1.1rem; }
.mc-page.mc-home .roi-reduction .roi-slider-head label,
.mc-page.mc-home .roi-payback .roi-slider-head label { color: rgba(255, 255, 255, 0.9); font-weight: 500; }
.mc-page.mc-home .roi-reduction .roi-slider-value,
.mc-page.mc-home .roi-payback .roi-slider-value { color: #fff; }
.mc-page.mc-home .roi-result-card .roi-range { background: rgba(255, 255, 255, 0.22); }
.mc-page.mc-home .roi-reduction .roi-range::-webkit-slider-thumb { background: var(--mc-accent); border-color: #fff; }
.mc-page.mc-home .roi-reduction .roi-range::-moz-range-thumb { background: var(--mc-accent); border-color: #fff; }
.mc-page.mc-home .roi-result-card .roi-range:focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35); }
.mc-page.mc-home .roi-reduce-note { margin-top: 0.4rem; font-size: 0.8rem; color: rgba(255, 255, 255, 0.62); text-align: right; font-variant-numeric: tabular-nums; }
.mc-page.mc-home .roi-reduce-note + .roi-reduce-note { margin-top: 0.12rem; }
.mc-page.mc-home .roi-summary { margin-top: 0.4rem; padding-top: 0.9rem; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.mc-page.mc-home .roi-summary-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.22rem 0; }
.mc-page.mc-home .roi-summary-label { font-size: 0.95rem; color: rgba(255, 255, 255, 0.82); }
.mc-page.mc-home .roi-summary-val { font-weight: 600; font-size: 1.05rem; color: #fff; font-variant-numeric: tabular-nums; }
.mc-page.mc-home .roi-savings { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.mc-page.mc-home .roi-savings-label { display: block; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mc-accent-bright); margin-bottom: 0.1rem; }
.mc-page.mc-home .roi-savings-amount { display: block; font-size: 2.5rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; color: var(--mc-accent); font-variant-numeric: tabular-nums; }
.mc-page.mc-home .roi-exposure { margin-top: 0.7rem; }
.mc-page.mc-home .roi-exposure-note { display: flex; gap: 0.4rem; align-items: flex-start; font-size: 0.82rem; line-height: 1.45; color: rgba(255, 255, 255, 0.7); }
.mc-page.mc-home .roi-exposure-note i { color: var(--mc-accent-bright); margin-top: 0.1rem; }
.mc-page.mc-home .roi-payback { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.mc-page.mc-home .roi-payback-title { display: block; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); margin-bottom: 0.8rem; }
.mc-page.mc-home .roi-range--cost { background: linear-gradient(to right, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 9.48%, rgba(255, 255, 255, 0.2) 9.48%, rgba(255, 255, 255, 0.2) 100%); }
.mc-page.mc-home .roi-payback-enterprise { display: none; margin-top: 0.5rem; font-size: 0.82rem; color: #FFD59A; }
.mc-page.mc-home .roi-payback-enterprise.show { display: block; }
.mc-page.mc-home .roi-payback-result { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 0.95rem; padding-top: 0.9rem; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.mc-page.mc-home .roi-payback-label { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mc-accent-bright); }
.mc-page.mc-home .roi-payback-value { font-size: 1.7rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; color: var(--mc-accent); font-variant-numeric: tabular-nums; }
.mc-page.mc-home .roi-payback-sub { margin-top: 0.35rem; font-size: 0.85rem; color: rgba(255, 255, 255, 0.62); text-align: right; }
.mc-page.mc-home .roi-result-card .btn-request-demo { width: 100%; margin-top: 1.1rem; }
.mc-page.mc-home .roi-result-logo { text-align: center; margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.mc-page.mc-home .roi-result-logo img { height: 28px; opacity: 0.85; filter: brightness(0) invert(1); }
.mc-page.mc-home .roi-calc-disclaimer { font-size: 0.8rem; color: var(--hv-muted); margin: 1rem 0 0; }

/* ROI entrance — added by the script only when motion is allowed, so without it everything is simply visible */
.mc-page.mc-home .roi-pending .roi-inputs-col,
.mc-page.mc-home .roi-pending .roi-result-card { opacity: 0; }
.mc-page.mc-home .roi-pending .roi-inputs-col { transform: translateY(28px); }
.mc-page.mc-home .roi-pending .roi-result-card { transform: translateY(48px) scale(0.97); filter: blur(8px); }
.mc-page.mc-home .roi-pending.roi-revealed .roi-inputs-col { opacity: 1; transform: none; transition: opacity 0.9s ease, transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1); }
.mc-page.mc-home .roi-pending.roi-revealed .roi-result-card { opacity: 1; transform: none; filter: none; transition: opacity 1s ease 0.25s, transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s, filter 1s ease 0.25s; }

/* ----- FAQ ----- */
.mc-page.mc-home .home-faq {
    padding: clamp(64px, 8.5vw, 104px) 0;
    background: linear-gradient(180deg, var(--hv-bg), #FBFAF7);
    border-top: 1px solid var(--hv-border);
}

.mc-page.mc-home .home-faq-grid { display: flex; flex-wrap: wrap; gap: 3rem 4rem; align-items: flex-start; }
.mc-page.mc-home .home-faq-intro { flex: 1 1 280px; max-width: 400px; }
.mc-page.mc-home .home-faq-lead { font-size: 1rem; line-height: 1.55; color: var(--hv-muted); margin: 0 0 1.5rem; }
.mc-page.mc-home .home-faq-list { flex: 2 1 480px; min-width: 0; }

.mc-page.mc-home .home-faq-item {
    background: linear-gradient(to right, transparent, var(--hv-border) 48px, var(--hv-border) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
}

.mc-page.mc-home .home-faq-q {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding: 1.35rem 0;
    background: none;
    border: 0;
    text-align: left;
    font: inherit;
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--hv-text);
    cursor: pointer;
}

.mc-page.mc-home .home-faq-q i { color: var(--micantis-primary); font-size: 1rem; flex: none; }
.mc-page.mc-home .home-faq-q .home-faq-icon-close { display: none; }
.mc-page.mc-home .home-faq-item.is-open .home-faq-q .home-faq-icon-open { display: none; }
.mc-page.mc-home .home-faq-item.is-open .home-faq-q .home-faq-icon-close { display: inline-block; }
.mc-page.mc-home .home-faq-q:focus-visible { outline: 2px solid var(--micantis-primary); outline-offset: 4px; border-radius: 4px; }
.mc-page.mc-home .home-faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.mc-page.mc-home .home-faq-a > div { overflow: hidden; min-height: 0; }
.mc-page.mc-home .home-faq-item.is-open .home-faq-a { grid-template-rows: 1fr; }
.mc-page.mc-home .home-faq-a p { margin: 0 0 0.7rem; padding-right: 3rem; font-size: 1rem; line-height: 1.65; color: var(--hv-muted); text-wrap: pretty; }
.mc-page.mc-home .home-faq-a p:last-child { margin-bottom: 1.5rem; }

@media (max-width: 575.98px) {
    .mc-page.mc-home .home-faq-q { font-size: 1.05rem; }
    .mc-page.mc-home .home-faq-a p { padding-right: 0; }
    .mc-page.mc-home .mcs-card { width: 88%; padding: 1.25rem 1rem 1.1rem; gap: 1.25rem; }
    .mc-page.mc-home .mcs-card h3 { font-size: 1.5rem; }
    .mc-page.mc-home .mcs-card p { font-size: 0.98rem; }
}

/* ----- closing CTA ----- */
.mc-page.mc-home .cta-section.home-cta { padding: clamp(80px, 10vw, 128px) 0; text-align: center; }
.mc-page.mc-home .home-cta .cta-title { font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.06; color: #fff; margin: 0 0 1rem; text-wrap: balance; }
.mc-page.mc-home .home-cta .cta-lead { font-size: 1.15rem; line-height: 1.55; color: rgba(255, 255, 255, 0.8); max-width: 40rem; margin: 0 auto 2rem; }
.mc-page.mc-home .home-cta .cta-actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }