/* Red Hat Display, self-hosted, Latin subset. Declared here rather than through
   @import, which chained a second render-blocking request behind this sheet.
   The upright file keeps the 400-800 weight axis; the italic is only set at 700. */
@font-face { font-family: "Red Hat Display"; src: url("fonts/redhat-display.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Red Hat Display"; src: url("fonts/redhat-display-italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

/* ============================================================
   Lemmorte body-acne lander
   Two views in one document: #shop (tap-anywhere landing) and
   #checkout (Shopify-shaped, one screen). No page loads between
   them, which is where the speed comes from.
   ============================================================ */

.a11y {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

:root {
  --navy: #003a70;
  --navy-deep: #00284d;
  --cyan: #00a3e0;
  /* ingredient names on paper: --cyan is 2.6:1 there, this is 4.68:1 */
  --blue: #1877c4;
  --ink: #101418;
  --ink-2: #4a5561;
  --line: #e3e7ec;
  --paper: #ffffff;
  --wash: #f1f3f6;
  --good: #067647;
  --sale: #c8102e;

  /* ---- fluid type, interpolated 375px -> 1280px on a 16px root ----
     Every preferred term carries a positive rem intercept. A pure-vw
     middle term cannot be resized by zoom and fails WCAG 1.4.4 (F94);
     the old h1 was clamp(26px, 7.8vw, 36px), which also swung 7.5px
     across the phone range and is why the hero copy kept overflowing. */
  --fs-3xs: clamp(0.6875rem, 0.6616rem + 0.1105vw, 0.75rem);
  --fs-2xs: clamp(0.75rem,   0.7241rem + 0.1105vw, 0.8125rem);
  --fs-xs:  clamp(0.8125rem, 0.7866rem + 0.1105vw, 0.875rem);
  --fs-sm:  clamp(0.875rem,  0.8491rem + 0.1105vw, 0.9375rem);
  --fs-md:  clamp(0.9375rem, 0.9116rem + 0.1105vw, 1rem);
  --fs-lg:  clamp(1.0625rem, 1.0107rem + 0.221vw,  1.1875rem);
  --fs-xl:  clamp(1.1875rem, 1.1098rem + 0.3315vw, 1.375rem);
  --fs-2xl: clamp(1.375rem,  1.2196rem + 0.663vw,  1.75rem);
  --fs-3xl: clamp(1.6875rem, 1.5062rem + 0.7735vw, 2.125rem);
  --fs-4xl: clamp(1.875rem,  1.5642rem + 1.326vw,  2.625rem);
  /* the countdown, held at exactly 150% of --fs-sm at every viewport */
  --fs-clock: clamp(1.3125rem, 1.27365rem + 0.16575vw, 1.40625rem);

  /* ---- fluid space, same anchors ---- */
  --sp-3xs: clamp(0.25rem, 0.2241rem + 0.1105vw, 0.3125rem);
  --sp-2xs: clamp(0.5rem,  0.4482rem + 0.221vw,  0.625rem);
  --sp-xs:  clamp(0.75rem, 0.6982rem + 0.221vw,  0.875rem);
  --sp-sm:  clamp(1rem,    0.8964rem + 0.442vw,  1.25rem);
  --sp-md:  clamp(1.25rem, 1.1464rem + 0.442vw,  1.5rem);
  --sp-lg:  clamp(1.5rem,  1.2928rem + 0.884vw,  2rem);
  --sp-xl:  clamp(2rem,    1.7928rem + 0.884vw,  2.5rem);
  --sp-2xl: clamp(2.5rem,  2.0856rem + 1.768vw,  3.5rem);

  --page-gutter: var(--sp-sm);
  --content-width: 42.5rem;
  --measure: 36rem;
  --secpad: var(--page-gutter);

  /* env() returns 0 on desktop and in non-cover Safari, so every use pairs
     it with a real gutter rather than relying on it alone. */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  /* measured from the real element by a ResizeObserver in app.js; the
     literal is only the pre-JS default. 64px was previously a guess that
     broke as soon as the CTA label wrapped. */
  --bar-h: 64px;
  --bar-reserve: calc(var(--bar-h) + var(--safe-b));
  /* The offer bar now paints with the page, so the hero is sized for it from
     the first frame. Measured 71-72px from 320 to 430px wide; app.js replaces
     it with the exact figure. */
  --offerbar-h: 72px;

  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 14px;

  --tap: 44px;
  --cta-h: 56px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: "Red Hat Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: var(--fs-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}

body {
  /* Tap-anywhere needs the whole surface live, and no 300ms delay. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

img { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }

/* ============================================================
   LANDING
   ============================================================ */

/* ---- offer bar ---- */
.offerbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: block;
  padding-top: var(--safe-t);
  background: var(--navy-deep);
  color: #fff;
  font-size: var(--fs-2xs);
  line-height: 1.3;
  text-align: center;
}
.offerbar[hidden] { display: none; }

.offerbar__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2xs);
  padding: var(--sp-3xs) calc(var(--page-gutter) + var(--safe-r))
           var(--sp-3xs) calc(var(--page-gutter) + var(--safe-l));
}
.offerbar__label { opacity: .88; }
.offerbar__label b { font-weight: 600; opacity: 1; }
.offerbar__clock {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  /* 50% larger than the body step it sits beside */
  font-size: var(--fs-clock);
  letter-spacing: .02em;
  line-height: 1;
  padding: .28em .5em;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .14);
}
/* the last two minutes read as urgent because they genuinely are */
.offerbar.is-final .offerbar__clock { background: var(--sale); }

/* ---- states ----
   Hover is gated behind a real hover device so touch never sticks in it. */
@media (hover: hover) and (pointer: fine) {
  .cta:hover { background: #004a8f; }
  .soundtoggle:hover { background: rgba(0, 163, 224, 1); }
  .halt__card button:hover,
  .wa:hover { filter: brightness(.94); }
  .gallery img:hover { opacity: .92; }
  .seals li, .assure div, .box__item { transition: border-color .15s var(--ease); }
  .box__item:hover, .assure div:hover { border-color: #c9d4e2; }
}

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 3px;
}
/* on the dark hero the cyan ring needs a dark halo to stay visible over video */
.hero :focus-visible,
.buybar :focus-visible {
  box-shadow: 0 0 0 5px rgba(0, 24, 46, .85);
}

/* the sound pill changes size and colour in one frame under the user's finger */

/* ---- offer expired ---- */
.expired {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--sp-lg) calc(var(--page-gutter) + var(--safe-l));
  background: var(--wash);
}
.expired[hidden] { display: none; }
.expired__card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-lg) var(--sp-md) var(--sp-md);
  max-width: 26rem;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--sp-2xs);
}
.expired__ico { width: 2.75rem; height: 2.75rem; color: var(--navy); }
.expired h1 { font-size: var(--fs-2xl); color: var(--ink); margin: var(--sp-3xs) 0 0; }
.expired p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; }
.expired__note { font-size: var(--fs-xs); }
.wa {
  margin-top: var(--sp-2xs);
  min-height: var(--cta-h);
  width: 100%;
  border-radius: var(--r-md);
  background: #25d366;
  color: #06331a;
  font-size: var(--fs-md);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2xs);
}
.wa svg { width: 1.25rem; height: 1.25rem; }
.expired__num { font-size: var(--fs-xs); color: var(--ink-2); }

