:is(
    .epay-w2-generator,
    .epay-w2c-generator,
    .epay-w3-generator,
    .epay-w4-generator,
    .epay-w4p-generator,
    .epay-w7-generator,
    .epay-w8ben,
    .epay-w9-generator
) {
    --ws-font: "Poppins", sans-serif;
    --ws-navy: #023047;
    --ws-heading: #062b45;
    --ws-text: #173f52;
    --ws-muted: #5f6f79;
    --ws-teal: #1a9ba8;
    --ws-teal-hover: #158793;
    --ws-surface: #ffffff;
    --ws-surface-soft: #f6f9fb;
    --ws-border: #d9e3e8;
    --ws-field-border: #cfdbe1;
    --ws-danger: #c62828;
    --ws-focus: rgba(26, 155, 168, .14);
    --ws-radius-field: 9px;
    --ws-radius-button: 10px;
    --ws-radius-card: 16px;
    font-family: var(--ws-font);
}

/* One Create-page title and introduction scale across the W-Series. */
:is(
    #w2HeroTitle,
    #w2cHeroTitle,
    #w3PageTitle,
    #w4HeroTitle,
    #w4pHeroTitle,
    #w7HeroTitle,
    #w8PageTitle,
    #w9HeroTitle,
    .epay-w2-generator .epay-w2-hero__title,
    .w-create-hero-standard[data-w-create-standard="1"] .w-create-hero-title
) {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--ws-heading, #062b45) !important;
    font-family: var(--ws-font, "Open Sans", sans-serif) !important;
    font-size: clamp(28px, 4vw, 32px) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -.8px !important;
    text-align: center !important;
}

/* Match legacy ID-level selectors so this shared layer remains authoritative. */
.epay-w2-generator .epay-w2__hero #w2HeroTitle,
.epay-w2c-generator .w-create-hero-standard[data-w-create-standard="1"] #w2cHeroTitle,
.epay-w3-generator .w-create-hero-standard[data-w-create-standard="1"] #w3PageTitle,
.epay-w4-generator .w-create-hero-standard[data-w-create-standard="1"] #w4HeroTitle,
.epay-w4p-generator .w-create-hero-standard[data-w-create-standard="1"] #w4pHeroTitle,
.epay-w7-generator .w-create-hero-standard[data-w-create-standard="1"] #w7HeroTitle,
.epay-w8ben .w-create-hero-standard[data-w-create-standard="1"] #w8PageTitle,
.epay-w9-generator .w-create-hero-standard[data-w-create-standard="1"] #w9HeroTitle {
    font-size: clamp(28px, 4vw, 32px) !important;
    line-height: 1.15 !important;
    text-align: center !important;
}

.epay-w2-generator .w2-intro-guide,
.epay-w2-generator #w2HeroTitle + .w2-intro-guide,
.epay-w2-generator #w2HeroTitle + .w2-intro-guide :is(p, ol, li),
.w-create-hero-standard[data-w-create-standard="1"] .w-create-intro-guide,
.w-create-hero-standard[data-w-create-standard="1"] .w-create-intro-guide :is(p, ol, li) {
    font-family: var(--ws-font, "Open Sans", sans-serif) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
}

.epay-w2-generator .w2-intro-guide h2,
.epay-w2-generator #w2HeroTitle + .w2-intro-guide h2,
.w-create-hero-standard[data-w-create-standard="1"] .w-create-intro-guide h2 {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.6 !important;
}

/* Shared section-heading hierarchy. */
:is(
    .epay-w2-generator,
    .epay-w2c-generator,
    .epay-w3-generator,
    .epay-w4-generator,
    .epay-w4p-generator,
    .epay-w7-generator,
    .epay-w8ben,
    .epay-w9-generator
) :is(.form-section-title, .w3-section-title, .w4-section-title, .w8-section-title) {
    margin-top: 0 !important;
    padding-bottom: 14px !important;
    border-bottom: 2px solid #e8eef1 !important;
    color: var(--ws-heading) !important;
    font-family: var(--ws-font) !important;
    font-size: 21.6px !important;
    font-weight: 800 !important;
    line-height: 29.16px !important;
}

/* W-4 keeps the separator on its heading wrapper, so standardize only type. */
.epay-w4-generator .w4-section-heading h2 {
    color: var(--ws-heading) !important;
    font-family: var(--ws-font) !important;
    font-size: 21.6px !important;
    font-weight: 800 !important;
    line-height: 29.16px !important;
}

/* Bring the two legacy field systems onto the current Create standard. */
.epay-w8ben #w8BenForm .w8-field > label,
.epay-w9-generator #w9Form .form-main > label,
.epay-w9-generator #w9Form .field-label {
    min-height: 0 !important;
    margin: 0 0 7px !important;
    color: var(--ws-heading) !important;
    font-family: var(--ws-font) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 18px !important;
}

.epay-w8ben #w8BenForm :is(.w8-control, .w8-select),
.epay-w9-generator #w9Form :is(.form-control, .form-select) {
    height: 46px !important;
    min-height: 46px !important;
    padding: 10px 12px !important;
    border: 1px solid var(--ws-field-border) !important;
    border-radius: var(--ws-radius-field) !important;
    background-color: var(--ws-surface-soft) !important;
    color: var(--ws-heading) !important;
    font-family: var(--ws-font) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    box-shadow: none !important;
}

