/* The Midlife Pause — post-purchase pages (upsell-1..3, thank-you).
   Extends mlp.css tokens/classes; loaded after it. Do not duplicate mlp.css rules here.
   Layout targets (gate): headline <= ~110px below the review bar, accept CTA above the
   1280x720 fold, popups fit 375x667 with no internal scroll (FS-043 / FS-050 / FS-169). */

/* ---------- slim top line: brand · order confirmed · phone ---------- */
.pp-top { background: #fff; border-bottom: 1px solid var(--line); }
.pp-top-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 16px; padding: 8px 20px; max-width: var(--wide); margin: 0 auto; }
.pp-top .wordmark { font-size: .98rem; white-space: nowrap; }
.pp-top .wordmark .mark { width: 26px; height: 26px; font-size: .72rem; }
.pp-status { order: 3; flex: 1 1 100%; margin: 0; display: flex; align-items: center; gap: 8px; font-size: .84rem; line-height: 1.3; color: var(--ink-2); }
.pp-status .tick { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; font-size: .68rem; }
.pp-status strong { color: var(--teal); }
.pp-steps { display: inline-flex; gap: 4px; margin-left: auto; flex: none; }
.pp-steps i { width: 18px; height: 5px; border-radius: 3px; background: var(--line); }
.pp-steps i.on { background: var(--teal); }
.pp-steps i.now { background: var(--pink); }
.pp-phone { font-size: .84rem; font-weight: 600; color: var(--navy); text-decoration: none; white-space: nowrap; }
@media (min-width: 860px) {
  .pp-status { order: 2; flex: 1 1 auto; justify-content: center; }
  .pp-steps { margin-left: 8px; }
}

/* ---------- upsell hero: one decision card, headline inside the card ---------- */
.upsell.hero { padding: 14px 0 36px; }
.offer-card { background: #fff; border-radius: 24px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); display: grid; grid-template-columns: 1fr; overflow: hidden; max-width: 1040px; margin: 0 auto; }
.offer-card .art { background: var(--product-bg); display: none; place-items: center; padding: 24px; position: relative; }
.offer-card .art > img { width: 100%; max-width: 480px; aspect-ratio: 1360 / 1088; object-fit: contain; transform: scale(1.1); }
.offer-card .art .count { position: absolute; left: 16px; top: 16px; z-index: 2; background: var(--navy); color: #fff; font: 700 .76rem/1 var(--font-head); letter-spacing: .08em; text-transform: uppercase; padding: 8px 11px; border-radius: 999px; }
.offer-card .panel { padding: 18px 18px 20px; display: flex; flex-direction: column; min-width: 0; }
.offer-card .kicker { font: 700 .74rem/1 var(--font-head); letter-spacing: .12em; text-transform: uppercase; color: var(--pink); margin: 0 0 8px; }
.offer-card h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.12; margin: 0 0 .35em; }
.offer-card h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); margin-bottom: .3em; }
.prod-line { display: flex; gap: 12px; align-items: center; margin: 0 0 12px; }
.prod-line .thumb { flex: none; width: 84px; height: 84px; border-radius: 12px; object-fit: cover; background: var(--product-bg); }
.prod-line .thumb-pair { flex: none; display: flex; }
.prod-line .thumb-pair .thumb { width: 50px; }
.prod-line .sub { margin: 0; font-size: .93rem; line-height: 1.45; color: var(--ink-2); }
@media (min-width: 860px) {
  .offer-card { grid-template-columns: 1fr 1.08fr; }
  .offer-card .art { display: grid; }
  .offer-card .panel { padding: 26px 34px 24px; }
  .prod-line .thumb, .prod-line .thumb-pair { display: none; }
}