/* ---- hero ---- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy-deep);

  /* svh is the only unit that is both stable while the URL bar collapses
     and never clipped on first paint. No @supports needed: viewport unit
     variants have been Baseline widely-available since Jun 2025, so the
     plain cascade self-feature-detects. */
  min-height: calc(100vh - var(--offerbar-h, 0px));
  min-height: calc(100svh - var(--offerbar-h, 0px));

  /* Three explicit rows. The copy's share of the fold becomes a decision
     rather than whatever happens to fit, which is what the old absolute
     positioning left to chance. */
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "top" "gap" "copy";
}

.hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  /* The poster is the hero's own background, so it is already painted. The
     video fades in over it once it can actually play, which means a slow
     connection or a failed decode never shows a black rectangle. */
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.hero__video.is-ready { opacity: 1; }

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* The backdrop is a video the CSS cannot control, and this ad has frames
     that are almost pure white (the review wall, and the end card). Measured
     against those, the old ramp left the kicker at 1.09:1 and the headline at
     1.94:1. The bottom band now holds ~0.78 alpha through the copy, which
     puts white text at ~8.9:1 and the cyan kicker at ~5.8:1 even on a white
     frame, then releases quickly so the ad is not dimmed overall. */
  background:
    linear-gradient(180deg, rgba(0, 40, 77, .5) 0%, rgba(0, 40, 77, 0) 22%),
    linear-gradient(0deg,
      rgba(0, 16, 30, .88)  0%,
      rgba(0, 16, 30, .82) 20%,
      rgba(0, 16, 30, .70) 34%,
      rgba(0, 16, 30, .44) 46%,
      rgba(0, 16, 30, .18) 56%,
      rgba(0, 16, 30, 0)   66%);
}

.hero__top {
  grid-area: top;
  z-index: 4;
  padding: calc(var(--sp-xs) + var(--safe-t)) calc(var(--page-gutter) + var(--safe-r)) 0 calc(var(--page-gutter) + var(--safe-l));
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
}


.logo {
  height: 30px;
  width: auto;
  display: block;
  filter: drop-shadow(0 1px 6px rgba(0, 20, 40, .45));
}

.livechip {
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .04em;
  padding: .48em .95em;
  line-height: 1;
  border-radius: 999px;
  background: rgba(255, 255, 255, .13);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .2);
}
.livechip i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #35d07f;
  box-shadow: 0 0 0 0 rgba(53, 208, 127, .7);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 7px rgba(53, 208, 127, 0); }
  100% { box-shadow: 0 0 0 0 rgba(53, 208, 127, 0); }
}


.hero__sub {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: rgba(255, 255, 255, .92);
  max-inline-size: 34ch;
  text-wrap: pretty;
}

.kicker {
  display: inline-block;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8fdcff;
  margin: 0;
}

h1 {
  margin: 0;
  color: #fff;
  font-size: var(--fs-4xl);
  line-height: 1.06;
  text-wrap: balance;
  max-inline-size: 22ch;
  font-weight: 600;
  letter-spacing: -.025em;
}
h1 em {
  font-style: normal;
  color: #8fdcff;
}

.pricerow {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
}
.price-now { font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.price-was { font-size: var(--fs-sm); color: rgba(255, 255, 255, .74); text-decoration: line-through; }
.price-off {
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: .05em;
  background: var(--sale);
  color: #fff;
  padding: .36em .7em;
  border-radius: var(--r-sm);
  line-height: 1;
  /* baseline alignment dropped the badge ~2.7px below the price */
  align-self: center;
}

.trustrow {
  display: flex;
  column-gap: var(--sp-xs);
  row-gap: var(--sp-3xs);
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, .88);
}
.trustrow span { display: inline-flex; align-items: center; gap: var(--sp-3xs); }

/* One icon treatment for the whole page. Stroke, not fill: at 16px a filled
   glyph with interior cut-outs reads as a blob. currentColor means an icon
   always matches the text it sits beside. */
.ico {
  width: 1.0625rem;
  height: 1.0625rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* stroke scales with the box, so the larger size needs a lighter
   weight to paint at the same 1.24px as .ico */
.ico--lg { width: 1.375rem; height: 1.375rem; stroke-width: 1.35; }

/* Lemmorte's own benefit icons are outline-expanded fills, not strokes, so
   they need the opposite treatment to the hand-authored ones. */
.ico--solid { fill: currentColor; stroke: none; }

/* ---- brand seal strip ---- */
.seals {
  list-style: none;
  margin: 0 0 var(--sp-md);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2xs);
}
.seals li {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-2xs) var(--sp-3xs) var(--sp-xs);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3xs);
  text-align: center;
}
.seals img { width: 56px; height: 56px; }
.seals span {
  font-size: var(--fs-3xs);
  font-weight: 600;
  color: var(--navy);
  line-height: 1.2;
}

/* ---- running ticker under the clock ----
   A bright strip against the navy bar, so the terms of the offer are stated
   where the clock is rather than buried in the fine print. The marquee is a
   pure transform on a doubled track: no layout, no paint, no timer. */
.ticker {
  overflow: hidden;
  background: #fff5e6;
  border-top: 1px solid rgb(0 40 77 / .12);
  color: var(--navy);
  /* --fs-3xs rendered at 10.3px on a 375px phone, which is below anything a
     reader should be asked to track while it moves */
  /* 20% larger than --fs-2xs at the owner's request (14 Sep 2026) */
  font-size: calc(var(--fs-2xs) * 1.2);
  font-weight: 500;
  line-height: 1.35;
  /* a marquee is motion the reader did not ask for: never trap a tap in it */
  pointer-events: none;
}

.ticker__track {
  display: flex;
  inline-size: max-content;
  /* ~50px per second, the pace a line can actually be read at */
  animation: tickerRun 26s linear infinite;
}

.ticker__set { display: flex; align-items: center; white-space: nowrap; }

.ticker__item { padding-block: .5em; }
.ticker__item b { font-weight: 700; }
.ticker__item--key { font-weight: 600; }
.ticker__item--key b { color: var(--sale); font-weight: 800; }

.ticker__sep {
  inline-size: 5px;
  block-size: 5px;
  margin-inline: var(--sp-sm);
  border-radius: 50%;
  background: currentColor;
  opacity: .32;
  flex: none;
}

@keyframes tickerRun { to { transform: translateX(-50%); } }

/* Reduced motion gets the line that actually matters, held still, rather
   than a frozen marquee showing whatever happened to be in frame. */
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; inline-size: 100%; }
  .ticker__set:last-child { display: none; }
  .ticker__set { inline-size: 100%; justify-content: center; white-space: normal; }
  .ticker__item:not(.ticker__item--key), .ticker__sep { display: none; }
  .ticker__item--key { text-align: center; padding-inline: var(--page-gutter); }
}

/* ---- tap hint ---- */
.heroctl {
  grid-area: gap;
  align-self: start;
  z-index: 4;
  margin: var(--sp-2xs) calc(var(--page-gutter) + var(--safe-r)) 0 calc(var(--page-gutter) + var(--safe-l));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}

@keyframes bobY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes ripple {
  0% { transform: scale(1); opacity: .9; }
  70%, 100% { transform: scale(2.1); opacity: 0; }
}

