/* =============================================================
   upsell.css — bespoke styles for the post-purchase upsell pages
   Reuses the Qure offer-page system (general.css tokens, Canela /
   TT Commons fonts, .container, .btn--primary, footer.css).
   Only the funnel-specific chrome lives here.
   Design source: Figma "Micro-Infusion — Desktop" (Member Offer).
   ============================================================= */

/* let the long upsell page scroll (general.css sets body{overflow:hidden}) */
html { overflow-x: clip; }
body.up-page { overflow-x: clip; padding-top: 0; background: #fff; }

.up-main { display: block; padding-top: 56px; } /* offset the fixed topbar */

/* shared section rhythm */
.up-section { padding: 56px 0; }
.up-eyebrow {
  text-transform: uppercase; letter-spacing: .14em; font-size: 12px;
  color: var(--charcoal-light); text-align: center; margin: 0 0 10px;
}
.up-h2 {
  font-family: var(--heading-font-family); font-weight: 300;
  font-size: clamp(28px, 4vw, 44px); line-height: 1.1; color: var(--qure-charcoal);
  text-align: center; margin: 0 0 8px;
}
.up-sub { text-align: center; color: var(--charcoal-light); font-size: 16px; margin: 0 auto; max-width: 620px; }

/* ===================== 1. STICKY PROGRESS TOP BAR ===================== */
.up-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: #fff; border-bottom: 1px solid #ececed;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.up-topbar__in {
  max-width: 1232px; margin: 0 auto; padding: 13px 24px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
}
.up-topbar__logo { justify-self: start; display: inline-flex; align-items: center; color: var(--qure-charcoal); text-decoration: none; }
.up-topbar__logo:hover { text-decoration: none; }
.up-topbar__logo .e-icon { font-size: 30px; }

