/* Styling for the ported ESA acquisition flow.
   Built on top of the Verify.Dog console theme (Bootstrap + card-default).

   Card inset tokens (mandatory — do not drop to 0 for content cards):
     --card-pad-x  horizontal clearance from card border to text/media
     --card-pad-y  vertical padding
   All .esa-card / upgrade / plan boxes inherit these.
*/
.esa-flow {
    --card-pad-x: 40px;
    --card-pad-y: 32px;
}

.esa-flow .esa-lead {
    max-width: 720px;
    margin: 0 auto 8px;
}

.esa-flow__banner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: #fff6cc;
    border: 1px solid #FDD000;
    color: #2e3644;
    font-weight: 600;
    font-size: 13px;
}

.esa-flow__banner .esa-ck-secure__lock {
    display: inline-flex;
    color: #2e3644;
    flex-shrink: 0;
}

/* Choice / product cards — white, 1px Yes-box gray outline, soft dark shadow */
.esa-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    text-align: center;
    border: 1px solid #e6e6e6;
    border-radius: 16px;
    background: #fff;
    padding: var(--card-pad-y) var(--card-pad-x);
    box-sizing: border-box;
    box-shadow: 2px 4px 12px 0 rgba(0, 0, 0, 0.08);
}

/* Upsell / add-product cards — 8px rhythm; extra air around the product image */
.esa-card.esa-upgrade {
    --card-pad-x: 48px;
    --card-pad-y: 48px;
    --upgrade-gap: 36px;       /* major blocks: price / copy / list→CTA */
    --upgrade-gap-sm: 20px;    /* related meta: title → price */
    --upgrade-gap-tight: 12px; /* label → list, list item step */
    --upgrade-media-gap: 48px; /* copy → image, image → includes */
    text-align: center;        /* centers .esa-upgrade__price like .pcard__price */
}

.esa-card__title {
    display: inline-block;
    margin: 0 auto 12px;
    padding: 6px 16px;
    border-radius: 8px;
    background: var(--bs-primary, #FDD000);
    color: #2e3644;
    font-weight: 700;
    font-size: 18px;
}

.esa-card__title--muted {
    background: #6b7280;
}

.esa-card__price {
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    color: #0f1b2d;
    margin-bottom: 16px;
}

.esa-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 132px;
    margin-bottom: 16px;
    font-size: 64px;
    color: var(--bs-primary, #FDD000);
}

.esa-card__media img {
    max-width: 100%;
    max-height: 180px;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
}

.esa-card__desc {
    flex: 1 1 auto;
    color: #55647a;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* ---- Checkout: keep the payment card in view while scrolling (desktop) -- */
/* The base layout sets .main { overflow: hidden }, which silently disables
   position: sticky for descendants. Restore visible overflow on flow pages. */
.main.esa-flow {
    position: relative;
    overflow: visible;
    /* Raise funnel content toward the header (default .main is 64px + 1.5rem). */
    padding-top: calc(64px + 0.5rem);
}

@media (min-width: 992px) {
    .esa-ck-sticky {
        position: sticky;
        top: 24px;
        align-self: flex-start;
    }
}

/* Order summary line items / add-ons — full width of the parent card */
.esa-flow #cartItems > .border,
.esa-flow #cartAddons > .border {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}

.esa-flow #cartAddons > .fw-semibold {
    text-align: left;
}

/* Total row full width of the card */
.esa-flow .card-default > .d-flex.justify-content-between.border-top {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Cart line copy: darker + heavier + space under the product name */
.esa-flow #cartItems .esa-ck-line__name,
.esa-flow #cartAddons .esa-ck-line__name {
    color: #0f1b2d;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
}

.esa-flow #cartItems .esa-ck-line__desc,
.esa-flow #cartAddons .esa-ck-line__desc {
    margin-top: 8px;
    color: #3b4759 !important;
    font-size: 14px;
    font-weight: 600 !important;
    line-height: 1.45;
}

/* Checkout line-item / addon secondary copy — readable dark slate, not pale gray */
.esa-flow #cartItems .text-gray,
.esa-flow #cartAddons .text-gray,
.esa-flow #sdRegReview .text-gray {
    color: #3b4759 !important;
    font-weight: 600;
}

.esa-flow #cartAddons > .text-gray.fw-semibold,
.esa-flow #cartAddons > p.text-gray {
    color: #2e3644 !important;
    font-weight: 700 !important;
}

.esa-flow .esa-note .text-primary,
.esa-flow .esa-note p {
    color: #2e3644 !important;
    font-weight: 600;
}

.esa-flow .esa-note .fw-semibold.text-primary {
    font-weight: 800 !important;
}

.esa-flow #cartItems .esa-ck-line__was {
    color: #7a8699;
    font-weight: 600;
    text-decoration: line-through;
}

.esa-flow #cartItems .esa-ck-line__name .esa-ck-line__was {
    margin-left: 0.35em;
    font-weight: 700;
}

.esa-flow #cartItems .esa-ck-line__free {
    color: #0f8a4b;
    font-weight: 800;
}

.esa-flow #cartItems .esa-ck-line__price {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4em;
    white-space: nowrap;
}

/* Complete purchase — ONLY checkout CTA allowed full-span; keep label on one line.
   This is the sole green button in the project. */
.esa-flow #completePurchaseBtn,
#completePurchaseBtn {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    min-height: 2.75em;
    font-size: 17px !important;
    font-weight: 700 !important;
    --bs-btn-bg: #1a9f55;
    --bs-btn-border-color: #1a9f55;
    --bs-btn-hover-bg: #158a49;
    --bs-btn-hover-border-color: #158a49;
    --bs-btn-active-bg: #127840;
    --bs-btn-active-border-color: #127840;
    --bs-btn-color: #ffffff;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-color: #ffffff;
    background-color: #1a9f55 !important;
    border-color: #1a9f55 !important;
    color: #ffffff !important;
}

.esa-flow #completePurchaseBtn:hover,
.esa-flow #completePurchaseBtn:focus-visible,
#completePurchaseBtn:hover,
#completePurchaseBtn:focus-visible {
    background-color: #158a49 !important;
    border-color: #158a49 !important;
    color: #ffffff !important;
}

.esa-flow #completePurchaseBtn:active,
#completePurchaseBtn:active {
    background-color: #127840 !important;
    border-color: #127840 !important;
    color: #ffffff !important;
}

/* ---- Upgrade-path product template (add-product 1/2/3) ------------------ */
/* Order: title → price → copy → media → includes → list → CTAs             */
.esa-upgrade__title {
    display: block;
    margin: 0 0 var(--upgrade-gap-sm, 16px);
    color: #1a1a1a;
    font-weight: 800;
    font-size: 26px;
    line-height: 1.2;
    text-align: center;
}

/* Price badge — same token as plans .pcard__price ($159 style) */
.esa-upgrade__price {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    min-height: 40px;
    margin: 0 auto var(--upgrade-gap, 32px);
    padding: 8px 22px;
    border-radius: 10px;
    background: #FDD000;
    color: #0f1b2d;
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
}

/* Product art inside upgrade cards (replaces .esa-upgrade__ph). */
.esa-upgrade__media {
    display: block;
    width: 100%;
    max-width: 525px; /* was 420px — 1.25× */
    margin: 0 auto var(--upgrade-media-gap, 48px);
}
.esa-upgrade__media img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}
.esa-upgrade__copy,
.esa-upgrade__includes-label,
.esa-upgrade__list {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0;
}
.esa-upgrade__copy {
    text-align: center;
    color: #3b4759;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.55;
    margin: 0 0 var(--upgrade-media-gap, 48px);
}
.esa-upgrade__includes-label {
    text-align: left;
    margin: 0 0 var(--upgrade-gap-tight, 12px);
    font-size: 18px;
    font-weight: 800;
    color: #0f1b2d;
}
.esa-upgrade__list {
    list-style: none;
    margin: 0 0 var(--upgrade-gap, 32px);
    padding: 0;
    text-align: left;
}
.esa-upgrade__list li {
    position: relative;
    padding-left: 1.1em;
    margin: 0 0 var(--upgrade-gap-tight, 12px);
    color: #0f1b2d;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.45;
}
.esa-upgrade__list li:last-child {
    margin-bottom: 0;
}
.esa-upgrade__list li::before {
    content: "\2022";
    position: absolute;
    left: 0;
    color: #0f1b2d;
}