.epay-w8ben #w8BenForm .w8-textarea,
.epay-w9-generator #w9Form textarea.form-control {
    height: auto !important;
    min-height: 94px !important;
    resize: vertical;
}

.epay-w8ben #w8BenForm :is(.w8-control, .w8-select, .w8-textarea):focus,
.epay-w9-generator #w9Form :is(.form-control, .form-select):focus {
    border-color: var(--ws-teal) !important;
    background: #ffffff !important;
    outline: 0 !important;
    box-shadow: 0 0 0 3px var(--ws-focus) !important;
}

/* One action size and color system. */
:is(
    .epay-w2-generator,
    .epay-w2c-generator,
    .epay-w3-generator,
    .epay-w4-generator,
    .epay-w4p-generator,
    .epay-w7-generator,
    .epay-w8ben,
    .epay-w9-generator
) :is(
    .epay-create-actions,
    .w2-preview-actions,
    .w2c-preview-actions,
    .w3-preview-actions,
    .w4-preview-actions,
    .w4p-preview-actions,
    .w7-preview-actions,
    .w8-preview-actions,
    .w9-preview-actions
) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 16px !important;
}

:is(
    .epay-w2-generator,
    .epay-w2c-generator,
    .epay-w3-generator,
    .epay-w4-generator,
    .epay-w4p-generator,
    .epay-w7-generator,
    .epay-w8ben,
    .epay-w9-generator
) :is(
    .epay-create-actions,
    .w2-preview-actions,
    .w2c-preview-actions,
    .w3-preview-actions,
    .w4-preview-actions,
    .w4p-preview-actions,
    .w7-preview-actions,
    .w8-preview-actions,
    .w9-preview-actions
) :is(button, .epay-create-action) {
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 10px 16px !important;
    border-radius: var(--ws-radius-button) !important;
    font-family: var(--ws-font) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 20px !important;
    box-shadow: none !important;
    transform: none !important;
}

.epay-w2-generator .w2-preview-actions #previewBtn,
.epay-w2-generator .w2-preview-actions #w2FormButton,
.epay-w2c-generator .w2c-preview-actions #previewBtn,
.epay-w2c-generator .w2c-preview-actions #saveW2cForm,
.epay-w3-generator .w3-preview-actions #generateW3Preview.epay-create-action,
.epay-w3-generator .w3-preview-actions #submitW3Form.epay-create-action,
.epay-w4-generator .w4-preview-actions #previewBtn.epay-create-action,
.epay-w4-generator .w4-preview-actions #w4FormButton.epay-create-action,
.epay-w4p-generator .w4p-preview-actions #previewBtn.epay-create-action,
.epay-w4p-generator .w4p-preview-actions #saveW4PForm.epay-create-action,
.epay-w7-generator .w7-preview-actions #previewBtn.epay-create-action,
.epay-w7-generator .w7-preview-actions #save_w7formdata.epay-create-action,
.epay-w8ben .w8-preview-actions #openW8Preview.epay-create-action,
.epay-w8ben .w8-preview-actions #submitW8Ben.epay-create-action,
.epay-w9-generator .w9-preview-actions #previewBtn.epay-create-action,
.epay-w9-generator .w9-preview-actions #saveW9Form.epay-create-action {
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 10px 16px !important;
    border-radius: var(--ws-radius-button) !important;
    font-family: var(--ws-font) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 20px !important;
    box-shadow: none !important;
    transform: none !important;
}

.epay-w4-generator .w4-preview-actions.epay-create-actions #previewBtn.epay-create-action,
.epay-w4-generator .w4-preview-actions.epay-create-actions #w4FormButton.epay-create-action,
.epay-w4p-generator .w4p-preview-actions.epay-create-actions #previewBtn.epay-create-action,
.epay-w4p-generator .w4p-preview-actions.epay-create-actions #saveW4PForm.epay-create-action {
    font-weight: 800 !important;
    line-height: 20px !important;
}

:is(
    .epay-w2-generator,
    .epay-w2c-generator,
    .epay-w3-generator,
    .epay-w4-generator,
    .epay-w4p-generator,
    .epay-w7-generator,
    .epay-w8ben,
    .epay-w9-generator
) :is(
    .epay-create-actions,
    .w2-preview-actions,
    .w2c-preview-actions,
    .w3-preview-actions,
    .w4-preview-actions,
    .w4p-preview-actions,
    .w7-preview-actions,
    .w8-preview-actions,
    .w9-preview-actions
) :is(
    #w2FormButton,
    #saveW2cForm,
    #saveW3Form,
    #submitW3Form,
    #w4FormButton,
    #saveW4PForm,
    #save_w7formdata,
    #submitW8Ben,
    #saveW9Form,
    .epay-create-action--primary
) {
    border: 1px solid var(--ws-teal) !important;
    background: var(--ws-teal) !important;
    color: #ffffff !important;
}

