/* shared section background + floating decoration */

.bg-pink {
    background-color: var(--color-bg-pink);
}

.bg-cream {
    background-color: var(--color-cream);
}

.section > .container {
    position: relative;
    z-index: 1;
}

.decor-ribbon {
    position: absolute;
    z-index: 0;
    width: 160px;
    height: 160px;
    pointer-events: none;
    opacity: 0.55;
}

.decor-ribbon--br {
    bottom: -10px;
    right: -10px;
    border-bottom: 4px solid rgba(255, 255, 255, 0.55);
    border-right: 4px solid rgba(255, 255, 255, 0.55);
    border-radius: 0 0 60px 0;
    transform: rotate(-6deg);
}

.decor-heart {
    position: absolute;
    top: 6%;
    right: 5%;
    z-index: 0;
    font-size: 34px;
    color: #e0356b;
    opacity: 0.9;
    transform: rotate(-8deg);
    pointer-events: none;
}

.decor-sparkle {
    position: absolute;
    z-index: 0;
    font-size: 26px;
    color: var(--color-white);
    opacity: 0.85;
    pointer-events: none;
}

.decor-sparkle--hero {
    top: 26%;
    right: 12%;
}

.decor-sparkle--sm {
    font-size: 18px;
    top: 14%;
    left: 4%;
}

.decor-dots {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.35;
    background-image: radial-gradient(rgba(255, 255, 255, 0.5) 2px, transparent 2px);
    background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(circle at 85% 20%, #000 0%, transparent 55%);
    mask-image: radial-gradient(circle at 85% 20%, #000 0%, transparent 55%);
}

@media (max-width: 767px) {
    .decor-ribbon,
    .decor-heart,
    .decor-sparkle,
    .decor-dots {
        display: none;
    }
}

/* hero */

.hero {
    --hero-title: var(--color-section-title);
    --hero-ink: var(--color-section-subtitle);
    --hero-panel: #fbc8e0;
    min-height: 100vh;
    min-height: 100svh;
    padding: 44px 0 40px;
}

.bg-hero {
    background-image: url('../images/bg-section-1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* decor: element images placed around the content block, as in the design.
   --x/--y are the centre offset from the middle of .container at 1200px wide,
   --u shrinks everything proportionally below that width */
.hero__decor {
    --u: min(1px, calc(100vw / 1200));
    /* wide screens have spare background either side of the container: push the pieces out into it */
    --out: clamp(0px, calc((100vw - 1200px) / 3), 120px);
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero__decor-item {
    position: absolute;
    /* the section has 40px bottom padding, so its content centre sits 20px above 50% */
    top: calc(50% - 20px + var(--y) * var(--u) + var(--oy, 0) * var(--out) * 0.4);
    left: calc(50% + var(--x) * var(--u) + var(--ox, 0) * var(--out));
    width: calc(var(--s) * var(--u));
    max-width: none;
    height: auto;
    transform: translate(-50%, -50%) rotate(var(--r, 0deg));
}

/* bubble and heart are exported for the "screen" blend mode: their dark areas turn see-through */
.hero__decor--bubble-lg,
.hero__decor--bubble-sm,
.hero__decor--heart-tr,
.hero__decor--heart-bl {
    mix-blend-mode: screen;
}

/* --ox/--oy: which way each piece moves into the spare space (corners move most) */
.hero__decor--bubble-lg { --x: -543; --y: -262; --s: 132; --ox: -1; --oy: -1; }
.hero__decor--bubble-sm { --x: 17; --y: 20; --s: 56; --ox: -0.15; }
.hero__decor--heart-tr { --x: 542; --y: -313; --s: 86; --r: 8deg; --ox: 1; --oy: -1; }
.hero__decor--heart-bl { --x: -571; --y: 203; --s: 96; --r: -14deg; --ox: -1; --oy: 1; }
.hero__decor--cluster { --x: -45; --y: -308; --s: 56; --ox: -0.3; --oy: -0.6; }
.hero__decor--sparkle-a { --x: 218; --y: 0; --s: 34; }
.hero__decor--sparkle-b { --x: -53; --y: 68; --s: 22; --ox: -0.3; --oy: 0.4; }
.hero__decor--sparkle-c { --x: 492; --y: 86; --s: 42; --ox: 0.8; --oy: 0.4; }

/* small laptops: the copy wraps into a taller block than the 1200px layout, so re-anchor to it */
@media (min-width: 992px) and (max-width: 1199px) {
    .hero__decor--bubble-lg { --x: -517; --y: -326; }
    .hero__decor--bubble-sm { --x: -29; --y: -86; }
    .hero__decor--heart-tr { --x: 529; --y: -387; }
    .hero__decor--heart-bl { --x: -544; --y: 59; }
    .hero__decor--cluster { --x: -15; --y: -394; }
    .hero__decor--sparkle-a { --x: 206; --y: -109; }
    .hero__decor--sparkle-b { --x: -94; --y: -29; }
    .hero__decor--sparkle-c { --x: 528; --y: -8; }
}

/* product image */

.hero__media {
    display: flex;
    justify-content: center;
}

.hero__image {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: min(58vh, 44vw);
    filter: drop-shadow(0 24px 30px rgba(168, 24, 80, 0.24));
    transform: rotate(5deg);
}

/* copy block */

.hero__content {
    text-align: center;
}

.hero__title {
    font-family: var(--font-section-title);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    color: var(--hero-title);
    text-shadow: 0 3px 16px rgba(255, 255, 255, 0.7);
}

.hero__title-top,
.hero__title-bottom {
    display: block;
}

.hero__title-top {
    font-size: clamp(54px, 7.4vw, 104px);
    text-transform: uppercase;
}

.hero__title-top em {
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.hero__title-bottom {
    margin-top: 6px;
    font-size: clamp(30px, 4.2vw, 58px);
    font-weight: 400;
    font-style: italic;
}

.hero__slogan {
    margin-top: 18px;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: clamp(17px, 1.7vw, 22px);
    color: var(--hero-ink);
}

.hero__slogan span {
    font-weight: 500;
    padding: 0 2px;
}

.hero__desc {
    max-width: 560px;
    margin: 14px auto 0;
    text-wrap: balance;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: clamp(15px, 1.4vw, 19px);
    line-height: 1.6;
    color: var(--hero-ink);
}

.hero__ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    margin-top: 26px;
}

.hero__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    border-radius: var(--radius-pill);
    background-color: #ffeee3;
    color: var(--hero-ink);
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 8px 18px rgba(168, 24, 80, 0.14);
    transition: transform 0.25s ease;
}

.hero__pill:hover,
.hero__pill:focus-visible {
    transform: scale(1.04);
}

@media (min-width: 992px) {
    .hero__ctas {
        gap: 22px;
        margin-top: 32px;
    }

    .hero__pill {
        padding: 18px 44px;
        font-size: 18px;
    }
}

/* benefits bar */

.hero__features {
    --feature-bg: #ffeee3;
    --feature-icon: #fb3063;
    display: grid;
    /* the first label ("+30 doanh nghiệp") is about twice as long as the others */
    grid-template-columns: 1.2fr repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 34px 0 0;
    padding: 0;
    list-style: none;
}

.hero__feature {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 12px;
    min-width: 0;
    min-height: 96px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 40px;
    background-color: var(--feature-bg);
    box-shadow: 0 12px 26px rgba(200, 30, 80, 0.16);
    color: var(--color-primary);
    transition: transform 0.25s ease;
}

.hero__feature:hover {
    transform: scale(1.04);
}

.hero__feature-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    color: var(--feature-icon);
}

.hero__feature-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* paint the card colour over the solid icon to cut out details */
.hero__feature-cut {
    fill: var(--feature-bg);
}

.hero__feature-cut-line {
    fill: none;
    stroke: var(--feature-bg);
}

/* divider matches the icon height rather than the two text lines;
   nowrap keeps each label to exactly the two lines split by <br> */
.hero__feature-text {
    position: relative;
    min-width: 0;
    padding-left: 16px;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1.3;
    text-transform: uppercase;
}

.hero__feature-text::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 1.5px;
    height: 46px;
    transform: translateY(-50%);
    background-color: rgba(240, 33, 86, 0.3);
}

/* main call to action */

.hero__cta-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 26px;
}

.hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 9px 9px 9px 34px;
    border-radius: var(--radius-pill);
    background-color: var(--color-primary);
    color: var(--color-white);
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 17px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 16px 32px rgba(168, 24, 80, 0.3);
    transition: transform 0.25s ease;
}

