/* =========================================================================
   Responsive rules. Layouts are rearranged, not merely shrunk.
   ========================================================================= */

/* Large tablets / small laptops */
@media (max-width: 1080px) {
    h1 { font-size: 2.15rem; }
    .brand-name { font-size: 1.75rem; }
    .card-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero-grid { gap: 40px; }
    .sara-block { gap: 32px; padding: 32px; }
    .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .footer-brand { grid-column: 1 / -1; }
}

/* Intermediate laptop widths: same single-row navigation and font size, slightly tighter item spacing. */
@media (min-width: 901px) and (max-width: 1200px) {
    .nav-menu > li > a,
    .sub-toggle { padding-left: 11px; padding-right: 11px; }
}

/* Tablets: single-column content, collapsible navigation */
@media (max-width: 900px) {
    .section { padding: 56px 0; }
    .hero { padding: 44px 0 52px; }
    .hero-grid,
    .section-head-split,
    .update-grid,
    .sara-block,
    .faq-grid { grid-template-columns: minmax(0, 1fr); }
    .section-head-split { gap: 12px; }
    .faq-grid { gap: 28px; }
    .card-grid-3 { grid-template-columns: minmax(0, 1fr); }
    .cta-inner { flex-direction: column; align-items: flex-start; gap: 20px; }

    .brand-logo { height: 56px; }
    .brand-name { font-size: 1.5rem; }
    .brand-tagline { font-size: 0.875rem; }

    /* Navigation row: Menu button on the left, Login on the right; the menu opens below. */
    .nav-inner { flex-wrap: wrap; gap: 0 12px; }
    .nav-menu { order: 3; flex: 1 0 100%; }
    .nav-login { margin: 8px 0 8px auto; }

    /* Navigation collapses behind the Menu button only when JavaScript is running.
       Without JavaScript the full menu (with Company items listed) stays visible. */
    .js .nav-toggle {
        display: inline-flex; align-items: center; gap: 10px;
        margin: 8px 0; padding: 8px 14px;
        border: 1px solid var(--line-strong); border-radius: 4px; background: #fff;
        color: var(--navy); font-family: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer;
    }
    .nav-toggle-bars,
    .nav-toggle-bars::before,
    .nav-toggle-bars::after { display: block; width: 16px; height: 2px; background: currentColor; }
    .nav-toggle-bars { position: relative; }
    .nav-toggle-bars::before,
    .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
    .nav-toggle-bars::before { top: -5px; }
    .nav-toggle-bars::after { top: 5px; }

    .js .nav-menu { display: none; }
    .js .nav-menu.is-open { display: block; }
    .nav-menu { flex-direction: column; flex-wrap: nowrap; padding-bottom: 10px; }
    .nav-menu > li > a,
    .sub-toggle { width: 100%; padding: 12px 4px; border-bottom: 1px solid var(--line); }
    .nav-menu > li > a[aria-current="page"] { border-bottom-color: var(--line); box-shadow: inset 3px 0 0 var(--navy); padding-left: 12px; }
    .sub-toggle { cursor: default; }
    .sub-toggle::after { display: none; }
    .sub-toggle:hover { background: none; }

    /* Company items are listed in place on small screens. */
    .sub-menu,
    .has-sub:hover > .sub-menu,
    .has-sub:focus-within > .sub-menu {
        display: block; position: static; min-width: 0; padding: 4px 0 8px 14px;
        border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none;
    }
    .sub-menu a,
    .sub-menu .link-disabled { padding: 7px 4px; }
}

/* Phones */
@media (max-width: 600px) {
    body { font-size: 15px; }
    .container { padding: 0 16px; }
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.4rem; }

    .header-inner { padding-top: 12px; padding-bottom: 12px; }
    .brand { align-items: flex-start; gap: 12px; }
    .brand-logo { height: 44px; margin-top: 2px; }
    .brand-name { font-size: 1.125rem; }
    .brand-tagline { font-size: 0.8125rem; }

    .card-grid-4 { grid-template-columns: minmax(0, 1fr); }
    .card, .update-panel { padding: 20px; }
    .sara-block { padding: 22px; }
    .btn-row .btn { flex: 1 1 auto; }
    .faq-list summary { padding: 14px 16px; }
    .faq-list details p { padding: 0 16px 16px 35px; }

    .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 36px; }
    .footer-bottom-inner { flex-direction: column; align-items: flex-start; gap: 6px; }
}