/* Yes / No — one compact row, equal pills. Overrides Console min-width: 13.5em. */
.esa-upgrade__actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 8px;
}

.esa-upgrade__actions .btn,
.esa-upgrade__actions a.btn,
.esa-upgrade__actions a[data-upsell-yes],
.esa-upgrade__actions a[data-upsell-no] {
    flex: 0 0 5.5rem !important;
    width: 5.5rem !important;
    min-width: 5.5rem !important;
    max-width: 5.5rem !important;
    margin: 0 !important;
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

/* Clearly-marked image placeholder */
.esa-upgrade__ph {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 360px;
    min-height: 200px;
    margin: 0 auto 20px;
    border: 2px dashed #c1c7d0;
    border-radius: 16px;
    background: repeating-linear-gradient(45deg, #f6f7f9, #f6f7f9 12px, #eef0f3 12px, #eef0f3 24px);
    color: #6b7280;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 13px;
}

.esa-upgrade__ph-icon {
    font-size: 42px;
    line-height: 1;
    opacity: .45;
}

.esa-card__badge {
    position: absolute;
    top: -12px;
    right: 16px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #ff6b35;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    box-shadow: 0 4px 10px rgba(255, 107, 53, .3);
}

/* =====================================================================
   Vertical, stacked ESA plan cards (product-select-1).
   Emulates the funnel's tiered pricing layout but in the Verify.Dog
   console theme: yellow (#FDD000) primary with black text, white cards
   on the console background. The pet-matched plan is moved to the top
   and shaded (.is-recommended); the Basic plan is always last.
   ===================================================================== */
.esa-plans {
    max-width: 620px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.esa-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 22px;
    padding: 32px 28px;
    box-shadow: 2px 4px 12px 0 rgba(0, 0, 0, 0.08);
    transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

.esa-plan:hover {
    border-color: #c7d6f0;
    box-shadow: 0 16px 34px rgba(31, 75, 153, .12);
    transform: translateY(-2px);
}

/* Recommended (pet-matched) plan: shaded + accent border + ribbon shown. */
.esa-plan.is-recommended {
    border: 2px solid #FDD000;
    background: #fffdf2;
    box-shadow: 0 14px 30px rgba(253, 208, 0, .18);
}

.esa-plan__ribbon {
    display: none;
    position: absolute;
    top: -12px;
    right: 20px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #ff6b35;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    box-shadow: 0 4px 10px rgba(255, 107, 53, .3);
}

.esa-plan.is-recommended .esa-plan__ribbon {
    display: inline-block;
}

.esa-plan__head {
    text-align: center;
}

.esa-plan__tag {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 8px;
    background: #FDD000;
    color: #000;
    font-weight: 700;
    font-size: 16px;
}

.esa-plan__price {
    font-size: 50px;
    font-weight: 800;
    line-height: 1;
    color: #0f1b2d;
    margin-top: 14px;
}

.esa-plan__sub {
    margin-top: 8px;
    color: #55647a;
    font-weight: 600;
    font-size: 14px;
}

/* Product image placeholder inside each plan card. */
.esa-plan__media {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px auto 4px;
    width: 100%;
    background: #f5f6f8;
    border-radius: 14px;
    overflow: hidden;
}

.esa-plan__media img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 190px;
    object-fit: cover;
}

.esa-plan__features {
    list-style: none;
    padding: 0;
    margin: 20px 0 4px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

.esa-plan__features li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: #0f1b2d;
    font-size: 15px;
    line-height: 1.45;
}

.esa-plan__features li:before {
    content: "\2713";
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #FDD000;
    color: #000;
    font-weight: 800;
    font-size: 12px;
    margin-top: 1px;
}

.esa-plan__note {
    margin: 12px 0 20px;
    color: #55647a;
    font-size: 13px;
    text-align: center;
}

.esa-plan__cta {
    margin-top: auto;
}

@media (max-width: 575.98px) {
    .esa-plan { padding: 24px 18px; }
    .esa-plan__price { font-size: 38px; }
    .esa-plan__features li { font-size: 14px; }
}

/* =====================================================================
   Home "Choose Your Plan" — product cards.
   Responsive grid: 2-up desktop/tablet, 1-up mobile.
   Cards live inside the normal site .container (same frame as content
   above) — never full page width. Only the hero is bleed/full-bleed.

   Spacing rule (apply to every card block — do not invent one-offs):
     --pad-x / --pad-y = card inset
     --gap = vertical rhythm between head / includes / media / desc / cta
     --media-desc-gap = REQUIRED space below product image before copy
       (set with padding on .esa-plan__media — margins are zeroed elsewhere)
   Sibling cards in a row share row tracks via CSS subgrid so those
   blocks line up across columns.
   ===================================================================== */

#section-products > .container {
    max-width: 1320px;
}

.esa-plans-grid {
    --gap: 32px;
    --media-desc-gap: 32px;
    --pad-y: 32px;
    --pad-x: 32px;
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 36px;
    row-gap: 48px;
    align-items: stretch;
    justify-content: center;
}

/* Tracks: head | includes | media | desc | cta */
.esa-plans-grid .esa-plan {
    --gap: inherit;
    --pad-y: inherit;
    --pad-x: inherit;
    min-width: 0;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 5;
    row-gap: var(--gap);
    padding: 0 var(--pad-x) var(--pad-y); /* top flush — title uses full-span banner */
    border-radius: 18px;
    text-align: center;
    overflow: hidden;
}

/* Spacing comes only from --gap / row-gap — kill inherited margins. */
.esa-plans-grid .esa-plan > *,
.esa-plans-grid .esa-plan p,
.esa-plans-grid .esa-plan ul,
.esa-plans-grid .esa-plan h1,
.esa-plans-grid .esa-plan h2,
.esa-plans-grid .esa-plan h3 {
    margin: 0 !important;
}

.esa-plans-grid .esa-plan__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-height: 0;
    width: 100%;
    padding-top: 0;
}

/* Full-span product header (same chrome as .pcard__banner on plans pages) */
.esa-plans-grid .esa-plan__tag {
    align-self: stretch;
    width: calc(100% + 2 * var(--pad-x));
    max-width: none;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin-left: calc(-1 * var(--pad-x)) !important;
    margin-right: calc(-1 * var(--pad-x)) !important;
    margin-bottom: 28px !important;
    padding: 14px var(--pad-x);
    border-radius: 0;
    background: #FDD000;
    color: #0f1b2d;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.25;
    white-space: normal;
    text-align: center;
    text-decoration: none;
}

.esa-plans-grid .esa-plan__includes {
    justify-self: center;
    align-self: center;
    width: max-content;
    max-width: 100%;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 15px;
    border-radius: 14px;
    background: #f4f7f5;
    border: 1px solid #dce7e0;
    color: #223247;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
}

