/* HealthRX.com personal video plan, in the HealthRX.com brand (owner, 2026-10-30: "it doesnt even have the logo colors
   with healthrx name at the top"): the serif healthrx.com wordmark with "rx" in the brand blue, navy ink, brand blue
   (lib/design.ts PALETTE, hue 260) for actions and its tints for surfaces, a calm green only for the guarantee, savings
   and checks, Teodor headings over Figtree body text. The same look as the Rx checkout (app/rx-checkout/RxCheckoutV2.tsx,
   components/checkout/checkout-assurance.module.css). Light, calm, clinical. Mobile first. */
@font-face { font-family: "Figtree"; src: url("/fonts/figtree/Figtree-latin.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
/* Teodor claims every weight, as in app/globals.css, so headings never render faux-bold. */
@font-face { font-family: "Teodor"; src: url("/fonts/teodor/Teodor-TRIAL-Regular.otf") format("opentype"); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  --bg: #ffffff;
  --card: #ffffff;
  --ink: #172b48;
  --muted: #4f6680;
  --faint: #6a7f96;
  --line: #e3e9f0;
  --line2: #dbe5f0;
  --brand: #1463dc;
  --brand-dark: #0c50b9;
  --brand-light: #b2cffe;
  --tint: #eef4fd;
  --tint2: #f4f8fc;
  --navy: #0b2146;
  --word: #17191c;
  --ok: #1f7a4d;
  --ok-ink: #14492f;
  --ok-tint: #e7f5ec;
  --warn: #a7352a;
  --radius: 16px;
  --shadow: 0 18px 40px -30px rgba(23, 43, 72, 0.45);
  --serif: "Teodor", Georgia, "Times New Roman", serif;
  font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--bg); overflow-x: clip; }
button { font: inherit; cursor: pointer; }
a { color: var(--brand); }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible { outline: 3px solid #97bbef; outline-offset: 2px; }
.wrap { max-width: 520px; margin: 0 auto; padding: 0 16px 40px; }

/* header: the wordmark on white, the support line or "My plan" on the right */
.topbar { background: #fff; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; max-width: 520px; margin: 0 auto; min-height: 58px; }
.brand { display: inline-flex; padding-block: 11px; margin-block: -11px; text-decoration: none; }
.logo { display: block; height: 22px; width: auto; }
.lg-w { fill: var(--word); }
.lg-a { fill: var(--brand); }
.top .help { font-size: 13px; color: var(--muted); text-decoration: none; text-align: right; }
.top .help b { color: var(--ink); font-weight: 600; white-space: nowrap; }
.cartbtn { position: relative; border: 1px solid var(--line2); background: var(--card); border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: 14px; color: var(--ink); }
.cartbtn .n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 10px; background: var(--brand); color: #fff; font-size: 12px; margin-left: 6px; padding: 0 6px; }

/* checkout-only header and the five steps, as components/checkout/CheckoutAssurance.tsx draws them */
.cohead { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cohead-in { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; max-width: 1180px; margin: 0 auto; padding: 12px 16px; }
.cosecure { display: inline-flex; justify-self: center; align-items: center; gap: 7px; margin: 0; color: var(--ink); font-size: 13px; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; }
.cosecure svg { color: var(--ok); }
.cocall { justify-self: end; display: grid; place-items: center; width: 44px; height: 44px; margin: -4px; border: 1px solid var(--line2); border-radius: 999px; color: #30577e; font-size: 14px; text-decoration: none; }
.cocall span { display: none; }
.costeps { border-bottom: 1px solid var(--line); background: #fbfcfe; }
.costeps ol { display: flex; justify-content: space-between; gap: 2px; max-width: 1180px; margin: 0 auto; padding: 10px 16px; list-style: none; }
.costeps li { display: inline-flex; align-items: center; gap: 0; color: #8a9bb0; font-size: 13px; white-space: nowrap; }
.costeps .dot { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; border: 1.5px solid #cdd8e4; font-size: 11.5px; font-weight: 700; }
.costeps .lbl { display: none; }
.costeps .done { color: var(--ok); }
.costeps .done .dot { border-color: var(--ok); background: var(--ok); color: #fff; }
.costeps .now { color: var(--ink); font-weight: 700; }
.costeps .now .dot { border-color: var(--brand); background: var(--brand); color: #fff; box-shadow: 0 0 0 4px rgba(20, 99, 220, 0.14); }
.costeps .now .lbl { display: inline; margin-left: 6px; }

h1, h2 { font-family: var(--serif); font-weight: 500; color: var(--ink); }
h1 { font-size: 31px; line-height: 1.1; letter-spacing: -0.01em; margin: 6px 0 10px; }
h2 { font-size: 26px; line-height: 1.15; letter-spacing: -0.01em; margin: 6px 0 12px; }
p.lead { font-size: 17px; line-height: 1.5; color: var(--muted); margin: 0 0 18px; }
.btn { display: block; width: 100%; border: 0; border-radius: 12px; padding: 16px 22px; min-height: 56px; font-size: 17.5px; font-weight: 700; background: var(--brand); color: #fff; box-shadow: 0 14px 30px -14px rgba(20, 99, 220, 0.7); transition: transform 0.08s ease, background 0.2s; text-align: center; text-decoration: none; }
.btn:hover { background: var(--brand-dark); }
.btn:active { transform: scale(0.985); }
.btn[disabled] { opacity: 0.45; cursor: default; box-shadow: none; }
.btn.ghost { background: var(--card); color: var(--brand); border: 1.5px solid var(--brand); box-shadow: none; }
.btn.ghost:hover { background: var(--tint); }
.btn.small { padding: 11px 16px; min-height: 46px; font-size: 16px; }
.link { background: none; border: 0; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; padding: 10px; font-size: 15px; }
.trust { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--muted); }
.trust li { display: flex; gap: 10px; align-items: flex-start; }
.trust li::before { content: ""; flex: 0 0 18px; height: 18px; border-radius: 50%; background: var(--ok-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' stroke='%231f7a4d' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; margin-top: 1px; }
.fine { font-size: 12px; line-height: 1.5; color: var(--faint); margin-top: 18px; }

/* the member rating (lib/social-proof.ts), drawn like components/Stars.tsx */
.rating { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 8px; margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.rating svg { flex: none; color: #f2b01e; }
.rating b { color: var(--ink); }
.rating.left { justify-content: flex-start; }

/* video */
.vframe { position: relative; width: 100%; aspect-ratio: 9 / 16; max-height: 72vh; margin: 0 auto 16px; border-radius: 20px; overflow: hidden; background: #0b1a30; box-shadow: var(--shadow); }
.vframe video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0b1a30; }
.vframe .sound { position: absolute; left: 50%; top: 60%; transform: translateX(-50%); border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.96); color: var(--ink); font-weight: 700; padding: 12px 20px; font-size: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); display: flex; gap: 8px; align-items: center; white-space: nowrap; animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { transform: translateX(-50%) scale(1.05); } }
.vframe .tag { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; gap: 6px; flex-wrap: wrap; pointer-events: none; animation: tagaway 0.6s ease 4s forwards; }
@keyframes tagaway { to { opacity: 0; transform: translateY(-6px); } }
.chip { background: rgba(255, 255, 255, 0.94); color: var(--ink); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 700; }
.chip.on { background: var(--brand); color: #fff; }
.vframe .play { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(8, 18, 34, 0.35); border: 0; color: #fff; font-weight: 700; font-size: 18px; }
.vframe .play span { background: rgba(255, 255, 255, 0.96); color: var(--ink); border-radius: 999px; padding: 14px 22px; }
.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, 0.25); }
.progress i { display: block; height: 100%; width: 0; background: var(--brand-light); transition: width 0.25s linear; }

/* end-of-chapter offer over the video (not used by the continuous player) */
.offer { position: absolute; left: 12px; right: 12px; bottom: 12px; background: var(--card); border-radius: 18px; padding: 18px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); animation: rise 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
@keyframes rise { from { transform: translateY(40px); opacity: 0; } }
.offer .k { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.offer h3 { margin: 4px 0 2px; font-size: 21px; }
.offer .price { font-size: 15px; color: var(--muted); margin: 0 0 12px; }
.offer .price b { color: var(--ink); font-size: 18px; }
.offer .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.offer .row .btn { font-size: 15px; white-space: nowrap; padding: 12px 8px; }
.vframe.land { max-height: 56vh; aspect-ratio: 9 / 16; width: auto; }
.offer .count { font-size: 12px; color: var(--muted); text-align: center; margin-top: 8px; }
.opts { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 10px; }
.opt { border: 1px solid var(--line2); background: var(--card); border-radius: 10px; padding: 7px 11px; font-size: 13px; font-weight: 700; color: var(--ink); }
.opt.on { border-color: var(--brand); background: var(--tint); color: var(--brand-dark); box-shadow: inset 0 0 0 1px var(--brand); }

/* chapters */
.chapters { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; scrollbar-width: none; }
.chapters::-webkit-scrollbar { display: none; }
.ch { flex: 0 0 auto; border: 1px solid var(--line2); background: var(--card); border-radius: 12px; padding: 9px 12px; font-size: 13px; font-weight: 700; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.ch.on { border-color: var(--brand); color: var(--brand-dark); background: var(--tint); }
.ch.done::after { content: "\2713"; color: var(--ok); }
.ch.added { border-color: var(--brand); }

/* quiz */
.bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin: 6px 0 22px; }
.bar i { display: block; height: 100%; background: var(--brand); transition: width 0.35s ease; }
.q { animation: fade 0.3s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(10px); } }
.q .hint { color: var(--muted); font-size: 15px; margin: -4px 0 16px; }
.choices { display: grid; gap: 10px; }
.choice { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; border: 1.5px solid var(--line2); background: var(--card); border-radius: 14px; padding: 15px 16px; font-size: 17px; font-weight: 700; color: var(--ink); transition: border-color 0.15s, background 0.15s, transform 0.08s; }
.choice:hover { border-color: #97bbef; }
.choice:active { transform: scale(0.99); }
.choice .em { font-size: 24px; width: 30px; text-align: center; }
.choice small { display: block; font-weight: 500; color: var(--muted); font-size: 14px; margin-top: 2px; }
.choice.on { border-color: var(--brand); background: var(--tint); box-shadow: inset 0 0 0 1px var(--brand); }
.choice .tick { margin-left: auto; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line2); flex: 0 0 24px; }
.choice.on .tick { background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' stroke='white' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; border-color: var(--brand); }
.choice.on .tick:not(:empty) { background-image: none; color: #fff; font: 700 13px/21px system-ui, sans-serif; text-align: center; }
.back { background: none; border: 0; color: var(--muted); font-size: 14px; padding: 8px 0; margin-bottom: 4px; }
.sticky { position: sticky; bottom: 0; padding: 14px 0 10px; background: linear-gradient(to top, #fff 82%, rgba(255, 255, 255, 0)); }

/* building */
.build { text-align: center; padding-top: 30px; }
.ring { width: 84px; height: 84px; border-radius: 50%; border: 6px solid var(--tint); border-top-color: var(--brand); margin: 10px auto 22px; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.steps { list-style: none; padding: 0; margin: 0 auto; max-width: 320px; text-align: left; display: grid; gap: 10px; }
.steps li { opacity: 0.3; transition: opacity 0.3s; font-weight: 600; }
.steps li.on { opacity: 1; }
.steps li.on::before { content: "\2713  "; color: var(--ok); font-weight: 800; }
.steps li.now { opacity: 0.85; }
.steps li.now::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 9px; border-radius: 50%; border: 2px solid var(--tint); border-top-color: var(--brand); vertical-align: -1px; animation: spin 0.8s linear infinite; }
.build h2 { margin-bottom: 18px; }

/* forms */
.field { display: grid; gap: 6px; margin-bottom: 12px; }
.field label { font-size: 14px; font-weight: 600; color: #30475f; }
.field input { border: 1px solid #ccd8e5; border-radius: 10px; padding: 14px 15px; font-size: 17px; background: var(--card); color: var(--ink); }
.field input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(20, 99, 220, 0.14); }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--muted); margin: 6px 0 16px; }
.check input { width: 22px; height: 22px; margin: 0; flex: 0 0 22px; accent-color: var(--brand); }
.err { color: var(--warn); font-size: 14px; font-weight: 600; min-height: 20px; margin: 4px 0 8px; }
.ready { display: flex; gap: 12px; align-items: center; background: var(--tint2); border: 1px solid var(--line2); border-radius: var(--radius); padding: 14px; margin-bottom: 18px; }
.ready .thumb { width: 64px; height: 86px; border-radius: 12px; background: #0b1a30 center/cover; flex: 0 0 64px; position: relative; }
.ready .thumb::after { content: "\25B6"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 20px; }
.ready b { display: block; font-size: 16px; }
.ready span { font-size: 14px; color: var(--muted); }

/* cards */
.card { background: var(--card); border: 1px solid var(--line2); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); margin-bottom: 14px; }
.line { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.line:first-of-type { border-top: 0; padding-top: 4px; }
.line .name { font-weight: 700; font-size: 16px; }
.line .sub { font-size: 14px; color: var(--muted); grid-column: 1 / -1; }
.line .amt { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.line .amt s { color: #8a9bb0; font-weight: 500; font-size: 14px; margin-right: 6px; }
.line .rm { grid-column: 1 / -1; justify-self: start; background: none; border: 0; padding: 0; color: var(--muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.total { display: flex; justify-content: space-between; font-size: 20px; font-weight: 700; padding-top: 12px; border-top: 1px solid var(--line); margin-top: 6px; }
.renew { font-size: 13px; color: var(--muted); margin-top: 8px; line-height: 1.5; }
.suggest { display: grid; gap: 8px; }
.suggest button { display: flex; justify-content: space-between; align-items: center; border: 1.5px dashed var(--line2); background: transparent; border-radius: 14px; padding: 12px 14px; font-weight: 700; color: var(--ink); }
.suggest button span { color: var(--brand); }
.testnote { background: #fff8e6; border: 1px solid #f0d58c; color: #6b5200; border-radius: 12px; padding: 10px 12px; font-size: 13px; margin-bottom: 12px; }
#checkout-mount { min-height: 420px; }
.sheet { position: fixed; inset: 0; background: rgba(8, 18, 34, 0.5); display: flex; align-items: flex-end; justify-content: center; z-index: 50; animation: fade 0.2s; }
.sheet .in { background: var(--card); width: 100%; max-width: 520px; border-radius: 22px 22px 0 0; padding: 22px 20px 28px; max-height: 85vh; overflow: auto; }
.sheet ul { padding-left: 20px; line-height: 1.55; }
.toast { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); background: var(--navy); color: #fff; border-radius: 999px; padding: 12px 18px; font-weight: 700; font-size: 14px; z-index: 60; animation: rise 0.3s; max-width: calc(100vw - 24px); }
@media (min-width: 900px) { h1 { font-size: 38px; } .vframe { max-height: 78vh; max-width: 440px; } }

/* continuous plan player: segmented progress, product dock, bumpers, check-ins, resume */
.segs { display: flex; gap: 6px; margin: 2px 0 10px; }
.seg { flex: 1; border: 0; background: none; padding: 0; text-align: left; min-width: 0; position: relative; }
.seg::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 3px; background: var(--line); }
.seg i { position: relative; display: block; height: 6px; border-radius: 3px; background: var(--brand); width: 0; transition: width 0.25s linear; }
.seg span { display: block; font-size: 11px; font-weight: 700; color: var(--muted); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg.on span { color: var(--brand-dark); }
.seg.done span::after, .seg.added span::after { content: " \2713"; color: var(--ok); }
.dock { background: var(--card); border-radius: var(--radius); padding: 12px 14px 6px; box-shadow: var(--shadow); margin-bottom: 10px; border: 1px solid var(--line2); transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s; }
.dock:empty { display: none; }
.dock .k { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.dock h3 { margin: 3px 0 2px; font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1.15; }
.dock .price { font-size: 15px; color: var(--muted); margin: 0 0 10px; }
.dock .price b { color: var(--ink); font-size: 18px; }
.dock .row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
.dock .row .btn { font-size: 15.5px; padding: 11px 8px; white-space: nowrap; }
.dock .link { display: block; margin: 2px auto 0; padding: 6px; font-size: 13px; }
.dock.hot { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(20, 99, 220, 0.16), 0 14px 34px -16px rgba(20, 99, 220, 0.55); animation: nudge 1.6s ease-in-out infinite; }
.dock.in { border-color: #b9d0f5; }
@keyframes nudge { 50% { transform: translateY(-3px); } }
.road { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 8px; }
.road span { background: var(--tint); color: var(--brand-dark); border-radius: 999px; padding: 6px 11px; font-size: 13px; font-weight: 700; }
.toplan { margin: 0 0 10px; }
.toplan[hidden] { display: none; }
/* check-in: under the video (beside it on desktop), never over the presenter's face or the captions */
.cue { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; background: var(--card); border: 1.5px solid var(--brand); border-radius: 16px; padding: 10px 14px; margin-bottom: 10px; box-shadow: var(--shadow); animation: drop 0.3s ease-out; font-weight: 700; }
@keyframes drop { from { transform: translateY(-10px); opacity: 0; } }
.cue div { display: flex; gap: 8px; }
.cue button { border: 1.5px solid var(--brand); background: #fff; color: var(--brand-dark); border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: 14px; }
.cue button:hover { background: var(--tint); }
.bumper { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.97); display: grid; place-content: center; text-align: center; gap: 8px; animation: fade 0.25s; z-index: 3; }
.bumper small { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.bumper b { font-family: var(--serif); font-weight: 500; font-size: 36px; letter-spacing: -0.01em; color: var(--ink); }
.bumper .dots { display: flex; gap: 8px; justify-content: center; margin-bottom: 8px; }
.bumper .dots i { width: 28px; height: 6px; border-radius: 3px; background: var(--line); }
.bumper .dots i.on { background: var(--brand); }
.resume { position: absolute; left: 14px; right: 14px; bottom: 14px; background: var(--card); border-radius: 18px; padding: 18px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); display: grid; gap: 6px; z-index: 4; }
.resume b { font-family: var(--serif); font-weight: 500; font-size: 22px; }
.resume span { color: var(--muted); margin-bottom: 6px; }
.cartbtn.pop { animation: pop 0.45s ease; }
@keyframes pop { 40% { transform: scale(1.18); background: var(--tint); } }
/* Phones: the video leaves room for the product card under it, so the price and "Add to my plan" are on screen from the
   first second of every part (owner data, 2026-10-30: every paid visitor left during the first part). */
#vf { max-height: min(58vh, calc(100svh - 448px)); min-height: 280px; width: auto; margin-bottom: 12px; }
.dock .opts { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 6px -14px 8px; padding: 0 14px; }
.dock .opts::-webkit-scrollbar { display: none; }
.dock .opt { flex: 0 0 auto; }

/* desktop: the vertical video as tall as the screen allows, the plan beside it */
@media (min-width: 900px) {
  body:has(.pw) .top, body:has(.lw) .top { max-width: 1080px; }
  .wrap.pw, .wrap.lw { max-width: 1080px; }
  .pw .segs { max-width: 760px; margin: 2px auto 14px; }
  .pgrid { display: grid; grid-template-columns: auto minmax(320px, 400px); gap: 40px; justify-content: center; align-items: start; }
  #vf { height: min(calc(100vh - 150px), 940px); min-height: 520px; max-height: none; max-width: none; width: auto; margin: 0; }
  .side .fine { margin-top: 10px; }
  .wrap.lw { display: grid; grid-template-columns: auto minmax(340px, 440px); column-gap: 56px; justify-content: center; align-items: center; }
  /* the video ends above the floating gift bar */
  .lw > #lv { height: min(calc(100vh - 200px), 940px); min-height: 500px; max-height: none; max-width: none; width: auto; margin: 0; }
  .lw h1 { font-size: 42px; margin-top: 0; }
  .lw .sticky { position: static; }
}

/* "Questions? Ask me" (50/50 test): under the product card, beside the video on desktop */
.chat { background: var(--card); border: 1px solid var(--line2); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); margin-bottom: 12px; }
.chat-h { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.chat-h .ai { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--brand-dark); background: var(--tint); border-radius: 999px; padding: 2px 8px; }
.thread { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; margin: 0; }
.thread:not(:empty) { margin: 10px 0 8px; }
.bubble { max-width: 88%; padding: 9px 12px; border-radius: 16px; font-size: 15px; line-height: 1.45; white-space: pre-wrap; }
.bubble.me { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 6px; }
.bubble.ai { align-self: flex-start; background: var(--tint2); color: var(--ink); border-bottom-left-radius: 6px; }
.bubble.typing:empty::after { content: "..."; letter-spacing: 2px; color: var(--muted); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0.3; } }
.offer-btn { align-self: flex-start; width: auto; padding: 10px 16px; min-height: 0; font-size: 15px; }
.chips { display: flex; gap: 6px; overflow-x: auto; margin: 8px 0; padding-bottom: 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip-q { flex: 0 0 auto; border: 1px solid var(--line2); background: #fff; color: var(--ink); border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 700; }
.chip-q:hover { border-color: var(--brand); }
.askf { display: flex; gap: 8px; }
.askf input { flex: 1; min-width: 0; border: 1px solid #ccd8e5; border-radius: 999px; padding: 10px 14px; font: inherit; font-size: 16px; background: #fff; color: var(--ink); }
.askf input:focus { outline: none; border-color: var(--brand); }
.askf .send { flex: 0 0 40px; height: 40px; border-radius: 50%; border: 0; background: var(--brand); color: #fff; font-size: 18px; font-weight: 800; }

/* landing variations without a video (b, g) stand alone in one column */
.wrap.lw.novid { display: block; max-width: 560px; margin: 0 auto; }
.ltiles { margin: 4px 0 18px; }

/* callout line above the landing headline */
.echo { margin: -14px 0 0; padding: 12px 16px; background: var(--navy); color: #fff; text-align: center; font-size: 16px; line-height: 1.35; }
.echo b { font-weight: 700; }
.echo + .wrap { margin-top: 14px; }
.lcopy .pre, .lhook .pre { font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand); margin: 0 0 8px; }
/* replay with sound, for anyone who turned the volume on late */
.vframe .replay { position: absolute; left: 10px; bottom: 16px; z-index: 3; border: 0; border-radius: 999px; background: rgba(11, 26, 48, 0.62); color: #fff; font-weight: 700; font-size: 13px; padding: 7px 12px; }

/* intro first charge: the regular price struck through, today's price, the badge, then the renewal */
.badge { display: inline-block; background: var(--ok-tint); color: var(--ok-ink); border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; vertical-align: 1px; }
.pz s, .price s { color: #8a9bb0; font-weight: 500; margin-right: 2px; }
.price .then { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }
.dock .price { line-height: 1.5; }
.dock .book-btn { margin-top: 8px; }

/* ------------------------------------------------------------------ free gifts: the Welcome Kit */
/* photo tiles: the square photos sit on a light ground, so they show in rounded white tiles */
.gimgs { position: relative; display: flex; flex: 0 0 auto; }
.gimgs img { width: 56px; height: 56px; border-radius: 12px; background: #fff; border: 1px solid var(--line2); object-fit: cover; box-shadow: 0 6px 14px -8px rgba(23, 43, 72, 0.45); }
.gimgs img + img { margin-left: -14px; transform: rotate(5deg); }
.gimgs .gfree { position: absolute; left: -6px; top: -7px; z-index: 1; background: var(--brand); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; padding: 2px 6px; border-radius: 999px; box-shadow: 0 3px 8px rgba(20, 99, 220, 0.35); }
/* the bar fixed to the bottom of the landing pages, the quiz and the contact step (never over a video) */
.giftbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line2); box-shadow: 0 -10px 28px rgba(23, 43, 72, 0.1); animation: rise 0.35s ease; }
.giftbar p, .giftstrip p { margin: 0; font-size: 14px; line-height: 1.35; color: var(--ink); }
.giftbar b, .giftstrip b { color: var(--brand-dark); }
body.gb { padding-bottom: 92px; }
body.gb .sticky { bottom: 76px; }
/* in the player, a strip under the product card that fills in as each part is watched */
.giftstrip { position: relative; display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line2); border-radius: var(--radius); padding: 10px 12px 13px; margin-bottom: 10px; overflow: hidden; }
.giftstrip:empty { display: none; }
.gprog { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--tint); }
.gprog i { display: block; height: 100%; background: var(--brand); transition: width 0.4s ease; }
.giftstrip.open { border-color: #b9d0f5; background: linear-gradient(180deg, #f4f8fd, #fff); }

/* a photo of the guide with "Prepared for {name}" set on its cover in HTML, at the cover's own tilt */
.gpic { position: relative; container-type: inline-size; overflow: hidden; background: #e7eaef; }
.gpic img { display: block; width: 100%; height: auto; }
.gpic .gname { position: absolute; font-family: var(--serif); font-weight: 500; color: #1d2f4d; white-space: nowrap; pointer-events: none; transform-origin: 0 50%; }
/* placed on each kit photo's cover, under "Built from what you told us": the women's (kf), the men's (km), the original (ko) */
.gpic.kit .gname { line-height: 1; }
.gpic.kit.kf .gname { left: 50.2%; top: 69%; font-size: 2.3cqw; transform: rotate(6deg); }
.gpic.kit.km .gname { left: 53.2%; top: 69.6%; font-size: 2.2cqw; transform: rotate(10.6deg); }
.gpic.kit.ko .gname { left: 56.4%; top: 73.6%; font-size: 2.15cqw; transform: rotate(4.2deg); line-height: normal; }
.gpic.guide .gname { left: 40.6%; top: 71.2%; font-size: 4.3cqw; transform: rotate(3.6deg); }

/* cart and checkout: the kit as a banner across the top of the page */
.ghero { display: grid; background: linear-gradient(180deg, #f2f7fe, #fff 70%); border: 1px solid var(--line2); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); margin: 16px 0 6px; }
.ghero .gpic { border-bottom: 1px solid var(--line2); }
.gh-badges { position: absolute; left: 12px; top: 12px; display: flex; gap: 6px; align-items: center; z-index: 1; }
.gh-free { background: var(--brand); color: #fff; font-weight: 800; font-size: 14px; letter-spacing: 0.12em; padding: 6px 13px; border-radius: 999px; box-shadow: 0 8px 18px -6px rgba(20, 99, 220, 0.6); }
.gh-val { background: #fff; color: var(--muted); font-weight: 700; font-size: 13px; padding: 5px 10px; border-radius: 999px; box-shadow: 0 4px 10px -4px rgba(23, 43, 72, 0.3); }
.gh-txt { padding: 16px 18px 18px; }
.gh-k { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand); margin: 0 0 6px; }
.gh-h { font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1.08; letter-spacing: -0.01em; margin: 0 0 8px; color: var(--ink); }
.gh-sub { font-size: 17px; line-height: 1.4; margin: 0; color: var(--ink); }
.gh-sub b { color: var(--brand-dark); }
.gh-note { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.gh-link { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 700; color: var(--brand); text-underline-offset: 3px; }

/* the gifts as their own $0 lines in the order summary */
.gls { margin-top: 4px; padding-top: 12px; border-top: 1px dashed var(--line2); display: grid; gap: 10px; }
.gl { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; }
.gl-img { width: 56px; height: 56px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line2); background: #fff; }
.gl-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gl-t { min-width: 0; display: grid; gap: 2px; }
.gl-t b { font-size: 15px; }
.gl-t small { font-size: 12.5px; color: var(--muted); }
.gtag { display: inline-flex; align-items: center; gap: 4px; justify-self: start; color: var(--ok-ink); background: var(--ok-tint); border-radius: 6px; padding: 2px 7px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; }
.gl-a { text-align: right; font-weight: 800; color: var(--ok); font-size: 15px; letter-spacing: 0.02em; }
.gl-a s { display: block; color: #8a9bb0; font-weight: 500; font-size: 13px; letter-spacing: 0; }
/* a compact kit row next to the main buttons */
.kitrow { display: flex; align-items: center; gap: 14px; margin: 12px 0; padding: 10px 12px 10px 14px; border: 1px solid #cfdcf3; border-radius: 14px; background: var(--tint2); font-size: 14px; line-height: 1.35; }
.kitrow .gimgs img { width: 64px; height: 64px; }
.kitrow b { color: var(--brand-dark); }
/* "Unlocked" toast with the kit photo, once per plan */
.toast.kit { display: flex; align-items: center; gap: 12px; border-radius: 16px; padding: 8px 16px 8px 8px; background: #fff; color: var(--ink); border: 1px solid #b9d0f5; box-shadow: 0 18px 40px -16px rgba(23, 43, 72, 0.5); width: max-content; }
.toast.kit img { width: 64px; height: 48px; border-radius: 10px; object-fit: cover; background: #e7eaef; }
.toast.kit b { display: block; color: var(--brand-dark); font-size: 15px; }
.toast.kit span { display: block; font-weight: 600; font-size: 12.5px; color: var(--muted); }
/* done page */
.gdone { padding: 0; overflow: hidden; }
.gdone .gpic { border-bottom: 1px solid var(--line2); }
.gdone .gd-txt { padding: 16px 18px 18px; }
.gdone .gh-k { color: var(--ok); }
.gdone p { font-size: 14px; color: var(--muted); line-height: 1.5; margin: 6px 0 12px; }

/* ------------------------------------------------------------------ book a call */
.bookcard { display: grid; gap: 14px; background: #fff; border: 1px solid var(--line2); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); margin-bottom: 14px; }
.bk-top { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: center; }
.bk-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--tint); color: var(--brand); }
.bk-h { display: block; font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1.15; color: var(--ink); }
.bk-top p { margin: 4px 0 0; color: var(--muted); font-size: 15px; line-height: 1.4; }
.bk-btn { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; border: 1.5px solid var(--navy); border-radius: 12px; background: #fff; color: var(--navy); font-weight: 700; font-size: 16.5px; text-decoration: none; }
.bk-btn:hover { background: var(--tint); }
.dock a.bk-btn { margin-top: 8px; font-size: 15px; min-height: 46px; }
#bookbox:empty, #bookbox[hidden] { display: none; }
#bookbox .bookcard { animation: fadein 0.6s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } }

/* ------------------------------------------------------------------ cart and checkout trust layer */
/* Mobile: one column in reading order (each block's order). Desktop: the plan on the left, a tinted summary column on
   the right that runs to the window's edge, as the Rx checkout. */
.wrap.cw { display: flex; flex-direction: column; }
.cw .cl, .cw .cr, .cw .cr-in { display: contents; }
.cw .blk { min-width: 0; }
.ch1 { font-size: 30px; margin: 4px 0 6px; }
p.lead.sm { font-size: 15px; margin-bottom: 16px; }
.h3 { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); margin: 0 0 12px; }
.order .line .name small { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }
.order .line .amt { font-size: 18px; }
.line .sub .badge { margin-right: 6px; }
.line .sub .opts { margin: 4px 0 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.line .sub .opts::-webkit-scrollbar { display: none; }
.order .opt { flex: 0 0 auto; padding: 5px 10px; font-size: 12.5px; }
.order > .btn { margin-top: 16px; }
.sum .srow { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); padding: 3px 0; }
.sum .srow.save { color: var(--ok-ink); font-weight: 700; }
.sum .total { margin: 8px 0 4px; }
.savepill { display: inline-block; background: var(--ok-tint); color: var(--ok-ink); font-weight: 700; font-size: 13.5px; border-radius: 999px; padding: 4px 11px; margin: 6px 0 4px; }
.secure { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.45; color: var(--muted); margin: 12px 0 0; }
.secure svg { flex: 0 0 16px; width: 16px; height: 16px; color: var(--ok); margin-top: 1px; }
.encrypted { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; color: var(--ok); font-size: 12.5px; }
.encrypted svg { flex: 0 0 14px; width: 14px; height: 14px; }
.order .srow.total-sm { display: flex; justify-content: space-between; align-items: baseline; font-size: 16px; font-weight: 700; padding-top: 12px; margin-top: 10px; border-top: 1px solid var(--line); }
.order .srow.total-sm b { font-size: 22px; }
.order .then-k { font-size: 13px; font-weight: 700; color: var(--muted); margin: 6px 0 0; padding-top: 10px; border-top: 1px dashed var(--line); }
.included { display: grid; gap: 7px; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); list-style: none; }
.included li { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 13.5px; }
.included svg { flex: none; color: var(--ok); }
.ups { display: grid; gap: 10px; }
.up { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1.5px dashed var(--line2); border-radius: 14px; padding: 12px 14px; }
.up > div > b { display: block; font-size: 15px; }
.up .lbl { display: block; font-size: 14px; color: var(--muted); }
.up .price { margin: 6px 0 0; font-size: 14px; line-height: 1.5; }
.up .btn { width: auto; flex: 0 0 auto; padding: 10px 18px; min-height: 0; }
/* the approval guarantee seal */
.guar { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 16px 18px; border: 1px solid #cfe7d9; border-radius: 14px; background: #f1f9f4; margin-bottom: 14px; }
.guar .seal { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 999px; background: var(--ok); color: #fff; box-shadow: 0 0 0 5px #dff1e6; }
.guar b { display: block; color: var(--ok-ink); font-size: 15px; }
.guar p { margin: 3px 0 0; color: #2e5a43; font-size: 13.5px; line-height: 1.45; }
/* the promises line and the card marks, drawn locally so no third-party image loads on the payment page */
.promises { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin: 0 0 12px; color: var(--ink); font-size: 13.5px; }
.promises span { display: inline-flex; align-items: center; gap: 5px; }
.promises svg { color: var(--ok); }
.cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.cards li { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 26px; padding: 0 8px; border: 1px solid var(--line2); border-radius: 6px; background: #fff; color: #1a1f36; font-size: 10px; font-weight: 800; letter-spacing: 0.02em; }
.cards .visa { color: #1a1f71; font-style: italic; font-size: 11.5px; }
.cards .mc span { width: 13px; height: 13px; border-radius: 50%; background: #eb001b; }
.cards .mc span + span { margin-left: -5px; background: #f79e1b; mix-blend-mode: multiply; }
.cards .amex { border-color: #1f72cd; background: #1f72cd; color: #fff; }
.cards .disc { color: #e55c20; font-size: 8.5px; }
.cards .hsa { border-color: #cfe7d9; background: #f1f9f4; color: var(--ok-ink); }
.paytrust .rating { margin: 0 0 14px; }
/* "Care you can verify": the credential list */
.blk-t { margin: 0 0 12px; color: var(--ink); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.creds { display: grid; gap: 14px; margin: 0 0 18px; padding: 0; list-style: none; }
.creds li { display: grid; grid-template-columns: 58px 1fr; gap: 12px; align-items: center; }
.creds .seal-img { display: block; line-height: 0; }
.creds .seal-img img { width: 50px; height: auto; margin: 0 auto; display: block; }
.creds .cic { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto; border-radius: 12px; background: #fff; color: var(--brand); box-shadow: 0 1px 0 var(--line2); border: 1px solid var(--line); }
.creds b { display: block; color: var(--ink); font-size: 14px; }
.creds span { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
/* the small facts grid on phones, as the Rx checkout's TrustGrid */
.tgrid { list-style: none; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tgrid li { display: flex; gap: 8px; align-items: center; background: var(--card); border-radius: 12px; padding: 11px 12px; font-size: 13px; font-weight: 600; line-height: 1.25; border: 1px solid var(--line); color: var(--ink); }
.tgrid svg { flex: 0 0 18px; width: 18px; height: 18px; color: var(--brand); }
.proof { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--ink); text-decoration: none; margin: 0 0 14px; }
.proof img { border-radius: 50%; }
.proof.clin span b { display: block; }
/* what happens next, as the Rx checkout's NextSteps */
.next { position: relative; display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: n; }
.next::before { content: ""; position: absolute; top: 12px; bottom: 12px; left: 11px; border-left: 2px dashed #c9d7e6; }
.next li { position: relative; counter-increment: n; display: grid; grid-template-columns: 24px 1fr; gap: 12px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.next li::before { content: counter(n); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; }
.next li b { color: var(--ink); }
.next li span { display: block; }
/* questions before you pay */
.faq { margin: 4px 0 14px; }
.faq .h3 { font-family: var(--serif); font-weight: 500; font-size: 21px; letter-spacing: 0; text-transform: none; margin: 0 0 6px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; color: var(--ink); font-size: 14.5px; font-weight: 600; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--brand); font-size: 20px; font-weight: 400; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0 0 14px; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.faq .help { margin: 14px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.co #checkout-mount { min-height: 520px; margin-bottom: 16px; }
.co-intro { max-width: 560px; margin: 2px 0 18px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.dk-only { display: none; }

/* phones: the checkout button stays on screen */
.paybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 14px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(255, 255, 255, 0.97); box-shadow: 0 -10px 28px rgba(23, 43, 72, 0.1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: rise 0.3s ease; }
.paybar div { flex: 1; min-width: 0; line-height: 1.2; }
.paybar small { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.paybar b { font-size: 21px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.paybar span { display: block; font-size: 12px; color: var(--ok-ink); font-weight: 700; }
.paybar .btn { width: auto; flex: 0 0 auto; padding: 12px 22px; min-height: 50px; font-size: 16px; }
body.pb { padding-bottom: 92px; }
/* on phones the order card's button and the sticky pay bar carry the checkout; the summary only adds it up */
.sum .btn, .sum .kitrow { display: none; }

/* live recent orders (components/SocialProofPopup.tsx): bottom corner, wide screens only */
.sp { position: fixed; left: 16px; bottom: 16px; z-index: 55; width: min(320px, calc(100vw - 32px)); display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line2); border-radius: 14px; padding: 12px 14px; box-shadow: 0 20px 55px -26px rgba(14, 14, 12, 0.45); opacity: 0; transform: translateY(12px); transition: opacity 0.45s ease, transform 0.45s ease; pointer-events: none; }
.sp.on { opacity: 1; transform: translateY(0); pointer-events: auto; }
.sp.right { left: auto; right: 16px; }
.sp .spi { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 999px; background: var(--tint); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; }
.sp .spt { flex: 1; min-width: 0; }
.sp .spt b { display: block; font-size: 13.5px; color: var(--ink); line-height: 1.25; }
.sp .spt span { display: block; font-size: 12.5px; color: var(--muted); font-weight: 600; line-height: 1.3; }
.sp .spt small { display: block; margin-top: 3px; font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.06em; }
.sp .spx { flex: 0 0 auto; min-width: 44px; min-height: 44px; margin: -10px -8px -10px 0; border: 0; background: transparent; color: var(--faint); font-size: 18px; line-height: 1; padding: 4px; }
@media (max-width: 720px) { .sp { display: none !important; } }

@media (min-width: 900px) {
  .top { min-height: 64px; }
  .logo { height: 24px; }
  .gimgs img { width: 64px; height: 64px; }
  .cohead-in { grid-template-columns: 1fr auto 1fr; padding: 14px clamp(16px, 4vw, 40px); }
  .cosecure { font-size: 14px; }
  .cocall { display: inline-flex; width: auto; height: auto; margin: 0; border: 0; gap: 7px; }
  .cocall span { display: inline; }
  .costeps ol { justify-content: center; gap: 6px; padding: 12px clamp(16px, 4vw, 40px); }
  .costeps li { gap: 8px; }
  .costeps li + li::before { content: ""; width: clamp(14px, 3vw, 40px); height: 1px; margin-right: 2px; background: #cdd8e4; }
  .costeps .lbl, .costeps .done .lbl { display: inline; margin-left: 0; }
  .costeps .now .lbl { margin-left: 0; }
  body:has(.cw) .wrap.hero { max-width: 1100px; }
  .wrap.hero { padding-bottom: 0; }
  .ghero { grid-template-columns: minmax(0, 42%) 1fr; align-items: center; margin-top: 22px; }
  .ghero .gpic { border-bottom: 0; border-right: 1px solid var(--line2); }
  .gh-txt { padding: 26px 40px; }
  .gh-h { font-size: 44px; }
  .gh-sub { font-size: 20px; }
  .gh-note { font-size: 14px; }
  .wrap.cw { max-width: 1100px; display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 0; align-items: stretch; padding-bottom: 0; }
  .cw .cl { display: block; padding: 22px 44px 56px 0; }
  .cw .cr { display: block; position: relative; border-left: 1px solid var(--line); background: var(--tint2); box-shadow: 0 0 0 100vmax var(--tint2); clip-path: inset(0 -100vmax 0 0); }
  .cw .cr-in { display: block; position: sticky; top: 64px; padding: 22px 0 48px 32px; }
  .ch1 { font-size: 38px; }
  .paybar { display: none; }
  body.pb { padding-bottom: 0; }
  .sum .btn { display: block; }
  .sum .kitrow { display: flex; }
  .dk-only { display: block; }
  .ph-only { display: none; }
  .giftbar { left: 50%; right: auto; transform: translateX(-50%); width: min(680px, calc(100% - 32px)); bottom: 14px; border: 1px solid var(--line2); border-radius: 18px; padding: 10px 18px 10px 14px; animation: none; }
  body.gb { padding-bottom: 112px; }
  body.gb .sticky { bottom: 104px; }
}
/* a treatment already in the plan: a calm confirmation, not a faded button */
.dock .btn[disabled] { opacity: 1; background: var(--ok-tint); color: var(--ok-ink); box-shadow: none; }

/* the quiz in three fixed chapters (it never moves back when a goal adds a question) */
.qprog { margin: 2px 0 20px; }
.qch { margin: 0 0 8px; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand); }
.qsegs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.qsegs span { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.qsegs i { display: block; height: 100%; background: var(--brand); transition: width 0.35s ease; }
/* "Plans from $X for your first month", under the landing CTA and on the quiz */
.from { margin: 12px 0 0; text-align: center; font-size: 14.5px; color: var(--ink); }
.from b { color: var(--brand-dark); }
.from + .rating { margin-top: 6px; }
/* contact: their plan, blurred, behind the form */
.pv { position: relative; margin: 4px 0 18px; border: 1px solid var(--line2); border-radius: var(--radius); background: var(--tint2); padding: 12px; overflow: hidden; }
.pv-cards { display: grid; gap: 8px; filter: blur(4.5px); user-select: none; pointer-events: none; }
.pv-card { display: grid; gap: 2px; background: #fff; border: 1px solid var(--line2); border-radius: 12px; padding: 10px 12px; }
.pv-card span { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.pv-card b { font-family: var(--serif); font-weight: 500; font-size: 19px; }
.pv-card i { font-style: normal; font-size: 13px; color: var(--muted); }
.pv-lock { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px; margin: 0; width: max-content; max-width: calc(100% - 28px); padding: 10px 14px; border-radius: 14px; background: #fff; border: 1px solid #b9d0f5; box-shadow: 0 14px 30px -14px rgba(23, 43, 72, 0.5); font-size: 14px; line-height: 1.35; color: var(--ink); }
.pv-lock svg { flex: none; color: var(--brand); }
.pv-lock b { color: var(--brand-dark); }
.pv-cards .pv-card:nth-child(n+3) { display: none; }
.sum .rating { margin: 0 0 10px; }

/* ------------------------------------------------------------------ round 2 */
/* the price a week, under each price in the product card and the cart */
.wk { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.dock .wk { font-size: 12.5px; margin-top: 1px; }
/* the guarantee line next to the product card and the cart's buttons */
.vg { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0 0 10px; font-size: 13.5px; line-height: 1.35; color: var(--ok-ink); text-align: left; }
.vg svg { flex: none; color: var(--ok); }
.vg b { font-weight: 700; }
.order .vg, .sum .vg { margin: 12px 0 0; }
.dlinks { display: flex; justify-content: center; gap: 18px; }
.dlinks .link { display: inline-block; margin: 2px 0 0; padding: 6px; font-size: 13px; }
/* bridge: one short screen that answers their top goal */
.bridge { padding: 6px 0 4px; animation: fade 0.35s ease; }
.br-goal { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 7px 13px 7px 9px; border-radius: 999px; background: var(--tint); color: var(--brand-dark); font-size: 14px; }
.br-goal .em { font-size: 18px; }
.br-goal b { font-weight: 700; }
.br-h { font-size: 34px; line-height: 1.08; margin: 0 0 14px; }
.br-p { font-size: 19px; line-height: 1.5; color: var(--ink); margin: 0 0 18px; }
.br-built { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; font-weight: 700; color: var(--ok-ink); }
.br-built svg { flex: none; color: var(--ok); }
/* the weight pickers: type it, or press - and + */
.np { display: grid; grid-template-columns: 64px 1fr 64px; gap: 10px; align-items: center; margin: 6px 0 4px; }
.np-b { height: 64px; border-radius: 16px; border: 1.5px solid var(--line2); background: var(--card); color: var(--brand-dark); font-size: 30px; font-weight: 600; line-height: 1; -webkit-user-select: none; user-select: none; touch-action: manipulation; -webkit-touch-callout: none; }
.np-b:active { background: var(--tint); border-color: var(--brand); }
.np-f { display: flex; align-items: baseline; justify-content: center; gap: 6px; height: 76px; border-radius: 16px; border: 1.5px solid var(--brand); background: var(--tint2); box-shadow: inset 0 0 0 1px var(--brand); cursor: text; }
.np-f input { width: 3.2ch; border: 0; background: transparent; padding: 0; font: 600 44px/76px var(--serif); color: var(--ink); text-align: right; }
.np-f input::placeholder { color: #b7c4d4; }
.np-f input:focus { outline: none; }
.np-f span { font-size: 18px; font-weight: 700; color: var(--muted); }
.np-err { text-align: center; }
.skipq { display: block; margin: 4px auto 0; font-size: 14px; }
/* the goal date and its chart */
.gd-h { font-size: 27px; line-height: 1.2; margin: 0 0 10px; }
.gd-h b { color: var(--brand-dark); font-weight: 500; white-space: nowrap; }
.gchart { display: block; width: 100%; height: auto; margin: 4px 0 6px; overflow: visible; font-family: inherit; }
.gc-axis { stroke: var(--line2); stroke-width: 1.5; }
.gc-band { fill: var(--tint); }
.gc-line { stroke: var(--brand); stroke-width: 3.5; stroke-linecap: round; }
.gc-dot0 { fill: #fff; stroke: var(--ink); stroke-width: 2.5; }
.gc-dot { fill: var(--brand); stroke: #fff; stroke-width: 3; }
.gc-lb { font-size: 14px; font-weight: 700; fill: var(--ink); }
.gc-goal { fill: var(--brand-dark); }
.gc-x { font-size: 13px; font-weight: 600; fill: var(--muted); }
.gc-xg { fill: var(--brand-dark); font-weight: 700; }
.gc-note { font-size: 11.5px; fill: var(--faint); }
.gd-fine { font-size: 14px; color: var(--muted); margin: 6px 0 0; }
/* the goal, again, at the top of the cart */
.goalline { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 10px; padding: 6px 12px; border-radius: 999px; background: var(--tint); color: var(--brand-dark); font-size: 14px; font-weight: 700; }
.goalline svg { flex: none; }
/* the cart's Welcome Kit banner: a short line for phones */
.gh-short { display: none; }
@media (max-width: 899px) {
  /* phones, on the cart: the kit beside its words, so the order starts above the fold (the photo stays well under
     38% of the screen's height); the checkout's banner is unchanged */
  .ghero.gh-cart { grid-template-columns: 44% 1fr; align-items: stretch; margin: 10px 0 2px; border-radius: 16px; }
  .ghero.gh-cart .gh-ph { min-height: 100%; }
  .ghero.gh-cart .gpic { height: 100%; border-bottom: 0; border-right: 1px solid var(--line2); }
  .ghero.gh-cart .gpic img { height: 100%; object-fit: cover; object-position: 62% 60%; }
  .ghero.gh-cart .gname { display: none; }
  .ghero.gh-cart .gh-badges { left: 7px; top: 7px; }
  .ghero.gh-cart .gh-free { font-size: 11px; padding: 4px 9px; }
  .ghero.gh-cart .gh-val { display: none; }
  .ghero.gh-cart .gh-txt { padding: 10px 12px 11px; align-self: center; }
  .ghero.gh-cart .gh-k { font-size: 10.5px; margin: 0 0 3px; letter-spacing: 0.08em; }
  .ghero.gh-cart .gh-h { font-size: 20px; margin: 0 0 4px; }
  .ghero.gh-cart .gh-sub, .ghero.gh-cart .gh-note { display: none; }
  .ghero.gh-cart .gh-short { display: block; margin: 0; font-size: 13.5px; line-height: 1.35; color: var(--ink); }
  .ghero.gh-cart .gh-link { margin-top: 5px; font-size: 13px; }
  body:has(.gh-cart) .cw .back { padding: 4px 0; margin-bottom: 0; }
  body:has(.gh-cart) .ch1 { font-size: 27px; margin: 2px 0 6px; }
  body:has(.gh-cart) p.lead.sm { font-size: 14px; margin-bottom: 12px; }
}
@media (min-width: 900px) {
  .br-h { font-size: 40px; }
  .gd-h { font-size: 32px; }
}

/* The chat (50/50 test) sits behind one small button until it's opened. */
.chat:not([data-open]) { background: none; border: 0; box-shadow: none; padding: 0; text-align: center; }
.chat-open { display: inline-flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line2); border-radius: 999px; padding: 9px 16px; font: inherit; font-size: 14px; font-weight: 600; color: var(--brand-dark); cursor: pointer; }
.chat-open .ai { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--brand-dark); background: var(--tint); border-radius: 999px; padding: 2px 8px; }

/* ------------------------------------------------------------------ recommendations and the read view */
/* every matched treatment: "Recommended for your goal: ..." on its card, the same for all */
.recb { display: flex; align-items: flex-start; gap: 6px; margin: 5px 0 2px; font-size: 13px; line-height: 1.35; font-weight: 600; color: var(--brand-dark); }
.recb svg { flex: none; margin-top: 1px; color: var(--brand); }
.recb b { font-weight: 800; }
.up { flex-wrap: wrap; }
.up .recb { flex: 1 0 100%; margin: 0 0 -4px; }
.up > div { flex: 1 1 0; min-width: 0; }
.recs .lead.sm { margin: -4px 0 12px; }
/* "Prefer to read?" under the player's product card: small and quiet */
.readlink { margin: -2px 0 8px; text-align: center; }
.readlink .link { padding: 6px; font-size: 13.5px; color: var(--brand-dark); }
/* /plan/read/<id> */
.rv-k { margin: 2px 0 0; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand); }
.rv .ch1 { margin-top: 2px; }
.rv-goals { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; padding: 0; list-style: none; }
.rv-goals li { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 5px; border-radius: 999px; border: 1px solid var(--line2); background: #fff; font-size: 14px; font-weight: 700; color: var(--ink); }
.rv-goals .n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 12px; font-weight: 800; }
.rv .goalline { margin-bottom: 12px; }
.rcard { padding: 16px 16px 12px; }
.rcard.in { border-color: #b9d0f5; }
.rcard .k { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.rc-h { font-size: 24px; margin: 4px 0 8px; }
.why { display: grid; gap: 7px; margin: 0 0 12px; padding: 0; list-style: none; }
.why li { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--ink); }
.why svg { flex: none; margin-top: 3px; color: var(--ok); }
.rcard .price { font-size: 15px; line-height: 1.5; color: var(--muted); margin: 0 0 12px; }
.rcard .price b { color: var(--ink); font-size: 18px; }
.rcard .btn[disabled] { opacity: 1; background: var(--ok-tint); color: var(--ok-ink); box-shadow: none; }
.rlinks { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-top: 4px; }
.rlinks .link { padding: 8px 4px; font-size: 14px; }
.rlinks .watchp { display: inline-flex; align-items: center; gap: 6px; color: var(--brand-dark); font-weight: 600; }
.rlinks .watchp svg { flex: none; }
.rfine { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--faint); }
.rv .ghero { margin: 6px 0 14px; }
.rv > .vg { margin-top: 4px; }
.rv > .rating { margin: 0 0 14px; }
.rv-sum { margin: 0 0 10px; text-align: center; font-size: 14.5px; color: var(--muted); }
.rv-sum b { color: var(--ink); }
@media (min-width: 900px) {
  body:has(.rv) .top { max-width: 680px; }
  .wrap.rv { max-width: 680px; }
  .rv .ghero { grid-template-columns: minmax(0, 46%) 1fr; }
  .rv .gh-txt { padding: 20px 26px; }
  .rv .gh-h { font-size: 32px; }
  .rv .gh-sub { font-size: 17px; }
}

/* The honest hold (lib/video-plan/hold.ts): a real countdown on the cart and checkout, then a plain line once it ends. */
.hold { margin: 0 0 10px; padding: 9px 12px; border-radius: 12px; background: var(--tint); color: var(--brand-dark); font-size: 14px; line-height: 1.4; }
.hold b { font-variant-numeric: tabular-nums; }
.hold.over { background: var(--tint2); color: var(--muted); }
.order .hold { margin: 10px 0 4px; }
/* Billing terms above the payment form (mirrors components/checkout/CheckoutBillingDisclosure.tsx). */
.disc { margin: 0 0 14px; border: 1px solid var(--line2); background: var(--tint); border-radius: 10px; padding: 14px 16px; font-size: 13px; line-height: 1.5; }
.disc b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.disc p { margin: 6px 0 0; font-weight: 650; }
.disc ul { list-style: none; margin: 4px 0 0; padding: 0; }
.disc li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-weight: 650; }
.disc li span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
/* The one field above the payment form (legal last name), so the Stripe form can show Apple Pay and Google Pay. */
.lname { display: grid; gap: 6px; margin: 0 0 14px; }
.lname label { font-weight: 750; font-size: 14px; }
.lname .lrow { display: flex; gap: 8px; flex-wrap: wrap; }
.lname input { flex: 1 1 200px; min-width: 0; font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.lname .btn { flex: 0 0 auto; }
.lname .fine { margin: 0; }

/* ------------------------------------------------------------------ split tests (lib/video-plan/experiments.ts) */
/* format "summary": the plan on top of the player, the video below it */
.vsum { padding-bottom: 6px; }
.vsum .ch1 { margin-top: 2px; }
.vsum .goalline { margin-bottom: 12px; }
.vsum-k { margin: 6px 0 8px; }
@media (min-width: 900px) {
  .wrap.vsum { max-width: 680px; }
  .wrap.pw.sumv { border-top: 1px solid var(--line); padding-top: 18px; }
  .pw.sumv .vsum-k { max-width: 760px; margin: 0 auto 10px; }
}

/* the path test, "fork": two doors on the landing page, and the treatment picker (/plan/pick) */
.sticky.doors { display: grid; gap: 10px; }
.sticky.doors .btn.ghost { min-height: 52px; font-size: 16.5px; }
.ptiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 4px; }
.ptile { position: relative; display: flex; flex-direction: column; align-items: stretch; text-align: left; padding: 0; border: 1.5px solid var(--line2); border-radius: 16px; background: var(--card); color: var(--ink); overflow: hidden; box-shadow: var(--shadow); }
.ptile.on { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand), 0 14px 30px -18px rgba(20, 99, 220, 0.6); }
.pt-img { display: grid; place-items: center; aspect-ratio: 4 / 3; background: #f3f6fa; border-bottom: 1px solid var(--line); }
.pt-img img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.pt-q { font-family: var(--serif); font-size: 44px; color: var(--brand); background: var(--tint); }
.pt-tick { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; border: 1.5px solid var(--line2); background: #fff; color: transparent; }
.ptile.on .pt-tick { background: var(--brand); border-color: var(--brand); color: #fff; }
.pt-t { display: grid; gap: 2px; padding: 9px 11px 11px; }
.pt-t b { font-size: 15.5px; line-height: 1.2; }
.pt-t small { font-size: 13px; color: var(--muted); line-height: 1.3; }
.pt-for { font-size: 12.5px; font-weight: 600; color: var(--brand-dark); margin-top: 3px; }
.pt-p { font-size: 13px; color: var(--muted); margin-top: 3px; }
.pt-p b { color: var(--ink); font-size: 15px; }
.pt-p s { color: #8a9bb0; }
.ptile.prec { border-style: dashed; box-shadow: none; }
@media (min-width: 900px) {
  body:has(.pick) .top { max-width: 760px; }
  .wrap.pick { max-width: 760px; }
  .ptiles { grid-template-columns: repeat(3, 1fr); }
}

/* Owner fixes, 2026-10-31 */
/* Landers: the callout and the headline above the video, so on a phone the hook is read on the first screen and the
   sticky button and the gift bar never cover it; the video is smaller on phones to leave room for it. */
.lhook { margin: 14px 0 12px; }
.lhook h1 { margin: 0; }
.lw .lcopy .lead { margin-top: 2px; }
@media (max-width: 899px) {
  .lhook h1 { font-size: 29px; }
  .vframe.land { max-height: min(44vh, calc(100svh - 360px)); min-height: 220px; margin-bottom: 14px; }
}
@media (min-width: 900px) {
  .wrap.lw:not(.novid) { grid-template-areas: "v h" "v c"; grid-template-rows: auto 1fr; align-items: start; padding-top: 52px; }
  .lw > #lv { grid-area: v; }
  .wrap.lw:not(.novid) > .lhook { grid-area: h; align-self: start; margin: 0 0 12px; }
  .wrap.lw:not(.novid) > .lcopy { grid-area: c; align-self: start; }
  .lw .lhook h1 { font-size: 42px; }
}
/* Contact form: first and last name side by side; the button is not sticky, so it never covers the texts consent */
.names { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.names .field { min-width: 0; }
.names input { width: 100%; min-width: 0; box-sizing: border-box; }
@media (max-width: 340px) { .names { grid-template-columns: 1fr; gap: 0; } }
.cgo { padding: 6px 0 10px; }
/* What next once something is in the cart: a bar fixed to the bottom on phones, a bar under the product card on desktop */
.cartbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(255, 255, 255, 0.97); box-shadow: 0 -10px 28px rgba(23, 43, 72, 0.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform 0.25s ease; }
.cartbar.away { transform: translateY(115%); }
.cn-t { flex: 1; min-width: 0; font-size: 15.5px; line-height: 1.3; color: var(--ink); }
.cn-t b { color: var(--brand-dark); }
.cartbar .btn, .cartnext .btn { width: auto; flex: 0 0 auto; min-height: 52px; padding: 12px 26px; font-size: 17px; }
body.cb { padding-bottom: 92px; }
.cartnext, .cartnext[hidden] { display: none; }
@media (min-width: 900px) {
  .cartbar { display: none; }
  body.cb { padding-bottom: 0; }
  .cartnext:not([hidden]) { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; padding: 12px 14px; border: 2px solid var(--brand); border-radius: var(--radius); background: var(--tint); }
}
.toast.added { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 18px; width: max-content; }
.toast .tbtn { flex: 0 0 auto; border: 0; border-radius: 999px; background: var(--brand); color: #fff; font: inherit; font-weight: 700; font-size: 14.5px; padding: 9px 16px; cursor: pointer; }
.toast.added .tbtn { background: #fff; color: var(--navy); }
.toast.kit .tbtn { margin-left: 4px; }
/* Cart on phones: one summary inside the order card (due today, the saving), above the one checkout button */
.order .ph-only .srow.total-sm { margin-top: 14px; }
.order .ph-only .savepill { margin: 8px 0 0; }

/* ------------------------------------------------------------------ the matched free supplements (2026-10-31) */
/* the header (player, read view): "My cart" and under it the free gifts, small round photos and "3 free gifts" */
.top.hasgb { padding-top: 6px; padding-bottom: 6px; }
.hcart { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.hasgb .cartbtn { padding: 7px 13px; }
.gbadge { display: inline-flex; align-items: center; gap: 5px; margin: -3px -4px; padding: 3px 4px; border: 0; border-radius: 999px; background: none; color: var(--brand-dark); font-size: 11.5px; font-weight: 700; line-height: 1; white-space: nowrap; }
.gbadge:hover .gb-t { text-decoration: underline; text-underline-offset: 2px; }
.gb-imgs { display: inline-flex; }
.gb-imgs img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; background: #fff; border: 1.5px solid #fff; box-shadow: 0 0 0 1px var(--line2); }
.gb-imgs img + img { margin-left: -6px; }
.gb-t b { font-size: 12.5px; }
.gbadge.tick { animation: gbtick 0.7s ease; }
@keyframes gbtick { 30% { transform: scale(1.16); background: var(--tint); } 65% { transform: scale(0.97); } }
/* its list, under it */
.gpop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 35; width: min(290px, calc(100vw - 32px)); padding: 12px 14px 14px; border: 1px solid var(--line2); border-radius: 14px; background: #fff; box-shadow: 0 22px 50px -20px rgba(23, 43, 72, 0.5); text-align: left; animation: fade 0.18s; }
.gp-k { margin: 0 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand); }
.gpop ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.gpop li { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; }
.gpop li img { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line2); object-fit: cover; background: #fff; }
.gpop b { display: block; font-size: 14px; color: var(--ink); }
.gpop small { display: block; font-size: 12px; color: var(--muted); line-height: 1.3; }
/* phones: the header is a little taller with the badge, so the video gives that back and the product card stays put */
@media (max-width: 899px) { body:has(.hasgb) #vf { max-height: min(58vh, calc(100svh - 462px)); } }
/* more photos in a row of gift tiles: tighter */
.gimgs.n3 img + img { margin-left: -24px; }
.gimgs.n4 img, .gimgs.n5 img { width: 46px; height: 46px; }
.gimgs.n4 img + img, .gimgs.n5 img + img { margin-left: -18px; }
.kitrow .gimgs.n4 img, .kitrow .gimgs.n5 img { width: 50px; height: 50px; }

/* the add-to-cart moment: "Congratulations! You also get free X", the product photo, then it flies into the cart */
.toast.gmoment { top: auto; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 70; display: grid; grid-template-columns: 104px 1fr; gap: 10px 14px; align-items: center; width: min(400px, calc(100vw - 24px)); max-width: none; padding: 14px; border: 1px solid #b9d0f5; border-radius: 20px; background: #fff; color: var(--ink); font-weight: 500; box-shadow: 0 26px 60px -18px rgba(23, 43, 72, 0.55); animation: gmin 0.5s cubic-bezier(0.2, 1.25, 0.3, 1); }
@keyframes gmin { from { opacity: 0; transform: translate(-50%, 26px) scale(0.92); } }
.gm-x { position: absolute; top: 2px; right: 4px; width: 36px; height: 36px; border: 0; background: none; color: var(--faint); font-size: 22px; line-height: 1; }
.gm-ph { position: relative; width: 104px; height: 104px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line2); background: #fff; }
.gm-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gm-free { position: absolute; left: 6px; top: 6px; background: var(--brand); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; padding: 2px 7px; border-radius: 999px; }
.gm-t { min-width: 0; padding-right: 18px; }
.gm-h { display: block; margin: 0 0 4px; font-family: var(--serif); font-weight: 500; font-size: 23px; line-height: 1.1; color: var(--brand-dark); }
.gm-t p { margin: 0 0 6px; font-size: 14.5px; line-height: 1.35; color: var(--ink); }
.gm-ok { display: block; font-size: 13px; font-weight: 700; color: var(--ok-ink); }
.toast .gm-go { grid-column: 1 / -1; width: 100%; padding: 12px 16px; font-size: 16px; }
.gfly { position: fixed; z-index: 80; margin: 0; border-radius: 16px; object-fit: cover; pointer-events: none; transform-origin: center; transition: transform 0.75s cubic-bezier(0.5, -0.12, 0.55, 1), opacity 0.75s ease; }
@media (min-width: 900px) { .toast.gmoment { top: 84px; bottom: auto; } }

/* the kit banner: the supplements on the photo */
.gh-supps { position: absolute; right: 10px; top: 10px; z-index: 1; display: flex; }
.gh-supps img { width: 76px; height: 76px; border-radius: 14px; border: 2px solid #fff; object-fit: cover; background: #fff; box-shadow: 0 10px 22px -10px rgba(23, 43, 72, 0.55); }
.gh-supps img + img { margin-left: -20px; transform: rotate(5deg); }
@media (max-width: 899px) { .ghero.gh-cart .gh-supps { right: 6px; top: 6px; } .ghero.gh-cart .gh-supps img { width: 44px; height: 44px; border-radius: 10px; } .ghero.gh-cart .gh-supps img + img { margin-left: -14px; } }
@media (min-width: 900px) { .gh-supps img { width: 96px; height: 96px; } }
/* a gift line's own note (the biotin lab-test line) */
.gl-t small.gl-note { font-size: 11.5px; line-height: 1.35; color: var(--faint); }
.gd-supps { display: grid; gap: 10px; margin: 0 0 14px; }

/* phones, on the checkout: one compact line of the gifts above the order, the summary as one line, the form close */
.cobanner { display: flex; align-items: center; gap: 12px; margin: 10px 0 0; padding: 9px 12px; border: 1px solid #cfdcf3; border-radius: 14px; background: linear-gradient(180deg, #f2f7fe, #fff); }
.cb-imgs { display: flex; flex: 0 0 auto; }
.cb-imgs img { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; background: #fff; box-shadow: 0 0 0 1px var(--line2); }
.cb-imgs img + img { margin-left: -9px; }
.cobanner p { margin: 0; font-size: 12.5px; line-height: 1.3; color: var(--muted); }
.cobanner b { display: block; font-size: 14.5px; color: var(--brand-dark); }
.cosum-tog { display: none; }
@media (max-width: 899px) {
  .ghero.gh-checkout { display: none; }
  #cohero { padding-bottom: 0; }
  .cosum-tog { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0; border: 0; background: none; color: var(--ink); font-size: 16px; font-weight: 700; text-align: left; }
  .cosum-tog b { margin-left: 6px; font-size: 20px; font-variant-numeric: tabular-nums; }
  .cs-v { font-size: 14px; font-weight: 600; color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
  .cosum:not(.open) { padding: 12px 16px; }
  .cosum:not(.open) .cosum-det { display: none; }
  .cosum.open .cosum-tog { margin-bottom: 6px; }
}
@media (min-width: 900px) { .cobanner { display: none; } }

/* the cart: the recommended treatments not in it yet, as lines of the order, above the totals and the button */
.rec-k { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.order .line.recline { border-top: 1px dashed var(--line2); }
.order .rec-k + .line.recline { border-top: 0; padding-top: 8px; }
.recline .recb { margin: 0 0 4px; }
.recline .radd { grid-column: 1 / -1; justify-self: start; width: auto; min-height: 44px; padding: 10px 20px; font-size: 15.5px; }
.rgift { display: flex; align-items: center; gap: 8px; color: var(--brand-dark); font-size: 13.5px; }
.rgift img { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line2); object-fit: cover; background: #fff; }

/* "What we help with" on the two-door landing pages: one scrollable row of round photos and plain names */
.lcats { margin: 2px 0 4px; }
.lc-k { margin: 0 0 4px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.lc-row { display: flex; gap: 6px; margin: 0 -16px; padding: 2px 16px 4px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: 16px; }
.lc-row::-webkit-scrollbar { display: none; }
.lcat { flex: 0 0 auto; display: grid; justify-items: center; gap: 4px; min-width: 66px; padding: 0 2px; border: 0; background: none; color: var(--ink); scroll-snap-align: start; }
.lc-img { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; overflow: hidden; border: 1.5px solid var(--line2); background: #f3f6fa; box-shadow: 0 8px 18px -12px rgba(23, 43, 72, 0.5); transition: border-color 0.15s; }
.lc-img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.lcat:hover .lc-img, .lcat:focus-visible .lc-img { border-color: var(--brand); }
.lc-t { font-size: 12px; font-weight: 700; line-height: 1.25; white-space: nowrap; }
@media (min-width: 900px) {
  .lc-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; margin: 0; padding: 2px 0 4px; overflow: visible; }
  .lcat { min-width: 0; }
  .lc-t { white-space: normal; text-align: center; }
}
/* phones: the row shows right under the video, just above the two buttons, on the first screen (the buttons stick to the
   bottom, so the lead text below it is read on the first scroll, as before); the video gives up the room it needs */
@media (max-width: 899px) {
  .lw.hascats .lcopy { display: flex; flex-direction: column; }
  .lw.hascats .lcats { order: -1; margin: 0 0 10px; }
  .lw.hascats .vframe.land { max-height: min(44vh, calc(100svh - 540px)); min-height: 200px; margin-bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .toast.gmoment, .gbadge.tick, .gpop { animation: none; }
  .gfly { transition: none; }
}

/* The part's card: one button, the rest small links (Dan, 2026-11-01: "so many calls to action") */
.dock > .btn.small { margin: 0 0 2px; }
/* The one cart, beside the video (under it on phones), at the end of the read view */
.mcart { background: var(--card); border: 1px solid var(--line2); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; margin-bottom: 10px; }
.mc-h { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 4px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.mc-h span { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; }
.mc-e { margin: 0 0 8px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.mc-l { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 9px 0; border-top: 1px solid var(--line2); }
.mc-n { font-weight: 700; font-size: 15px; line-height: 1.25; color: var(--ink); }
.mc-n small { display: block; margin-top: 1px; font-weight: 500; font-size: 12.5px; color: var(--muted); }
.mc-a { font-weight: 700; font-size: 15px; text-align: right; white-space: nowrap; }
.mc-a s { margin-right: 4px; font-size: 13px; font-weight: 500; color: var(--faint); }
.mc-sub { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.mc-rm { grid-column: 1 / -1; justify-self: start; border: 0; background: none; padding: 2px 0; font-size: 13px; font-weight: 600; color: var(--brand-dark); text-decoration: underline; cursor: pointer; }
.mcart .gls { margin-top: 2px; padding-top: 10px; gap: 8px; }
.mcart .gl { grid-template-columns: 40px 1fr auto; gap: 10px; }
.mcart .gl-img { width: 40px; height: 40px; border-radius: 10px; }
.mc-tot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line2); font-weight: 700; }
.mc-tot b { font-size: 20px; }
.mcart .savepill { margin: 6px 0 0; }
.mcart .btn { margin-top: 10px; }
.mcart .vg { margin: 10px 0 0; }
/* The call on the video page: one line (Dan: "make pick a time smaller") */
.bkline { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--line2); border-radius: 12px; background: #fff; color: var(--navy); font-size: 14px; line-height: 1.3; text-decoration: none; }
.bkline b { color: var(--brand-dark); }
.bkline:hover { background: var(--tint); }
#bookbox .bkline { animation: fadein 0.6s ease; }
/* The recent-order note and the gift bar sit side by side at the bottom on desktop: the same height and the same line
   (Dan, 2026-11-01: "make these boxes same height") */
@media (min-width: 900px) {
  .sp, .giftbar { box-sizing: border-box; min-height: 86px; }
  .sp { bottom: 14px; }
}
/* The weight-loss tile's photo is shot wider than the others: closer in, so the vial is the same size as theirs */
.ptile[data-pick="glp1"] .pt-img { overflow: hidden; }
.ptile[data-pick="glp1"] .pt-img img { transform: scale(1.4); transform-origin: 50% 62%; }
/* Under the landing page's first screen: how it works, what we help with, questions, the call, the way in again
   (owner, 2026-11-01: more about the products, questions and the call before any footer) */
.lmore { max-width: 1080px; margin: 40px auto 0; padding: 0 16px 8px; }
.lm-sec { margin: 0 0 40px; }
.lm-h { margin: 0 0 14px; font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.15; color: var(--ink); }
.lm-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lm-steps li { display: grid; grid-template-columns: 36px 1fr; gap: 2px 12px; align-items: start; background: var(--card); border: 1px solid var(--line2); border-radius: var(--radius); padding: 14px; }
.lm-n { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; background: var(--tint); color: var(--brand); font-weight: 700; }
.lm-steps b { font-size: 16px; line-height: 1.25; color: var(--ink); }
.lm-steps li > span:last-child { font-size: 14px; line-height: 1.45; color: var(--muted); }
.lm-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lm-card { display: flex; flex-direction: column; text-align: left; padding: 0; border: 1.5px solid var(--line2); border-radius: 16px; background: var(--card); color: var(--ink); overflow: hidden; cursor: pointer; }
.lm-card:hover, .lm-card:focus-visible { border-color: var(--brand); }
.lm-img { display: grid; place-items: center; aspect-ratio: 4 / 3; background: #f3f6fa; border-bottom: 1px solid var(--line); overflow: hidden; }
.lm-img img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.lm-card[data-cat="weight"] .lm-img img { transform: scale(1.4); transform-origin: 50% 62%; }
.lm-t { display: grid; gap: 2px; padding: 9px 11px 11px; }
.lm-t b { font-size: 15.5px; line-height: 1.2; }
.lm-t small { font-size: 13px; line-height: 1.3; color: var(--muted); }
.lm-p { margin-top: 4px; font-size: 13px; color: var(--muted); }
.lm-p b { font-size: 15px; color: var(--ink); }
.lmore .faq { max-width: 760px; margin: 0 auto; }
.lmore .bookcard { max-width: 640px; margin: 0 auto; }
.lm-go { max-width: 560px; margin-left: auto; margin-right: auto; text-align: center; }
.lm-go .doors { display: grid; gap: 10px; }
@media (min-width: 900px) {
  .lmore { margin-top: 64px; }
  .lm-h { font-size: 30px; text-align: center; }
  .lm-steps { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .lm-steps li { grid-template-columns: 1fr; padding: 20px; }
  .lm-n { grid-row: auto; margin-bottom: 6px; }
  .lm-cards { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .lmore .faq .h3 { text-align: center; }
}