/* Final responsive layer for the public landing experience. */
@media (max-width: 1024px) {
    .ff-header {
        padding-inline: clamp(18px, 3.5vw, 36px);
    }

    .ff-content-section {
        padding-inline: clamp(24px, 5vw, 52px);
    }

    .ff-coverage-layout,
    .ff-support-section,
    .ff-about-section,
    .ff-contact-section {
        grid-template-columns: minmax(0, 1fr);
    }

    .ff-support-section,
    .ff-about-section,
    .ff-contact-section {
        gap: 48px;
    }
}

@media (max-width: 760px) {
    html {
        scroll-padding-top: 72px;
    }

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

    body {
        min-width: 0;
        font-size: 16px;
    }

    .ff-shell,
    .ff-main {
        width: 100%;
        height: auto !important;
        min-height: 100%;
        display: block !important;
        overflow: visible !important;
    }

    .ff-header {
        position: fixed !important;
        z-index: 2000;
        inset: 0 0 auto;
        width: 100%;
        height: 68px !important;
        min-height: 68px;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        padding: 7px 14px;
        border-bottom: 1px solid rgba(7, 45, 89, .1) !important;
        background: rgba(255, 255, 255, .94) !important;
        box-shadow: 0 8px 26px rgba(7, 35, 70, .1) !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
    }

    .ff-logo {
        width: min(210px, 68vw) !important;
        height: 54px !important;
        max-width: 210px !important;
        min-width: 0;
    }

    .ff-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: left center;
        transform: none !important;
    }

    .ff-header-actions {
        display: flex;
        align-items: center;
    }

    .ff-header-actions .ff-login {
        display: none !important;
    }

    .ff-menu {
        width: 46px !important;
        height: 46px !important;
        display: grid !important;
        place-items: center;
        padding: 0;
        border: 1px solid #d8e4ed;
        border-radius: 13px;
        background: #fff;
        color: #071947;
        font-size: 1.35rem;
        box-shadow: 0 7px 18px rgba(7, 39, 78, .08);
    }

    .ff-nav {
        position: fixed !important;
        z-index: 1999;
        top: 76px !important;
        right: 12px !important;
        left: 12px !important;
        width: auto !important;
        max-height: calc(100dvh - 88px);
        display: none !important;
        align-items: stretch !important;
        gap: 3px !important;
        overflow-y: auto;
        padding: 10px !important;
        border: 1px solid #d9e4ed !important;
        border-radius: 17px !important;
        background: rgba(255, 255, 255, .98) !important;
        box-shadow: 0 24px 65px rgba(5, 30, 67, .22) !important;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .ff-nav.open {
        display: flex !important;
        flex-direction: column !important;
    }

    .ff-nav > a {
        min-height: 48px;
        display: flex !important;
        align-items: center;
        padding: 10px 13px !important;
        border-radius: 10px;
        color: #102f4b !important;
        font-size: .9rem !important;
        text-shadow: none !important;
    }

    .ff-nav > a::after {
        display: none;
    }

    .ff-nav > a.active,
    .ff-nav > a:hover {
        background: #edf5fb;
        color: #0963ad !important;
    }

    .ff-nav .ff-mobile-cta {
        display: flex !important;
        justify-content: center;
        gap: 9px;
        margin-top: 5px;
        background: linear-gradient(110deg, #073f91, #0878bd 54%, #008f87) !important;
        color: #fff !important;
    }

    .ff-hero {
        position: relative;
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column;
        padding: 68px 0 0 !important;
        overflow: hidden;
        background:
            radial-gradient(circle at 100% 5%, rgba(9, 99, 173, .13), transparent 32%),
            radial-gradient(circle at 0 72%, rgba(7, 157, 131, .1), transparent 30%),
            linear-gradient(180deg, #f7fbff 0%, #fff 58%, #eef7fa 100%) !important;
    }

    .ff-hero::before {
        z-index: 1 !important;
        display: block !important;
        background: none !important;
    }

    .ff-hero::after {
        opacity: .08 !important;
    }

    .ff-hero-art {
        display: none !important;
    }

    .ff-hero-art img {
        width: 100%;
        height: 100%;
        object-fit: cover !important;
    }

    .ff-hero-copy {
        position: relative !important;
        z-index: 3;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        display: block !important;
        padding: 44px 17px 22px !important;
    }

    .ff-hero-message {
        width: 100% !important;
        max-width: 560px !important;
        margin: 0 auto;
        padding: 0 !important;
    }

    .ff-hero-message .ff-eyebrow {
        width: max-content;
        max-width: 100%;
        margin-bottom: 8px;
        color: #1257a4;
        font-size: .78rem !important;
        line-height: 1.3;
    }

    .ff-hero-message h1 {
        max-width: 100% !important;
        margin: 0;
        color: #071947;
        font-size: clamp(2.15rem, 11.5vw, 3.35rem) !important;
        line-height: .91 !important;
        letter-spacing: -.045em;
        overflow-wrap: anywhere;
    }

    .ff-hero-message h2 {
        width: fit-content;
        max-width: 100% !important;
        margin: 11px 0 8px !important;
        padding: 5px 9px !important;
        color: #102d58;
        font-size: clamp(.86rem, 4vw, 1.05rem) !important;
        line-height: 1.25;
    }

    .ff-hero-message .ff-description {
        max-width: 100% !important;
        margin: 0;
        padding: 7px 9px !important;
        color: #243c5a;
        font-size: .94rem !important;
        line-height: 1.55 !important;
    }

    .ff-hero-actions {
        position: static !important;
        margin-top: 14px !important;
    }

    .ff-primary {
        width: 100%;
        min-height: 50px;
        justify-content: center;
        padding: 12px 18px !important;
        font-size: .88rem !important;
    }

    .ff-bill-hero-bar {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 38px minmax(0, 1fr) 48px !important;
        gap: 7px !important;
        margin: 12px 0 0 !important;
        padding: 7px !important;
        border-radius: 14px !important;
    }

    .ff-bill-hero-bar > i {
        width: 38px !important;
        height: 38px !important;
    }

    .ff-bill-hero-bar label {
        min-width: 0;
    }

    .ff-bill-hero-bar label > span {
        font-size: .58rem !important;
    }

    .ff-bill-hero-bar input {
        width: 100%;
        min-width: 0;
        font-size: 16px !important;
    }

    .ff-bill-hero-bar button {
        width: 48px !important;
        min-width: 48px !important;
        height: 44px !important;
        padding: 0 !important;
    }

    .ff-bill-hero-bar button span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .ff-hero > .ff-benefits {
        position: relative !important;
        inset: auto !important;
        width: calc(100% - 28px) !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin: 0 14px 16px !important;
        padding: 10px !important;
        overflow: visible !important;
        border: 1px solid #dce7ef !important;
        border-radius: 16px !important;
        background: rgba(255, 255, 255, .96) !important;
        box-shadow: 0 15px 34px rgba(7, 36, 72, .11) !important;
    }

    .ff-benefits article {
        min-width: 0 !important;
        min-height: 62px;
        display: grid !important;
        grid-template-columns: 32px minmax(0, 1fr) !important;
        gap: 8px !important;
        padding: 7px !important;
        border: 0 !important;
    }

    .ff-benefits strong {
        font-size: .68rem !important;
        line-height: 1.25;
    }

    .ff-benefits small {
        font-size: .58rem !important;
        line-height: 1.3;
    }

    .ff-plans {
        min-height: 0 !important;
        display: block !important;
        padding: 58px 16px 68px !important;
    }

    .ff-plans > header {
        width: 100%;
        max-width: 520px;
        height: auto !important;
        min-height: 0;
        display: block;
        margin: 0 auto 24px;
    }

    .ff-plans h2 {
        font-size: clamp(1.8rem, 8.8vw, 2.7rem) !important;
        line-height: 1.02;
    }

    .ff-plan-track {
        width: 100%;
        max-width: 520px !important;
        height: auto !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-rows: auto !important;
        gap: 16px !important;
        margin: 0 auto;
        padding: 0 !important;
        overflow: visible !important;
    }

    .ff-plans .ff-plan {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        scroll-snap-align: none;
    }

    .ff-plan-speed-row strong {
        font-size: clamp(2.8rem, 16vw, 4.6rem) !important;
    }

    .ff-content-section {
        width: 100%;
        padding: 64px 17px !important;
        scroll-margin-top: 68px;
    }

    .ff-section-heading,
    .ff-about-statement {
        width: 100%;
        max-width: 100%;
    }

    .ff-section-heading h2,
    .ff-about-statement h2 {
        margin: 9px 0 13px;
        font-size: clamp(2rem, 10.5vw, 3.25rem) !important;
        line-height: 1 !important;
        letter-spacing: -.05em;
        overflow-wrap: anywhere;
    }

    .ff-section-heading p,
    .ff-about-statement p {
        font-size: .94rem !important;
        line-height: 1.65 !important;
    }

    .ff-coverage-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 28px !important;
        margin-top: 34px !important;
    }

    .ff-coverage-list > button:not(.ff-coverage-check) {
        width: 100%;
        min-height: 68px;
        grid-template-columns: 26px minmax(0, 1fr) 34px !important;
        gap: 10px;
    }

    .ff-coverage-list > button:not(.ff-coverage-check) > strong {
        font-size: .94rem;
        overflow-wrap: anywhere;
    }

    .ff-coverage-list > button:not(.ff-coverage-check) > small {
        display: none !important;
    }

    .ff-coverage-check {
        width: 100%;
        min-height: 50px;
    }

    .ff-coverage-map-wrap {
        width: 100%;
        min-height: 390px !important;
        border-radius: 16px !important;
    }

    .ff-map-key {
        right: 10px !important;
        bottom: 10px !important;
        left: 10px !important;
        gap: 5px !important;
        padding: 10px 11px !important;
    }

    .ff-map-key small {
        font-size: .6rem !important;
        line-height: 1.35;
    }

    .ff-team-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
        margin-top: 34px !important;
    }

    .ff-team-grid article {
        min-height: 0 !important;
        padding: 20px !important;
    }

    .ff-team-grid h3 {
        margin: 30px 0 9px !important;
        font-size: 1.16rem;
    }

    .ff-support-section,
    .ff-about-section,
    .ff-contact-section {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 38px !important;
    }

    .ff-support-features,
    .ff-contact-records,
    .ff-mission-vision,
    .ff-home-inquiry {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .ff-faq-list details summary {
        grid-template-columns: 26px minmax(0, 1fr) 34px;
        gap: 10px;
    }

    .ff-faq-list details summary strong {
        font-size: .88rem;
        line-height: 1.4;
    }

    .ff-mission-vision article {
        min-height: 0 !important;
    }

    .ff-about-services article {
        min-height: 104px;
        grid-template-columns: 24px 42px minmax(0, 1fr) !important;
        gap: 11px !important;
    }

    .ff-contact-records > * {
        min-width: 0;
    }

    .ff-contact-records strong {
        overflow-wrap: anywhere;
    }

    .ff-home-inquiry {
        gap: 14px !important;
        padding: 21px 16px !important;
        border-radius: 16px !important;
    }

    .ff-home-inquiry label,
    .ff-form-heading,
    .ff-home-inquiry .wide,
    .ff-home-inquiry > button,
    .ff-home-inquiry > p {
        grid-column: 1 !important;
    }

    .ff-home-inquiry input,
    .ff-home-inquiry select,
    .ff-inquiry-form input,
    .ff-inquiry-form select,
    .ff-public-invoice-search input {
        font-size: 16px !important;
    }

    .ff-trust {
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        grid-template-columns: minmax(0, 1fr) !important;
        padding: 18px 17px 0 !important;
    }

    .ff-trust article {
        min-height: 70px;
        padding: 12px 4px !important;
        border-right: 0 !important;
    }

    .ff-trust strong {
        font-size: .72rem !important;
    }

    .ff-trust small {
        font-size: .64rem !important;
    }

    .ff-trust-legal {
        min-height: 84px;
        align-items: flex-start !important;
        flex-direction: column !important;
        justify-content: center;
        gap: 8px;
        padding-block: 16px !important;
        font-size: .72rem;
    }

    .ff-dialog {
        width: calc(100% - 18px) !important;
        max-height: calc(100dvh - 18px) !important;
        border-radius: 18px !important;
    }

    .ff-dialog-content {
        padding: 46px 17px 22px !important;
    }

    .ff-dialog h2 {
        padding-right: 34px;
        font-size: clamp(1.65rem, 8vw, 2.3rem) !important;
    }

    .ff-dialog-grid,
    .ff-inquiry-form {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .ff-inquiry-form > button {
        grid-column: 1 !important;
        min-height: 50px;
    }

    .ff-public-invoice {
        width: calc(100% - 12px) !important;
        max-width: none !important;
        max-height: calc(100dvh - 12px) !important;
        margin: auto;
        border-radius: 18px !important;
    }

    .ff-public-invoice-head {
        min-height: 70px;
        padding: 10px 12px !important;
    }

    .ff-public-invoice-title {
        display: none !important;
    }

    .ff-public-invoice-form {
        padding: 13px !important;
    }

    .ff-public-invoice-search {
        grid-template-columns: 24px minmax(0, 1fr) 48px !important;
        gap: 6px !important;
        padding: 6px !important;
    }

    .ff-public-invoice-search > span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .ff-public-invoice-search button {
        width: 48px !important;
        min-width: 48px !important;
        padding: 0 !important;
    }

    .ff-public-invoice-search button span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .ff-public-pdf-viewer {
        min-height: 390px !important;
        height: min(54dvh, 540px) !important;
    }

    .ff-payment-method-list {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .ff-public-invoice-foot {
        min-height: 48px;
        padding: 9px 13px !important;
        font-size: .65rem !important;
    }

    button,
    a,
    input,
    select,
    summary {
        touch-action: manipulation;
    }
}

@media (max-width: 420px) {
    .ff-hero-copy {
        padding-inline: 14px !important;
    }

    .ff-hero-message h1 {
        font-size: clamp(2rem, 11vw, 2.75rem) !important;
    }

    .ff-hero > .ff-benefits {
        width: calc(100% - 20px) !important;
        margin-inline: 10px !important;
        gap: 4px !important;
        padding: 7px !important;
    }

    .ff-benefits article {
        grid-template-columns: 28px minmax(0, 1fr) !important;
        gap: 6px !important;
        padding: 5px !important;
    }

    .ff-content-section {
        padding-inline: 14px !important;
    }

    .ff-coverage-map-wrap {
        min-height: 340px !important;
    }

    .ff-map-key small {
        display: none;
    }

    .ff-about-services article {
        grid-template-columns: 20px 38px minmax(0, 1fr) !important;
        gap: 9px !important;
    }

    .ff-public-invoice-brand small,
    .ff-public-invoice-foot > span:first-child {
        display: none !important;
    }
}

@media (max-width: 340px) {
    .ff-logo {
        width: 176px !important;
    }

    .ff-hero-message h1 {
        font-size: 1.9rem !important;
    }

    .ff-hero > .ff-benefits {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}