/* ============================================================================
   VORO UI refresh, 2026-09-08: Warm Paper + Oxblood (approved by Nick).
   Ported verbatim from the prototype, plus the verifier fixes at the bottom.
   LOADED LAST on every page, after styles.css and the page's own stylesheet, so its rules win the
   way they did in the prototype. The palette tokens themselves live in styles.css :root.
   Presentation only: no selector here is read by any script.
   ========================================================================== */
html { scroll-behavior: smooth; }
body { background: var(--background); }

/* ---------- buttons: oxblood is the one accent ---------- */
.btn--primary, .btn--brand { background: var(--oxblood); border-color: var(--oxblood); color: #fff; }
.btn--primary:hover, .btn--brand:hover { background: var(--oxblood-deep); border-color: var(--oxblood-deep); color: #fff; }
.btn--secondary { background: transparent; color: var(--text); border-color: var(--text); }
.btn--secondary:hover { background: var(--text); color: var(--on-brand); }
.btn--light { background: #fff; color: var(--oxblood); border-color: #fff; }
.btn--light:hover { background: #fff5f1; color: var(--oxblood-deep); border-color: #fff5f1; }
.hl { color: var(--oxblood); }

/* ---------- header ---------- */
.s-header { background: color-mix(in srgb, var(--background) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.s-header .wordmark { color: var(--text); }

/* ---------- ticker: fact, not pressure ---------- */
.s-ticker { background: var(--text); color: #fffaf2; }
.s-ticker .ticker__static strong, .s-ticker .ticker__cta { color: #fff; }
.s-ticker .ticker__cta { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- hero ---------- */
.s-hero { background: var(--glow-hero); }
.hero-rating__text strong { color: var(--text); }
.hero-h1 .hw.hl { color: var(--oxblood); }
.s-hero__sub { max-width: 34ch; }
.hero-trust__badge { background: var(--surface); border: 1px solid var(--border); }
.hero-swiper { border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 24px 60px rgba(43, 40, 37, .16); }
.hero-knockout { display: block; width: 100%; height: auto; }
.s-hero__media { position: relative; }

/* Callout above the card, arrow pointing down at it (Nick 2026-09-07). Sits in the dark gap
   between the two heads; white text with a soft shadow so it reads on the bar bokeh. */
.s-hero .hero-callout--card {
  top: 2.5%; left: 27%; max-width: 46%; width: 46%;
  align-items: center; text-align: center; gap: 0; color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.6);
}
.s-hero .hero-callout--card .hero-callout__text { transform: rotate(-4deg); font-size: clamp(18px, 2.1vw, 24px); line-height: 1.1; }
.s-hero .hero-callout--card .hero-callout__arrow { width: clamp(64px, 7.5vw, 96px); margin: 2px 0 0 18%; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
@media (max-width: 840px) {
  .s-hero .hero-callout--card { top: 2%; left: 22%; width: 56%; max-width: 56%; }
  .s-hero .hero-callout--card .hero-callout__text { font-size: 20px; }
  .s-hero .hero-callout--card .hero-callout__arrow { width: 74px; margin-left: 22%; }
}

/* ---------- facts strip (replaces the 11-item marquee) ---------- */
.s-facts { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface-muted); }
.s-facts__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; padding: 12px 16px; font-size: 14px; color: var(--text); }
.s-facts__row span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.s-facts__row b { font-family: var(--font-display); font-weight: 600; }
.s-facts__stars { color: var(--oxblood); letter-spacing: .05em; }
@media (max-width: 560px) { .s-facts__row { gap: 6px 16px; font-size: 13px; padding: 10px 12px; } }

/* ---------- section heads ---------- */
.section-head { text-align: left; }
.section-head h2 { font-weight: 600; letter-spacing: -0.02em; }
.section-head__sub { color: var(--text-muted); max-width: 52ch; }
.section-head--center { text-align: center; }
.section-head--center .section-head__sub { margin-left: auto; margin-right: auto; }

/* ---------- Wear it: six tiles, 4:5, people in every frame ---------- */
.s-carry { padding: clamp(44px, 6vw, 84px) 0; background: var(--background); }
.carry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.carry-card { border: 0; background: transparent; border-radius: var(--r-md); overflow: hidden; }
.carry-card__media { aspect-ratio: 4 / 5; border-radius: var(--r-md); overflow: hidden; background: var(--surface-muted); }
.carry-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-luxe); }
.carry-card:hover .carry-card__media img { transform: scale(1.03); }
.carry-card__body { padding: 12px 4px 0; }
.carry-card__body h3 { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -0.01em; margin: 0; }
.carry-card__body p { margin: 2px 0 0; color: var(--text-muted); font-size: 14px; }
@media (max-width: 900px) { .carry-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@media (max-width: 760px) {
  .carry-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; overflow: visible; padding: 0; scroll-snap-type: none; }
  .carry-card { min-width: 0; width: auto; flex: none; scroll-snap-align: none; }
  .carry-card__body h3 { font-size: 18px; }
  .carry-card__body p { font-size: 13px; }
}

/* ---------- Squeeze, remove, apply: real video + three steps ---------- */
.s-howto { background: var(--surface-muted); padding: clamp(44px, 6vw, 84px) 0; }
.howto-layout { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.howto-phone { position: relative; aspect-ratio: 9 / 16; border-radius: 28px; overflow: hidden; background: #111; box-shadow: 0 24px 60px rgba(43, 40, 37, .18); }
.howto-phone video { width: 100%; height: 100%; object-fit: cover; display: block; }
.howto-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.howto-steps li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; }
.howto-steps .n { font-family: var(--font-display); font-weight: 600; font-size: 40px; line-height: 1; color: var(--oxblood); }
.howto-steps h3 { font-family: var(--font-display); font-weight: 600; font-size: 24px; margin: 4px 0 4px; }
.howto-steps p { margin: 0; color: var(--text-muted); font-size: 16px; max-width: 40ch; }
.howto-note { margin-top: 22px; font-size: 14px; color: var(--text-muted); }
@media (max-width: 840px) {
  .howto-layout { grid-template-columns: 1fr; }
  .howto-phone { max-width: 300px; margin: 0 auto; }
  .howto-steps .n { font-size: 32px; }
  .howto-steps h3 { font-size: 21px; }
}

/* ---------- Four colors, four worlds ---------- */
.s-colors { padding: clamp(44px, 6vw, 84px) 0; background: var(--background); }
.color-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.color-card { position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4 / 5; background: var(--surface-muted); }
.color-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-luxe); }
.color-card:hover img { transform: scale(1.03); }
.color-card__label { position: absolute; left: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 999px; background: rgba(255, 253, 248, .92); color: var(--text); backdrop-filter: blur(6px); }
.color-card__label b { font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 1.1; }
.color-card__label span { font-size: 12px; color: var(--text-muted); line-height: 1.1; }
.color-swatches { display: flex; gap: 10px; align-items: center; margin-top: 18px; color: var(--text-muted); font-size: 14px; }
.color-swatches i { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,.08); }
@media (max-width: 760px) {
  .color-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .color-card__label { left: 10px; bottom: 10px; padding: 8px 11px; }
  .color-card__label b { font-size: 14px; }
  .color-card__label span { font-size: 11px; }
}

/* ---------- Buy box ---------- */
.s-order { background: var(--surface-muted); }
.order-gallery__main { border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.order-gallery__main img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; height: auto; display: block; }
.order-thumb { border-radius: 10px; overflow: hidden; }
.order-thumb img { aspect-ratio: 1 / 1; object-fit: cover; }
.order-thumb.is-active, .order-thumb:hover { border-color: var(--oxblood); }
.order-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(18px, 2.4vw, 28px); }
.order-rating__stars { color: var(--oxblood); }
.order-title { font-weight: 600; }
.order-sub strong { font-weight: 600; }
.order-benefit-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; }
.order-benefit-strip span { font-size: 13px; padding: 6px 11px; border-radius: 999px; background: var(--surface-muted); color: var(--text); }
.order-benefit-strip span.is-free { background: var(--oxblood-tint); color: var(--oxblood-deep); }
.plan-card { background: var(--surface); }
.plan-card.is-selected { border-color: var(--text); background: var(--brand-haze); }
.plan-card__ribbon { background: var(--oxblood); border-color: var(--oxblood); color: #fff; }
.plan-card__launch { color: var(--text-muted); text-decoration: line-through; }
.plan-card__thanks { display: block; margin-top: 6px; font-size: 13px; color: var(--oxblood-deep); font-weight: 600; }
.order-fine { color: var(--text-muted); font-size: 13px; }
.order-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 18px 0 6px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-muted); }
.order-facts span::before { content: "·"; margin-right: 8px; color: var(--cream-deep); }
.order-facts span:first-child::before { content: none; margin: 0; }
.order-acc summary { font-family: var(--font-display); font-weight: 600; }
.faq-imgs img { border-radius: 10px; }