.hero__cta:hover,
.hero__cta:focus-visible {
    transform: scale(1.04);
}

.hero__cta-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--color-white);
    color: var(--color-primary);
    font-size: 20px;
    flex-shrink: 0;
}

/* four pills get too narrow for the two-line labels below desktop width */
@media (max-width: 1199px) {
    .hero__features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        padding: 18px;
        border-radius: 40px;
    }

    /* narrow tablets can't fit "+30 doanh nghiệp" on one line, so let it wrap there */
    .hero__feature-text {
        font-size: 16px;
        white-space: normal;
    }
}

@media (max-width: 991px) {
    .hero {
        padding: 36px 0 40px;
    }

    .hero__image {
        max-height: 380px;
    }

    .hero__cta-row {
        justify-content: center;
    }
}

@media (max-width: 575px) {
    .hero__title-top {
        font-size: 48px;
    }

    .hero__title-bottom {
        font-size: 27px;
    }

    .hero__ctas {
        gap: 12px;
    }

    .hero__pill {
        padding: 12px 22px;
        font-size: 13px;
    }

    .hero {
        padding: 24px 0 36px;
    }

    .hero__image {
        max-height: 300px;
    }

    .hero__slogan {
        text-wrap: balance;
    }

    .hero__features {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        max-width: 380px;
        margin: 28px auto 0;
        padding: 14px;
        border-radius: 32px;
    }

    /* stacked pills read better with icons lined up on the left */
    .hero__feature {
        justify-content: flex-start;
        min-height: 76px;
        padding: 14px 24px;
    }

    .hero__feature-icon {
        width: 46px;
        height: 46px;
    }

    .hero__feature-text::before {
        height: 44px;
    }

    .hero__feature-text {
        font-size: 15px;
    }

    .hero__cta {
        width: 100%;
        justify-content: space-between;
        font-size: 15px;
        padding-left: 24px;
    }
}

/* stacked layout: the offsets above no longer line up, so keep a few pieces in the corners */
@media (max-width: 991px) {
    .hero__decor--bubble-sm,
    .hero__decor--cluster,
    .hero__decor--sparkle-a,
    .hero__decor--sparkle-b {
        display: none;
    }

    .hero__decor-item {
        width: calc(var(--s) * 1px);
        transform: translate(-50%, -50%) rotate(var(--r, 0deg));
    }

    .hero__decor--bubble-lg { top: 7%; left: 8%; --s: 72; }
    .hero__decor--heart-tr { top: 5%; left: 90%; --s: 58; }
    .hero__decor--sparkle-c { top: 30%; left: 92%; --s: 28; }
    .hero__decor--heart-bl { top: 58%; left: 6%; --s: 56; }
}

/* trust */

.trust {
    --trust-title: var(--color-section-title);
    --trust-sub: var(--color-section-subtitle);
    --trust-label: var(--color-primary);
    --trust-desc: #5e4a53;
    --trust-icon: var(--color-primary);
    --trust-divider: rgba(255, 255, 255, 0.75);
}

