/* Scroll-based public landing layout. Loaded after the visual theme. */
html {
    scroll-behavior: smooth;
    scroll-snap-type: y proximity;
}

/* Bill checker dialog: hero-aligned account and payment flow */
.ff-bill-dialog [hidden] {
    display: none !important;
}

.ff-bill-dialog .ff-bill-lookup {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.ff-bill-dialog .ff-bill-pay.ff-bill-pay {
    min-height: 50px;
    justify-content: center;
    margin-top: 14px;
    padding: 0 18px;
    border-radius: 12px;
    text-align: center;
}

.ff-bill-dialog .ff-bill-pay span {
    flex: 0 0 auto;
}

.ff-bill-dialog .ff-bill-pay strong {
    margin: 0;
    font-size: .92rem;
}

.ff-bill-dialog .ff-bill-pay > i {
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    color: #fff;
}

.ff-payment-methods {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid #dbe5ee;
    border-radius: 14px;
    background: #f8fbfd;
}

.ff-payment-methods-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.ff-payment-methods-head strong {
    color: #143650;
    font-size: .86rem;
}

.ff-payment-methods-head button {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: #eaf0f5;
    color: #5e7385;
    cursor: pointer;
}

.ff-payment-method-list {
    display: grid;
    gap: 8px;
}

.ff-payment-method-empty {
    margin: 0;
    padding: 14px;
    border-radius: 10px;
    background: #fff;
    color: #687f90;
    font-size: .74rem;
    line-height: 1.45;
    text-align: center;
}

.ff-payment-method {
    width: 100%;
    min-height: 58px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid #d7e3eb;
    border-radius: 11px;
    background: #fff;
    color: #183b54;
    text-align: left;
    cursor: pointer;
    transition: border-color .18s, transform .18s;
}

.ff-payment-method:hover {
    border-color: #0b8198;
    transform: translateY(-1px);
}

.ff-payment-method > i:first-child {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: linear-gradient(145deg, #e5f4ff, #e3f8f2);
    color: #08799a;
}

.ff-payment-method span,
.ff-payment-method strong,
.ff-payment-method small {
    display: block;
}

.ff-payment-method strong {
    font-size: .82rem;
}

.ff-payment-method small {
    margin-top: 2px;
    color: #738697;
    font-size: .67rem;
}

.ff-payment-method > i:last-child {
    color: #8ba0af;
    font-size: .75rem;
}

.ff-manual-payment {
    display: grid;
    gap: 11px;
}

.ff-manual-back {
    width: max-content;
    padding: 0;
    border: 0;
    background: transparent;
    color: #08768b;
    font-size: .72rem;
    font-weight: 800;
    cursor: pointer;
}

.ff-manual-details {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px;
    border: 1px solid #dce6ec;
    border-radius: 11px;
    background: #fff;
}

.ff-manual-details img {
    width: 92px;
    height: 92px;
    flex: 0 0 92px;
    border-radius: 8px;
    object-fit: contain;
    background: #fff;
}

.ff-manual-details strong,
.ff-manual-details small,
.ff-manual-details b {
    display: block;
}

.ff-manual-details strong {
    color: #15374f;
    font-size: .88rem;
}

.ff-manual-details small {
    margin-top: 5px;
    color: #6d8192;
    font-size: .7rem;
}

.ff-manual-details b {
    margin-top: 3px;
    color: #0b7188;
    font-size: .9rem;
    letter-spacing: .03em;
}

.ff-receipt-upload {
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 12px;
    border: 1px dashed #9bb9c9;
    border-radius: 11px;
    background: #fff;
    color: #0c7187;
    cursor: pointer;
}

.ff-receipt-upload > i {
    font-size: 1.2rem;
}

.ff-receipt-upload span,
.ff-receipt-upload strong,
.ff-receipt-upload small {
    display: block;
}

.ff-receipt-upload strong {
    color: #244359;
    font-size: .78rem;
}

.ff-receipt-upload small {
    margin-top: 2px;
    color: #788b99;
    font-size: .64rem;
}

.ff-receipt-upload input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.ff-submit-guest-payment {
    min-height: 45px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(100deg, #075bc2, #009d8a 65%);
    color: #fff;
    font-size: .8rem;
    font-weight: 900;
    cursor: pointer;
}

.ff-submit-guest-payment:disabled {
    cursor: wait;
    opacity: .65;
}

.ff-guest-payment-status {
    margin: 0;
    padding: 10px 11px;
    border-radius: 9px;
    font-size: .72rem;
    line-height: 1.4;
}

.ff-guest-payment-status.success {
    background: #e9f7f1;
    color: #157158;
}

.ff-guest-payment-status.error {
    background: #fff0f0;
    color: #a13f3f;
}

@media (max-width: 480px) {
    .ff-payment-methods {
        padding: 11px;
    }

    .ff-manual-details img {
        width: 76px;
        height: 76px;
        flex-basis: 76px;
    }
}

.ff-bill-dialog .ff-bill-lookup {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.ff-bill-dialog .ff-bill-pay.ff-bill-pay {
    min-height: 50px;
    justify-content: center;
    margin-top: 14px;
    padding: 0 18px;
    border-radius: 12px;
    text-align: center;
}

.ff-bill-dialog .ff-bill-pay span {
    flex: 0 0 auto;
}

.ff-bill-dialog .ff-bill-pay strong {
    margin: 0;
    font-size: .92rem;
}

.ff-bill-dialog .ff-bill-pay > i {
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    color: #fff;
}

.ff-payment-methods {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid #dbe5ee;
    border-radius: 14px;
    background: #f8fbfd;
}

.ff-payment-methods-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.ff-payment-methods-head strong {
    color: #143650;
    font-size: .86rem;
}

.ff-payment-methods-head button {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: #eaf0f5;
    color: #5e7385;
    cursor: pointer;
}

.ff-payment-method-list {
    display: grid;
    gap: 8px;
}

.ff-payment-method {
    width: 100%;
    min-height: 58px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid #d7e3eb;
    border-radius: 11px;
    background: #fff;
    color: #183b54;
    text-align: left;
    cursor: pointer;
    transition: border-color .18s, transform .18s;
}

.ff-payment-method:hover {
    border-color: #0b8198;
    transform: translateY(-1px);
}

.ff-payment-method > i:first-child {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: linear-gradient(145deg, #e5f4ff, #e3f8f2);
    color: #08799a;
}

.ff-payment-method span,
.ff-payment-method strong,
.ff-payment-method small {
    display: block;
}

.ff-payment-method strong {
    font-size: .82rem;
}

.ff-payment-method small {
    margin-top: 2px;
    color: #738697;
    font-size: .67rem;
}

.ff-payment-method > i:last-child {
    color: #8ba0af;
    font-size: .75rem;
}

.ff-manual-payment {
    display: grid;
    gap: 11px;
}

.ff-manual-back {
    width: max-content;
    padding: 0;
    border: 0;
    background: transparent;
    color: #08768b;
    font-size: .72rem;
    font-weight: 800;
    cursor: pointer;
}

.ff-manual-details {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px;
    border: 1px solid #dce6ec;
    border-radius: 11px;
    background: #fff;
}

.ff-manual-details img {
    width: 92px;
    height: 92px;
    flex: 0 0 92px;
    border-radius: 8px;
    object-fit: contain;
    background: #fff;
}

.ff-manual-details strong,
.ff-manual-details small,
.ff-manual-details b {
    display: block;
}

.ff-manual-details strong {
    color: #15374f;
    font-size: .88rem;
}

.ff-manual-details small {
    margin-top: 5px;
    color: #6d8192;
    font-size: .7rem;
}

.ff-manual-details b {
    margin-top: 3px;
    color: #0b7188;
    font-size: .9rem;
    letter-spacing: .03em;
}

.ff-receipt-upload {
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 12px;
    border: 1px dashed #9bb9c9;
    border-radius: 11px;
    background: #fff;
    color: #0c7187;
    cursor: pointer;
}

.ff-receipt-upload > i {
    font-size: 1.2rem;
}

.ff-receipt-upload span,
.ff-receipt-upload strong,
.ff-receipt-upload small {
    display: block;
}

.ff-receipt-upload strong {
    color: #244359;
    font-size: .78rem;
}

.ff-receipt-upload small {
    margin-top: 2px;
    color: #788b99;
    font-size: .64rem;
}

.ff-receipt-upload input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.ff-submit-guest-payment {
    min-height: 45px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(100deg, #075bc2, #009d8a 65%);
    color: #fff;
    font-size: .8rem;
    font-weight: 900;
    cursor: pointer;
}

.ff-submit-guest-payment:disabled {
    cursor: wait;
    opacity: .65;
}

.ff-guest-payment-status {
    margin: 0;
    padding: 10px 11px;
    border-radius: 9px;
    font-size: .72rem;
    line-height: 1.4;
}

.ff-guest-payment-status.success {
    background: #e9f7f1;
    color: #157158;
}

.ff-guest-payment-status.error {
    background: #fff0f0;
    color: #a13f3f;
}

@media (max-width: 480px) {
    .ff-payment-methods {
        padding: 11px;
    }

    .ff-manual-details img {
        width: 76px;
        height: 76px;
        flex-basis: 76px;
    }
}

.ff-bill-dialog {
    width: min(610px, calc(100% - 32px));
    max-height: min(820px, calc(100dvh - 32px));
    overflow-x: hidden;
    border: 1px solid rgba(255, 255, 255, .58);
    border-radius: 26px;
    background: #f5f8fc;
    color: #102f4b;
    box-shadow: 0 34px 100px rgba(4, 32, 64, .38);
}

.ff-bill-dialog::backdrop {
    background: rgba(5, 24, 47, .68);
    backdrop-filter: blur(8px) saturate(.85);
}

.ff-bill-dialog-hero {
    position: relative;
    overflow: hidden;
    padding: 0 0 25px;
    background:
        radial-gradient(circle at 89% 20%, rgba(167, 103, 255, .75), transparent 28%),
        radial-gradient(circle at 15% 105%, rgba(0, 216, 185, .62), transparent 36%),
        linear-gradient(112deg, #075bc2 0%, #087fba 42%, #009d8a 72%, #6133ad 120%);
    color: #fff;
}

.ff-bill-dialog-hero::before,
.ff-bill-dialog-hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
}

.ff-bill-dialog-hero::before {
    width: 190px;
    height: 190px;
    top: -118px;
    right: 45px;
}

.ff-bill-dialog-hero::after {
    width: 110px;
    height: 110px;
    right: -38px;
    bottom: -54px;
}

.ff-bill-dialog .ff-bill-dialog-head {
    position: relative;
    z-index: 1;
    padding: 23px 26px 9px;
    border: 0;
}

.ff-bill-dialog-brand {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.ff-bill-dialog-mark {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 14px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 1.2rem;
    box-shadow: inset 0 1px rgba(255, 255, 255, .25);
    backdrop-filter: blur(8px);
}

.ff-bill-dialog .ff-bill-dialog-head small {
    color: rgba(255, 255, 255, .75);
    font-size: .67rem;
    letter-spacing: .13em;
}

.ff-bill-dialog .ff-bill-dialog-head strong {
    margin-top: 3px;
    color: #fff;
    font-size: clamp(1.3rem, 4vw, 1.68rem);
    line-height: 1.1;
}

.ff-bill-dialog .ff-bill-dialog-head > button {
    border-color: rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .15);
    color: #fff;
    backdrop-filter: blur(8px);
    transition: background .2s, transform .2s;
}

.ff-bill-dialog .ff-bill-dialog-head > button:hover {
    background: rgba(255, 255, 255, .25);
    transform: rotate(5deg);
}

.ff-bill-dialog .ff-bill-dialog-copy {
    position: relative;
    z-index: 1;
    max-width: 470px;
    margin: 0;
    padding: 0 26px;
    border: 0;
    color: rgba(255, 255, 255, .82);
    font-size: .84rem;
    line-height: 1.55;
}

.ff-bill-dialog .ff-hero-bill-form {
    padding: 20px 22px 24px;
}

.ff-bill-lookup {
    padding: 18px;
    border: 1px solid #dbe5ee;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 9px 25px rgba(26, 61, 93, .07);
}

.ff-bill-lookup-heading {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 13px;
}

.ff-bill-lookup-heading > span {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    border-radius: 9px;
    background: linear-gradient(135deg, #075bc2, #009d8a);
    color: #fff;
    font-size: .68rem;
    font-weight: 900;
}

.ff-bill-lookup-heading strong,
.ff-bill-lookup-heading small {
    display: block;
}

.ff-bill-lookup-heading strong {
    color: #132f49;
    font-size: .92rem;
}

.ff-bill-lookup-heading small {
    margin-top: 2px;
    color: #718498;
    font-size: .7rem;
}

.ff-bill-dialog .ff-hero-bill-form > .ff-bill-lookup > label {
    height: 54px;
    padding-left: 15px;
    border: 1.5px solid #cbdbe6;
    border-radius: 13px;
    background: #f9fbfd;
}

.ff-bill-dialog .ff-hero-bill-form > .ff-bill-lookup > label:focus-within {
    border-color: #087fa4;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(8, 127, 164, .1);
}

.ff-bill-dialog .ff-hero-bill-form input {
    color: #102f4b;
    font-size: 1rem;
}

.ff-bill-dialog .ff-hero-bill-form button[type="submit"] {
    height: 44px;
    margin-right: 4px;
    padding: 0 17px;
    border-radius: 10px;
    background: linear-gradient(100deg, #075bc2, #009d8a 62%, #612dbb);
    box-shadow: 0 7px 18px rgba(7, 91, 194, .2), inset 0 1px rgba(255, 255, 255, .28);
}

.ff-bill-dialog .ff-bill-privacy {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 9px 2px 0;
    color: #6d8193;
    font-size: .7rem;
}

.ff-bill-dialog .ff-bill-privacy i {
    color: #008f80;
}

.ff-bill-dialog .ff-bill-return {
    margin: 14px 0 0;
}

.ff-bill-dialog .ff-bill-result {
    margin-top: 14px;
    padding: 18px;
    border: 1px solid #dbe5ee;
    border-left: 0;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 9px 25px rgba(26, 61, 93, .07);
}

.ff-bill-dialog .ff-bill-result::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: 17px 0 0 17px;
    background: linear-gradient(#075bc2, #009d8a, #612dbb);
}

.ff-bill-result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ff-bill-dialog .ff-bill-result-status {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
}

.ff-bill-dialog .ff-bill-result-status span {
    font-size: .73rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ff-bill-dialog .ff-bill-result-status small {
    color: #6e8294;
    font-size: .74rem;
}

.ff-bill-result-check {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    border-radius: 50%;
    background: #e5f7f2;
    color: #008b77;
    font-size: 1rem;
}

.status-due .ff-bill-result-check,
.status-overdue .ff-bill-result-check {
    background: #fff2dc;
    color: #b36d00;
}

.ff-bill-balance {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-top: 15px;
    padding: 17px 18px;
    border-radius: 14px;
    background: linear-gradient(110deg, #edf7ff, #edf9f5 66%, #f4efff);
}

.ff-bill-balance span,
.ff-bill-balance small,
.ff-bill-balance strong {
    display: block;
}

.ff-bill-balance small {
    color: #627a8e;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.ff-bill-dialog .ff-bill-balance strong {
    margin-top: 5px;
    color: #0e3554;
    font-size: clamp(2rem, 8vw, 2.65rem);
    line-height: 1;
    letter-spacing: -.045em;
}

.ff-bill-balance > i {
    color: #087fa4;
    font-size: 1.45rem;
}

.ff-bill-due {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 12px;
    padding: 11px 12px;
    border: 1px solid #e1e8ee;
    border-radius: 11px;
    color: #516a7e;
    font-size: .78rem;
    line-height: 1.45;
}

.ff-bill-due i {
    color: #087fa4;
}

.ff-bill-dialog .ff-bill-result-actions {
    margin-top: 12px;
    padding-top: 12px;
}

.ff-bill-dialog .ff-bill-result-actions > span {
    color: #728598;
    font-size: .7rem;
}

.ff-bill-dialog .ff-bill-result-actions a {
    color: #075f9e;
    font-size: .74rem;
    font-weight: 850;
}

.ff-bill-dialog .ff-bill-pay {
    min-height: 58px;
    margin-top: 14px;
    border-radius: 13px;
    background: linear-gradient(100deg, #075bc2, #009d8a 60%, #612dbb);
    box-shadow: 0 10px 23px rgba(22, 90, 162, .2), inset 0 1px rgba(255, 255, 255, .25);
    transition: filter .2s, transform .2s;
}

.ff-bill-dialog .ff-bill-pay:hover {
    filter: brightness(1.05) saturate(1.05);
    transform: translateY(-1px);
}

.ff-bill-dialog .ff-bill-pay-note {
    margin: 9px 2px 0;
    color: #657b8e;
    font-size: .72rem;
}

.ff-bill-dialog .ff-bill-qr {
    grid-template-columns: minmax(0, 1fr) 174px;
    align-items: center;
    justify-items: stretch;
    gap: 18px;
    margin-top: 14px;
    padding: 17px;
    border-radius: 14px;
    text-align: left;
}

.ff-bill-qr-copy span,
.ff-bill-qr-copy strong,
.ff-bill-qr-copy small {
    display: block;
}

.ff-bill-dialog .ff-bill-qr-copy span {
    color: #08768b;
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ff-bill-dialog .ff-bill-qr-copy strong {
    margin-top: 5px;
    color: #102f4b;
    font-size: 1rem;
}

.ff-bill-dialog .ff-bill-qr-copy small {
    margin-top: 5px;
    color: #687d8f;
    font-size: .72rem;
    line-height: 1.45;
}

.ff-bill-dialog .ff-bill-qr-copy a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 13px;
    padding: 0 12px;
    border-radius: 9px;
    background: #0b7188;
    color: #fff;
    font-size: .72rem;
    font-weight: 850;
    text-decoration: none;
}

.ff-bill-dialog .ff-bill-qr-code {
    width: 174px;
    min-height: 174px;
    padding: 9px;
    justify-self: end;
    border: 1px solid #d5e3e9;
    border-radius: 12px;
    background: #fff;
    color: #0b7188;
}

.ff-bill-dialog .ff-bill-qr-code img,
.ff-bill-dialog .ff-bill-qr-code canvas {
    width: 154px !important;
    height: 154px !important;
}

.ff-bill-dialog .ff-bill-error {
    margin: 14px 0 0;
    padding: 11px 12px;
    border: 1px solid #f1caca;
    border-radius: 11px;
    background: #fff2f2;
    color: #a23e3e;
    font-size: .78rem;
}

@media (max-width: 560px) {
    .ff-bill-dialog {
        width: calc(100% - 18px);
        max-height: calc(100dvh - 18px);
        border-radius: 20px;
    }

    .ff-bill-dialog .ff-bill-dialog-head {
        align-items: flex-start;
        padding: 19px 17px 8px;
    }

    .ff-bill-dialog-mark {
        width: 39px;
        height: 39px;
        flex-basis: 39px;
        border-radius: 12px;
    }

    .ff-bill-dialog .ff-bill-dialog-head strong {
        font-size: 1.25rem;
    }

    .ff-bill-dialog .ff-bill-dialog-head > button {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .ff-bill-dialog .ff-bill-dialog-copy {
        padding: 0 17px;
        font-size: .76rem;
    }

    .ff-bill-dialog-hero {
        padding-bottom: 19px;
    }

    .ff-bill-dialog .ff-hero-bill-form {
        padding: 13px;
    }

    .ff-bill-lookup,
    .ff-bill-dialog .ff-bill-result {
        padding: 14px;
        border-radius: 14px;
    }

    .ff-bill-dialog .ff-hero-bill-form > .ff-bill-lookup > label {
        height: auto;
        min-height: 51px;
        display: grid;
        grid-template-columns: 20px minmax(0, 1fr) auto;
        padding: 3px 3px 3px 12px;
    }

    .ff-bill-dialog .ff-hero-bill-form input {
        min-height: 43px;
        padding-inline: 8px;
        font-size: .88rem;
    }

    .ff-bill-dialog .ff-hero-bill-form button[type="submit"] {
        width: 43px;
        height: 43px;
        margin: 0;
        padding: 0;
    }

    .ff-bill-dialog .ff-hero-bill-form button[type="submit"] span {
        display: none;
    }

    .ff-bill-balance {
        padding: 15px;
    }

    .ff-bill-dialog .ff-bill-balance strong {
        font-size: 2rem;
    }

    .ff-bill-dialog .ff-bill-result-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .ff-bill-dialog .ff-bill-qr {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .ff-bill-dialog .ff-bill-qr-copy a {
        justify-content: center;
    }

    .ff-bill-dialog .ff-bill-qr-code {
        justify-self: center;
    }
}

/* Coverage palette follows the homepage hero: white canvas, navy depth, blue/teal accents. */
.ff-coverage-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 92% 9%, rgba(9, 99, 173, .11), transparent 28%),
        radial-gradient(circle at 7% 92%, rgba(7, 157, 131, .09), transparent 27%),
        linear-gradient(180deg, #fff 0%, #f5faff 48%, #edf6fa 100%);
}

.ff-coverage-section::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .34;
    background:
        linear-gradient(115deg, transparent 0 62%, rgba(9, 99, 173, .07) 62% 62.12%, transparent 62.12%),
        linear-gradient(70deg, transparent 0 76%, rgba(7, 157, 131, .07) 76% 76.12%, transparent 76.12%);
    pointer-events: none;
}

.ff-coverage-section .ff-section-heading > span,
.ff-coverage-list > button:not(.ff-coverage-check):hover,
.ff-coverage-list > button.active:not(.ff-coverage-check) {
    color: #0963ad;
}

.ff-coverage-list > button:not(.ff-coverage-check) {
    border-color: rgba(9, 74, 130, .15);
}

.ff-coverage-list > button:not(.ff-coverage-check) > i {
    background: #e8f3fb;
    color: #0963ad;
}

.ff-coverage-list > button:not(.ff-coverage-check):hover > i,
.ff-coverage-list > button.active:not(.ff-coverage-check) > i,
.ff-coverage-check {
    background: linear-gradient(110deg, #073f91 0%, #0878bd 52%, #008f87 100%);
    color: #fff;
}

.ff-coverage-check {
    border-color: rgba(7, 63, 145, .2);
    box-shadow: 0 12px 27px rgba(7, 63, 145, .16);
}

.ff-coverage-map-wrap {
    border-color: rgba(9, 74, 130, .2);
    background-color: #e9f3f7;
    box-shadow: 0 24px 55px rgba(7, 42, 79, .13);
}

.ff-map-key {
    border-color: rgba(255, 255, 255, .26);
    background: linear-gradient(105deg, rgba(7, 25, 71, .95), rgba(7, 76, 125, .93));
}

@media (max-width: 760px) {
    .ff-coverage-section {
        background:
            radial-gradient(circle at 100% 8%, rgba(9, 99, 173, .1), transparent 25%),
            linear-gradient(180deg, #fff 0%, #eef7fb 100%);
    }
}

/* Coverage palette follows the homepage hero: white canvas, navy depth, blue/teal accents. */
.ff-coverage-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 92% 9%, rgba(9, 99, 173, .11), transparent 28%),
        radial-gradient(circle at 7% 92%, rgba(7, 157, 131, .09), transparent 27%),
        linear-gradient(180deg, #fff 0%, #f5faff 48%, #edf6fa 100%);
}

.ff-coverage-section::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .34;
    background:
        linear-gradient(115deg, transparent 0 62%, rgba(9, 99, 173, .07) 62% 62.12%, transparent 62.12%),
        linear-gradient(70deg, transparent 0 76%, rgba(7, 157, 131, .07) 76% 76.12%, transparent 76.12%);
    pointer-events: none;
}

.ff-coverage-section .ff-section-heading > span,
.ff-coverage-list > button:not(.ff-coverage-check):hover,
.ff-coverage-list > button.active:not(.ff-coverage-check) {
    color: #0963ad;
}

.ff-coverage-list > button:not(.ff-coverage-check) {
    border-color: rgba(9, 74, 130, .15);
}

.ff-coverage-list > button:not(.ff-coverage-check) > i {
    background: #e8f3fb;
    color: #0963ad;
}

.ff-coverage-list > button:not(.ff-coverage-check):hover > i,
.ff-coverage-list > button.active:not(.ff-coverage-check) > i,
.ff-coverage-check {
    background: linear-gradient(110deg, #073f91 0%, #0878bd 52%, #008f87 100%);
    color: #fff;
}

.ff-coverage-check {
    border-color: rgba(7, 63, 145, .2);
    box-shadow: 0 12px 27px rgba(7, 63, 145, .16);
}

.ff-coverage-map-wrap {
    border-color: rgba(9, 74, 130, .2);
    background-color: #e9f3f7;
    box-shadow: 0 24px 55px rgba(7, 42, 79, .13);
}

.ff-map-key {
    border-color: rgba(255, 255, 255, .26);
    background: linear-gradient(105deg, rgba(7, 25, 71, .95), rgba(7, 76, 125, .93));
}

@media (max-width: 760px) {
    .ff-coverage-section {
        background:
            radial-gradient(circle at 100% 8%, rgba(9, 99, 173, .1), transparent 25%),
            linear-gradient(180deg, #fff 0%, #eef7fb 100%);
    }
}

/* Bill checker dialog: hero-aligned account and payment flow */
.ff-bill-dialog [hidden] {
    display: none !important;
}

.ff-bill-dialog {
    width: min(610px, calc(100% - 32px));
    max-height: min(820px, calc(100dvh - 32px));
    overflow-x: hidden;
    border: 1px solid rgba(255, 255, 255, .58);
    border-radius: 26px;
    background: #f5f8fc;
    color: #102f4b;
    box-shadow: 0 34px 100px rgba(4, 32, 64, .38);
}

.ff-bill-dialog::backdrop {
    background: rgba(5, 24, 47, .68);
    backdrop-filter: blur(8px) saturate(.85);
}

.ff-bill-dialog-hero {
    position: relative;
    overflow: hidden;
    padding: 0 0 25px;
    background:
        radial-gradient(circle at 89% 20%, rgba(167, 103, 255, .75), transparent 28%),
        radial-gradient(circle at 15% 105%, rgba(0, 216, 185, .62), transparent 36%),
        linear-gradient(112deg, #075bc2 0%, #087fba 42%, #009d8a 72%, #6133ad 120%);
    color: #fff;
}

.ff-bill-dialog-hero::before,
.ff-bill-dialog-hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
}

.ff-bill-dialog-hero::before {
    width: 190px;
    height: 190px;
    top: -118px;
    right: 45px;
}

.ff-bill-dialog-hero::after {
    width: 110px;
    height: 110px;
    right: -38px;
    bottom: -54px;
}

.ff-bill-dialog .ff-bill-dialog-head {
    position: relative;
    z-index: 1;
    padding: 23px 26px 9px;
    border: 0;
}

.ff-bill-dialog-brand {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.ff-bill-dialog-mark {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 14px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 1.2rem;
    box-shadow: inset 0 1px rgba(255, 255, 255, .25);
    backdrop-filter: blur(8px);
}

.ff-bill-dialog .ff-bill-dialog-head small {
    color: rgba(255, 255, 255, .75);
    font-size: .67rem;
    letter-spacing: .13em;
}

.ff-bill-dialog .ff-bill-dialog-head strong {
    margin-top: 3px;
    color: #fff;
    font-size: clamp(1.3rem, 4vw, 1.68rem);
    line-height: 1.1;
}

.ff-bill-dialog .ff-bill-dialog-head > button {
    border-color: rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .15);
    color: #fff;
    backdrop-filter: blur(8px);
    transition: background .2s, transform .2s;
}

.ff-bill-dialog .ff-bill-dialog-head > button:hover {
    background: rgba(255, 255, 255, .25);
    transform: rotate(5deg);
}

.ff-bill-dialog .ff-bill-dialog-copy {
    position: relative;
    z-index: 1;
    max-width: 470px;
    margin: 0;
    padding: 0 26px;
    border: 0;
    color: rgba(255, 255, 255, .82);
    font-size: .84rem;
    line-height: 1.55;
}

.ff-bill-dialog .ff-hero-bill-form {
    padding: 20px 22px 24px;
}

.ff-bill-lookup {
    padding: 18px;
    border: 1px solid #dbe5ee;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 9px 25px rgba(26, 61, 93, .07);
}

.ff-bill-lookup-heading {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 13px;
}

.ff-bill-lookup-heading > span {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    border-radius: 9px;
    background: linear-gradient(135deg, #075bc2, #009d8a);
    color: #fff;
    font-size: .68rem;
    font-weight: 900;
}

.ff-bill-lookup-heading strong,
.ff-bill-lookup-heading small {
    display: block;
}

.ff-bill-lookup-heading strong {
    color: #132f49;
    font-size: .92rem;
}

.ff-bill-lookup-heading small {
    margin-top: 2px;
    color: #718498;
    font-size: .7rem;
}

.ff-bill-dialog .ff-hero-bill-form > .ff-bill-lookup > label {
    height: 54px;
    padding-left: 15px;
    border: 1.5px solid #cbdbe6;
    border-radius: 13px;
    background: #f9fbfd;
}

.ff-bill-dialog .ff-hero-bill-form > .ff-bill-lookup > label:focus-within {
    border-color: #087fa4;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(8, 127, 164, .1);
}

.ff-bill-dialog .ff-hero-bill-form input {
    color: #102f4b;
    font-size: 1rem;
}

.ff-bill-dialog .ff-hero-bill-form button[type="submit"] {
    height: 44px;
    margin-right: 4px;
    padding: 0 17px;
    border-radius: 10px;
    background: linear-gradient(100deg, #075bc2, #009d8a 62%, #612dbb);
    box-shadow: 0 7px 18px rgba(7, 91, 194, .2), inset 0 1px rgba(255, 255, 255, .28);
}

.ff-bill-dialog .ff-bill-privacy {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 9px 2px 0;
    color: #6d8193;
    font-size: .7rem;
}

.ff-bill-dialog .ff-bill-privacy i {
    color: #008f80;
}

.ff-bill-dialog .ff-bill-return {
    margin: 14px 0 0;
}

.ff-bill-dialog .ff-bill-result {
    margin-top: 14px;
    padding: 18px;
    border: 1px solid #dbe5ee;
    border-left: 0;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 9px 25px rgba(26, 61, 93, .07);
}

.ff-bill-dialog .ff-bill-result::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: 17px 0 0 17px;
    background: linear-gradient(#075bc2, #009d8a, #612dbb);
}

.ff-bill-result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ff-bill-dialog .ff-bill-result-status {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
}

.ff-bill-dialog .ff-bill-result-status span {
    font-size: .73rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ff-bill-dialog .ff-bill-result-status small {
    color: #6e8294;
    font-size: .74rem;
}

.ff-bill-result-check {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    border-radius: 50%;
    background: #e5f7f2;
    color: #008b77;
    font-size: 1rem;
}

.status-due .ff-bill-result-check,
.status-overdue .ff-bill-result-check {
    background: #fff2dc;
    color: #b36d00;
}

.ff-bill-balance {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-top: 15px;
    padding: 17px 18px;
    border-radius: 14px;
    background: linear-gradient(110deg, #edf7ff, #edf9f5 66%, #f4efff);
}

.ff-bill-balance span,
.ff-bill-balance small,
.ff-bill-balance strong {
    display: block;
}

.ff-bill-balance small {
    color: #627a8e;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.ff-bill-dialog .ff-bill-balance strong {
    margin-top: 5px;
    color: #0e3554;
    font-size: clamp(2rem, 8vw, 2.65rem);
    line-height: 1;
    letter-spacing: -.045em;
}

.ff-bill-balance > i {
    color: #087fa4;
    font-size: 1.45rem;
}

.ff-bill-due {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 12px;
    padding: 11px 12px;
    border: 1px solid #e1e8ee;
    border-radius: 11px;
    color: #516a7e;
    font-size: .78rem;
    line-height: 1.45;
}

.ff-bill-due i {
    color: #087fa4;
}

.ff-bill-dialog .ff-bill-result-actions {
    margin-top: 12px;
    padding-top: 12px;
}

.ff-bill-dialog .ff-bill-result-actions > span {
    color: #728598;
    font-size: .7rem;
}

.ff-bill-dialog .ff-bill-result-actions a {
    color: #075f9e;
    font-size: .74rem;
    font-weight: 850;
}

.ff-bill-dialog .ff-bill-pay {
    min-height: 58px;
    margin-top: 14px;
    border-radius: 13px;
    background: linear-gradient(100deg, #075bc2, #009d8a 60%, #612dbb);
    box-shadow: 0 10px 23px rgba(22, 90, 162, .2), inset 0 1px rgba(255, 255, 255, .25);
    transition: filter .2s, transform .2s;
}

.ff-bill-dialog .ff-bill-pay:hover {
    filter: brightness(1.05) saturate(1.05);
    transform: translateY(-1px);
}

.ff-bill-dialog .ff-bill-pay-note {
    margin: 9px 2px 0;
    color: #657b8e;
    font-size: .72rem;
}

.ff-bill-dialog .ff-bill-qr {
    grid-template-columns: minmax(0, 1fr) 174px;
    align-items: center;
    justify-items: stretch;
    gap: 18px;
    margin-top: 14px;
    padding: 17px;
    border-radius: 14px;
    text-align: left;
}

.ff-bill-qr-copy span,
.ff-bill-qr-copy strong,
.ff-bill-qr-copy small {
    display: block;
}

.ff-bill-dialog .ff-bill-qr-copy span {
    color: #08768b;
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ff-bill-dialog .ff-bill-qr-copy strong {
    margin-top: 5px;
    color: #102f4b;
    font-size: 1rem;
}

.ff-bill-dialog .ff-bill-qr-copy small {
    margin-top: 5px;
    color: #687d8f;
    font-size: .72rem;
    line-height: 1.45;
}

.ff-bill-dialog .ff-bill-qr-copy a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 13px;
    padding: 0 12px;
    border-radius: 9px;
    background: #0b7188;
    color: #fff;
    font-size: .72rem;
    font-weight: 850;
    text-decoration: none;
}

.ff-bill-dialog .ff-bill-qr-code {
    width: 174px;
    min-height: 174px;
    padding: 9px;
    justify-self: end;
    border: 1px solid #d5e3e9;
    border-radius: 12px;
    background: #fff;
    color: #0b7188;
}

.ff-bill-dialog .ff-bill-qr-code img,
.ff-bill-dialog .ff-bill-qr-code canvas {
    width: 154px !important;
    height: 154px !important;
}

.ff-bill-dialog .ff-bill-error {
    margin: 14px 0 0;
    padding: 11px 12px;
    border: 1px solid #f1caca;
    border-radius: 11px;
    background: #fff2f2;
    color: #a23e3e;
    font-size: .78rem;
}

@media (max-width: 560px) {
    .ff-bill-dialog {
        width: calc(100% - 18px);
        max-height: calc(100dvh - 18px);
        border-radius: 20px;
    }

    .ff-bill-dialog .ff-bill-dialog-head {
        align-items: flex-start;
        padding: 19px 17px 8px;
    }

    .ff-bill-dialog-mark {
        width: 39px;
        height: 39px;
        flex-basis: 39px;
        border-radius: 12px;
    }

    .ff-bill-dialog .ff-bill-dialog-head strong {
        font-size: 1.25rem;
    }

    .ff-bill-dialog .ff-bill-dialog-head > button {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .ff-bill-dialog .ff-bill-dialog-copy {
        padding: 0 17px;
        font-size: .76rem;
    }

    .ff-bill-dialog-hero {
        padding-bottom: 19px;
    }

    .ff-bill-dialog .ff-hero-bill-form {
        padding: 13px;
    }

    .ff-bill-lookup,
    .ff-bill-dialog .ff-bill-result {
        padding: 14px;
        border-radius: 14px;
    }

    .ff-bill-dialog .ff-hero-bill-form > .ff-bill-lookup > label {
        height: auto;
        min-height: 51px;
        display: grid;
        grid-template-columns: 20px minmax(0, 1fr) auto;
        padding: 3px 3px 3px 12px;
    }

    .ff-bill-dialog .ff-hero-bill-form input {
        min-height: 43px;
        padding-inline: 8px;
        font-size: .88rem;
    }

    .ff-bill-dialog .ff-hero-bill-form button[type="submit"] {
        width: 43px;
        height: 43px;
        margin: 0;
        padding: 0;
    }

    .ff-bill-dialog .ff-hero-bill-form button[type="submit"] span {
        display: none;
    }

    .ff-bill-balance {
        padding: 15px;
    }

    .ff-bill-dialog .ff-bill-balance strong {
        font-size: 2rem;
    }

    .ff-bill-dialog .ff-bill-result-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .ff-bill-dialog .ff-bill-qr {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .ff-bill-dialog .ff-bill-qr-copy a {
        justify-content: center;
    }

    .ff-bill-dialog .ff-bill-qr-code {
        justify-self: center;
    }
}

/* Professional public billing statement */
#billDialog.ff-invoice-dialog {
    width: min(570px, calc(100% - 28px));
    border: 1px solid #dbe3ea;
    border-top: 5px solid #087e9a;
    border-radius: 18px;
    background: #f3f6f8;
    color: #172f42;
    box-shadow: 0 28px 80px rgba(8, 31, 50, .3);
}

.ff-invoice-dialog .ff-bill-dialog-hero {
    padding: 0 0 18px;
    background: #fff;
    color: #172f42;
}

.ff-invoice-dialog .ff-bill-dialog-hero::before,
.ff-invoice-dialog .ff-bill-dialog-hero::after {
    display: none;
}

.ff-invoice-dialog .ff-bill-dialog-head {
    padding: 20px 22px 7px;
}

.ff-invoice-dialog .ff-bill-dialog-brand {
    gap: 12px;
}

.ff-invoice-dialog .ff-bill-dialog-mark {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
    padding: 5px;
    border: 1px solid #dce5eb;
    border-radius: 11px;
    background: #fff;
    box-shadow: none;
}

.ff-invoice-dialog .ff-bill-dialog-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ff-invoice-dialog .ff-bill-dialog-head small {
    color: #08768b;
    font-size: .65rem;
    letter-spacing: .14em;
}

.ff-invoice-dialog .ff-bill-dialog-head strong {
    color: #142f43;
    font-size: 1.42rem;
    letter-spacing: -.025em;
}

.ff-invoice-dialog .ff-bill-dialog-head > button {
    border-color: #dbe4ea;
    background: #f4f7f9;
    color: #5c7180;
    backdrop-filter: none;
}

.ff-invoice-dialog .ff-bill-dialog-head > button:hover {
    background: #eaf0f4;
}

.ff-invoice-dialog .ff-bill-dialog-copy {
    padding: 0 22px;
    color: #6d7f8d;
    font-size: .77rem;
}

#billDialog.ff-invoice-dialog .ff-hero-bill-form {
    padding: 16px 18px 20px;
}

.ff-invoice-dialog .ff-bill-lookup {
    padding: 10px;
    border: 1px solid #dbe4ea;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 5px 14px rgba(24, 53, 76, .05);
}

#billDialog.ff-invoice-dialog .ff-hero-bill-form > .ff-bill-lookup > label {
    height: 48px;
    border: 1px solid #ccd9e2;
    border-radius: 10px;
    background: #f8fafb;
}

#billDialog.ff-invoice-dialog .ff-hero-bill-form button[type="submit"] {
    height: 38px;
    border-radius: 8px;
    background: #087a91;
    box-shadow: none;
}

#billDialog.ff-invoice-dialog .ff-bill-result.ff-bill-result {
    margin-top: 12px;
    padding: 19px;
    border: 1px solid #d8e1e8;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 8px 21px rgba(22, 50, 72, .06);
}

.ff-invoice-dialog .ff-bill-result::before {
    display: none;
}

.ff-invoice-dialog .ff-bill-result-head {
    padding-bottom: 14px;
    border-bottom: 1px dashed #cbd7df;
}

.ff-invoice-dialog .ff-bill-result-status {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
}

.ff-invoice-dialog .ff-bill-result-status small {
    order: 0;
    color: #5d7383;
    font-size: .73rem;
    font-weight: 700;
}

.ff-invoice-dialog .ff-bill-result-status span {
    order: 1;
    width: max-content;
    padding: 5px 8px;
    border-radius: 6px;
    background: #eaf7f3;
    color: #11715d;
    font-size: .65rem;
    letter-spacing: .04em;
}

.ff-invoice-dialog .status-due .ff-bill-result-status span,
.ff-invoice-dialog .status-overdue .ff-bill-result-status span {
    background: #fff2df;
    color: #9a610b;
}

.ff-invoice-label {
    color: #8b9aa5;
    font-size: .62rem;
    font-weight: 850;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.ff-invoice-dialog .ff-bill-balance {
    align-items: flex-end;
    margin-top: 0;
    padding: 21px 0 17px;
    border-radius: 0;
    background: transparent;
}

.ff-invoice-dialog .ff-bill-balance small {
    color: #748694;
    font-size: .66rem;
}

.ff-invoice-dialog .ff-bill-balance strong {
    margin-top: 7px;
    color: #112f46;
    font-size: clamp(2.25rem, 9vw, 3rem);
    letter-spacing: -.055em;
}

.ff-invoice-currency {
    margin-bottom: 4px;
    color: #8797a2;
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .1em;
}

.ff-invoice-dialog .ff-bill-due {
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0;
    padding: 12px 0;
    border: solid #e1e8ed;
    border-width: 1px 0;
    border-radius: 0;
    color: #6c7f8e;
    font-size: .7rem;
}

.ff-invoice-dialog .ff-bill-due strong {
    color: #2d485b;
    font-size: .72rem;
    text-align: right;
}

.ff-invoice-dialog .ff-bill-pay.ff-bill-pay {
    min-height: 47px;
    margin-top: 16px;
    border-radius: 9px;
    background: #087a91;
    box-shadow: none;
}

.ff-invoice-dialog .ff-payment-methods {
    border-radius: 10px;
    background: #f7f9fa;
}

@media (max-width: 520px) {
    #billDialog.ff-invoice-dialog {
        width: calc(100% - 16px);
        border-radius: 14px;
    }

    .ff-invoice-dialog .ff-bill-dialog-head {
        padding: 16px 15px 6px;
    }

    .ff-invoice-dialog .ff-bill-dialog-copy {
        padding: 0 15px;
    }

    #billDialog.ff-invoice-dialog .ff-hero-bill-form {
        padding: 12px;
    }

    #billDialog.ff-invoice-dialog .ff-bill-result.ff-bill-result {
        padding: 15px;
    }

    .ff-invoice-dialog .ff-bill-balance strong {
        font-size: 2.15rem;
    }

    .ff-invoice-dialog .ff-bill-due {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .ff-invoice-dialog .ff-bill-due strong {
        text-align: left;
    }
}

/* Fast-Fiber Pay hub */
.ff-pay-hub {
    width: min(590px, calc(100% - 28px));
    max-height: min(780px, calc(100dvh - 28px));
    margin: auto;
    padding: 0;
    overflow: auto;
    border: 0;
    border-radius: 22px;
    background: transparent;
    color: #17364b;
    box-shadow: 0 32px 90px rgba(7, 31, 53, .34);
}

.ff-pay-hub::backdrop {
    background: rgba(8, 28, 48, .66);
    backdrop-filter: blur(7px);
}

.ff-pay-hub [hidden] {
    display: none !important;
}

.ff-pay-hub-shell {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 22px;
    background: #f4f7f9;
}

.ff-pay-hub-head {
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 20px;
    border-bottom: 1px solid #e1e8ed;
    background: #fff;
}

.ff-pay-hub-brand {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ff-pay-hub-logo {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    flex: 0 0 48px;
    padding: 5px;
    border: 1px solid #dce6ec;
    border-radius: 14px;
    background: linear-gradient(145deg, #fff, #edf8f7);
}

.ff-pay-hub-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ff-pay-hub-brand strong,
.ff-pay-hub-brand small {
    display: block;
}

.ff-pay-hub-brand strong {
    color: #12344d;
    font-size: 1.08rem;
    letter-spacing: -.02em;
}

.ff-pay-hub-brand small {
    margin-top: 3px;
    color: #718594;
    font-size: .67rem;
}

.ff-pay-hub-head > button {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    border: 1px solid #dde6eb;
    border-radius: 11px;
    background: #f5f8fa;
    color: #607685;
    cursor: pointer;
    transition: background .18s, color .18s;
}

.ff-pay-hub-head > button:hover {
    background: #e8f2f3;
    color: #08768b;
}

.ff-pay-hub-form {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.ff-pay-search {
    min-height: 56px;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 5px 5px 5px 15px;
    border: 1px solid #d6e1e8;
    border-radius: 14px;
    background: #fff;
    color: #6f8493;
    box-shadow: 0 6px 18px rgba(20, 54, 78, .05);
    transition: border-color .18s, box-shadow .18s;
}

.ff-pay-search:focus-within {
    border-color: #168497;
    box-shadow: 0 0 0 4px rgba(22, 132, 151, .1);
}

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

.ff-pay-search > i {
    color: #0b7b91;
}

.ff-pay-search input {
    width: 100%;
    min-width: 0;
    height: 44px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #16374f;
    font-size: .94rem;
    font-weight: 800;
    letter-spacing: .04em;
}

.ff-pay-search input::placeholder {
    color: #91a0aa;
    font-weight: 650;
    letter-spacing: 0;
}

.ff-pay-search button {
    min-width: 94px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: #087b91;
    color: #fff;
    font-size: .76rem;
    font-weight: 900;
    cursor: pointer;
}

.ff-pay-search button:disabled {
    cursor: wait;
    opacity: .6;
}

.ff-pay-result {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 13px;
    padding: 16px;
    border: 1px solid #d8e3e9;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 9px 24px rgba(19, 52, 75, .06);
}

.ff-pay-account {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e4eaee;
}

.ff-pay-account span {
    width: max-content;
    padding: 5px 8px;
    border-radius: 999px;
    background: #e8f6f2;
    color: #14725f;
    font-size: .65rem;
    font-weight: 900;
}

.status-due .ff-pay-account span,
.status-overdue .ff-pay-account span {
    background: #fff0d9;
    color: #9a6007;
}

.ff-pay-account strong {
    min-width: 0;
    overflow: hidden;
    color: #627887;
    font-size: .7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ff-pay-balance {
    min-width: 0;
    padding: 15px 17px;
    border-radius: 13px;
    background: linear-gradient(118deg, #075ea9, #087f91 72%);
    color: #fff;
}

.ff-pay-balance span,
.ff-pay-balance strong,
.ff-pay-balance small {
    display: block;
}

.ff-pay-balance span {
    color: rgba(255, 255, 255, .7);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ff-pay-balance strong {
    margin-top: 6px;
    font-size: clamp(2rem, 8vw, 2.65rem);
    line-height: 1;
    letter-spacing: -.05em;
}

.ff-pay-balance small {
    margin-top: 10px;
    color: rgba(255, 255, 255, .76);
    font-size: .7rem;
    line-height: 1.4;
}

.ff-pay-action {
    width: 102px;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    border: 0;
    border-radius: 13px;
    background: #ffb51b;
    color: #17364b;
    font-size: .86rem;
    font-weight: 950;
    cursor: pointer;
    box-shadow: inset 0 1px rgba(255, 255, 255, .45);
    transition: transform .18s, box-shadow .18s;
}

.ff-pay-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(205, 139, 0, .2);
}

.ff-pay-result > .ff-bill-pay-note,
.ff-pay-result > .ff-payment-methods,
.ff-pay-result > .ff-pay-qr {
    grid-column: 1 / -1;
}

.ff-pay-hub .ff-bill-pay-note,
.ff-pay-hub .ff-bill-error,
.ff-pay-hub .ff-bill-return {
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: .72rem;
    line-height: 1.45;
}

.ff-pay-hub .ff-bill-pay-note {
    background: #eef4f7;
    color: #607787;
}

.ff-pay-hub .ff-bill-error {
    border: 1px solid #efcccc;
    background: #fff1f1;
    color: #a43f3f;
}

.ff-pay-hub .ff-bill-return {
    border: 1px solid #cfe5dc;
    background: #eef8f4;
    color: #1b6d59;
}

.ff-pay-hub .ff-payment-methods {
    margin: 0;
    border: 0;
    border-radius: 12px;
    background: #f2f6f8;
}

.ff-pay-qr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px;
    align-items: center;
    gap: 16px;
    padding: 15px;
    border-radius: 12px;
    background: #f2f6f8;
}

.ff-pay-qr .ff-bill-qr-copy span,
.ff-pay-qr .ff-bill-qr-copy strong,
.ff-pay-qr .ff-bill-qr-copy small {
    display: block;
}

.ff-pay-qr .ff-bill-qr-copy span {
    color: #08768b;
    font-size: .65rem;
    font-weight: 900;
    text-transform: uppercase;
}

.ff-pay-qr .ff-bill-qr-copy strong {
    margin-top: 4px;
    color: #17364b;
    font-size: .9rem;
}

.ff-pay-qr .ff-bill-qr-copy small {
    margin-top: 5px;
    color: #6c8190;
    font-size: .68rem;
}

.ff-pay-qr .ff-bill-qr-copy a {
    min-height: 37px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 11px;
    padding: 0 11px;
    border-radius: 9px;
    background: #087b91;
    color: #fff;
    font-size: .7rem;
    font-weight: 850;
    text-decoration: none;
}

.ff-pay-qr .ff-bill-qr-code {
    width: 170px;
    min-height: 170px;
    padding: 8px;
    border-radius: 11px;
    background: #fff;
}

.ff-pay-hub-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    border-top: 1px solid #e0e8ed;
    background: #fff;
    color: #7a8d9a;
    font-size: .64rem;
    font-weight: 750;
}

.ff-pay-hub-foot i {
    color: #0b8876;
}

@media (max-width: 520px) {
    .ff-pay-hub {
        width: calc(100% - 16px);
        max-height: calc(100dvh - 16px);
        border-radius: 17px;
    }

    .ff-pay-hub-shell {
        border-radius: 17px;
    }

    .ff-pay-hub-head {
        min-height: 72px;
        padding: 12px 14px;
    }

    .ff-pay-hub-logo {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        border-radius: 12px;
    }

    .ff-pay-hub-brand strong {
        font-size: .95rem;
    }

    .ff-pay-hub-brand small {
        font-size: .6rem;
    }

    .ff-pay-hub-form {
        padding: 11px;
    }

    .ff-pay-search {
        grid-template-columns: 20px minmax(0, 1fr) 43px;
        padding-left: 11px;
    }

    .ff-pay-search button {
        min-width: 43px;
        width: 43px;
        padding: 0;
    }

    .ff-pay-search button span {
        display: none;
    }

    .ff-pay-result {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .ff-pay-account {
        align-items: flex-start;
        flex-direction: column-reverse;
        gap: 7px;
    }

    .ff-pay-account strong {
        max-width: 100%;
    }

    .ff-pay-action {
        width: 100%;
        min-height: 46px;
        flex-direction: row;
    }

    .ff-pay-result > .ff-bill-pay-note,
    .ff-pay-result > .ff-payment-methods,
    .ff-pay-result > .ff-pay-qr {
        grid-column: 1;
    }

    .ff-pay-qr {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
}

/* Fast-Fiber Pay hub */
.ff-pay-hub {
    width: min(590px, calc(100% - 28px));
    max-height: min(780px, calc(100dvh - 28px));
    margin: auto;
    padding: 0;
    overflow: auto;
    border: 0;
    border-radius: 22px;
    background: transparent;
    color: #17364b;
    box-shadow: 0 32px 90px rgba(7, 31, 53, .34);
}

.ff-pay-hub::backdrop {
    background: rgba(8, 28, 48, .66);
    backdrop-filter: blur(7px);
}

.ff-pay-hub [hidden] {
    display: none !important;
}

.ff-pay-hub-shell {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 22px;
    background: #f4f7f9;
}

.ff-pay-hub-head {
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 20px;
    border-bottom: 1px solid #e1e8ed;
    background: #fff;
}

.ff-pay-hub-brand {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ff-pay-hub-logo {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    flex: 0 0 48px;
    padding: 5px;
    border: 1px solid #dce6ec;
    border-radius: 14px;
    background: linear-gradient(145deg, #fff, #edf8f7);
}

.ff-pay-hub-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ff-pay-hub-brand strong,
.ff-pay-hub-brand small {
    display: block;
}

.ff-pay-hub-brand strong {
    color: #12344d;
    font-size: 1.08rem;
    letter-spacing: -.02em;
}

.ff-pay-hub-brand small {
    margin-top: 3px;
    color: #718594;
    font-size: .67rem;
}

.ff-pay-hub-head > button {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    border: 1px solid #dde6eb;
    border-radius: 11px;
    background: #f5f8fa;
    color: #607685;
    cursor: pointer;
    transition: background .18s, color .18s;
}

.ff-pay-hub-head > button:hover {
    background: #e8f2f3;
    color: #08768b;
}

.ff-pay-hub-form {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.ff-pay-search {
    min-height: 56px;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 5px 5px 5px 15px;
    border: 1px solid #d6e1e8;
    border-radius: 14px;
    background: #fff;
    color: #6f8493;
    box-shadow: 0 6px 18px rgba(20, 54, 78, .05);
    transition: border-color .18s, box-shadow .18s;
}

.ff-pay-search:focus-within {
    border-color: #168497;
    box-shadow: 0 0 0 4px rgba(22, 132, 151, .1);
}

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

.ff-pay-search > i {
    color: #0b7b91;
}

.ff-pay-search input {
    width: 100%;
    min-width: 0;
    height: 44px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #16374f;
    font-size: .94rem;
    font-weight: 800;
    letter-spacing: .04em;
}

.ff-pay-search input::placeholder {
    color: #91a0aa;
    font-weight: 650;
    letter-spacing: 0;
}

.ff-pay-search button {
    min-width: 94px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: #087b91;
    color: #fff;
    font-size: .76rem;
    font-weight: 900;
    cursor: pointer;
}

.ff-pay-search button:disabled {
    cursor: wait;
    opacity: .6;
}

.ff-pay-result {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 13px;
    padding: 16px;
    border: 1px solid #d8e3e9;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 9px 24px rgba(19, 52, 75, .06);
}

.ff-pay-account {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e4eaee;
}

.ff-pay-account span {
    width: max-content;
    padding: 5px 8px;
    border-radius: 999px;
    background: #e8f6f2;
    color: #14725f;
    font-size: .65rem;
    font-weight: 900;
}

.status-due .ff-pay-account span,
.status-overdue .ff-pay-account span {
    background: #fff0d9;
    color: #9a6007;
}

.ff-pay-account strong {
    min-width: 0;
    overflow: hidden;
    color: #627887;
    font-size: .7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ff-pay-balance {
    min-width: 0;
    padding: 15px 17px;
    border-radius: 13px;
    background: linear-gradient(118deg, #075ea9, #087f91 72%);
    color: #fff;
}

.ff-pay-balance span,
.ff-pay-balance strong,
.ff-pay-balance small {
    display: block;
}

.ff-pay-balance span {
    color: rgba(255, 255, 255, .7);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ff-pay-balance strong {
    margin-top: 6px;
    font-size: clamp(2rem, 8vw, 2.65rem);
    line-height: 1;
    letter-spacing: -.05em;
}

.ff-pay-balance small {
    margin-top: 10px;
    color: rgba(255, 255, 255, .76);
    font-size: .7rem;
    line-height: 1.4;
}

.ff-pay-action {
    width: 102px;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    border: 0;
    border-radius: 13px;
    background: #ffb51b;
    color: #17364b;
    font-size: .86rem;
    font-weight: 950;
    cursor: pointer;
    box-shadow: inset 0 1px rgba(255, 255, 255, .45);
    transition: transform .18s, box-shadow .18s;
}

.ff-pay-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(205, 139, 0, .2);
}

.ff-pay-result > .ff-bill-pay-note,
.ff-pay-result > .ff-payment-methods,
.ff-pay-result > .ff-pay-qr {
    grid-column: 1 / -1;
}

.ff-pay-hub .ff-bill-pay-note,
.ff-pay-hub .ff-bill-error,
.ff-pay-hub .ff-bill-return {
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: .72rem;
    line-height: 1.45;
}

.ff-pay-hub .ff-bill-pay-note {
    background: #eef4f7;
    color: #607787;
}

.ff-pay-hub .ff-bill-error {
    border: 1px solid #efcccc;
    background: #fff1f1;
    color: #a43f3f;
}

.ff-pay-hub .ff-bill-return {
    border: 1px solid #cfe5dc;
    background: #eef8f4;
    color: #1b6d59;
}

.ff-pay-hub .ff-payment-methods {
    margin: 0;
    border: 0;
    border-radius: 12px;
    background: #f2f6f8;
}

.ff-pay-qr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px;
    align-items: center;
    gap: 16px;
    padding: 15px;
    border-radius: 12px;
    background: #f2f6f8;
}

.ff-pay-qr .ff-bill-qr-copy span,
.ff-pay-qr .ff-bill-qr-copy strong,
.ff-pay-qr .ff-bill-qr-copy small {
    display: block;
}

.ff-pay-qr .ff-bill-qr-copy span {
    color: #08768b;
    font-size: .65rem;
    font-weight: 900;
    text-transform: uppercase;
}

.ff-pay-qr .ff-bill-qr-copy strong {
    margin-top: 4px;
    color: #17364b;
    font-size: .9rem;
}

.ff-pay-qr .ff-bill-qr-copy small {
    margin-top: 5px;
    color: #6c8190;
    font-size: .68rem;
}

.ff-pay-qr .ff-bill-qr-copy a {
    min-height: 37px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 11px;
    padding: 0 11px;
    border-radius: 9px;
    background: #087b91;
    color: #fff;
    font-size: .7rem;
    font-weight: 850;
    text-decoration: none;
}

.ff-pay-qr .ff-bill-qr-code {
    width: 170px;
    min-height: 170px;
    padding: 8px;
    border-radius: 11px;
    background: #fff;
}

.ff-pay-hub-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    border-top: 1px solid #e0e8ed;
    background: #fff;
    color: #7a8d9a;
    font-size: .64rem;
    font-weight: 750;
}

.ff-pay-hub-foot i {
    color: #0b8876;
}

@media (max-width: 520px) {
    .ff-pay-hub {
        width: calc(100% - 16px);
        max-height: calc(100dvh - 16px);
        border-radius: 17px;
    }

    .ff-pay-hub-shell {
        border-radius: 17px;
    }

    .ff-pay-hub-head {
        min-height: 72px;
        padding: 12px 14px;
    }

    .ff-pay-hub-logo {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        border-radius: 12px;
    }

    .ff-pay-hub-brand strong {
        font-size: .95rem;
    }

    .ff-pay-hub-brand small {
        font-size: .6rem;
    }

    .ff-pay-hub-form {
        padding: 11px;
    }

    .ff-pay-search {
        grid-template-columns: 20px minmax(0, 1fr) 43px;
        padding-left: 11px;
    }

    .ff-pay-search button {
        min-width: 43px;
        width: 43px;
        padding: 0;
    }

    .ff-pay-search button span {
        display: none;
    }

    .ff-pay-result {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .ff-pay-account {
        align-items: flex-start;
        flex-direction: column-reverse;
        gap: 7px;
    }

    .ff-pay-account strong {
        max-width: 100%;
    }

    .ff-pay-action {
        width: 100%;
        min-height: 46px;
        flex-direction: row;
    }

    .ff-pay-result > .ff-bill-pay-note,
    .ff-pay-result > .ff-payment-methods,
    .ff-pay-result > .ff-pay-qr {
        grid-column: 1;
    }

    .ff-pay-qr {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
}

/* Public invoice document */
.ff-public-invoice {
    width: min(650px, calc(100% - 28px));
    max-height: min(850px, calc(100dvh - 28px));
    margin: auto;
    padding: 0;
    overflow: auto;
    border: 0;
    border-radius: 8px;
    background: #fff;
    color: #263b49;
    box-shadow: 0 28px 90px rgba(8, 25, 39, .38);
}

.ff-public-invoice::backdrop {
    background: rgba(9, 25, 38, .68);
    backdrop-filter: blur(6px);
}

.ff-public-invoice [hidden] {
    display: none !important;
}

.ff-public-invoice-sheet {
    min-height: 100%;
    background: #fff;
}

.ff-public-invoice-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 38px;
    align-items: center;
    gap: 24px;
    min-height: 104px;
    padding: 20px 24px;
    border-top: 6px solid #087b91;
    border-bottom: 1px solid #dce3e7;
}

.ff-public-invoice-brand {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ff-public-invoice-logo {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    flex: 0 0 52px;
}

.ff-public-invoice-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ff-public-invoice-brand strong,
.ff-public-invoice-brand small,
.ff-public-invoice-title strong,
.ff-public-invoice-title small {
    display: block;
}

.ff-public-invoice-brand strong {
    color: #16364b;
    font-size: 1.06rem;
    letter-spacing: -.02em;
}

.ff-public-invoice-brand small {
    margin-top: 3px;
    color: #7a8b96;
    font-size: .68rem;
}

.ff-public-invoice-title {
    text-align: right;
}

.ff-public-invoice-title strong {
    color: #16364b;
    font-size: 1.6rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ff-public-invoice-title small {
    margin-top: 2px;
    color: #83919a;
    font-size: .63rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ff-public-invoice-head > button {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid #d9e1e6;
    border-radius: 50%;
    background: #fff;
    color: #6d7f8b;
    cursor: pointer;
}

.ff-public-invoice-head > button:hover {
    background: #f0f4f6;
    color: #16364b;
}

.ff-public-invoice-form {
    display: grid;
    gap: 14px;
    padding: 20px 24px 22px;
}

.ff-public-invoice-search {
    min-height: 52px;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 4px 4px 4px 14px;
    border: 1px solid #d4dfe5;
    border-radius: 7px;
    background: #f7f9fa;
    color: #69808e;
}

.ff-public-invoice-search:focus-within {
    border-color: #087b91;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(8, 123, 145, .09);
}

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

.ff-public-invoice-search > i {
    color: #087b91;
}

.ff-public-invoice-search input {
    min-width: 0;
    height: 42px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #18384d;
    font-size: .9rem;
    font-weight: 750;
    letter-spacing: .04em;
}

.ff-public-invoice-search input::placeholder {
    color: #94a2aa;
    font-weight: 600;
    letter-spacing: 0;
}

.ff-public-invoice-search button {
    min-width: 118px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    border: 0;
    border-radius: 5px;
    background: #163f58;
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    cursor: pointer;
}

.ff-public-invoice-search button:disabled {
    cursor: wait;
    opacity: .6;
}

.ff-public-invoice-body {
    padding-top: 4px;
}

.ff-public-invoice-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, .72fr);
    gap: 28px;
    padding: 18px 0 20px;
}

.ff-public-invoice-meta > div > span,
.ff-public-invoice-meta > div > strong,
.ff-public-invoice-meta > div > em {
    display: block;
}

.ff-public-invoice-meta > div > span,
.ff-public-invoice-meta dt {
    color: #83919a;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.ff-public-invoice-meta > div > strong {
    margin-top: 7px;
    color: #213d4f;
    font-size: .8rem;
    line-height: 1.45;
}

.ff-public-invoice-meta > div > em {
    width: max-content;
    margin-top: 8px;
    padding: 4px 7px;
    border-radius: 4px;
    background: #e8f5f1;
    color: #176d5c;
    font-size: .61rem;
    font-style: normal;
    font-weight: 850;
}

.status-due .ff-public-invoice-meta > div > em,
.status-overdue .ff-public-invoice-meta > div > em {
    background: #fff0d9;
    color: #96600d;
}

.ff-public-invoice-meta dl {
    margin: 0;
}

.ff-public-invoice-meta dl > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 0;
    border-bottom: 1px solid #e3e9ed;
}

.ff-public-invoice-meta dd {
    margin: 0;
    color: #294455;
    font-size: .7rem;
    font-weight: 750;
    text-align: right;
}

.ff-public-invoice-table {
    border: 1px solid #d9e2e7;
    border-radius: 5px;
    overflow: hidden;
}

.ff-public-invoice-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 130px;
    gap: 16px;
    padding: 13px 15px;
    border-bottom: 1px solid #e4eaee;
    color: #2b4556;
    font-size: .74rem;
}

.ff-public-invoice-row:last-child {
    border-bottom: 0;
}

.ff-public-invoice-row > :last-child {
    text-align: right;
}

.ff-public-invoice-row.head {
    padding-block: 10px;
    background: #163f58;
    color: #fff;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ff-public-invoice-row.credit {
    background: #f8fafb;
    color: #70828e;
    font-size: .69rem;
}

.ff-public-invoice-total {
    width: min(320px, 100%);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin: 17px 0 0 auto;
    padding: 14px 0 5px;
    border-top: 2px solid #163f58;
}

.ff-public-invoice-total span > small,
.ff-public-invoice-total span > strong {
    display: block;
}

.ff-public-invoice-total small {
    color: #778a96;
    font-size: .65rem;
    line-height: 1.4;
}

.ff-public-invoice-total span > strong {
    margin-top: 5px;
    color: #284253;
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ff-public-invoice-total > strong {
    color: #12364d;
    font-size: 1.7rem;
    letter-spacing: -.04em;
    white-space: nowrap;
}

.ff-public-invoice-pay {
    min-width: 190px;
    min-height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 15px 0 0 auto;
    padding: 0 18px;
    border: 0;
    border-radius: 5px;
    background: #087b91;
    color: #fff;
    font-size: .76rem;
    font-weight: 850;
    cursor: pointer;
}

.ff-public-invoice-pay:hover {
    background: #066a7d;
}

.ff-public-invoice-body > .ff-bill-pay-note,
.ff-public-invoice-body > .ff-payment-methods,
.ff-public-invoice-body > .ff-public-invoice-qr {
    margin-top: 14px;
}

.ff-public-invoice .ff-bill-pay-note,
.ff-public-invoice .ff-bill-error,
.ff-public-invoice .ff-bill-return {
    margin: 0;
    padding: 10px 12px;
    border-radius: 5px;
    font-size: .7rem;
    line-height: 1.45;
}

.ff-public-invoice .ff-bill-pay-note {
    background: #f0f5f7;
    color: #617683;
}

.ff-public-invoice .ff-bill-error {
    border: 1px solid #edcccc;
    background: #fff2f2;
    color: #a03f3f;
}

.ff-public-invoice .ff-bill-return {
    border: 1px solid #cce3da;
    background: #eff8f4;
    color: #1a6c58;
}

.ff-public-invoice .ff-payment-methods {
    border: 1px solid #dbe3e7;
    border-radius: 5px;
    background: #f7f9fa;
}

.ff-public-invoice-qr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px;
    align-items: center;
    gap: 18px;
    padding: 15px;
    border: 1px solid #dbe3e7;
    border-radius: 5px;
    background: #f7f9fa;
}

.ff-public-invoice-qr .ff-bill-qr-copy span,
.ff-public-invoice-qr .ff-bill-qr-copy strong,
.ff-public-invoice-qr .ff-bill-qr-copy small {
    display: block;
}

.ff-public-invoice-qr .ff-bill-qr-copy span {
    color: #087b91;
    font-size: .62rem;
    font-weight: 850;
    text-transform: uppercase;
}

.ff-public-invoice-qr .ff-bill-qr-copy strong {
    margin-top: 5px;
    color: #213e50;
    font-size: .86rem;
}

.ff-public-invoice-qr .ff-bill-qr-copy small {
    margin-top: 4px;
    color: #6f828f;
    font-size: .67rem;
}

.ff-public-invoice-qr .ff-bill-qr-copy a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 11px;
    padding: 0 11px;
    border-radius: 4px;
    background: #163f58;
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
    text-decoration: none;
}

.ff-public-invoice-qr .ff-bill-qr-code {
    width: 170px;
    min-height: 170px;
    padding: 8px;
    border: 1px solid #dbe3e7;
    border-radius: 4px;
    background: #fff;
}

.ff-public-invoice-foot {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 24px;
    border-top: 1px solid #dce4e8;
    background: #f7f9fa;
    color: #748792;
    font-size: .63rem;
}

.ff-public-invoice-foot span:last-child {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ff-public-invoice-foot i {
    color: #087b91;
}

@media (max-width: 560px) {
    .ff-public-invoice {
        width: calc(100% - 14px);
        max-height: calc(100dvh - 14px);
        border-radius: 6px;
    }

    .ff-public-invoice-head {
        grid-template-columns: minmax(0, 1fr) 34px;
        gap: 12px;
        min-height: 82px;
        padding: 13px 14px;
    }

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

    .ff-public-invoice-logo {
        width: 43px;
        height: 43px;
        flex-basis: 43px;
    }

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

    .ff-public-invoice-search {
        grid-template-columns: 20px minmax(0, 1fr) 43px;
        padding-left: 11px;
    }

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

    .ff-public-invoice-search button span {
        display: none;
    }

    .ff-public-invoice-meta {
        grid-template-columns: 1fr;
        gap: 14px;
        padding-block: 13px;
    }

    .ff-public-invoice-row {
        grid-template-columns: minmax(0, 1fr) 98px;
        padding-inline: 11px;
    }

    .ff-public-invoice-total {
        width: 100%;
    }

    .ff-public-invoice-total > strong {
        font-size: 1.45rem;
    }

    .ff-public-invoice-pay {
        width: 100%;
    }

    .ff-public-invoice-qr {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .ff-public-invoice-foot {
        justify-content: center;
        padding: 0 13px;
    }

    .ff-public-invoice-foot > span:first-child {
        display: none;
    }
}

/* Public invoice document */
.ff-public-invoice {
    width: min(650px, calc(100% - 28px));
    max-height: min(850px, calc(100dvh - 28px));
    margin: auto;
    padding: 0;
    overflow: auto;
    border: 0;
    border-radius: 8px;
    background: #fff;
    color: #263b49;
    box-shadow: 0 28px 90px rgba(8, 25, 39, .38);
}

.ff-public-invoice::backdrop {
    background: rgba(9, 25, 38, .68);
    backdrop-filter: blur(6px);
}

.ff-public-invoice [hidden] {
    display: none !important;
}

.ff-public-invoice-sheet {
    min-height: 100%;
    background: #fff;
}

.ff-public-invoice-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 38px;
    align-items: center;
    gap: 24px;
    min-height: 104px;
    padding: 20px 24px;
    border-top: 6px solid #087b91;
    border-bottom: 1px solid #dce3e7;
}

.ff-public-invoice-brand {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ff-public-invoice-logo {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    flex: 0 0 52px;
}

.ff-public-invoice-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ff-public-invoice-brand strong,
.ff-public-invoice-brand small,
.ff-public-invoice-title strong,
.ff-public-invoice-title small {
    display: block;
}

.ff-public-invoice-brand strong {
    color: #16364b;
    font-size: 1.06rem;
    letter-spacing: -.02em;
}

.ff-public-invoice-brand small {
    margin-top: 3px;
    color: #7a8b96;
    font-size: .68rem;
}

.ff-public-invoice-title {
    text-align: right;
}

.ff-public-invoice-title strong {
    color: #16364b;
    font-size: 1.6rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ff-public-invoice-title small {
    margin-top: 2px;
    color: #83919a;
    font-size: .63rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ff-public-invoice-head > button {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid #d9e1e6;
    border-radius: 50%;
    background: #fff;
    color: #6d7f8b;
    cursor: pointer;
}

.ff-public-invoice-head > button:hover {
    background: #f0f4f6;
    color: #16364b;
}

.ff-public-invoice-form {
    display: grid;
    gap: 14px;
    padding: 20px 24px 22px;
}

.ff-public-invoice-search {
    min-height: 52px;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 4px 4px 4px 14px;
    border: 1px solid #d4dfe5;
    border-radius: 7px;
    background: #f7f9fa;
    color: #69808e;
}

.ff-public-invoice-search:focus-within {
    border-color: #087b91;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(8, 123, 145, .09);
}

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

.ff-public-invoice-search > i {
    color: #087b91;
}

.ff-public-invoice-search input {
    min-width: 0;
    height: 42px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #18384d;
    font-size: .9rem;
    font-weight: 750;
    letter-spacing: .04em;
}

.ff-public-invoice-search input::placeholder {
    color: #94a2aa;
    font-weight: 600;
    letter-spacing: 0;
}

.ff-public-invoice-search button {
    min-width: 118px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    border: 0;
    border-radius: 5px;
    background: #163f58;
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    cursor: pointer;
}

.ff-public-invoice-search button:disabled {
    cursor: wait;
    opacity: .6;
}

.ff-public-invoice-body {
    padding-top: 4px;
}

.ff-public-invoice-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, .72fr);
    gap: 28px;
    padding: 18px 0 20px;
}

.ff-public-invoice-meta > div > span,
.ff-public-invoice-meta > div > strong,
.ff-public-invoice-meta > div > em {
    display: block;
}

.ff-public-invoice-meta > div > span,
.ff-public-invoice-meta dt {
    color: #83919a;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.ff-public-invoice-meta > div > strong {
    margin-top: 7px;
    color: #213d4f;
    font-size: .8rem;
    line-height: 1.45;
}

.ff-public-invoice-meta > div > em {
    width: max-content;
    margin-top: 8px;
    padding: 4px 7px;
    border-radius: 4px;
    background: #e8f5f1;
    color: #176d5c;
    font-size: .61rem;
    font-style: normal;
    font-weight: 850;
}

.status-due .ff-public-invoice-meta > div > em,
.status-overdue .ff-public-invoice-meta > div > em {
    background: #fff0d9;
    color: #96600d;
}

.ff-public-invoice-meta dl {
    margin: 0;
}

.ff-public-invoice-meta dl > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 0;
    border-bottom: 1px solid #e3e9ed;
}

.ff-public-invoice-meta dd {
    margin: 0;
    color: #294455;
    font-size: .7rem;
    font-weight: 750;
    text-align: right;
}

.ff-public-invoice-table {
    border: 1px solid #d9e2e7;
    border-radius: 5px;
    overflow: hidden;
}

.ff-public-invoice-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 130px;
    gap: 16px;
    padding: 13px 15px;
    border-bottom: 1px solid #e4eaee;
    color: #2b4556;
    font-size: .74rem;
}

.ff-public-invoice-row:last-child {
    border-bottom: 0;
}

.ff-public-invoice-row > :last-child {
    text-align: right;
}

.ff-public-invoice-row.head {
    padding-block: 10px;
    background: #163f58;
    color: #fff;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ff-public-invoice-row.credit {
    background: #f8fafb;
    color: #70828e;
    font-size: .69rem;
}

.ff-public-invoice-total {
    width: min(320px, 100%);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin: 17px 0 0 auto;
    padding: 14px 0 5px;
    border-top: 2px solid #163f58;
}

.ff-public-invoice-total span > small,
.ff-public-invoice-total span > strong {
    display: block;
}

.ff-public-invoice-total small {
    color: #778a96;
    font-size: .65rem;
    line-height: 1.4;
}

.ff-public-invoice-total span > strong {
    margin-top: 5px;
    color: #284253;
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ff-public-invoice-total > strong {
    color: #12364d;
    font-size: 1.7rem;
    letter-spacing: -.04em;
    white-space: nowrap;
}

.ff-public-invoice-pay {
    min-width: 190px;
    min-height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 15px 0 0 auto;
    padding: 0 18px;
    border: 0;
    border-radius: 5px;
    background: #087b91;
    color: #fff;
    font-size: .76rem;
    font-weight: 850;
    cursor: pointer;
}

.ff-public-invoice-pay:hover {
    background: #066a7d;
}

.ff-public-invoice-body > .ff-bill-pay-note,
.ff-public-invoice-body > .ff-payment-methods,
.ff-public-invoice-body > .ff-public-invoice-qr {
    margin-top: 14px;
}

.ff-public-invoice .ff-bill-pay-note,
.ff-public-invoice .ff-bill-error,
.ff-public-invoice .ff-bill-return {
    margin: 0;
    padding: 10px 12px;
    border-radius: 5px;
    font-size: .7rem;
    line-height: 1.45;
}

.ff-public-invoice .ff-bill-pay-note {
    background: #f0f5f7;
    color: #617683;
}

.ff-public-invoice .ff-bill-error {
    border: 1px solid #edcccc;
    background: #fff2f2;
    color: #a03f3f;
}

.ff-public-invoice .ff-bill-return {
    border: 1px solid #cce3da;
    background: #eff8f4;
    color: #1a6c58;
}

.ff-public-invoice .ff-payment-methods {
    border: 1px solid #dbe3e7;
    border-radius: 5px;
    background: #f7f9fa;
}

.ff-public-invoice-qr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px;
    align-items: center;
    gap: 18px;
    padding: 15px;
    border: 1px solid #dbe3e7;
    border-radius: 5px;
    background: #f7f9fa;
}

.ff-public-invoice-qr .ff-bill-qr-copy span,
.ff-public-invoice-qr .ff-bill-qr-copy strong,
.ff-public-invoice-qr .ff-bill-qr-copy small {
    display: block;
}

.ff-public-invoice-qr .ff-bill-qr-copy span {
    color: #087b91;
    font-size: .62rem;
    font-weight: 850;
    text-transform: uppercase;
}

.ff-public-invoice-qr .ff-bill-qr-copy strong {
    margin-top: 5px;
    color: #213e50;
    font-size: .86rem;
}

.ff-public-invoice-qr .ff-bill-qr-copy small {
    margin-top: 4px;
    color: #6f828f;
    font-size: .67rem;
}

.ff-public-invoice-qr .ff-bill-qr-copy a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 11px;
    padding: 0 11px;
    border-radius: 4px;
    background: #163f58;
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
    text-decoration: none;
}

.ff-public-invoice-qr .ff-bill-qr-code {
    width: 170px;
    min-height: 170px;
    padding: 8px;
    border: 1px solid #dbe3e7;
    border-radius: 4px;
    background: #fff;
}

.ff-public-invoice-foot {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 24px;
    border-top: 1px solid #dce4e8;
    background: #f7f9fa;
    color: #748792;
    font-size: .63rem;
}

.ff-public-invoice-foot span:last-child {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ff-public-invoice-foot i {
    color: #087b91;
}

@media (max-width: 560px) {
    .ff-public-invoice {
        width: calc(100% - 14px);
        max-height: calc(100dvh - 14px);
        border-radius: 6px;
    }

    .ff-public-invoice-head {
        grid-template-columns: minmax(0, 1fr) 34px;
        gap: 12px;
        min-height: 82px;
        padding: 13px 14px;
    }

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

    .ff-public-invoice-logo {
        width: 43px;
        height: 43px;
        flex-basis: 43px;
    }

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

    .ff-public-invoice-search {
        grid-template-columns: 20px minmax(0, 1fr) 43px;
        padding-left: 11px;
    }

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

    .ff-public-invoice-search button span {
        display: none;
    }

    .ff-public-invoice-meta {
        grid-template-columns: 1fr;
        gap: 14px;
        padding-block: 13px;
    }

    .ff-public-invoice-row {
        grid-template-columns: minmax(0, 1fr) 98px;
        padding-inline: 11px;
    }

    .ff-public-invoice-total {
        width: 100%;
    }

    .ff-public-invoice-total > strong {
        font-size: 1.45rem;
    }

    .ff-public-invoice-pay {
        width: 100%;
    }

    .ff-public-invoice-qr {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .ff-public-invoice-foot {
        justify-content: center;
        padding: 0 13px;
    }

    .ff-public-invoice-foot > span:first-child {
        display: none;
    }
}

/* Exact generated PDF preview inside the public invoice */
.ff-public-pdf-toolbar {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 2px;
}

.ff-public-pdf-toolbar > span {
    color: #71838e;
    font-size: .68rem;
    font-weight: 700;
}

.ff-public-pdf-toolbar > span strong {
    margin-left: 4px;
    color: #223e50;
}

.ff-public-pdf-toolbar > a {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid #d3dfe5;
    border-radius: 4px;
    background: #fff;
    color: #1c526a;
    font-size: .66rem;
    font-weight: 800;
    text-decoration: none;
}

.ff-public-pdf-toolbar > a:hover {
    border-color: #087b91;
    color: #087b91;
}

.ff-public-pdf-viewer {
    position: relative;
    min-height: 480px;
    max-height: min(64vh, 720px);
    overflow: auto;
    border: 1px solid #cfd9df;
    border-radius: 4px;
    background: #e8ecef;
    box-shadow: inset 0 1px 4px rgba(26, 47, 61, .08);
}

.ff-public-pdf-viewer > iframe {
    width: 100%;
    min-height: min(64vh, 720px);
    display: block;
    border: 0;
    background: #fff;
}

.ff-public-pdf-loading,
.ff-public-pdf-error {
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    color: #71838e;
    font-size: .72rem;
}

.ff-public-pdf-loading > span {
    width: 28px;
    height: 28px;
    border: 3px solid #d2dce2;
    border-top-color: #087b91;
    border-radius: 50%;
    animation: ff-public-pdf-spin .75s linear infinite;
}

.ff-public-pdf-loading strong {
    font-size: .72rem;
}

.ff-public-pdf-error i {
    color: #a15a5a;
    font-size: 1.6rem;
}

@keyframes ff-public-pdf-spin {
    to { transform: rotate(360deg); }
}

.ff-public-invoice-body > .ff-public-invoice-pay {
    width: 100%;
    min-height: 48px;
    margin-top: 14px;
    border-radius: 5px;
}

@media (max-width: 560px) {
    .ff-public-pdf-viewer,
    .ff-public-pdf-loading,
    .ff-public-pdf-error {
        min-height: 360px;
    }

    .ff-public-pdf-viewer {
        max-height: 58vh;
    }

    .ff-public-pdf-viewer > iframe {
        min-height: 58vh;
    }
}

/* Exact generated PDF preview inside the public invoice */
.ff-public-pdf-toolbar {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 2px;
}

.ff-public-pdf-toolbar > span {
    color: #71838e;
    font-size: .68rem;
    font-weight: 700;
}

.ff-public-pdf-toolbar > span strong {
    margin-left: 4px;
    color: #223e50;
}

.ff-public-pdf-toolbar > a {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid #d3dfe5;
    border-radius: 4px;
    background: #fff;
    color: #1c526a;
    font-size: .66rem;
    font-weight: 800;
    text-decoration: none;
}

.ff-public-pdf-toolbar > a:hover {
    border-color: #087b91;
    color: #087b91;
}

.ff-public-pdf-viewer {
    position: relative;
    min-height: 480px;
    max-height: min(64vh, 720px);
    overflow: auto;
    border: 1px solid #cfd9df;
    border-radius: 4px;
    background: #e8ecef;
    box-shadow: inset 0 1px 4px rgba(26, 47, 61, .08);
}

.ff-public-pdf-viewer > img {
    width: 100%;
    height: auto;
    display: block;
    background: #fff;
}

.ff-public-pdf-loading,
.ff-public-pdf-error {
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    color: #71838e;
    font-size: .72rem;
}

.ff-public-pdf-loading > span {
    width: 28px;
    height: 28px;
    border: 3px solid #d2dce2;
    border-top-color: #087b91;
    border-radius: 50%;
    animation: ff-public-pdf-spin .75s linear infinite;
}

.ff-public-pdf-loading strong {
    font-size: .72rem;
}

.ff-public-pdf-error i {
    color: #a15a5a;
    font-size: 1.6rem;
}

@keyframes ff-public-pdf-spin {
    to { transform: rotate(360deg); }
}

.ff-public-invoice-body > .ff-public-invoice-pay {
    width: 100%;
    min-height: 48px;
    margin-top: 14px;
    border-radius: 5px;
}

@media (max-width: 560px) {
    .ff-public-pdf-viewer,
    .ff-public-pdf-loading,
    .ff-public-pdf-error {
        min-height: 360px;
    }

    .ff-public-pdf-viewer {
        max-height: 58vh;
    }
}

/* Homepage account utility */
.ff-mobile-bill {
    display: none;
}

.ff-bill-link {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid rgba(10, 78, 113, .2);
    border-radius: 11px;
    background: rgba(255, 255, 255, .72);
    color: #123b58;
    font-size: .82rem;
    font-weight: 850;
    text-decoration: none;
    backdrop-filter: blur(10px);
    transition: border-color .2s, background .2s, transform .2s;
}

.ff-bill-link:hover {
    border-color: #1188a1;
    background: #fff;
    color: #086d83;
    transform: translateY(-1px);
}

.ff-header-actions .ff-login {
    isolation: isolate;
    min-width: 124px;
    min-height: 44px;
    gap: 8px;
    padding: 4px 11px 4px 5px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 999px;
    background: linear-gradient(100deg, #075bc2, #009d8a 58%, #612dbb);
    background-size: 100% 100%;
    color: #fff;
    box-shadow: 0 9px 22px rgba(31, 74, 174, .22), inset 0 1px rgba(255, 255, 255, .3);
    animation: none;
    transform: none;
    transition: filter .2s, box-shadow .2s, transform .2s;
}

.ff-header-actions .ff-login::before,
.ff-header-actions .ff-login::after {
    content: none;
}

.ff-header-actions .ff-login:hover {
    filter: brightness(1.06) saturate(1.04);
    transform: translateY(-2px);
    box-shadow: 0 12px 27px rgba(31, 74, 174, .28), inset 0 1px rgba(255, 255, 255, .35);
}

.ff-header-actions .ff-login:active {
    transform: translateY(0);
    box-shadow: 0 6px 15px rgba(31, 74, 174, .2), inset 0 1px rgba(255, 255, 255, .3);
}

.ff-header-actions .ff-login .ff-login-icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
}

.ff-header-actions .ff-login strong {
    font-size: .8rem;
}

.ff-nav .ff-mobile-cta {
    background: linear-gradient(100deg, #075bc2, #009d8a 58%, #612dbb);
}

.ff-bill-hero-bar {
    width: min(455px, 100%);
    min-height: 56px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    margin-top: 14px;
    padding: 6px;
    border: 2px solid transparent;
    border-radius: 999px;
    background: linear-gradient(rgba(255, 255, 255, .94), rgba(255, 255, 255, .94)) padding-box, linear-gradient(100deg, #075bc2, #009d8a 52%, #612dbb) border-box;
    box-shadow: 0 12px 28px rgba(24, 70, 172, .16), inset 0 1px rgba(255, 255, 255, .9);
    backdrop-filter: blur(14px);
}

.ff-bill-hero-bar > i {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(145deg, #e5f4ff, #e4f7f1);
    color: #075da7;
    font-size: 1rem;
}

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

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

.ff-bill-hero-bar input {
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 0 7px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #12344f;
    font-size: .92rem;
    font-weight: 800;
    letter-spacing: .025em;
}

.ff-bill-hero-bar input::placeholder {
    color: #718396;
    font-weight: 650;
    letter-spacing: 0;
}

.ff-bill-hero-bar button {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 15px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(100deg, #075bc2, #009d8a 58%, #612dbb);
    color: #fff;
    font-size: .82rem;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 7px 17px rgba(31, 74, 174, .2), inset 0 1px rgba(255, 255, 255, .3);
    transition: filter .2s, transform .2s;
}

.ff-bill-hero-bar button:hover {
    filter: brightness(1.06) saturate(1.05);
    transform: translateX(1px);
}

.ff-bill-launch {
    width: min(455px, 100%);
    min-height: 58px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto 26px;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 8px 11px;
    border: 1px solid rgba(13, 85, 111, .2);
    border-radius: 15px;
    background: rgba(255, 255, 255, .9);
    color: #153c57;
    text-align: left;
    box-shadow: 0 14px 36px rgba(10, 52, 82, .13);
    backdrop-filter: blur(14px);
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

.ff-bill-launch:hover {
    border-color: #0b8198;
    box-shadow: 0 17px 40px rgba(10, 77, 101, .18);
    transform: translateY(-2px);
}

.ff-bill-launch > i:first-child {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #dff2f3;
    color: #08768b;
}

.ff-bill-launch span,
.ff-bill-launch small,
.ff-bill-launch strong {
    display: block;
}

.ff-bill-launch small {
    color: #718396;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ff-bill-launch strong {
    margin-top: 2px;
    font-size: .92rem;
}

.ff-bill-launch em {
    color: #718396;
    font-size: .75rem;
    font-style: normal;
    font-weight: 700;
}

.ff-bill-launch > i:last-child {
    color: #08768b;
}

.ff-bill-dialog {
    width: min(520px, calc(100% - 28px));
    max-height: min(760px, calc(100dvh - 28px));
    margin: auto;
    padding: 0;
    overflow: auto;
    border: 1px solid rgba(31, 88, 151, .18);
    border-radius: 22px;
    background: radial-gradient(circle at 92% 5%, rgba(0, 156, 133, .1), transparent 26%), radial-gradient(circle at 5% 94%, rgba(97, 45, 187, .07), transparent 27%), repeating-linear-gradient(135deg, rgba(10, 78, 157, .018) 0 1px, transparent 1px 11px), #f9fbfd;
    color: #18354d;
    box-shadow: 0 28px 90px rgba(6, 35, 58, .3);
}

.ff-bill-dialog::backdrop {
    background: rgba(5, 28, 48, .62);
    backdrop-filter: blur(5px);
}

.ff-bill-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 22px 15px;
    border-top: 4px solid transparent;
    border-image: linear-gradient(90deg, #075bc2, #009d8a 55%, #612dbb) 1;
}

.ff-bill-dialog-head small,
.ff-bill-dialog-head strong {
    display: block;
}

.ff-bill-dialog-head small {
    color: #08768b;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ff-bill-dialog-head strong {
    margin-top: 5px;
    color: #102f4b;
    font-size: 1.55rem;
    letter-spacing: -.03em;
}

.ff-bill-dialog-head > button {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    border: 1px solid #d3e0e6;
    border-radius: 50%;
    background: #fff;
    color: #496173;
    cursor: pointer;
}

.ff-bill-dialog-copy {
    margin: 0;
    padding: 0 22px 18px;
    border-bottom: 1px solid #dce6eb;
    color: #667d8f;
    font-size: .88rem;
    line-height: 1.5;
}

.ff-bill-return {
    margin: 16px 22px 0;
    padding: 11px 12px;
    border: 1px solid #c9e4da;
    border-radius: 10px;
    background: #edf8f3;
    color: #176a53;
    font-size: .82rem;
    line-height: 1.45;
}

.ff-bill-return.failed {
    border-color: #ead6bc;
    background: #fff8eb;
    color: #8a5c18;
}

.ff-bill-dialog .ff-hero-bill-form {
    padding: 20px 22px 23px;
}

.ff-bill-dialog .ff-bill-result {
    margin-top: 14px;
}

.ff-bill-pay {
    width: 100%;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 15px 0 0;
    padding: 8px 9px 8px 15px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(100deg, #075bc2, #009d8a 58%, #612dbb);
    color: #fff;
    text-align: left;
    cursor: pointer;
}

.ff-bill-pay span,
.ff-bill-pay small,
.ff-bill-pay strong {
    display: block;
}

.ff-bill-pay small {
    color: #bce8ee;
    font-size: .72rem;
}

.ff-bill-pay strong {
    margin-top: 2px;
    font-size: .95rem;
}

.ff-bill-pay > i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #fff;
    color: #075da7;
}

.ff-bill-pay:disabled {
    cursor: wait;
    opacity: .65;
}

.ff-bill-pay-note {
    margin: 10px 0 0;
    color: #6b7e8f;
    font-size: .76rem;
    line-height: 1.45;
}

.ff-bill-qr {
    display: grid;
    justify-items: center;
    gap: 13px;
    margin-top: 14px;
    padding: 17px;
    border: 1px solid rgba(22, 105, 160, .2);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(238,248,249,.95));
    text-align: center;
}

.ff-bill-qr > div:first-child span,
.ff-bill-qr > div:first-child strong,
.ff-bill-qr > div:first-child small {
    display: block;
}

.ff-bill-qr > div:first-child span {
    color: #08768b;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ff-bill-qr > div:first-child strong {
    margin-top: 4px;
    color: #102f4b;
    font-size: 1rem;
}

.ff-bill-qr > div:first-child small {
    max-width: 310px;
    margin-top: 5px;
    color: #657b8d;
    font-size: .76rem;
    line-height: 1.45;
}

.ff-bill-qr-code {
    width: 210px;
    min-height: 210px;
    display: grid;
    place-items: center;
    padding: 10px;
    border: 1px solid #dce6eb;
    border-radius: 13px;
    background: #fff;
}

.ff-bill-qr-code img,
.ff-bill-qr-code canvas {
    display: block;
    max-width: 100%;
    height: auto !important;
}

.ff-bill-qr > a {
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 17px;
    border-radius: 10px;
    background: linear-gradient(100deg, #075bc2, #008f87);
    color: #fff;
    font-size: .8rem;
    font-weight: 850;
    text-decoration: none;
}

.ff-hero-bill-search {
    width: min(455px, 100%);
    margin-top: 14px;
    padding: 11px;
    border: 1px solid rgba(13, 85, 111, .17);
    border-radius: 16px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 14px 36px rgba(10, 52, 82, .13);
    backdrop-filter: blur(14px);
}

.ff-hero-bill-heading {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 4px 8px;
}

.ff-hero-bill-heading > i {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    flex: 0 0 31px;
    border-radius: 9px;
    background: #dff2f3;
    color: #08768b;
    font-size: .82rem;
}

.ff-hero-bill-heading small,
.ff-hero-bill-heading strong {
    display: block;
}

.ff-hero-bill-heading small {
    color: #6d7f90;
    font-size: .52rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ff-hero-bill-heading strong {
    margin-top: 1px;
    color: #153c57;
    font-size: .75rem;
}

.ff-hero-bill-form > label {
    position: relative;
    display: flex;
    align-items: center;
    height: 48px;
    padding-left: 14px;
    border: 1px solid #c8d8e1;
    border-radius: 12px;
    background: #fff;
    color: #648094;
    transition: border-color .2s, box-shadow .2s;
}

.ff-hero-bill-form > label:focus-within {
    border-color: #12869c;
    box-shadow: 0 0 0 3px rgba(18, 134, 156, .1);
}

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

.ff-hero-bill-form > label > i {
    flex: 0 0 auto;
    font-size: .92rem;
}

.ff-hero-bill-form input {
    min-width: 0;
    flex: 1;
    align-self: stretch;
    padding: 0 11px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #12344f;
    font-size: .92rem;
    font-weight: 800;
    letter-spacing: .045em;
}

.ff-hero-bill-form button {
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-right: 4px;
    padding: 0 14px;
    border: 0;
    border-radius: 9px;
    background: #0b7188;
    color: #fff;
    font-size: .8rem;
    font-weight: 900;
    cursor: pointer;
}

.ff-hero-bill-form button:disabled {
    cursor: wait;
    opacity: .62;
}

.ff-hero-bill-form .ff-bill-pay {
    width: 100%;
    height: auto;
    min-height: 52px;
    display: flex;
    margin: 15px 0 0;
    padding: 8px 9px 8px 15px;
    background: #0b7188;
    text-align: left;
}

.ff-bill-result-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 15px;
    padding-top: 13px;
    border-top: 1px solid rgba(23, 51, 78, .1);
}

.ff-bill-result-actions > span {
    color: #50677d;
    font-size: .78rem;
    line-height: 1.4;
}

.ff-bill-dialog .ff-bill-privacy {
    font-size: .75rem;
    line-height: 1.5;
}

.ff-bill-dialog .ff-bill-result-status span {
    font-size: .8rem;
}

.ff-bill-dialog .ff-bill-result-status small,
.ff-bill-dialog .ff-bill-result > small {
    font-size: .74rem;
}

.ff-bill-dialog .ff-bill-result > strong {
    font-size: 2rem;
}

.ff-bill-dialog .ff-bill-result a {
    font-size: .76rem;
}

.ff-bill-dialog .ff-bill-error {
    font-size: .8rem;
}

.ff-hero-bill-form .ff-bill-privacy {
    margin: 7px 4px 0;
}

.ff-hero-bill-form .ff-bill-result,
.ff-hero-bill-form .ff-bill-error {
    margin-top: 9px;
}

.ff-hero-bill {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px 18px;
    border: 1px solid rgba(11, 75, 105, .25);
    border-radius: 999px;
    background: rgba(255, 255, 255, .88);
    color: #0c4867;
    font-size: .73rem;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 9px 24px rgba(21, 59, 88, .12);
    backdrop-filter: blur(10px);
    transition: background .2s, color .2s, transform .2s, box-shadow .2s;
}

.ff-hero-bill:hover {
    background: #0b7188;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 13px 28px rgba(10, 91, 112, .22);
}

.ff-home-billing {
    scroll-margin-top: calc(var(--home-header) + 12px);
    display: grid;
    grid-template-columns: minmax(250px, .55fr) minmax(620px, 1.45fr);
    align-items: center;
    gap: clamp(30px, 5vw, 78px);
    padding: 30px clamp(42px, 6vw, 104px);
    border-top: 1px solid #d9e5eb;
    border-bottom: 1px solid #d9e5eb;
    background:
        radial-gradient(circle at 8% 50%, rgba(39, 174, 190, .12), transparent 24%),
        #edf4f6;
}

.ff-home-billing-copy > span {
    color: #087f96;
    font-size: .67rem;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.ff-home-billing-copy h2 {
    margin: 7px 0 6px;
    color: #102f4b;
    font-size: clamp(1.35rem, 2vw, 2rem);
    letter-spacing: -.035em;
}

.ff-home-billing-copy p {
    max-width: 440px;
    margin: 0;
    color: #5b7184;
    font-size: .76rem;
    line-height: 1.55;
}

.ff-home-billing .ff-bill-checker {
    grid-template-columns: minmax(240px, 1fr) minmax(160px, .45fr);
    align-items: end;
    gap: 10px 12px;
    margin: 0;
    padding: 17px;
}

.ff-home-billing .ff-bill-checker > button {
    grid-column: auto;
    min-height: 45px;
}

.ff-home-billing .ff-bill-privacy,
.ff-home-billing .ff-bill-result,
.ff-home-billing .ff-bill-error {
    grid-column: 1 / -1;
}

@media (max-width: 1320px) and (min-width: 761px) {
    .ff-bill-link span {
        display: none;
    }

    .ff-bill-link {
        width: 42px;
        justify-content: center;
        padding: 0;
    }

    .ff-home-billing {
        grid-template-columns: minmax(220px, .45fr) minmax(560px, 1.55fr);
        padding-inline: 30px;
    }
}

@media (max-width: 900px) {
    .ff-home-billing {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

@media (max-width: 760px) {
    .ff-header-actions .ff-bill-link {
        display: none;
    }

    .ff-nav .ff-mobile-bill {
        display: block;
        margin-top: 4px;
        border-radius: 9px;
        background: #e9f4f6;
        color: #096f84;
        text-align: center;
    }

    .ff-home-billing {
        scroll-margin-top: 68px;
        gap: 16px;
        padding: 30px 18px;
    }

    .ff-home-billing-copy h2 {
        font-size: 1.55rem;
    }

    .ff-home-billing-copy p {
        font-size: .72rem;
    }

    .ff-home-billing .ff-bill-checker {
        grid-template-columns: 1fr;
        padding: 15px;
    }

    .ff-home-billing .ff-bill-checker > button,
    .ff-home-billing .ff-bill-privacy,
    .ff-home-billing .ff-bill-result,
    .ff-home-billing .ff-bill-error {
        grid-column: 1;
    }

    .ff-hero-message .ff-hero-actions {
        flex-wrap: wrap;
    }

    .ff-hero-bill {
        min-height: 43px;
        padding: 9px 14px;
        font-size: .65rem;
    }

    .ff-hero-bill-search {
        width: min(420px, 100%);
        margin-top: 10px;
        padding: 9px;
        border-radius: 14px;
    }

    .ff-hero-bill-heading {
        padding-bottom: 7px;
    }

    .ff-hero-bill-form > label {
        height: 45px;
    }

    .ff-hero-bill-form button {
        height: 35px;
        padding-inline: 12px;
    }

    .ff-bill-launch {
        grid-template-columns: 34px minmax(0, 1fr) 22px;
        min-height: 54px;
        margin-top: 10px;
    }

    .ff-bill-launch em {
        display: none;
    }

    .ff-bill-hero-bar {
        grid-template-columns: 35px minmax(0, 1fr) auto;
        min-height: 54px;
        margin-top: 10px;
        padding: 6px;
    }

    .ff-bill-hero-bar > i {
        width: 35px;
        height: 35px;
    }

    .ff-bill-hero-bar input {
        height: 40px;
        font-size: .86rem;
    }

    .ff-bill-hero-bar button {
        min-height: 40px;
        padding-inline: 12px;
    }

    .ff-bill-hero-bar button span {
        display: none;
    }

    .ff-bill-dialog {
        width: calc(100% - 20px);
        max-height: calc(100dvh - 20px);
        border-radius: 16px;
    }

    .ff-bill-dialog-head {
        padding: 18px 16px 12px;
    }

    .ff-bill-dialog-head strong {
        font-size: 1.35rem;
    }

    .ff-bill-dialog-copy {
        padding: 0 16px 15px;
    }

    .ff-bill-dialog .ff-hero-bill-form {
        padding: 16px;
    }
}

html,
body {
    width: 100%;
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

body {
    display: block;
}

.ff-shell {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
}

.ff-main {
    display: block;
    height: auto;
}

.ff-hero,
.ff-plans {
    scroll-margin-top: 0;
    scroll-snap-align: start;
}

.ff-hero {
    width: 100%;
    height: 100svh;
    min-height: 700px;
}

.ff-hero-copy {
    height: 100%;
    padding-top: calc(var(--home-header) + 34px);
    padding-bottom: 105px;
}

.ff-hero > .ff-benefits {
    right: clamp(38px, 5vw, 88px);
    bottom: 28px;
    min-height: 70px;
}

.ff-plans {
    width: 100%;
    min-height: 100svh;
    display: flex;
    padding: clamp(68px, 8vh, 96px) clamp(42px, 6vw, 104px) clamp(58px, 7vh, 88px);
    background: linear-gradient(180deg, #f5f8fc 0%, #fff 34%, #f8fafc 100%);
}

.ff-plans > header {
    flex: 0 0 82px;
    align-items: flex-start;
}

.ff-plans > header > div {
    gap: 5px;
}

.ff-plans > header > div > span {
    font-size: .78rem;
}

.ff-plans h2 {
    color: #52667f;
    font-size: clamp(.9rem, 1.15vw, 1.15rem);
}

.ff-plan-track {
    width: min(1260px, 100%);
    height: auto;
    min-height: 0;
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(265px, 1fr);
    align-self: center;
    gap: 18px;
    margin: 0 auto;
    padding: 0;
}

.ff-plan {
    width: 100%;
    max-width: none;
    min-height: 0;
}

/* Modern plan catalogue: clear speed, real benefits, and a decisive price action. */
.ff-plans {
    min-height: auto;
    flex-direction: column;
    gap: 26px;
    background:
        radial-gradient(circle at 8% 0%, rgba(19, 139, 184, .09), transparent 26%),
        linear-gradient(180deg, #f4f7fa 0%, #eef3f7 100%);
}

.ff-plans > header {
    width: min(1260px, 100%);
    flex: none;
    margin: 0 auto;
}

.ff-plans > header > div > span {
    color: #127f9c;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.ff-plans h2 {
    max-width: 700px;
    margin: 8px 0 0;
    color: #102a46;
    font-size: clamp(1.8rem, 3vw, 3rem);
    font-style: normal;
    line-height: 1.05;
    letter-spacing: -.045em;
    text-align: left;
    text-transform: none;
}

.ff-plans h2::after {
    display: none;
}

.ff-plan-track {
    flex: none;
    align-self: auto;
    grid-auto-rows: auto;
    gap: 20px;
}

.ff-plans .ff-plan {
    --plan-accent: #1769aa;
    position: relative;
    min-height: 445px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    overflow: hidden;
    border: 1px solid #d8e2eb;
    border-radius: 20px;
    background: #fff;
    text-align: left;
    box-shadow: 0 10px 28px rgba(24, 51, 78, .065);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.ff-plans .ff-plan:nth-child(2) { --plan-accent: #087eae; }
.ff-plans .ff-plan:nth-child(3) { --plan-accent: #078778; }
.ff-plans .ff-plan:nth-child(4) { --plan-accent: #397d32; }
.ff-plans .ff-plan:nth-child(5) { --plan-accent: #5a46a6; }
.ff-plans .ff-plan:nth-child(6) { --plan-accent: #743998; }

.ff-plans .ff-plan::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    width: 100%;
    height: 5px;
    border-radius: 0;
    background: var(--plan-accent);
}

.ff-plans .ff-plan::after {
    content: "";
    position: absolute;
    top: -68px;
    right: -68px;
    width: 170px;
    height: 170px;
    display: block;
    border: 36px solid color-mix(in srgb, var(--plan-accent) 8%, transparent);
    border-radius: 50%;
    pointer-events: none;
}

.ff-plans .ff-plan:hover {
    z-index: 1;
    border-color: color-mix(in srgb, var(--plan-accent) 42%, #d8e2eb);
    transform: translateY(-5px);
    box-shadow: 0 20px 42px rgba(24, 51, 78, .13);
}

.ff-plans .ff-plan.featured {
    border-color: color-mix(in srgb, var(--plan-accent) 52%, #d8e2eb);
    box-shadow: 0 13px 34px rgba(65, 54, 140, .12);
}

.ff-plans .ff-plan-top {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 8px;
    border: 0;
    background: transparent;
}

.ff-plan-series {
    color: #718196;
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.ff-plans .ff-recommended {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--plan-accent) 11%, #fff);
    color: var(--plan-accent);
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: .02em;
}

.ff-plans .ff-plan-body {
    position: relative;
    z-index: 1;
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
    padding: 4px 20px 20px;
}

.ff-plan-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.ff-plans .ff-plan-name {
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #122b46;
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: .04em;
}

.ff-plans .ff-plan-symbol {
    position: static;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    margin: 0;
    border: 0;
    border-radius: 12px;
    background: color-mix(in srgb, var(--plan-accent) 10%, #fff);
    color: var(--plan-accent);
    font-size: 1rem;
    box-shadow: none;
}

.ff-plans .ff-plan-speed-row {
    width: 100%;
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 13px;
    padding: 13px 15px;
    border: 1px solid #e0e8ef;
    border-radius: 14px;
    background: linear-gradient(135deg, #f8fafc, color-mix(in srgb, var(--plan-accent) 6%, #fff));
}

.ff-plans .ff-plan-speed-row > strong {
    color: var(--plan-accent);
    font-size: clamp(2.8rem, 4.1vw, 4rem);
    font-weight: 900;
    line-height: .8;
    letter-spacing: -.075em;
}

.ff-plans .ff-plan-speed-row > span {
    display: grid;
    gap: 4px;
    padding-left: 13px;
    border-left: 1px solid #d6e0e9;
}

.ff-plans .ff-plan-speed-row b {
    color: #18354f;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ff-plans .ff-plan-speed-row small {
    color: #708297;
    font-size: .59rem;
    font-weight: 700;
    white-space: nowrap;
}

.ff-plan-advantages > span,
.ff-plans .ff-plan-apps-label {
    display: block;
    margin-bottom: 8px;
    color: #718196;
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ff-plan-advantages ul {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ff-plan-advantages li {
    display: grid;
    grid-template-columns: 19px 1fr;
    align-items: start;
    color: #3d5268;
    font-size: .78rem;
    font-weight: 650;
    line-height: 1.4;
}

.ff-plan-advantages li i {
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    margin-top: 1px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--plan-accent) 11%, #fff);
    color: var(--plan-accent);
    font-size: .62rem;
    font-weight: 900;
}

.ff-plans .ff-plan-apps {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto repeat(2, 32px);
    gap: 6px;
    margin-top: auto;
}

.ff-plans .ff-plan-apps-label {
    grid-column: 1 / -1;
    margin: 0 0 2px;
}

.ff-plans .ff-app-chip {
    width: auto;
    height: 32px;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    padding: 5px 9px;
    border: 1px solid #e1e8ef;
    border-radius: 9px;
    background: #f8fafc;
}

.ff-plans .ff-app-chip i {
    font-size: .8rem;
}

.ff-plans .ff-app-chip small {
    display: block;
    overflow: hidden;
    color: #4b6076;
    font-size: .64rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ff-plans .ff-plan > button {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0;
    padding: 12px 20px;
    border: 0;
    border-top: 1px solid #e0e8ef;
    border-radius: 0;
    background: #f8fafc;
    color: #112d48;
    text-align: left;
    box-shadow: none;
}

.ff-plans .ff-plan > button:hover {
    border-color: #e0e8ef;
    background: color-mix(in srgb, var(--plan-accent) 7%, #fff);
    transform: none;
}

.ff-plans .ff-plan > button > span:first-child {
    display: grid;
    gap: 1px;
}

.ff-plans .ff-plan > button small {
    color: #74869a;
    font-size: .57rem;
    font-weight: 750;
}

.ff-plans .ff-plan > button strong {
    color: #122b46;
    font-size: 1.35rem;
    font-weight: 900;
}

.ff-plans .ff-plan > button > .ff-plan-select {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--plan-accent);
    font-size: .67rem;
    font-weight: 900;
    white-space: nowrap;
}

.ff-plans .ff-plan > button > .ff-plan-select i {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--plan-accent);
    color: #fff;
}

/* Homepage content sequence after plans. */
.ff-content-section {
    width: 100%;
    padding: clamp(82px, 9vw, 138px) clamp(32px, 6vw, 104px);
}

.ff-section-heading {
    max-width: 760px;
}

.ff-section-heading > span,
.ff-about-statement > span {
    display: block;
    color: #11849b;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.ff-section-heading h2,
.ff-about-statement h2 {
    margin: 12px 0 17px;
    color: #102a46;
    font-size: clamp(2.3rem, 4.8vw, 5.2rem);
    font-weight: 900;
    line-height: .98;
    letter-spacing: -.065em;
}

.ff-section-heading p,
.ff-about-statement p {
    max-width: 680px;
    margin: 0;
    color: #5d7084;
    font-size: clamp(.94rem, 1.05vw, 1.08rem);
    line-height: 1.7;
}

.ff-section-index {
    color: #75879a;
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* Coverage */
.ff-coverage-section {
    background: #fff;
}

.ff-coverage-layout {
    display: grid;
    grid-template-columns: minmax(280px, .72fr) minmax(480px, 1.28fr);
    gap: clamp(38px, 6vw, 90px);
    margin-top: 54px;
}

.ff-coverage-list {
    display: flex;
    flex-direction: column;
}

.ff-coverage-list > .ff-section-index {
    margin-bottom: 13px;
}

.ff-coverage-list > button:not(.ff-coverage-check) {
    min-height: 76px;
    display: grid;
    grid-template-columns: 30px 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border: 0;
    border-top: 1px solid #dce5eb;
    background: transparent;
    color: #18334d;
    text-align: left;
}

.ff-coverage-list > button:not(.ff-coverage-check):last-of-type {
    border-bottom: 1px solid #dce5eb;
}

.ff-coverage-list > button:not(.ff-coverage-check) > span {
    color: #8a99a8;
    font-size: .68rem;
    font-weight: 850;
}

.ff-coverage-list > button:not(.ff-coverage-check) > strong {
    font-size: 1rem;
    font-weight: 850;
}

.ff-coverage-list > button:not(.ff-coverage-check) > small {
    color: #718296;
    font-size: .68rem;
}

.ff-coverage-list > button:not(.ff-coverage-check) > i {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #eef5f8;
    color: #137d98;
    transition: .2s ease;
}

.ff-coverage-list > button:not(.ff-coverage-check):hover,
.ff-coverage-list > button.active:not(.ff-coverage-check) {
    color: #087c91;
}

.ff-coverage-list > button:not(.ff-coverage-check):hover > i,
.ff-coverage-list > button.active:not(.ff-coverage-check) > i {
    background: #087c91;
    color: #fff;
    transform: rotate(45deg);
}

.ff-coverage-check {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 24px;
    padding: 10px 16px;
    border: 1px solid #12314d;
    border-radius: 9px;
    background: #12314d;
    color: #fff;
    font-size: .78rem;
    font-weight: 850;
}

.ff-coverage-map-wrap {
    position: relative;
    min-height: 540px;
    overflow: hidden;
    border: 1px solid #d5e0e8;
    border-radius: 22px;
    background:
        linear-gradient(rgba(16, 78, 109, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 78, 109, .06) 1px, transparent 1px),
        #dfe9eb;
    background-size: 36px 36px;
}

.ff-coverage-map {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.ff-coverage-map .leaflet-control-attribution {
    font-size: 9px;
}

.ff-map-key {
    position: absolute;
    z-index: 500;
    right: 18px;
    bottom: 18px;
    left: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 13px 15px;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 11px;
    background: rgba(7, 31, 51, .92);
    color: #fff;
    backdrop-filter: blur(10px);
}

.ff-map-key span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .72rem;
    font-weight: 850;
    white-space: nowrap;
}

.ff-map-key span i {
    width: 9px;
    height: 9px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #21c79b;
    box-shadow: 0 0 0 5px rgba(33, 199, 155, .22);
}

.ff-map-key small {
    max-width: 390px;
    color: #b8c7d4;
    font-size: .62rem;
    line-height: 1.45;
}

/* Team */
.ff-team-section {
    position: relative;
    overflow: hidden;
    background: #071d31;
    color: #fff;
}

.ff-team-section::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .2;
    background-image: radial-gradient(circle at 1px 1px, #72a0bb 1px, transparent 0);
    background-size: 28px 28px;
    mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
}

.ff-team-section > * {
    position: relative;
}

.ff-section-heading-light > span {
    color: #65dccb;
}

.ff-section-heading-light h2 {
    color: #fff;
}

.ff-section-heading-light p {
    color: #afc3d3;
}

.ff-team-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 52px;
}

.ff-team-grid article {
    min-height: 310px;
    display: flex;
    flex-direction: column;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 16px;
    background: rgba(255, 255, 255, .045);
    backdrop-filter: blur(7px);
    transition: .24s ease;
}

.ff-team-grid article:hover {
    border-color: rgba(101, 220, 203, .45);
    background: rgba(255, 255, 255, .075);
    transform: translateY(-5px);
}

.ff-team-grid article > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ff-team-grid article > div span {
    color: #7890a4;
    font-size: .62rem;
    font-weight: 800;
}

.ff-team-grid article > div i {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(101, 220, 203, .12);
    color: #65dccb;
    font-size: 1rem;
}

.ff-team-grid h3 {
    margin: auto 0 12px;
    color: #fff;
    font-size: 1.16rem;
}

.ff-team-grid p {
    margin: 0;
    color: #afc3d3;
    font-size: .82rem;
    line-height: 1.6;
}

.ff-team-grid article > small {
    margin-top: 24px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    color: #69849a;
    font-size: .6rem;
    font-weight: 850;
    letter-spacing: .13em;
}

/* Support */
.ff-support-section {
    display: grid;
    grid-template-columns: minmax(320px, .78fr) minmax(480px, 1.22fr);
    gap: clamp(55px, 8vw, 130px);
    background: #f7f9fa;
}

.ff-support-intro {
    align-self: start;
}

.ff-section-action {
    min-height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 32px;
    padding: 12px 15px 12px 18px;
    border-radius: 12px;
    background: #102f4b;
    color: #fff;
    text-decoration: none;
}

.ff-section-action span {
    display: grid;
    gap: 3px;
    font-size: .85rem;
    font-weight: 850;
}

.ff-section-action small {
    color: #9fb5c7;
    font-size: .64rem;
    font-weight: 650;
}

.ff-section-action > i {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #69d8f2;
    color: #102f4b;
}

.ff-support-features {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.ff-support-features article {
    display: grid;
    grid-template-columns: 38px 1fr;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border: 1px solid #dde5eb;
    border-radius: 11px;
    background: #fff;
}

.ff-support-features article > i {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #eaf4f6;
    color: #087e94;
}

.ff-support-features strong,
.ff-support-features small {
    display: block;
}

.ff-support-features strong {
    color: #18334d;
    font-size: .78rem;
}

.ff-support-features small {
    margin-top: 2px;
    color: #718195;
    font-size: .68rem;
    line-height: 1.4;
}

.ff-bill-checker {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .72fr);
    gap: 13px;
    margin-top: 18px;
    padding: 20px;
    border: 1px solid #d5e0e7;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(18, 47, 75, .06);
}

.ff-bill-checker-heading,
.ff-bill-checker > button,
.ff-bill-privacy,
.ff-bill-result,
.ff-bill-error {
    grid-column: 1 / -1;
}

.ff-bill-checker-heading {
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
    gap: 11px;
    margin-bottom: 3px;
}

.ff-bill-checker-heading > i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #e6f4f5;
    color: #087e94;
    font-size: 1rem;
}

.ff-bill-checker-heading small,
.ff-bill-checker-heading strong {
    display: block;
}

.ff-bill-checker-heading small {
    color: #718296;
    font-size: .62rem;
    font-weight: 750;
}

.ff-bill-checker-heading strong {
    margin-top: 2px;
    color: #18334d;
    font-size: .92rem;
}

.ff-bill-checker label {
    color: #40566c;
    font-size: .68rem;
    font-weight: 800;
}

.ff-bill-checker input {
    width: 100%;
    height: 45px;
    display: block;
    margin-top: 6px;
    padding: 0 12px;
    border: 1px solid #cad7e0;
    border-radius: 9px;
    outline: 0;
    background: #f9fbfc;
    color: #17334e;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .035em;
}

.ff-bill-checker input:focus {
    border-color: #12869c;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(18, 134, 156, .1);
}

.ff-bill-checker > button {
    min-height: 47px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 9px 8px 15px;
    border: 0;
    border-radius: 9px;
    background: #102f4b;
    color: #fff;
    font-size: .76rem;
    font-weight: 850;
}

.ff-bill-checker > button i {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #69d8f2;
    color: #102f4b;
}

.ff-bill-checker > button:disabled {
    cursor: wait;
    opacity: .65;
}

.ff-bill-checker.loading > button span::after {
    content: "…";
}

.ff-bill-privacy {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 0;
    color: #76889a;
    font-size: .59rem;
    line-height: 1.45;
}

.ff-bill-privacy i {
    margin-top: 1px;
    color: #16856f;
}

.ff-bill-result {
    padding: 17px;
    border: 1px solid #cfe2dc;
    border-radius: 12px;
    background: #f0f8f5;
}

.ff-bill-result.status-due {
    border-color: #d9dfbd;
    background: #faf9ed;
}

.ff-bill-result.status-overdue {
    border-color: #ecc8c8;
    background: #fff4f3;
}

.ff-bill-result-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.ff-bill-result-status span {
    color: #187258;
    font-size: .68rem;
    font-weight: 900;
    text-transform: uppercase;
}

.status-due .ff-bill-result-status span {
    color: #8a6e13;
}

.status-overdue .ff-bill-result-status span {
    color: #a23e3e;
}

.ff-bill-result-status small {
    color: #708296;
    font-size: .58rem;
    text-align: right;
}

.ff-bill-result > strong {
    display: block;
    margin-top: 14px;
    color: #17334e;
    font-size: 1.7rem;
    letter-spacing: -.04em;
}

.ff-bill-result > small {
    color: #718296;
    font-size: .61rem;
}

.ff-bill-result > div:last-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 15px;
    padding-top: 13px;
    border-top: 1px solid rgba(23, 51, 78, .1);
}

.ff-bill-result > div:last-child > span {
    color: #50677d;
    font-size: .63rem;
    line-height: 1.4;
}

.ff-bill-result a {
    color: #0d7187;
    font-size: .61rem;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
}

.ff-bill-error {
    margin: 0;
    padding: 11px 12px;
    border: 1px solid #edcccc;
    border-radius: 9px;
    background: #fff4f3;
    color: #9a3838;
    font-size: .67rem;
    line-height: 1.45;
}

.ff-bill-checker {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .72fr);
    gap: 13px;
    margin-top: 18px;
    padding: 20px;
    border: 1px solid #d5e0e7;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(18, 47, 75, .06);
}

.ff-bill-checker-heading,
.ff-bill-checker > button,
.ff-bill-privacy,
.ff-bill-result,
.ff-bill-error {
    grid-column: 1 / -1;
}

.ff-bill-checker-heading {
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
    gap: 11px;
    margin-bottom: 3px;
}

.ff-bill-checker-heading > i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #e6f4f5;
    color: #087e94;
    font-size: 1rem;
}

.ff-bill-checker-heading small,
.ff-bill-checker-heading strong {
    display: block;
}

.ff-bill-checker-heading small {
    color: #718296;
    font-size: .62rem;
    font-weight: 750;
}

.ff-bill-checker-heading strong {
    margin-top: 2px;
    color: #18334d;
    font-size: .92rem;
}

.ff-bill-checker label {
    color: #40566c;
    font-size: .68rem;
    font-weight: 800;
}

.ff-bill-checker input {
    width: 100%;
    height: 45px;
    display: block;
    margin-top: 6px;
    padding: 0 12px;
    border: 1px solid #cad7e0;
    border-radius: 9px;
    outline: 0;
    background: #f9fbfc;
    color: #17334e;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .035em;
}

.ff-bill-checker input:focus {
    border-color: #12869c;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(18, 134, 156, .1);
}

.ff-bill-checker > button {
    min-height: 47px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 9px 8px 15px;
    border: 0;
    border-radius: 9px;
    background: #102f4b;
    color: #fff;
    font-size: .76rem;
    font-weight: 850;
}

.ff-bill-checker > button i {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #69d8f2;
    color: #102f4b;
}

.ff-bill-checker > button:disabled {
    cursor: wait;
    opacity: .65;
}

.ff-bill-checker.loading > button span::after {
    content: "…";
}

.ff-bill-privacy {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 0;
    color: #76889a;
    font-size: .59rem;
    line-height: 1.45;
}

.ff-bill-privacy i {
    margin-top: 1px;
    color: #16856f;
}

.ff-bill-result {
    padding: 17px;
    border: 1px solid #cfe2dc;
    border-radius: 12px;
    background: #f0f8f5;
}

.ff-bill-result.status-due {
    border-color: #d9dfbd;
    background: #faf9ed;
}

.ff-bill-result.status-overdue {
    border-color: #ecc8c8;
    background: #fff4f3;
}

.ff-bill-result-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.ff-bill-result-status span {
    color: #187258;
    font-size: .68rem;
    font-weight: 900;
    text-transform: uppercase;
}

.status-due .ff-bill-result-status span {
    color: #8a6e13;
}

.status-overdue .ff-bill-result-status span {
    color: #a23e3e;
}

.ff-bill-result-status small {
    color: #708296;
    font-size: .58rem;
    text-align: right;
}

.ff-bill-result > strong {
    display: block;
    margin-top: 14px;
    color: #17334e;
    font-size: 1.7rem;
    letter-spacing: -.04em;
}

.ff-bill-result > small {
    color: #718296;
    font-size: .61rem;
}

.ff-bill-result > div:last-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 15px;
    padding-top: 13px;
    border-top: 1px solid rgba(23, 51, 78, .1);
}

.ff-bill-result > div:last-child > span {
    color: #50677d;
    font-size: .63rem;
    line-height: 1.4;
}

.ff-bill-result a {
    color: #0d7187;
    font-size: .61rem;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
}

.ff-bill-error {
    margin: 0;
    padding: 11px 12px;
    border: 1px solid #edcccc;
    border-radius: 9px;
    background: #fff4f3;
    color: #9a3838;
    font-size: .67rem;
    line-height: 1.45;
}

.ff-faq-list {
    border-top: 1px solid #ccd8e0;
}

.ff-faq-list details {
    border-bottom: 1px solid #ccd8e0;
}

.ff-faq-list summary {
    min-height: 92px;
    display: grid;
    grid-template-columns: 34px 1fr 32px;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    list-style: none;
}

.ff-faq-list summary::-webkit-details-marker {
    display: none;
}

.ff-faq-list summary span {
    color: #8797a7;
    font-size: .68rem;
    font-weight: 850;
}

.ff-faq-list summary strong {
    color: #18334d;
    font-size: .92rem;
    line-height: 1.4;
}

.ff-faq-list summary i {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #eaf0f4;
    color: #18334d;
    transition: .2s;
}

.ff-faq-list details[open] summary i {
    background: #127f94;
    color: #fff;
    transform: rotate(45deg);
}

.ff-faq-list details p {
    max-width: 680px;
    margin: -5px 45px 0 49px;
    padding: 0 0 25px;
    color: #607387;
    font-size: .82rem;
    line-height: 1.65;
}

/* About */
.ff-about-section {
    display: grid;
    grid-template-columns: minmax(300px, .85fr) minmax(520px, 1.15fr);
    gap: clamp(55px, 8vw, 130px);
    align-items: start;
    background: #e9f0f2;
}

.ff-mission-vision {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 30px;
}

.ff-mission-vision article {
    min-height: 188px;
    padding: 20px;
    border: 1px solid #c8d6de;
    border-radius: 14px;
    background: rgba(255, 255, 255, .72);
}

.ff-mission-vision article > span {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #0d7489;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ff-mission-vision article > span i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #dff0f2;
    font-size: .9rem;
}

.ff-mission-vision article p {
    margin: 18px 0 0;
    color: #385166;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.65;
}

.ff-about-commitment {
    display: grid;
    grid-template-columns: 38px 1fr;
    align-items: start;
    gap: 12px;
    margin-top: 10px;
    padding: 16px;
    border-left: 3px solid #127f94;
    background: rgba(255, 255, 255, .48);
}

.ff-about-commitment > i {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #12314d;
    color: #fff;
}

.ff-about-commitment strong {
    display: block;
    color: #18334d;
    font-size: .72rem;
}

.ff-about-commitment p {
    margin: 5px 0 0;
    color: #536b80;
    font-size: .72rem;
    line-height: 1.55;
}

.ff-about-statement button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    margin-top: 28px;
    padding: 10px 17px;
    border: 1px solid #12314d;
    border-radius: 9px;
    background: transparent;
    color: #12314d;
    font-size: .78rem;
    font-weight: 850;
}

.ff-about-statement button:hover {
    background: #12314d;
    color: #fff;
}

.ff-about-services {
    border-top: 1px solid #c6d3db;
}

.ff-about-services article {
    min-height: 116px;
    display: grid;
    grid-template-columns: 34px 48px 1fr;
    align-items: center;
    gap: 18px;
    border-bottom: 1px solid #c6d3db;
}

.ff-about-services article > span {
    color: #8193a2;
    font-size: .66rem;
    font-weight: 850;
}

.ff-about-services article > i {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #fff;
    color: #127f94;
    font-size: 1rem;
}

.ff-about-services h3 {
    margin: 0 0 5px;
    color: #18334d;
    font-size: .94rem;
}

.ff-about-services p {
    margin: 0;
    color: #65778a;
    font-size: .74rem;
    line-height: 1.58;
}

/* Contact */
.ff-contact-section {
    display: grid;
    grid-template-columns: minmax(320px, .85fr) minmax(520px, 1.15fr);
    gap: clamp(55px, 8vw, 130px);
    background: #fff;
}

.ff-contact-records {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 35px;
}

.ff-contact-records > * {
    min-height: 84px;
    display: grid;
    grid-template-columns: 38px 1fr;
    align-items: center;
    gap: 11px;
    padding: 13px;
    border: 1px solid #dde5eb;
    border-radius: 11px;
    color: inherit;
    text-decoration: none;
}

.ff-contact-records > * > i {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #edf5f7;
    color: #127f94;
}

.ff-contact-records small,
.ff-contact-records strong {
    display: block;
}

.ff-contact-records small {
    color: #7d8d9d;
    font-size: .62rem;
}

.ff-contact-records strong {
    margin-top: 3px;
    color: #18334d;
    font-size: .75rem;
    line-height: 1.4;
}

.ff-home-inquiry {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    padding: clamp(26px, 4vw, 48px);
    border: 1px solid #d8e2e9;
    border-radius: 20px;
    background: #f5f8fa;
    box-shadow: 0 20px 45px rgba(22, 51, 78, .08);
}

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

.ff-form-heading {
    display: grid;
    gap: 6px;
    margin-bottom: 10px;
}

.ff-form-heading > span {
    color: #127f94;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ff-form-heading > strong {
    color: #18334d;
    font-size: 1.35rem;
}

.ff-form-heading > small {
    color: #708296;
    font-size: .74rem;
    line-height: 1.5;
}

.ff-home-inquiry label {
    color: #354c62;
    font-size: .72rem;
    font-weight: 800;
}

.ff-home-inquiry input,
.ff-home-inquiry select {
    width: 100%;
    height: 48px;
    display: block;
    margin-top: 7px;
    padding: 0 13px;
    border: 1px solid #cad7e0;
    border-radius: 9px;
    outline: 0;
    background: #fff;
    color: #18334d;
    font-size: .78rem;
}

.ff-home-inquiry input:focus,
.ff-home-inquiry select:focus {
    border-color: #12869c;
    box-shadow: 0 0 0 3px rgba(18, 134, 156, .1);
}

.ff-home-inquiry > button {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
    padding: 11px 16px;
    border: 0;
    border-radius: 10px;
    background: #12314d;
    color: #fff;
    font-size: .8rem;
    font-weight: 850;
}

.ff-home-inquiry > button i {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #69d8f2;
    color: #12314d;
}

.ff-home-inquiry > p {
    margin: 0;
    padding: 11px;
    border-radius: 8px;
    background: #e5f6ef;
    color: #187258;
    font-size: .74rem;
}

.ff-trust {
    width: 100%;
    height: auto;
    min-height: 190px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 32px clamp(36px, 6vw, 100px) 0;
    background: #06182d;
    color: #fff;
}

.ff-trust article {
    min-height: 104px;
    align-content: center;
}

.ff-trust strong {
    color: #fff;
    font-size: clamp(.72rem, .8vw, .84rem);
}

.ff-trust small {
    color: #b9cada;
    font-size: clamp(.62rem, .68vw, .72rem);
    line-height: 1.5;
}

.ff-trust-legal {
    min-height: 58px;
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid rgba(255, 255, 255, .11);
    color: #7f95a8;
    font-size: .68rem;
}

.ff-trust-legal a {
    color: #b9cada;
    text-decoration: none;
}


@media (max-width: 1320px) and (min-width: 761px) {
    .ff-header {
        gap: 1.5vw;
        padding-inline: 3vw;
    }

    .ff-logo {
        width: min(255px, 20vw);
    }

    .ff-nav {
        gap: 11px;
    }

    .ff-nav > a {
        font-size: .58rem;
    }

    .ff-login {
        min-width: 116px;
    }
}

@media (max-width: 980px) {
    .ff-coverage-layout,
    .ff-support-section,
    .ff-about-section,
    .ff-contact-section {
        grid-template-columns: 1fr;
    }

    .ff-coverage-map-wrap {
        min-height: 500px;
    }

    .ff-team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ff-team-grid article {
        min-height: 260px;
    }

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

@media (max-width: 1180px) and (min-width: 761px) {
    .ff-hero {
        min-height: 660px;
    }

    .ff-hero-copy {
        padding-bottom: 108px;
    }

    .ff-plans {
        min-height: auto;
        padding: 72px 36px;
    }

    .ff-plan-track {
        max-width: 850px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: auto;
    }

    .ff-trust {
        grid-template-columns: repeat(2, 1fr);
        padding-block: 24px;
    }

    .ff-trust-legal {
        padding-top: 18px;
    }

    .ff-trust article:nth-child(2) {
        border-right: 0;
    }

}

@media (max-width: 760px) {
    html {
        scroll-snap-type: none;
    }

    .ff-hero {
        height: auto;
        min-height: 100svh;
        padding-bottom: 0;
    }

    .ff-hero-art {
        height: 48svh;
    }

    .ff-hero-copy {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        min-height: calc(100svh - 56px);
        justify-content: flex-end;
        padding: calc(48svh + 20px) 18px 88px;
    }

    .ff-hero > .ff-benefits {
        bottom: 12px;
    }

    .ff-plans {
        min-height: auto;
        padding: 58px 16px 64px;
    }

    .ff-plans > header {
        flex-basis: 68px;
    }

    .ff-plan-track {
        max-width: 430px;
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 14px;
        overflow: visible;
        padding: 0;
    }

    .ff-plan {
        width: 100%;
        max-width: 430px;
        scroll-snap-align: none;
    }

    .ff-plans .ff-plan {
        min-height: 440px;
    }

    .ff-plans h2 {
        font-size: clamp(1.65rem, 8vw, 2.35rem);
    }

    .ff-content-section {
        padding: 72px 18px;
    }

    .ff-section-heading h2,
    .ff-about-statement h2 {
        font-size: clamp(2.15rem, 12vw, 3.5rem);
    }

    .ff-mission-vision {
        grid-template-columns: 1fr;
    }

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

    .ff-mission-vision {
        grid-template-columns: 1fr;
    }

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

    .ff-coverage-layout {
        margin-top: 38px;
    }

    .ff-coverage-list > button:not(.ff-coverage-check) {
        grid-template-columns: 28px 1fr auto;
    }

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

    .ff-coverage-map-wrap {
        min-height: 410px;
        border-radius: 15px;
    }

    .ff-map-key {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .ff-team-grid {
        grid-template-columns: 1fr;
        margin-top: 36px;
    }

    .ff-team-grid article {
        min-height: 230px;
        padding: 21px;
    }

    .ff-contact-records,
    .ff-home-inquiry {
        grid-template-columns: 1fr;
    }

    .ff-bill-checker {
        grid-template-columns: 1fr;
    }

    .ff-bill-checker-heading,
    .ff-bill-checker > button,
    .ff-bill-privacy,
    .ff-bill-result,
    .ff-bill-error {
        grid-column: 1;
    }

    .ff-bill-result-status,
    .ff-bill-result > div:last-child {
        align-items: flex-start;
        flex-direction: column;
    }

    .ff-bill-result-status small {
        text-align: left;
    }

    .ff-bill-checker {
        grid-template-columns: 1fr;
    }

    .ff-bill-checker-heading,
    .ff-bill-checker > button,
    .ff-bill-privacy,
    .ff-bill-result,
    .ff-bill-error {
        grid-column: 1;
    }

    .ff-bill-result-status,
    .ff-bill-result > div:last-child {
        align-items: flex-start;
        flex-direction: column;
    }

    .ff-bill-result-status small {
        text-align: left;
    }

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

    .ff-trust {
        height: auto;
        min-height: 0;
        grid-template-columns: 1fr;
        padding: 18px 20px 0;
    }

    .ff-trust article {
        min-height: 72px;
        display: grid;
        grid-template-columns: 42px 1fr;
        padding: 12px 8px;
        border-right: 0;
        border-bottom: 1px solid rgba(84, 178, 221, .2);
    }

    .ff-trust article:last-of-type {
        border-bottom: 0;
    }

    .ff-trust-legal {
        min-height: 76px;
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        gap: 7px;
        padding-block: 15px;
    }

}

/* Final bill dialog shell overrides (kept last to isolate it from legacy billing cards). */
.ff-bill-dialog.ff-bill-dialog {
    width: min(610px, calc(100% - 32px));
    max-height: min(820px, calc(100dvh - 32px));
    padding: 0;
    overflow-x: hidden;
    border: 1px solid rgba(255, 255, 255, .58);
    border-radius: 26px;
    background: #f5f8fc;
    color: #102f4b;
    box-shadow: 0 34px 100px rgba(4, 32, 64, .38);
}

.ff-bill-dialog .ff-bill-result.ff-bill-result {
    position: relative;
    padding: 18px;
    border: 1px solid #dbe5ee;
    border-left: 0;
    border-radius: 17px;
    background: #fff;
}

.ff-bill-dialog .ff-bill-qr.ff-bill-qr {
    grid-template-columns: minmax(0, 1fr) 174px;
    align-items: center;
    justify-items: stretch;
    text-align: left;
}

@media (max-width: 560px) {
    .ff-bill-dialog.ff-bill-dialog {
        width: calc(100% - 18px);
        max-height: calc(100dvh - 18px);
        border-radius: 20px;
    }

    .ff-bill-dialog .ff-bill-result.ff-bill-result {
        padding: 14px;
        border-radius: 14px;
    }

    .ff-bill-dialog .ff-bill-qr.ff-bill-qr {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
}

/* Coverage palette follows the homepage hero: white canvas, navy depth, blue/teal accents. */
.ff-coverage-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 92% 9%, rgba(9, 99, 173, .11), transparent 28%),
        radial-gradient(circle at 7% 92%, rgba(7, 157, 131, .09), transparent 27%),
        linear-gradient(180deg, #fff 0%, #f5faff 48%, #edf6fa 100%);
}

.ff-coverage-section::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .34;
    background:
        linear-gradient(115deg, transparent 0 62%, rgba(9, 99, 173, .07) 62% 62.12%, transparent 62.12%),
        linear-gradient(70deg, transparent 0 76%, rgba(7, 157, 131, .07) 76% 76.12%, transparent 76.12%);
    pointer-events: none;
}

.ff-coverage-section .ff-section-heading > span,
.ff-coverage-list > button:not(.ff-coverage-check):hover,
.ff-coverage-list > button.active:not(.ff-coverage-check) {
    color: #0963ad;
}

.ff-coverage-list > button:not(.ff-coverage-check) {
    border-color: rgba(9, 74, 130, .15);
}

.ff-coverage-list > button:not(.ff-coverage-check) > i {
    background: #e8f3fb;
    color: #0963ad;
}

.ff-coverage-list > button:not(.ff-coverage-check):hover > i,
.ff-coverage-list > button.active:not(.ff-coverage-check) > i,
.ff-coverage-check {
    background: linear-gradient(110deg, #073f91 0%, #0878bd 52%, #008f87 100%);
    color: #fff;
}

.ff-coverage-check {
    border-color: rgba(7, 63, 145, .2);
    box-shadow: 0 12px 27px rgba(7, 63, 145, .16);
}

.ff-coverage-map-wrap {
    border-color: rgba(9, 74, 130, .2);
    background-color: #e9f3f7;
    box-shadow: 0 24px 55px rgba(7, 42, 79, .13);
}

.ff-map-key {
    border-color: rgba(255, 255, 255, .26);
    background: linear-gradient(105deg, rgba(7, 25, 71, .95), rgba(7, 76, 125, .93));
}

@media (max-width: 760px) {
    .ff-coverage-section {
        background:
            radial-gradient(circle at 100% 8%, rgba(9, 99, 173, .1), transparent 25%),
            linear-gradient(180deg, #fff 0%, #eef7fb 100%);
    }
}

/* Coverage palette follows the homepage hero: white canvas, navy depth, blue/teal accents. */
.ff-coverage-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 92% 9%, rgba(9, 99, 173, .11), transparent 28%),
        radial-gradient(circle at 7% 92%, rgba(7, 157, 131, .09), transparent 27%),
        linear-gradient(180deg, #fff 0%, #f5faff 48%, #edf6fa 100%);
}

.ff-coverage-section::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .34;
    background:
        linear-gradient(115deg, transparent 0 62%, rgba(9, 99, 173, .07) 62% 62.12%, transparent 62.12%),
        linear-gradient(70deg, transparent 0 76%, rgba(7, 157, 131, .07) 76% 76.12%, transparent 76.12%);
    pointer-events: none;
}

.ff-coverage-section .ff-section-heading > span,
.ff-coverage-list > button:not(.ff-coverage-check):hover,
.ff-coverage-list > button.active:not(.ff-coverage-check) {
    color: #0963ad;
}

.ff-coverage-list > button:not(.ff-coverage-check) {
    border-color: rgba(9, 74, 130, .15);
}

.ff-coverage-list > button:not(.ff-coverage-check) > i {
    background: #e8f3fb;
    color: #0963ad;
}

.ff-coverage-list > button:not(.ff-coverage-check):hover > i,
.ff-coverage-list > button.active:not(.ff-coverage-check) > i,
.ff-coverage-check {
    background: linear-gradient(110deg, #073f91 0%, #0878bd 52%, #008f87 100%);
    color: #fff;
}

.ff-coverage-check {
    border-color: rgba(7, 63, 145, .2);
    box-shadow: 0 12px 27px rgba(7, 63, 145, .16);
}

.ff-coverage-map-wrap {
    border-color: rgba(9, 74, 130, .2);
    background-color: #e9f3f7;
    box-shadow: 0 24px 55px rgba(7, 42, 79, .13);
}

.ff-map-key {
    border-color: rgba(255, 255, 255, .26);
    background: linear-gradient(105deg, rgba(7, 25, 71, .95), rgba(7, 76, 125, .93));
}

@media (max-width: 760px) {
    .ff-coverage-section {
        background:
            radial-gradient(circle at 100% 8%, rgba(9, 99, 173, .1), transparent 25%),
            linear-gradient(180deg, #fff 0%, #eef7fb 100%);
    }
}

/* Final bill dialog shell overrides (kept last to isolate it from legacy billing cards). */
.ff-bill-dialog.ff-bill-dialog {
    width: min(610px, calc(100% - 32px));
    max-height: min(820px, calc(100dvh - 32px));
    padding: 0;
    overflow-x: hidden;
    border: 1px solid rgba(255, 255, 255, .58);
    border-radius: 26px;
    background: #f5f8fc;
    color: #102f4b;
    box-shadow: 0 34px 100px rgba(4, 32, 64, .38);
}

.ff-bill-dialog .ff-bill-result.ff-bill-result {
    position: relative;
    padding: 18px;
    border: 1px solid #dbe5ee;
    border-left: 0;
    border-radius: 17px;
    background: #fff;
}

.ff-bill-dialog .ff-bill-qr.ff-bill-qr {
    grid-template-columns: minmax(0, 1fr) 174px;
    align-items: center;
    justify-items: stretch;
    text-align: left;
}

@media (max-width: 560px) {
    .ff-bill-dialog.ff-bill-dialog {
        width: calc(100% - 18px);
        max-height: calc(100dvh - 18px);
        border-radius: 20px;
    }

    .ff-bill-dialog .ff-bill-result.ff-bill-result {
        padding: 14px;
        border-radius: 14px;
    }

    .ff-bill-dialog .ff-bill-qr.ff-bill-qr {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
}
/* Public bill ownership proof */
.ff-bill-proof{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 14px;align-items:end;padding:14px 16px;border:1px solid rgba(15,118,110,.2);border-radius:14px;background:rgba(240,253,250,.88)}
.ff-bill-proof[hidden]{display:none!important}
.ff-bill-proof p{grid-column:1/-1;margin:0;color:#24445b;font-size:14px;line-height:1.5}
.ff-bill-proof label{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px;min-width:0}
.ff-bill-proof label>span{grid-column:1/-1;color:#1f3b4d;font-size:12px;font-weight:750}
.ff-bill-proof label>i{color:#0f766e;font-size:17px}
.ff-bill-proof input{width:100%;min-width:0;border:0;border-bottom:1px solid #9fb8c4;background:transparent;padding:8px 2px;color:#102f4b;font:inherit;outline:0}
.ff-bill-proof input:focus{border-color:#0f766e}
.ff-bill-proof>button{border:0;background:transparent;color:#0f766e;padding:10px 4px;font:inherit;font-size:13px;font-weight:750;cursor:pointer;white-space:nowrap}
@media(max-width:640px){.ff-bill-proof{grid-template-columns:1fr}.ff-bill-proof>button{justify-self:start}}