:is(
    .epay-w2-generator,
    .epay-w2c-generator,
    .epay-w3-generator,
    .epay-w4-generator,
    .epay-w4p-generator,
    .epay-w7-generator,
    .epay-w8ben,
    .epay-w9-generator
) :is(
    .epay-create-actions,
    .w2-preview-actions,
    .w2c-preview-actions,
    .w3-preview-actions,
    .w4-preview-actions,
    .w4p-preview-actions,
    .w7-preview-actions,
    .w8-preview-actions,
    .w9-preview-actions
) :is(
    #w2FormButton,
    #saveW2cForm,
    #saveW3Form,
    #submitW3Form,
    #w4FormButton,
    #saveW4PForm,
    #save_w7formdata,
    #submitW8Ben,
    #saveW9Form,
    .epay-create-action--primary
):hover:not(:disabled) {
    border-color: var(--ws-teal-hover) !important;
    background: var(--ws-teal-hover) !important;
    color: #ffffff !important;
}

/* Predictable document viewport for long and multi-page previews. */
.epay-w2c-generator .w2c-preview-shell,
.epay-w4p-generator .w4p-preview-shell {
    height: clamp(560px, calc(100dvh - 190px), 720px) !important;
    max-height: 720px !important;
    overflow: auto !important;
    overscroll-behavior: contain;
    border: 1px solid var(--ws-border) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
}

@media (max-width: 767.98px) {
    :is(
        #w2HeroTitle,
        #w2cHeroTitle,
        #w3PageTitle,
        #w4HeroTitle,
        #w4pHeroTitle,
        #w7HeroTitle,
        #w8PageTitle,
        #w9HeroTitle,
        .epay-w2-generator .epay-w2-hero__title,
        .w-create-hero-standard[data-w-create-standard="1"] .w-create-hero-title
    ) {
        font-size: 28px !important;
        line-height: 1.2 !important;
        letter-spacing: -.6px !important;
        text-align: center !important;
    }

    .epay-w2-generator .epay-w2__hero #w2HeroTitle,
    .epay-w2c-generator .w-create-hero-standard[data-w-create-standard="1"] #w2cHeroTitle,
    .epay-w3-generator .w-create-hero-standard[data-w-create-standard="1"] #w3PageTitle,
    .epay-w4-generator .w-create-hero-standard[data-w-create-standard="1"] #w4HeroTitle,
    .epay-w4p-generator .w-create-hero-standard[data-w-create-standard="1"] #w4pHeroTitle,
    .epay-w7-generator .w-create-hero-standard[data-w-create-standard="1"] #w7HeroTitle,
    .epay-w8ben .w-create-hero-standard[data-w-create-standard="1"] #w8PageTitle,
    .epay-w9-generator .w-create-hero-standard[data-w-create-standard="1"] #w9HeroTitle {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }

    .epay-w2-generator .epay-w2__hero,
    .w-create-hero-standard[data-w-create-standard="1"] {
        padding-top: 24px !important;
        padding-bottom: 18px !important;
    }

    :is(
        .epay-w2-generator,
        .epay-w2c-generator,
        .epay-w3-generator,
        .epay-w4-generator,
        .epay-w4p-generator,
        .epay-w7-generator,
        .epay-w8ben,
        .epay-w9-generator
    ) :is(.form-section-title, .w3-section-title, .w4-section-title, .w8-section-title) {
        font-size: 20px !important;
        line-height: 27px !important;
    }

    .epay-w4-generator .w4-section-heading h2 {
        font-size: 20px !important;
        line-height: 27px !important;
    }

    :is(
        .epay-w2-generator,
        .epay-w2c-generator,
        .epay-w3-generator,
        .epay-w4-generator,
        .epay-w4p-generator,
        .epay-w7-generator,
        .epay-w8ben,
        .epay-w9-generator
    ) :is(
        .w2-card,
        .w2c-form-card,
        .w3-section,
        .w4-section-card,
        .w4p-form-card,
        .w7-form-card,
        .w8-section,
        .w9-form-card
    ) {
        border-radius: 14px !important;
    }

    .epay-w2c-generator .pdfv,
    .epay-w4p-generator .pdfv,
    .epay-w4-generator .w4-preview-card,
    .epay-w9-generator .pdfv {
        margin-right: 12px !important;
        margin-left: 12px !important;
        padding: 8px !important;
    }

    .epay-w2c-generator .w2c-preview-shell,
    .epay-w4p-generator .w4p-preview-shell {
        height: 560px !important;
        max-height: 70dvh !important;
    }
}

@media (max-width: 479.98px) {
    :is(
        .epay-w2-generator,
        .epay-w2c-generator,
        .epay-w3-generator,
        .epay-w4-generator,
        .epay-w4p-generator,
        .epay-w7-generator,
        .epay-w8ben,
        .epay-w9-generator
    ) :is(
        .epay-create-actions,
        .w2-preview-actions,
        .w2c-preview-actions,
        .w3-preview-actions,
        .w4-preview-actions,
        .w4p-preview-actions,
        .w7-preview-actions,
        .w8-preview-actions,
        .w9-preview-actions
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}