.bg-trust {
    background-image: url('../images/bg-section-2.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.trust__sparkle {
    position: absolute;
    top: 9%;
    left: 44%;
    z-index: 0;
    width: 26px;
    height: 26px;
    pointer-events: none;
    background-color: rgba(255, 255, 255, 0.9);
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
    clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
}

/* decor: same element images as the hero. The section height follows its content,
   so pieces are anchored to the top of the content: --x is the centre offset from the middle,
   --y the offset below the section's top padding, both at 1200px wide; --u shrinks them below that width */
.trust__decor {
    --u: min(1px, calc(100vw / 1200));
    --out: clamp(0px, calc((100vw - 1200px) / 3), 120px);
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* the clamp keeps edge pieces fully on screen between 1200px and the design width */
.trust__decor-item {
    position: absolute;
    top: calc(var(--section-py) + var(--y) * var(--u));
    left: clamp(
        calc(var(--s) * var(--u) / 2),
        calc(50% + var(--x) * var(--u) + var(--ox, 0) * var(--out)),
        calc(100% - var(--s) * var(--u) / 2)
    );
    width: calc(var(--s) * var(--u));
    max-width: none;
    height: auto;
    transform: translate(-50%, -50%) rotate(var(--r, 0deg));
}

.trust__decor--bubble-lg,
.trust__decor--bubble-bl,
.trust__decor--heart-tr {
    mix-blend-mode: screen;
}

.trust__decor--sparkle-tl { --x: -640; --y: -30; --s: 42; --ox: -1; }
.trust__decor--bubble-lg { --x: -600; --y: 132; --s: 82; --ox: -1; }
.trust__decor--cluster { --x: -40; --y: -40; --s: 48; --ox: -0.2; }
.trust__decor--heart-tr { --x: 572; --y: -6; --s: 92; --r: 10deg; --ox: 1; }
.trust__decor--bubble-bl { --x: -625; --y: 596; --s: 120; --ox: -1; }
.trust__decor--sparkle-r { --x: 615; --y: 476; --s: 44; --ox: 1; }

/* stacked layout: the offsets no longer line up, so keep a few pieces in the corners */
@media (max-width: 991px) {
    .trust__decor--bubble-lg,
    .trust__decor--cluster {
        display: none;
    }

    .trust__decor-item {
        left: var(--left);
        width: calc(var(--s) * 1px);
    }

    .trust__decor--sparkle-tl { top: 2%; --left: 7%; --s: 26; }
    .trust__decor--heart-tr { top: 3%; --left: 91%; --s: 54; }
    .trust__decor--sparkle-r { top: 46%; --left: 94%; --s: 26; }
    .trust__decor--bubble-bl { top: 64%; --left: 5%; --s: 64; }
}

@media (max-width: 575px) {
    .trust__decor--heart-tr { top: 3.2%; --left: 93%; --s: 44; }
}

.trust__heading {
    font-family: var(--font-section-title);
    font-weight: 700;
    line-height: 1.12;
    text-align: center;
    text-transform: uppercase;
    color: var(--trust-title);
    text-shadow: 0 3px 14px rgba(255, 255, 255, 0.75);
}

.trust__heading-lg,
.trust__heading-sm {
    display: block;
}

.trust__heading-lg {
    font-size: clamp(32px, 4.6vw, 62px);
}

.trust__heading-script {
    font-size: 120px;
    line-height: 0;
    letter-spacing: 0.02em;
    text-transform: none;
    vertical-align: -0.08em;
}

.trust__heading-sm {
    margin-top: 12px;
    font-size: var(--fs-section-title);
}

.trust__subtext {
    margin: 22px auto 0;
    text-align: center;
    font-family: var(--font-section-subtitle);
    font-size: var(--fs-section-subtitle);
    line-height: 1.65;
    color: var(--trust-sub);
}

/* stat band */

.trust__stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin: 0;
    padding: 18px 8px 22px;
    list-style: none;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 240, 246, 0.55) 0%, rgba(251, 214, 230, 0.4) 100%);
}

.trust__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: 0 14px;
    text-align: center;
}

.trust__stat + .trust__stat {
    border-left: 1.5px solid var(--trust-divider);
}

/* line icon sitting on a soft five-petal blossom */
.trust__stat-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 96px;
    height: 88px;
    margin-bottom: 2px;
    color: var(--trust-icon);
}

.trust__stat-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23fde4ef'%3E%3Ccircle cx='50' cy='50' r='28'/%3E%3Ccircle cx='50.0' cy='23.0' r='21'/%3E%3Ccircle cx='75.7' cy='41.7' r='21'/%3E%3Ccircle cx='65.9' cy='71.8' r='21'/%3E%3Ccircle cx='34.1' cy='71.8' r='21'/%3E%3Ccircle cx='24.3' cy='41.7' r='21'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0.85;
    filter: blur(0.6px) drop-shadow(0 4px 10px rgba(236, 72, 140, 0.12));
}

.trust__stat-icon svg {
    position: relative;
    width: 52px;
    height: 52px;
}

.trust__stat-title {
    margin-top: 2px;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: clamp(16px, 1.6vw, 24px);
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--trust-label);
    overflow-wrap: break-word;
}

.trust__stat-title--lg {
    font-size: clamp(26px, 2.6vw, 34px);
    line-height: 1.05;
}

.trust__stat-desc {
    margin-top: 6px;
    font-size: clamp(13px, 1.1vw, 18px);
    line-height: 1.45;
    color: var(--trust-desc);
}

/* partners */

.trust__partners-label {
    display: block;
    width: fit-content;
    margin: 46px auto 34px;
    padding: 14px 36px;
    border-radius: var(--radius-pill);
    background-color: var(--color-primary);
    color: var(--color-white);
    font-weight: 700;
    font-size: clamp(15px, 1.5vw, 19px);
    text-align: center;
    box-shadow: 0 12px 26px rgba(168, 24, 80, 0.22);
}

.trust__logos {
    margin: 0;
    padding: 4px 0;
    /* soft fade at both edges so logos glide in and out */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.trust__logos .swiper-wrapper {
    align-items: center;
    /* constant speed instead of Swiper's default ease-out between slides */
    transition-timing-function: linear;
}

.trust__logo-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.trust-img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    pointer-events: none;
}

.trust__logo {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: clamp(22px, 2.5vw, 34px);
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--logo-color, var(--color-text-body));
}

@media (max-width: 991px) {
    /* dividers only make sense while the band is a single row */
    .trust__stats {
        grid-template-columns: repeat(6, 1fr);
        gap: 26px 0;
        padding: 28px 12px;
    }

    .trust__stat {
        grid-column: span 2;
    }

    .trust__stat:nth-child(4) {
        grid-column: 2 / span 2;
    }

    .trust__stat:nth-child(5) {
        grid-column: 4 / span 2;
    }

    .trust__stat + .trust__stat {
        border-left: none;
    }

    .trust-img {
        height: 100px;
    }

    .trust__heading-script {
        font-size: 96px;
    }

    .trust__subtext {
        max-width: 620px;
    }

    .trust__partners-label {
        margin: 36px auto 26px;
    }
}

@media (max-width: 575px) {
    .trust__sparkle {
        display: none;
    }

    .trust__heading {
        text-wrap: balance;
    }

    .trust__heading-lg {
        font-size: 26px;
    }

    .trust__heading-script {
        font-size: 64px;
    }

    .trust__heading-sm {
        margin-top: 10px;
        font-size: 20px;
    }

    .trust__subtext {
        margin-top: 16px;
    }

    .trust__stats {
        grid-template-columns: repeat(2, 1fr);
        padding: 24px 10px;
    }

    .trust__stat,
    .trust__stat:nth-child(4),
    .trust__stat:nth-child(5) {
        grid-column: auto;
    }

    .trust__stat:last-child {
        grid-column: 1 / -1;
    }

    .trust__stat-icon {
        width: 78px;
        height: 72px;
    }

    .trust__stat-icon svg {
        width: 42px;
        height: 42px;
    }

    .trust__partners-label {
        padding: 12px 24px;
    }

    .trust-img {
        height: 80px;
    }
}