.esa-plans-grid .esa-plan__includes::before {
    content: "\2713";
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #12a150;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

/* Home plan price — large amount + small “today” / “/mo”, no yellow pill */
.esa-plans-grid .esa-plan__price {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 0;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #0f1b2d;
    font-size: 48px;
    font-weight: 800;
    line-height: 1;
}

.esa-plans-grid .esa-plan__cents {
    font-size: 0.5em;
    font-weight: 800;
    line-height: 1;
    align-self: flex-start;
    margin: 0.1em 0 0;
    letter-spacing: -0.04em;
}

.esa-plans-grid .esa-plan__permo {
    font-size: 18px;
    font-weight: 600;
    color: #64748b;
    line-height: 1.2;
    margin-left: 0.22em;
    letter-spacing: 0;
}

.esa-plans-grid .esa-plan__cents + .esa-plan__permo {
    margin-left: 0.08em;
}

.esa-plans-grid .esa-plan__sub {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #64748b;
    line-height: 1.4;
}

.esa-plans-grid .esa-plan__fee {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
}

.esa-plans-grid .esa-plan__fee .esa-plan__cents {
    font-size: 0.72em;
    margin-top: 0.05em;
    letter-spacing: -0.05em;
}

.esa-plans-grid .esa-plan__fee-mo {
    margin-left: 0.06em;
}

.esa-plans-grid .esa-plan__media {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    height: auto;
    background: transparent;
    border-radius: 0;
    overflow: hidden;
    /* Permanent: keep product art clear of the description below.
       Use padding (not margin) — card children force margin: 0. */
    padding-bottom: var(--media-desc-gap);
    box-sizing: content-box;
}

.esa-plans-grid .esa-plan__media img {
    display: block;
    width: 80%;
    max-width: 80%;
    height: auto;
    max-height: none;
    object-fit: contain;
}

.esa-plans-grid .esa-plan__desc {
    text-align: left;
    color: #3b4759;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
    align-self: start;
    /* Reinforcing gap above copy so image→text never sits flush. */
    padding-top: 0;
}

.esa-plans-grid .esa-plan__features {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}

.esa-plans-grid .esa-plan__features li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14px;
    font-weight: 400;
    color: #0f1b2d;
    line-height: 1.5;
}

.esa-plans-grid .esa-plan__features li:before {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    font-size: 11px;
    margin-top: 1px;
}

.esa-plans-grid .esa-plan__cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 14px;
    text-align: center;
    align-self: end;
    width: 100%;
}

.esa-plans-grid .esa-plan__cta .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    max-width: none;
    white-space: nowrap;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    padding: 13px 12px;
    box-sizing: border-box;
}
@media (min-width: 768px) {
    .esa-plans-grid .esa-plan__cta {
        align-items: center;
    }
    .esa-plans-grid .esa-plan__cta .btn {
        width: auto;
        min-width: 12em;
        padding: 13px 28px;
    }
}

.esa-plan__compare {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #55647a;
    cursor: pointer;
    user-select: none;
}

.esa-plan__compare input {
    width: 15px;
    height: 15px;
    accent-color: #FDD000;
    cursor: pointer;
}

/* Invisible stand-in that reserves the exact height of a Compare row so the
   Scan & Go card's button lines up with the other three cards' buttons. */
.esa-plan__compare--placeholder {
    visibility: hidden;
    pointer-events: none;
}

/* Fallback when CSS subgrid is unavailable: flex stack + same --gap rhythm. */
@supports not (grid-template-rows: subgrid) {
    .esa-plans-grid .esa-plan {
        display: flex;
        flex-direction: column;
        grid-row: auto;
        row-gap: 0;
    }
    .esa-plans-grid .esa-plan > * + * {
        margin-top: var(--gap) !important;
    }
    .esa-plans-grid .esa-plan__cta {
        margin-top: auto !important;
        padding-top: var(--gap);
    }
}


/* ---------------------------------------------------------------------
   Plan comparison table. Revealed (via .is-open) when two or more
   "Compare" boxes are checked. Collapsed height + fade keeps the reveal
   smooth and non-disruptive; a green check / red X marks each access.
   --------------------------------------------------------------------- */
.plans-compare {
    max-width: 1160px;
    margin: 0 auto;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .45s ease, opacity .35s ease, margin-top .45s ease;
}

.plans-compare.is-open {
    max-height: 1200px;
    opacity: 1;
    margin-top: 40px;
}

.plans-compare__card {
    background: #fff;
    border: 1px solid #efe6bd;
    border-radius: 20px;
    box-shadow: 0 18px 44px rgba(15, 27, 45, .12);
    padding: 24px 24px 28px;
}

.plans-compare__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.plans-compare__title {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: #0f1b2d;
}

.plans-compare__subtitle {
    margin: 4px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: #55647a;
}

.plans-compare__close {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    font-size: 30px;
    line-height: 1;
    color: #99a3b3;
    cursor: pointer;
    padding: 0 4px;
    transition: color .15s ease;
}

.plans-compare__close:hover { color: #0f1b2d; }

.plans-compare__scroll { overflow-x: auto; }

.plans-compare__table {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
    table-layout: fixed;
}

.plans-compare__table th,
.plans-compare__table td {
    padding: 14px 16px;
    text-align: center;
    border-bottom: 1px solid #eef1f5;
    font-size: 16px;
    vertical-align: middle;
}

.plans-compare__table thead th {
    font-size: 15px;
    font-weight: 800;
    color: #0f1b2d;
    vertical-align: bottom;
    white-space: normal;
    line-height: 1.3;
    hyphens: auto;
}

.plans-compare__table th.cmp-feat {
    width: 34%;
    text-align: left;
    font-weight: 600;
    color: #0f1b2d;
    white-space: normal;
    line-height: 1.35;
}

.plans-compare__table thead th.cmp-feat {
    border-bottom: 2px solid #FDD000;
}

.plans-compare__table tbody tr:nth-child(even) td,
.plans-compare__table tbody tr:nth-child(even) th.cmp-feat {
    background: #fcfbf4;
}

.cmp-yes,
.cmp-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 800;
}