/* ---------- Seen with VORO: reels + quotes ---------- */
.s-seen { padding: clamp(44px, 6vw, 84px) 0; background: var(--background); }
.reel-rail { grid-template-columns: repeat(4, 1fr); gap: 14px; }
.reel-card { border: 0; background: transparent; }
.reel-card__media { border-radius: var(--r-md); overflow: hidden; }
.reel-card__cap { display: flex; justify-content: space-between; align-items: center; padding: 10px 2px 0; font-size: 14px; }
.reel-card__handle { font-weight: 600; }
.reel-card__link { color: var(--text-muted); font-size: 13px; }
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.quote { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 20px 22px; }
.quote p { font-family: var(--font-display); font-weight: 500; font-size: 19px; line-height: 1.3; margin: 0 0 10px; letter-spacing: -0.01em; }
.quote small { color: var(--text-muted); font-size: 13px; }
.quote .stars { color: var(--oxblood); font-size: 13px; letter-spacing: .06em; display: block; margin-bottom: 10px; }
@media (max-width: 840px) {
  .reel-rail { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .quotes { grid-template-columns: 1fr; gap: 10px; }
  .quote p { font-size: 17px; }
}

/* ---------- Make it yours ---------- */
.s-designs-band { padding: clamp(44px, 6vw, 84px) 0; background: var(--surface-muted); }
.designs-band__grid { grid-template-columns: repeat(4, 1fr); }
.designs-band__card .carry-card__media { aspect-ratio: 1 / 1; }
.designs-band__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 22px; }
.designs-band__note { margin: 0; color: var(--text-muted); font-size: 14px; }
@media (max-width: 760px) { .designs-band__grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- It's not you. It's the tube. ---------- */
.s-tube { padding: clamp(44px, 6vw, 84px) 0; background: var(--background); }
.tube-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 48px); align-items: center; }
.tube-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tube-split figure { margin: 0; position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4 / 5; background: var(--surface-muted); }
.tube-split img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tube-split figcaption { position: absolute; left: 10px; top: 10px; padding: 6px 11px; border-radius: 999px; font-family: var(--font-display); font-weight: 600; font-size: 13px; background: rgba(255,253,248,.92); color: var(--text); }
.tube-split figure.is-voro figcaption { background: var(--oxblood); color: #fff; }
.tube-copy h2 { margin-bottom: 12px; }
.tube-copy p { color: var(--text-muted); font-size: 17px; max-width: 42ch; }
.tube-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.tube-stat { border-top: 2px solid var(--oxblood); padding-top: 10px; }
.tube-stat b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 34px; line-height: 1; letter-spacing: -0.02em; }
.tube-stat span { display: block; font-size: 13px; color: var(--text-muted); margin-top: 6px; }
@media (max-width: 840px) { .tube-layout { grid-template-columns: 1fr; } .tube-copy { order: -1; } }

