/* Deliberate opt-ins only: hero intake actions and dedicated identification
   buttons. Final closers, Router handoffs, editorial links, and forms keep
   their existing treatment. Empty CSS-generated images are decorative. */
body main :is(
    .gnpc-home-hero-section .gnpc-home-primary,
    .gn-res-hero .gn-res-button,
    .gnpc-service-hero-section .gnpc-service-primary,
    .plan-hero .plan-button--primary,
    .gf-hero .gf-button--primary,
    .fg-hero .fg-button--primary,
    .hb-hero .hb-button--primary
) { --gn-action-image: url("../images/actions/request.svg"); }

body main :is(
    .gf-help__primary .gf-button--light,
    .insect-identification__action .insect-button--light,
    .rr-identify .rr-button--light,
    .sting-identify .sting-button--light,
    .bed-photos .bed-button--light
) { --gn-action-image: url("../images/actions/identify.svg"); }

body main .gn-commercial-hero .gn-commercial-button--primary {
    --gn-action-image: url("../images/actions/facility.svg");
}
body main .gn-commercial-hero .gn-commercial-phone {
    --gn-action-image: url("../images/actions/call.svg");
}

body main :is(
    .gnpc-home-hero-section .gnpc-home-primary,
    .gn-res-hero .gn-res-button,
    .gnpc-service-hero-section .gnpc-service-primary,
    .plan-hero .plan-button--primary,
    .gf-hero .gf-button--primary,
    .fg-hero .fg-button--primary,
    .hb-hero .hb-button--primary,
    .gf-help__primary .gf-button--light,
    .insect-identification__action .insect-button--light,
    .rr-identify .rr-button--light,
    .sting-identify .sting-button--light,
    .bed-photos .bed-button--light,
    .gn-commercial-hero .gn-commercial-button--primary,
    .gn-commercial-hero .gn-commercial-phone
) { gap: 12px; }

body main :is(
    .gnpc-home-hero-section .gnpc-home-primary,
    .gn-res-hero .gn-res-button,
    .gnpc-service-hero-section .gnpc-service-primary,
    .plan-hero .plan-button--primary,
    .gf-hero .gf-button--primary,
    .fg-hero .fg-button--primary,
    .hb-hero .hb-button--primary,
    .gf-help__primary .gf-button--light,
    .insect-identification__action .insect-button--light,
    .rr-identify .rr-button--light,
    .sting-identify .sting-button--light,
    .bed-photos .bed-button--light,
    .gn-commercial-hero .gn-commercial-button--primary,
    .gn-commercial-hero .gn-commercial-phone
)::before {
    content: "";
    flex: none;
    width: var(--gn-action-size, 32px);
    height: var(--gn-action-size, 32px);
    border-radius: 50%;
    background-color: var(--gn-action-field, var(--gn-color-orange-500));
    background-image: var(--gn-action-image);
    background-position: center;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* Replace the redundant trailing ornament on these actions alone. */
body main :is(
    .gn-res-hero .gn-res-button,
    .plan-hero .plan-button--primary,
    .gf-hero .gf-button--primary,
    .fg-hero .fg-button--primary,
    .hb-hero .hb-button--primary,
    .gf-help__primary .gf-button--light,
    .sting-identify .sting-button--light,
    .bed-photos .bed-button--light,
    .gn-commercial-hero .gn-commercial-button--primary
) > span[aria-hidden="true"] { display: none; }
body main .gnpc-service-hero-section .gnpc-service-primary::after { content: none; }

/* The orange Fargo action uses the same white glyph without another disk. */
body main .fg-hero .fg-button--primary {
    --gn-action-field: transparent;
    --gn-action-size: 20px;
}

/* Keep the Commercial number/label hierarchy, with a compact leading phone. */
body main .gn-commercial-hero .gn-commercial-phone {
    display: inline-grid;
    grid-template-columns: 32px max-content;
    grid-template-rows: auto auto;
    justify-content: center;
    align-content: center;
    column-gap: 12px;
    row-gap: 1px;
    text-align: left;
}
body main .gn-commercial-hero .gn-commercial-phone::before {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
}
body main .gn-commercial-hero .gn-commercial-phone > :is(span,strong) {
    grid-column: 2;
}

/* Keep the longer identification label on one line inside the mobile panel. */
@media (max-width: 560px) {
    body main .insect-identification__action .insect-button--light {
        padding-inline: 12px;
    }
}