.cmp-yes { background: #e6f6ec; color: #12a150; }
.cmp-no  { background: #fdecec; color: #e5484d; }

.cmp-cta-row td {
    padding-top: 20px;
    padding-bottom: 4px;
    border-bottom: 0;
    text-align: center;
    vertical-align: middle;
}
.cmp-cta-row th.cmp-feat { border-bottom: 0; background: transparent; }

.plans-compare__table .cmp-cta {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 11.75em !important;
    min-width: 11.75em !important;
    max-width: 11.75em !important;
    margin: 0 auto;
    white-space: nowrap !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.2;
    padding: 12px 20px !important;
    box-sizing: border-box;
}

@media (max-width: 575.98px) {
    .plans-compare__card { padding: 18px 16px 22px; }
    .plans-compare__title { font-size: 19px; }
}

/* Mobile: single column, one card at a time. Images still scale with width. */
@media (max-width: 767.98px) {
    .esa-plans-grid {
        --gap: 28px;
        --pad-y: 24px;
        --pad-x: 28px;
        width: 100%;
        max-width: 400px;
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 28px;
    }
    .esa-plans-grid .esa-plan__price {
        font-size: 32px;
    }
    .esa-plans-grid .esa-plan__permo {
        font-size: 14px;
    }
}

/* ---------------------------------------------------------------------
   "Choose Your Plan" carousel. Desktop (>=768px): a single horizontal row
   that scrolls and snaps, with prev/next arrows. Mobile (<=767px): falls
   back to the stacked single-column grid (one card at a time) and the
   arrows are hidden.
   --------------------------------------------------------------------- */
.esa-plans-carousel {
    position: relative;
    max-width: 1160px;
    margin: 0 auto;
}

.esa-plans-carousel__nav,
.esa-plans-carousel__controls {
    display: none;
}

@media (min-width: 768px) {
    /* Track becomes a horizontal, snap-scrolling flex row. */
    .esa-plans-grid--carousel {
        display: flex;
        justify-content: flex-start;   /* override base grid centering so card 1 is flush-left */
        max-width: none;
        gap: 20px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        padding: 6px 2px 18px;
        scrollbar-width: thin;
    }

    .esa-plans-grid--carousel .esa-plan {
        flex: 0 0 clamp(340px, 35vw, 380px);
        scroll-snap-align: start;
    }

    /* Prev/next controls, centered in a bar beneath the row. */
    .esa-plans-carousel__controls {
        display: flex;
        justify-content: center;
        gap: 14px;
        margin-top: 20px;
    }

    .esa-plans-carousel__nav {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        border: 1px solid #ece4c4;
        border-radius: 50%;
        background: #fff;
        color: #0f1b2d;
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
        box-shadow: 0 6px 18px rgba(15, 27, 45, .12);
        transition: background .15s ease, opacity .15s ease;
    }

    .esa-plans-carousel__nav:hover { background: #FDD000; }
    .esa-plans-carousel__nav:disabled { opacity: .35; cursor: default; }
    .esa-plans-carousel__nav:disabled:hover { background: #fff; }

    /* Dot indicators (one per card) between the arrows. */
    .esa-plans-carousel__dots {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .esa-plans-carousel__dot {
        width: 11px;
        height: 11px;
        padding: 0;
        border-radius: 50%;
        border: 1px solid #d9cf9f;
        background: #fff;
        cursor: pointer;
        transition: background .15s ease, border-color .15s ease, transform .15s ease;
    }

    .esa-plans-carousel__dot:hover { border-color: #FDD000; }

    .esa-plans-carousel__dot.is-active {
        background: #FDD000;
        border-color: #FDD000;
        transform: scale(1.2);
    }
}

/* =====================================================================
   Product-select supporting sections (testimonial, "what you get" panel,
   detail features, final CTA). All in the Verify.Dog console theme:
   yellow (#FDD000) primary with black text, white cards on the console
   background, image placeholders.
   ===================================================================== */
.esa-ps-quote {
    max-width: 620px;
    margin: 40px auto 0;
    padding: 24px 28px;
    background: #fff;
    border: 1px solid #e7ecf3;
    border-radius: 22px;
    box-shadow: 2px 4px 12px 0 rgba(0, 0, 0, 0.08);
    text-align: center;
}

.esa-ps-quote__avatar img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 12px;
}

.esa-ps-quote blockquote {
    margin: 0 0 10px;
    font-size: 18px;
    line-height: 1.5;
    color: #0f1b2d;
    font-style: italic;
}

.esa-ps-quote figcaption {
    color: #55647a;
    font-weight: 600;
    font-size: 14px;
}

.esa-ps-panel {
    max-width: 620px;
    margin: 24px auto 0;
    padding: 28px;
    background: #fffdf2;
    border: 2px solid #FDD000;
    border-radius: 22px;
    box-shadow: 0 14px 30px rgba(253, 208, 0, .18);
}

.esa-ps-panel__title {
    text-align: center;
    font-size: 24px;
    font-weight: 800;
    color: #0f1b2d;
    margin: 0 0 18px;
}

.esa-ps-checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.esa-ps-checklist li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: #0f1b2d;
    font-size: 15px;
    line-height: 1.45;
}

.esa-ps-checklist li:before {
    content: "\2713";
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #FDD000;
    color: #000;
    font-weight: 800;
    font-size: 12px;
    margin-top: 1px;
}

.esa-ps-section-title {
    max-width: 620px;
    margin: 44px auto 20px;
    text-align: center;
    font-size: 26px;
    font-weight: 800;
    color: #0f1b2d;
}

.esa-ps-feature {
    max-width: 620px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    gap: 22px;
    background: #fff;
    border: 1px solid #e7ecf3;
    border-radius: 22px;
    padding: 22px;
    box-shadow: 2px 4px 12px 0 rgba(0, 0, 0, 0.08);
}

.esa-ps-feature--reverse {
    flex-direction: row-reverse;
}

.esa-ps-feature__media {
    flex: 0 0 40%;
    background: #f5f6f8;
    border-radius: 14px;
    overflow: hidden;
}

.esa-ps-feature__media img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 180px;
    object-fit: cover;
}

.esa-ps-feature__body h3 {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 700;
    color: #0f1b2d;
}

.esa-ps-feature__body p {
    margin: 0;
    color: #55647a;
    line-height: 1.55;
}

.esa-ps-final {
    max-width: 620px;
    margin: 8px auto 0;
    text-align: center;
}

.esa-ps-finePrint {
    margin: 14px auto 0;
    max-width: 560px;
    color: #8a97a8;
    font-size: 12px;
    line-height: 1.5;
}

@media (max-width: 575.98px) {
    .esa-ps-feature,
    .esa-ps-feature--reverse {
        flex-direction: column;
        text-align: center;
    }
    .esa-ps-feature__media { width: 100%; flex-basis: auto; }
}

/* =====================================================================
   Recommended-plan product page (product-select-1), modeled on the
   waggy "recommended ESA plan" layout and reskinned to the Verify.Dog
   console theme (yellow #FDD000 primary, dark-navy text, white cards,
   soft-yellow accents). Three plan "views" live in the markup
   (multi / single / basic); esa-product-select.js shows the recommended
   one based on the funnel's pet count and lets the user switch.
   ===================================================================== */
.esa-rp {
    max-width: 640px;
    margin: 0 auto;
    --esa-accent: #ff6935;
}

/* Fancy coral underline (same as funnel .esa-uline) */
.esa-rp .esa-uline {
    text-decoration-line: underline;
    text-decoration-color: var(--esa-accent);
    -webkit-text-decoration-color: var(--esa-accent);
    text-decoration-thickness: 0.13em;
    text-underline-offset: 0.16em;
    text-decoration-skip-ink: none;
}

.esa-rp [data-plan-view][hidden] {
    display: none;
}

.esa-rp__eyebrow {
    display: block;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 16px;
    font-weight: 800;
    color: var(--esa-accent);
    margin-bottom: 18px;
}

/* Long white parent card: product header + inset includes/other plans */
.esa-rp-shell {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 20px;
    box-shadow: 2px 4px 12px 0 rgba(0, 0, 0, 0.08);
    overflow: hidden;
    margin-bottom: 28px;
}

.esa-rp-shell > .pcard {
    border: none;
    box-shadow: none;
    border-radius: 0;
    max-width: none;
    margin: 0;
    width: 100%;
}

.esa-rp-shell__body {
    padding: 8px 20px 28px;
}

.esa-rp-shell__body .esa-rp-section-label:first-child {
    margin-top: 12px;
}

/* Hero — top of continuous shell (no separate card chrome) */
.esa-rp-hero {
    --rp-hero-gap: 36px;
    --rp-hero-gap-sm: 20px;
    --rp-hero-media-gap: 48px;
    text-align: center;
    background: #fff;
    border: none;
    border-radius: 0;
    padding: 48px 32px 40px;
    box-shadow: none;
}

/* When hero stands alone (no shell), keep a soft white card */
.esa-rp > .esa-rp-hero,
[data-plan-view] > .esa-rp-hero {
    border: 1px solid #e6e6e6;
    border-radius: 16px;
    box-shadow: 2px 4px 12px 0 rgba(0, 0, 0, 0.08);
}

.esa-rp-shell > .esa-rp-hero {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.esa-rp-hero__title {
    font-size: 34px;
    font-weight: 800;
    color: #0f1b2d;
    margin: 0 0 var(--rp-hero-gap-sm);
}

.esa-rp-hero__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto var(--rp-hero-gap-sm);
    max-width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
}

.esa-rp-hero__badges .esa-rp-hero__subtitle {
    margin: 0;
}

.esa-rp-hero__subtitle {
    display: block;
    width: max-content;
    max-width: calc(100% - 32px);
    box-sizing: border-box;
    margin: 0 auto var(--rp-hero-gap-sm);
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid #e6d7a8;
    background: #fff6d6;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 12.5px;
    font-weight: 700;
    color: #3d4554;
    line-height: 1.35;
    text-align: center;
}

.esa-rp-hero__subtitle:before,
.esa-rp-hero__subtitle:after {
    content: none;
}

.esa-rp-price,
.esa-rp-price__sub {
    width: max-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Same price language as home plan cards — large amount + small “today” */
.esa-rp-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.28em;
    margin: 0 auto 6px;
    color: #0f1b2d;
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
}

.esa-rp-price__per {
    font-size: 18px;
    font-weight: 600;
    color: #64748b;
    line-height: 1.2;
}

.esa-rp-price__sub {
    display: block;
    margin: 0 auto;
    font-size: 18px;
    font-weight: 600;
    color: #64748b;
    line-height: 1.4;
    text-align: center;
}

/* Legacy pill classes kept for older markup — restyle to match, no yellow chip */
.esa-rp-pricepill {
    display: inline-flex;
    align-items: baseline;
    gap: 0.28em;
    margin: 0 0 6px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #0f1b2d;
    font-weight: 800;
    font-size: 42px;
    line-height: 1;
}

@media (min-width: 768px) {
    .esa-rp-price,
    .esa-rp-pricepill {
        font-size: 34px;
    }
}

.esa-rp-pricepill__was,
.esa-rp-pricepill__sep {
    display: none;
}

.esa-rp-hero__media {
    margin: var(--rp-hero-media-gap) auto 0;
    max-width: 460px;
    background: transparent;
    border-radius: 16px;
    overflow: hidden;
}

.esa-rp-hero__media img {
    display: block;
    width: 100%;
    height: auto;
}

/* Section labels ("WHAT'S INCLUDED", "OTHER PLANS AVAILABLE") */
.esa-rp-section-label {
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 16px;
    font-weight: 800;
    color: var(--esa-accent);
    margin: 28px 0 14px;
}

/* "What's included" cards */
.esa-rp-incl {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.esa-rp-incl__card {
    position: relative;
    background: #fff; /* white — yellow badge stays */
    border: 1px solid #e6e6e6;
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: 2px 4px 12px 0 rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

/* Cards that carry a corner badge get extra top room so the title clears it. */
.esa-rp-incl__card:has(.esa-rp-incl__badge) {
    padding-top: 48px;
    background: #fff;
}

.esa-rp-incl__badge {
    /* Pinned flush to the card's top-left corner; the card's overflow:hidden +
       16px radius clips it so it hugs the rounded corner as a branded tab. */
    position: absolute;
    top: 0;
    left: 0;
    padding: 8px 16px;
    border-radius: 0 0 12px 0;
    background: #FDD000;
    color: #000;
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.esa-rp-incl__title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 800;
    color: #0f1b2d;
}

.esa-rp-incl__desc {
    margin: 0;
    color: #55647a;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

.esa-rp-incl__desc a {
    color: #0f1b2d;
    text-decoration: underline;
}

.esa-rp-incl__desc a.esa-rp-incl__sal {
    color: #ff6935;
    font-weight: 700;
    text-underline-offset: 2px;
}

.esa-rp-incl__desc a.esa-rp-incl__sal:hover {
    color: #c9451f;
}

/* Refund reassurance row */
.esa-rp-refund {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 22px 0 16px;
    color: #ff6b35;
    font-weight: 800;
    font-size: 18px;
}

.esa-rp-refund__box {
    flex: 0 1 auto;
    width: 62.5%; /* 5/8 */
    max-width: 62.5%;
    text-align: center;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 16px;
    padding: 14px 18px;
    color: #0f1b2d;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 2px 4px 12px 0 rgba(0, 0, 0, 0.05);
}

.esa-rp-refund__box strong {
    font-weight: 800;
    color: #0f1b2d;
    text-decoration: none; /* fancy underline via .esa-uline */
}

.esa-rp-cta-note {
    margin: 12px auto 0;
    max-width: 460px;
    text-align: center;
    color: #2e3644;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

/* "Other plans available" */
.esa-rp-other {
    margin-top: 34px;
}

.esa-rp-other__card {
    display: flex;
    gap: 0;
    align-items: stretch;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 16px;
    padding: 0;
    margin-bottom: 14px;
    box-shadow: 2px 4px 12px 0 rgba(0, 0, 0, 0.05);
    cursor: pointer;
    overflow: hidden;
    transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

.esa-rp-other__card:hover {
    border-color: #FDD000;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .1);
    transform: translateY(-2px);
}

/* Thumb hugs top / left / bottom of the card; mint panel flush to those edges */
.esa-rp-other__thumb {
    flex: 0 0 118px;
    width: 118px;
    align-self: stretch;
    min-height: 108px;
    margin: 0;
    border-radius: 0;
    background: #eef7f4;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.esa-rp-other__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: 6px;
    box-sizing: border-box;
}

.esa-rp-other__card > span:not(.esa-rp-other__thumb) {
    flex: 1 1 auto;
    min-width: 0;
    padding: 16px 18px;
    display: block;
}

.esa-rp-other__name {
    display: block;
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 800;
    color: #0f1b2d;
}

.esa-rp-other__name + br {
    display: none;
}

.esa-rp-inlinepill {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #0f1b2d;
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 8px;
}

.esa-rp-inlinepill__was {
    display: none;
}

.esa-rp-other__desc {
    display: block;
    margin: 4px 0 0;
    color: #55647a;
    font-size: 14px;
    line-height: 1.45;
}

/* Clinician testimonial — white card; photo fills left 1/3 */
.esa-rp-quote {
    display: flex;
    align-items: stretch;
    gap: 0;
    max-width: none;
    margin: 34px 0;
    padding: 0;
    text-align: left;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 16px;
    box-shadow: 2px 4px 12px 0 rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.esa-rp-quote__photo {
    flex: 0 0 33.333%;
    width: 33.333%;
    max-width: 33.333%;
    align-self: stretch;
    min-height: 220px;
    height: auto;
    border-radius: 0;
    border: 0;
    object-fit: contain;
    object-position: center center;
    background: #fff;
    display: block;
    padding: 8px;
    box-sizing: border-box;
}

.esa-rp-quote__body {
    flex: 1 1 66.667%;
    min-width: 0;
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.esa-rp-quote blockquote {
    margin: 0 0 14px;
    font-size: 17px;
    line-height: 1.55;
    color: #0f1b2d;
    font-style: italic;
}

.esa-rp-quote__person {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    text-align: left;
}

.esa-rp-quote__person img {
    display: none;
}

.esa-rp-quote__name {
    display: block;
    font-weight: 800;
    color: #0f1b2d;
    font-size: 15px;
}

.esa-rp-quote__role {
    display: block;
    color: #55647a;
    font-size: 13px;
    line-height: 1.4;
}

@media (max-width: 575.98px) {
    .esa-rp-quote {
        flex-direction: column;
    }
    .esa-rp-quote__photo {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
        min-height: 180px;
        height: 180px;
    }
    .esa-rp-quote__body {
        padding: 18px 16px;
    }
    .esa-rp-quote blockquote {
        font-size: 15px;
    }
}

/* "What comes next?" steps panel */
.esa-rp-steps {
    background: #fffdf2;
    border: 1px solid #FDD000;
    border-radius: 16px;
    padding: 28px 26px;
    margin: 26px 0;
    box-shadow: 2px 4px 12px 0 rgba(0, 0, 0, 0.05);
}

.esa-rp-steps__title {
    font-size: 24px;
    font-weight: 800;
    color: #0f1b2d;
    margin: 0 0 18px;
}

.esa-rp-steplist {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
}

.esa-rp-step {
    display: flex;
    gap: 14px;
    padding-bottom: 18px;
    position: relative;
}

.esa-rp-step:last-child {
    padding-bottom: 0;
}

.esa-rp-step:not(:last-child):before {
    content: "";
    position: absolute;
    left: 15px;
    top: 34px;
    bottom: 2px;
    width: 2px;
    background: #ecdfa6;
}

.esa-rp-step__num {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    color: #000;
    background: #FDD000;
    z-index: 1;
}

.esa-rp-step--done .esa-rp-step__num {
    background: #16a34a;
    color: #fff;
}

.esa-rp-step--current .esa-rp-step__num {
    background: #ff6b35;
    color: #fff;
}

.esa-rp-step__title {
    margin: 4px 0 2px;
    font-weight: 800;
    color: #0f1b2d;
    font-size: 15.5px;
}

.esa-rp-step__desc {
    margin: 0;
    color: #55647a;
    font-size: 14px;
    line-height: 1.5;
}

/* "What to expect" feature blocks */
.esa-rp-expect__title {
    text-align: center;
    font-size: 26px;
    font-weight: 800;
    color: #0f1b2d;
    margin: 40px 0 22px;
}

.esa-rp-expect__block {
    text-align: center;
    border-radius: 16px;
    padding: 28px 24px;
    margin-bottom: 18px;
    background: #fff;
    border: 1px solid #e7ecf3;
    box-shadow: 2px 4px 12px 0 rgba(0, 0, 0, 0.05);
}

.esa-rp-expect__block--tint {
    background: #fff;
    border-color: #e7ecf3;
}

.esa-rp-expect__media {
    max-width: 500px;
    margin: 0 auto 18px;
}

.esa-rp-expect__media--tall {
    max-width: 260px;
}

.esa-rp-expect__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.esa-rp-expect__heading {
    margin: 0 0 10px;
    font-size: 21px;
    font-weight: 800;
    color: #0f1b2d;
}

.esa-rp-expect__text {
    margin: 0 auto;
    max-width: 460px;
    color: #55647a;
    line-height: 1.6;
}

.esa-rp-expect__list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 20px auto 0;
    padding: 0;
    max-width: 34rem;
    text-align: center;
    align-items: stretch;
}

.esa-rp-expect__list li {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    min-height: 2.75rem;
    height: 100%;
    padding: 0.65rem 0.85rem;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    color: #0f1b2d;
    background: #fff6cc;
    border: 1px solid #f5e6a0;
    border-radius: 999px;
    box-sizing: border-box;
}

@media (max-width: 575px) {
    .esa-rp-expect__list {
        grid-template-columns: 1fr;
    }
}

/* Final CTA + legal */
.esa-rp-final {
    margin-top: 8px;
    text-align: center;
}

.esa-rp-legal {
    margin: 16px auto 0;
    max-width: 560px;
    text-align: center;
    color: #2e3644;
    font-size: 11.5px;
    line-height: 1.6;
}

.esa-rp-legal p {
    margin: 0 0 6px;
}

@media (max-width: 575.98px) {
    .esa-rp-hero__title { font-size: 27px; }
    .esa-rp-hero__subtitle { font-size: 11.5px; }
    .esa-rp-other__thumb { flex-basis: 96px; width: 96px; min-height: 96px; }
    .esa-rp-other__name { font-size: 16px; }
    .esa-rp-expect__title { font-size: 22px; }
}

/* Pet-type selection cards */
.esa-pet-card {
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
}

.esa-pet-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 128px;
    height: 128px;
    margin: 0 auto 16px;
    background: #fffdf2;
    border: 2px solid #FDD000;
    border-radius: 50%;
}

.esa-pet-card__media img {
    width: 76px;
    height: 76px;
    object-fit: contain;
    /* Recolor the blue/green source icons to the brand black */
    filter: brightness(0) saturate(100%);
    opacity: .88;
}

.esa-pet-card__label {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #0f1b2d;
}

/* Guarantee / trust note */
.esa-note {
    border: 1px solid #FDD000;
    background: #fffdf2;
    border-radius: 12px;
    padding: 16px;
}

/* Inside the guarantee note, keep text on-brand (dark) rather than accent-yellow */
.esa-note .text-primary {
    color: #2e3644 !important;
}

/* ---- Yellow/black theming for all funnel form controls ---- */
.esa-flow .card-default {
    border: 1px solid #e6e6e6;
}

.esa-flow .form-control,
.esa-flow .form-select {
    border: 1px solid #e6e6e6;
}

.esa-flow .form-control:focus,
.esa-flow .form-select:focus {
    border-color: #FDD000;
    box-shadow: 0 0 0 0.25rem rgba(253, 208, 0, 0.30);
}

.esa-flow .form-check-input:checked {
    background-color: #FDD000;
    border-color: #FDD000;
}

/* Yellow radio with a dark centre dot (instead of low-contrast white) */
.esa-flow .form-check-input:checked[type="radio"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%232e3644'/%3e%3c/svg%3e");
}

/* Neutralize Bootstrap's green "valid" state — only errors are flagged (red) */
.esa-flow .was-validated .form-control:valid,
.esa-flow .form-control.is-valid {
    border-color: #e7ecf3;
    background-image: none;
}
.esa-flow .was-validated .form-control:valid:focus,
.esa-flow .form-control.is-valid:focus {
    border-color: #FDD000;
    box-shadow: 0 0 0 0.25rem rgba(253, 208, 0, 0.30);
}
.esa-flow .was-validated .form-select:valid,
.esa-flow .form-select.is-valid {
    border-color: #e7ecf3;
    /* keep the dropdown chevron, drop the green check */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}
.esa-flow .was-validated .form-check-input:valid,
.esa-flow .form-check-input.is-valid {
    border-color: rgba(0, 0, 0, 0.25);
}
.esa-flow .was-validated .form-check-input:valid:checked,
.esa-flow .form-check-input.is-valid:checked {
    background-color: #FDD000;
    border-color: #FDD000;
}
.esa-flow .was-validated .form-check-input:valid ~ .form-check-label,
.esa-flow .form-check-input.is-valid ~ .form-check-label {
    color: inherit;
}

.esa-flow .form-check-input:focus {
    border-color: #FDD000;
    box-shadow: 0 0 0 0.25rem rgba(253, 208, 0, 0.35);
}

.esa-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: #e6f7ec;
    color: #16a34a;
    font-size: 42px;
    margin-bottom: 8px;
}

/* ============================================================
   Personalized program summary page (/esa/program)
   ============================================================ */
.esa-pp {
    position: relative;
    max-width: 560px;
    margin: 0 auto;
    padding: 0 0 32px;
}

/*
  Back arrow outside/left of the content column, flush with the top —
  same treatment as .esa-wizard__back (does not push content down).
*/
.esa-pp__back {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    font-size: 22px;
    line-height: 1;
    color: #8a94a6;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid #e4e8ef;
    border-radius: 50%;
    background: #fff;
    box-shadow:
        0 1px 2px rgba(15, 27, 45, 0.04),
        0 6px 14px rgba(15, 27, 45, 0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

@media (min-width: 640px) {
    .esa-pp__back {
        left: -56px;
    }
}

@media (max-width: 639px) {
    .esa-pp:has(.esa-pp__back) {
        padding-left: 0;
    }
    .esa-pp__back {
        position: relative;
        left: auto;
        top: auto;
        margin: 0 0 12px;
    }
}

.esa-pp__back:hover {
    background: #fff;
    color: #6b7585;
    border-color: #d5dae3;
    transform: translateY(-1px);
    box-shadow:
        0 2px 4px rgba(15, 27, 45, 0.05),
        0 8px 18px rgba(15, 27, 45, 0.1);
}

/* Registration → add-product → checkout: same back chrome as .esa-pp */
.esa-flow-stage {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
}
.esa-flow-stage > .esa-pp__back {
    top: 0;
}
@media (min-width: 640px) {
    .esa-flow-stage > .esa-pp__back {
        left: -56px;
    }
}
@media (max-width: 639px) {
    .esa-flow-stage:has(> .esa-pp__back) {
        padding-left: 0;
    }
    .esa-flow-stage > .esa-pp__back {
        position: relative;
        left: auto;
        top: auto;
        margin: 0 0 12px;
    }
}

.esa-pp__title {
    text-align: center;
    font-size: 26px;
    font-weight: 800;
    color: #0f1b2d;
    margin: 0 auto 16px;
    max-width: 360px;
    line-height: 1.25;
}

/* Shared card shell for the program page sections */
.esa-pp__card {
    background: #fff;
    border: 1px solid #e7ecf3;
    border-radius: 16px;
    padding: 28px 24px;
    margin-bottom: 18px;
    box-shadow: 2px 4px 12px 0 rgba(0, 0, 0, 0.05);
}

.esa-pp__card--tint {
    background: #fffdf2;
    border-color: #FDD000;
}

/* Striking "In 4 hours" tag/tooltip with a downward pointer */
.esa-pp__tag {
    position: relative;
    display: block;
    width: max-content;
    max-width: 92%;
    margin: 0 auto 30px;
    padding: 12px 26px;
    text-align: center;
    background: linear-gradient(135deg, #ff6a2b 0%, #ff3d3d 100%);
    color: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(255, 61, 61, 0.35);
}

.esa-pp__tag:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -11px;
    transform: translateX(-50%);
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid #ff453b;
}

.esa-pp__tag-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.95;
}

.esa-pp__tag-main {
    display: block;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
    margin-top: 2px;
}

.esa-pp__plan {
    text-align: center;
    font-size: 20px;
    font-weight: 800;
    color: #0f1b2d;
    margin: 0 0 10px;
}

.esa-pp__guarantee {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: max-content;
    margin: 0 auto 22px;
    padding: 5px 14px;
    background: #e6f7ec;
    color: #16814a;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.esa-pp__points {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
}

.esa-pp__points li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 12px;
    color: #2e3644;
    font-size: 15px;
    line-height: 1.5;
}

.esa-pp__points li:before {
    content: "\2666";
    position: absolute;
    left: 4px;
    top: 0;
    color: #ff6b35;
    font-size: 15px;
}

/* Billing timeline */
.esa-pp__timeline {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
}

.esa-pp__step {
    position: relative;
    display: flex;
    gap: 14px;
    padding-bottom: 22px;
}

.esa-pp__step:last-child {
    padding-bottom: 0;
}

.esa-pp__step-icon {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #128a8a;
    color: #fff;
}

/* Connector line between steps */
.esa-pp__step:not(:last-child) .esa-pp__step-icon:after {
    content: "";
    position: absolute;
    top: 34px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: calc(100% + 22px - 34px);
    background: #cfe3e3;
}

.esa-pp__step-body {
    display: block;
    padding-top: 2px;
}

.esa-pp__step-head {
    display: block;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #0f6f6f;
}

.esa-pp__step-price {
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    color: #2e3644;
}

.esa-pp__step-price s {
    color: #9aa7b4;
    margin-right: 4px;
}

.esa-pp__free {
    color: #16a34a;
    font-weight: 800;
}

.esa-pp__step-sub {
    display: block;
    font-size: 13px;
    font-style: italic;
    color: #55647a;
    margin-top: 2px;
}

.esa-pp__step-text {
    display: block;
    font-size: 14px;
    line-height: 1.5;
    color: #2e3644;
    margin-top: 4px;
}

/* Rejection-protection upsell (uses the shared .esa-pp__card shell, white bg) */
.esa-pp__upsell.esa-pp__card {
    border: 1px solid var(--bs-red, #FF3B30);
}

.esa-pp__upsell-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ff6b35;
    text-align: center;
}

.esa-pp__upsell-title {
    margin: 8px 0 6px;
    font-size: 16px;
    font-weight: 800;
    color: #0f1b2d;
    text-align: center;
}

.esa-pp__upsell-text {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.5;
    color: #2e3644;
}

.esa-pp__check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #e7ecf3;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #0f1b2d;
    cursor: pointer;
}

.esa-pp__check input {
    width: 18px;
    height: 18px;
    accent-color: #128a8a;
}

/* Bundle savings banner */
.esa-pp__savings {
    text-align: center;
    background: #fffdf2;
    border: 1px solid #FDD000;
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 18px;
    color: #0f1b2d;
    font-size: 14px;
}

.esa-pp__savings strong {
    color: #0f1b2d;
}

.esa-pp__savings span {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #128a8a;
}

.esa-pp__cta {
    margin-bottom: 12px;
}

/* CTA labels are uppercase, matching the home page primary button. */
.esa-flow .btn,
.esa-pp .btn,
.esa-rp .btn {
    text-transform: uppercase;
}

/* Brand yellow primary fill — color only (no width). Every funnel/transaction
   CTA up to the plans pages is yellow. Skip .esa-ck-back (already yellow),
   .btn-action (console edit chips), .sd-ck-edit-save (modal Save),
   and #completePurchaseBtn (sole green Complete purchase CTA).
   The plans pages (.esa-rp) override this with the coral primary below. */
.esa-flow a.btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn),
.esa-flow .btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn),
.esa-flow button.btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn),
.esa-pp a.btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn),
.esa-pp .btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn),
.esa-pp button.btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn),
.esa-rp a.btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn),
.esa-rp .btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn),
.esa-rp button.btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn),
.esa-flow a.btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn):visited,
.esa-pp a.btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn):visited,
.esa-rp a.btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn):visited {
    font-size: 17px !important;
    font-weight: 700 !important;
    --bs-btn-bg: #FDD000;
    --bs-btn-border-color: #FDD000;
    --bs-btn-hover-bg: #fdd726;
    --bs-btn-hover-border-color: #fdd51a;
    --bs-btn-active-bg: #fdd933;
    --bs-btn-active-border-color: #fdd51a;
    --bs-btn-color: #353434;
    --bs-btn-hover-color: #00000D;
    --bs-btn-active-color: #00000D;
    background-color: #FDD000 !important;
    border-color: #FDD000 !important;
    color: #353434 !important;
}