/* ---------- Final band: oxblood ---------- */
.s-join { background: var(--glow-dark); color: #fff7f2; }
.s-join h2 { color: #fff; }
.s-join__lead { color: #ffe9e2; }
.s-join__note { color: #f7e2dd; }
.s-join__card { border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 24px 60px rgba(60, 20, 15, .35); }
.s-join__card img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 5; }

/* ---------- footer ---------- */
.s-footer { background: var(--background); }
.s-footer__tagline { font-family: var(--font-display); font-weight: 600; color: var(--text); }
.footer-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin: 26px 0 8px; opacity: .8; }
.footer-logos .brand-logo { height: 22px; width: auto; filter: grayscale(1); }
.footer-logos .marquee__label { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin: 0; }

/* ---------- sticky CTA ---------- */
.sticky-cta { background: color-mix(in srgb, var(--background) 94%, transparent); border-top: 1px solid var(--border); }
.sticky-cta__btn { background: var(--oxblood); border-color: var(--oxblood); }

/* ---------- reveal (app.js adds .revealed) ---------- */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease-luxe), transform .7s var(--ease-luxe); transition-delay: var(--reveal-delay, 0ms); }
[data-reveal].revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ============================================================
   Review pass 1 (2026-09-07): header, arrow, captions, buy-box order
   ============================================================ */