/* While muted the cue is the loudest thing on the page, because the ad with
   sound is what converts. Once sound is on it shrinks back to a nudge. */
body:not(.sound-on) .taphint {
  background: var(--cyan);
  border-color: rgba(255, 255, 255, .5);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: .72em 1.15em;
  box-shadow: 0 6px 20px rgba(0, 163, 224, .45);
}
body:not(.sound-on) .soundtoggle {
  border-color: rgba(255, 255, 255, .6);
  background: rgba(0, 163, 224, .85);
  animation: bobY 2.6s var(--ease) infinite;
}

/* ---- sound ---- */
.soundtoggle {
  flex: none;
  /* 44px is the minimum comfortable tap target. */
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .34);
  background: rgba(0, 24, 46, .42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  display: grid;
  place-items: center;
  padding: 0;
}
.soundtoggle svg { width: 20px; height: 20px; }
.soundtoggle .ico-on { display: none; }
.soundtoggle.is-on .ico-on { display: block; }
.soundtoggle.is-on .ico-off { display: none; }

/* ---- below the fold ---- */
.sec {
  padding: var(--sp-xl) calc(var(--secpad) + var(--safe-r))
           var(--sp-xl) calc(var(--secpad) + var(--safe-l));
}
.sec--wash { background: var(--wash); }
.sec--navy { background: var(--navy-deep); color: #fff; }

.sec h2 {
  margin: 0 0 var(--sp-3xs);
  text-wrap: balance;
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: -.02em;
}
.sec .lede {
  margin: 0 0 var(--sp-md);
  text-wrap: pretty;
  font-size: 13.5px;
  color: var(--ink-2);
}
.sec--navy .lede { color: rgba(255, 255, 255, .68); }

/* what's in the box */
.box { display: grid; gap: 10px; }
.box__item {
  display: grid;
  grid-template-columns: 74px 1fr auto;
  gap: 13px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 11px;
}
.box__item.is-free { border-color: #bfe7cf; background: #f4fbf7; }
.box__shot {
  width: 74px; height: 74px;
  border-radius: var(--r-md);
  background: var(--wash);
  object-fit: cover;
}
.box__name { font-size: var(--fs-sm); font-weight: 600; line-height: 1.25; }
.box__meta { font-size: 11.5px; color: var(--ink-2); margin-top: 2px; }
.box__flag {
  display: inline-block;
  margin-top: 6px;
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: .05em;
  padding: .32em .74em;
  line-height: 1;
  border-radius: var(--r-sm);
  background: var(--navy);
  color: #fff;
}
.box__flag.free { background: var(--good); }
.box__price { text-align: right; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.box__price s { display: block; font-size: var(--fs-3xs); font-weight: 400; color: var(--ink-2); }
.box__price .free { color: var(--good); }

.tally {
  margin-top: 14px;
  border-top: 1px dashed var(--line);
  padding-top: 14px;
  display: grid;
  gap: 7px;
  font-size: 13.5px;
}
.tally div { display: flex; justify-content: space-between; }
.tally .save { color: var(--sale); font-weight: 600; }
.tally s { color: var(--ink-2); text-decoration-thickness: 1px; }
.tally .grand { font-size: var(--fs-lg); font-weight: 700; padding-top: 6px; }

.subhead {
  margin: 0 0 10px;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8fdcff;
}
.formula + .subhead { margin-top: 20px; }

/* a gift line states the brand's own valuation, never a struck price the
   buyer could not have paid */
.box__price em {
  display: block;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 400;
  color: var(--ink-2);
}

/* ---- add-on picker ---- */
.subhead--ink { color: var(--navy); margin-top: var(--sp-md); }
.lede--tight { margin-bottom: var(--sp-2xs) !important; }

.addons { display: grid; gap: var(--sp-2xs); }

.addon {
  display: grid;
  grid-template-columns: auto 64px 1fr auto;
  align-items: center;
  gap: var(--sp-2xs);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-2xs);
  cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.addon.is-on { border-color: var(--navy); background: #f6f9fd; }
.addon input { width: 20px; height: 20px; accent-color: var(--navy); margin: 0; }
.addon__shot { width: 64px; height: 64px; border-radius: var(--r-sm); background: var(--wash); object-fit: cover; }
/* the section centres its copy on wide screens; a labelled control must not follow */
.addon__body { display: grid; gap: 2px; min-width: 0; text-align: start; }
.addon__name { font-size: var(--fs-sm); font-weight: 600; line-height: 1.25; }
.addon__meta { font-size: var(--fs-3xs); color: var(--ink-2); }
.addon__badge {
  justify-self: start;
  margin: 3px 0 1px;
  padding: .3em .66em;
  border-radius: 999px;
  background: var(--sale);
  color: #fff;
  font-size: var(--fs-3xs);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
}
.addon__price { text-align: right; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.addon__price s { display: block; font-size: var(--fs-3xs); font-weight: 400; color: var(--ink-2); }

/* ---- the case for the mist, above the add-on picker ----
   One comparison, time on skin: the wash gets minutes, the mist gets all
   day. Two bars on tracks of equal length, then one line. No cards, the
   owner found them too tall (15 Sep 2026). */
.case {
  margin: 0 0 var(--sp-sm);
  padding: 10px 14px 12px;
  background: var(--paper);
  border: 1px solid rgb(0 58 112 / .12);
  border-radius: var(--r-lg);
  text-align: start;
}
.case__label {
  margin: 0 0 7px;
  color: var(--ink-2);
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.case__rows { display: grid; gap: 6px; }
.case__row {
  display: grid;
  /* fixed outer columns give both bars the same track, so the lengths compare */
  grid-template-columns: 24px 44px minmax(0, 1fr) 58px;
  column-gap: 8px;
  align-items: center;
}
.case__ico {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--wash);
  color: var(--navy);
  display: grid; place-items: center;
}
.case__ico .ico { width: 15px; height: 15px; stroke-width: 1.75; }
.case__row > b { color: var(--ink); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.case__bar { display: block; height: 8px; border-radius: 999px; background: var(--wash); overflow: hidden; }
.case__bar i { display: block; height: 100%; width: var(--w, 100%); border-radius: inherit; background: var(--blue); transform-origin: 0 50%; }
.case__row.is-mist .case__bar i { background: var(--good); }
.case__time { color: var(--ink); font-size: var(--fs-2xs); font-weight: 700; white-space: nowrap; }
.case__row.is-mist .case__time { color: var(--good); }
.case__note {
  margin: 9px 0 0;
  padding-top: 9px;
  border-top: 1px dashed var(--line);
  color: var(--ink-2);
  font-size: var(--fs-2xs);
  line-height: 1.45;
}
.case__note b { color: var(--ink); font-weight: 700; }

/* ---- the surprise section ---- */
.sec--surprise { background: #fff5e6; }
.surprise__eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--sale); font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; }
.surprise__eyebrow .ico { inline-size: 18px; block-size: 18px; }
.sec--surprise h2 { margin-top: 0; }
.sec--surprise .tally { margin-top: var(--sp-sm); }

/* ---- hero cue: the only words on the film ---- */
.hero__cue {
  grid-area: copy;
  z-index: 3;
  justify-self: center;
  align-self: end;
  display: grid;
  justify-items: center;
  gap: 10px;
  /* clears the sticky buy bar, which is measured into --bar-h at runtime */
  padding: 0 var(--page-gutter) calc(var(--bar-h, 64px) + var(--sp-sm));
  text-align: center;
  color: #fff;
  pointer-events: none;
}
.cue__surprise {
  display: inline-flex; align-items: center; gap: 8px;
  /* 150% of the strip this line used to sit in */
  font-size: var(--fs-lg);
  font-weight: 700;
  padding: .55em 1.05em;
  border-radius: 999px;
  background: rgb(0 20 40 / .48);
  border: 1px solid rgb(255 255 255 / .22);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.cue__surprise .ico { inline-size: 1.15em; block-size: 1.15em; color: #ffd166; }
.cue__scroll { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); font-weight: 600; letter-spacing: .04em; text-shadow: 0 1px 8px rgb(0 20 40 / .6); }
.cue__chev { inline-size: 18px; block-size: 18px; animation: cueBounce 1.6s ease-in-out infinite; }
@keyframes cueBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .cue__chev { animation: none; } }

/* one full-width button, nothing else in the bar */
.buybar .cta { flex: 1 1 100%; min-height: 54px; font-size: var(--fs-md); }
.buybar .cta .ico { inline-size: 20px; block-size: 20px; }

.fcard__tag { display: inline-block; margin-left: 6px; font-style: normal; font-weight: 700; font-size: .6em; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); background: var(--wash); border-radius: 999px; padding: .25em .6em; vertical-align: middle; }


/* ---- before / after slider ---- */
.sec--ba { background: var(--wash); }
.ba__eyebrow { display: inline-block; color: var(--sale); font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; }
.ba { display: grid; gap: 10px; }
/* the library's base rules, inlined so the two photos never flash stacked
   before the element upgrades */
img-comparison-slider { visibility: hidden; }
img-comparison-slider [slot="second"] { display: none; }
img-comparison-slider.rendered { visibility: inherit; }
img-comparison-slider.rendered [slot="second"] { display: unset; }

.ba__stage { position: relative; }
.ba__frame {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: #e6e9ee;
  box-shadow: 0 14px 34px rgb(0 20 40 / .16);
  outline: none;
  cursor: ew-resize;
  --divider-width: 3px;
  --divider-color: #fff;
  --divider-shadow: 0 0 0 1px rgb(0 20 40 / .08), 0 0 14px rgb(0 20 40 / .3);
  --default-transition-time: 0ms;
  --handle-position-start: 50%;
}
.ba__stage.is-kb .ba__frame:focus { outline: 3px solid var(--blue); outline-offset: 3px; }
.ba__img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  transition: opacity .18s var(--ease);
}
.ba__stage.is-swapping .ba__img { opacity: 0; }
.ba__knob {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  box-shadow: 0 6px 18px rgb(0 20 40 / .3);
}
.ba__knob svg { width: 28px; height: 28px; }
/* a soft ring until the first touch shows the handle is live */
.ba__stage:not(.is-used) .ba__knob::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid #fff;
  animation: baPing 1.8s ease-out infinite;
}
@keyframes baPing { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.ba__hint {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: .5em .85em;
  border-radius: 999px;
  background: rgb(0 20 40 / .74);
  color: #fff;
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: .04em;
  transition: opacity .3s var(--ease);
}
.ba__stage.is-used .ba__hint { opacity: 0; }
.ba__tag {
  position: absolute; top: 12px;
  padding: .42em .85em;
  border-radius: 999px;
  color: #fff;
  font-size: var(--fs-3xs);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  pointer-events: none;
  transition: opacity .2s var(--ease);
}
.ba__tag--before { left: 12px; background: rgb(0 20 40 / .62); }
.ba__tag--after { right: 12px; background: rgb(6 118 71 / .9); }
.ba__stage.is-edge-left .ba__tag--before, .ba__stage.is-edge-right .ba__tag--after { opacity: 0; }
.ba__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ba__thumb {
  position: relative;
  appearance: none;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #e6e9ee;
  aspect-ratio: 4 / 5;
  cursor: pointer;
  transition: border-color .15s var(--ease), transform .15s var(--ease);
}
.ba__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba__thumb span {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 4px 5px;
  background: linear-gradient(transparent, rgb(0 20 40 / .72));
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
  line-height: 1.1;
}
.ba__thumb[aria-pressed="true"] { border-color: var(--navy); box-shadow: 0 0 0 3px rgb(0 58 112 / .15); }
.ba__thumb:active { transform: scale(.97); }
.ba__note { margin: 0 0 var(--sp-sm); color: var(--ink-2); font-size: var(--fs-3xs); line-height: 1.45; }

/* the units line under this heading is gone, so the list needs the room */
#kit h2 { margin-bottom: var(--sp-sm); }

/* ---- the questions above before & after (owner's copy, 15 Sep 2026) ---- */
.ba__ask {
  margin: 0 0 6px;
  color: var(--navy);
  font-size: var(--fs-2xl);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-wrap: balance;
}
/* each question wraps as a whole, never mid-phrase */
.ba__ask span { display: inline-block; }
.ba__promise { margin: 0 0 var(--sp-md); color: var(--ink); font-size: var(--fs-md); font-weight: 600; line-height: 1.45; text-wrap: pretty; }
/* A straight rule between the questions and the before & after (owner, 15 Sep
   2026): a hairline across the text column, with a short red lead that sits
   over the red eyebrow below it. */
.ba__rule {
  position: relative;
  height: 1px;
  margin: 0 0 var(--sp-md);
  border: 0;
  background: rgb(0 58 112 / .16);
  overflow: visible;
}
.ba__rule::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: -1px;
  width: 40px;
  height: 3px;
  border-radius: 3px;
  background: var(--sale);
}

/* ---- how this duo works ---- */
.sec--duo { background: var(--wash); }
.sec--duo h2 { text-transform: uppercase; letter-spacing: .02em; }
.duo { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2xs); }
.duo__step {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sp-xs);
  padding: 14px 14px 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-align: start;
}
.duo__label {
  display: block;
  margin-bottom: 4px;
  color: var(--navy);
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.duo__label b { color: var(--blue); font-weight: 800; }
.duo__body p { margin: 0; color: var(--ink-2); font-size: var(--fs-xs); line-height: 1.5; }
.duo__how {
  display: inline-block;
  margin-top: 8px;
  padding: .32em .75em;
  border-radius: 999px;
  background: #e8f1fa;
  color: var(--navy);
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: .04em;
}
.duo__shot { width: 56px; height: 56px; border-radius: var(--r-md); background: var(--wash); object-fit: cover; }
.duo__flow {
  margin: var(--sp-sm) 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 8px;
  color: var(--navy);
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.duo__flow span { padding: .5em .9em; border-radius: 999px; background: #e8f1fa; }
.duo__flow span.is-done { background: var(--good); color: #fff; }
.duo__flow i { font-style: normal; color: var(--blue); }

/* ---- why the second bottle is free: the two-month plan ---- */
.sec--plan { background: var(--wash); }
.plan__eyebrow {
  display: inline-block;
  margin-bottom: 6px;
  color: var(--good);
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.plan__track {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  margin: 0 0 var(--sp-md);
  padding: 20px 14px 16px;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, #0a4f93 0%, var(--navy) 55%, var(--navy-deep) 100%);
  color: #fff;
  box-shadow: 0 14px 34px rgb(0 20 40 / .18);
  overflow: hidden;
}
/* a soft light behind month two, so the free bottle is where the eye lands */
.plan__track::before {
  content: "";
  position: absolute;
  inset: -40% -20% -40% 45%;
  z-index: -1;
  background: radial-gradient(closest-side, rgb(255 209 102 / .22), transparent 70%);
  pointer-events: none;
}
.plan__month { display: grid; justify-items: center; gap: 3px; min-width: 0; text-align: center; }
.plan__pic { position: relative; display: inline-block; margin-bottom: 6px; }
.plan__shot {
  width: 72px; height: 72px;
  border-radius: 18px;
  background: #fff;
  object-fit: cover;
  box-shadow: 0 8px 18px rgb(0 10 30 / .35);
}
.plan__free {
  position: absolute; top: -9px; right: -14px;
  padding: .36em .62em;
  border-radius: 999px;
  background: var(--good);
  color: #fff;
  font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: .08em; line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 4px 10px rgb(0 0 0 / .3);
}
.plan__month b { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.01em; line-height: 1.1; }
.plan__tag { font-size: var(--fs-3xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #ffd166; }
.plan__month em { font-style: normal; font-size: var(--fs-2xs); line-height: 1.35; color: rgb(255 255 255 / .86); text-wrap: balance; }
.plan__arrow {
  align-self: center;
  margin-top: 18px;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgb(255 255 255 / .12);
  border: 1px solid rgb(255 255 255 / .22);
  color: #ffd166;
}
.plan__arrow .ico { width: 18px; height: 18px; }
.plan__note {
  grid-column: 1 / -1;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgb(255 255 255 / .16);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-align: center;
  text-wrap: balance;
}

.plan__why { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2xs); }
.plan__why li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-align: start;
}
.plan__ico {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #e8f1fa;
  color: var(--navy);
  display: grid; place-items: center;
}
.plan__ico .ico { width: 24px; height: 24px; stroke-width: 1.75; }
.plan__why li > div > b { display: block; margin-bottom: 4px; color: var(--navy); font-size: var(--fs-sm); font-weight: 700; line-height: 1.25; }
.plan__why li > div > span { display: block; color: var(--ink-2); font-size: var(--fs-2xs); line-height: 1.5; }

/* ---- ratings and review cards ----
   A star row is one gradient under a five-star mask, so a live 4.8 fills
   exactly 96% of it. */
.stars {
  --fill: 100%;
  display: inline-block;
  flex: none;
  width: 5.6em;
  height: 1.1em;
  background: linear-gradient(90deg, #f5b301 var(--fill), #d5dbe3 var(--fill));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 6 6.6.9-4.8 4.6 1.2 6.6L12 17.5l-5.9 3.2 1.2-6.6L2.5 9.5l6.6-.9z'/%3E%3C/svg%3E") 0 50% / 1.12em 1.1em repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 6 6.6.9-4.8 4.6 1.2 6.6L12 17.5l-5.9 3.2 1.2-6.6L2.5 9.5l6.6-.9z'/%3E%3C/svg%3E") 0 50% / 1.12em 1.1em repeat-x;
}
.stars--sm { font-size: 14px; }
.ticker__stars { font-size: .82em; margin-right: 6px; vertical-align: -.14em; }

.scores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2xs); margin: var(--sp-sm) 0 var(--sp-md); }
.score {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 4px;
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 22px rgb(0 20 40 / .06);
  text-align: start;
}
.score__num { color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600; line-height: 1; }
.score__num b { color: var(--ink); font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -.02em; }
.score .stars { font-size: 16px; margin-top: 4px; }
.score__count { color: var(--ink-2); font-size: var(--fs-3xs); }
.score__prod { margin-top: 2px; color: var(--navy); font-size: var(--fs-2xs); font-weight: 700; }

.quotes { display: grid; gap: var(--sp-2xs); }
.quote {
  margin: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 22px rgb(0 20 40 / .06);
  text-align: start;
}
.quote blockquote { margin: 0; color: var(--ink); font-size: var(--fs-xs); line-height: 1.55; }
.quote figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: var(--fs-3xs);
}
.quote__name { color: var(--ink); font-size: var(--fs-2xs); font-weight: 700; }
.quote__verified { display: inline-flex; align-items: center; gap: 4px; color: var(--good); font-weight: 700; }
.quote__verified svg { width: 13px; height: 13px; }
.quote__prod { margin-left: auto; padding: .25em .65em; border-radius: 999px; background: var(--wash); font-weight: 600; }
.quotes__note { margin: var(--sp-2xs) 0 0; color: var(--ink-2); font-size: var(--fs-3xs); line-height: 1.45; }

.trust-rating b { font-weight: 700; }
.trust-rating .ico { color: #f5b301; }

@media (min-width: 720px) {
  .plan__why, .quotes { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
}

/* ---- formula cards ----
   Rebuilt from the brand's own listing creative. The photo is an absolutely
   positioned layer with a gradient mask, not a fixed strip, so it fades into
   the card at every width and the text never has to sit on a busy pixel. */
.formula { display: grid; gap: var(--sp-2xs); }

.fcard {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--paper);
  min-block-size: 82px;
  display: flex;
  align-items: center;
}

.fcard__art {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: 48%;
  block-size: 100%;
  object-fit: cover;
  z-index: 0;
  /* fully transparent where the copy sits, opaque only on the outer edge */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 62%);
  mask-image: linear-gradient(to right, transparent 0%, #000 62%);
}

.fcard__txt {
  position: relative;
  z-index: 1;
  /* the section centres its copy on wide screens; a card must not follow */
  text-align: start;
  padding: 12px 14px;
  max-inline-size: 64%;
}
.fcard__txt b {
  display: block;
  /* --cyan is 2.6:1 on paper and fails; this blue clears 4.5:1 and keeps the
     bright, italic character the listing creative uses */
  color: var(--blue);
  font-style: italic;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 3px;
}
.fcard__txt span {
  display: block;
  color: var(--ink-2);
  font-size: var(--fs-3xs);
  line-height: 1.4;
}

/* Past this width the copy no longer needs to hide from the photo, so the
   card can give the art more room and the text a comfortable measure. */
@media (min-width: 560px) {
  .fcard { min-block-size: 96px; }
  .fcard__txt { max-inline-size: 60%; padding: 14px 18px; }
  .fcard__art { inline-size: 44%; }
}

/* steps */
.steps { counter-reset: s; display: grid; gap: 14px; }
.step {
  counter-increment: s;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  align-items: start;
}
.step::before {
  content: counter(s);
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 600;
  display: grid;
  place-items: center;
}
.step b { display: block; font-size: var(--fs-sm); font-weight: 600; }
.step span { display: block; font-size: 12.5px; color: var(--ink-2); }
.step__chip {
  display: inline-block;
  margin-top: 8px;
  padding: .32em .75em;
  border-radius: 999px;
  background: #e8f1fa;
  color: var(--navy);
  font-size: var(--fs-3xs);
  font-style: normal;
  font-weight: 700;
  letter-spacing: .04em;
}

/* gallery */
.gallery {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  margin: 0 calc(-1 * var(--secpad));
  padding: 0 var(--secpad) 4px;
  scrollbar-width: none;
}
.gallery::-webkit-scrollbar { display: none; }
.gallery img {
  width: 78%;
  max-width: 300px;
  flex: none;
  border-radius: var(--r-md);
  scroll-snap-align: center;
  background: var(--wash);
}

/* assurance */
.assure { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; text-align: center; }
.assure div {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-xs) var(--sp-2xs);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3xs);
  color: var(--navy);
}
.assure b { display: block; font-size: 12.5px; font-weight: 600; }
.assure span { font-size: 10.5px; color: var(--ink-2); }


#shop[hidden] { display: none; }

#shop {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}
/* anchor and snap scrolling still has to clear the bar */
html { scroll-padding-bottom: var(--bar-reserve); }

/* ---- the founder ad ---- */
/* ---- sticky buy bar ---- */
.buybar[hidden] { display: none; }

.buybar {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  z-index: 40;
  container-type: inline-size;
  container-name: buybar;
  /* max() floor, WebKit's own pattern: env() is 0 on desktop and in
     non-cover Safari, so a bare env() would leave no padding there. */
  padding: var(--sp-2xs) calc(var(--sp-xs) + var(--safe-r))
           max(var(--sp-2xs), var(--safe-b)) calc(var(--sp-xs) + var(--safe-l));
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
}
.buybar__price { line-height: 1.15; }
.buybar__price b { font-size: var(--fs-lg); font-weight: 700; }
.buybar__price s { display: block; font-size: var(--fs-3xs); color: var(--ink-2); }

.cta {
  flex: 1;
  min-height: var(--cta-h);
  border: 0;
  border-radius: var(--r-md);
  background: var(--navy);
  color: #fff;
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: .01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .12s var(--ease), background .15s;
}
.cta:active { transform: scale(.975); background: var(--navy-deep); }
.cta svg { width: 17px; height: 17px; }

/* Buy now: the real countdown and the prepaid offer sit inside the button, and a
   slow light sweep draws the eye to it. The global reduced-motion rule stops
   the sweep. */
.cta--buy {
  position: relative;
  overflow: hidden;
  flex-direction: column;
  gap: 3px;
  min-height: 62px;
  padding: 8px 14px;
  background: linear-gradient(180deg, #0a4f93 0%, var(--navy) 100%);
  box-shadow: 0 8px 22px rgb(0 58 112 / .32), inset 0 1px 0 rgb(255 255 255 / .18);
}
.cta--buy:active { background: var(--navy-deep); }
.cta__main { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-lg); font-weight: 800; letter-spacing: .02em; line-height: 1.1; }
.cta__sub { font-size: var(--fs-3xs); font-weight: 600; line-height: 1.2; opacity: .95; }
.cta__sub b { color: #ffd166; font-weight: 800; font-variant-numeric: tabular-nums; }
.cta--buy::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .28) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: ctaSweep 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ctaSweep { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* ---- add-to-cart flash ---- */
.flash {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--navy-deep);
  color: #fff;
  display: grid;
  place-items: center;
  gap: 14px;
  align-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s linear;
}
.flash.is-on { opacity: 1; pointer-events: auto; }
.flash__tick {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--good);
  display: grid;
  place-items: center;
}
.flash__tick svg { width: 28px; height: 28px; }
.flash p { margin: 0; font-size: var(--fs-sm); font-weight: 500; }

/* ---- refusal notice ---- */
.halt {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(0, 24, 46, .72);
  display: grid;
  place-items: center;
  padding: 24px;
}
.halt[hidden] { display: none; }
.halt__card {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 22px 20px;
  max-width: 320px;
  text-align: center;
  display: grid;
  gap: 8px;
}
.halt__card b { font-size: var(--fs-md); font-weight: 600; }
.halt__card span { font-size: var(--fs-xs); color: var(--ink-2); }
.halt__card button {
  margin-top: 8px;
  min-height: 44px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--navy);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* ============================================================
   RESPONSIVE
   Shedding is driven by HEIGHT alone, because running out of vertical
   room is the actual constraint. The old rules coupled width AND
   orientation AND height and fought each other.
   The desktop flip is driven by SHAPE, because a 1280x1024 monitor and a
   1280x600 laptop share a width and have completely different pillarbox
   geometry.
   ============================================================ */

@media (max-height: 620px) {
  .hero { min-height: 0; }
  /* Under this height .hero drops its min-height, the gap row collapses to
     nothing and the copy overflows through it. There is no band left to sit
     in, so the flash steps aside rather than landing on the headline. The
     B1G1 is still carried by the hero sub, the kit list flag and the price. */
  .hero__copy { max-block-size: 72%; }
  .hero__sub { display: none; }
}

@media (max-height: 480px) {
  .hero__copy { max-block-size: 88%; gap: var(--sp-3xs); }
  .kicker, .trustrow { display: none; }
  .logo { height: 24px; }
}

/* The bar sheds its own content based on its OWN width, which is the thing
   that actually overflows. Container queries have been Baseline widely
   available since Aug 2025 (Safari 16). */
@container buybar (width < 340px) {
  .buybar__price s { display: none; }
}

.stage, .stage__film { display: contents; }

@media (min-aspect-ratio: 1 / 1) and (min-width: 900px) {
  :root { --offerbar-h: 83px; }   /* measured at 1440px */
  /* Wide screens: the ad is a phone-shaped card that stays in view while
     the kit and the add-ons sit beside it, the before-and-after runs as a
     band under both, and every other section holds a readable width. Phones
     never see any of this. */
  #shop { background: var(--wash); }

  .stage {
    display: grid;
    grid-template-columns: minmax(300px, 440px) minmax(0, 600px);
    column-gap: clamp(28px, 4vw, 64px);
    justify-content: center;
    align-items: start;
    padding: 36px 32px 8px;
  }
  /* The film's own box spans only the kit, plan, add-on and duo rows, so the sticky card
     stops there instead of sliding over the before-and-after band below. */
  .stage__film {
    display: block;
    grid-column: 1;
    grid-row: 1 / span 4;
    align-self: stretch;
  }
  .stage__film > .hero {
    margin-left: auto;
    position: sticky;
    top: calc(var(--offerbar-h, 0px) + 24px);
    width: min(100%, 440px, calc((100vh - var(--offerbar-h, 0px) - 56px) * .5625));
    min-height: 0;
    height: auto;
    aspect-ratio: 9 / 16;
    border-radius: 28px;
    box-shadow: 0 30px 70px rgb(0 20 40 / .28);
  }
  .hero__poster, .hero__video { object-fit: cover; }
  .hero__cue { padding-bottom: var(--sp-lg); }
  .cue__scroll { display: none; }

  .stage > .sec {
    grid-column: 2;
    margin-bottom: 20px;
    padding: 28px 32px;
    border-radius: 24px;
    box-shadow: 0 1px 0 var(--line), 0 14px 34px rgb(0 20 40 / .07);
  }
  .stage > #kit { grid-row: 1; background: var(--paper); }
  .stage > #plan { grid-row: 2; background: var(--paper); }
  .stage > #plan .plan__why { grid-template-columns: minmax(0, 1fr); }
  .stage > #plan .plan__why li { background: var(--wash); border-color: transparent; }
  .stage > #surprise { grid-row: 3; }
  .stage > #duo { grid-row: 4; background: var(--paper); }
  .stage > #duo .duo__step { background: var(--wash); border-color: transparent; }

  .stage > #results {
    grid-column: 1 / -1;
    grid-row: 5;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    column-gap: 64px;
    align-items: center;
    width: 100%;
    max-width: 1104px;
    justify-self: center;
    margin: 12px 0 44px;
    padding: 44px 56px;
    background: var(--paper);
  }
  #results .ba__copy h2 { font-size: var(--fs-3xl); line-height: 1.1; }
  #results .ba__copy .lede { font-size: var(--fs-md); }

  #shop > .sec { padding-inline: max(32px, calc((100% - 1104px) / 2)); }
  #shop > .sec > h2, #shop > .sec > .lede { text-align: center; }
  .plan__track { max-width: 640px; margin-inline: auto; padding: 26px 28px 20px; }
  .plan__shot { width: 88px; height: 88px; border-radius: 22px; }
  .plan__why { max-width: 1104px; margin-inline: auto; }
  /* Odd card counts: centre the last row instead of leaving one card stranded. */
  .quotes, .formula { display: flex; flex-wrap: wrap; justify-content: center; }
  .quote { flex: 0 1 calc((100% - 2 * var(--sp-2xs)) / 3); }
  .formula > .fcard { flex: 0 1 calc((100% - var(--sp-2xs)) / 2); }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery { justify-content: center; margin-inline: 0; padding-inline: 0; }
  .gallery img { width: 240px; }

  /* Sits under the offer column, not across the film card. */
  .buybar {
    align-self: flex-end;
    width: min(600px, calc(100% - 64px - 440px - clamp(28px, 4vw, 64px)));
    margin-right: max(32px, calc((100% - 440px - clamp(28px, 4vw, 64px) - 600px) / 2));
    margin-bottom: 18px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: 0 18px 44px rgb(0 20 40 / .2);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* the gallery's <picture> wrappers must not become the flex items */
.gallery picture { display: contents; }

/* ---- Buy now celebration: the kit packed into a gift box ----
   A modal <dialog>, so it sits in the browser's top layer above Shiprocket's
   drawer. Everything that moves is transform or opacity, plus the confetti
   canvas; app.js drives the timeline with the Web Animations API. */
.pack {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: max(16px, var(--safe-t)) 16px max(16px, var(--safe-b));
  border: 0;
  overflow: hidden;
  color: #fff;
  text-align: center;
  background: radial-gradient(120% 75% at 50% 56%, #1463b4 0%, #003a70 46%, #001226 100%);
  opacity: 0;
  transition: opacity .22s ease;
  touch-action: none;
  overscroll-behavior: contain;
}
.pack[open] { display: grid; place-content: center; justify-items: center; gap: clamp(6px, 1.4vh, 12px); }
.pack::backdrop { background: transparent; }
.pack:focus { outline: none; }
.pack.is-on { opacity: 1; }
.pack.is-out { opacity: 0; transition-duration: .34s; }

.pack__title, .pack__dots, .pack__sub, .pack__go { position: relative; z-index: 3; margin: 0; }
.pack__title {
  font-size: var(--fs-3xl);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgb(0 0 0 / .25);
}
.pack__emoji:empty { display: none; }
.pack__emoji { margin-left: .25em; }
/* gold light running through the headline once the box is packed */
.pack.is-party .pack__word {
  background: linear-gradient(100deg, #fff 30%, #ffd166 45%, #fff6d8 52%, #fff 68%) 0 0 / 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  animation: packShimmer 1.3s linear infinite;
}
@keyframes packShimmer { to { background-position: -160% 0; } }

/* one dot per product, lit as it lands in the box */
.pack__dots { display: flex; align-items: center; gap: 9px; min-height: 12px; }
.pack__dots i { width: 10px; height: 10px; border-radius: 50%; background: rgb(255 255 255 / .22); transition: background-color .18s ease; }
.pack__dots i.is-in { background: #ffd166; box-shadow: 0 0 12px rgb(255 209 102 / .8); animation: packDot .38s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes packDot { 50% { transform: scale(1.7); } }

.pack__sub { min-height: 1.5em; font-size: var(--fs-md); font-weight: 700; color: #ffd166; }
.pack__go { display: grid; justify-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 600; color: rgb(255 255 255 / .9); opacity: 0; transition: opacity .25s ease; }
.pack.is-party .pack__go { opacity: 1; }
.pack__go b { display: block; width: min(56vw, 220px); height: 4px; border-radius: 999px; background: rgb(255 255 255 / .18); overflow: hidden; }
.pack__go i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffd166, #fff1c2); transform: scaleX(0); transform-origin: 0 50%; }

/* the lid lifts above the stage, so it keeps clear of the title */
.pack__stage { position: relative; z-index: 2; width: min(78vw, 340px, 44vh); aspect-ratio: 1; margin-top: min(18vw, 76px); }
.pack__glow {
  position: absolute;
  inset: -38%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 214 122 / .42), rgb(255 214 122 / .12) 48%, transparent 72%);
  pointer-events: none;
}
.pack__rays {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgb(255 244 214 / .13) 0deg 8deg, transparent 8deg 18deg);
  -webkit-mask: radial-gradient(closest-side, #000 26%, transparent 72%);
  mask: radial-gradient(closest-side, #000 26%, transparent 72%);
  animation: packSpin 18s linear infinite;
}
@keyframes packSpin { to { transform: rotate(1turn); } }
.pack__shadow { position: absolute; left: 13%; width: 74%; bottom: 4%; height: 10%; background: radial-gradient(closest-side, rgb(0 6 18 / .6), transparent); }
.pack__box { position: absolute; inset: 0; transform-origin: 50% 90%; }
.pack__back {
  position: absolute; left: 19.5%; width: 61%; bottom: 51.2%; height: 6.5%;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(#3d0410, #7a0b1e);
  clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%);
}
.pack__items { position: absolute; inset: 0; }
.pack__front { position: absolute; left: 18%; width: 64%; bottom: 10%; height: auto; aspect-ratio: 200 / 132; transform-origin: 50% 100%; }
.pack__glint { transform: translateX(-90px) skewX(-18deg); }
.pack__lid { position: absolute; left: 15%; width: 70%; bottom: 49.3%; height: auto; aspect-ratio: 220 / 96; transform-origin: 50% 90%; }
.pack__bow { transform-box: fill-box; transform-origin: 50% 70%; }

.pack__tile {
  position: absolute;
  left: 50%; top: 50%;
  width: 24%;
  aspect-ratio: 1;
  margin: -12% 0 0 -12%;
  border-radius: 20%;
  background: #fff;
  box-shadow: 0 12px 26px rgb(0 8 24 / .42);
  opacity: 0;
}
.pack__pic { position: absolute; inset: 7%; overflow: hidden; border-radius: 16%; }
.pack__pic img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.22); }
.pack__free {
  position: absolute; top: -9%; right: -14%;
  padding: .32em .56em;
  border-radius: 999px;
  background: var(--good);
  color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .06em; line-height: 1;
  box-shadow: 0 4px 10px rgb(0 0 0 / .3);
}

.pack__balloons { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.pack__balloon {
  position: absolute;
  bottom: -96px;
  width: 46px; height: 58px;
  margin-left: -23px;
  border-radius: 50% 50% 47% 53% / 58% 58% 42% 42%;
  background: radial-gradient(circle at 32% 27%, rgb(255 255 255 / .75) 0 6%, rgb(255 255 255 / 0) 24%), var(--c);
  box-shadow: inset -7px -9px 16px rgb(0 0 0 / .2);
  opacity: 0;
}
.pack__balloon::before {
  content: "";
  position: absolute; left: 50%; bottom: -6px;
  width: 10px; height: 8px; margin-left: -5px;
  background: var(--c);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.pack__balloon::after {
  content: "";
  position: absolute; left: 50%; top: calc(100% + 2px);
  width: 1.5px; height: 70px; margin-left: -.75px;
  background: linear-gradient(rgb(255 255 255 / .7), rgb(255 255 255 / 0));
}

.pack__spark {
  position: absolute;
  z-index: 1;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  opacity: 0;
  pointer-events: none;
  animation: packTwinkle 1.5s ease-in-out infinite;
}
@keyframes packTwinkle {
  0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(45deg); }
}
/* over the box and the balloons, under the words, so the headline and the
   price stay readable at the height of the party */
.pack__confetti { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }

/* reduced motion: the packed box and the message, held still */
.pack.is-still .pack__rays { animation: none; }
.pack.is-still .pack__go i { transform: none; }

body.is-packing { overflow: hidden; }

/* ---- product videos, an Instagram-style carousel (owner, 15 Sep 2026) ----
   Vertical 9:16 cards that snap one at a time on phones, with the next card
   peeking in, dots below and a 1/4 count on each card. Wide screens show four
   in a row. reels.js builds the cards and runs playback. */
.sec--reels { background: var(--wash); }
/* no lede under this heading (owner, 16 Sep 2026), so the heading carries the gap to the cards */
.sec--reels h2 { margin-bottom: var(--sp-md); }
.reels__eyebrow { display: inline-block; margin-bottom: 6px; color: var(--sale); font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.reels {
  position: relative;
  display: flex;
  /* the gap matches the gutter, so the card before the one in view is fully
     out of sight instead of showing a sliver at the screen edge */
  gap: calc(var(--secpad) + var(--safe-l));
  /* room above and below so the scroller does not clip the card shadows into
     hard edges; the negative margins give that room back to the layout */
  margin: -14px calc(-1 * (var(--secpad) + var(--safe-r))) -18px calc(-1 * (var(--secpad) + var(--safe-l)));
  padding: 14px calc(var(--secpad) + var(--safe-r)) 30px calc(var(--secpad) + var(--safe-l));
  scroll-padding-inline: calc(var(--secpad) + var(--safe-l));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.reels::-webkit-scrollbar { display: none; }
.reels:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.reel {
  position: relative;
  flex: 0 0 min(76vw, 300px);
  aspect-ratio: 9 / 16;
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  background: #0d1824;
  box-shadow: 0 8px 20px rgb(0 20 40 / .14);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  isolation: isolate;
}
.reel__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0d1824; }
.reel__toggle {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center;
  padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.reel__toggle:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.reel__play {
  display: grid; place-items: center;
  width: 60px; height: 60px; border-radius: 50%;
  background: rgb(0 0 0 / .45);
  opacity: 0; transform: scale(.85);
  transition: opacity .2s ease, transform .2s ease;
}
.reel__play svg { width: 26px; height: 26px; margin-left: 3px; fill: currentColor; }
.reel.is-paused .reel__play { opacity: 1; transform: none; }
.reel__count {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  padding: 3px 9px; border-radius: 999px;
  background: rgb(0 0 0 / .5); color: #fff;
  font-size: 12px; font-weight: 600; line-height: 1.4; font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.reel__sound {
  position: absolute; right: 6px; bottom: 10px; z-index: 2;
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: #fff; cursor: pointer;
}
.reel__sound span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgb(0 0 0 / .5); }
.reel__sound svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.reel__sound:focus-visible { outline: none; }
.reel__sound:focus-visible span { outline: 2px solid #fff; outline-offset: 2px; }
.reel__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 44px 60px 18px 12px;
  background: linear-gradient(to bottom, transparent, rgb(0 0 0 / .62));
  color: #fff; font-size: var(--fs-xs); font-weight: 600; line-height: 1.3; text-align: start; text-wrap: balance;
  pointer-events: none;
}
.reel__bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 3px; background: rgb(255 255 255 / .28); pointer-events: none; }
.reel__bar i { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: 0 50%; }
/* above the scroller, whose shadow padding would otherwise swallow taps on the dots */
.reels__dots { position: relative; z-index: 1; display: flex; justify-content: center; margin-top: 6px; }
.sec--reels:not(.is-scrollable) .reels__dots { display: none; }
.reels__dot { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.reels__dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgb(0 20 40 / .22); transition: transform .2s ease, background-color .2s ease; }
.reels__dot[aria-current="true"]::before { background: var(--blue); transform: scale(1.3); }
@media (prefers-reduced-motion: reduce) {
  .reel__play, .reels__dot::before { transition: none; }
}
@media (min-aspect-ratio: 1 / 1) and (min-width: 900px) {
  .sec--reels { text-align: center; }
  .reels { gap: 16px; margin-inline: -24px; padding-inline: 24px; scroll-padding-inline: 24px; }
  .reel { flex: 0 0 calc((100% - 3 * 16px) / 4); max-width: 264px; }
  .reel:first-child { margin-inline-start: auto; }
  .reel:last-child { margin-inline-end: auto; }
}

/* ---- footer, as on lemmorte.com (owner, 15 Sep 2026): logo, phones, help line, socials ---- */
.foot {
  padding: var(--sp-xl) calc(var(--page-gutter) + var(--safe-r)) var(--sp-lg) calc(var(--page-gutter) + var(--safe-l));
  background: var(--navy);
  color: #fff;
  font-size: var(--fs-sm);
  line-height: 1.6;
  text-align: start;
}
.foot a { color: #fff; text-decoration: none; }
.foot a:focus-visible { outline-color: #fff; }
@media (hover: hover) and (pointer: fine) { .foot a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.foot__logo { height: 46px; width: auto; margin-bottom: var(--sp-xs); }
.foot__contact { display: grid; justify-items: start; gap: 2px; }
.foot__contact p { margin: 0; }
.foot__social { list-style: none; margin: var(--sp-xs) 0 0 -11px; padding: 0; display: flex; }
.foot__social a { display: grid; place-items: center; width: 44px; height: 44px; }
.foot__social svg { width: 22px; height: 22px; fill: currentColor; }

/* The price and results line, moved out of the footer so the footer holds only
   what lemmorte.com's does. It closes the kit section. */
.fineprint { margin: var(--sp-md) 0 0; color: var(--ink-2); font-size: var(--fs-3xs); line-height: 1.5; text-wrap: pretty; }

@media (min-aspect-ratio: 1 / 1) and (min-width: 900px) {
  .foot { padding-top: 56px; padding-bottom: 48px; padding-inline: max(32px, calc((100% - 1104px) / 2)); }
  .fineprint { max-width: 720px; margin-inline: auto; text-align: center; }
}