/* ---- Plans pages only (/esa/plans, /psd/plans, /service-dog/plans) -------
   These pages are overwhelmingly yellow, so the purchase CTA switches to
   coral primary to carry the click. Green stays on Complete purchase. */
.esa-rp a.btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn),
.esa-rp .btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn),
.esa-rp button.btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn),
.esa-rp a.btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn):visited {
    --bs-btn-bg: #ff6935;
    --bs-btn-border-color: #ff6935;
    --bs-btn-hover-bg: #ff855c;
    --bs-btn-hover-border-color: #ff855c;
    --bs-btn-active-bg: #e85a28;
    --bs-btn-active-border-color: #e85a28;
    --bs-btn-color: #ffffff;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-color: #ffffff;
    background-color: #ff6935 !important;
    border-color: #ff6935 !important;
    color: #ffffff !important;
}

/* ---- Cap most flow CTAs at 300px.
   No :not(#id) here — that ID inflated specificity so plan overrides always lost.
   Plan-card CTAs are overridden below; #completePurchaseBtn has its own rules. */
.esa-flow .btn-primary:not(.btn-sm):not(.btn-action):not(.sd-ck-edit-save):not(.cmp-cta):not(.esa-plan-full-cta),
.esa-pp .btn-primary:not(.btn-sm):not(.btn-action):not(.sd-ck-edit-save):not(.cmp-cta):not(.esa-plan-full-cta),
.esa-rp .btn-primary:not(.btn-sm):not(.btn-action):not(.sd-ck-edit-save):not(.cmp-cta):not(.esa-plan-full-cta) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 300px !important;
    min-height: 3.375rem;
    margin-left: auto !important;
    margin-right: auto !important;
    letter-spacing: 0.01em;
}