/* Phones: one-row header + Menu sheet; the four section links live in the sheet. */
@media (max-width: 840px) {
  .s-header__inner { grid-template-columns: 1fr auto; grid-template-rows: auto; height: 56px; padding: 0; align-items: center; }
  .s-header__navgroup--left { display: none !important; }
  .s-header .wordmark { grid-column: 1; grid-row: 1; justify-self: start; font-size: 26px; }
  .s-header__navgroup--right { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 14px; }
  .s-header__menu { display: inline-flex !important; align-items: center; gap: 8px; font: 600 14px var(--font-body); color: var(--text); background: none; border: 0; padding: 8px 0 8px 8px; cursor: pointer; }
  .s-header__menu-bars { display: inline-block; width: 18px; height: 2px; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; }
  .nav-sheet { border-top: 1px solid var(--border); background: var(--surface); }
  .nav-sheet__links { display: grid; gap: 2px; padding: 10px 16px 16px; }
  .nav-sheet__links a { padding: 12px 4px; font: 600 17px var(--font-body); color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border); }
  .nav-sheet__links a.nav-sheet__cta { margin-top: 8px; border: 0; color: var(--oxblood); }
}

/* Hero headline: no pale underline artefact, the oxblood word is the only emphasis */
.hero-h1 .hw, body .hero-h1 .hw.hl { box-shadow: none; background: none; }
.hero-h1 .hw::after { display: none; }

/* Arrow: long enough to actually land on the card (card top sits ~62% down the image) */
.s-hero .hero-callout--card { top: 2.5%; left: 22%; width: 56%; max-width: 56%; }
.s-hero .hero-callout--card .hero-callout__arrow { width: 31%; height: auto; margin: 0 0 0 30%; }
@media (max-width: 840px) {
  .s-hero .hero-callout--card { top: 2%; left: 20%; width: 60%; max-width: 60%; }
  .s-hero .hero-callout--card .hero-callout__arrow { width: 30%; margin-left: 32%; }
}

/* Captions sit on the paper, not in a sand box */
.carry-card__body, .designs-band__card .carry-card__body { background: transparent; padding: 12px 4px 0; text-align: left; border-radius: 0; }
@media (max-width: 760px) { .carry-card__body { padding: 10px 2px 0; } }

/* Section heads: left-aligned everywhere (the hero stays centered) */
.section-head, .s-carry .section-head, .s-howto .section-head, .s-colors .section-head, .s-seen .section-head, .s-designs-band .section-head { text-align: left; }
.section-head__sub { margin-left: 0; margin-right: 0; }

/* Buy box on phones: rating, title, sub, photo, chips, plans, button, fine print, facts, FAQ */
@media (max-width: 840px) {
  .s-order__grid { display: flex; flex-direction: column; }
  .order-box, #orderOffer { display: contents; }
  #orderOffer .order-rating { order: 1; }
  #orderOffer .order-title { order: 2; font-size: 30px; }
  #orderOffer .order-sub { order: 3; margin-top: 10px; }
  .order-gallery { order: 4; position: static; margin: 10px 0 6px; }
  #orderOffer .order-benefit-strip { order: 5; margin: 6px 0 12px; }
  #orderOffer .plan-cards { order: 6; margin-top: 8px; }
  #orderOffer .order-cta { order: 7; min-height: 54px; }
  #orderOffer .order-fine { order: 8; }
  #orderOffer .order-facts { order: 9; }
  .order-info { order: 10; margin-top: 8px; }
}

/* Seen with VORO on phones: a 2 x 2 grid, not a rail */
@media (max-width: 840px) {
  .reel-rail { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; overflow: visible; padding: 0; scroll-snap-type: none; }
  .reel-card { min-width: 0; width: auto; flex: none; }
}

/* Review pass 2 */
.hero-h1 .hw:last-child, body .hero-h1 .hw:last-child { box-shadow: none; }
.s-howto .section-head__sub, .section-head .section-head__sub { margin-left: 0; margin-right: 0; }
.howto-layout { grid-template-columns: minmax(240px, 320px) 1fr; }
@media (max-width: 840px) {
  .nav-sheet:not([hidden]) { display: block !important; border-top: 1px solid var(--border); background: var(--surface); box-shadow: 0 18px 30px rgba(43, 40, 37, .12); }
}
/* Review pass 3: phone layouts that a later desktop rule had overridden */
@media (max-width: 840px) {
  .howto-layout { grid-template-columns: 1fr; }
  .howto-phone { max-width: 300px; margin: 0 auto; }
  .s-ticker .ticker__cta { display: none; }
}
/* Review pass 4: phone reels grid (live CSS made it a column rail) and full-width FAQ */
@media (max-width: 840px) {
  .reel-rail { display: grid; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; padding: 0; margin: 0; }
  .reel-rail::after { display: none; }
  .s-order__grid { align-items: stretch; }
  .order-gallery, .order-info, #orderOffer > * { width: 100%; max-width: none; align-self: stretch; }
}