/* receipt rows: quantity, per-unit, shipping, total */
.receipt { list-style: none; margin: 0 0 12px; padding: 0; border-top: 1px solid var(--line); }
.receipt li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .92rem; line-height: 1.35; }
.receipt li > span:first-child { color: var(--ink-2); }
.receipt li > span:last-child { font-weight: 600; color: var(--navy); text-align: right; max-width: 64%; font-variant-numeric: tabular-nums; }
.receipt li > span.nw { white-space: nowrap; max-width: none; }
.receipt li s { color: var(--muted); font-weight: 500; }
.receipt li.total { border-bottom: 0; padding-top: 10px; align-items: center; }
.receipt li.total > span:first-child { font: 700 1rem/1.2 var(--font-head); color: var(--navy); }
.receipt li.total > span:last-child { font: 700 1.9rem/1 var(--font-head); letter-spacing: -.02em; white-space: nowrap; max-width: none; }
.receipt li.free > span:last-child { color: var(--teal); }
.receipt li small { display: block; font: 500 .78rem/1.35 var(--font-body); color: var(--muted); letter-spacing: 0; }
.receipt li small.save { color: #0B6E60; font-weight: 700; }
.accept.btn { flex-direction: column; gap: 0; padding: 12px 22px; min-height: 60px; width: 100%; }
.accept .btn-sub { display: block; font: 500 .8rem/1.2 var(--font-body); opacity: .92; margin-top: 3px; }
.decline { display: block; width: 100%; margin: 6px 0 0; background: none; border: 0; padding: 10px 8px; min-height: 44px; font: 500 .9rem/1.4 var(--font-body); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: center; }
.decline:hover { color: var(--navy); }
.fine-note { font-size: .8rem; color: var(--muted); text-align: center; margin: 2px 0 0; line-height: 1.45; }

/* continuity: compact terms line + required agreement (U3 / D3) */
.terms-line { font-size: .8rem; line-height: 1.45; color: var(--ink-2); background: var(--teal-50); border-radius: 10px; padding: 8px 12px; margin: 0 0 10px; }
.terms-box { background: var(--teal-50); border: 1px solid #D6E9E9; border-radius: 14px; padding: 14px 16px; font-size: .88rem; line-height: 1.55; color: var(--ink-2); margin: 0 0 14px; }
.terms-box h3 { font-size: .95rem; margin: 0 0 6px; color: var(--teal); }
.terms-box ul { margin: 0; padding-left: 18px; }
.terms-box li { margin-bottom: 4px; }
.agree { display: flex; gap: 10px; align-items: flex-start; background: #FFF8E6; border: 2px solid var(--gold); border-radius: 12px; padding: 9px 12px; margin: 0 0 10px; cursor: pointer; font-size: .84rem; line-height: 1.4; color: var(--ink); }
.agree input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--pink); cursor: pointer; }
.agree.error { border-color: #C0392B; background: #FDECEA; }
.agree-msg { display: none; color: #B03022; font-size: .82rem; font-weight: 600; margin: -4px 0 8px; }
.agree.error + .agree-msg { display: block; }
.btn[aria-disabled="true"] { background: #C9CFD8; box-shadow: none; color: #fff; }
.btn[aria-disabled="true"]:hover { transform: none; background: #BCC3CE; }

/* ---------- product art compositions ---------- */
.box-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 440px; }
.box-tile { background: #fff; border-radius: 14px; box-shadow: 0 1px 2px rgba(13,40,69,.06); overflow: hidden; display: flex; flex-direction: column; }
.box-tile img { width: 100%; aspect-ratio: 1360 / 1088; object-fit: cover; background: var(--product-bg); }
.box-tile .nm { font: 600 .78rem/1.25 var(--font-head); color: var(--navy); padding: 8px 10px 10px; text-align: center; }
.type-tile { aspect-ratio: 1360 / 1088; background: linear-gradient(150deg, var(--navy), #1B3F66); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 10px; position: relative; overflow: hidden; }
.type-tile::after { content: ""; position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; background: var(--pink); right: -22%; bottom: -30%; opacity: .9; }
.type-tile small { font: 600 .58rem/1 var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--pink-200); margin-bottom: 6px; position: relative; z-index: 1; }
.type-tile strong { color: #fff; font: 700 clamp(.95rem, 2.4vw, 1.25rem)/1.05 var(--font-head); position: relative; z-index: 1; }
.type-tile span { font: 500 .66rem/1.3 var(--font-body); color: #C9D3DF; margin-top: 6px; position: relative; z-index: 1; }
.pair-art { display: flex; justify-content: center; align-items: flex-end; width: 100%; max-width: 420px; }
.pair-art img { width: 44%; aspect-ratio: .62; object-fit: cover; object-position: 50% 50%; }
.pair-art img + img { margin-left: -4%; margin-bottom: 5%; }

/* ---------- what's inside (U3) ---------- */
.inside { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 28px; }
.inside-item { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px; display: grid; grid-template-columns: 76px 1fr; gap: 16px; align-items: start; }
.inside-item img, .inside-item .type-tile { width: 76px; height: 76px; aspect-ratio: auto; border-radius: 12px; object-fit: cover; }
.inside-item img { background: var(--product-bg); }
.inside-item .type-tile strong { font-size: .72rem; }
.inside-item .type-tile small, .inside-item .type-tile span { display: none; }
.inside-item h3 { font-size: 1.08rem; margin-bottom: .25em; }
.inside-item .meta { font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--teal); font-weight: 600; display: block; margin-bottom: 4px; }
.inside-item p { margin: 0; font-size: .94rem; line-height: 1.6; }
@media (min-width: 760px) { .inside { grid-template-columns: 1fr 1fr; } }

/* ---------- reasoning letter + repeat card ---------- */
.why { padding: 48px 0; }
.why .letter p { font-size: 1.05rem; }
.note-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 34px 28px; }
@media (min-width: 860px) { .note-card { padding: 44px 52px; } }
.note-card .eyebrow + h2 { margin-top: .2em; }
.note-card .signoff .small { display: block; }
.facts-mini { list-style: none; padding: 0; margin: 0 0 1.2em; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.facts-mini li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: .95rem; }
.facts-mini li:last-child { border-bottom: 0; }
.facts-mini li span:last-child { font-weight: 600; color: var(--navy); white-space: nowrap; }
.repeat { padding: 8px 0 64px; }
.repeat .offer-card { max-width: 720px; grid-template-columns: 1fr; }
.repeat .panel { padding: 24px 24px; }

/* ---------- downsell popup (fits 375x667 with no internal scroll) ---------- */
.ds-panel { max-width: 500px; padding: 22px 20px 18px; }
.ds-panel .ds-eyebrow { font: 700 .72rem/1 var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--pink); margin: 0 0 6px; }
.ds-panel h2 { font-size: clamp(1.25rem, 3.4vw, 1.5rem); margin: 0 0 10px; padding-right: 40px; }
.ds-panel .prod-line .thumb, .ds-panel .prod-line .thumb-pair { display: flex; }
.ds-panel .prod-line .thumb { width: 72px; height: 72px; }
.ds-panel .prod-line .thumb-pair .thumb { width: 46px; }
.ds-panel .prod-line { margin-bottom: 10px; }
.ds-panel .prod-line .sub { font-size: .88rem; }
.ds-panel .receipt li.total > span:last-child { font-size: 1.7rem; }
.ds-panel .accept.btn { min-height: 56px; padding: 10px 20px; }
/* popup decline = plain gray button (FS-052/055) */
[data-modal] .btn.ghost{display:flex;width:100%;justify-content:center;margin-top:10px;box-shadow:inset 0 0 0 1px #c8ccd3;color:#5d6675;font-weight:500;background:#fff}
[data-modal] .btn.ghost:hover{background:#f3f4f6;color:#333}
[data-modal] .btn.ghost { min-height: 46px; padding: 10px 18px; font-size: .95rem; margin-top: 8px; }

/* ---------- thank-you ---------- */
.ty-hero { padding: 14px 0 36px; }
.ty-card { background: #fff; border-radius: 24px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); max-width: 760px; margin: 0 auto; padding: 22px 22px 26px; }
.ty-card h1 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: .3em; }
.ty-card h1 .tick { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; }
.ty-card h1 .tick svg { width: 22px; height: 22px; }
.order-list { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--line); }
.order-list li { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.order-list img, .order-list .type-tile { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; aspect-ratio: auto; }
.order-list img { background: var(--product-bg); }
.order-list .type-tile strong { font-size: .6rem; }
.order-list .type-tile small, .order-list .type-tile span { display: none; }
.order-list .it { font: 600 1rem/1.3 var(--font-head); color: var(--navy); }
.order-list .it small { display: block; font: 500 .84rem/1.4 var(--font-body); color: var(--muted); }
.demo-flag { display: inline-block; font: 700 .7rem/1 var(--font-head); letter-spacing: .1em; text-transform: uppercase; background: var(--page); color: var(--muted); border-radius: 999px; padding: 6px 10px; margin-top: 12px; }
.bonus .btn.secondary { margin-top: 14px; padding: 10px 18px; min-height: 44px; font-size: .9rem; }
.pod-cta { display: grid; gap: 22px; grid-template-columns: 1fr; align-items: center; background: #fff; border-radius: 24px; box-shadow: var(--shadow); padding: 26px; max-width: 900px; margin: 0 auto; }
.pod-cta img { width: 140px; height: 140px; border-radius: 16px; object-fit: cover; }
@media (min-width: 760px) { .pod-cta { grid-template-columns: 160px 1fr; padding: 32px 36px; } .pod-cta img { width: 160px; height: 160px; } }

/* footer on post-purchase pages has no sticky bar to clear */
.pp .site-footer { padding-bottom: 48px; }
@media (max-width: 420px) {
  .offer-card h1 { font-size: 1.5rem; }
  .prod-line .thumb { width: 72px; height: 72px; }
  .prod-line .thumb-pair .thumb { width: 44px; }
  .receipt li { padding: 6px 0; }
}
@media (min-width: 860px) { .pp-phone { order: 3; } }

/* ======================================================================
   Round 3 (critic r2): composed hero art, persuasion body, proof blocks
   ====================================================================== */

/* hero card: head / art / buy as grid areas (mobile: head, art, buy) */
.offer-card.hero-card { grid-template-columns: 1fr; grid-template-areas: "head" "art" "buy"; }
.hero-card > .head { grid-area: head; padding: 18px 18px 6px; }
.hero-card > .art { grid-area: art; display: block; }
.hero-card > .buy { grid-area: buy; padding: 6px 18px 18px; display: flex; flex-direction: column; }
.hero-card .head .sub { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--ink-2); }
@media (min-width: 860px) {
  .offer-card.hero-card { grid-template-columns: 1fr 1.02fr; grid-template-areas: "art head" "art buy"; grid-template-rows: auto 1fr; }
  .hero-card > .head { padding: 26px 34px 6px; }
  .hero-card > .buy { padding: 8px 34px 22px; }
}

/* composed product stage: product renders sit on #F5F7FA, so mix-blend darken
   makes their backgrounds disappear into the stage and lets them overlap */
.stage { position: relative; isolation: isolate; overflow: hidden; background: #F5F7FA; min-height: 200px; height: 100%; }
.stage::before { content: ""; position: absolute; z-index: -1; width: 78%; aspect-ratio: 1; border-radius: 50%; left: 50%; top: 54%; transform: translate(-50%, -50%); background: radial-gradient(circle at 50% 45%, #F7DCE7 0%, #F3E1EA 45%, rgba(245,247,250,0) 71%); }
.stage::after { content: ""; position: absolute; z-index: -1; width: 36%; aspect-ratio: 1; border-radius: 50%; right: -6%; top: -8%; background: #DCEFEE; }
.stage .shadow { position: absolute; z-index: -1; left: 18%; right: 18%; bottom: 9%; height: 7%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(13,40,69,.22), rgba(13,40,69,0) 70%); }
.stage img { position: absolute; mix-blend-mode: darken; object-fit: cover; }
.stage .count { position: absolute; left: 14px; top: 14px; z-index: 3; background: var(--navy); color: #fff; font: 700 .74rem/1 var(--font-head); letter-spacing: .08em; text-transform: uppercase; padding: 8px 11px; border-radius: 999px; }
.stage .tag { position: absolute; z-index: 3; right: 14px; bottom: 14px; background: #fff; color: var(--navy); font: 600 .78rem/1.25 var(--font-head); padding: 8px 11px; border-radius: 12px; box-shadow: var(--shadow); max-width: 58%; }
.stage .tag b { color: var(--pink); }
.hero-card .stage { height: 210px; }
@media (min-width: 860px) { .hero-card .stage { height: 100%; min-height: 470px; } }

/* U1: two pouches + stick packs */
.stage.u1 .p2 { width: 118%; left: -9%; top: 0; height: 100%; object-position: 50% 50%; }
.stage.u1 .sticks { width: 46%; height: 62%; right: -4%; bottom: 2%; object-position: 50% 55%; }
@media (min-width: 860px) { .stage.u1 .p2 { width: 125%; left: -18%; top: -2%; } .stage.u1 .sticks { width: 44%; height: 50%; right: 0; bottom: 6%; } }
/* U2: two bottles, overlapping */
.stage.u2 .b1, .stage.u2 .b2 { height: 88%; aspect-ratio: .5; object-position: 50% 58%; bottom: 4%; }
.stage.u2 .b1 { left: 50%; transform: translateX(-88%); }
.stage.u2 .b2 { left: 50%; transform: translateX(-8%) scale(.92); transform-origin: bottom; }
@media (min-width: 860px) { .stage.u2 .b1, .stage.u2 .b2 { height: 74%; bottom: 10%; } }
/* U3: bundle */
.stage.u3 img { bottom: 6%; height: 70%; object-position: 50% 58%; }
.stage.u3 .collagen { left: 50%; transform: translateX(-50%); height: 78%; aspect-ratio: .78; bottom: 10%; }
.stage.u3 .inositol { right: 2%; height: 60%; aspect-ratio: .74; }
.stage.u3 .mushroom { left: 3%; height: 62%; aspect-ratio: .5; }
@media (min-width: 860px) { .stage.u3 .collagen { height: 60%; bottom: 18%; } .stage.u3 .inositol { height: 48%; right: 4%; bottom: 10%; } .stage.u3 .mushroom { height: 52%; left: 6%; bottom: 10%; } }

/* ---------- persuasion body ---------- */
.story { padding: 52px 0; }
.story + .story { padding-top: 8px; }
.story-grid { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: center; max-width: 1040px; margin: 0 auto; }
.story-grid.flip > .media { order: -1; }
@media (min-width: 860px) { .story-grid { grid-template-columns: 1.15fr .85fr; gap: 48px; } .story-grid.flip { grid-template-columns: .85fr 1.15fr; } .story-grid.flip > .media { order: 0; } }
.story .copy p { font-size: 1.02rem; line-height: 1.7; }
.story .copy h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
.story .media img { width: 100%; border-radius: 22px; box-shadow: var(--shadow-lg); object-fit: cover; }
.story .media figcaption { font-size: .8rem; color: var(--muted); margin-top: 8px; }
.photo-tall { aspect-ratio: 4 / 5; object-position: 50% 30%; }
.photo-wide { aspect-ratio: 16 / 10; }

/* 60-day shelf graphic (U1) */
.shelf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0 6px; }
.shelf .pch { border-radius: 14px; padding: 12px 10px; text-align: center; font: 600 .82rem/1.3 var(--font-head); color: var(--navy); background: #fff; border: 2px solid var(--line); }
.shelf .pch b { display: block; font-size: 1.35rem; color: var(--navy); margin: 2px 0; }
.shelf .pch.add { border-color: var(--pink); background: var(--pink-50); }
.shelf .pch small { display: block; font: 500 .74rem/1.3 var(--font-body); color: var(--muted); }

/* how-to row */
.howto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0; }
.howto figure { margin: 0; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.howto img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--product-bg); }
.howto figcaption { font: 600 .8rem/1.3 var(--font-head); color: var(--navy); padding: 8px 10px 10px; }

/* proof: reviews + podcast + credentials */
.proof-band { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 44px 0; }
.proof-band .reviews { margin-top: 20px; }
.review .stars { color: var(--gold); letter-spacing: 2px; font-size: .95rem; margin-bottom: 6px; }
.pod-callout { display: grid; grid-template-columns: 76px 1fr; gap: 16px; align-items: start; background: var(--teal-50); border: 1px solid #D6E9E9; border-radius: 18px; padding: 18px 20px; margin: 24px auto 0; max-width: 860px; }
.pod-callout img { width: 76px; height: 76px; border-radius: 12px; object-fit: cover; }
.pod-callout h3 { font-size: 1.05rem; margin: 0 0 6px; color: var(--teal); }
.pod-callout ul { margin: 0; padding-left: 18px; font-size: .92rem; line-height: 1.5; }
.pod-callout li { margin-bottom: 4px; }
.pod-callout .when { color: var(--muted); font-size: .82rem; }
.cred { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: center; max-width: 860px; margin: 24px auto 0; }
.cred img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; box-shadow: var(--shadow); }
.cred p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--ink-2); }
.cred strong { font-family: var(--font-head); }
@media (min-width: 760px) { .cred { grid-template-columns: 120px 1fr; } .cred img { width: 120px; height: 120px; } }

/* synthesis before the last ask */
.synth { max-width: 720px; margin: 0 auto 22px; text-align: center; }
.synth h2 { font-size: clamp(1.45rem, 2.8vw, 2rem); }
.synth p { font-size: 1.02rem; }
.faq.compact { margin-top: 20px; }
/* stage geometry: explicit boxes + object-fit cover crop to the product */
.hero-card .stage { height: 240px; }
@media (min-width: 860px) { .hero-card .stage { height: 100%; min-height: 470px; } }
.stage.u1 .p2 { width: 108%; left: -8%; top: 0; height: 100%; }
.stage.u1 .sticks { width: 40%; height: 58%; right: 0; bottom: 4%; left: auto; }
@media (min-width: 860px) { .stage.u1 .p2 { width: 112%; left: -14%; top: -2%; } .stage.u1 .sticks { width: 38%; height: 46%; right: 2%; bottom: 8%; } }
.stage.u2 .b1, .stage.u2 .b2 { aspect-ratio: auto; transform: none; object-position: 50% 55%; }
.stage.u2 .b1 { left: 14%; width: 42%; height: 84%; bottom: 6%; }
.stage.u2 .b2 { left: 42%; width: 40%; height: 76%; bottom: 4%; }
@media (min-width: 860px) { .stage.u2 .b1 { left: 16%; width: 40%; height: 76%; bottom: 10%; } .stage.u2 .b2 { left: 44%; width: 38%; height: 70%; bottom: 8%; } }
.stage.u3 img { aspect-ratio: auto; transform: none; object-position: 50% 55%; }
.stage.u3 .collagen { left: 27%; width: 46%; height: 70%; bottom: 20%; }
.stage.u3 .mushroom { left: 6%; width: 34%; height: 62%; bottom: 5%; }
.stage.u3 .inositol { left: 56%; right: auto; width: 40%; height: 56%; bottom: 5%; }
@media (min-width: 860px) {
  .stage.u3 .collagen { left: 26%; width: 48%; height: 60%; bottom: 24%; }
  .stage.u3 .mushroom { left: 8%; width: 34%; height: 52%; bottom: 10%; }
  .stage.u3 .inositol { left: 55%; width: 40%; height: 46%; bottom: 10%; }
}
/* product placement by centre point: --cx/--cy = product centre, --w = render width (mobile --wm) */
.hero-card .stage.u2 img, .hero-card .stage.u3 img { width: var(--wm); height: auto; left: calc(var(--cx) - var(--wm) / 2); top: var(--cy); bottom: auto; right: auto; transform: translateY(-50%); object-fit: contain; aspect-ratio: auto; }
@media (min-width: 860px) { .hero-card .stage.u2 img, .hero-card .stage.u3 img { width: var(--w); left: calc(var(--cx) - var(--w) / 2); } }
.stage.u2 .b1 { --w: 120%; --wm: 74%; --cx: 38%; --cy: 52%; }
.stage.u2 .b2 { --w: 110%; --wm: 68%; --cx: 63%; --cy: 57%; }
.stage.u3 .collagen { --w: 100%; --wm: 62%; --cx: 50%; --cy: 40%; }
.stage.u3 .mushroom { --w: 80%; --wm: 52%; --cx: 25%; --cy: 63%; }
.stage.u3 .inositol { --w: 90%; --wm: 58%; --cx: 75%; --cy: 65%; }
.stage.u3 .collagen { --w: 86%; --cy: 38%; }
.stage.u3 .mushroom { --w: 70%; --cx: 24%; --cy: 62%; }
.stage.u3 .inositol { --w: 78%; --cx: 74%; --cy: 64%; }
@media (max-width: 859px) {
  .stage.u2 .tag { display: none; }
  .hero-card .stage.u3 { height: 262px; }
  .stage.u3 .collagen { --cy: 33%; }
  .stage.u3 .mushroom { --cy: 52%; }
  .stage.u3 .inositol { --cy: 54%; }
  .stage.u3 .tag { left: 50%; right: auto; transform: translateX(-50%); bottom: 10px; max-width: none; white-space: nowrap; font-size: .74rem; padding: 6px 10px; }
}
@media (max-width: 859px) { .hero-card .stage.u1, .hero-card .stage.u2 { height: 222px; } .hero-card .stage.u1, .hero-card .stage.u2 { height: 214px; } }
@media (max-width: 859px) { .story .media .photo-tall { aspect-ratio: 4 / 3.4; } }
/* U1 90-day routine + final buy box breathing room */
.days90 { display: grid; gap: 14px; grid-template-columns: 1fr; margin: 18px 0 10px; }
.days90 .d { background: #fff; border-radius: 16px; box-shadow: var(--shadow); padding: 18px 20px; border-top: 4px solid var(--pink); }
.days90 .d:nth-child(2) { border-top-color: var(--teal); }
.days90 .d:nth-child(3) { border-top-color: var(--navy); }
.days90 .when { font: 700 .74rem/1 var(--font-head); letter-spacing: .12em; text-transform: uppercase; color: var(--pink); }
.days90 h3 { font-size: 1.1rem; margin: 6px 0 4px; }
.days90 p { margin: 0; font-size: .95rem; line-height: 1.6; }
@media (min-width: 760px) { .days90 { grid-template-columns: repeat(3, 1fr); } }
.repeat .receipt { margin-bottom: 18px; }
.repeat .receipt li.total small { margin-top: 3px; }
.repeat .receipt li.total small.save { margin-top: 5px; }