/* offers */

.offers {
    --offers-title: var(--color-section-title);
    --offers-ink: #fff;
    --offers-sub: var(--color-section-subtitle);
    --offers-card: #ffeee3;
    --offers-chip: var(--color-primary);
    --offers-cta: var(--color-primary);
}

.bg-offer {
    background-image: url('../images/bg-section-3.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.offers__header {
    margin-bottom: 40px;
}

.offers__heading {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 6px;
    font-family: var(--font-section-title);
    font-weight: 700;
    line-height: 1.12;
    text-transform: uppercase;
    color: var(--offers-title);
    text-shadow: 0 3px 14px rgba(255, 255, 255, 0.75);
}

.offers__heading-script {
    font-weight: 400;
    font-size: clamp(76px, 9vw, 128px);
    text-transform: none;
}

.offers__heading-text {
    font-size: clamp(26px, 4.4vw, 58px);
    text-align: left;
}

.offers__subtext {
    max-width: 1020px;
    margin: 14px auto 0;
    text-align: center;
    font-family: var(--font-section-subtitle);
    font-size: var(--fs-section-subtitle);
    line-height: 1.65;
    color: var(--offers-sub);
}

.offer-card {
    display: grid;
    grid-template-columns: 40% 1fr;
    align-items: center;
    gap: 4px;
    height: 100%;
    padding: 22px 26px 22px 14px;
    border: 2px solid rgba(255, 255, 255, 0.55);
    border-radius: 36px;
    background-color: var(--offers-card);
    box-shadow: 0 12px 30px rgba(168, 24, 80, 0.1);
}

/* image slot: 600 x 800 transparent PNG */
.offer-card__media {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* both product shots share the same canvas and basket position, so one scale keeps them level */
.offer-card__image {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: contain;
    transform: scale(1.4);
    transform-origin: 55% 60%;
    filter: drop-shadow(0 16px 20px rgba(168, 24, 80, 0.2));
    margin-left: 80px;
}

.offer-card__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    text-align: center;
}

.offer-card__label {
    margin: 0;
    padding: 12px 34px;
    border-radius: var(--radius-pill);
    background-color: var(--offers-chip);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(15px, 1.5vw, 20px);
    line-height: 1.3;
    white-space: nowrap;
    text-transform: uppercase;
    color: var(--offers-ink);
}

.offer-card__fit {
    margin-top: 20px;
    font-size: clamp(14px, 1.35vw, 18px);
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: var(--offers-sub);
}

.offer-card__fit-item {
    white-space: nowrap;
}

.offer-card__price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 280px;
    margin-top: 18px;
    padding: 14px 20px 14px 30px;
    border-radius: 44px;
    background-color: var(--offers-chip);
}

.offer-card__price-label {
    font-weight: 700;
    font-size: clamp(14px, 1.3vw, 18px);
    letter-spacing: 0.02em;
    color: var(--offers-ink);
}

.offer-card__price-value {
    display: flex;
    align-items: center;
    gap: 12px;
}

.offer-card__price-now {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: clamp(40px, 4.6vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--offers-ink);
}

.offer-card__price-old {
    font-weight: 300;
    font-size: clamp(16px, 1.8vw, 24px);
    color: var(--offers-ink);
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

.offer-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding: 5px 6px 5px 16px;
    border-radius: var(--radius-pill);
    background-color: var(--offers-cta);
    color: var(--color-white);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    box-shadow: 0 8px 18px rgba(168, 24, 80, 0.2);
    transition: transform 0.25s ease;
}

.offer-card__cta:hover,
.offer-card__cta:focus-visible {
    transform: scale(1.05);
}

.offer-card__cta-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--color-white);
    color: var(--offers-cta);
    font-size: 15px;
}

/* tablet: one card per row, so keep it from stretching and keep the product shot inside the card */
@media (min-width: 576px) and (max-width: 991px) {
    .offer-card {
        max-width: 640px;
        margin: 0 auto;
        padding: 26px 30px 26px 18px;
    }

    .offer-card__image {
        transform: scale(1.12);
    }
}

@media (max-width: 575px) {
    .offers__header {
        margin-bottom: 28px;
    }

    .offers__heading-text {
        text-align: center;
    }

    .offer-card {
        grid-template-columns: 1fr;
        padding: 20px 18px 24px;
    }

    .offer-card__media {
        max-width: 200px;
        margin: 10px auto 24px;
    }

    .offer-card__label {
        white-space: normal;
    }

    .offer-card__price {
        align-items: center;
        padding: 12px 20px;
    }

    .offer-card__price-value {
        justify-content: center;
    }
}

/* product detail */

.product-detail__card {
    position: relative;
    max-width: 520px;
    margin: 0 auto;
    padding-top: 64px;
    border: 2px dashed rgba(232, 88, 144, 0.16);
    border-radius: 32px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 60%);
}

.bg-product {
    background-image: url('../images/bg-section-4.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* soft pink glow behind the set */
.product-detail__card::before {
    content: "";
    position: absolute;
    top: 12%;
    left: 50%;
    width: 80%;
    aspect-ratio: 1;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 150, 200, 0.32) 0%, rgba(255, 150, 200, 0) 70%);
    pointer-events: none;
}

.product-detail__price {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 12px 34px;
    border-radius: var(--radius-pill);
    background-color: var(--color-primary);
    box-shadow: 0 12px 24px rgba(168, 24, 80, 0.28);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 0.02em;
    color: var(--color-white);
    white-space: nowrap;
}

.product-detail__price strong {
    font-weight: 800;
    font-size: 32px;
    line-height: 1;
}

.product-detail__image {
    position: relative;
    width: 82%;
    max-width: 380px;
    height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 24px 36px rgba(244, 64, 156, 0.28));
}

.product-detail__includes {
    position: relative;
    display: grid;
    gap: 12px;
    margin-top: 32px;
    padding: 30px 24px;
    border-radius: 28px;
    background-color: var(--color-primary);
    text-align: center;
}