/* Review pass 5 (Nick): less text, footer logo carousel, tighter hero */
.s-hero__sub { max-width: 30ch; font-size: clamp(17px, 1.6vw, 20px); }
.hero-trust { display: none; }
.s-facts__row { font-size: 14px; }
.carry-card__body h3 { font-size: 20px; }
.color-card__label { padding: 9px 14px; }
.howto-steps p { font-size: 15px; }
.tube-copy p { font-size: 18px; }
.quote small { display: block; }
.reel-card__cap { justify-content: flex-start; }

/* Footer: the live logo marquee, on paper, above the link grid */
.s-marquee--footer { background: transparent; border-top: 1px solid var(--border); padding: 18px 0 4px; }
.s-marquee--footer .marquee__label { text-align: center; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 4px; }
.s-marquee--footer .marquee { padding: 10px 0 14px; }
.s-marquee--footer .brand-logo { filter: grayscale(1); opacity: .75; }
@media (max-width: 840px) { .s-marquee--footer .marquee { padding: 8px 0 10px; } }
/* Review pass 6 (Nick): no tile or color labels, ingredients section back, live FAQ */
.s-ingredients { background: var(--background); padding: clamp(44px, 6vw, 84px) 0; }
.ingr-pic img { border-radius: var(--r-lg); }
.faq-stat__num { color: var(--oxblood); }

/* ============================================================
   Review pass 7 (Nick, interviews): no flicker, buy buttons in a Z on every screen
   ============================================================ */

/* Nothing fades in on scroll, nothing zooms on hover, no word-by-word hero animation */
[data-reveal], .revealed { opacity: 1 !important; transform: none !important; transition: none !important; }
.hero-enter, .hero-enter--media, .hero-h1 .hw { animation: none !important; opacity: 1 !important; transform: none !important; }
.carry-card__media img, .color-card img { transition: none; }
.carry-card:hover .carry-card__media img, .color-card:hover img { transform: none; }
.wordmark:hover { transform: none; }

/* Crossfade tiles: both frames stay mounted, only opacity moves */
.xfade { position: relative; overflow: hidden; }
.xfade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; transition: opacity 1.4s ease; }
.xfade img.is-back { opacity: 0; }
.order-gallery__main.xfade { aspect-ratio: 4 / 5; }
.order-gallery__main.xfade img { aspect-ratio: auto; height: 100%; }

/* Top-right buy button in the header */
.s-header__buy { min-height: 38px; padding: 0 16px; font-size: 14px; margin-left: 6px; }
.s-header__navgroup--right { display: flex; align-items: center; gap: 14px; justify-self: end; }
@media (max-width: 840px) {
  .s-header__buy { min-height: 36px; padding: 0 14px; font-size: 13px; margin-left: 0; }
  .s-header__navgroup--right { gap: 10px; }
  .s-header__acct { display: none !important; }   /* Sign in lives in the Menu sheet on phones */
}

/* Middle-of-the-Z buy button after each section */
.sec-cta { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: clamp(22px, 3vw, 34px); text-align: center; }
.sec-cta small { color: var(--text-muted); font-size: 13px; }
.sec-cta--left { align-items: flex-start; text-align: left; }
.s-tube .sec-cta { margin-top: 22px; }
.designs-band__cta .btn--primary { margin-left: auto; }
@media (max-width: 840px) {
  .sec-cta .btn { width: 100%; max-width: 420px; }
  .sec-cta--left { align-items: center; }
  .designs-band__cta { flex-direction: column; align-items: stretch; }
  .designs-band__cta .btn { width: 100%; text-align: center; margin: 0; }
}