.esa-plan__cta,
.esa-pp__cta,
.esa-rp__cta {
    text-align: center;
}

/* Home Choose Your Plan: full-span CTAs on mobile (beats the 300px cap above). */
.esa-plans-grid .esa-plan__cta {
    align-items: stretch;
    width: 100%;
}
#section-products.esa-flow .esa-plans-grid .esa-plan__cta > a.btn,
#section-products.esa-flow .esa-plans-grid .esa-plan__cta > a.btn-primary,
#section-products .esa-plans-grid .esa-plan__cta > a.btn.btn-primary,
.esa-flow .esa-plans-grid .esa-plan__cta > a.btn.btn-primary {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}

.esa-flow .plans-compare__table a.cmp-cta.btn-primary.rounded-pill {
    width: 11.75em !important;
    min-width: 11.75em !important;
    max-width: 11.75em !important;
    margin-left: auto !important;
    margin-right: auto !important;
    white-space: nowrap !important;
}

@media (min-width: 768px) {
    .esa-plans-grid .esa-plan__cta {
        align-items: center;
    }
    #section-products.esa-flow .esa-plans-grid .esa-plan__cta > a.btn,
    #section-products.esa-flow .esa-plans-grid .esa-plan__cta > a.btn-primary,
    #section-products .esa-plans-grid .esa-plan__cta > a.btn.btn-primary,
    .esa-flow .esa-plans-grid .esa-plan__cta > a.btn.btn-primary {
        width: auto !important;
        min-width: 12em !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 28px !important;
        padding-right: 28px !important;
    }
}

