/* User-controlled landing theme. Loaded last so one coherent design layer wins. */
html { font-size: var(--landing-base-size, 17px); }
body,
.ff-shell,
.ff-shell button,
.ff-shell a,
.ff-dialog,
.ff-dialog input,
.ff-dialog select {
    font-family: var(--landing-font, Inter, Arial, sans-serif);
}

body,
.ff-shell,
.ff-main { background-color: var(--landing-page, #fff); color: var(--landing-text, #172b45); }

.ff-plan,
.ff-support-card,
.ff-about-card,
.ff-contact-card,
.ff-dialog-panel { background-color: var(--landing-surface, #fff); }

/* The homepage header belongs to the hero, so the hero artwork continues behind it. */
.ff-header {
    background: transparent !important;
    background-color: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Give the brand proper presence without adding a panel behind it. */
.ff-logo {
    width: min(395px, 27.5vw) !important;
    height: 94px !important;
    max-width: 395px !important;
    background: transparent !important;
}

.ff-logo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: left center !important;
    background: transparent !important;
    filter: drop-shadow(0 2px 7px rgba(255, 255, 255, .55));
}

/* Preserve the photograph exactly; legibility is handled on the letterforms below. */
.ff-hero::before {
    background: none !important;
}

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

.ff-nav a,
.ff-hero-message h1,
.ff-section-heading h2,
.ff-plans h2,
.ff-plan-name,
.ff-plan-speed-row h3,
.ff-about-section h2,
.ff-support-section h2,
.ff-contact-section h2 { color: var(--landing-text, #172b45); }

/* Solid type and a restrained light edge keep copy legible over photography. */
.ff-header .ff-nav > a {
    color: #071a3d !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, .98), 0 0 12px rgba(255, 255, 255, .82) !important;
}

.ff-hero-message .ff-eyebrow,
.ff-hero-message h1,
.ff-hero-message h2,
.ff-hero-message .ff-description {
    text-shadow:
        -1px -1px 0 rgba(255, 255, 255, .94),
         1px -1px 0 rgba(255, 255, 255, .94),
        -1px  1px 0 rgba(255, 255, 255, .94),
         1px  1px 0 rgba(255, 255, 255, .94),
         0 5px 16px rgba(3, 24, 58, .2) !important;
}

.ff-hero-message .ff-eyebrow { color: #074f99 !important; }
.ff-hero-message h1 {
    color: #06183d !important;
    -webkit-text-stroke: .35px rgba(4, 18, 49, .42);
}
.ff-hero-message h1 em {
    text-shadow:
        -1px -1px 0 rgba(255, 255, 255, .96),
         1px -1px 0 rgba(255, 255, 255, .96),
        -1px  1px 0 rgba(255, 255, 255, .96),
         1px  1px 0 rgba(255, 255, 255, .96),
         0 7px 18px rgba(12, 62, 122, .24) !important;
    -webkit-text-stroke: .55px rgba(5, 74, 130, .32) !important;
}
.ff-hero-message h2 { color: #0b284e !important; font-weight: 800 !important; }
.ff-hero-message .ff-description { color: #102943 !important; font-weight: 700 !important; }

.ff-description,
.ff-section-heading p,
.ff-plan-body > p,
.ff-plan-speed-row h3 small,
.ff-about-section p,
.ff-support-section p,
.ff-contact-section p { color: var(--landing-muted, #526176); }

.ff-hero-message h1,
.ff-section-heading h2,
.ff-plans h2,
.ff-plan-speed-row h3,
.ff-about-section h2,
.ff-support-section h2,
.ff-contact-section h2 {
    font-weight: var(--landing-heading-weight, 800);
}

.ff-hero-message h1 { font-size: calc(clamp(2.85rem, 5.25vw, 5.55rem) * var(--landing-heading-scale, 1)); }
.ff-section-heading h2,
.ff-about-section h2,
.ff-support-section h2,
.ff-contact-section h2 { font-size: calc(clamp(2rem, 3.3vw, 3.6rem) * var(--landing-heading-scale, 1)); }

.ff-primary,
.ff-inquire,
.ff-plan > button { background-color: var(--brand-primary, #185fa8); }
.ff-eyebrow,
.ff-section-heading > span,
.ff-plan-speed-row h3,
.ff-hero-message h1 em { color: var(--brand-primary, #185fa8); }

@media (max-width: 760px) {
    html { font-size: clamp(15px, var(--landing-base-size, 17px), 18px); }
    .ff-logo {
        width: min(265px, 74vw) !important;
        height: 66px !important;
        max-width: 265px !important;
        transform: translateY(2px) !important;
    }
    .ff-hero-message h1 { font-size: calc(clamp(2.25rem, 12vw, 3.35rem) * var(--landing-heading-scale, 1)); }
    .ff-section-heading h2,
    .ff-about-section h2,
    .ff-support-section h2,
    .ff-contact-section h2 { font-size: calc(clamp(1.8rem, 8.5vw, 2.65rem) * var(--landing-heading-scale, 1)); }
}

@media (min-width: 761px) and (max-width: 1180px) {
    .ff-logo {
        width: min(300px, 26vw) !important;
        height: 76px !important;
        max-width: 300px !important;
    }
}