/* steps live in the centre grid column → always centred regardless of logo width */
.up-steps { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; }
.up-step { display: inline-flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 999px; white-space: nowrap; }
.up-step__ico {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid #d8d9da; color: #b6b7b9; background: #fff;
}
.up-step__ico svg { width: 14px; height: 14px; }
.up-step__label {
  text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 500;
  color: #b6b7b9;
}
.up-step__sep { width: 26px; height: 1px; background: #dcddde; flex: 0 0 auto; }

/* done */
.up-step.is-done .up-step__ico { background: var(--qure-charcoal); border-color: var(--qure-charcoal); color: #fff; }
.up-step.is-done .up-step__label { color: var(--qure-charcoal); }
/* active — peach pill */
.up-step.is-active { background: #fde7df; }
.up-step.is-active .up-step__ico { background: var(--qure-charcoal); border-color: var(--qure-charcoal); color: #fff; }
.up-step.is-active .up-step__label { color: var(--qure-charcoal); }

/* ===================== 1b. PROCESSING WARNING BANNER (item #5) =====================
   "IMPORTANT — do not close this window or press Back, your order is still
   processing." Sits at the very top of the white content area on every upsell page,
   styled to match Luke's design: cream rounded box + sage hexagon stop-hand icon. */
.up-warning-wrap { display: flex; justify-content: center; padding: 26px 24px 0; }
.up-warning {
  display: flex; align-items: center; gap: 16px;
  width: 100%; max-width: 640px;
  background: #f4f6f3; border: 1px solid #e4e8e2; border-radius: 14px;
  padding: 16px 20px;
}
.up-warning__ico {
  flex: 0 0 46px; width: 46px; height: 46px; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
}
.up-warning__ico .hex { position: absolute; inset: 0; width: 46px; height: 46px; color: #d4e4d9; }  /* sage hexagon backplate */
.up-warning__ico .hand { position: relative; width: 22px; height: 22px; z-index: 1; color: #4f8268; }  /* stop-hand icon */
.up-warning__body { line-height: 1.4; }
.up-warning__title {
  font-weight: 700; color: var(--qure-charcoal); font-size: 14px;
  letter-spacing: .02em; margin-bottom: 2px;
}
.up-warning__text { font-size: 13.5px; color: #5a5e61; }

/* ===================== 2. ORDER-CONFIRMED NOTICE ===================== */
.up-notice-wrap { display: flex; justify-content: center; padding: 22px 16px 0; }
.up-notice {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid #e7e8e9; border-radius: 14px;
  box-shadow: 0 8px 24px rgba(33,36,40,.08); padding: 12px 14px; max-width: 460px; width: 100%;
}
.up-notice__ico { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: #e8f4ef; color: var(--color-green); display: inline-flex; align-items: center; justify-content: center; }
.up-notice__ico svg { width: 16px; height: 16px; }
.up-notice__body { flex: 1 1 auto; line-height: 1.3; }
.up-notice__title { font-weight: 600; color: var(--qure-charcoal); font-size: 15px; }
.up-notice__meta { font-size: 13px; color: var(--charcoal-light); }
.up-notice__meta b { color: #4a4d50; font-weight: 600; }
.up-notice__close { flex: 0 0 auto; background: none; border: 0; color: #b6b7b9; cursor: pointer; font-size: 18px; line-height: 1; padding: 4px; }

/* ===================== 3. HERO HEADING ===================== */
.up-hero-head { text-align: center; padding: 34px 16px 8px; max-width: 760px; margin: 0 auto; }
.up-hero-head h1 {
  font-family: var(--heading-font-family); font-weight: 300;
  font-size: clamp(30px, 4.4vw, 48px); line-height: 1.08; color: var(--qure-charcoal); margin: 0 0 14px;
}
.up-hero-head .up-hero-strong { font-weight: 700; color: var(--qure-charcoal); font-size: 18px; margin: 0 0 6px; }
.up-hero-head .up-hero-muted { color: var(--charcoal-light); font-size: 16px; margin: 0; }

/* ===================== 4. VSL + OFFER HERO ===================== */
.up-offer { max-width: 1000px; margin: 30px auto 0; padding: 0 24px; }
.up-offer__grid { display: grid; grid-template-columns: 1.18fr 1fr; gap: 16px; align-items: stretch; }

/* The real VSL files are vertical 9:16 (talking-head UGC). Size the stage to the
   video's true aspect ratio so the subject is never cropped — the old wide stage
   used object-fit:cover on a portrait video, so only the eyes showed. The stage is
   portrait, centred, and capped so it doesn't dominate the page. */
.up-video {
  position: relative; border-radius: 16px; overflow: hidden;
  width: 100%; max-width: 360px; aspect-ratio: 9 / 16; margin: 0 auto;
  background: #1c1f22 center/cover no-repeat;
  background-image: var(--up-vsl-img, linear-gradient(135deg,#2a2f34,#14171a));
  display: flex; align-items: center; justify-content: center;
}
.up-video__badge {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  background: var(--color-orange); color: #fff; font-weight: 600; font-size: 12px;
  letter-spacing: .03em; text-transform: uppercase; padding: 7px 12px; border-radius: 8px;
}
.up-video__play {
  width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.92);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  border: 0; box-shadow: 0 6px 24px rgba(0,0,0,.25); transition: transform .2s;
}
.up-video__play:hover { transform: scale(1.06); }
.up-video__play svg { width: 22px; height: 22px; margin-left: 3px; color: var(--qure-charcoal); }
.up-video__ph { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.55); font-size: 11px; letter-spacing: .04em; }

.up-card {
  background: var(--qure-charcoal); color: #fff; border-radius: 16px; padding: 30px 30px 26px;
  display: flex; flex-direction: column;
}
.up-card__rating { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #cfd1d3; margin-bottom: 10px; }
.up-stars { color: #f5c451; letter-spacing: 2px; font-size: 14px; }
.up-card__name { font-family: var(--heading-font-family); font-weight: 300; font-size: 30px; line-height: 1.1; margin: 0 0 12px; color: #fff; }
.up-card__price { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.up-card__now { font-size: 30px; font-weight: 700; color: #fff; }
.up-card__was { color: #8b8f93; text-decoration: line-through; font-size: 17px; }
.up-card__save { background: var(--color-orange); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 6px; letter-spacing: .02em; }
.up-card__benefits { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 10px; }
.up-card__benefits li { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; color: #d6d8da; line-height: 1.35; }
.up-card__benefits svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 1px; color: #8fd0bb; }
.up-card__trust { display: flex; gap: 14px; padding: 14px 0 18px; border-top: 1px solid rgba(255,255,255,.1); }
.up-trust-item { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; text-align: center; }
.up-trust-item svg { width: 20px; height: 20px; color: #cfd1d3; }
.up-trust-item span { font-size: 10.5px; color: #a9acae; line-height: 1.25; }
.up-card__cta {
  width: 100%; background: #fff; color: var(--qure-charcoal); border: 0; border-radius: 999px;
  font-weight: 600; font-size: 15px; letter-spacing: .04em; text-transform: uppercase;
  padding: 15px; cursor: pointer; transition: background .2s, transform .1s; margin-top: auto;
}
.up-card__cta:hover { background: #e9eceb; }
.up-card__cta:disabled { opacity: .5; cursor: default; }
.up-card__skip { background: none; border: 0; color: #b9bcbe; font-size: 13px; padding: 12px 0 0; cursor: pointer; align-self: center; }
.up-card__skip:hover { color: #fff; }

/* ===================== 5. SUPPLY SELECTOR ===================== */
/* Design: a clearly separate block below the main offer — generous top spacing,
   larger heading, and a raised/scaled featured centre card with grey image panels. */
.up-supply { max-width: 1080px; margin: 0 auto; padding: 64px 24px 0; }
.up-supply .up-eyebrow { margin-bottom: 14px; }
.up-supply .up-h2 { font-size: clamp(32px, 4.4vw, 50px); margin-bottom: 12px; }
.up-supply .up-sub { font-size: 16.5px; }
.up-supply__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; align-items: center; }
.up-pcard {
  position: relative; background: #fff; border: 1px solid #e7e8e9; border-radius: 16px;
  padding: 24px 22px 26px; display: flex; flex-direction: column; transition: border-color .2s, box-shadow .2s;
}
/* featured centre card — raised + scaled, heavier frame + shadow (matches design) */
.up-pcard.is-featured {
  border: 2px solid var(--qure-charcoal); box-shadow: 0 22px 50px rgba(33,36,40,.16);
  transform: scale(1.06); z-index: 2; background: #fff;
}
.up-pcard__badge {
  position: absolute; top: 16px; right: 16px; background: var(--color-orange); color: #fff;
  font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 7px;
  display: inline-flex; align-items: center; gap: 5px;
}
/* grey rounded image panel behind the bottle render (design) */
.up-pcard__img {
  height: 210px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
  background: var(--bg-light); border-radius: 12px; padding: 16px;
}
.up-pcard__img img { max-height: 100%; max-width: 100%; object-fit: contain; }
.up-pcard__rating { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--charcoal-light); margin-bottom: 6px; }
.up-pcard__name { font-weight: 600; color: var(--qure-charcoal); font-size: 16px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.up-pcard__now { color: var(--color-orange); font-weight: 700; }
.up-pcard__was { color: #b6b7b9; text-decoration: line-through; font-size: 14px; font-weight: 400; }
.up-pcard__meta { font-size: 13px; color: var(--charcoal-light); margin: 4px 0 16px; }
.up-pcard__meta b { color: #4a4d50; font-weight: 600; }
.up-pcard__cta {
  margin-top: auto; width: 100%; background: var(--qure-charcoal); color: #fff; border: 0;
  border-radius: 999px; font-weight: 600; font-size: 14px; padding: 13px; cursor: pointer; transition: background .2s;
}
.up-pcard__cta:hover { background: #34383c; }
.up-pcard__cta:disabled { opacity: .5; cursor: default; }

/* full-width skip bar */
.up-skipbar {
  display: block; width: 100%; max-width: 1080px; margin: 22px auto 0;
  background: #fff; border: 1px solid #e7e8e9; border-radius: 999px; padding: 16px;
  text-align: center; font-weight: 500; color: var(--qure-charcoal); cursor: pointer; font-size: 15px;
}
.up-skipbar:hover { background: var(--bg-light); }

/* ===================== 6. TRUST MARQUEE ===================== */
.up-marquee { border-top: 1px solid #ececed; border-bottom: 1px solid #ececed; overflow: hidden; margin-top: 48px; }
.up-marquee__track {
  display: flex; gap: 28px 40px; align-items: center; justify-content: center; flex-wrap: wrap;
  padding: 18px 24px; max-width: 1100px; margin: 0 auto;
}
.up-badge { display: inline-flex; align-items: center; gap: 8px; color: #6c6f72; font-size: 13px; flex: 0 0 auto; }
.up-badge svg { width: 18px; height: 18px; color: #9a9d9f; }

/* ===================== 7. BOARD-CERTIFIED EXPERTS ===================== */
.up-experts { background: var(--bg-light); }
.up-experts__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 34px; max-width: 980px; margin-left: auto; margin-right: auto; }
.up-doc { background: #fff; border: 1px solid #ededee; border-radius: 14px; padding: 22px 16px; text-align: center; }
.up-doc__img { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; margin: 0 auto 12px; display: block; background: #e9eceb; }
.up-doc__name { font-weight: 600; color: var(--qure-charcoal); font-size: 15px; }
.up-doc__title { font-size: 12.5px; color: var(--charcoal-light); margin-top: 2px; }

/* ===================== CC API log widget (debug only — add ?debug to any page) ===================== */
#logT, #log { display: none; }                        /* hidden for customers; shown only in debug mode */
body.debug #logT { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: block; background: var(--qure-charcoal); color: #fff;
  border: 0; border-radius: 999px; padding: 10px 16px; font-size: 13px; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.2); }
#logT b { background: var(--color-orange); border-radius: 999px; padding: 1px 7px; margin-left: 6px; }
body.debug #log { position: fixed; right: 16px; bottom: 64px; z-index: 80; width: 340px; max-height: 50vh; overflow: auto;
  background: #14171a; color: #cfd1d3; border-radius: 12px; padding: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.35); font-size: 12px; }
body.debug #log.show { display: block; }
#log h4 { color: #fff; margin: 0 0 8px; font-size: 13px; }
#logBody div { padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.07); font-family: ui-monospace, Menlo, monospace; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 900px) {
  .up-offer__grid { grid-template-columns: 1fr; }
  .up-supply__grid { grid-template-columns: 1fr; }
  .up-pcard.is-featured { transform: none; }   /* no scale in single-column → avoids overflow */
  .up-experts__grid { grid-template-columns: repeat(2, 1fr); }
  .up-topbar__in { display: flex; padding: 11px 16px; gap: 12px; }
  .up-steps { flex: 1 1 auto; overflow-x: auto; justify-content: flex-start; -ms-overflow-style: none; scrollbar-width: none; }
  .up-steps::-webkit-scrollbar { display: none; }
  .up-step__sep { width: 16px; }
}
@media (max-width: 560px) {
  .up-step__label { display: none; }
  .up-step.is-active .up-step__label { display: inline; }
  .up-experts__grid { grid-template-columns: 1fr 1fr; }
}

/* =============================================================
   CHECKOUT + THANK-YOU — same Qure system as the upsells
   (shared topbar, Canela, footer; clean form + summary)
   ============================================================= */
.co2-shell { max-width: 1080px; margin: 0 auto; padding: 18px 24px 44px; display: grid; grid-template-columns: 1.12fr .88fr; gap: 36px; align-items: start; }
.co2-trust { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; padding: 10px 24px 0; }
.co2-trust span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--charcoal-light); }
.co2-trust svg { width: 14px; height: 14px; color: #9a9d9f; }

.co2-block { margin-bottom: 15px; }
.co2-block h2 { font-family: var(--heading-font-family); font-weight: 300; font-size: 19px; color: var(--qure-charcoal); margin: 0 0 7px; }
.co2-block .co2-sub { font-size: 13px; color: var(--charcoal-light); margin: -3px 0 10px; }

/* labels + inputs */
.co2-label { display: block; font-size: 12px; color: var(--charcoal-light); margin: 7px 0 3px; }
.co2-input, .co2-select { width: 100%; padding: 10px 13px; border: 1px solid #dfe0e0; border-radius: 9px; font-family: var(--base-font-family); font-size: 14px; color: var(--qure-charcoal); background: #fff; transition: border-color .15s; }
.co2-input:focus, .co2-select:focus { outline: none; border-color: var(--qure-charcoal); }
.co2-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* treatment pills */
.co2-prods { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.co2-prod { padding: 13px; border: 1px solid #dfe0e0; border-radius: 10px; background: #fff; font-size: 14px; font-weight: 500; color: var(--qure-charcoal); cursor: pointer; text-align: center; transition: border-color .15s, box-shadow .15s; }
.co2-prod.sel { border-color: var(--qure-charcoal); box-shadow: inset 0 0 0 1px var(--qure-charcoal); }

/* plan radios */
.co2-plan { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid #dfe0e0; border-radius: 12px; cursor: pointer; margin-bottom: 10px; transition: border-color .15s, box-shadow .15s; }
.co2-plan.sel { border-color: var(--qure-charcoal); box-shadow: inset 0 0 0 1px var(--qure-charcoal); }
.co2-radio { width: 20px; height: 20px; border: 2px solid #cfd0d1; border-radius: 50%; flex: 0 0 20px; position: relative; }
.co2-plan.sel .co2-radio { border-color: var(--qure-charcoal); }
.co2-plan.sel .co2-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--qure-charcoal); }
.co2-plan__body { flex: 1; }
.co2-plan__name { font-weight: 600; color: var(--qure-charcoal); font-size: 15px; display: flex; align-items: center; gap: 8px; }
.co2-plan__tag { background: var(--qure-charcoal); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 2px 7px; border-radius: 5px; text-transform: uppercase; }
.co2-plan__meta { font-size: 12.5px; color: var(--charcoal-light); margin-top: 2px; }
.co2-plan__price { text-align: right; }
.co2-plan__price b { font-size: 17px; color: var(--qure-charcoal); }
.co2-plan__price s { display: block; font-size: 12px; color: #b6b7b9; }

/* urgency */
.co2-urgency { display: flex; align-items: center; gap: 9px; background: #fff5f1; border: 1px solid #ffd9cc; border-radius: 9px; padding: 9px 13px; font-size: 13px; color: #8a3a22; margin-bottom: 14px; }
.co2-urgency b { color: var(--color-orange); }

/* card form (Airwallex iframe drops into #airwallex-card at go-live; native inputs are demo-only) */
.co2-pay-secure { font-size: 12.5px; color: var(--charcoal-light); margin: 0 0 7px; display: flex; align-items: center; gap: 6px; }
.co2-cards { display: flex; gap: 6px; margin-bottom: 8px; }
.co2-cards img { height: 20px; }
.co2-cardbox { border: 1px solid #dfe0e0; border-radius: 9px; overflow: hidden; }
.co2-cardrow { display: flex; align-items: center; gap: 8px; padding: 11px 14px; }
.co2-cardrow .lock { color: var(--color-green); flex: 0 0 auto; display: inline-flex; }
.co2-cardrow input { border: 0; outline: 0; flex: 1; font-family: var(--base-font-family); font-size: 15px; color: var(--qure-charcoal); background: transparent; }
.co2-cardgrid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #ececed; }
.co2-cardgrid input { border: 0; outline: 0; padding: 11px 14px; font-family: var(--base-font-family); font-size: 15px; color: var(--qure-charcoal); }
.co2-cardgrid input:first-child { border-right: 1px solid #ececed; }
#airwallex-card:empty { display: none; }  /* when Airwallex mounts, it fills this; native form hides */

.co2-paynow { width: 100%; background: var(--qure-charcoal); color: #fff; border: 0; border-radius: 999px; padding: 14px; font-weight: 600; font-size: 16px; letter-spacing: .02em; cursor: pointer; margin-top: 14px; transition: background .2s; }
.co2-paynow:hover { background: #34383c; }
.co2-paynow:disabled { opacity: .55; cursor: default; }
.co2-fineprint { font-size: 12.5px; color: var(--charcoal-light); text-align: center; margin: 8px 0 0; }

/* express wallets (Apple Pay / Google Pay) — real buttons render via Airwallex drop-in at go-live */
.co2-express { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.co2-wallet { display: flex; align-items: center; justify-content: center; gap: 6px; height: 46px; border-radius: 9px; border: 0; background: #000; color: #fff; cursor: pointer; font-weight: 600; font-size: 16px; transition: opacity .15s; }
.co2-wallet:hover { opacity: .85; }
.co2-wallet svg { height: 19px; width: auto; }
.co2-or { display: flex; align-items: center; gap: 12px; color: var(--charcoal-light); font-size: 12px; margin: 0 0 14px; }
.co2-or::before, .co2-or::after { content: ""; flex: 1; height: 1px; background: #e7e8e9; }

/* payment method tabs (Card / Klarna) */
.co2-methods { display: flex; gap: 8px; margin-bottom: 12px; }
.co2-method { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 11px; border: 1px solid #dfe0e0; border-radius: 9px; background: #fff; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--qure-charcoal); transition: border-color .15s, box-shadow .15s; }
.co2-method.sel { border-color: var(--qure-charcoal); box-shadow: inset 0 0 0 1px var(--qure-charcoal); }
.co2-klarna-mark { background: #ffb3c7; color: #0b051d; font-weight: 800; padding: 1px 7px; border-radius: 5px; font-size: 13px; letter-spacing: -.02em; }
.co2-klarna { border: 1px solid #f3c6d2; border-radius: 9px; padding: 15px; background: #fff1f5; }
.co2-klarna__head { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #0b051d; margin-bottom: 6px; }
.co2-klarna p { font-size: 13px; color: #4a4d50; margin: 0; line-height: 1.45; }
.co2-klarna b { color: var(--qure-charcoal); }

/* right: order summary */
.co2-summary { position: sticky; top: 84px; background: var(--bg-light); border-radius: 16px; padding: 26px; }
.co2-summary h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--charcoal-light); margin: 0 0 16px; }
.co2-line { display: flex; gap: 14px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid #e7e8e9; margin-bottom: 16px; }
.co2-line__thumb { width: 60px; height: 60px; border-radius: 10px; background: #fff; border: 1px solid #e7e8e9; flex: 0 0 60px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.co2-line__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.co2-line__name { font-weight: 600; font-size: 14px; color: var(--qure-charcoal); }
.co2-line__meta { font-size: 12.5px; color: var(--charcoal-light); margin-top: 2px; }
.co2-line__price { margin-left: auto; font-weight: 600; color: var(--qure-charcoal); }
.co2-disc { display: flex; gap: 8px; margin-bottom: 16px; }
.co2-disc input { flex: 1; padding: 11px 14px; border: 1px solid #dfe0e0; border-radius: 8px; font-size: 14px; }
.co2-disc button { padding: 11px 18px; border: 0; border-radius: 8px; background: #e6e7e8; font-weight: 600; font-size: 14px; cursor: pointer; }
.co2-trow { display: flex; justify-content: space-between; font-size: 14px; color: #4a4d50; padding: 5px 0; }
.co2-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 20px; font-weight: 700; color: var(--qure-charcoal); padding-top: 12px; margin-top: 8px; border-top: 1px solid #e7e8e9; }
.co2-total .cur { font-size: 12px; color: var(--charcoal-light); font-weight: 500; margin-right: 6px; }
.co2-recur { font-size: 12.5px; color: var(--charcoal-light); margin-top: 8px; }

/* ===================== THANK-YOU ===================== */
.ty-wrap { max-width: 660px; margin: 0 auto; padding: 60px 24px 72px; text-align: center; }
.ty-badge { width: 64px; height: 64px; border-radius: 50%; background: #e8f4ef; color: var(--color-green); display: inline-flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.ty-badge svg { width: 32px; height: 32px; }
.ty-h1 { font-family: var(--heading-font-family); font-weight: 300; font-size: clamp(30px,4vw,42px); color: var(--qure-charcoal); margin: 0 0 8px; }
.ty-sub { color: var(--charcoal-light); font-size: 16px; margin: 0 0 28px; }
.ty-card { background: var(--bg-light); border-radius: 16px; padding: 26px; text-align: left; margin-bottom: 18px; }
.ty-card h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--charcoal-light); margin: 0 0 14px; }
.ty-li { display: flex; justify-content: space-between; font-size: 14px; color: #4a4d50; padding: 7px 0; }
.ty-li .sub { font-size: 11px; color: var(--color-green); border: 1px solid #bfe3d4; border-radius: 5px; padding: 1px 6px; margin-left: 6px; }
.ty-li.tot { font-weight: 700; color: var(--qure-charcoal); font-size: 16px; border-top: 1px solid #e7e8e9; margin-top: 8px; padding-top: 12px; }
.ty-next { font-size: 14px; color: var(--charcoal-light); line-height: 1.5; }

@media (max-width: 900px) {
  .co2-shell { grid-template-columns: 1fr; gap: 28px; }
  .co2-summary { position: static; }
}

/* =============================================================
   UPSELL ENHANCEMENTS — added for upsell-enhance.js
   (A) video-first reveal / lock / countdown + real <video> element
   (B) marketing email-capture popup
   Consistent with the Qure system above (charcoal #212428,
   orange #ff5429, Canela headings, TT Commons body).
   ============================================================= */

/* ---- real <video> in the VSL stage (replaces the gradient poster) ---- */
/* contain (not cover) so the full subject always shows; the stage already matches
   the video's 9:16 ratio, so there are no bars — contain is the no-crop safety net. */
.up-video__media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: #14171a; z-index: 0;
}
/* keep the badge + play button above the video */
.up-video__badge, .up-video__play, .up-video__ph { z-index: 2; }
/* once playing, fade the big centre play button out of the way */
.up-video.is-playing .up-video__play { opacity: 0; pointer-events: none; transition: opacity .25s; }

/* ---- (item #2) UNMUTE / "tap for sound" affordance ----
   The VSL autoplays muted (browser policy). We surface a clear "tap for sound"
   control + make the whole stage clickable to unmute. Standard VSL pattern. */
.up-video { cursor: pointer; }                 /* the whole stage unmutes on click */
.up-video__sound {
  position: absolute; z-index: 3; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  background: rgba(20,23,26,.82); color: #fff; border: 0; cursor: pointer;
  font-family: var(--base-font-family); font-weight: 600; font-size: 13.5px; letter-spacing: .01em;
  padding: 9px 16px; border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.3);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  animation: up-sound-pulse 1.8s ease-in-out infinite;
}
.up-video__sound svg { width: 17px; height: 17px; flex: 0 0 17px; }
.up-video__sound:hover { background: rgba(20,23,26,.95); }
/* hidden until the video is actually playing-but-muted, and once unmuted */
.up-video__sound { display: none; }
.up-video.is-playing.is-muted .up-video__sound { display: inline-flex; }
@keyframes up-sound-pulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(-50%) scale(1.05); }
}

/* ---- (A) lock / reveal ---- */
/* JS adds .is-locked to .up-lockable sections until the VSL is watched.
   No-JS visitors never get .is-locked, so the offer stays visible for them. */
.up-lockable.is-locked { display: none !important; }

/* small countdown chip under the video while locked */
.up-countdown {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 14px auto 0; padding: 9px 16px; border-radius: 999px;
  background: #fff5f1; border: 1px solid #ffd9cc; color: #8a3a22;
  font-size: 13px; font-weight: 600; letter-spacing: .01em;
}
.up-countdown::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-orange); box-shadow: 0 0 0 0 rgba(255,84,41,.5);
  animation: up-pulse 1.4s infinite;
}
.up-countdown.is-hidden { display: none; }
.up-countdown-wrap { text-align: center; }
@keyframes up-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,84,41,.45); }
  70%  { box-shadow: 0 0 0 7px rgba(255,84,41,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,84,41,0); }
}

/* gentle entrance when the offer + supply reveal */
body.up-revealed .up-offer,
body.up-revealed .up-supply { animation: up-reveal .45s ease both; }
@keyframes up-reveal {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---- (B) marketing email popup ---- */
body.up-pop-open { overflow: hidden; }
.up-pop {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(20,23,26,.62); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .22s ease;
}
.up-pop.is-open { opacity: 1; }
.up-pop__card {
  position: relative; width: 100%; max-width: 520px;
  background: #fff; border-radius: 20px; padding: 40px 38px 34px;
  text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.35);
  transform: translateY(18px) scale(.98); transition: transform .24s ease;
}
.up-pop.is-open .up-pop__card { transform: none; }
.up-pop__close {
  position: absolute; top: 14px; right: 16px; background: none; border: 0;
  color: #b6b7b9; font-size: 26px; line-height: 1; cursor: pointer; padding: 4px;
}
.up-pop__close:hover { color: var(--qure-charcoal); }
.up-pop__eyebrow {
  text-transform: uppercase; letter-spacing: .14em; font-size: 11.5px; font-weight: 600;
  color: var(--color-orange); margin: 0 0 12px;
}
.up-pop__title {
  font-family: var(--heading-font-family); font-weight: 300;
  font-size: clamp(24px, 3.4vw, 32px); line-height: 1.12; color: var(--qure-charcoal); margin: 0 0 12px;
}
.up-pop__sub { font-size: 15px; color: var(--charcoal-light); line-height: 1.45; margin: 0 auto 22px; max-width: 400px; }
.up-pop__form { display: flex; flex-direction: column; gap: 10px; max-width: 380px; margin: 0 auto; }
.up-pop__input {
  width: 100%; padding: 14px 16px; border: 1px solid #dfe0e0; border-radius: 11px;
  font-family: var(--base-font-family); font-size: 16px; color: var(--qure-charcoal); background: #fff;
  transition: border-color .15s;
}
.up-pop__input:focus { outline: none; border-color: var(--qure-charcoal); }
.up-pop__input.is-invalid { border-color: var(--color-orange); box-shadow: 0 0 0 1px var(--color-orange); }
.up-pop__cta {
  width: 100%; background: var(--qure-charcoal); color: #fff; border: 0; border-radius: 999px;
  font-weight: 600; font-size: 15px; letter-spacing: .02em; padding: 15px; cursor: pointer; transition: background .2s;
}
.up-pop__cta:hover { background: #34383c; }
.up-pop__fine { font-size: 12px; color: var(--charcoal-light); margin: 12px 0 0; }
.up-pop__continue { max-width: 380px; margin: 20px auto 0; }
.up-pop__check {
  width: 60px; height: 60px; border-radius: 50%; background: #e8f4ef; color: var(--color-green);
  display: inline-flex; align-items: center; justify-content: center; margin: 0 auto 16px;
}
.up-pop__check svg { width: 30px; height: 30px; }

@media (max-width: 560px) {
  .up-pop__card { padding: 34px 22px 28px; }
}