/* even · home page
   One stylesheet, organized by section: tokens, fonts, base, call to action, header, hero (the two phones),
   faces, steps, progress, the nine scores, the App Store listing, footer, sticky button, desktop.
   Colors and type mirror the app. Light only: the app has no dark mode.
   Everything here draws the FINAL frame, so the page is complete with JavaScript off or with Reduce Motion.
   html.mo (set in <head> only when motion is allowed) holds a few small hero layers at their first frame. */

/* ---------------------------------------------------------------- tokens */
:root {
  --page: #FFFAF3; --card: #FFFFFF; --line: #F0E6DA; --soft: #FFF1DC;
  --ink: #26201D; --muted: #7C716B; --faint: #B3A79E;
  --amber: #F4A825; --amber-ink: #1F1A17; --amber-soft: #FDE7B8; --amber-deep: #B87A0E;
  --dark: #4A403A; --sage: #7B9E6B; --sage-soft: #E4EEDD; --sage-ink: #4F7543;
  /* text-only shades for small labels (AA on amberSoft, sageSoft, peach and white); the brand amber stays on fills and rings */
  --amber-text: #865700; --sage-text: #3F6236; --soft-text: #6E635D;
  --blush: #F3DCD6; --peach: #FFE3CC; --lavender: #EFE6F7; --coral: #E98C7E;
  /* concern colors, from the app's "What changed" list */
  --c-acne: #D9765E; --c-red: #CF6870; --c-spots: #B3804A; --c-pores: #8A7CC2; --c-tex: #5F9A72;
  --c-oil: #C99A1E; --c-even: #C27F5C; --c-eyes: #7380B3;
  --font-display: 'Playfair Display', 'Playfair Fallback', Georgia, 'Times New Roman', serif;
  --font-sans: 'Nunito Sans', 'Nunito Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --shadow-card: 0 4px 20px rgba(62, 46, 40, .06);
  --shadow-amber: 0 10px 28px rgba(244, 168, 37, .42);
  --sticker-shadow: 0 1px 1px rgba(38, 32, 29, .06), 0 10px 22px -8px rgba(38, 32, 29, .32);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
}

/* ---------------------------------------------------------------- fonts (self-hosted, variable) */
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url('../fonts/nunito-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url('../fonts/nunito-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('../fonts/playfair-display-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('../fonts/playfair-display-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* metric-matched stand-ins while the real fonts load, so the headline never re-wraps or jumps */
@font-face { font-family: 'Playfair Fallback'; font-weight: 400 600; src: local('Georgia'), local('Georgia-Regular');
  size-adjust: 101.4%; ascent-override: 106.7%; descent-override: 24.8%; line-gap-override: 0%; }
@font-face { font-family: 'Playfair Fallback'; font-weight: 700 900; src: local('Georgia Bold'), local('Georgia-Bold');
  size-adjust: 87.5%; ascent-override: 123.7%; descent-override: 28.7%; line-gap-override: 0%; }
@font-face { font-family: 'Nunito Fallback'; font-weight: 200 600; src: local('Arial'), local('ArialMT');
  size-adjust: 100.3%; ascent-override: 100.8%; descent-override: 35.2%; line-gap-override: 0%; }
@font-face { font-family: 'Nunito Fallback'; font-weight: 700 1000; src: local('Arial Bold'), local('Arial-BoldMT');
  size-adjust: 98.6%; ascent-override: 102.5%; descent-override: 35.8%; line-gap-override: 0%; }

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; background: var(--page); color: var(--ink);
  font-family: var(--font-sans); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1;
  overflow-x: clip;
}
@supports not (overflow: clip) { body { overflow-x: hidden; } }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
p, .lede { text-wrap: pretty; }
h2, h3 { text-wrap: balance; }
.num { font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.nowrap { white-space: nowrap; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
:focus-visible { outline: 3px solid var(--amber-deep); outline-offset: 3px; border-radius: 10px; }
.skip { position: absolute; left: 12px; top: -64px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 10px; text-decoration: none; font-weight: 700; }
.skip:focus { top: 12px; }

/* ---------------------------------------------------------------- the one call to action */
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 28px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--amber); color: var(--amber-ink);
  font-family: var(--font-sans); font-weight: 800; font-size: 17px; letter-spacing: -0.005em; line-height: 1.1;
  text-decoration: none; white-space: nowrap;
  box-shadow: var(--shadow-amber), inset 0 -2px 0 rgba(0, 0, 0, .06);
  transition: transform .3s var(--spring), box-shadow .3s ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
@media (hover: hover) { .cta:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(244, 168, 37, .5), inset 0 -2px 0 rgba(0, 0, 0, .06); } }
.cta:active, .cta.is-press { transform: scale(.96); transition-duration: .12s; }
/* both labels share one grid cell, so the button is always as wide as the longer one: no jump when it answers */
.cta__l { display: grid; justify-items: center; }
.cta__a, .cta__b { grid-area: 1 / 1; }
/* the label that is leaving fades in .12 s; the arriving one waits .1 s, so the two are never readable at once */
.cta__a { transition: opacity .2s ease .1s, transform .32s var(--ease-out-expo) .1s; }
.cta__b { opacity: 0; transform: translateY(7px); transition: opacity .12s ease, transform .2s ease; }
.cta.is-soon .cta__a { opacity: 0; transform: translateY(-7px); transition: opacity .12s ease, transform .2s ease; }
.cta.is-soon .cta__b { opacity: 1; transform: none; transition: opacity .2s ease .1s, transform .32s var(--ease-out-expo) .1s; }
.cta--sm { min-height: 40px; padding: 0 18px; font-size: 14.5px; box-shadow: 0 6px 16px rgba(244, 168, 37, .32); }

/* ---------------------------------------------------------------- header */
.hdr { position: relative; z-index: 50; }
.hdr__in { position: relative; display: flex; align-items: center; justify-content: space-between; height: 58px; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); border-radius: 10px; }
.brand__icon { width: 30px; height: 30px; flex: none; border-radius: 8px; }
.brand__word { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: -0.01em; transform: translateY(-2px); }
.hdr .cta--sm { display: none; }

/* ---------------------------------------------------------------- HERO */
.hero { position: relative; padding: 2px 0 0; overflow-x: clip; }
.hero__glow { position: absolute; left: 0; right: 0; top: 240px; height: 640px; pointer-events: none; z-index: -1;
  background: radial-gradient(52% 46% at 66% 56%, rgba(255, 227, 204, .85), rgba(255, 227, 204, 0) 72%),
              radial-gradient(34% 30% at 22% 70%, rgba(243, 220, 214, .55), rgba(243, 220, 214, 0) 72%); }
.hero__in { position: relative; max-width: 1200px; margin: 0 auto; }
.hero__copy { padding: 0 20px; }
.hero__h1 { font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 1.03; letter-spacing: -0.018em; color: var(--ink); }
.hero__h1 .l { display: block; white-space: nowrap; }
.hero__h1 .l__a, .hero__h1 .l__b { display: block; }
.hero__sub { margin-top: 12px; max-width: 30em; font-size: 17px; line-height: 1.45; color: var(--muted); }
.hero__ctas { margin-top: 20px; }
.cta--hero { width: 100%; max-width: 380px; }