.product-detail__includes li {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(17px, 1.7vw, 23px);
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: #fff;
}

.product-detail__content {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.product-detail__eyebrow {
    display: block;
    font-family: var(--font-section-subtitle);
    font-weight: 600;
    font-size: var(--fs-section-subtitle);
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: var(--color-section-subtitle);
}

.product-detail__title {
    margin-top: 8px;
    font-family: var(--font-section-title);
    font-weight: 700;
    font-size: var(--fs-section-title);
    line-height: 1.12;
    text-transform: uppercase;
    color: var(--color-section-title);
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.85);
    font-variant-numeric: lining-nums;
    text-wrap: balance;
}

.flavor-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 16px;
    margin-top: 36px;
}

.flavor-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* pink halo behind each cup */
.flavor-item::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    width: 64%;
    max-width: 120px;
    aspect-ratio: 3 / 5;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255, 105, 170, 0.45) 0%, rgba(255, 105, 170, 0.18) 45%, rgba(255, 105, 170, 0) 72%);
    filter: blur(12px);
    pointer-events: none;
}

.flavor-item__image {
    position: relative;
    width: 100%;
    max-width: 170px;
    height: auto;
    filter: drop-shadow(0 14px 20px rgba(244, 64, 156, 0.22));
    transition: transform 0.3s ease;
}

.flavor-item:hover .flavor-item__image {
    transform: translateY(-6px) scale(1.04);
}

.flavor-item__label {
    position: relative;
    margin-top: 6px;
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: clamp(15px, 1.4vw, 19px);
    line-height: 1.3;
    color: var(--color-section-title);
    font-variant-numeric: lining-nums;
    text-shadow: 2px 2px 4px rgba(255, 141, 141, 0.6);
}

.product-detail__note {
    max-width: 520px;
    margin: 36px auto 0;
    font-family: var(--font-section-subtitle);
    font-size: clamp(15px, 1.3vw, 18px);
    line-height: 1.45;
    letter-spacing: 0.02em;
    color: var(--color-section-subtitle);
}

.product-detail__cta-row {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

@media (prefers-reduced-motion: reduce) {
    .flavor-item__image {
        transition: none;
    }

    .flavor-item:hover .flavor-item__image {
        transform: none;
    }
}

/* laptop / pc: trim the transparent side margins of the 400 x 450 cup shots so the cups read larger */
@media (min-width: 992px) {
    .flavor-grid {
        gap: 32px 20px;
    }

    .flavor-item::before {
        top: 16px;
        width: 72%;
        max-width: 110px;
    }

    .flavor-item__image {
        max-width: 110px;
        aspect-ratio: 11 / 20;
        object-fit: cover;
    }

    .flavor-item__label {
        margin-top: -10px;
    }
}

@media (min-width: 1200px) {
    .flavor-item::before {
        max-width: 130px;
    }

    .flavor-item__image {
        max-width: 130px;
    }
}

@media (max-width: 991px) {
    .product-detail__card {
        max-width: 400px;
    }

    .product-detail__image {
        width: 72%;
    }

    .flavor-item__image {
        max-width: 130px;
    }
}

@media (max-width: 575px) {
    .product-detail__card {
        padding-top: 52px;
    }

    .product-detail__price {
        padding: 10px 26px;
        font-size: 15px;
    }

    .product-detail__price strong {
        font-size: 24px;
    }

    .product-detail__includes {
        margin-top: 24px;
    }

    .flavor-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 12px;
        margin-top: 28px;
    }

    .flavor-item__image {
        max-width: 120px;
    }

    .product-detail__note {
        margin-top: 28px;
    }

    .product-detail__includes {
        padding: 22px 16px;
    }
}

/* benefits */

.benefits {
    --benefit-card: #fdeee6;
    --benefit-icon-tile: var(--color-panel-light);
    --benefit-icon-bg: #f3ede6;
    --benefit-icon: var(--color-primary);
    --benefit-title: var(--color-primary);
    --benefit-text: var(--color-primary);
}

.bg-benefits {
    background-image: url('../images/bg-section-4.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* decor: same element images and sizing as the hero/trust decor, at 1200px wide.
   Top pieces hang off the top of the content (--y below the top padding);
   --bottom pieces hang off the bottom of the card grid (--y above the bottom padding),
   so the heading and card heights never push them out of place */
.benefits__decor {
    --u: min(1px, calc(100vw / 1200));
    --out: clamp(0px, calc((100vw - 1200px) / 3), 120px);
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.benefits__decor-item {
    position: absolute;
    top: calc(var(--section-py) + var(--y) * var(--u));
    left: clamp(
        calc(var(--s) * var(--u) / 2),
        calc(50% + var(--x) * var(--u) + var(--ox, 0) * var(--out)),
        calc(100% - var(--s) * var(--u) / 2)
    );
    width: calc(var(--s) * var(--u));
    max-width: none;
    height: auto;
    mix-blend-mode: screen;
    transform: translate(-50%, -50%) rotate(var(--r, 0deg));
}

.benefits__decor-item--bottom {
    top: auto;
    bottom: calc(var(--section-py) + var(--y) * var(--u));
    transform: translate(-50%, 50%) rotate(var(--r, 0deg));
}

.benefits__decor--bubble-tl { --x: -576; --y: 110; --s: 110; --ox: -1; }
.benefits__decor--heart-tr { --x: 543; --y: 40; --s: 135; --r: 8deg; --ox: 1; }
.benefits__decor--heart-bl { --x: -588; --y: 18; --s: 78; --r: -12deg; --ox: -1; }
/* sits over the corner between two cards, as in the design: lift it above the container */
.benefits__decor--bubble-b { --x: 172; --y: 4; --s: 74; --ox: 0.2; z-index: 1; }

/* stacked layout: the offsets no longer line up, so keep the pieces in the corners */
@media (max-width: 991px) {
    .benefits__decor--bubble-b {
        display: none;
    }

    .benefits__decor-item {
        left: var(--left);
        width: calc(var(--s) * 1px);
    }

    .benefits__decor--bubble-tl { top: 2%; --left: 6%; --s: 56; }
    .benefits__decor--heart-tr { top: 2.5%; --left: 92%; --s: 64; }
    .benefits__decor--heart-bl { bottom: 1.5%; --left: 7%; --s: 46; }
}

@media (max-width: 575px) {
    .benefits__decor--bubble-tl { --s: 42; }
    .benefits__decor--heart-tr { --left: 93%; --s: 46; }
}

/* the icon (the original cream circle) sits in a pink tile pinned to the top edge of the card */
.benefit-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    min-height: 190px;
    padding: 0 18px 26px;
    border-radius: 24px;
    background-color: var(--benefit-card);
    text-align: center;
}

.benefit-card__icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 66px;
    height: 66px;
    box-sizing: content-box;
    padding: 6px;
    border-radius: 0 0 8px 8px;
    background-image: radial-gradient(circle closest-side, var(--benefit-icon-tile) 50%, transparent 100%);
    color: var(--benefit-icon);
    margin-top: 10px;
}

.benefit-card__icon svg {
    width: 50px;
    height: 50px;
}

.benefit-card__title {
    margin: 18px 0 0;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: clamp(17px, 1.6vw, 19px);
    line-height: 1.35;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--benefit-title);
}