/* Review pass 8 (Nick + single-product CTA audit): fewer, varied buy buttons with the price on them */
.hero-cta-row { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.hero-link { font-weight: 600; color: var(--text); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--cream-deep); }
.hero-link:hover { text-decoration-color: var(--oxblood); color: var(--oxblood); }
.hero-price { margin: 10px 0 0; font-size: 14px; color: var(--text-muted); text-align: center; }
.s-header__buy { white-space: nowrap; }
.sticky-cta__btn { white-space: nowrap; }
#howto { scroll-margin-top: 72px; }
@media (max-width: 840px) {
  .hero-cta-row { flex-direction: column; gap: 12px; }
  .hero-price { font-size: 13px; }
}
.hero-price { flex-basis: 100%; margin: 2px 0 0; }

/* Review pass 9: responsive hardening */
@media (max-width: 840px) {
  .order-gallery__thumbs { display: flex; flex-wrap: wrap; overflow: visible; gap: 8px; scroll-snap-type: none; padding-bottom: 0; }
  /* Four per row, so eight photos make two even rows instead of a 5 + 3 split
     with the short row hugging the left edge (Nick, 2026-09-08). justify-content
     centres whatever the last row holds, so any photo count stays balanced. */
  .order-gallery__thumbs { justify-content: center; }
  .order-gallery__thumbs .order-thumb {
    /* Grow to fill the row on a phone, but never past 88px: the same rule ran to
       840px, where a quarter of the row is 178px and the thumbs dwarfed the photo
       they belong to. */
    flex: 0 1 calc((100% - 24px) / 4);
    max-width: 88px;
    width: auto; height: auto; min-height: 0; aspect-ratio: 1 / 1;
  }
}
img, video { max-width: 100%; }

/* ============================================================
   Creator feedback (Avory, Gretchen, Nick), 2026-09-08
   ============================================================ */

/* Callout sits low on the photo, over the near-black bar counter (mean luminance 17), clear of
   both faces (his x 8-38% / hers x 68-92%, both y 0-25%). The arrow rises from the left of the line
   and its head aims UP-RIGHT into the card, which sits at x 42-60%, y 40-62% of hero-bartop.webp:
   the tip alone is not enough, the head has to travel toward the product. */
.s-hero .hero-callout--card { position: absolute; inset: 0; width: auto; max-width: none; display: block; }
.s-hero .hero-callout--card .hero-callout__text {
  position: absolute; top: 85%; left: 22%; width: 56%;
  transform: rotate(-2.5deg); transform-origin: center top; text-align: center;
}
.s-hero .hero-callout--card .hero-callout__arrow {
  position: absolute; left: 35.4%; top: 60.7%; height: 22%; width: auto; margin: 0;
}
/* The photo keeps its full frame at every width, so the callout lands in the same place. */
@media (max-width: 840px) {
  .s-hero__media { aspect-ratio: 1600 / 1986; }
  .s-hero__media img.hero-knockout { object-position: 50% 50%; }
  .s-hero .hero-callout--card .hero-callout__text { font-size: 17px; }
}
@media (max-width: 380px) {
  .s-hero .hero-callout--card .hero-callout__text { font-size: 15px; }
}

/* Design-set titles wrap instead of clipping */
.carry-card { overflow: visible; }
.carry-card__media { overflow: hidden; }
.carry-card__body { overflow: visible; min-width: 0; }
.carry-card__body h3 { overflow-wrap: break-word; hyphens: none; }

/* Why-flat stats: one panel with a hairline divider, no red bars */
.tube-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 24px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden;
}
.tube-stat { border-top: 0; padding: 18px 20px; }
.tube-stat + .tube-stat { border-left: 1px solid var(--border); }
.tube-stat b { color: var(--oxblood); font-size: clamp(30px, 3.4vw, 40px); }
.tube-stat span { margin-top: 5px; }
@media (max-width: 430px) {
  .tube-stats { grid-template-columns: 1fr; }
  .tube-stat + .tube-stat { border-left: 0; border-top: 1px solid var(--border); }
}

