/* Upsell chrome — shared across all AI-Method upsell pages.
   Two components: the order-progress breadcrumb + the skip mechanism.
   Sandbox-prototyped (Designer lane). Promotes to traffic-core later so
   every upsell + future funnel inherits it. Palette matches the colorbands
   page: dark blue #15396b, light blue #e9f1fb, action gold #f5a623, blue link
   #2f6fb5, confirm green #2e7d32. */

/* ─────────────────────────── breadcrumb tracker ─────────────────────────── */
/* Book Ordered ──●──○──○── Order Complete   (dots = the funnel's upsells)
   "Customize Order" label centered beneath. Set step by adding
   .is-step-1 / .is-step-2 / .is-step-3 on .ubcrumb (lights dots up to N). */
.ubcrumb{ max-width:720px; margin:0 auto; padding:20px 18px 12px; }
.ubcrumb__row{ display:flex; align-items:center; gap:12px; }
.ubcrumb__cap{ font-size:12.5px; font-weight:800; letter-spacing:.02em;
  color:#9aa5b1; white-space:nowrap; }
.ubcrumb__cap--start{ color:#15396b; }
.ubcrumb__cap--start::before{ content:"\2713"; color:#2e7d32; font-weight:900; margin-right:5px; }
.ubcrumb__track{ display:flex; align-items:center; flex:1 1 auto; min-width:80px; }
.ubcrumb__seg{ flex:1 1 auto; height:3px; background:#dbe3ec; }
.ubcrumb__dot{ flex:none; width:14px; height:14px; border-radius:50%;
  background:#fff; border:2.5px solid #dbe3ec; }
/* lit state — the compose helper adds --fill to every seg/dot up to the current
   upsell, and --current to the active dot (so step N is purely data-driven). */
.ubcrumb__seg--fill{ background:#f5a623; }
.ubcrumb__dot--fill{ background:#f5a623; border-color:#f5a623; }
.ubcrumb__dot--current{ box-shadow:0 0 0 4px rgba(245,166,35,.20); }
.ubcrumb__label{ text-align:center; margin-top:8px; font-size:11.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:#6b7785; }

/* ─────────────────────────── skip mechanism ─────────────────────────────── */
/* Congrats line → "this is for people who __; if not, skip" → arrow → skip link.
   Sits ABOVE the hero on every upsell. */
.uskip{ max-width:640px; margin:10px auto 26px; padding:0 18px; text-align:center; }
.uskip__congrats{ font-size:17px; font-weight:800; color:#15396b; margin:0 0 6px; }
.uskip__qual{ font-size:15px; line-height:1.55; color:#46535f; margin:0 auto 10px; max-width:520px; }
.uskip__qual strong{ color:#15396b; }
.uskip__arrow{ line-height:0; margin:2px 0 8px; display:flex; justify-content:center;
  animation:uskip-bob 1.7s ease-in-out infinite; }
@keyframes uskip-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(5px); } }
.uskip__link{ display:inline-block; font-size:14px; font-weight:700; color:#2f6fb5;
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px; }
.uskip__link:hover{ color:#1d4f86; }

/* the skip link that rides BELOW each package-selector / CTA instance */
.uskip-inline{ text-align:center; margin:12px 0 4px; }
.uskip-inline a{ font-size:13.5px; font-weight:600; color:#6b7785;
  text-decoration:underline; text-underline-offset:2px; }
.uskip-inline a:hover{ color:#2f6fb5; }

/* ── video-timer gate (TCOR-016) ──────────────────────────────────────────── */
/* The locked/unlocked states of a piece an upsell page declared gated. The core
   (assets/upsell-gate.js) adds `.ugate` + `.ugate--locked` to the declared piece
   and keeps the countdown caption in `data-ugate-msg`; at the threshold it swaps
   to `.ugate--unlocked`. Nothing here applies on its own — no JS (or a JS that
   never ran) means no classes, so an ungated page and a failed gate both render
   exactly as they do today. The content stays in the DOM behind the veil: this is
   a conversion device, not a security boundary. */
.ugate--locked{ position:relative; min-height:92px; overflow:hidden;
  border-radius:10px; background:#f4f7fb; border:1px dashed #c3d2e6;
  color:transparent; pointer-events:none; }
/* children keep their space (no layout jump at the unlock) but show nothing */
.ugate--locked > *{ visibility:hidden; }
.ugate--locked::after{ content:attr(data-ugate-msg); position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:14px 18px; font-size:15px; font-weight:800; line-height:1.4;
  letter-spacing:.01em; color:#15396b; }
.ugate--unlocked{ animation:ugate-reveal .45s ease-out both; }
@keyframes ugate-reveal{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .ugate--unlocked{ animation:none; } }

/* ── ONECLICK upsell button (TCOR-008): label + visible price on the main line, sublabel beneath ── */
.cta-btn.oc-btn{ display:flex; flex-direction:column; align-items:center; gap:3px; line-height:1.25; }
.oc-btn .oc-price{ font-weight:800; }
.oc-btn .oc-sub{ display:block; font-size:.82em; font-weight:500; opacity:.85; }