/* ================================================================
   Expenditure — Responsive: landing page  (responsive-landing.css)
   Loaded AFTER the landing page's own <style> block so it can refine it.
     phone ≤ 576 · tablet 577–992 · laptop 993–1400 · desktop ≥ 1401
================================================================ */

/* never let the page scroll sideways */
html, body { overflow-x: clip; }
.ln-hero, .ln-section, .ln-nav-inner { max-width: 100%; }

/* ── tablet and below ──────────────────────────────────────────── */
@media (max-width: 992px) {
    .ln-nav-inner { padding: 0 1rem; }
    .ln-hamburger { min-width: 40px; min-height: 40px; justify-content: center; }
    .ln-mobile-menu { max-height: calc(var(--rs-vh, 1vh) * 100 - 64px); overflow-y: auto; }
    .ln-mobile-menu a { min-height: 44px; display: flex; align-items: center; }
    .ln-hero-inner > * { min-width: 0; }
    .ln-mockup-window { max-width: 100%; }
}

/* ── phones ────────────────────────────────────────────────────── */
@media (max-width: 576px) {
    .ln-nav-inner { height: 58px; gap: .5rem; padding: 0 .75rem; }
    .ln-brand { font-size: 1.05rem; gap: .5rem; min-width: 0; }
    .ln-nav-actions { gap: .4rem; }
    /* the CTA buttons live in the hamburger menu on phones, so the bar never overflows */
    .ln-nav-actions > .ln-btn { display: none; }
    .ln-hero { padding: 2.75rem 1rem 2.5rem; }
    .ln-hero-title { font-size: clamp(1.9rem, 9vw, 2.4rem); line-height: 1.12; }
    .ln-hero-trust { flex-wrap: wrap; gap: .5rem .9rem; }
    .ln-hero-actions, .ln-cta-actions { flex-direction: column; align-items: stretch; }
    .ln-hero-actions .ln-btn, .ln-cta-actions .ln-btn { width: 100%; justify-content: center; }
    .ln-dom-search { flex-direction: column; align-items: stretch; gap: .6rem; }
    .ln-dom-search .ln-dom-btn, .ln-dom-search .ln-dom-input { width: 100%; }
    .ln-stats-inner { gap: 1rem .5rem; }
    .ln-section { padding: 3rem 1rem; }
    .ln-footer-grid { gap: 1.5rem; }
}

/* ── large screens: keep the hero from stretching too wide ─────── */
@media (min-width: 1800px) {
    .ln-nav-inner, .ln-hero-inner, .ln-section > * { max-width: 1320px; }
}