/* ============================================================
   Homepage conversion changes (2026-09-18, branch cro-2026-09-18).
   Loaded by index.html only, right before ui-refresh.css. Every rule is
   scoped under html.cro, so removing class="cro" from <html> in index.html
   switches all of it off at once. Research and the reason for each block:
   marketing/cro/cro-build-2026-09-18.md in the voro repo.
   Each numbered block belongs to one commit; keep new rules inside it.
   ============================================================ */

/* ---- 0. Checkout buttons: a visible busy state while Stripe opens ---- */
html.cro .is-busy { position: relative; cursor: progress; opacity: 1; }
html.cro .is-busy::after {
  content: ""; display: inline-block; width: 16px; height: 16px; margin-left: 10px; vertical-align: -3px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: cro-spin .7s linear infinite;
}
@keyframes cro-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { html.cro .is-busy::after { animation-duration: 2s; } }
/* ---- end 0 ---- */

/* ---- 1. Buy box right after the hero; phone photo strip opens on the demo ---- */
html.cro .cro-strip { display: none; }
@media (max-width: 840px) {
  html.cro .order-gallery.has-strip .order-gallery__main,
  html.cro .order-gallery.has-strip .order-gallery__thumbs { display: none; }
  html.cro .cro-strip { display: block; margin: 0 -16px; }
  html.cro .cro-strip__track {
    display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 16px; padding: 0 16px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  html.cro .cro-strip__track::-webkit-scrollbar { display: none; }
  html.cro .cro-strip__slide {
    flex: 0 0 76%; max-width: 320px; aspect-ratio: 4 / 5; margin: 0; overflow: hidden; cursor: zoom-in;
    border-radius: var(--r-lg, 18px); background: var(--surface-muted, #f1ede3); scroll-snap-align: start;
  }
  html.cro .cro-strip__slide img,
  html.cro .cro-strip__slide video { display: block; width: 100%; height: 100%; object-fit: cover; }
  /* The clip's caption is burned in at the top, so crop from the bottom. */
  html.cro .cro-strip__slide--video { cursor: pointer; position: relative; }
  html.cro .cro-strip__slide--video video { object-position: top center; }
  html.cro .cro-strip__dots { display: flex; justify-content: center; gap: 6px; padding: 10px 0 0; }
  html.cro .cro-strip__dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--sand-deep, #e3dbc9); transition: background .2s; }
  html.cro .cro-strip__dots span.is-on { background: var(--text, #2b2825); }
}
/* ---- end 1 ---- */

/* ---- 2. Sticky bar ---- */
html.cro .sticky-cta { background: var(--surface, #fffdf8); }
html.cro .sticky-cta__sub b { color: var(--text); }
/* ---- end 2 ---- */

/* ---- 3. Plan cards: plain launch reference, explainer, renewal terms ---- */
/* The launch price sits on one muted line under the head, struck through
   (Nick, 2026-09-20: keep the line-through on the price WITH shipping &
   handling), and a tap opens a short explanation in place. The ⓘ circle is
   inline-grid, so the line-through does not cross it. */
html.cro .plan-card__anchor { margin: 8px 0 0 !important; }
html.cro .plan-card__info {
  appearance: none; background: none; border: 0; margin: -10px 0; padding: 10px 0;
  display: inline; text-align: left; cursor: pointer;
  font: inherit; font-size: 13px; line-height: 1.35; color: var(--text-muted);
  text-decoration: line-through;
}
html.cro .plan-card__info:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 2px; border-radius: 4px; }
/* On the plan that is not chosen, a tap on the "at launch" line chooses the plan instead of opening the
   explainer (audit 2026-09-26: a click mid-card opened it and the plan did not switch). */
html.cro .plan-card:not(.is-selected) .plan-card__info { pointer-events: none; }
html.cro .plan-card__i {
  display: inline-grid; place-items: center; width: 17px; height: 17px; margin-left: 6px; vertical-align: -4px;
  border: 1.5px solid currentColor; border-radius: 50%;
  font-family: var(--font-body, inherit); font-size: 11px; font-weight: 700; font-style: normal; line-height: 1;
}
/* The unit line wraps (Nick, 2026-10-07): "first 4-pack, $3.18 per balm" is longer than the launch copy
   allowed for, and nowrap pushed it through the card border on phones and at 860-960px desktop, where the
   price column is narrowest. Balanced so it breaks before the price. Head children may shrink (min-width 0). */
html.cro .plan-card__unit { white-space: normal; text-wrap: balance; }
html.cro .plan-card__head > * { min-width: 0; }
/* 48%, not 56% (styles.css): with the unit line wrapping, the wider column split "Subscribe & Save"
   onto two lines at 360-430px; 48% keeps the title whole from 360px up and still fits "$3.18 per balm". */
/* The price column keeps its (wrapped) content width and never shrinks; the title column takes the rest
   and wraps when it must (flex 1 1 0, min-width 0). Proportional shrinking squeezed the column to ~72px at
   320px and broke the unit line at the hyphen. */
html.cro .plan-card__pricecol { max-width: 48%; flex: 0 0 auto; }
html.cro .plan-card__head > :first-child { flex: 1 1 0; }
/* The unit line asks for two short lines, not one long one: 9em holds "$3.18 per balm" and "first 4-pack,"
   so the column stops claiming the width of the single-line text and the title keeps its line at 360-390px. */
html.cro .plan-card__unit { max-width: 8.5em; margin-left: auto !important; }
/* A long handle (@mackenziepearsonnnn) ran past the reel caption at 320px: the caption may wrap. */
html.cro .reel-card__cap { flex-wrap: wrap; }
html.cro .reel-card__handle { min-width: 0; overflow-wrap: anywhere; }
html.cro .plan-card__nowrap { white-space: nowrap; }
html.cro .plan-card__info[aria-expanded="true"] .plan-card__i { background: var(--text-muted); border-color: var(--text-muted); color: var(--surface, #fffdf8); }
html.cro .plan-card__infotext {
  margin: 8px 0 0 !important; padding: 10px 12px; border-radius: 10px;
  background: var(--surface-muted, #f1ede3); color: var(--text); font-size: 13px; line-height: 1.45;
}
html.cro .plan-card__infotext[hidden] { display: none !important; }
html.cro .plan-card__thanksline { margin: 6px 0 0 !important; font-size: 13px; font-weight: 600; color: var(--oxblood-deep, #6e2f28); }
/* ---- end 3 ---- */

/* ---- 4. Reassurance and press lines under the button ---- */
html.cro .order-assure { display: grid; gap: 4px; margin: 12px 0 0; text-align: center; font-size: 13px; line-height: 1.45; color: var(--text-muted); }
html.cro .order-assure p { margin: 0; }
html.cro .order-assure strong { color: var(--text); font-weight: 600; }
html.cro .order-assure a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
html.cro .order-assure__press { margin-top: 2px !important; }
html.cro .order-assure__nowrap { white-space: nowrap; }
html.cro .order-assure__press a { color: var(--text); }
@media (max-width: 840px) {
  /* Inline links in the buy box stay real tap targets without changing the line height. */
  html.cro .order-assure a { display: inline-block; padding-block: 11px; margin-block: -11px; }
}
/* ---- end 4 ---- */

/* ---- 5. Full-screen photos and tap-to-pause videos ---- */
html.cro .cro-zoomable { cursor: zoom-in; }
html.cro-lb-open, html.cro-lb-open body { overflow: hidden; }
html.cro .cro-lb { position: fixed; inset: 0; z-index: 1000; background: #141210; color: #fff; }
html.cro .cro-lb[hidden] { display: none; }
html.cro .cro-lb__top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  padding: max(8px, env(safe-area-inset-top, 0px)) 8px 8px 18px; pointer-events: none;
}
html.cro .cro-lb__count { font-size: 14px; font-weight: 600; letter-spacing: .02em; }
html.cro .cro-lb__close {
  pointer-events: auto; width: 48px; height: 48px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .14); color: #fff; font-size: 30px; line-height: 1;
}
html.cro .cro-lb__track {
  position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: auto; overscroll-behavior: contain;
  touch-action: pan-x pinch-zoom; scrollbar-width: none;
}
html.cro .cro-lb__track::-webkit-scrollbar { display: none; }
html.cro .cro-lb__slide { flex: 0 0 100%; height: 100%; margin: 0; display: grid; place-items: center; padding: 64px 12px 28px; scroll-snap-align: center; }
html.cro .cro-lb__slide img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
html.cro .cro-lb__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 52px; height: 52px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #fff; font-size: 34px; line-height: 1; cursor: pointer;
}
html.cro .cro-lb__nav--prev { left: 14px; }
html.cro .cro-lb__nav--next { right: 14px; }
@media (max-width: 840px) { html.cro .cro-lb__nav { display: none; } }
html.cro .cro-lb button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* A paused clip shows a play mark so the tap reads as intended. */
html.cro .cro-paused { position: relative; }
html.cro .cro-paused::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%);
  border-radius: 50%; background: rgba(20, 18, 16, .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 30px no-repeat;
  pointer-events: none;
}
/* ---- end 5 ---- */

/* ---- 6. Launch urgency color in the buy box + WGN lead press card (2026-09-30) ---- */
html.cro .order-urgent { color: var(--oxblood); }
html.cro .press-feature--lead { grid-column: 1 / -1; }
html.cro .press-feature--lead .press-feature__img { object-position: 50% 40%; }
@media (min-width: 761px) {
  html.cro .press-feature--lead { flex-direction: row; align-items: stretch; }
  html.cro .press-feature--lead .press-feature__img { width: 60%; flex: 0 0 60%; aspect-ratio: 16 / 9; }
  html.cro .press-feature--lead .press-feature__body { justify-content: center; padding: 28px 34px; }
}
/* Buy button: the pre-launch deadline after the price (VoroDeadline in app.js); on phones it drops to its own smaller line instead of wrapping mid-phrase. */
@media (max-width: 600px) {
  html.cro #orderCta { flex-direction: column; gap: 0; }
  html.cro .order-cta__sep { display: none; }
  html.cro #orderCta .order-cta__when { display: block; font-size: 14px; font-weight: 600; line-height: 1.2; margin-top: 2px; opacity: .92; }
  html.cro .order-cta__when::first-letter { text-transform: uppercase; }
}
/* How-to clip as a gallery item (2026-10-01): same 4:5 frame as the photos, captions kept in view. */
html.cro .order-gallery__video { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top center; cursor: pointer; background: var(--surface); }
html.cro .order-gallery__video[hidden], html.cro #orderMainImg[hidden] { display: none; }
html.cro .order-thumb--video { position: relative; }
html.cro .order-thumb--video::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: rgba(20, 18, 16, .62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") 55% 50% / 13px no-repeat;
}
/* ---- end 6 ---- */