/* ==========================================================
   ALI – shared mobile / tablet responsiveness layer.
   Linked LAST on every page so it wins over page stylesheets.
   Desktop (>1100px) is untouched.
   ========================================================== */

/* Never allow sideways scrolling */
html, body { max-width: 100%; overflow-x: clip; }
img, video, svg, iframe { max-width: 100%; }
input, select, textarea { max-width: 100%; }

/* ---------- Tablet & down ---------- */
@media (max-width: 1100px) {
    /* Hover accordions: always show their content (no hover on touch) */
    .service-row-body, .value-row-body, .sol-row-body, .focus-row-body {
        max-height: none !important;
        overflow: visible !important;
        padding: 0 20px 32px 0 !important;
    }
    .service-row-header, .value-row-header, .sol-row-header, .focus-row-header {
        padding-bottom: 16px !important;
    }
    .service-row:hover .service-row-header { padding: 32px 0 16px !important; }

    /* Home: sections that had no breakpoints */
    .about-section { grid-template-columns: 1fr !important; min-height: 0 !important; }
    .about-image-col { min-height: 320px; max-height: 420px; }
    .about-text-col { padding: 64px 6vw !important; }
    .services-section, .process-section { padding: 80px 0 !important; }
    .services-head { grid-template-columns: 1fr !important; gap: 24px !important; margin-bottom: 40px !important; padding-bottom: 32px !important; }
    .services-head h2, .process-head h2 { font-size: clamp(34px, 8vw, 56px) !important; letter-spacing: -1.5px !important; }
    .process-head { margin-bottom: 48px !important; }
    .process-timeline { grid-template-columns: 1fr 1fr !important; row-gap: 40px; }
    .cta-band { padding: 80px 0 !important; }
    .cta-band-inner { grid-template-columns: 1fr !important; gap: 36px !important; }
    .cta-band h2 { font-size: clamp(36px, 9vw, 60px) !important; line-height: 1.05 !important; }
}

@media (max-width: 1100px) {
    /* ----- Home hero: normal flow instead of absolute positioning ----- */
    .hero { display: flex !important; flex-direction: column !important; min-height: 100svh; height: auto !important; align-items: stretch !important; }
    .hero > .container {
        position: relative !important; left: auto !important; top: auto !important;
        transform: none !important; height: auto !important; width: 90% !important;
        margin: 0 auto !important; flex: 1 0 auto;
        padding-top: 130px !important; padding-bottom: 48px !important;
        justify-content: flex-end !important;
    }
    .hero-layout { padding: 0 !important; }
    .hero-content { padding-top: 0 !important; max-width: 100% !important; }
    .hero h1 { font-size: clamp(38px, 9vw, 76px) !important; letter-spacing: -1.5px !important; line-height: 1 !important; margin-bottom: 20px !important; }
    .hero p, .hero .p-hero { display: block !important; font-size: 16px !important; line-height: 1.7 !important; max-width: 100% !important; }
    .hero-tag { font-size: 10px !important; letter-spacing: 2px !important; margin-bottom: 18px !important; }
    .hero-buttons { display: flex !important; flex-wrap: wrap; gap: 12px; margin-top: 28px !important; }
    .hero-data-strip {
        position: relative !important; grid-template-columns: repeat(3, 1fr) !important;
        z-index: 5; bottom: auto !important;
    }
    .hero-data-cell { padding: 24px 3vw !important; }
    .hero-data-value { font-size: 28px !important; }

}

/* ---------- Phones ---------- */
@media (max-width: 767px) {
    .container { width: 90% !important; max-width: none; }
    .hero-buttons { flex-direction: column; }
    .hero-buttons a { width: 100%; text-align: center; justify-content: center; }
    .hero-data-strip { grid-template-columns: 1fr !important; }
    .hero-data-cell { padding: 20px 5vw !important; border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.08); }
    .hero-data-cell:last-child { border-bottom: none; }
    .terms-sidebar, .privacy-sidebar { display: none !important; }

    /* Services / process rows */
    .service-row-header { grid-template-columns: 40px 1fr 48px !important; gap: 14px !important; padding: 28px 0 14px !important; }
    .service-row-num { font-size: 28px !important; }
    .service-row-title { font-size: clamp(20px, 6vw, 26px) !important; min-width: 0; overflow-wrap: anywhere; }
    .service-row-body { padding: 0 0 28px 58px !important; }
    .process-timeline { grid-template-columns: 1fr !important; }
    .process-timeline::before { display: none; }
    .process-step { padding: 0 0 0 40px !important; }
    .process-step-dot { top: 6px !important; left: 0 !important; }

    /* Ticker + indicators section */
    .indicators-section { padding: 64px 0 !important; }
    .indicators-header { grid-template-columns: 1fr !important; gap: 20px !important; }

    /* Buttons / touch targets */
    .primary-btn, .secondary-btn, .cta-primary, .cta-secondary, .submit-btn, .nav-btn, button[type=submit] {
        min-height: 48px;
    }
    /* iOS zoom-on-focus: inputs at 16px */
    input, select, textarea { font-size: 16px !important; }

    /* Generic multi-column grids that stack */
    .form-row, .form-grid, .form-two-col, .field-row, .stats-grid, .contact-grid, .contact-layout,
    .apply-layout, .solution-grid, .solutions-grid, .values-grid, .principles-grid {
        grid-template-columns: 1fr !important;
    }

    /* Long-form legal / FAQ / fraud pages */
    .faq-layout, .terms-layout, .privacy-layout, .fraud-layout, .legal-layout {
        grid-template-columns: 1fr !important; gap: 40px !important;
    }
    [class*="sidebar"] { position: static !important; top: auto !important; width: 100% !important; max-width: 100% !important; }
    h1 { overflow-wrap: anywhere; }
    table { display: block; overflow-x: auto; }

    /* ----- Footer (every page) ----- */
    .footer-grid { flex-direction: column !important; gap: 32px !important; }
    .footer-nav-row {
        grid-template-columns: 1fr 1fr !important; gap: 14px 12px !important; text-align: left !important;
    }
    .footer-nav-row a { font-size: 13px !important; line-height: 1.4; display: block; padding: 6px 0; }
    .footer-bottom, .footer-legal { text-align: center; }
}

@media (max-width: 380px) {
    .footer-nav-row { grid-template-columns: 1fr !important; }
}

/* Touch devices: no hover-dependent affordances */
@media (hover: none) {
    .about-image-col:hover img { transform: none; }
}

/* FAQ: the chip bar above already provides topic navigation on phones */
@media (max-width: 767px) {
    .faq-sidebar { display: none !important; }
}

/* Sticky helpers: sit directly under the (shorter) mobile navbar, and
   un-stick side columns once the layout is single-column */
@media (max-width: 991px) {
    .faq-nav, .terms-nav, .privacy-nav { top: 64px !important; }
}
@media (max-width: 1100px) {
    .intro-left, .protect-heading-col, .philosophy-heading-col,
    .contact-side, .application-side, .terms-sidebar, .privacy-sidebar { position: static !important; top: auto !important; }
}