/* Phone-first overrides. Last stylesheet wins. */

@media (max-width: 767px) {
    html,
    body.site-refactor {
        overflow-x: hidden;
        max-width: 100%;
    }

    .sticky-demo-cta,
    .sticky-demo-cta.visible {
        display: none !important;
    }

    .mobile-brand {
        display: inline-flex;
        align-items: center;
        padding: 0.35rem 0.15rem;
        color: #e8e6e3;
        font-family: var(--font-display);
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        text-decoration: none;
    }

    .site-header.site-header--product {
        padding-top: env(safe-area-inset-top);
        background: rgba(11, 15, 25, 0.92);
        border-bottom: 1px solid #1F2937;
    }

    .site-header--product .header-nav-hero {
        justify-content: space-between;
        min-height: 3.25rem;
        padding: 0 0.85rem;
    }

    .site-header--product #mobile-nav-toggle {
        margin-left: 0;
        margin-right: 0;
    }

    .mobile-nav-panel {
        background: rgba(7, 16, 24, 0.96) !important;
        border-top: 1px solid rgba(210, 205, 195, 0.35);
    }

    .hero-brand-corner {
        right: 0.75rem;
        bottom: 0.75rem;
    }

    .hero-video-container.hero-split {
        min-height: auto !important;
        max-height: none !important;
        padding: 5.25rem 1.15rem 2rem !important;
    }

    .hero-bg-video {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .hero-video-bg {
        background: #071018 url("../ASSETS/video/bus-driver-poster.jpg") center / cover no-repeat;
    }

    .hero-product .hero-video-overlay,
    .hero-video-overlay {
        background: linear-gradient(180deg, rgba(11, 15, 25, 0.62) 0%, rgba(11, 15, 25, 0.78) 100%);
    }

    .hero-intro,
    .hero-intro-copy,
    .hero-intro-copy p {
        max-width: 100%;
        text-align: left !important;
    }

    .site-refactor .hero-title {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        font-size: 1.65rem !important;
        line-height: 1.12 !important;
        letter-spacing: 0.01em !important;
        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;
        gap: 0.05em;
    }

    .site-refactor .hero-tagline {
        font-size: clamp(0.88rem, 3.8vw, 1.05rem) !important;
        white-space: normal !important;
        margin-top: 0.5rem !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: left;
        line-height: 1.28;
    }

    .hero-intro-copy p:not(.hero-guarantee) {
        margin-top: 0.65rem !important;
        font-size: 0.95rem !important;
        line-height: 1.42 !important;
    }

    .site-refactor .hero-subhead {
        text-align: left !important;
        max-width: 100%;
        margin: 0.5rem 0 0 !important;
        font-size: 0.95rem !important;
        line-height: 1.38 !important;
    }

    .site-refactor .hero-guarantee {
        text-align: left !important;
        max-width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
        letter-spacing: 0.04em;
        font-size: 0.68rem;
        line-height: 1.4;
    }

    .hero-intro-actions {
        width: 100%;
        max-width: none;
        margin-top: 0.95rem !important;
        gap: 0.55rem !important;
        align-items: stretch;
    }

    .hero-intro-actions > * {
        width: 100%;
        min-height: 48px;
        box-sizing: border-box;
    }

    .site-refactor .btn-tactical,
    .site-refactor .btn-secondary {
        overflow: visible;
        white-space: normal;
        letter-spacing: 0.06em;
        line-height: 1.22;
        text-align: center;
        max-width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .proof-strip {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
        padding: 0.9rem 1.15rem;
    }

    .proof-strip span {
        max-width: 100%;
        font-size: 0.62rem;
        letter-spacing: 0.06em;
        line-height: 1.35;
        text-align: left;
        white-space: normal;
    }

    .site-refactor .section-major,
    section.section-major {
        padding: 2.15rem 1.15rem !important;
    }

    .site-refactor h1,
    .site-refactor h2,
    .site-refactor h3,
    .operator-view-headline {
        max-width: 100%;
        overflow-wrap: normal;
        word-break: normal;
        letter-spacing: 0 !important;
    }

    .site-refactor h1 {
        font-size: 1.5rem !important;
        line-height: 1.15 !important;
    }

    .site-refactor h2,
    .operator-view-headline {
        font-size: 1.32rem !important;
        line-height: 1.18 !important;
        text-transform: none;
    }

    .operator-view-lead,
    .operator-view-caps li {
        font-size: 0.95rem !important;
        line-height: 1.42 !important;
    }

    .operator-view-caps {
        gap: 0.55rem;
    }

    .risk-card,
    .bento-card,
    .grant-dispatcher {
        padding: 1.1rem !important;
    }

    .bento-card h3,
    .risk-card h3 {
        font-size: 1.15rem !important;
    }

    .grounded-ticker {
        margin-bottom: 1.5rem;
    }

    .ticker-chip {
        font-size: 0.5rem;
        letter-spacing: 0.08em;
        margin: 0.28rem 0.4rem;
        padding: 0.16rem 0.45rem;
    }

    .site-modal {
        padding: 4.25rem 0.85rem 1.25rem;
    }

    .site-modal-panel {
        padding: 1.15rem;
    }

    .cookie-banner {
        padding: 0.75rem 1rem max(0.75rem, env(safe-area-inset-bottom));
    }

    .cookie-banner .max-w-4xl {
        flex-direction: column;
        text-align: left;
        gap: 0.65rem;
    }

    .site-refactor #footer {
        padding: 2.5rem 1.15rem 3rem !important;
    }

    .footer-cols {
        gap: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .footer-logo {
        max-height: 3.5rem;
        width: auto;
    }

    .footer-wordmark {
        height: auto;
        width: min(14rem, 100%);
        max-width: 14rem;
    }

    .demo-form input,
    .demo-form select,
    .demo-form textarea {
        font-size: 16px;
        width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 1023px) {
    .mobile-brand {
        display: inline-flex;
        align-items: center;
        padding: 0.35rem 0.15rem;
        color: #e8e6e3;
        font-family: var(--font-display);
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        text-decoration: none;
    }

    .sticky-demo-cta,
    .sticky-demo-cta.visible {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .mobile-brand {
        display: none !important;
    }
}