.benefit-card__desc {
    max-width: 340px;
    margin: 10px 0 0;
    font-size: clamp(14px, 1.2vw, 15px);
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: var(--benefit-text);
}

@media (max-width: 991px) {
    .benefit-card {
        min-height: 0;
    }
}

@media (max-width: 575px) {
    .benefit-card {
        padding: 0 20px 22px;
    }

    .benefit-card__icon {
        width: 60px;
        height: 60px;
    }

    .benefit-card__icon svg {
        width: 36px;
        height: 36px;
    }

    .benefit-card__title {
        margin-top: 14px;
    }
}

/* pricing table */

.pricing__intro {
    text-align: center;
}

.bg-pricing {
    background-image: url('../images/bg-section-5.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* decor: same element images and sizing as the benefits decor, at 1200px wide.
   Top pieces hang off the top of the content (--y below the top padding);
   --bottom pieces hang off the bottom of the content (--y above the bottom padding) */
.pricing__decor {
    --u: min(1px, calc(100vw / 1200));
    --out: clamp(0px, calc((100vw - 1200px) / 3), 120px);
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.pricing__decor-item {
    position: absolute;
    top: calc(var(--section-py) + var(--y) * var(--u));
    left: clamp(
        calc(var(--s) * var(--u) / 2),
        calc(50% + var(--x) * var(--u) + var(--ox, 0) * var(--out)),
        calc(100% - var(--s) * var(--u) / 2)
    );
    width: calc(var(--s) * var(--u));
    max-width: none;
    height: auto;
    mix-blend-mode: screen;
    transform: translate(-50%, -50%) rotate(var(--r, 0deg));
}

.pricing__decor-item--bottom {
    top: auto;
    bottom: calc(var(--section-py) + var(--y) * var(--u));
    transform: translate(-50%, 50%) rotate(var(--r, 0deg));
}

.pricing__decor--bubble-tr { --x: 614; --y: 40; --s: 120; --ox: 1; }
.pricing__decor--bubble-l { --x: -622; --y: 390; --s: 62; --ox: -1; }
.pricing__decor--heart-b { --x: 142; --y: -24; --s: 86; --r: -8deg; --ox: 0.1; }
.pricing__decor--heart-r { --x: 653; --y: 36; --s: 82; --r: 12deg; --ox: 1; }

/* stacked layout: the offsets no longer line up, so keep the pieces in the corners */
@media (max-width: 991px) {
    .pricing__decor--bubble-l {
        display: none;
    }

    .pricing__decor-item {
        left: var(--left);
        width: calc(var(--s) * 1px);
    }

    /* px offsets: the stacked section is tall, so percentages would push the pieces half off the edge */
    .pricing__decor--bubble-tr { top: 40px; --left: 92%; --s: 64; }
    .pricing__decor--heart-b { bottom: 34px; --left: 8%; --s: 50; }
    .pricing__decor--heart-r { bottom: 40px; --left: 92%; --s: 46; }
}

@media (max-width: 575px) {
    .pricing__decor--bubble-tr { --s: 48; }
}

.pricing__intro-title {
    font-family: var(--font-section-title);
    font-weight: 700;
    font-size: 64px;
    color: var(--color-section-title);
    line-height: 1.3;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.85);
}

.pricing__intro-text {
    font-family: var(--font-section-subtitle);
    font-size: 18px;
    line-height: 1.65;
    color: var(--color-section-subtitle);
    margin-top: 16px;
}

.pricing__callout {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 34px;
}

.pricing__callout-icon {
    flex-shrink: 0;
    width: 76px;
    margin-top: -6px;
    filter: drop-shadow(0 6px 10px rgba(168, 24, 80, 0.18));
}

.pricing__callout-icon svg {
    display: block;
    width: 100%;
    height: auto;
}

.pricing__callout > div {
    min-width: 0;
    text-align: center;
}

.pricing__callout-title {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: clamp(14px, 1.25vw, 18px);
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--color-section-title);
}

.pricing__callout-text {
    margin: 6px 0 0;
    font-size: clamp(15px, 1.3vw, 18px);
    line-height: 1.45;
    letter-spacing: 0.02em;
    color: var(--color-section-subtitle);
}

/* countdown card: cream card with pink tiles, the same palette as the benefit cards */
.preorder-countdown {
    --countdown-card: #fdeee6;
    --countdown-tile: var(--color-panel-light);
    --countdown-ink: var(--color-primary);
    position: relative;
    overflow: hidden;
    margin-top: 44px;
    padding: 22px 20px;
    border-radius: 18px;
    background-color: var(--countdown-card);
    box-shadow: 0 14px 34px rgba(168, 24, 80, 0.14);
}

.preorder-countdown__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(140% 90% at 10% 10%, rgba(255, 255, 255, 0.6) 0, rgba(255, 255, 255, 0) 60%),
        radial-gradient(120% 90% at 90% 80%, rgba(251, 214, 242, 0.55) 0, rgba(251, 214, 242, 0) 70%);
    pointer-events: none;
}

.preorder-countdown__deco {
    position: absolute;
    bottom: -16px;
    width: 120px;
    opacity: 0.9;
    filter: drop-shadow(0 10px 18px rgba(255, 120, 188, 0.25));
    pointer-events: none;
}

.preorder-countdown__deco--left {
    left: -22px;
    transform: rotate(-12deg);
    animation: preorderFloatLeft 3s ease-in-out infinite;
}

.preorder-countdown__deco--right {
    top: 14px;
    right: -22px;
    transform: rotate(14deg);
    animation: preorderFloatRight 3s ease-in-out infinite;
}

