/* ── Special Offers — hub, money pages, nav pill ── */

/* Nav CTA pill (loaded on hub/money pages; also mirrored in landing.css for all pages) */
.ht-nav-offers {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(135deg, #e8a87c 0%, #d4845a 50%, #c96b42 100%);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 2px 12px rgba(232, 168, 124, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    white-space: nowrap;
}

.ht-nav-offers:hover,
.ht-nav-offers:focus-visible {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 18px rgba(232, 168, 124, 0.5);
}

.ht-nav-offers--active {
    background: linear-gradient(135deg, #f0b88a 0%, #e0956a 100%);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35), 0 4px 16px rgba(232, 168, 124, 0.45);
}

@media (min-width: 1024px) {
    .ht-nav-offers:not(.ht-nav-offers--active) {
        animation: ht-nav-offers-pulse 3s ease-in-out infinite;
    }
}

@keyframes ht-nav-offers-pulse {
    0%, 100% { box-shadow: 0 2px 12px rgba(232, 168, 124, 0.35); }
    50% { box-shadow: 0 2px 20px rgba(232, 168, 124, 0.55); }
}

/* ── Hub hero ── */
.offers-hub-hero {
    position: relative;
    padding: clamp(5rem, 12vw, 8rem) 0 clamp(3rem, 8vw, 5rem);
    background:
        linear-gradient(
            180deg,
            rgba(22, 26, 34, 0.72) 0%,
            rgba(22, 26, 34, 0.55) 40%,
            rgba(22, 26, 34, 0.82) 100%
        ),
        url('/pics/begas.png') center / cover no-repeat;
    color: #fff;
    text-align: center;
    border-top: 3px solid rgba(212, 168, 110, 0.6);
}

.offers-hub-hero__inner {
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(1.75rem, 4vw, 2.25rem) clamp(1.5rem, 4vw, 2.25rem);
    border-radius: 20px;
    background: rgba(22, 26, 34, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

.offers-hub-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 1rem;
    border-radius: 999px;
    background: rgba(212, 168, 110, 0.12);
    border: 1px solid rgba(212, 168, 110, 0.35);
    color: #f0e7d3;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

.offers-hub-hero__eyebrow i {
    color: #d4a86e;
}

.offers-hub-hero h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 1rem;
    color: #fff;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.45);
}

.offers-hub-hero__sub {
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.6;
    margin-bottom: 2rem;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.offers-hub-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.offers-hub-trust span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 0.85rem;
    color: #f0e7d3;
}

.offers-hub-trust span i {
    color: #d4a86e;
}

/* ── Hub grid ── */
.offers-section {
    padding: clamp(3rem, 8vw, 5rem) 0;
    background: #f8f9fb;
}

.offers-section__header {
    text-align: center;
    max-width: 560px;
    margin: 0 auto 2.5rem;
}

.offers-section__header h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--text-dark, #1a1a2e);
    margin-bottom: 0.75rem;
}

.offers-section__header p {
    color: var(--text-muted, #5a6270);
    line-height: 1.6;
}

.offers-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .offers-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .offer-card--featured {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1024px) {
    .offer-card--featured .offer-card__link {
        display: grid;
        grid-template-columns: 1.1fr 1fr;
    }

    .offer-card--featured .offer-card__media {
        min-height: 320px;
    }
}

/* ── Offer cards ── */
.offer-card {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.offer-card--visible {
    opacity: 1;
    transform: translateY(0);
}

.offer-card__link {
    display: block;
    height: 100%;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.offer-card__link:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.offer-card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #e8ecf0;
}

.offer-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.offer-card__link:hover .offer-card__media img {
    transform: scale(1.04);
}

.offer-card__badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #e8a87c, #c96b42);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.offer-card__season {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
}

.offer-card__body {
    padding: 1.25rem 1.5rem 1.5rem;
}

.offer-card__label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #c96b42;
    margin-bottom: 0.5rem;
}

.offer-card__title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-dark, #1a1a2e);
    margin-bottom: 0.35rem;
}

.offer-card__subtitle {
    font-size: 0.95rem;
    color: var(--text-muted, #5a6270);
    line-height: 1.5;
    margin-bottom: 1rem;
}

.offer-card__includes {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    display: grid;
    gap: 0.4rem;
}

.offer-card__includes li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: var(--text-dark, #1a1a2e);
}

.offer-card__includes i {
    color: #2E86AB;
    margin-top: 0.15rem;
    font-size: 0.75rem;
}

.offer-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.offer-card__price-block {
    display: flex;
    flex-direction: column;
}

.offer-card__price {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2E86AB;
}

.offer-card__price-note {
    font-size: 0.78rem;
    color: var(--text-muted, #5a6270);
}

.offer-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #c96b42;
}

.offers-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem;
    color: var(--text-muted, #5a6270);
}

/* ── Money page ── */
.offer-money-hero {
    position: relative;
    padding: clamp(5rem, 11vw, 7rem) 0 clamp(2.5rem, 6vw, 4rem);
    background:
        linear-gradient(
            180deg,
            rgba(22, 26, 34, 0.72) 0%,
            rgba(22, 26, 34, 0.55) 40%,
            rgba(22, 26, 34, 0.82) 100%
        ),
        url('/pics/endo.png') center / cover no-repeat;
    color: #fff;
    border-top: 3px solid rgba(212, 168, 110, 0.6);
}

.offer-money-hero .container {
    display: grid;
    gap: 2rem;
    align-items: center;
}

@media (min-width: 900px) {
    .offer-money-hero .container {
        grid-template-columns: 1.1fr 0.9fr;
    }
}

.offer-money-hero__content {
    padding: clamp(1.5rem, 3vw, 2rem);
    border-radius: 20px;
    background: rgba(22, 26, 34, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

.offer-money-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    background: rgba(212, 168, 110, 0.12);
    border: 1px solid rgba(212, 168, 110, 0.35);
    color: #f0e7d3;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.offer-money-hero__badge i {
    color: #d4a86e;
}

.offer-money-hero h1 {
    font-size: clamp(1.85rem, 4.5vw, 2.75rem);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 0.75rem;
    color: #fff;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.45);
}

.offer-money-hero__tagline {
    font-size: clamp(1rem, 2vw, 1.15rem);
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.55;
    margin-bottom: 1.5rem;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

/* Hero inclusions list.
   Reuses .benefits-list.ht-hero-benefits, which already ships on ~20 pages and
   whose dark-hero rules (hair-transplant.css) match here because the page loads
   that stylesheet and carries body.hair-transplant-landing. Only two things
   differ: the pattern's icon accent is the hair-transplant sky-blue, and it has
   no margin that suits this panel. */
.offer-money-hero__includes {
    margin: 0 0 1.5rem;
}

.hair-transplant-landing .offer-money-hero__includes i {
    color: #f0b88a;
}

.offer-money-hero__tagline i {
    color: #d4a86e;
    margin-right: 0.3rem;
}

.offer-money-hero__content > p {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.55;
    margin-bottom: 1.25rem;
}

.offer-money-hero__price-row {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.offer-money-hero__price {
    font-size: clamp(2.25rem, 5vw, 3rem);
    font-weight: 700;
    color: #f0b88a;
}

.offer-money-hero__price-was {
    font-size: clamp(1.25rem, 2.5vw, 1.6rem);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
}

.offer-money-hero__price-was s {
    text-decoration-color: #e0534f;
    text-decoration-thickness: 2px;
}

.offer-money-hero__price-alt {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
}

.offer-money-hero__cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.offer-money-hero__visual {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.offer-money-hero__visual img {
    width: 100%;
    height: auto;
    display: block;
}

/* Mobile: clear fixed nav so glass cards don't overlap header */
@media (max-width: 768px) {
    .offers-hub-hero,
    .offer-money-hero {
        padding-top: calc(4.75rem + env(safe-area-inset-top, 0px) + var(--spacing-md, 1rem));
        border-top: none;
    }

    .offers-hub-hero .container,
    .offer-money-hero .container {
        padding-top: 0.25rem;
    }

    .offers-hub-hero__inner,
    .offer-money-hero__content {
        margin-top: 0.5rem;
        border-top: 3px solid rgba(212, 168, 110, 0.45);
    }
}

/* Urgency strip */
.offer-urgency {
    background: linear-gradient(90deg, #c96b42, #e8a87c);
    color: #fff;
    text-align: center;
    padding: 0.85rem 1rem;
    font-size: 0.92rem;
    font-weight: 500;
}

.offer-urgency strong {
    font-weight: 700;
}

/* Sections */
.offer-section {
    padding: clamp(2.5rem, 6vw, 4rem) 0;
}

.offer-section--alt {
    background: #f8f9fb;
}

.offer-section__title {
    font-size: clamp(1.4rem, 3vw, 1.85rem);
    font-weight: 700;
    color: var(--text-dark, #1a1a2e);
    margin-bottom: 0.5rem;
    text-align: center;
}

.offer-section__sub {
    text-align: center;
    color: var(--text-muted, #5a6270);
    max-width: 560px;
    margin: 0 auto 2rem;
    line-height: 1.6;
}

/* Inclusion rows */
.offer-inclusions {
    display: grid;
    gap: 1.25rem;
    max-width: 800px;
    margin: 0 auto;
}

/* Only widened where proof clips were injected (class set by forever-young-proof.js),
   so offers without clips keep the 800px reading measure. Below ~1100px the
   .container padding governs, leaving narrow screens unchanged either way. */
.offer-inclusions--proof {
    max-width: 1040px;
}

.offer-inclusion {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: start;
    padding: 1.25rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}

/* ── Proof clips (forever-young-proof.js) ──
   Injected into the inclusion cards; markup lives in JS so a CMS republish
   cannot strip it. Poster renders immediately, video loads only in view. */

.offer-inclusion--with-proof {
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "icon body"
        "proof proof";
}

.offer-inclusion--with-proof > .offer-inclusion__icon { grid-area: icon; }
.offer-inclusion--with-proof > div:not(.offer-inclusion__icon) { grid-area: body; }
.offer-inclusion--with-proof > .fy-proof { grid-area: proof; }

.fy-proof {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.fy-proof__frame {
    position: relative;
    width: 100%;
    max-width: 180px;
    aspect-ratio: 9 / 16;
    border-radius: 12px;
    overflow: hidden;
    background: #11141a;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
}

.fy-proof__video,
.fy-proof__still {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* If a clip 404s or the codec is unsupported, fall back to its poster. */
.fy-proof__video.is-failed {
    visibility: hidden;
}

.fy-proof__label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #2E86AB;
    background: rgba(46, 134, 171, 0.1);
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
}

/* Package-level result clip — larger, centred, its own section. */
.fy-result .fy-proof {
    margin: 0 auto;
}

.fy-proof--wide .fy-proof__frame {
    max-width: 300px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
}

/* From 720px the card has room for a third column beside the copy. */
@media (min-width: 720px) {
    .offer-inclusion--with-proof {
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "icon body proof";
        align-items: center;
    }

    /* Both width and max-width must be set: the base .fy-proof__frame rule caps
       at 180px, so setting width alone is silently clamped. */
    .offer-inclusion--with-proof .fy-proof__frame {
        width: 180px;
        max-width: 180px;
    }

    .fy-proof--wide .fy-proof__frame {
        width: 300px;
        max-width: 300px;
    }
}

/* Full size once the text column can spare the room. 270px is deliberate: at 2x
   it needs exactly the 540px the clips are encoded at, so nothing is upscaled. */
@media (min-width: 1000px) {
    .offer-inclusion--with-proof .fy-proof__frame {
        width: 270px;
        max-width: 270px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fy-proof__video {
        display: none;
    }
}

.offer-section--alt .offer-inclusion {
    background: #fff;
}

.offer-inclusion__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(46, 134, 171, 0.12), rgba(232, 168, 124, 0.2));
    color: #2E86AB;
    font-size: 1.2rem;
}

.offer-inclusion h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.offer-inclusion p {
    font-size: 0.9rem;
    color: var(--text-muted, #5a6270);
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.offer-inclusion a {
    font-size: 0.85rem;
    font-weight: 600;
    color: #2E86AB;
    text-decoration: none;
}

.offer-inclusion a:hover {
    text-decoration: underline;
}

/* ── Card detail: specs + benefit bullets (forever-young-proof.js) ──
   Fills the space the enlarged proof clip opens up beside the copy. Injected
   from JS for the same reason the clips are — the card body is CMS-editable
   through Quill, which would strip this markup.
   Desktop only: below 1000px the card stacks and has no spare room, so showing
   these would only make an already long mobile page longer.
   Scoped to .offer-inclusion on purpose — .fy-bullets is reused in the result
   section below, where it must stay visible at every width. */
.offer-inclusion .fy-specs,
.offer-inclusion .fy-bullets {
    display: none;
}

@media (min-width: 1000px) {
    .fy-specs {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem 1.25rem;
        margin: 0.85rem 0 0;
        padding: 0.85rem 1rem;
        background: rgba(46, 134, 171, 0.05);
        border: 1px solid rgba(46, 134, 171, 0.12);
        border-radius: 12px;
    }

    .fy-specs__item {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
    }

    .fy-specs__label {
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--text-muted, #5a6270);
    }

    .fy-specs__label i {
        font-size: 0.65rem;
        opacity: 0.65;
        margin-right: 0.15rem;
    }

    .fy-specs__value {
        margin: 0;
        font-size: 0.88rem;
        font-weight: 600;
        color: var(--text-dark, #1a1a2e);
    }

    /* Cards opt back in at this width; the hide rule above is card-scoped. */
    .offer-inclusion .fy-bullets {
        display: grid;
    }
}

/* Mirrors .offer-card__includes so the two lists read as one system.
   Base scope, not inside the media query — the result section reuses this list
   and needs it at every width. */
.fy-bullets {
    display: grid;
    gap: 0.4rem;
    list-style: none;
    margin: 0.85rem 0 0.9rem;
    padding: 0;
}

.fy-bullets li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--text-dark, #1a1a2e);
}

.fy-bullets i {
    color: #2E86AB;
    font-size: 0.8rem;
    margin-top: 0.18rem;
    flex-shrink: 0;
}

/* ── Package result section: copy left, clip right ──
   Capped and centred rather than stretched to the full 1136px container: the
   clip is encoded 540px wide, so widening it past 300 CSS px would upscale it
   on a 2x display. */
.fy-result__grid {
    display: grid;
    gap: clamp(2rem, 4vw, 3.5rem);
    max-width: 960px;
    margin: 0 auto;
    align-items: center;
}

.fy-result__copy {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: stretch;
}

.fy-result__copy .offer-section__title,
.fy-result__copy .offer-section__sub {
    text-align: left;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.fy-result__copy .offer-section__sub {
    margin-bottom: 1.25rem;
}

.fy-result__subtitle {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted, #5a6270);
    margin: 0;
}

.fy-result__cta {
    align-self: flex-start;
    margin-top: 0.35rem;
}

@media (min-width: 900px) {
    .fy-result__grid {
        grid-template-columns: 1fr 300px;
    }
}

/* Below the split, the clip leads and the copy follows — the same order the
   cinematic sections use so the visual hook is not pushed under the text. */
@media (max-width: 899px) {
    .fy-result__copy {
        order: 2;
        text-align: center;
    }

    .fy-result__grid > .fy-proof {
        order: 1;
    }

    .fy-result__copy .offer-section__title,
    .fy-result__copy .offer-section__sub {
        text-align: center;
    }

    .fy-result__subtitle {
        text-align: center;
    }

    .fy-result__copy .fy-bullets {
        display: inline-grid;
        text-align: left;
    }

    .fy-result__cta {
        align-self: center;
    }
}

/* Value stack */
.offer-value-table {
    max-width: 640px;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.offer-value-table table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.offer-value-table th,
.offer-value-table td {
    padding: 0.85rem 1.25rem;
    text-align: left;
    border-bottom: 1px solid #eef0f3;
    font-size: 0.92rem;
}

.offer-value-table th {
    background: #f0f2f5;
    font-weight: 600;
}

.offer-value-table tr:last-child td {
    border-bottom: none;
}

.offer-value-table .offer-value-total td {
    font-weight: 700;
    background: rgba(46, 134, 171, 0.08);
    color: #2E86AB;
}

.offer-value-table .offer-value-package td {
    font-weight: 700;
    background: rgba(201, 107, 66, 0.1);
    color: #c96b42;
}

/* Timeline */
.offer-timeline {
    display: grid;
    gap: 0;
    max-width: 720px;
    margin: 0 auto;
    position: relative;
}

@media (min-width: 640px) {
    .offer-timeline {
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }
}

.offer-timeline__step {
    text-align: center;
    padding: 1rem 0.75rem;
    position: relative;
}

.offer-timeline__num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #2E86AB;
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
    font-size: 0.9rem;
}

.offer-timeline__step h3 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.offer-timeline__step p {
    font-size: 0.82rem;
    color: var(--text-muted, #5a6270);
    line-height: 1.45;
}

/* Trust band */
.offer-trust-band {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    max-width: 900px;
    margin: 0 auto;
}

.offer-trust-band img {
    width: 120px;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
}

.offer-trust-band .ht-trust-pill--muted {
    background: #f0f2f5;
    color: #1a1a2e;
    border: 1px solid rgba(46, 134, 171, 0.22);
}

.offer-trust-band .ht-trust-pill--muted i {
    color: #2E86AB;
}

/* FAQ */
.offer-faq {
    max-width: 680px;
    margin: 0 auto;
}

.offer-faq details {
    background: #fff;
    border-radius: 10px;
    margin-bottom: 0.75rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.offer-faq summary {
    padding: 1rem 1.25rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.offer-faq summary::-webkit-details-marker {
    display: none;
}

.offer-faq summary::after {
    content: '+';
    font-size: 1.25rem;
    color: #2E86AB;
}

.offer-faq details[open] summary::after {
    content: '−';
}

.offer-faq details p {
    padding: 0 1.25rem 1rem;
    font-size: 0.92rem;
    color: var(--text-muted, #5a6270);
    line-height: 1.6;
}

/* Final CTA band */
.offer-final-cta {
    background: linear-gradient(135deg, #2E86AB 0%, #1a5f7a 100%);
    color: #fff;
    text-align: center;
    padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
}

.offer-final-cta h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: 0.5rem;
}

.offer-final-cta p {
    opacity: 0.9;
    margin-bottom: 1.5rem;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.offer-final-cta__price {
    font-size: 2rem;
    font-weight: 700;
    color: #f0b88a;
    margin-bottom: 1.25rem;
}

.offer-final-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.offer-btn-wa {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.5rem;
    border-radius: 999px;
    background: #25D366;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.offer-btn-wa:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}

/* Sticky mobile bar */
.offer-sticky-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 900;
    padding: 0.75rem 1rem;
    background: rgba(26, 26, 46, 0.95);
    backdrop-filter: blur(8px);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
    .offer-sticky-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
    }

    body.offer-money-page {
        padding-bottom: 72px;
    }
}

.offer-sticky-bar__price {
    font-weight: 700;
    color: #f0b88a;
    font-size: 1.1rem;
}

.offer-sticky-bar .ht-btn-appointment {
    flex-shrink: 0;
    padding: 0.65rem 1rem;
    font-size: 0.85rem;
}

/* ── Clinic block (forever-young-proof.js) ──
   Copy + drone footage above the trust pills in "Perché Toke Medical Center".
   Mirrors .fy-result__grid. Deliberately does NOT reuse the homepage's
   .about-image: that class is opacity:0 until script.js adds .visible at
   DOMContentLoaded, and anything injected afterwards would never be revealed. */
.fy-clinic {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3rem);
    max-width: 900px;
    margin: 0 auto 2rem;
    /* Top-aligned, not centred: the copy is much shorter than a portrait clip,
       so centring it strands the text between two equal voids. */
    align-items: start;
}

.fy-clinic__copy {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* The heading is moved into this column by forever-young-proof.js, so it has to
   drop the centred treatment it gets from .offer-section__title. */
.fy-clinic__copy .offer-section__title {
    text-align: left;
    margin-bottom: 0.25rem;
}

.fy-clinic__text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-muted, #5a6270);
}

.fy-clinic__text strong {
    color: var(--text-dark, #1a1a2e);
    font-weight: 700;
}

/* The trust band is moved inside the copy column, where its full-width white
   card and 2rem padding no longer make sense — strip the chrome and let the
   pills sit as a row under the text. */
.fy-clinic__copy .offer-trust-band {
    justify-content: flex-start;
    gap: 0.6rem;
    padding: 0;
    margin: 0.35rem 0 0;
    max-width: none;
    background: none;
    box-shadow: none;
    border-radius: 0;
}

/* Without the white card behind it, the muted pill's #f0f2f5 sat on the
   section's #f8f9fb and all but disappeared. */
.fy-clinic__copy .offer-trust-band .ht-trust-pill--muted {
    background: #fff;
    border-color: rgba(46, 134, 171, 0.28);
}

.fy-proof--clinic .fy-proof__frame {
    max-width: 260px;
    /* Overrides the 9/16 base. The source is portrait 723x1280; object-fit
       crops it, the same treatment the homepage gives this clip. */
    aspect-ratio: 4 / 5;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}

@media (min-width: 900px) {
    .fy-clinic {
        grid-template-columns: 1fr 260px;
    }

    .fy-proof--clinic .fy-proof__frame {
        width: 260px;
        max-width: 260px;
    }
}

/* Below the split the footage leads, matching the result section. */
@media (max-width: 899px) {
    .fy-clinic__copy {
        order: 2;
        text-align: center;
    }

    .fy-clinic > .fy-proof {
        order: 1;
    }

    .fy-clinic__copy .offer-trust-band {
        justify-content: center;
    }
}

/* ── Lead-gen mode: no phone / WhatsApp entry points ──
   This offer runs on Google Ads and every conversion must go through the lead
   form, so the competing contact CTAs are suppressed.

   Scoped on data-offer-slug, not on .offer-money-page, so the English offer and
   any future Italian offer rendered from the same shared template keep theirs.
   The rule is the durable layer: the build deletes and re-renders this page from
   the template, so deleting the markup alone would not hold.

   .ht-mobile-nav__actions is the container, hidden deliberately rather than its
   two children: it is a 1fr 1fr grid, so hiding the children would leave a
   half-width ghost and a stray margin. It also covers the phone and WhatsApp
   that mobile-nav.js injects into the drawer from hardcoded fallbacks, which no
   amount of markup deletion can prevent. */
body[data-offer-slug="face-makeover-estate"] .ht-nav-phone,
body[data-offer-slug="face-makeover-estate"] .ht-nav-whatsapp,
body[data-offer-slug="face-makeover-estate"] .offer-btn-wa,
body[data-offer-slug="face-makeover-estate"] .ht-mobile-nav__actions {
    display: none !important;
}

/* ── IT money page hero: clinic footage behind the offer ──
   Scoped to the Italian page so the English offer keeps its existing still.
   The gradient scrim moves off the element background and onto ::after, so it
   sits ABOVE the video rather than being painted over by it. The element keeps
   the poster as its background, which is what shows during load, on error, and
   whenever the video is skipped. */
body.offer-money-page[data-locale="it"] .offer-money-hero {
    background: url('/pics/forever-young/banner-poster.jpg') center / cover no-repeat;
    overflow: hidden;
    isolation: isolate;
}

body.offer-money-page[data-locale="it"] .offer-money-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

body.offer-money-page[data-locale="it"] .offer-money-hero__bg.is-ready {
    opacity: 1;
}

body.offer-money-page[data-locale="it"] .offer-money-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(22, 26, 34, 0.72) 0%,
        rgba(22, 26, 34, 0.55) 40%,
        rgba(22, 26, 34, 0.82) 100%
    );
    transition: background 0.6s ease;
}

/* The still this scrim was tuned for was a bright, near-white clinic shot; the
   footage is darker and busier, so the original opacity flattened it to mud.
   Lightened only while the video is actually playing. Text contrast is carried
   by .offer-money-hero__content's own panel, not by this layer. */
body.offer-money-page[data-locale="it"] .offer-money-hero.has-video::after {
    background: linear-gradient(
        180deg,
        rgba(22, 26, 34, 0.55) 0%,
        rgba(22, 26, 34, 0.32) 40%,
        rgba(22, 26, 34, 0.68) 100%
    );
}

body.offer-money-page[data-locale="it"] .offer-money-hero .container {
    position: relative;
    z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
    body.offer-money-page[data-locale="it"] .offer-money-hero__bg {
        display: none;
    }
}

/* ── Optional add-ons / upsell (forever-young-upsell.js) ──
   Markup lives in JS so a CMS republish cannot strip it (same reasoning as the
   proof clips above). Rendered twice: once as a page section, once compacted
   inside the lead modal. Both mounts share these rules. */
.offer-upsell__group {
    max-width: 800px;
    margin: 0 auto;
    padding: 1.25rem;
    background: #fff;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}

.offer-upsell__legend {
    padding: 0;
    font-weight: 600;
    font-size: 0.95rem;
    color: #1f2933;
}

.offer-upsell__item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 0.75rem;
    padding: 0.8rem 0.9rem;
    margin-top: 0.5rem;
    border: 1px solid #e6e9ee;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.offer-upsell__item:hover {
    border-color: #c96b42;
}

.offer-upsell__item.is-selected {
    border-color: #c96b42;
    background: rgba(201, 107, 66, 0.1);
}

/* The site styles no global focus ring on label-wrapped controls, so the
   keyboard affordance has to be declared here or it is simply absent. */
.offer-upsell__check {
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.15rem;
    accent-color: #c96b42;
    flex: none;
}

.offer-upsell__check:focus-visible {
    outline: 2px solid #c96b42;
    outline-offset: 2px;
}

.offer-upsell__label {
    display: block;
    font-size: 0.92rem;
    line-height: 1.35;
    color: #1f2933;
}

.offer-upsell__note {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.8rem;
    color: #64748b;
}

.offer-upsell__price {
    font-weight: 700;
    font-size: 0.92rem;
    color: #c96b42;
    white-space: nowrap;
}

/* Sub-group headings inside the add-on list (forever-young-upsell.js).
   A plain <p> sibling rather than a nested <fieldset> or role="group" wrapper:
   in the compact mount the grid lives on .offer-upsell__items, so a wrapper
   would become a single grid cell needing a nested grid of its own. Group
   context reaches assistive tech through aria-describedby on each checkbox. */
.offer-upsell__subhead {
    margin: 1.3rem 0 0.2rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1f2933;
}

.offer-upsell__subhead-badge {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.4rem;
    background: rgba(201, 107, 66, 0.12);
    color: #c96b42;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    vertical-align: 0.06em;
}

.offer-upsell__subhead-note {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    font-weight: 400;
    color: #64748b;
}

/* Pre-discount price, struck through beside the charged one. */
.offer-upsell__price-was {
    margin-right: 0.15rem;
    color: #94a3b8;
    font-weight: 500;
    font-size: 0.82rem;
}

/* Quantity rows carry a fourth child (the stepper) and are a <div>, not a
   <label> — see buildItem(). The row no longer promises a whole-row hit
   target, so it must not keep the pointer cursor. */
.offer-upsell__item--qty {
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    cursor: default;
}

.offer-upsell__item--qty .offer-upsell__label {
    cursor: pointer;
}

.offer-upsell__qty {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* No global button {} rule is loaded on offer pages, so font and sizing have to
   be declared here — same reason .offer-upsell__cta declares its own. */
.offer-upsell__qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    background: #fff;
    color: #c96b42;
    border: 1px solid #e6e9ee;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.offer-upsell__qty-btn:hover {
    border-color: #c96b42;
    background: rgba(201, 107, 66, 0.08);
}

.offer-upsell__qty-btn:focus-visible {
    outline: 2px solid #c96b42;
    outline-offset: 2px;
}

/* aria-disabled rather than [disabled]: disabling the button under the user's
   own focus would drop focus to <body> on the press that reaches the limit. */
.offer-upsell__qty-btn[aria-disabled="true"] {
    opacity: 0.35;
    cursor: default;
}

.offer-upsell__qty-btn[aria-disabled="true"]:hover {
    border-color: #e6e9ee;
    background: #fff;
}

.offer-upsell__qty-value {
    min-width: 3.2rem;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1f2933;
    /* Tabular figures so the row does not jog between "1 ml" and "5 ml". */
    font-variant-numeric: tabular-nums;
}

.offer-upsell__item:not(.is-selected) .offer-upsell__qty-value {
    color: #64748b;
}

.offer-upsell__total {
    margin-top: 1.1rem;
    padding-top: 0.9rem;
    border-top: 1px solid #eef0f3;
}

.offer-upsell__total-line {
    margin: 0;
    font-size: 0.85rem;
    color: #64748b;
}

.offer-upsell__total-main {
    margin: 0.2rem 0 0;
    font-size: 1rem;
    color: #1f2933;
}

.offer-upsell__total-main strong {
    font-size: 1.45rem;
    color: #c96b42;
}

.offer-upsell__disclaimer {
    margin: 0.45rem 0 0;
    font-size: 0.78rem;
    color: #64748b;
}

/* Page-section CTA (forever-young-upsell.js). Its own rule rather than being
   grouped with .offer-step__next: the two share a look but not their
   constraints — that one is full-bleed inside a 42rem modal and sticky-bottom
   under 768px, this one is a centred button on an open page.
   Not .ht-btn-light / .ht-btn-appointment: those are white buttons meant for
   dark backgrounds, and this section sits on white. */
.offer-upsell__cta {
    display: block;
    width: 100%;
    max-width: 360px;
    min-height: 52px;
    margin: 1.25rem auto 0;
    padding: 0.9rem 1.25rem;
    background: #c96b42;
    color: #fff;
    border: 0;
    border-radius: 8px;
    /* No global button {} rule exists in any loaded stylesheet, so without this
       the UA default font applies. */
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.offer-upsell__cta:hover {
    background: #b25c36;
}

.offer-upsell__cta:focus-visible {
    outline: 2px solid #1f2933;
    outline-offset: 2px;
}

/* In-modal variant: no card chrome, tighter rhythm — the modal already has a
   panel background and is long enough without a second nested card. */
.offer-upsell__group--form {
    max-width: none;
    /* The base rule centres the page mount with `margin: 0 auto`. As a flex
       item that auto margin suppresses stretching, so the fieldset shrink-wraps
       its content and floats mid-modal on wide screens. */
    margin: 0;
    padding: 0.9rem 0 0;
    background: none;
    border-top: 1px solid #eef0f3;
    border-radius: 0;
    box-shadow: none;
}

.offer-upsell__group--form .offer-upsell__item {
    padding: 0.6rem 0.7rem;
    margin-top: 0.4rem;
}

.offer-upsell__group--form .offer-upsell__total-main strong {
    font-size: 1.2rem;
}

/* No visually-hidden utility exists in this codebase; this is the single
   aria-live announcer appended to <body> by forever-young-upsell.js. */
.offer-upsell__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Reassurance line above the lead form — the form asks for a call, not a sale.
   Block, not flex: the copy contains a <strong> and bare text nodes, and in a
   flex container each of those becomes its own flex item, which breaks the
   sentence into columns on narrow screens. */
.hair-transplant-landing .ht-form-intro {
    display: block;
    margin: 0 0 1rem;
    font-size: 0.85rem;
    line-height: 1.45;
    color: #475569;
}

.hair-transplant-landing .ht-form-intro i {
    margin-right: 0.4rem;
    color: #c96b42;
}

/* ── Two-step lead modal (forever-young-upsell.js) ──
   The whole form is one flex column with a 32px gap (landing.css). With two
   panels instead of eight blocks that rhythm is far too loose, so --stepped
   retunes it. Everything here is scoped to a class only the script adds, so
   the form degrades to its original single-scroll layout if the script fails. */
.hair-transplant-landing .ht-lead-form--stepped {
    gap: var(--spacing-sm);
}

/* Load-bearing: [hidden] is UA-level display:none, which loses to the author
   display:flex on .offer-step below — without this the hidden panel shows. */
.hair-transplant-landing .ht-lead-form--stepped [hidden] {
    display: none !important;
}

.offer-step {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Programmatic focus target (tabindex="-1") — no visible ring on the panel. */
.offer-step:focus {
    outline: none;
}

.offer-step__bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.offer-step__count {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}

/* Lives in .offer-step__footer, never in .offer-step__bar. The old
   `margin-left: auto` existed only to push it to the right of the bar, and
   would right-align it in the footer's narrow-width column layout. */
.offer-step__recap {
    margin: 0;
    font-size: 0.9rem;
    color: #1f2933;
}

.offer-step__recap strong {
    color: #c96b42;
    font-weight: 700;
}

.offer-step__back {
    min-height: 44px;
    padding: 0 0.4rem 0 0;
    background: none;
    border: 0;
    font: inherit;
    font-size: 0.85rem;
    color: #c96b42;
    cursor: pointer;
}

.offer-step__back:focus-visible {
    outline: 2px solid #c96b42;
    outline-offset: 2px;
}

/* Disclosure for the optional message field. */
.offer-step__disclosure {
    align-self: flex-start;
    padding: 0.25rem 0;
    background: none;
    border: 0;
    font: inherit;
    font-size: 0.85rem;
    color: #c96b42;
    cursor: pointer;
}

.offer-step__disclosure:hover {
    text-decoration: underline;
}

.offer-step__disclosure:focus-visible {
    outline: 2px solid #c96b42;
    outline-offset: 2px;
}

.offer-step__next {
    width: 100%;
    padding: 0.9rem 1.25rem;
    background: #c96b42;
    color: #fff;
    border: 0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.offer-step__next:hover {
    background: #b25c36;
}

.offer-step__next:focus-visible {
    outline: 2px solid #1f2933;
    outline-offset: 2px;
}

/* ── Sticky action footer ──
   Pins the running total and the step's primary button to the bottom of the
   scrollport at every width. Which element scrolls differs — above 768px it is
   .lead-modal-panel (max-height: 90vh; overflow-y: auto), at or below it is
   #leadForm itself (mobile-ux.css) — and sticky does not care: it resolves
   against whichever ancestor scrolls.

   Opaque background rather than a gradient: add-on chips scroll underneath it,
   and the white-glow shadow is what softens the cut. */
.offer-step__footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.75rem;
    padding-bottom: max(0.9rem, env(safe-area-inset-bottom));
    background: #fff;
    box-shadow:
        0 -8px 24px rgba(255, 255, 255, 0.95),
        0 -2px 12px rgba(0, 0, 0, 0.08);
}

/* Both primary buttons live here — .offer-step__next on step 1, the real
   .ht-btn-send on step 2 — and showStep() only swaps which one is [hidden].
   Styled as one pair so the footer keeps its height across the step change. */
.offer-step__footer .offer-step__next,
.hair-transplant-landing .ht-lead-form--stepped .offer-step__footer .ht-btn-send {
    width: 100%;
    margin: 0;
}

/* Total beside the button once there is room. Reuses the breakpoint the stepped
   .ht-form-grid already switches on rather than adding a third one.
   Content-sized within a band, not a fixed width: "Continua" needs ~120px and
   "Prenota la chiamata gratuita" ~290px, so a hard min-width would wrap step 2. */
@media (min-width: 520px) {
    .offer-step__footer {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
    }

    .offer-step__footer .offer-step__next,
    .hair-transplant-landing .ht-lead-form--stepped .offer-step__footer .ht-btn-send {
        flex: 0 1 auto;
        width: auto;
        min-width: 13rem;
        max-width: 22rem;
        margin-left: auto;
    }
}

/* The footer overlays the bottom of the scrollport, so anything the browser
   scrolls to that edge lands underneath it: a focused field (mobile-ux.js uses
   scrollIntoView({block:"nearest"})) or the required .ht-consent checkbox when
   native validation anchors its bubble there. Both honour scroll-margin. 6rem
   clears the tallest footer (column layout plus the safe-area inset). */
.hair-transplant-landing .ht-lead-form--stepped .ht-form-grid .form-group,
.hair-transplant-landing .ht-lead-form--stepped .ht-form-message,
.hair-transplant-landing .ht-lead-form--stepped .ht-consent {
    scroll-margin-bottom: 6rem;
}

/* ── Chip grid — the in-modal add-on mount only; the page section keeps the
   full-width list. Two columns with a 44px tap target, following the pattern
   already proven on .filter-tab (procedures.css / mobile-ux.css). Those rules
   are copied rather than reused: procedures.css is not loaded on offer pages. */
.offer-upsell__group--chips {
    padding-top: 0.75rem;
}

.offer-upsell__group--chips .offer-upsell__items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* Three columns once a chip can be ~190px wide. At 640px the modal is still a
   full-width bottom sheet, above 768px it is the 42rem panel — both leave room
   enough that no `short` label wraps and every chip stays one row tall. Worth
   ~140px of step-1 height. .offer-upsell__item--qty and .offer-upsell__subhead
   already span `1 / -1`, so they follow the column count with no extra rule. */
@media (min-width: 640px) {
    .offer-upsell__group--chips .offer-upsell__items {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* The footer recap carries the running total persistently now, so repeating it
   in 1.2rem orange right above it is a double reading of the same number. The
   breakdown line above still gives the package/extras split, render() keeps
   writing here, and the announcer still speaks the total. Modal only — the page
   mount has no footer and keeps its big total. */
.offer-upsell__group--chips .offer-upsell__total-main {
    display: none;
}

.offer-upsell__group--chips .offer-upsell__item {
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "check label"
        "check price";
    align-items: start;
    gap: 0.15rem 0.5rem;
    margin: 0;
    min-height: 44px;
    padding: 0.55rem 0.6rem;
    white-space: normal;
}

.offer-upsell__group--chips .offer-upsell__check {
    grid-area: check;
}

.offer-upsell__group--chips .offer-upsell__label {
    grid-area: label;
    font-size: 0.82rem;
    line-height: 1.25;
}

/* Chips have no room for the explanatory note, but aria-describedby still
   points at it — so hide it visually rather than with display:none, which
   would drop the description from the accessibility tree. The conflicting
   sibling auto-deselects anyway, so sighted users lose nothing. */
.offer-upsell__group--chips .offer-upsell__note {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.offer-upsell__group--chips .offer-upsell__price {
    grid-area: price;
    font-size: 0.85rem;
}

/* Headings span both chip columns — the trick the bundle row used to use. */
.offer-upsell__group--chips .offer-upsell__subhead {
    grid-column: 1 / -1;
    margin: 0.6rem 0 0;
}

/* Same treatment as .offer-upsell__group--chips .offer-upsell__note above:
   hidden visually, still reachable through aria-describedby. */
.offer-upsell__group--chips .offer-upsell__subhead-note {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* A chip is ~150px at 375px, which cannot hold a checkbox, a price and a
   three-part stepper. The quantity row takes the full width instead and keeps
   the stepper to the right of the two stacked text lines. */
.offer-upsell__group--chips .offer-upsell__item--qty {
    grid-column: 1 / -1;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "check label qty"
        "check price qty";
    align-items: center;
}

/* Scoped to --chips on purpose: the page mount has no named areas, and an
   unscoped grid-area would resolve against lines that do not exist there. */
.offer-upsell__group--chips .offer-upsell__qty {
    grid-area: qty;
}

.offer-upsell__group--chips .offer-upsell__qty-btn {
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
}

.offer-upsell__group--chips .offer-upsell__qty-value {
    min-width: 2.6rem;
    font-size: 0.82rem;
}

.offer-upsell__group--chips .offer-upsell__price-was {
    font-size: 0.75rem;
}

.offer-upsell__group--chips .offer-upsell__total {
    margin-top: 0.75rem;
    padding-top: 0.6rem;
}

/* The "not a purchase, no payment now" line sits in .ht-form-intro directly
   above and stays visible on both steps, so repeating it under the total is
   redundant — and it costs two lines on the tightest screen. */
.offer-upsell__group--chips .offer-upsell__disclaimer {
    display: none;
}

/* Email spans the full row now the treatment select is gone; without this the
   existing :nth-child placement would leave cell (2,2) empty. */
@media (min-width: 520px) {
    .hair-transplant-landing .ht-lead-form--stepped .ht-form-grid > .form-group:nth-child(3) {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

/* 8.5rem is a third of a mobile viewport for an optional field. */
.hair-transplant-landing .ht-lead-form--stepped .ht-form-message textarea {
    min-height: 4.5rem;
}

@media (max-width: 768px) {
    /* #leadForm is the scrollport here and mobile-ux.css pads its bottom for the
       safe area. .offer-step__footer owns that inset now; leaving both pays it
       twice AND un-sticks the footer ~20px early at max scroll, because that
       padding is part of the scrollable overflow. */
    .hair-transplant-landing .ht-lead-form.ht-lead-form--stepped {
        padding-bottom: 0;
    }

    /* mobile-ux.css makes .ht-btn-send sticky in its own right. Inside an
       already-sticky footer resolving against the same scrollport that is a
       sticky box in a sticky box: it would offset twice and drift out of the
       footer. The footer is the only sticky thing now.

       The `padding` shorthand is load-bearing, not tidying: mobile-ux.css also
       inflates padding-top/bottom on this button, which would make step 2's
       button taller than step 1's and jump the footer height between steps. */
    .hair-transplant-landing .ht-lead-form--stepped .offer-step__footer .ht-btn-send {
        position: static;
        margin-top: 0;
        padding: 0.9rem 1.25rem;
        box-shadow: none;
    }
}

/* ── Offer page footer ──
   The base .footer reserves 6rem of top padding for a .footer-content grid that
   money pages deliberately don't have, which left a tall empty band. Trimmed
   here and filled with the contact row, social link and legal links instead. */
.offer-footer {
    padding-top: var(--spacing-xl);
}

.offer-footer__main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: var(--spacing-lg);
}

.offer-footer .offer-footer-contact {
    margin: 0;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.75);
}

.offer-footer .offer-footer-contact a {
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
}

.offer-footer .offer-footer-contact a:hover {
    text-decoration: underline;
}

.offer-footer .offer-footer-contact i {
    color: rgba(255, 255, 255, 0.45);
    margin-right: 0.3rem;
}

.offer-footer-contact__sep {
    margin: 0 0.5rem;
    color: rgba(255, 255, 255, 0.3);
}

/* The circular social styling in landing.css is scoped to .landing-footer,
   which money pages do not use — hence its own rule here rather than a reuse
   that would silently render as a bare icon. */
.offer-footer__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.offer-footer__social:hover {
    background: #c96b42;
    border-color: transparent;
    color: #fff;
    transform: translateY(-2px);
}

.offer-footer__social:focus-visible {
    outline: 2px solid #c96b42;
    outline-offset: 3px;
}

.offer-footer__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

/* Gaps rather than inserted separators: the row wraps on narrow screens and a
   ::after middot would strand a dangling dot at the end of a wrapped line. */
.offer-footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
}

.offer-footer__legal a {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.2s ease;
}

.offer-footer__legal a:hover {
    color: #fff;
    text-decoration: underline;
}

.offer-footer__legal a:focus-visible {
    outline: 2px solid #c96b42;
    outline-offset: 3px;
}

.offer-footer__bottom p {
    margin: 0;
    font-size: 0.85rem;
}

.offer-footer__bottom p a {
    color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 640px) {
    .offer-footer__main {
        flex-direction: column;
        gap: 1.25rem;
        text-align: center;
    }
}