/* Global responsive safety layer for Factlabel v4 pages */
:root {
    --mobile-gutter: 1rem;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
video,
iframe,
canvas,
svg {
    max-width: 100%;
}

video {
    height: auto;
}

@media (max-width: 1024px) {
    .navbar {
        padding: 0.4rem 1rem !important;
        gap: 0.65rem !important;
    }

    .nav-brand-logo {
        height: 22px !important;
        width: auto;
    }

    .nav-right {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        margin-left: auto !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .nav-right::-webkit-scrollbar {
        display: none;
    }

    .nav-links {
        display: flex !important;
        align-items: center !important;
        gap: 1rem !important;
        white-space: nowrap !important;
        margin-right: 0 !important;
        flex: 0 0 auto;
    }

    .nav-links a {
        font-size: 0.82rem !important;
    }

    .btn-outline {
        padding: 0.35rem 0.85rem !important;
        font-size: 0.72rem !important;
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .btn-outline-jp {
        min-width: 2.9rem !important;
        padding: 0.35rem 0.85rem !important;
    }

    .hero,
    .about-hero,
    .product-hero,
    .page-hero,
    main,
    .section,
    .section-padding,
    .section-padding-tight,
    .feature-section,
    .cta-section,
    .content-section,
    .leadership-section,
    .contact-body {
        padding-left: var(--mobile-gutter) !important;
        padding-right: var(--mobile-gutter) !important;
    }

    .container {
        padding-left: var(--mobile-gutter) !important;
        padding-right: var(--mobile-gutter) !important;
    }

    .hero-top-info {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    .hero-title,
    .about-title,
    .page-title,
    .product-title {
        font-size: clamp(2.2rem, 12vw, 3.4rem) !important;
        line-height: 1.02 !important;
    }

    .hero-desc,
    .page-subtitle,
    .product-desc,
    .about-desc,
    .about-subdesc {
        font-size: 1rem !important;
    }

    .products-stage,
    .cards,
    .value-props,
    .info-grid,
    .leader-grid,
    .footer-links-grid,
    .section-grid,
    .contact-body,
    .form-row,
    .builder-layout {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    .feature-row,
    .feature-row:nth-child(even),
    .feature-block,
    .feature-block.reverse,
    .intro-section {
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

    .dashboard-mockup,
    .feature-visual,
    .slideshow,
    .intro-graphic {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 220px !important;
        height: auto !important;
    }

    .dashboard-mockup img,
    .feature-visual img,
    .slideshow img,
    .intro-graphic img,
    .video-box video,
    .video-wrap video {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }

    .builder-layout,
    .builder-sidebar {
        position: static !important;
        top: auto !important;
    }

    .module-card,
    .checklist-item,
    .card,
    .product-card {
        min-height: auto !important;
    }

    .footer-top,
    .footer-bottom {
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: flex-start !important;
    }
}

@media (max-width: 768px) {
    .navbar {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        align-items: center !important;
        gap: 0.5rem 0.65rem !important;
        padding: 0.5rem 0.85rem !important;
    }

    .nav-brand {
        min-width: 0;
    }

    .nav-brand-logo {
        height: 20px !important;
    }

    .nav-right {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto auto !important;
        align-items: center !important;
        gap: 0.45rem !important;
        overflow: visible !important;
    }

    .nav-links {
        min-width: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap !important;
        gap: 0.65rem !important;
        padding-bottom: 2px;
    }

    .nav-links a {
        flex: 0 0 auto;
        font-size: 0.78rem !important;
    }

    .btn-outline {
        padding: 0.33rem 0.66rem !important;
        font-size: 0.68rem !important;
        line-height: 1.2;
    }

    .btn-outline-jp {
        min-width: 2.55rem !important;
    }
}

@media (max-width: 480px) {
    :root {
        --mobile-gutter: 0.9rem;
    }

    .hero-title,
    .about-title,
    .page-title,
    .product-title {
        font-size: clamp(2rem, 13vw, 2.8rem) !important;
    }

    .mono {
        font-size: 0.74rem !important;
    }

    .btn-outline {
        padding: 0.32rem 0.72rem !important;
        font-size: 0.68rem !important;
    }

    .nav-links {
        gap: 0.75rem !important;
    }
}