/* Checkout “Go Back” — brand yellow, dark text, compact (not 62.5% span) */
.esa-flow a.esa-ck-back.btn-primary,
.esa-flow a.esa-ck-back.btn-primary:hover,
.esa-flow a.esa-ck-back.btn-primary:focus,
.esa-flow a.esa-ck-back.btn-primary:active {
    font-size: 17px !important;
    font-weight: 700 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 10em;
    padding-left: 1.75rem !important;
    padding-right: 1.75rem !important;
    display: inline-flex !important;
    margin-left: auto !important;
    margin-right: auto !important;
    --bs-btn-bg: #FDD000;
    --bs-btn-border-color: #FDD000;
    --bs-btn-hover-bg: #fdd726;
    --bs-btn-hover-border-color: #fdd51a;
    --bs-btn-active-bg: #fdd933;
    --bs-btn-active-border-color: #fdd51a;
    --bs-btn-color: #2e3644;
    --bs-btn-hover-color: #2e3644;
    --bs-btn-active-color: #2e3644;
    background-color: #FDD000 !important;
    border-color: #FDD000 !important;
    color: #2e3644 !important;
}

.esa-flow a.btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn):hover,
.esa-flow .btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn):hover,
.esa-flow button.btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn):hover,
.esa-flow a.btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn):focus-visible,
.esa-flow .btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn):focus-visible,
.esa-flow button.btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn):focus-visible,
.esa-pp a.btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn):hover,
.esa-pp .btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn):hover,
.esa-pp button.btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn):hover,
.esa-pp a.btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn):focus-visible,
.esa-pp .btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn):focus-visible,
.esa-pp button.btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn):focus-visible,
.esa-rp a.btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn):hover,
.esa-rp .btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn):hover,
.esa-rp button.btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn):hover,
.esa-rp a.btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn):focus-visible,
.esa-rp .btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn):focus-visible,
.esa-rp button.btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn):focus-visible {
    background-color: #fdd726 !important;
    border-color: #fdd51a !important;
    color: #00000D !important;
}