.preorder-countdown__inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

.preorder-countdown__title {
    margin: 0 0 20px;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: clamp(16px, 1.5vw, 20px);
    letter-spacing: 0.02em;
    color: var(--countdown-ink);
}

.preorder-countdown__time {
    display: flex;
    justify-content: center;
    gap: 14px;
}

.preorder-countdown__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
}

.preorder-countdown__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 16px;
    background: var(--color-primary);
    box-shadow: 0 10px 22px rgba(240, 33, 86, 0.12), 0 0 0 1px rgba(240, 33, 86, 0.14) inset;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 32px;
    line-height: 1;
    color: #fff;
}

.preorder-countdown__lbl {
    margin-top: 4px;
    font-size: 14px;
    letter-spacing: 0.04em;
    color: var(--countdown-ink);
}

@keyframes preorderFloatLeft {
    0%, 100% { transform: translateY(0) rotate(-12deg); }
    50% { transform: translateY(-6px) rotate(-8deg); }
}

@keyframes preorderFloatRight {
    0%, 100% { transform: translateY(0) rotate(14deg); }
    50% { transform: translateY(-6px) rotate(10deg); }
}

.pricing__table-trigger {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    cursor: zoom-in;
}

.pricing__table-trigger:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 4px;
}

.pricing__table-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 14px 34px rgba(168, 24, 80, 0.14);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pricing__table-trigger:hover .pricing__table-image,
.pricing__table-trigger:focus-visible .pricing__table-image {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(168, 24, 80, 0.22);
}

.pricing__table-hint {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background-color: rgba(255, 255, 255, 0.92);
    color: var(--color-section-title);
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 6px 14px rgba(168, 24, 80, 0.18);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.pricing__table-hint i {
    font-size: 17px;
}

/* the hint covers part of the last row, so show it only on hover (always on touch screens) */
.pricing__table-trigger:hover .pricing__table-hint,
.pricing__table-trigger:focus-visible .pricing__table-hint {
    opacity: 1;
    transform: translateY(-3px);
}

/* touch screens have no hover, so the hint sits under the table instead of covering its last row */
@media (hover: none) {
    .pricing__table-hint {
        position: static;
        margin-top: 12px;
        opacity: 1;
    }
}

/* dialog shrinks to the image: no header, no padding */
.pricing-modal .modal-dialog {
    width: fit-content;
    max-width: calc(100vw - 2 * var(--bs-modal-margin));
}

.pricing-modal .modal-content {
    position: relative;
    border: 0;
    border-radius: var(--radius-card);
    background-color: transparent;
    overflow: hidden;
}

.pricing-modal .modal-body {
    padding: 0;
}

.pricing-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    padding: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    opacity: 1;
}

/* fit the whole table on screen without scrolling */
.pricing-modal__image {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100vh - 2 * var(--bs-modal-margin));
}

.pricing-table__note {
    margin-top: 22px;
    font-size: clamp(14px, 1.3vw, 18px);
    font-style: italic;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: var(--color-section-subtitle);
    text-align: center;
}

.pricing__cta-row {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

/* leave room for the cups on both sides */
@media (min-width: 768px) {
    .preorder-countdown {
        padding: 22px 80px;
    }
}

@media (max-width: 991px) {
    .pricing__intro-title {
        font-size: clamp(34px, 6.2vw, 52px);
        line-height: 1.2;
    }

    .pricing__intro-text {
        font-size: 17px;
    }

    .pricing__callout {
        justify-content: center;
    }
}

@media (max-width: 575px) {
    .pricing__intro-title {
        font-size: clamp(28px, 8.4vw, 36px);
    }

    .pricing__intro-text {
        margin-top: 12px;
        font-size: 15px;
    }

    .pricing__intro-text br {
        display: none;
    }

    /* icon above the copy reads better than a narrow text column beside it */
    .pricing__callout {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        margin-top: 26px;
    }

    .pricing__callout-icon {
        width: 56px;
        margin-top: 0;
    }

    .preorder-countdown {
        margin-top: 28px;
        padding: 20px 12px;
    }

    .preorder-countdown__title {
        margin-bottom: 16px;
        font-size: 15px;
        text-wrap: balance;
    }

    .preorder-countdown__time {
        gap: 10px;
    }

    .preorder-countdown__num {
        width: 64px;
        height: 64px;
        font-size: 24px;
    }

    .pricing__cta-row .hero__cta {
        width: 100%;
        justify-content: space-between;
        font-size: 15px;
        padding-left: 24px;
    }
}

/* small phones (320 - 374px): four 64px boxes no longer fit */
@media (max-width: 374px) {
    .preorder-countdown__time {
        gap: 6px;
    }

    .preorder-countdown__num {
        width: 54px;
        height: 54px;
        border-radius: 12px;
        font-size: 20px;
    }

    .preorder-countdown__lbl {
        font-size: 12px;
    }
}

/* process */

/* cards and icons use the same palette as the hero feature cards */
.process {
    --process-card: #ffeee3;
    --process-number: var(--color-primary);
    --process-title: var(--color-primary);
    --process-text: var(--color-primary);
    --process-icon: #fb3063;
    --process-panel: rgba(255, 214, 230, 0.4);
}

.bg-process {
    background-image: url('../images/bg-section-4.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* decor: same element images and sizing as the benefits decor, at 1200px wide.
   Top pieces hang off the top of the content (--y below the top padding);
   --bottom pieces hang off the bottom of the panel (--y above the bottom padding) */
.process__decor {
    --u: min(1px, calc(100vw / 1200));
    --out: clamp(0px, calc((100vw - 1200px) / 3), 120px);
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.process__decor-item {
    position: absolute;
    top: calc(var(--section-py) + var(--y) * var(--u));
    left: clamp(
        calc(var(--s) * var(--u) / 2),
        calc(50% + var(--x) * var(--u) + var(--ox, 0) * var(--out)),
        calc(100% - var(--s) * var(--u) / 2)
    );
    width: calc(var(--s) * var(--u));
    max-width: none;
    height: auto;
    mix-blend-mode: screen;
    transform: translate(-50%, -50%) rotate(var(--r, 0deg));
}

.process__decor-item--bottom {
    top: auto;
    bottom: calc(var(--section-py) + var(--y) * var(--u));
    transform: translate(-50%, 50%) rotate(var(--r, 0deg));
}

.process__decor--heart-tl { --x: -498; --y: 43; --s: 116; --r: -10deg; --ox: -1; }
.process__decor--bubble-bl { --x: -605; --y: 17; --s: 116; --ox: -1; }
/* sits over the bottom corner of the last card, as in the design: lift it above the container */
.process__decor--bubble-br { --x: 646; --y: 13; --s: 75; z-index: 2; }

/* stacked layout: the offsets no longer line up, so keep the pieces in the corners */
@media (max-width: 991px) {
    .process__decor--bubble-br {
        display: none;
    }

    .process__decor-item {
        left: var(--left);
        width: calc(var(--s) * 1px);
    }

    /* px offsets: the stacked section is tall, so percentages would push the pieces half off the edge */
    .process__decor--heart-tl { top: 44px; --left: 8%; --s: 64; }
    .process__decor--bubble-bl { bottom: 30px; --left: 6%; --s: 56; }
}

@media (max-width: 575px) {
    .process__decor--heart-tl { top: 22px; --left: 7%; --s: 38; }
    .process__decor--bubble-bl { --s: 42; }
}

.process__subtext {
    margin-top: 12px;
}

/* translucent band behind the steps; the top padding leaves room for the number badges */
.process-steps {
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
}

/* earlier columns must stack above later ones for the arrow to overlap the next card */
.process-steps > li {
    position: relative;
}

.process-steps > li:nth-child(1) { z-index: 4; }
.process-steps > li:nth-child(2) { z-index: 3; }
.process-steps > li:nth-child(3) { z-index: 2; }
.process-steps > li:nth-child(4) { z-index: 1; }

.process-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    min-height: 300px;
    padding: 34px 18px 56px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 26px;
    background-color: var(--process-card);
    box-shadow: 0 12px 26px rgba(200, 30, 80, 0.16);
    text-align: center;
}

.process-step__number {
    position: absolute;
    top: -25px;
    left: -4px;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--process-number);
    color: var(--color-white);
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 21px;
    line-height: 1;
}

.process-step__icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    color: var(--process-icon);
}

.process-step__icon svg {
    width: 100%;
    height: 100%;
}

.process-step__title {
    margin: 14px 0 0;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: clamp(18px, 1.7vw, 22px);
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--process-title);
}