/* the visual: a fixed design box scaled as one piece, so phones, chips and the arrow keep their relations */
.hv-wrap { --bw: 390px; --bh: 456px; --hs: 1; position: relative; width: calc(var(--bw) * var(--hs)); height: calc(var(--bh) * var(--hs)); margin: 16px auto 0; }
.hv { position: absolute; left: 0; top: 0; width: var(--bw); height: var(--bh); transform: scale(var(--hs)); transform-origin: 0 0; }
.hv__ph { position: absolute; }
.hv__ph--cap { left: 14px; top: 96px; transform: rotate(-4deg); z-index: 1; }
.hv__ph--res { left: 186px; top: 36px; transform: rotate(4deg); z-index: 2; }
.hv .phone { --phone-w: calc(434px * var(--k)); }
.hv__ph--cap .phone { --k: .34562; }
.hv__ph--res .phone { --k: .41014; }
.hv__arrow { position: absolute; left: 0; top: 0; width: var(--bw); height: var(--bh); z-index: 3; pointer-events: none; overflow: visible; }
.hv__arrow--desk { display: none; }

/* white chips breaking past the bezel */
.chip {
  position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px 0 9px; border-radius: 12px; background: #fff;
  box-shadow: 0 10px 24px rgba(62, 46, 40, .15), 0 1px 2px rgba(62, 46, 40, .08);
  font-weight: 700; font-size: 12.5px; line-height: 1; color: var(--ink); white-space: nowrap;
}
.chip b { font-family: var(--font-display); font-weight: 400; font-size: 18px; line-height: 1; margin-left: 1px; }
.chip .mr { width: 17px; height: 17px; flex: none; }
.chip--acne { height: 44px; gap: 7px; padding: 0 10px 0 10px; border-radius: 15px; font-size: 15px; font-weight: 800; }
.chip--acne b { font-size: 24px; margin-right: 1px; }
.chip--acne .mr { width: 22px; height: 22px; }
.chip__band { display: inline-flex; align-items: center; height: 21px; padding: 0 8px; border-radius: 999px; background: var(--amber-soft); color: var(--amber-text); font-weight: 800; font-size: 11.5px; }
.chip--acne { left: 206px; top: 2px; }
.chip--spots { left: 12px; top: 386px; }
.chip--red { left: 232px; top: 404px; }

/* ---------- live screens inside the phones (laid out in iPhone points, 402 x 874, scaled by --k) ---------- */
.ls { position: absolute; left: 0; top: 0; width: 402px; height: 874px; transform: scale(var(--k)); transform-origin: 0 0; overflow: hidden; font-family: var(--font-sans); }
.ls picture { display: contents; }
.sb { position: absolute; z-index: 8; left: 0; top: 0; width: 402px; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 7px 30px 0 52px;
  font: 600 17px/1 -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif; letter-spacing: -.01em; }