.esa-flow a.btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn):active,
.esa-flow .btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn):active,
.esa-flow button.btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn):active,
.esa-pp a.btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn):active,
.esa-pp .btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn):active,
.esa-pp button.btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn):active,
.esa-rp a.btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn):active,
.esa-rp .btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn):active,
.esa-rp button.btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn):active {
    background-color: #fdd933 !important;
    border-color: #fdd51a !important;
    color: #00000D !important;
}

/* Plans pages keep the coral primary through every state. */
.esa-rp .btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn):hover,
.esa-rp .btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn):focus-visible {
    background-color: #ff855c !important;
    border-color: #ff855c !important;
    color: #ffffff !important;
}

.esa-rp .btn-primary:not(.btn-sm):not(.esa-ck-back):not(.btn-action):not(.sd-ck-edit-save):not(#completePurchaseBtn):active {
    background-color: #e85a28 !important;
    border-color: #e85a28 !important;
    color: #ffffff !important;
}

/* Console-style edit chips — light yellow, never coral */
.esa-flow a.btn-primary.btn-action,
.esa-flow button.btn-primary.btn-action,
.esa-flow a.btn-primary.btn-action:visited,
.esa-flow a.btn-primary.btn-action:hover,
.esa-flow a.btn-primary.btn-action:focus,
.esa-flow a.btn-primary.btn-action:focus-visible,
.esa-flow a.btn-primary.btn-action:active,
.esa-flow button.btn-primary.btn-action:hover,
.esa-flow button.btn-primary.btn-action:focus,
.esa-flow button.btn-primary.btn-action:focus-visible,
.esa-flow button.btn-primary.btn-action:active {
    --bs-btn-bg: #FDD000 !important;
    --bs-btn-border-color: #FDD000 !important;
    --bs-btn-hover-bg: #fdd726 !important;
    --bs-btn-hover-border-color: #fdd51a !important;
    --bs-btn-color: #000 !important;
    --bs-btn-hover-color: #000 !important;
    background-color: #FDD000 !important;
    border-color: #FDD000 !important;
    color: #000 !important;
}

/* Funnel Continue CTAs — 62.5% max (not home Choose Your Plan cards).
   Exclude Yes/No, checkout pay, back, compare, and home plan CTAs. */
.esa-pp a.esa-pp__cta,
.esa-pp a.btn-primary.esa-pp__cta,
.esa-rp a.btn-primary:not(.btn-sm),
.esa-rp .btn-primary:not(.btn-sm),
.esa-flow a.btn-primary.rounded-pill:not(.btn-sm):not([data-upsell-yes]):not([data-upsell-no]):not(#completePurchaseBtn):not(.esa-ck-back):not(.esa-plan-full-cta):not(.cmp-cta) {
    width: 62.5% !important;
    max-width: 62.5% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    min-height: 2.5em;
}

/* Home Choose Your Plan — always full-span under 768 (placed after 62.5% rule). */
@media (max-width: 767.98px) {
    #section-products.esa-flow .esa-plans-grid .esa-plan__cta {
        align-items: stretch !important;
        width: 100% !important;
    }
    #section-products.esa-flow .esa-plans-grid .esa-plan__cta > a.btn.btn-primary.rounded-pill,
    #section-products.esa-flow .esa-plans-grid .esa-plan__cta > a.esa-plan-full-cta {
        display: flex !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* Upgrade Yes/No — see .esa-upgrade__actions near upgrade template (compact row). */

.esa-pp__fineprint {
    text-align: center;
    font-size: 12px;
    line-height: 1.5;
    color: #2e3644;
    margin: 0 auto 26px;
    max-width: 460px;
}

/* Collapsed downstream steps (account/pet, payment) */
.esa-pp__steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.esa-pp__stepbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #e7ecf3;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #55647a;
    box-shadow: 2px 4px 12px 0 rgba(0, 0, 0, 0.04);
}

.esa-pp__stepnum {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f3f7;
    color: #55647a;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: normal;
}