.process-step__desc {
    margin: 10px 0 0;
    font-size: clamp(14px, 1.2vw, 15px);
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: var(--process-text);
}

/* curved arrow that swoops from the bottom of one card into the next */
.process-step__arrow {
    position: absolute;
    right: -62px;
    bottom: 10px;
    z-index: 2;
    width: 100px;
    height: auto;
    color: var(--process-title);
    pointer-events: none;
}

@media (max-width: 1199px) {
    .process__panel {
        padding-inline: 20px;
    }

    .process-step__arrow {
        right: -50px;
        width: 80px;
    }
}

@media (max-width: 991px) {
    .process__panel {
        padding: 56px 24px 30px;
    }

    .process-step {
        min-height: 0;
        padding-bottom: 30px;
    }

    .process-step__arrow {
        display: none;
    }
}

@media (max-width: 575px) {
    .process__panel {
        padding: 44px 14px 24px;
    }

    .process-steps {
        --bs-gutter-y: 2.75rem;
    }

    .process-step {
        padding: 30px 20px 26px;
    }

    .process-step__number {
        top: -22px;
        left: 0;
        width: 46px;
        height: 46px;
        font-size: 19px;
    }

    .process-step__icon {
        width: 56px;
        height: 56px;
    }
}

/* testimonials */

.testimonial-card {
    position: relative;
    background-color: var(--color-panel-light);
    border-radius: var(--radius-card);
    padding: 32px;
    height: 100%;
    overflow: visible;
}

.testimonial-card__polaroid {
    position: absolute;
    top: -18px;
    right: 24px;
    width: 92px;
    padding: 6px 6px 16px;
    background-color: var(--color-white);
    border-radius: 4px;
    box-shadow: var(--shadow-card);
    transform: rotate(7deg);
}

.testimonial-card__polaroid img {
    width: 100%;
    height: 70px;
    object-fit: contain;
    border-radius: 2px;
}

.testimonial-card__pin {
    position: absolute;
    top: -14px;
    right: 12px;
    font-size: 22px;
    color: #e0355c;
    transform: rotate(25deg);
}

.testimonial-card__stars {
    color: #f7b731;
    font-size: 18px;
    letter-spacing: 3px;
    margin-bottom: 16px;
}

.testimonial-card__quote {
    font-size: 15px;
    line-height: 1.8;
    color: var(--color-text-on-pink);
}

.testimonial-card__author {
    margin-top: 20px;
    font-family: var(--font-body);
    font-weight: 600;
    font-style: italic;
    color: var(--color-text-soft);
}

/* stacked cards: leave room above each one for the polaroid that pokes out */
@media (max-width: 991px) {
    .testimonials .row {
        --bs-gutter-y: 2.5rem;
    }
}

@media (max-width: 575px) {
    .testimonial-card {
        padding: 26px 20px 22px;
    }

    .testimonial-card__polaroid {
        right: 16px;
        width: 76px;
    }

    .testimonial-card__polaroid img {
        height: 56px;
    }

    .testimonial-card__stars {
        margin-bottom: 12px;
        font-size: 16px;
    }

    .testimonial-card__quote {
        font-size: 14px;
        line-height: 1.7;
    }

    .testimonial-card__author {
        margin-top: 14px;
    }
}

/* final cta */

.final-cta {
    background-color: var(--color-header);
    text-align: center;
}

.final-cta__title {
    font-family: var(--font-section-title);
    font-weight: 700;
    font-size: var(--fs-section-title);
    line-height: 1.12;
    text-transform: uppercase;
    color: var(--color-white);
}

.final-cta__text {
    margin-top: 12px;
    font-family: var(--font-section-subtitle);
    font-size: var(--fs-section-subtitle);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.9);
}

.final-cta__actions {
    margin-top: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.final-cta__phone {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 20px;
    color: var(--color-white);
}

.final-cta .btn-accent {
    background-color: var(--color-white);
    color: var(--color-accent);
}

@media (max-width: 575px) {
    .final-cta__title {
        text-wrap: balance;
    }

    .final-cta__actions {
        flex-direction: column;
        gap: 16px;
        margin-top: 22px;
    }

    .final-cta .btn {
        width: 100%;
        padding: 15px 20px;
    }
}