/* ---- UI refresh, verifier pass 1 (2026-09-08) ---- */
/* 320-359 px: the header row (wordmark, Cart, buy button, Menu) needs a few pixels back. */
@media (max-width: 359px) {
  .s-header__buy-price { display: none; }
  .s-header__menu > span:last-child { display: none; }
  .s-header__navgroup--right { gap: 8px; }
  .s-header__navgroup--right .vc-btn { padding: 0 10px; }
}
/* Pages without app.js (bulk, design, account, bulk-thanks): a <details> element toggles the sheet. */
.nav-details { display: none; }
@media (max-width: 840px) {
  .nav-details { display: block; }
  .nav-details > summary { list-style: none; }
  .nav-details > summary::-webkit-details-marker { display: none; }
  .nav-details > summary::marker { content: ""; }
  .nav-details[open] .s-header__menu-bars { background: transparent; box-shadow: none; }
  /* Same for the app.js pages, whose open state is .is-open (audit 2026-09-08 B1): without
     clearing the box-shadow the two bars survive and the X renders as a bowtie. */
  .s-header__menu.is-open .s-header__menu-bars { background: transparent; box-shadow: none; }
  .nav-details[open] .s-header__menu-bars::before { transform: translateY(6px) rotate(45deg); }
  .nav-details[open] .s-header__menu-bars::after { transform: translateY(-6px) rotate(-45deg); }
  .nav-sheet--details { position: absolute; left: 0; right: 0; top: 100%; z-index: 40; }
}

/* ============================================================
   Desktop how-to (Nick, 2026-09-08, second pass): the clip ran 430x538 hard against
   the left edge of the 1180px shell while the three steps floated in a 671px column
   with ~250px of dead space to its right, so the pair read as a wall of video beside
   a small caption. Center the whole block instead: a narrower centered pair, the
   heading centered over it, and a 3/4 crop so the clip is generous without towering.
   ============================================================ */
@media (min-width: 841px) {
  /* This one section centers (as it did before the refresh); every other section head
     on the site stays left-aligned, so this rule is scoped to .s-howto on purpose. */
  .s-howto .section-head { text-align: center; }
  .s-howto .howto-layout {
    max-width: 900px;
    margin-inline: auto;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: clamp(44px, 4.5vw, 68px);
    align-items: center;
  }
  /* The source is 720x1280. A 9/16 frame at this width runs 587px and dwarfs three
     short steps; a 4/5 crop was wide but chopped a quarter of the action. 3/4 keeps
     the top 75% of the frame, which is the burned-in caption plus the hands, and
     drops only the empty wall at the bottom. */
  .s-howto .howto-phone { width: 100%; aspect-ratio: 3 / 4; }
  .s-howto .howto-phone video { object-position: top center; }
  /* Steps span their column with a hairline between them and sit centred against the
     clip, so the two halves share one optical center line. */
  .s-howto .howto-steps { gap: 0; }
  .s-howto .howto-steps li {
    grid-template-columns: 64px 1fr; gap: 20px;
    padding: clamp(18px, 2vw, 26px) 0;
    border-top: 1px solid var(--border);
    align-items: center;
  }
  .s-howto .howto-steps li:first-child { border-top: 0; padding-top: 0; }
  .s-howto .howto-steps li:last-child { padding-bottom: 0; }
  .s-howto .howto-steps .n { font-size: 52px; }
  .s-howto .howto-steps h3 { font-size: 26px; margin: 0 0 4px; }
  .s-howto .howto-steps p { font-size: 17px; max-width: 34ch; }
}

/* ============================================================
   Gallery thumbnails, desktop (Nick, 2026-09-08): styles.css:3603 asks for
   `repeat(12, minmax(0, 1fr))` but the gallery ships eight photos, so four tracks
   were always empty. The row rendered 380px of thumbs inside a 573px box, left
   aligned, with 193px of dead space on the right. Flex sizes to the content and
   centres it, and it stays right whatever the photo count becomes.
   ============================================================ */
@media (min-width: 841px) {
  .order-gallery__thumbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    grid-template-columns: none;
  }
  .order-gallery__thumbs .order-thumb {
    flex: 0 0 auto;
    width: clamp(48px, 4.4vw, 64px);
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

/* ============================================================
   Footer grid (Nick, 2026-09-08): styles.css:2981 hard-codes three tracks
   (1.1fr 0.9fr 1.2fr). Fifteen pages fill all three, but /account has no contact
   column (it does not load app.js, which wires that form, so the column is
   deliberately absent rather than missing). Its footer therefore rendered two
   columns against an empty 455px third track. Sizing the tracks to the columns
   that actually exist makes the footer correct on both shapes.
   ============================================================ */
@media (min-width: 841px) {
  .s-footer__grid { grid-template-columns: repeat(auto-fit, minmax(220px, auto)); justify-content: space-between; }
  /* Keep the three-column pages looking exactly as they did. */
  .s-footer__grid:has(.s-footer__form) { grid-template-columns: 1.1fr 0.9fr 1.2fr; justify-content: normal; }
}