.sb__i { width: 76px; height: 13px; }
.sb--light { color: #fff; }
.sb--dark { color: var(--ink); }

/* capture (CaptureView): full-bleed front camera, status pill, three tips, the coral shutter */
.cap { background: #15110F; }
.cap__photo { position: absolute; left: 0; top: 0; width: 402px; height: 874px; max-width: none; object-fit: cover; background: #3a2c25 url("data:image/webp;base64,UklGRpgAAABXRUJQVlA4IIwAAACwBACdASoOAB4APt1cpkyopSOiMAgBEBuJYgCdMoBOOCd3XzWda7lZIw9iQ83gAPa+76lTZgLwcAW1lWl8+FZhVEiOZcTRNEj1IQmhJsupCOWcwfvarqzAjre2T4jedJbAKQpCXYTgL0rjmV31OujRpNkcil8A/YSW79BtnPrxtGLJ9NW1e11CjSgAAA==") center / cover no-repeat; }
.cap__top { position: absolute; left: 0; right: 0; top: 0; height: 120px; background: linear-gradient(to bottom, rgba(12, 9, 8, .5), rgba(12, 9, 8, 0)); }
.cap__ctrl { position: absolute; left: 0; right: 0; bottom: 0; height: 280px; background: linear-gradient(to bottom, rgba(10, 8, 7, 0), rgba(10, 8, 7, .42)); }
.cap__pill { position: absolute; left: 0; right: 0; top: 646px; height: 40px; display: grid; justify-items: center; }
.cap__pill > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px; font-weight: 800; font-size: 15px; white-space: nowrap; }
.cap__pill svg { width: 18px; height: 18px; flex: none; }
.cap__pill-a { background: rgba(36, 28, 24, .66); border: 1px solid rgba(255, 255, 255, .12); color: #fff; opacity: 0; }
.cap__pill-b { background: rgba(255, 255, 255, .96); color: var(--ink); box-shadow: 0 4px 16px rgba(0, 0, 0, .18); }
.cap__tips { position: absolute; left: 0; right: 0; top: 698px; display: flex; justify-content: center; gap: 8px; }
.cap__tips span { height: 32px; display: inline-flex; align-items: center; padding: 0 13px; border-radius: 999px; background: rgba(36, 28, 24, .62); color: #fff; font-weight: 600; font-size: 13px; }
.cap__lib { position: absolute; left: 36px; top: 765px; width: 52px; height: 52px; border-radius: 50%; background: rgba(36, 28, 24, .62); border: 1px solid rgba(255, 255, 255, .14); display: grid; place-items: center; }
.cap__lib svg { width: 24px; height: 24px; }
.cap__shutter { position: absolute; left: 160px; top: 750px; width: 82px; height: 82px; border-radius: 50%; background: rgba(0, 0, 0, .3); box-shadow: 0 4px 28px rgba(233, 140, 126, .45); }
.cap__shutter::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3.5px solid var(--coral); }
.cap__shutter i { position: absolute; inset: 6px; border-radius: 50%; background: var(--coral); }
.cap__shutter svg { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.cap__flash { position: absolute; inset: 0; z-index: 7; background: #fff; opacity: 0; pointer-events: none; }

/* result (the app's results photo with marks, then the Acne metric card) */
.res { background: var(--page); }
.res__glow { position: absolute; inset: 0; background: radial-gradient(260px 220px at 0% 4%, rgba(255, 227, 204, .9), transparent 70%), radial-gradient(240px 260px at 100% 96%, rgba(243, 220, 214, .7), transparent 70%); }
.res__x { position: absolute; z-index: 6; left: 340px; top: 62px; width: 40px; height: 40px; border-radius: 50%; background: rgba(243, 235, 225, .96); box-shadow: 0 2px 10px rgba(62, 46, 40, .12); display: grid; place-items: center; }
.res__x svg { width: 15px; height: 15px; }
.res__photo { position: absolute; left: 24px; top: 104px; width: 354px; height: 471px; border-radius: 30px; overflow: hidden; background: #d8c3ae url("data:image/webp;base64,UklGRnwAAABXRUJQVlA4IHAAAAAQBACdASoPABQAPt1apkyopSOiMAgBEBuJYgCdMoRwACRfSEIzlL+OgAD+TrPmdlpNF23zSdbg3CWlPJz9Urt7jgeLe951XfqyqZT9pPIfi8qHYKfBym1j6tvJ3WEn/CQq++/YGhOVfQcQ62OKAAAA") center / cover no-repeat; }
.res__photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.res__marks { position: absolute; left: 0; top: 0; width: 354px; height: 471px; overflow: visible; }
.res__marks circle { fill: none; stroke: #fff; stroke-width: 2.6; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .32)); }
.res__lead { fill: none; stroke: #fff; stroke-width: 1.8; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
.res__sweep { position: absolute; left: 0; right: 0; top: 0; height: 90px; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(to bottom, rgba(255, 214, 150, 0) 0%, rgba(255, 214, 150, .16) 62%, rgba(255, 236, 200, .42) 94%, rgba(255, 255, 255, .85) 96.5%, rgba(255, 255, 255, 0) 100%); }
.res__bubble { position: absolute; left: 50%; top: 7px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 7px 11px 8px 13px; border-radius: 12px; background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); white-space: nowrap; }
.res__bubble b { display: block; font-weight: 800; font-size: 13px; line-height: 1.2; color: var(--ink); }
.res__bubble small { display: block; font-weight: 600; font-size: 11.5px; line-height: 1.25; color: var(--muted); }
.res__bubble svg { width: 9px; height: 13px; flex: none; }
.res__card { position: absolute; left: 24px; top: 556px; width: 354px; padding: 18px; border-radius: 24px; background: #FFF0E1; border: 1px solid #F4DEC6; box-shadow: var(--shadow-card); }
.res__row { display: flex; align-items: center; justify-content: space-between; }
.res__metric { display: inline-block; padding: 7px 14px; border-radius: 12px; background: var(--dark); color: #fff; font-weight: 800; font-size: 22px; line-height: 1.2; }
.ring { position: relative; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring circle { fill: none; }
.res__ring { width: 58px; height: 58px; border-radius: 50%; background: #fff; }
.res__ring .t { stroke: var(--amber); stroke-opacity: .2; stroke-width: 4; }
.res__ring .p { stroke: var(--amber); stroke-width: 4; stroke-linecap: round; }
.res__ring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 400; font-size: 23px; color: var(--ink); }
.res__hr { height: 1px; background: #F4DEC6; margin: 14px 0; }
.res__band { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; }
.res__band i { width: 22px; height: 22px; border-radius: 50%; background: var(--amber-soft); display: grid; place-items: center; }
.res__band i::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber-deep); }
.res__line { margin-top: 6px; font-size: 15px; line-height: 1.35; color: var(--muted); }
.res__next { position: absolute; left: 24px; top: 784px; width: 354px; height: 56px; border-radius: 999px; background: var(--amber); color: var(--amber-ink); display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; font-size: 18px; box-shadow: 0 10px 28px rgba(244, 168, 37, .4); }
.res__next svg { width: 10px; height: 16px; flex: none; }

/* short phone screens (in-app browsers, Safari with its toolbars): the camera's pill, tips and shutter sit
   higher and a little larger, so "Perfect! Hold still" and the shutter are on the first screen. The photo
   still runs under the controls; taller screens keep the app's own layout. */
@media (max-width: 959px) and (max-height: 760px) {
  .cap--hero .cap__photo { top: -124px; height: 998px; }
  .cap--hero .cap__ctrl { height: 330px; background: linear-gradient(to bottom, rgba(16, 12, 10, 0) 0%, rgba(16, 12, 10, .4) 46%, rgba(16, 12, 10, .55) 70%); }
  .cap--hero .cap__pill { top: 492px; transform: scale(1.22); }
  .cap--hero .cap__tips { top: 546px; }
  .cap--hero .cap__lib { top: 608px; }
  .cap--hero .cap__shutter { top: 592px; transform: scale(1.08); }
}

/* motion's first frame (only while html.mo is set; never with JS off or Reduce Motion) */
.mo .cap--hero .cap__pill-a { opacity: 1; }
.mo .cap--hero .cap__pill-b { opacity: 0; }
.mo .cap--hero .cap__shutter i { opacity: 0; transform: scale(.2); }
.mo .hv__arrow { visibility: hidden; }
.mo .res--hero .res__marks circle, .mo .res--hero .res__lead, .mo .res--hero .res__bubble, .mo .res--hero .res__ring b, .mo .res--hero .res__band, .mo .hv .chip:not(.chip--acne) { opacity: 0; }
.mo .res--hero .res__ring .p { stroke-dashoffset: 169.65; }
.mo-late .res--hero .res__marks circle, .mo-late .res--hero .res__lead, .mo-late .res--hero .res__bubble, .mo-late .res--hero .res__ring b, .mo-late .res--hero .res__band, .mo-late .hv .chip, .mo-late .cap--hero .cap__pill > span { transition: opacity .45s ease; }

/* ---------------------------------------------------------------- PHONE (iPhone 17 Pro in CSS; 1u = 1pt = --phone-w / 434) */
.phone { --phone-w: 300px; --u: calc(var(--phone-w) / 434); --metal-a: #47484c; --metal-b: #232427; --metal-c: #121314; --metal-hi: rgba(255,255,255,.62); --metal-rim: rgba(255,255,255,.20); --shadow-tint: 38, 32, 29;
  position: relative; width: var(--phone-w); aspect-ratio: 434 / 906; padding: calc(4.5 * var(--u)); border-radius: calc(71 * var(--u)); flex: none;
  background: radial-gradient(calc(140 * var(--u)) calc(90 * var(--u)) at 8% 2%, var(--metal-hi), transparent 70%), radial-gradient(calc(140 * var(--u)) calc(90 * var(--u)) at 94% 99%, rgba(255,255,255,.34), transparent 70%), linear-gradient(160deg, var(--metal-a) 0%, var(--metal-b) 28%, var(--metal-c) 55%, var(--metal-b) 80%, var(--metal-a) 100%);
  box-shadow: inset 0 0 0 calc(.55 * var(--u)) var(--metal-rim), inset 0 calc(.8 * var(--u)) calc(1.2 * var(--u)) rgba(255,255,255,.18), inset 0 calc(-.8 * var(--u)) calc(1.4 * var(--u)) rgba(0,0,0,.45), 0 calc(.6 * var(--u)) calc(1.2 * var(--u)) rgba(var(--shadow-tint), .22), 0 calc(10 * var(--u)) calc(22 * var(--u)) calc(-4 * var(--u)) rgba(var(--shadow-tint), .20), 0 calc(34 * var(--u)) calc(70 * var(--u)) calc(-14 * var(--u)) rgba(var(--shadow-tint), .26); }
.phone__glass { position: relative; width: 100%; height: 100%; padding: calc(11.5 * var(--u)); border-radius: calc(66.5 * var(--u)); background: #050506; box-shadow: 0 0 0 calc(.45 * var(--u)) rgba(0,0,0,.9), inset 0 0 0 calc(.6 * var(--u)) rgba(255,255,255,.10); }
.phone__screen { --r: calc(55 * var(--u)); position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: var(--r); clip-path: inset(0 round var(--r)); background: var(--page); isolation: isolate; transform: translateZ(0); }
.phone__screen > picture > img, .pg-shot img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.phone__island { position: absolute; z-index: 9; top: calc(13.67 * var(--u)); left: 50%; width: calc(126 * var(--u)); height: calc(37.33 * var(--u)); margin-left: calc(-63 * var(--u)); border-radius: calc(18.67 * var(--u)); background: #000; pointer-events: none; }
.phone__island::after { content: ""; position: absolute; top: 50%; right: calc(12.5 * var(--u)); width: calc(11 * var(--u)); height: calc(11 * var(--u)); margin-top: calc(-5.5 * var(--u)); border-radius: 50%; background: radial-gradient(circle at 36% 32%, rgba(120,140,190,.45) 0 9%, transparent 22%), radial-gradient(circle, #10131b 0 38%, #07080c 62%, #000 100%); }
.phone__btn { position: absolute; z-index: 0; width: calc(3 * var(--u)); border-radius: calc(1.4 * var(--u)); background: linear-gradient(90deg, var(--metal-a), var(--metal-b) 55%, var(--metal-c)); }
.phone__btn--action, .phone__btn--vol-up, .phone__btn--vol-down { left: calc(-2.5 * var(--u)); }
.phone__btn--side, .phone__btn--camera { right: calc(-2.5 * var(--u)); background: linear-gradient(270deg, var(--metal-a), var(--metal-b) 55%, var(--metal-c)); }
.phone__btn--action { top: 18.6%; height: 3.7%; } .phone__btn--vol-up { top: 26.6%; height: 7.1%; } .phone__btn--vol-down { top: 35.4%; height: 7.1%; } .phone__btn--side { top: 28%; height: 11%; }
.phone__btn--camera { top: 60.2%; height: 6.2%; right: calc(-1.2 * var(--u)); width: calc(2 * var(--u)); background: linear-gradient(270deg, #3a3b3f, #141517 70%); }
.phone__screen--live { background: var(--page); color: var(--ink); }
.phone--glare .phone__screen::after { content: ""; position: absolute; inset: 0; z-index: 10; pointer-events: none; background: linear-gradient(118deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.04) 30%, rgba(255,255,255,0) 46%); }

/* ---------------------------------------------------------------- section scaffolding */
.sec { padding: 72px 0 0; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.h2 { font-family: var(--font-display); font-weight: 400; font-size: 34px; line-height: 1.1; letter-spacing: -0.012em; }
.lede { color: var(--muted); font-size: 17px; line-height: 1.5; margin-top: 10px; max-width: 34em; }
.eyebrow { font-weight: 800; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--amber-text); }
.block { margin: 0 12px; border-radius: 32px; padding: 44px 0 40px; }
.block--peach { background: var(--peach); }
.block--sage { background: var(--sage-soft); }
.block .lede { color: var(--dark); }
.sticker { background: #fff; border-radius: 18px; box-shadow: var(--sticker-shadow); color: var(--ink); }
.band { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-weight: 800; font-size: 12.5px; }
.band--fair { background: var(--amber-soft); color: var(--amber-text); }
.band--good { background: #D6E6CC; color: var(--sage-text); }

/* ---------------------------------------------------------------- FACES: two drifting rows */
.faces__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.mq-toggle { display: none; flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); place-items: center; padding: 0; cursor: pointer; margin-bottom: 4px; }
.faces.is-moving .mq-toggle { display: grid; }
.mq-toggle svg { width: 16px; height: 16px; }
.mq-toggle .i-play, .mq-toggle[aria-pressed="true"] .i-pause { display: none; }
.mq-toggle[aria-pressed="true"] .i-play { display: block; }
.marquee { overflow-x: auto; overflow-y: hidden; padding: 6px 0 12px; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scroll-padding-inline: 12px;
  scrollbar-width: thin; scrollbar-color: rgba(38, 32, 29, .22) transparent; border-radius: 4px; }
.marquee:focus-visible { outline-offset: -3px; }
.marquee + .marquee { margin-top: 2px; }
.mq-track { display: flex; gap: 10px; width: max-content; margin: 0; padding: 0 12px; list-style: none; }
.marquee.is-moving { overflow: hidden; touch-action: pan-y; cursor: grab; scroll-snap-type: none; scrollbar-width: none; }
.marquee.is-drag { cursor: grabbing; }
.marquee.is-moving .mq-track { padding: 0; will-change: transform; }
.tile { position: relative; flex: none; width: 150px; aspect-ratio: 3 / 4; border-radius: 18px; margin: 0; background: var(--blush); user-select: none; -webkit-user-select: none; scroll-snap-align: start; }
.tile:nth-child(3n+2) { background: var(--peach); }
.tile:nth-child(3n) { background: var(--sage-soft); }
.tile img { width: 100%; height: 100%; border-radius: 18px; object-fit: cover; -webkit-user-drag: none; }
.scan-chip { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 9px; border-radius: 12px; background: #fff; box-shadow: var(--sticker-shadow); white-space: nowrap; line-height: 1.15; transform-origin: 15% 100%; }
.sc-m { width: 10px; height: 10px; flex: none; border-radius: 50%; border: 2.2px solid var(--c, var(--c-acne)); }
.sc-m--acne { --c: var(--c-acne); } .sc-m--red { --c: var(--c-red); } .sc-m--spots { --c: var(--c-spots); } .sc-m--eyes { --c: var(--c-eyes); }
.sc-m--pores { --c: var(--c-pores); } .sc-m--even { --c: var(--c-even); } .sc-m--oil { --c: var(--c-oil); } .sc-m--tex { --c: var(--c-tex); }
.sc-t b { display: block; font-weight: 800; font-size: 12.5px; color: var(--ink); }
.sc-t span { display: block; font-weight: 700; font-size: 11px; color: var(--muted); margin-top: 1px; }
.marquee.is-moving .scan-chip { opacity: 0; transform: scale(.5); transition: opacity .12s ease, transform .12s ease; }
.marquee.is-moving .tile.chip-in .scan-chip { opacity: 1; transform: scale(1); transition: opacity .2s ease, transform .55s var(--spring); }

/* ---------------------------------------------------------------- STEPS: swipe cards */
.steps__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.steps__nav { display: none; gap: 10px; }
html:not(.js) .steps__nav { display: none !important; }
.steps__nav button { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); display: grid; place-items: center; cursor: pointer; padding: 0; transition: opacity .2s ease, transform .2s var(--spring); }
.steps__nav button:disabled { opacity: .35; cursor: default; }
.steps__nav svg { width: 20px; height: 20px; }
@media (hover: hover) { .steps__nav button:not(:disabled):hover { transform: scale(1.06); } }
.steps__scroller { margin-top: 14px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; border-radius: 4px; }
.steps__scroller::-webkit-scrollbar { display: none; }
.steps__scroller:focus-visible { outline-offset: -3px; }
.steps__track { --w: min(76vw, 320px); --pad: 16px; position: relative; display: flex; gap: 12px; padding: 4px var(--pad) 8px; margin: 0; list-style: none; width: max-content; }
.step { position: relative; flex: none; width: var(--w); height: 540px; border-radius: 28px; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; scroll-margin-left: var(--pad); padding: 22px 22px 0; isolation: isolate; background: var(--soft); }
.step__n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; font-family: var(--font-display); font-size: 18px; box-shadow: var(--sticker-shadow); }
.step h3 { font-family: var(--font-display); font-weight: 700; font-size: 25px; line-height: 1.15; margin-top: 14px; letter-spacing: -0.005em; }
.step p { margin-top: 6px; font-size: 15.5px; line-height: 1.4; color: var(--soft-text); font-weight: 600; max-width: 17em; }
.step__phone { --k: .50230; --phone-w: calc(434px * var(--k)); --vis: 364px; position: absolute; left: 50%; top: 176px; margin-left: calc(var(--phone-w) / -2);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--vis) - 44px), transparent calc(var(--vis) - 2px)); mask-image: linear-gradient(to bottom, #000 calc(var(--vis) - 44px), transparent calc(var(--vis) - 2px)); }
/* step 1: the same capture screen as the hero, laid out for the card's window so the pill, tips and the whole shutter show */
.cap--step .cap__photo { top: -150px; }
.cap--step .cap__ctrl { bottom: 174px; }
.cap--step .cap__pill { top: 474px; }
.cap--step .cap__tips { top: 526px; }
.cap--step .cap__lib { top: 591px; }
.cap--step .cap__shutter { top: 576px; }
/* step 2: the card ends after the band, so nothing is sliced by the card's edge */
.res--step .res__card { top: 522px; }
.res--step .res__line { display: none; }
/* step 3: the app's next row of tonight's routine (Step 3, barrier moisturizer), drawn over the screen's empty space */
.rt-more { pointer-events: none; }
.rt3 { position: absolute; left: 24.7px; top: 581px; width: 352.7px; height: 56.7px; display: flex; align-items: center; padding: 0 15px 0 15.5px; border-radius: 20px; background: #FFFFFC; box-shadow: 0 0 0 1px #EEE6DB; }
.rt3__chip { display: inline-flex; align-items: center; height: 29px; padding: 0 12px; border-radius: 999px; background: #EFE6DA; color: var(--soft-text); font-weight: 800; font-size: 13.4px; }
.rt3__name { margin-left: 13.5px; font-size: 16.5px; font-weight: 500; color: var(--ink); }
.rt3__tick { margin-left: auto; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.6px #E6DACB; }
/* step 4: the app's Before & after card with her week 1 and week 8 selfies, then milestones */
.bas { background: #FFF9F2; }
.bas__card { position: absolute; left: 24px; top: 86px; width: 354px; padding: 20px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px #F0E6DA, 0 6px 22px rgba(62, 46, 40, .05); }
.bas__card--ms { top: 503px; }
.bas__t { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1.15; letter-spacing: -.005em; color: var(--ink); }
.bas__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.bas__ph { position: relative; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: #d8c3ae; }
.bas__ph img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.bas__tag { position: absolute; left: 9px; top: 9px; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: rgba(74, 64, 58, .88); color: #fff; font-weight: 800; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.bas__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.bas__row span { display: flex; align-items: baseline; justify-content: space-between; padding: 0 2px; }
.bas__row i { font-style: normal; font-weight: 700; font-size: 14.5px; color: var(--muted); }
.bas__row b { font-family: var(--font-display); font-weight: 400; font-size: 29px; line-height: 1; color: var(--ink); }
.bas__cmp { display: flex; align-items: center; justify-content: center; gap: 9px; height: 50px; margin-top: 16px; border-radius: 999px; background: #FFF6EA; box-shadow: inset 0 0 0 1.5px #F3E4D0; font-weight: 700; font-size: 16.5px; color: var(--ink); }
.bas__cmp svg { width: 21px; height: 21px; flex: none; }
.bas__cmp .bas__chev { width: 9px; height: 14px; color: var(--faint); }
.bas__ms-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 16px; }
.bas__m { display: grid; justify-items: center; text-align: center; }
.bas__ring { position: relative; width: 66px; height: 66px; display: grid; place-content: center; justify-items: center; }
.bas__ring > svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.bas__ring circle { fill: none; stroke-width: 3; }
.bas__m--done .f { fill: var(--sage-soft); stroke: none; }
.bas__m--done .s { stroke: var(--sage); }
.bas__m--next .t { stroke: var(--amber); stroke-opacity: .2; }
.bas__m--next .p { stroke: var(--amber); stroke-linecap: round; }
.bas__m--ahead .d { stroke: #F2C46F; stroke-dasharray: .1 6.3; stroke-linecap: round; }
.bas__ring b { position: relative; font-family: var(--font-display); font-weight: 400; font-size: 25px; line-height: 1; color: var(--ink); }
.bas__ring small { position: relative; margin-top: 2px; font-weight: 800; font-size: 9.5px; letter-spacing: .12em; color: var(--muted); }
.bas__m--done b { color: var(--sage-text); }
.bas__m--done small { color: var(--sage-text); }
/* milestones still ahead read quieter (muted, not faint, so the text keeps its contrast); their rings are dotted */
.bas__m--ahead b, .bas__m--ahead small, .bas__m--ahead .bas__ml, .bas__m--ahead .bas__ms { color: var(--muted); }
.bas__m--ahead .bas__ml { font-weight: 700; }
.bas__spark { position: absolute; right: -4px; top: -5px; width: 19px; height: 19px; fill: var(--amber); }
.bas__ml { margin-top: 8px; font-weight: 800; font-size: 13.5px; line-height: 1.2; color: var(--ink); }
.bas__ms { margin-top: 2px; font-weight: 700; font-size: 12px; line-height: 1.2; color: var(--sage-text); }
.bas__m--next .bas__ms { color: var(--amber-text); }
/* a short row of the four steps, tap to jump (phones and tablets; desktop has arrows) */
.steps__tabs { display: flex; gap: 6px; margin-top: 18px; }
html:not(.js) .steps__tabs { display: none; }
.st-tab { flex: 1 1 0; min-width: 0; height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 6px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font-weight: 800; font-size: 14px; white-space: nowrap; cursor: pointer; transition: background-color .25s ease, border-color .25s ease, color .25s ease; }
.st-tab__n { font-family: var(--font-display); font-weight: 400; font-size: 17px; line-height: 1; color: var(--amber-text); transition: color .25s ease; }
.st-tab.is-on { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); }
.st-tab.is-on .st-tab__n { color: var(--amber-ink); }
/* hand-drawn marks: filled marker strokes, revealed through a mask that draws along the centre line */
.hand-arrow { position: absolute; z-index: 3; pointer-events: none; overflow: visible; }
.hand-arrow .ink-fill { fill: var(--ink); }
.hm-draw { fill: none; stroke: #fff; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.st-arrow { position: absolute; z-index: 3; width: 132px; height: 70px; top: 2px; left: calc(var(--pad) + var(--w) - 98px); pointer-events: none; }
.st-arrow .hand-arrow { position: static; width: 100%; height: 100%; }

/* ---------------------------------------------------------------- PROGRESS */
.pg { display: grid; gap: 34px; }
.pg .h2 { margin-top: 10px; }
.pg-overall { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; height: 40px; padding: 0 16px; border-radius: 999px; background: #fff; font-weight: 800; font-size: 14px; box-shadow: var(--sticker-shadow); }
.pg-overall .num { font-family: var(--font-display); font-weight: 400; font-size: 21px; line-height: 1; }
.pg-overall .arr { color: var(--muted); font-weight: 700; }
.pg-overall .pg-up { color: var(--sage-text); }
/* her two selfies, pixel-aligned: drag to compare. The split moves with clip-path and a transform, never layout */
.pg-ba { position: relative; width: 100%; max-width: 400px; margin: 104px auto 0; }
.ba { --pos: 50%; position: relative; margin: 0; aspect-ratio: 3 / 4; border-radius: 26px; overflow: hidden; isolation: isolate; background: #d8c3ae url("data:image/webp;base64,UklGRnwAAABXRUJQVlA4IHAAAAAQBACdASoPABQAPt1apkyopSOiMAgBEBuJYgCdMoRwACRfSEIzlL+OgAD+TrPmdlpNF23zSdbg3CWlPJz9Urt7jgeLe951XfqyqZT9pPIfi8qHYKfBym1j6tvJ3WEn/CQq++/YGhOVfQcQ62OKAAAA") center / cover no-repeat;
  box-shadow: 0 1px 2px rgba(38, 32, 29, .08), 0 26px 50px -22px rgba(38, 32, 29, .5); -webkit-user-select: none; user-select: none;
  /* a vertical swipe that starts on her photo scrolls the page; only a sideways drag moves the split (js/site.js) */
  touch-action: pan-y; }
.js .ba { cursor: ew-resize; }
.ba picture { display: contents; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.ba__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba__line { position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: 100%; transform: translateX(var(--pos)); pointer-events: none; }
.ba__line::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: #fff; box-shadow: 0 0 8px rgba(38, 32, 29, .28); }
.ba__knob { position: absolute; left: calc(-23px + var(--kx, 0px)); top: 50%; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; box-shadow: 0 6px 18px rgba(38, 32, 29, .3); }
.ba__knob svg { width: 22px; height: 22px; }
/* the range input is for the keyboard and screen readers only (arrow keys move the split); pointers use the photo itself */
.ba__range { position: absolute; z-index: 3; left: 0; bottom: 0; width: 100%; height: 2px; margin: 0; opacity: 0; pointer-events: none; -webkit-appearance: none; appearance: none; background: transparent; }
.ba__range:focus-visible + .ba__line .ba__knob { outline: 3px solid var(--amber-deep); outline-offset: 3px; }
html:not(.js) .ba__range, html:not(.js) .ba__knob { display: none; }
/* the week stickers sit on the photo's top edge, over her two halves (week 1 left, week 8 right), so her forehead stays in view */
.pg-week { position: absolute; z-index: 4; bottom: calc(100% - 14px); width: 118px; padding: 11px 11px 12px 12px; }
.pg-w1 { left: -8px; transform: rotate(-3deg); }
.pg-w8 { right: -8px; transform: rotate(3deg); }
.pg-week .eyebrow { color: var(--muted); font-size: 11px; }
.pg-week .row { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.pg-week .row > b { font-weight: 800; font-size: 15px; }
.pg-week .band { margin-top: 8px; }
.pg-w8__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.pg-w8__foot .band { margin-top: 0; }
.pg-delta { font-family: var(--font-display); font-weight: 400; font-size: 21px; line-height: 1; color: var(--sage-text); }
.pg-week .ring { position: relative; width: 44px; height: 44px; display: grid; place-items: center; }
.pg-week .ring svg { position: absolute; inset: 0; }
.pg-week .ring .trk { stroke: var(--line); stroke-width: 4; }
.pg-week .ring .arc { stroke-width: 4; stroke-linecap: round; }
.ring--fair .arc { stroke: var(--amber); }
.ring--good .arc { stroke: var(--sage); }
.pg-week .ring b { position: relative; font-family: var(--font-display); font-weight: 400; font-size: 19px; line-height: 1; }
/* the app's progress screens, played like a story */
.pg-stage { position: relative; display: grid; justify-items: center; }
.pg-ctl { display: flex; align-items: center; gap: 8px; margin: 0 auto 12px; }
html:not(.js) .pg-ctl { visibility: hidden; }
.pg-pause { position: relative; width: 32px; height: 32px; flex: none; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .8); color: var(--ink); display: grid; place-items: center; padding: 0; cursor: pointer; box-shadow: 0 1px 2px rgba(38, 32, 29, .1); }
.pg-pause[hidden] { display: none; }
.pg-pause::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
.pg-pause svg { width: 13px; height: 13px; }
.pg-pause .i-play, .pg-pause[aria-pressed="true"] .i-pause { display: none; }
.pg-pause[aria-pressed="true"] .i-play { display: block; }
.pg-bars { display: flex; gap: 4px; width: 200px; }
.pg-bars .seg { flex: 1; height: 3px; border-radius: 3px; background: rgba(38, 32, 29, .14); overflow: hidden; }
.pg-bars .seg i { display: block; height: 100%; background: var(--amber); transform-origin: 0 50%; }
.js .pg-bars .seg i { transform: scaleX(0); }
.pg-phone { --phone-w: 236px; }
.pg-phone[role="button"] { cursor: pointer; }
.pg-shot { position: absolute; inset: 0; opacity: 0; }
.pg-shot[data-i="0"] { opacity: 1; }

/* ---------------------------------------------------------------- NINE SCORES: stickers */
.stickers { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nt { position: relative; background: #fff; border-radius: 18px; padding: 12px 12px 13px; box-shadow: var(--sticker-shadow); display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; align-content: start; }
.nt > svg { width: 30px; height: 30px; display: block; overflow: visible; }
.nt svg .ink { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nt svg .ink:not([fill]) { fill: none; }
.nt > b { display: block; font-weight: 800; font-size: 15px; line-height: 1.2; }
.nt > span { grid-column: 1 / -1; display: block; font-size: 13px; line-height: 1.3; color: var(--muted); font-weight: 600; margin-top: 6px; }
.nt--acne { grid-column: 1 / -1; grid-template-columns: 1fr auto; grid-template-rows: 1fr auto auto auto 1fr; column-gap: 14px; align-items: start; align-content: stretch; padding: 16px; }
.nt--acne > svg { grid-column: 1; grid-row: 2; width: 44px; height: 44px; }
.nt--acne > b { grid-column: 1; grid-row: 3; font-family: var(--font-display); font-weight: 700; font-size: 25px; margin-top: 8px; }
.nt--acne > span { grid-column: 1; grid-row: 4; font-size: 15px; margin-top: 2px; }
/* the lens: a round close-up of her cheek on day 1, with the app's white circles on each breakout */
.nt__lens { grid-column: 2; grid-row: 1 / -1; align-self: center; position: relative; width: 116px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #e2c4ad; box-shadow: 0 0 0 4px #fff, 0 10px 24px -8px rgba(38, 32, 29, .4); }
.nt__lens img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nt__lens svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.nt__lens circle { fill: none; stroke: #fff; stroke-width: 3.6; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .3)); }
.bandscale { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bandscale p { width: 100%; font-weight: 700; font-size: 14px; color: var(--ink); margin-bottom: 2px; }
.bandscale .band { height: 30px; padding: 0 12px; font-size: 13px; background: #fff; }
.bandscale .band .num { font-weight: 700; margin-left: 6px; }
.bandscale .b-great, .bandscale .b-good { color: var(--sage-text); }
.bandscale .b-fair, .bandscale .b-care { color: var(--amber-text); }
.bandscale .band i { width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.b-great i, .b-good i { background: var(--sage); } .b-fair i, .b-care i { background: var(--amber); }

/* ---------------------------------------------------------------- LAST: a warm sheet that rises from the bottom and runs into the footer */
.final__sheet { position: relative; overflow: hidden; isolation: isolate; padding: 50px 0 44px; border-radius: 32px 32px 0 0; background: var(--amber-soft); }
.final__sheet::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -230px; width: 680px; height: 480px; margin-left: -340px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 244, 226, .95), rgba(255, 244, 226, 0)); }
.final__in { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
/* a small strip of faces, set down like photos on a table */
.final__faces { display: flex; align-items: center; gap: 9px; margin: 0 0 30px; padding: 0; list-style: none; }
.final__faces li { flex: none; width: 54px; aspect-ratio: 3 / 4; border-radius: 13px; overflow: hidden; background: var(--peach); box-shadow: 0 0 0 3px #fff, 0 12px 20px -10px rgba(122, 75, 46, .55); }
.final__faces li:nth-child(1) { transform: translateY(5px) rotate(-6deg); }
.final__faces li:nth-child(2) { transform: translateY(-3px) rotate(3deg); }
.final__faces li:nth-child(3) { width: 62px; border-radius: 15px; transform: translateY(-6px) rotate(-2deg); }
.final__faces li:nth-child(4) { transform: translateY(-1px) rotate(4deg); }
.final__faces li:nth-child(5) { transform: translateY(6px) rotate(-4deg); }
.final__faces img { width: 100%; height: 100%; object-fit: cover; }
.final .h2 { max-width: 11em; }
.final .lede { max-width: 21em; margin-top: 12px; color: var(--dark); text-wrap: balance; }
/* the App Store listing row: icon, name, subtitle, and the one button */
.listing { width: 100%; max-width: 440px; margin-top: 28px; padding: 16px; border-radius: 26px; background: #fff; text-align: left;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px;
  box-shadow: 0 1px 2px rgba(62, 46, 40, .06), 0 22px 48px -18px rgba(122, 75, 46, .34); }
.listing__icon { width: 68px; height: 68px; flex: none; border-radius: 22.6%; box-shadow: 0 0 0 1px rgba(38, 32, 29, .05), 0 6px 16px rgba(62, 46, 40, .16); }
.listing__txt { min-width: 0; }
.listing__name { font-family: var(--font-display); font-weight: 700; font-size: 27px; line-height: 1; letter-spacing: -.01em; }
.listing__sub { margin-top: 5px; font-size: 15px; font-weight: 600; color: var(--muted); }
.listing__meta { margin-top: 2px; font-size: 13px; font-weight: 700; color: var(--muted); }
.cta--listing { grid-column: 1 / -1; display: flex; width: 100%; margin-top: 16px; }

/* ---------------------------------------------------------------- footer */
.ftr { padding: 0 0 calc(36px + env(safe-area-inset-bottom)); background: var(--amber-soft); }
.ftr__in { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-top: 0; color: var(--soft-text); font-size: 14px; font-weight: 600; }
.ftr__in::before { content: ""; order: -1; width: 100%; height: 1px; margin-bottom: 22px; background: rgba(184, 122, 14, .2); }
.brand--ftr .brand__word { font-size: 24px; }
.brand--ftr .brand__icon { width: 26px; height: 26px; border-radius: 7px; }
.ftr__line::before { content: "·"; margin-right: 10px; }
.ftr__c { width: 100%; color: var(--soft-text); font-size: 13px; }
/* Privacy · Terms · Support: their own row on phones, beside the © line on wide screens */
.ftr__nav { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; width: 100%; margin-top: 4px; }
.ftr__nav a { display: inline-flex; align-items: center; min-height: 32px; color: var(--soft-text); font-weight: 700; text-decoration: none; border-radius: 6px; }
.ftr__nav a[aria-current="page"] { color: var(--ink); }
@media (hover: hover) { .ftr__nav a:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; } }

/* ---------------------------------------------------------------- sticky button (phones) */
.sticky { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; padding: 0 16px calc(14px + env(safe-area-inset-bottom)); pointer-events: none; transform: translateY(140%); transition: transform .45s var(--ease-out-expo); }
.sticky .cta { pointer-events: auto; width: 100%; max-width: 380px; box-shadow: 0 10px 28px rgba(244, 168, 37, .45), 0 2px 10px rgba(38, 32, 29, .12); }
.sticky.is-on { transform: none; }
/* content fades out under the floating button instead of running into it */
.sticky::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: -26px; bottom: 0; pointer-events: none;
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 55%); mask-image: linear-gradient(to bottom, transparent, #000 55%); }
html:not(.js) .sticky { display: none; }

/* ---------------------------------------------------------------- phones: smaller and larger */
@media (max-width: 374px) {
  .hero__h1 { font-size: 40px; }
  .hv-wrap { --hs: .89; }
  .h2 { font-size: 31px; }
  .cta { font-size: 16px; padding: 0 20px; }
  .st-tab { gap: 4px; padding: 0 4px; font-size: 13px; }
  .steps__tabs { gap: 4px; }
  .final__faces { gap: 6px; }
  .final__faces li { width: 46px; border-radius: 11px; }
  .final__faces li:nth-child(3) { width: 52px; border-radius: 13px; }
  .ftr__line { width: 100%; }
  .ftr__line::before { display: none; }
}
@media (max-width: 359px) {
  .listing { padding: 14px; column-gap: 12px; }
  .listing__icon { width: 60px; height: 60px; }
  .cta--listing { padding: 0 12px; font-size: 15.5px; }
}
@media (min-width: 375px) and (max-width: 389px) { .hv-wrap { --hs: .9615; } }
@media (min-width: 414px) and (max-width: 599px) { .hv-wrap { --hs: 1.06; } }
/* short screens (in-app browsers): a little less air above the phones */
@media (max-width: 959px) and (max-height: 720px) {
  .hdr__in { height: 52px; }
  .hero__sub { margin-top: 10px; }
  .hero__ctas { margin-top: 16px; }
  .hv-wrap { margin-top: 8px; }
}
/* the shortest (Safari with its toolbar, about 660 tall): the phones a touch smaller so the shutter still shows */
@media (max-width: 599px) and (max-height: 680px) { .hv-wrap { --hs: .92; } }
@media (max-width: 389px) and (max-height: 680px) { .hv-wrap { --hs: .86; } }

/* ---------------------------------------------------------------- tablet: stacked, larger */
@media (min-width: 600px) and (max-width: 959px) {
  .hero__copy { padding: 0 40px; }
  .hdr__in { padding: 0 40px; }
  .hero__h1 { font-size: 60px; }
  .hero__sub { font-size: 19px; }
  .hv-wrap { --hs: 1.45; }
}

/* ---------------------------------------------------------------- desktop */
@media (min-width: 960px) {
  :root { --side: max(40px, calc((100vw - 1200px) / 2)); --bm: max(16px, calc(var(--side) - 48px)); }
  html { scroll-padding-top: 90px; }
  body { font-size: 17px; }
  .hdr { position: sticky; top: 0; }
  /* the frost is there from the first pixel of scroll (no fade), and with JavaScript off too */
  .hdr::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: rgba(255, 250, 243, .9); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 1px 0 rgba(38, 32, 29, 0); transition: box-shadow .2s ease; }
  .hdr.is-scrolled::before { box-shadow: 0 1px 0 rgba(38, 32, 29, .08); }
  .hdr__in { height: 76px; max-width: none; padding: 0 var(--side); }
  .brand__word { font-size: 32px; }
  .brand__icon { width: 34px; height: 34px; border-radius: 9px; }
  .hdr .cta--sm { display: inline-flex; }
  .wrap { max-width: none; padding: 0 var(--side); }
  .sticky { display: none; }

  /* hero: copy left, phones right, with real air between the headline and the phones */
  .hero { padding: 0; }
  .hero__glow { top: 0; height: 900px; background: radial-gradient(40% 44% at 72% 48%, rgba(255, 227, 204, .85), rgba(255, 227, 204, 0) 72%), radial-gradient(26% 30% at 90% 22%, rgba(243, 220, 214, .6), rgba(243, 220, 214, 0) 72%); }
  .hero__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 40px; max-width: none; padding: 8px var(--side) 40px; min-height: min(780px, calc(100vh - 76px)); }
  .hero__copy { padding: 0 0 24px; max-width: 520px; }
  .hero__h1 { font-size: clamp(46px, 4.6vw, 62px); line-height: 1.05; }
  /* two lines from here: "Your breakouts, / finally figured out." */
  .hero__h1 .l__a, .hero__h1 .l__b { display: inline; }
  .hero__h1 .l--2 { white-space: nowrap; }
  .hero__sub { margin-top: 22px; font-size: 20px; max-width: 24em; }
  .hero__ctas { margin-top: 32px; }
  .cta--hero { width: auto; min-height: 60px; padding: 0 34px; font-size: 18px; }
  .hv-wrap { --bw: 660px; --bh: 660px; --hs: .76; margin: 0 -12px 0 0; }
  .hv__ph--cap { left: -6px; top: 104px; }
  .hv__ph--res { left: 378px; top: 22px; }
  .hv__ph--cap .phone { --k: .60369; }
  .hv__ph--res .phone { --k: .64516; }
  .hv__arrow--phone { display: none; }
  /* the loop floats in the gap with clear page color at both ends */
  .hv__arrow--desk { display: block; transform-origin: 306px 293px; transform: translateX(11px) scale(.84); }
  .chip { height: 46px; padding: 0 16px 0 12px; gap: 9px; font-size: 15px; border-radius: 15px; }
  .chip b { font-size: 24px; }
  .chip .mr { width: 22px; height: 22px; }
  .chip--acne { height: 58px; padding: 0 14px 0 14px; gap: 10px; font-size: 19px; border-radius: 18px; }
  .chip--acne b { font-size: 32px; }
  .chip--acne .mr { width: 30px; height: 30px; }
  .chip__band { height: 26px; padding: 0 10px; font-size: 14px; }
  .chip--acne { left: 206px; top: 30px; }
  /* Dark spots bridges the gap under the arrow; it stays inside the visual's box, so no window width can clip it */
  .chip--spots { left: 206px; top: 380px; }
  .chip--red { left: -46px; top: 452px; }

  .sec { padding-top: 120px; }
  .faces { padding-top: 64px; }
  .h2 { font-size: clamp(40px, 3.6vw, 52px); }
  .lede { font-size: 19px; }
  .faces__head { margin-bottom: 32px; }
  .mq-toggle { width: 48px; height: 48px; margin-bottom: 6px; }
  .tile { width: 214px; border-radius: 22px; }
  .tile img { border-radius: 22px; }
  .mq-track { gap: 14px; padding: 0 var(--side); }
  .marquee { scroll-padding-inline: var(--side); }
  .scan-chip { left: 12px; bottom: 12px; padding: 8px 13px 8px 11px; border-radius: 14px; }
  .sc-t b { font-size: 14px; }
  .sc-t span { font-size: 12px; }

  .steps__nav { display: flex; }
  .steps__scroller { margin-top: 32px; }
  .steps__track { --w: 330px; --pad: var(--side); gap: 16px; }
  .step { height: 560px; padding: 26px 26px 0; }
  .step h3 { font-size: 27px; }
  .step__phone { top: 200px; --vis: 360px; }
  .steps__tabs { display: none; }

  .block { margin: 0 var(--bm); padding: 88px 0 84px; border-radius: 40px; }
  .block .wrap { padding: 0 calc(var(--side) - var(--bm)); }
  .stickers { grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
  .nt { padding: 16px 18px 18px; column-gap: 10px; align-content: center; }
  .nt > svg { width: 34px; height: 34px; }
  .nt > b { font-size: 16px; }
  .nt > span { font-size: 14px; margin-top: 8px; }
  .nt--acne { grid-column: span 2; grid-row: span 2; grid-template-columns: 1fr auto; column-gap: 24px; align-content: center; padding: 26px 28px; }
  .nt--acne > svg { width: 60px; height: 60px; }
  .nt--acne > b { font-size: 34px; margin-top: 14px; }
  .nt--acne > span { font-size: 17px; margin-top: 6px; }
  .nt__lens { width: 196px; box-shadow: 0 0 0 6px #fff, 0 16px 34px -12px rgba(38, 32, 29, .42); }
  .bandscale { margin-top: 36px; }
  .bandscale p { width: auto; margin: 0 8px 0 0; }

  /* progress: copy, her before/after, and the story phone side by side */
  .pg { grid-template-columns: minmax(0, 1fr) 300px 200px; align-items: center; column-gap: 40px; }
  .pg-ba { width: 100%; max-width: none; margin: 104px 0 0; }
  .pg-w1 { left: -20px; }
  .pg-w8 { right: -20px; }
  .pg-phone { --phone-w: 200px; }
  .pg-bars { width: 152px; }

  .final { padding-top: 128px; }
  .final__sheet { padding: 92px 0 80px; border-radius: 48px 48px 0 0; }
  .final__sheet::before { top: -300px; width: 1100px; height: 640px; margin-left: -550px; }
  .final__faces { gap: 14px; margin-bottom: 40px; }
  .final__faces li { width: 84px; border-radius: 18px; box-shadow: 0 0 0 4px #fff, 0 18px 30px -14px rgba(122, 75, 46, .55); }
  .final__faces li:nth-child(3) { width: 96px; border-radius: 20px; }
  .final .h2 { font-size: clamp(44px, 4vw, 58px); max-width: none; }
  .final .lede { max-width: 32em; margin-top: 16px; }
  .listing { max-width: 680px; margin-top: 40px; padding: 20px 20px 20px 20px; border-radius: 30px; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 18px; }
  .listing__icon { width: 84px; height: 84px; }
  .listing__name { font-size: 32px; }
  .cta--listing { grid-column: auto; width: auto; margin-top: 0; }

  .ftr { padding-bottom: 48px; }
  .ftr__in::before { margin-bottom: 30px; }
  .ftr__c { width: auto; margin-left: auto; }
  .ftr__nav { width: auto; margin: 0 0 0 auto; }
  .ftr__nav + .ftr__c { margin-left: 32px; }
}
@media (min-width: 960px) and (max-width: 1099px) { .hv-wrap { --hs: .7; } .hero__h1 { font-size: 44px; } }
@media (min-width: 1100px) and (max-width: 1279px) { .hv-wrap { --hs: .8; } }
@media (min-width: 1280px) { .hv-wrap { --hs: .9; } }
@media (min-width: 1440px) { .hv-wrap { --hs: .94; } }
@media (min-width: 1200px) {
  .pg { grid-template-columns: minmax(0, 1fr) 380px 250px; column-gap: clamp(48px, 4.4vw, 80px); }
  .pg-ba { margin-top: 116px; }
  .pg-week { width: 138px; }
  .pg-w1 { left: -26px; }
  .pg-w8 { right: -26px; }
  .pg-phone { --phone-w: 236px; }
  .pg-bars { width: 186px; }
}

/* ---------------------------------------------------------------- Reduce Motion: the calm version */
@media (prefers-reduced-motion: reduce) {
  .cta, .sticky, .st-tab, .cta__a, .cta__b { transition-duration: .2s !important; transition-timing-function: ease !important; }
  .cta:hover, .cta:active, .cta.is-press { transform: none; }
  .cta__b, .cta.is-soon .cta__a { transform: none; }
  .sticky { transform: none; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s .2s; }
  .sticky.is-on { opacity: 1; visibility: visible; transition: opacity .2s ease; }
}