/* Squeeze · pre-launch site · one continuous color field; one stick carries the story down the page. */

/* GT Flaire (Grilli Type), the heading face: Extra Bold for small headings, Extra Heavy for the big ones.
   These are the foundry's TRIAL files, licensed for mockups only, and they lack some punctuation (the colon
   falls back to Figtree). Replace them with the licensed webfonts before the site goes public. */
@font-face { font-family: "GT Flaire"; src: url("../assets/fonts/gt-flaire/GT-Flaire-Extra-Bold-Trial.woff2") format("woff2"); font-weight: 500 749; font-display: swap; }
@font-face { font-family: "GT Flaire"; src: url("../assets/fonts/gt-flaire/GT-Flaire-Extra-Heavy-Trial.woff2") format("woff2"); font-weight: 750 900; font-display: swap; }

:root {
  --ink: #4A1529;
  --ink-2: #5E1B35;
  --dusk: #5A1C35;   /* the page's last colour: the close fades into it and the footer sits on it */
  --milk: #FFF6F0;
  --lilac: #D9C8F2;
  --pink: #FF9ABB;
  --pink-deep: #F27AA6;
  --pink-soft: #FFC3D6;
  --peach: #FFC2A8;
  --butter: #FFE48F;
  --butter-deep: #F2CC48;
  --rasp: #E8477C;
  --blue: #99DAF6;
  --blue-soft: #C9E9FA;
  --mint: #92D68B;
  --lilac-pack: #B69BDD;
  --ink-14: rgba(74, 21, 41, .14);
  --ink-30: rgba(74, 21, 41, .3);
  --ink-55: rgba(74, 21, 41, .55);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .29 0 0 0 0 .08 0 0 0 0 .16 0 0 0 1.1 -.42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");   /* a fine film grain in ink, the same grain the photos carry */

  --display: "GT Flaire", "Figtree", system-ui, sans-serif;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1320px;
  --gutter: max(32px, 4vw);
  --ease: cubic-bezier(.2, .8, .2, 1);
  /* ONE rhythm for the whole page, so every section reads as part of one page and not as its own piece:
     - every section heading is one size (--h2), sized by the screen's width and its height, so the sections that
       must fit one laptop screen (the photos, the spec sheet, the benefits) still do and stay the same size as the rest;
     - every section opens with the same space above its heading (--sp-open) and closes with the same space under its
       last line (--sp-close): between any two sections there is the same air;
     - heading to its intro line is --gap-lede, and heading or intro to the section's content is --gap-content.
     The finale's headline is the one deliberate exception (larger, the page's last word). */
  --h2: clamp(34px, min(4.45vw, (100svh - 64px) * .0766), 64px);
  --sp-open: clamp(64px, min(7.2vw, 11.6svh), 104px);
  --sp-close: clamp(48px, min(5vw, 8svh), 72px);
  --gap-lede: 16px;
  --gap-content: clamp(28px, 2.8vw, 40px);
  --jelly: cubic-bezier(.34, 1.4, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html { background: var(--milk); }
body {
  margin: 0;
  color: var(--ink);
  font: 500 19px/1.55 var(--body);
  overflow-x: hidden;
}
img, svg { display: block; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ol, ul, dl, dd, figure, fieldset, legend { margin: 0; }
ol, ul { padding: 0; list-style: none; }
fieldset { padding: 0; border: 0; min-width: 0; }
button, input { font: inherit; color: inherit; }
sup { font-size: .6em; line-height: 0; vertical-align: .5em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--ink); color: var(--milk); padding: 12px 18px; border-radius: 999px; font: 600 16px var(--display); }
.skip:focus { top: 16px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 6px; }

.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; position: relative; }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: clamp(44px, 6.6vw, 96px); line-height: .96; }
h2 { font-size: var(--h2); line-height: 1; }
h3 { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.1; }
p { text-wrap: pretty; }
.lede { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; max-width: 640px; opacity: .86; }
.fine { font: 500 14px/1.45 var(--body); opacity: .72; }

/* ---------- the list form: a visible label, a tinted field and the ink button on one baseline, in the pack's own
   language (the tinted stat panel, the rip-here tab). No shell around it. ---------- */
.dibs { position: relative; max-width: 560px; }
/* the bot trap: a field people never see or reach; a bot that fills it is answered and not saved */
.hp { position: absolute; left: -10000px; top: 0; width: 1px; height: 1px; overflow: hidden; }
.dibs-label { display: block; margin-bottom: 7px; font: 600 15px/1 var(--body); }
.dibs-row { display: flex; gap: 8px; }
.dibs-in { flex: 1 1 auto; min-width: 0; height: 54px; padding: 0 18px; border: 0; border-radius: 16px; background: rgba(255, 255, 255, .5); box-shadow: inset 0 0 0 1.5px rgba(74, 21, 41, .22); font: 500 18px/1 var(--body); color: var(--ink); transition: background-color .2s var(--ease), box-shadow .2s var(--ease); }
.dibs-in::placeholder { color: rgba(74, 21, 41, .64); }
.dibs-in:hover { background: rgba(255, 255, 255, .62); }
.dibs-in:focus-visible { outline: 0; box-shadow: inset 0 0 0 2.5px var(--ink); background: rgba(255, 255, 255, .8); }
.dibs.is-invalid .dibs-in { box-shadow: inset 0 0 0 2.5px var(--rasp); }
.dibs-go {
  flex: none; height: 54px; padding: 0 24px; border: 0; border-radius: 16px; cursor: pointer; white-space: nowrap;
  background: var(--ink); color: var(--milk); font: 700 16px/1 var(--body); letter-spacing: .01em;
  transition: transform .35s var(--jelly), background-color .2s var(--ease), color .2s var(--ease);
}
.dibs-go:hover { background: var(--ink-2); }
.dibs-go:active { transform: scale(.97); transition-duration: .12s; }
.dibs-go[disabled] { opacity: .7; cursor: progress; transform: none; }
.dibs-go:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.dibs-note { font: 500 15px/1.45 var(--body); opacity: .78; }
.dibs-note:not(:empty) { margin-top: 10px; }
.dibs-note.is-error { color: var(--rasp); opacity: 1; font-weight: 600; }

/* the success state takes the form's place */
.done { max-width: 560px; animation: settle .7s var(--jelly) both; }
.done-head { display: flex; align-items: center; gap: 14px; }
.done-head svg { width: 44px; height: 44px; flex: none; }
.done h3 { font-size: 30px; }
.done p { margin-top: 8px; font-size: 16px; line-height: 1.45; opacity: .86; }
.done .dibs-row { margin-top: 14px; }
.done .dibs-in { height: 44px; font: 600 15px/1 var(--body); }
.done .dibs-go { height: 44px; padding: 0 18px; font-size: 15px; }
.done .dibs-go.is-copied { background: var(--rasp); color: #fff; }
@keyframes settle {
  0% { opacity: 0; transform: translateY(14px) scaleY(.94); }
  100% { opacity: 1; transform: none; }
}

/* ---------- the quiet header link while the hero is on screen; the bar with the ink button afterwards ---------- */
.head-link { position: relative; font: 700 16px/1 var(--body); padding-bottom: 3px; }
.head-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--ease); }
.head-link:hover::after, .head-link:focus-visible::after { transform: none; }
.head-cta { display: inline-flex; align-items: center; height: 38px; padding: 0 18px; border-radius: 999px; background: var(--ink); color: var(--milk); font: 700 14px/1 var(--body); letter-spacing: .01em; white-space: nowrap; transition: transform .35s var(--jelly), background-color .2s var(--ease); }
.head-cta:hover { transform: scale(1.04); }
.topbar { position: fixed; z-index: 40; left: 0; right: 0; top: 0; height: 64px; background: rgba(255, 246, 240, .74); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--ink-14); opacity: 0; transform: translateY(-100%); visibility: hidden; transition: opacity .3s var(--ease), transform .35s var(--ease), visibility 0s .35s, background-color .3s var(--ease); }
.topbar-in { height: 100%; width: min(var(--wrap), 100vw - 2 * var(--gutter)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; }
.topbar .wordmark { width: 116px; }
.topbar.is-on { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.topbar.is-dark { background: rgba(74, 21, 41, .78); box-shadow: 0 1px 0 rgba(255, 246, 240, .14); color: var(--milk); }
.topbar.is-dark .head-cta { background: var(--milk); color: var(--ink); }
.topbar.is-dark .wordmark { color: var(--milk); }
.topbar.is-dark :focus-visible { outline-color: var(--butter); }
.brand { display: block; }
.wordmark { width: 150px; height: auto; color: var(--ink); }

/* ---------- reveals ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .45s var(--ease), transform .55s var(--ease); }
.js [data-reveal].in { opacity: 1; transform: none; }


/* ---------- 1 · the hero: Grüns' layout and balance. Two equal halves on the content grid: on the left one centred
   copy stack (the headline, its payoff line, the form), on the right the lifestyle photo, landscape 4:3. The
   headline is sized by its half so it carries real width next to the photo, and the stack ends on the form: the
   button is the last thing the eye reaches. On a landscape screen the hero is the whole first screen (see the spread below): nothing of the next
   section shows until the visitor scrolls, so the first look is only the product, the line and the form. */
.hero {
  --x0: max(var(--gutter), (100vw - var(--wrap)) / 2);
  --vh: 100svh;
  --gap: 40px;
  --pw: calc((100vw - 2 * var(--x0) - var(--gap)) / 2);                 /* each half: the photo's width */
  --hs: clamp(48px, var(--pw) * .135, 90px);                            /* the headline */
  --air: clamp(28px, var(--vh) * .068, 80px);                           /* between the header and the pair: the pair's top sits in the upper sightline */
  position: relative; display: flex; flex-direction: column; padding: 0 var(--x0) clamp(40px, var(--vh) * .07, 76px);
  background: var(--lilac);
}
/* the hero's wall is the packet's world: a soft pink a step lighter than the pack, with its plum ink on it, so the
   pack in the photo stays the strongest pink on the screen. One soft lift of warm light from the upper left (the
   page's key light) keeps it from reading as a flat swatch; the photograph brings the texture. No grain here, no
   imagery. The pain section picks the pink up at its top edge and settles it into lilac, so there is no seam. */
.hero {
  background: radial-gradient(70% 90% at 0% 0%, rgba(255, 238, 236, .7) 0, rgba(255, 238, 236, 0) 70%), var(--pink-soft);
  isolation: isolate;
}
.hero > * { position: relative; z-index: 1; }
.site-head { --wm-w: 176px; position: relative; z-index: 5; flex: none; width: 100%; height: 84px; display: flex; align-items: center; justify-content: space-between; }
.site-head .wordmark { width: var(--wm-w); }
/* the header's one link is plainly a link: a standing underline that draws in a little on hover.
   It lines up optically with the wordmark, not by its box: the wordmark's letters are all x-height (only the q
   drops), so their middle sits 3.13% of the wordmark's width above its box's middle. The link's capitals centre on
   that line, which also lands its underline on the wordmark's baseline. */
.site-head .head-link { position: relative; top: calc(.75px - var(--wm-w) * .0313); padding-bottom: 0; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; transition: text-underline-offset .25s var(--ease); }
.site-head .head-link::after { display: none; }
.site-head .head-link:hover { text-underline-offset: 3px; }
.hero-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: var(--gap); padding-top: var(--air); }
.hero-copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-h1 { font: 800 calc(var(--hs) * .94)/1 var(--display); letter-spacing: -.02em; }   /* GT Flaire runs wider than Fredoka did: .94 keeps the long line at its old width */
.hero-h1 .hl > span { display: block; white-space: nowrap; }
/* the payoff in Figtree: GT Flaire carries the brand's voice, Figtree states the proposition plainly under it */
.hero-h1 .pay { display: block; max-width: 25em; margin-top: calc(var(--hs) * .26); font: 500 calc(var(--hs) * .29)/1.3 var(--body); letter-spacing: -.005em; opacity: .88; }   /* the quiet voice against the loud one */
.hero .unit { margin-top: calc(var(--hs) * .3); width: min(480px, 100%); text-align: left; }
/* the form: a crisp 1px edge and a fill, no drop shadows */
.hero .dibs-label { margin-bottom: 8px; font: 500 14px/20px var(--body); }
.hero .dibs-row { gap: 12px; }
.hero .dibs-in, .hero .done-compact .dibs-in { height: 56px; padding: 0 16px; border-radius: 16px; background: var(--milk); box-shadow: inset 0 0 0 1px rgba(74, 21, 41, .28); font: 400 18px/24px var(--body); }
.hero .dibs-in:hover { background: #fff; }
.hero .dibs-in:focus-visible { background: #fff; box-shadow: inset 0 0 0 2px var(--ink); }
.hero .dibs.is-invalid .dibs-in { box-shadow: inset 0 0 0 2px var(--rasp); }
.hero .dibs-go, .hero .done-compact .dibs-go { width: 160px; height: 56px; padding: 0; border-radius: 16px; box-shadow: none; font: 700 16px/24px var(--body); letter-spacing: 0; }
/* pressing the button squeezes it, the way the stick gives under a thumb: quick in, a slower release */
.hero .dibs-go { transition: transform .22s cubic-bezier(.2, .7, .3, 1), background-color .2s var(--ease); }
.hero .dibs-go:active { transform: scale(1.025, .94); transition-duration: .1s; }
.hero .dibs-note:not(:empty) { margin-top: 10px; }
.done-compact { max-width: none; }
.done-compact .dibs-row { margin-top: 0; }
/* the photo: landscape 4:3, the full right half, a clean photographic edge on the pink (no floating-card shadow).
   It is cropped in 10% toward the torn corner, so the tear and the jelly read before the street does; the crop's
   origin keeps the smile in the frame. */
.hero-photo { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: #F5B8CC; }
.hero-photo .pic, .hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-photo img { transform: scale(1.1); transform-origin: 60% 18%; }
/* the spread, on any landscape screen (an upright tablet and a phone keep their own column): under a full-width
   header, the photograph is the whole right page, running to the screen's right edge and down to the hero's foot;
   the copy is centred on its own axis between the wordmark's edge and her hand. The photo starts below the header
   (her cropped smile never meets the browser's edge, and the header keeps its link). The crop leans right, onto the
   smile, the tear and the jelly. The pair grows with its copy on a short screen rather than clipping it. */
@media (min-width: 1101px), (min-width: 721px) and (orientation: landscape) {
  /* the copy reaches toward the photo: its page runs from the wordmark's edge to a clear gap short of her hand, across
     the photo's plain wall. --hand is where her hand meets the screen: the photo fills the right half by height
     (scale (vh - 84) / 1086), cropped at 72% across, and her hand's outer edge is 532px into the 1448px picture.
     The headline is sized to fill that page (its longest line is 6.83 em wide) and to the screen's height. */
  .hero {
    padding-right: 0; padding-bottom: 0;
    --hand: calc(86vw - (var(--vh) - 84px) * .4702);
    --cr: calc(var(--hand) - clamp(48px, 7vw, 120px));
    --hs: clamp(48px, min((var(--cr) - var(--x0)) / 6.43, (var(--vh) - 84px) * .128), 124px);
  }
  .site-head { padding-right: var(--x0); }
  .hero-body { padding-top: 0; min-height: calc(var(--vh) - 84px); grid-template-columns: minmax(0, 1fr) 50vw; column-gap: 0; align-items: stretch; }
  /* the copy side is composed like the face of the pack in her hand: one centred axis, a compact headline, the
     pack's plum capsule for the form. It sits over the photo's wall (above it), and above the screen's middle,
     where the eye starts. The uneven
     padding, scaled to the headline, offsets its line box, whose top sits above its capitals. */
  .hero-copy { --hfs: calc(var(--hs) * .925); z-index: 2; margin-right: calc(50vw - var(--cr)); justify-content: center; align-items: center; text-align: center; padding: calc(40px - var(--hfs) * .055) 0 calc(40px + var(--hfs) * .055 + (var(--vh) - 84px) * .1) 0; }
  .hero-h1 { font-size: var(--hfs); line-height: 1; text-align: center; }   /* centred lines stack descenders over ascenders: a full em keeps the y of "you'll" off the l of "look" */
  .hero-h1 .pay { max-width: 25.2em; margin: calc(var(--hs) * .13) auto 0; font-size: calc(var(--hs) * .232); line-height: 1.4; }
  /* the form is one capsule, like the pack's plum "rip here" capsule: a milk field joined to a plum end. Focus
     shows on the whole capsule. */
  .hero .unit { width: min(max(544px, var(--hs) * 5.25), 100%); margin-top: calc(var(--hs) * .37); }   /* on a big screen it grows with the headline */
  .hero .dibs-row { display: flex; gap: 0; height: 64px; border-radius: 999px; background: var(--milk); box-shadow: inset 0 0 0 2px var(--ink); overflow: hidden; }
  .hero .dibs-in, .hero .done-compact .dibs-in { flex: 1 1 auto; height: 64px; padding: 0 0 0 26px; border-radius: 0; background: transparent; box-shadow: none; }
  .hero .dibs-in:hover, .hero .dibs-in:focus-visible { background: transparent; box-shadow: none; outline: none; }
  .hero .dibs-row:focus-within { box-shadow: inset 0 0 0 3px var(--ink); }
  .hero .dibs.is-invalid .dibs-row { box-shadow: inset 0 0 0 3px var(--rasp); }
  .hero .dibs.is-invalid .dibs-in { box-shadow: none; }
  .hero .dibs-go, .hero .done-compact .dibs-go { width: 176px; height: 64px; border-radius: 0; font: 700 17px/24px var(--body); }
  /* the header's link becomes the same plum capsule, its middle on the wordmark's letters (see the base rule) */
  .site-head .head-link { top: calc(-1 * var(--wm-w) * .0313); display: inline-flex; align-items: center; height: 40px; padding: 0 22px; border-radius: 999px; background: var(--ink); color: var(--milk); text-decoration: none; }
  .site-head .head-link:hover { background: var(--ink-2); }
  /* the photo fills the right page from the header to the foot of the screen, so the hero is the whole first screen
     and the next section starts below the fold. It is not a panel stuck on the page: the photo itself carries the
     blend (scratchpad tools: subject-mask.swift, blend-wall.py). Its wall, judged pixel by pixel along her outline so
     her hands, hair, smile and the pack stay untouched, is lifted toward the page pink and reaches it at the top; the
     foot softens and dissolves across the whole width, more lightly over her, so it fades off the screen's bottom.
     The left edge fades into the page here, short of her hand. */
  .hero-photo { height: auto; aspect-ratio: auto; border-radius: 0; }
  .hero-photo .pic { position: absolute; inset: 0; }   /* out of the flow: the screen sets the hero's height, not the picture */
  .hero-photo img { transform: none; object-position: 72% 30%; }
  .hero-photo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--pink-soft) 0, rgba(255, 195, 214, .5) 8%, rgba(255, 195, 214, 0) 22%); }
}

/* ---------- 2 · pain points: the powder routine in three equal photographs, under one heading ----------
   The calm "before", set the way the strongest DTC pages set a section: confident block of the brand's lilac that the
   hero's pink settles into (no edge at either end), a centred GT Flaire heading, and three equal square photographs with the
   page's 24px corners (no mats, no drop shadows), each titled under it in GT Flaire. Everything is sized in one unit (--u: the grid at 1312px,
   or the screen's height, whichever is tighter) so the heading, the photos and their titles fit one laptop screen. */
.pain {
  --W: min(var(--wrap), 100vw - 2 * var(--gutter)); --uw: calc(var(--W) / 1312); --u: min(var(--uw), (100svh - 64px) / 836);
  --cap: max(18px, 22 * var(--u));
  position: relative; padding: var(--sp-open) 0 var(--sp-close);   /* the page's rhythm; the solution's intro line then sits --sp-open into its stage, so the gap matches every other one */
  /* the hero's pink settles into the lilac over the section's first stretch, the way the hero's photo dissolves into
     its pink: no edge between the sections. Mixed in oklab so the middle stays a clean pink-lilac, not grey. The
     lilac then holds flat under the photos, and the solution's bloom starts from the same lilac. */
  background: linear-gradient(180deg, var(--pink-soft) 0, var(--lilac) clamp(300px, 46svh, 460px), var(--lilac) 100%);
  background: linear-gradient(to bottom in oklab, var(--pink-soft) 0, var(--lilac) clamp(300px, 46svh, 460px), var(--lilac) 100%);
}
.pain-h { max-width: 13.5em; margin: 0 auto; text-align: center; line-height: 1; letter-spacing: -.02em; }   /* two lines at every width */
.pain-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(24 * var(--uw)); margin: var(--gap-content) 0 0; padding: 0; list-style: none; }
.pain-card { display: flex; flex-direction: column; margin: 0; }
.pain-card .shot { height: min(calc(424 * var(--u)), calc((var(--W) - 48 * var(--uw)) / 3)); border-radius: 24px; overflow: hidden; background: #CDB8E6; }   /* square, the page's 24px corners */
.pain-card .pic, .pain-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* each crop holds its action: the scoop and the glass, the hands and the cloudy shaker, the shelf with the tub */
.pain-cards > li:nth-child(1) img { object-position: 60% 45%; }
.pain-cards > li:nth-child(2) img { object-position: 60% 62%; }
.pain-cards > li:nth-child(3) img { object-position: 50% 80%; }   /* down onto the lower shelf, where the tub was left */
.pain-card figcaption { margin-top: calc(20 * var(--u)); text-align: center; font: 700 var(--cap)/1.2 var(--display); letter-spacing: -.01em; line-height: 1.27; text-wrap: balance; }

/* ---------- 3 · the solution: the packet on a centre stage, tearing, squeezing and emptying as the stage pins ----------
   The calm of the pain section blooms into brand pink as the section scrolls under the pinned stage. An intro line
   opens it and leaves as the tear begins; a quiet rail of three words under the packet follows the engine's progress
   (the active word in ink, the others faded, its one line under it). The packet is a little larger than the old hero's,
   centred, at the same -16deg tilt. #hero-mount keeps its explicit size from the frames' geometry (--d-* / --m-*),
   sized for the packet's largest state (--ss) and only ever scaled down in CSS. Static (no JS, reduced motion,
   full-page capture): the closed packet, then one engine frame per beat. */
.squeeze {
  --vh: 100svh;
  --pw: clamp(620px, min(64vw, var(--vh) * .98), 1160px);   /* the packet's length at rest */
  --ss: 1.08;                                               /* its size as it squeezes, relative to rest */
  --cw: calc(var(--pw) * var(--ss) / var(--d-plen));
  --ch: calc(var(--cw) * var(--d-cr));
  --ph: calc(var(--ch) * var(--d-ph));
  --pcx: 50vw; --pcy: calc(var(--vh) * .47 + 16px);         /* the packet centre: the stage's middle, a touch high for the rail */
  --tilt: -16deg; --sx: 0px; --sy: 0px; --k: 0;
  --pin: 180svh;
  position: relative;
  background: linear-gradient(180deg, var(--lilac) 0, #EAC9EA 34svh, #F9BBD3 70svh, #FCAECA 100svh, var(--pink) 100%);   /* the bloom: the pain's calm into pink over the first screen of scroll, then still deepening a touch through the pin, so the stage never sits on one flat colour */
}
.stage { position: relative; }
.screen { position: relative; height: var(--vh); min-height: 600px; overflow: hidden; overflow: clip; isolation: isolate; }
.screen::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: var(--light, 1); background: linear-gradient(152deg, rgba(255, 251, 255, .3) 0, rgba(255, 251, 255, 0) 46%); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 28%); mask-image: linear-gradient(180deg, transparent 0, #000 28%); }   /* no light on the stage's top edge, where the pain section hands over */
.sol-intro { position: absolute; z-index: 3; left: 0; right: 0; top: max(var(--sp-open), calc(var(--pcy) - var(--pw) * .267 * var(--ss) - 120px)); margin: 0 auto; padding: 0 var(--gutter); text-align: center; font-size: var(--h2); will-change: transform, opacity; }   /* the page's heading size and opening space, like every other section */
.packet {
  position: absolute; z-index: 2; pointer-events: none;
  left: calc(var(--pcx) - var(--cw) * (var(--d-pl) + var(--d-plen) / 2));
  top: calc(var(--pcy) - var(--ch) * (var(--d-pt) + var(--d-ph) / 2));
  width: var(--cw); aspect-ratio: var(--d-cw) / var(--d-ch);
  transform-origin: calc((var(--d-pl) + var(--d-plen) / 2) * 100%) calc((var(--d-pt) + var(--d-ph) / 2) * 100%);
  transform: translate3d(calc(var(--sx) * var(--k)), calc(var(--sy) * var(--k)), 0) rotate(var(--tilt)) scale(calc((1 + (var(--ss) - 1) * var(--k)) / var(--ss)));
  will-change: transform;
}
/* the poster is the closed packet; once the engine has drawn its first frame over it, it steps aside */
.packet-poster { position: absolute; inset: 0; }
.packet-poster img { width: 100%; height: 100%; object-fit: contain; }
.packet.is-live .packet-poster { visibility: hidden; }
.sqz-canvas { will-change: transform; transform: translate3d(var(--sqz-px, 0px), var(--sqz-py, 0px), 0); transition: transform .6s var(--ease); }
.sqz-live .sqz-canvas { animation: sqz-float 7s ease-in-out infinite; }
@keyframes sqz-float { 50% { translate: 0 -3px; } }

/* the beats. Base layout is the still one (no JS, reduced motion, full-page capture): a frame, then the word. */
.beats { position: relative; width: min(var(--wrap), 100vw - 2 * var(--gutter)); margin-inline: auto; padding: 0 0 var(--sp-close); }
.beat { --bk: .8; position: relative; max-width: none; padding: 0; margin-top: calc(var(--ch) * var(--bk) * -0.16); }
.beat h3 { margin-top: calc(var(--ch) * var(--bk) * -0.3); }
.beat h3 { font: 800 clamp(53px, 6vw, 90px)/.92 var(--display); letter-spacing: -.02em; }
.beat p { margin-top: 14px; font: 500 21px/1.45 var(--body); max-width: 420px; }
.beat .fine { margin-top: 12px; font-size: 14px; opacity: .8; max-width: 600px; }
.beat-pic { width: calc(var(--cw) * var(--bk)); max-width: none; margin: 0 0 0 calc(var(--cw) * var(--bk) * -1 * var(--d-pl)); }
.beat-pic img { width: 100%; height: auto; }
.beat[data-beat="squeeze"] { padding-left: max(0px, 100% - var(--pw) * var(--bk) - var(--pw) * .12); }
.static .hero { --vh: min(100svh, 900px); }   /* a full-page capture lays the page out in a very tall window: the first screen keeps a real height */
.static .squeeze { --vh: min(100svh, 900px); background: linear-gradient(180deg, var(--lilac) 0, #EDC6E6 22%, #FBB4CF 48%, #FDA7C5 74%, var(--pink) 100%); }
.static .screen::before { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 55%, transparent 100%); }   /* no light at the top edge: the pain section hands over without a line */
.js:not(.static) .squeeze { height: calc(100svh + var(--pin)); }
.js:not(.static) .stage { position: sticky; top: 0; height: 100svh; }
/* the rail: three words in a row under the packet, the active one in ink; each word's line hangs under it */
.js:not(.static) .beats { position: absolute; z-index: 3; left: 50%; top: min(calc(var(--pcy) + var(--pw) * .265 * var(--ss) + 44px), calc(var(--vh) - 96px)); width: auto; margin: 0; padding: 0; display: flex; gap: clamp(26px, 3vw, 44px); transform: translateX(-50%); pointer-events: none; }
.js:not(.static) .beat { --a: 0; position: relative; margin: 0; padding: 0; text-align: center; }
.js:not(.static) .beat h3 { margin: 0; font: 700 clamp(28px, min(2.6vw, var(--vh) * .044), 42px)/1 var(--display); letter-spacing: -.015em; opacity: calc(.52 + .48 * var(--a)); }
.js:not(.static) .beat p { position: absolute; left: 50%; top: 100%; width: max-content; max-width: min(460px, 80vw); margin-top: 12px; font: 500 18px/1.45 var(--body); opacity: var(--a); transform: translate(-50%, calc((1 - var(--a)) * 6px)); }   /* the page's body size: the line under the rail is read, not glanced at */
.js:not(.static) .beat .fine { display: none; }   /* the dagger points to the footer's design-target note */
.js:not(.static) .beat-pic { display: none; }
.js:not(.static) .beat[data-beat="squeeze"] { padding-left: 0; }

/* ---------- the lower journey: pink, peach, butter, cream, sky, pink-cream, cherry cola ----------
   One continuous path down the close-up, the benefits, the questions and the final call (generated by
   site-source/lower-journey.py; keyframes (px from the close-up top): pink 0, peach 408, butter 894, cream 1215, sky 1621, pinkcream 1958, cola 3021, at 1440x900). Each section carries its slice as close sRGB
   stops, so every boundary shares its colour and nothing plateaus. From 20% down the questions, the run to the page's last
   colour (--dusk, at the foot of the close) is one eased fall in lightness, slow past the questions' ink, so it shows no band. */
/* ---------- 2b · the close-up: one stick drawn large, its parts called out on the features ---------- */
.closeup { padding: var(--sp-open) 0 var(--sp-close); background: linear-gradient(180deg, #FF9ABB 0.0%, #FF9DB7 4.17%, #FFA1B3 8.33%, #FFA5AF 12.5%, #FFA9AC 16.67%, #FFADAA 20.83%, #FFB1A8 25.0%, #FFB5A7 29.17%, #FFB9A7 33.33%, #FFBDA7 37.5%, #FFC2A8 41.67%, #FFC4A5 45.83%, #FFC6A3 50.0%, #FFC8A0 54.17%, #FFCB9D 58.33%, #FFCE9A 62.5%, #FFD098 66.67%, #FFD396 70.83%, #FFD694 75.0%, #FFDA92 79.17%, #FFDD91 83.33%, #FFE090 87.5%, #FFE48F 91.67%, #FFE59B 95.83%, #FFE6A8 100.0%); overflow: hidden; }   /* peach into butter, settling into the note's paper */
.closeup-h { text-align: center; margin-inline: auto; max-width: 760px; }
@media (min-width: 1101px) {
  /* a poster: the heading centred on one line, the stick and its callouts centred under it, as tall as the screen
     allows below the sticky header and the heading (the figure keeps its 1000:840 drawing), with a soft pool of warm
     light behind the stick so it reads studio-lit */
  .closeup .figure { width: min(100%, (100svh - 64px - 40px - var(--h2) - var(--gap-content)) * 1000 / 840); }
  .closeup .fig-zone { background: radial-gradient(ellipse 30% 44% at 52% 52%, rgba(255, 249, 238, .62), rgba(255, 249, 238, 0) 100%); }
}
.figure { position: relative; width: min(1000px, 100%); margin: var(--gap-content) auto 0; aspect-ratio: 1000 / 840; }
.fig-zone { position: absolute; inset: 0; }
.fig-stick { position: absolute; left: 29%; top: 2.38%; width: 42%; }
.fig-stick .pic, .fig-stick img { width: 100%; height: auto; }
.fig-stick img { filter: drop-shadow(14px 26px 28px rgba(74, 21, 41, .18)); }   /* on the image only: on the picture as well, the shadow is cast twice */
.fig-side { display: none; }
.leads { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.leads-mob { display: none; }
.lead line { stroke: var(--ink); stroke-width: 1.5; }
.lead circle { fill: var(--ink); stroke: var(--milk); stroke-width: 3; }
.callouts { position: absolute; inset: 0; }
.co { position: absolute; top: calc(var(--y) / 840 * 100%); width: max-content; transform: translateY(-50%); }
.co-l { right: 75%; width: 176px; text-align: left; }   /* one width for both, so the left pair share a left edge and the longest line ends by its leader */
.co-r { left: 75%; text-align: left; }
.co dt { font: 800 clamp(17px, 1.45vw, 21px)/1.2 var(--body); letter-spacing: -.005em; }
.co dd { margin: 5px 0 0; font: 500 15px/1.42 var(--body); }
.co dd span { display: block; white-space: nowrap; }   /* every description is two lines, split at its natural pause, at every width */

/* ---------- 5 · what the collagen is for: three studied benefits, and the catch as a 12-week streak ----------
   Base (below desktop width): one column, heading, intro, the ruled list, then the catch with its calendar. The
   calendar is 84 small sticks (the site's stick, drawn small: pink body, pale crimped ends, its slanted print), placed
   week by week; each day's stick drops into its dashed slot as --n (days filled, set from the scroll by js/site.js,
   84 without JS or with reduced motion) passes its index, with a small overshoot. Weeks 4, 8 and 12 brighten as
   they complete. On a phone the calendar keeps its twelve columns, compact. */
.benefits { padding: var(--sp-open) 0 var(--sp-close); background: linear-gradient(180deg, #FFE6A8 0.0%, #FFE7B5 5.0%, #FFE9C2 10.0%, #FFECCE 15.0%, #FFEFDA 20.0%, #FFF2E5 25.0%, #FFF6F0 30.0%, #FAF5F1 35.0%, #F4F4F2 40.0%, #EFF2F3 45.0%, #EAF1F4 50.0%, #E4F0F5 55.0%, #DFEEF6 60.0%, #DAEDF7 65.0%, #D4ECF8 70.0%, #CFEAF9 75.0%, #C9E9FA 80.0%, #D0E8FE 85.0%, #D8E7FF 90.0%, #E1E6FF 95.0%, #E9E5FF 100.0%); }
.sprite-local { position: absolute; width: 0; height: 0; overflow: hidden; }
.ben { display: grid; }
.ben-h { max-width: 16ch; }
.ben-intro { margin-top: var(--gap-lede); max-width: 560px; font: 500 clamp(17px, 1.5vw, 21px)/1.5 var(--body); opacity: .86; }   /* the page's intro size, like every other section's lede */
.ben-list { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1.5px solid var(--ink-14); }
.ben-list li { padding: 16px 0 15px; border-bottom: 1.5px solid var(--ink-14); }
.ben-list h3 { font: 700 clamp(24px, 2vw, 28px)/1.15 var(--display); letter-spacing: -.012em; }
.ben-list h3 sup { margin-left: .06em; font: 500 .52em/0 var(--body); vertical-align: .85em; opacity: .6; }
.ben-line { margin-top: 6px; font: 500 18px/1.4 var(--body); }
.streak { margin-top: 36px; }
.streak-lead { font: 700 clamp(24px, 2.1vw, 30px)/1.15 var(--display); letter-spacing: -.012em; }
.streak-body { margin-top: 10px; max-width: 560px; font: 500 18px/1.5 var(--body); opacity: .86; }   /* the body size, the same as the benefit lines beside it */
.cal { --n: 84; --cw: 1fr; --ch: 40px; position: relative; margin: 22px 0 0; }
.cal-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, var(--ch)); grid-auto-columns: minmax(0, 1fr); }
.cal-grid i { --on: clamp(0, var(--n) - var(--i), 1); position: relative; display: block; }
.cal-grid i::before { content: ""; position: absolute; left: 50%; top: 50%; width: calc((var(--ch) - 8px) * 24 / 44); height: calc(var(--ch) - 8px); border-radius: 3px; border: 1.5px dashed rgba(74, 21, 41, .2); transform: translate(-50%, -50%); opacity: calc(1 - var(--on)); }
.cal-grid svg { position: absolute; left: 50%; top: 50%; width: auto; height: calc(var(--ch) - 6px); aspect-ratio: 24 / 44; overflow: visible; opacity: var(--on); filter: drop-shadow(1px 2px 1.5px rgba(88, 40, 124, .2));
  transform: translate(-50%, -50%) translateY(calc((1 - var(--on)) * -6px)) rotate(calc((mod(var(--i), 3) - 1) * 6deg)) scale(calc(.55 + .45 * var(--on) + .14 * sin(var(--on) * 180deg))); }   /* each lands a little askew, as if dropped in by hand */
.cal-weeks { position: relative; height: 22px; margin-top: 8px; }
.wk { position: absolute; top: 0; left: calc((var(--w) - .5) / 12 * 100%); transform: translateX(-50%); padding-top: 7px; font: 600 13px/1 var(--body); white-space: nowrap; opacity: calc(.45 + .55 * clamp(0, var(--n) - var(--w) * 7 + 1, 1)); }
.wk::before { content: ""; position: absolute; left: 50%; top: 0; width: 1.5px; height: 4px; background: currentColor; }
@media (min-width: 1101px) {
  /* the heading and the intro share the top row; the list and the catch share the next, sized to fit one laptop
     screen (the calendar's row height --ch is the tighter of the column's width and the screen's height) */
  .benefits { --h2s: var(--h2); }   /* the page's heading size; the calendar below sizes itself around it */
  .ben { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "h intro" "list streak"; column-gap: clamp(48px, 5.5vw, 88px); align-items: start; }
  .ben-h { grid-area: h; max-width: none; font-size: var(--h2s); }
  .ben-intro { grid-area: intro; align-self: end; margin: 0; }
  .ben-list { grid-area: list; align-self: stretch; display: grid; grid-template-rows: repeat(3, 1fr); margin-top: 30px; }   /* the rules run down beside the catch */
  .streak { grid-area: streak; margin-top: 30px; }
  .cal { --ch: clamp(24px, min((min(var(--wrap), 100vw - 2 * var(--gutter)) - clamp(48px, 5.5vw, 88px)) / 2 / 12 * .84, (100svh - 64px - 40px - 2 * var(--h2s) - 280px) / 7), 44px); margin-top: 18px; }
}

/* ---------- 6 · questions, set as type; Squeezy peeks over the list ---------- */
.faq { padding: var(--sp-open) 0 var(--sp-close); background: linear-gradient(180deg, #E9E5FF 0.0%, #F0E5FC 4.55%, #F6E5F8 9.09%, #FAE6F4 13.64%, #FEE7F0 18.18%, #FFE8EF 22.73%, #FFE8EF 27.27%, #FFE8EF 31.82%, #FFE7EE 36.36%, #FFE6EE 40.91%, #FFE5ED 45.45%, #FEE3EB 50.0%, #FEDFE9 54.55%, #FDDBE6 59.09%, #FCD5E2 63.64%, #FBCDDD 68.18%, #F9C4D7 72.73%, #F6B9D0 77.27%, #F3ACC9 81.82%, #EE9EC1 86.36%, #E590B7 90.91%, #DB81AC 95.45%, #CE729F 100.0%); }
.faq-grid { max-width: 840px; margin-inline: auto; }   /* one centred column: the heading over the list, a single object, so the heading is centred */
.faq-head { text-align: center; }
.faq-list { position: relative; margin-top: 56px; border-top: 1.5px solid var(--ink-30); }   /* room for Squeezy, who peeks over the list's top rule at its right end */
.peek { position: absolute; right: 28px; bottom: 100%; width: 104px; height: 92px; overflow: hidden; pointer-events: none; }
.host { width: 104px; height: 104px; transform: translateY(32px); transition: transform .55s var(--jelly); }
.host use { transition: opacity .35s var(--ease); }
.host .host-open { opacity: 0; }
.faq.has-open .host { transform: translateY(0) rotate(-5deg); }
.faq.has-open .host .host-rest { opacity: 0; }
.faq.has-open .host .host-open { opacity: 1; }
details { border-bottom: 1.5px solid var(--ink-14); }
summary { position: relative; display: block; list-style: none; cursor: pointer; padding: 24px 56px 24px 0; font: 700 clamp(22px, 2vw, 28px)/1.2 var(--display); letter-spacing: -.01em; }
summary::-webkit-details-marker { display: none; }
summary::before, summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 18px; height: 2px; background: currentColor; transform: translateY(-50%); transition: transform .3s var(--ease); }
summary::after { transform: translateY(-50%) rotate(90deg); }
details[open] summary::after { transform: translateY(-50%) rotate(0deg); }
summary:hover .q { opacity: .75; }
.answer { overflow: hidden; transition: height .45s var(--ease), opacity .35s var(--ease); }
.answer-in { padding: 0 0 28px; max-width: 600px; }
.answer p { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; }

/* ---------- 7 · first dibs + footer: the field turns slowly into cherry cola ---------- */
.final { position: relative; padding: clamp(84px, 6.4vw, 96px) 0 80px; color: var(--milk); background: linear-gradient(180deg, #CE729F 0.0%, #BF6491 11.11%, #B05482 22.22%, #A14573 33.33%, #923764 44.44%, #802F55 55.56%, #712748 66.67%, #65213E 77.78%, #5D1D37 88.89%, #5A1C35 100.0%); }
/* the close: the colour falls to cherry cola across the top padding; then the headline, centred on one line, and one
   milk pill under it, the email field with its button set inside (the label stays for screen readers) */
.final-in { text-align: center; }
.final h2 { font-size: clamp(46px, 6.2vw, 96px); line-height: .92; letter-spacing: -.035em; }
.final .dibs { margin: clamp(32px, 3vw, 44px) auto 0; max-width: 540px; text-align: left; }
.final .dibs-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.final .dibs-row { height: 66px; padding: 6px; gap: 6px; border-radius: 999px; background: var(--milk); box-shadow: 0 24px 48px -24px rgba(20, 2, 10, .55); transition: box-shadow .2s var(--ease); }
.final .dibs-row:focus-within { box-shadow: 0 0 0 3px var(--butter), 0 24px 48px -24px rgba(20, 2, 10, .55); }
.final .dibs.is-invalid .dibs-row { box-shadow: 0 0 0 3px var(--rasp), 0 24px 48px -24px rgba(20, 2, 10, .55); }
.final .dibs-in { height: 54px; padding: 0 0 0 22px; border-radius: 999px; background: transparent; box-shadow: none; color: var(--ink); font: 500 17px/1 var(--body); }
.final .dibs-in::placeholder { color: rgba(74, 21, 41, .5); }
.final .dibs-in:hover, .final .dibs-in:focus-visible, .final .dibs.is-invalid .dibs-in { background: transparent; box-shadow: none; outline: 0; }
.final .dibs-go { height: 54px; padding: 0 28px; border-radius: 999px; background: var(--ink); color: var(--milk); }
.final .dibs-go:hover { background: var(--ink-2); }
.final .dibs-go.is-copied { background: var(--rasp); color: #fff; }
.final .dibs-note { text-align: center; opacity: .86; }
.final .done { margin: 0 auto; text-align: center; }
.final .done-head { justify-content: center; }
.final .done p { margin-inline: auto; }
.final :focus-visible { outline-color: var(--butter); }

.foot { color: var(--milk); padding: 0 0 56px; background: var(--dusk); }
.foot-grid { display: grid; grid-template-columns: 5fr 3.5fr 3.5fr; gap: 40px; align-items: start; border-top: 1px solid rgba(255, 246, 240, .2); padding-top: 48px; }
.foot .wordmark { width: 150px; color: var(--milk); }
.foot-brand p { margin-top: 18px; font: 500 15px/1.5 var(--body); opacity: .82; }
.foot-links { display: grid; gap: 12px; font: 600 16px/1.3 var(--body); }
.foot-links a { position: relative; }
.foot-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -3px; height: 2px; background: var(--butter); transition: right .3s var(--ease); }
.foot-links a:hover::after, .foot-links a:focus-visible::after { right: 0; }
.foot-legal { grid-column: 1 / -1; margin-top: 30px; padding-top: 28px; border-top: 1px solid rgba(255, 246, 240, .2); font: 500 14px/1.5 var(--body); opacity: .84; max-width: 900px; }
.foot-legal p + p { margin-top: 8px; }
.foot-legal .copy { margin-top: 20px; }
.foot :focus-visible { outline-color: var(--butter); }

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .spill { animation: none; }
  .dibs-go, .dibs-in, .topbar, .sqz-canvas, .q, .answer, summary::before, summary::after, .daythumb, .prop, .words, .host { transition: none; }
  .dibs-go:active, .hero .dibs-go:active { transform: none; }
  .done, .sqz-canvas { animation: none; }
}

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  .figure { width: min(1000px, 100%, 200% - 700px); }   /* narrow tablets give the stick up a little, so the callouts' longest lines stay inside the margins */
  .co dd { font-size: 14px; }
  .co-l { width: 164px; }
}

/* ---------- a tablet held upright: the hero as one centred column (the line, the photo, the form, the figures),
   the way a phone has it, so the form keeps its full width instead of squeezing beside the photo ---------- */
@media (min-width: 721px) and (max-width: 1100px) and (orientation: portrait) {
  .hero { --hs: clamp(44px, 7.4vw, 72px); }
  .hero-body { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding-top: 24px; }
  .hero-copy { display: contents; }
  .hero-h1 { order: 1; }
  .hero-photo { order: 2; width: min(100%, 640px); margin-top: 32px; }
  .hero .unit { order: 3; margin-top: 28px; }
}

/* ---------- mobile: re-art-directed, not stacked ---------- */
@media (max-width: 720px) {
  :root { --gutter: 20px; --h2: clamp(30px, 8.8vw, 34px); --sp-open: 56px; --sp-close: 44px; --gap-lede: 12px; --gap-content: 28px; }   /* the same rhythm, phone-sized */
  body { font-size: 17px; }
  .wordmark { width: 112px; }
  .topbar { height: 56px; }
  .topbar .wordmark { width: 100px; }
  .topbar .head-cta { height: 34px; padding: 0 14px; font-size: 13px; }
  .dibs-note { font-size: 14px; }
  .done h3 { font-size: 28px; }
  .head-link { font-size: 15px; }

  /* the hero on a phone, composed for the phone rather than the spread stacked: it is the whole first screen. The
     line at the top where the eye starts, then the photo as a framed photograph (its own unblended print, the sunlit
     wall left as it was shot), cropped in on the hand and the pack, with her smile meeting the frame's corner, never
     a line across the screen. The capsule form at the foot, in the thumb's zone. The photo takes the screen's
     left-over height, capped at 11:10 so the crop never cuts into her hand and the form has air under it. */
  .hero { --hs: min(12.2vw, 50px); min-height: var(--vh); padding: 0 var(--gutter) max(20px, env(safe-area-inset-bottom)); background: var(--pink-soft); }
  .site-head { --wm-w: 112px; height: 64px; }
  .site-head .head-link { top: calc(-1 * var(--wm-w) * .0313); display: inline-flex; align-items: center; height: 38px; padding: 0 17px; border-radius: 999px; background: var(--ink); color: var(--milk); font-size: 14px; text-decoration: none; }
  .site-head .head-link::after { content: ""; display: block; position: absolute; inset: -4px -2px; }   /* a 46px tap target around the slimmer capsule */
  .hero-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; text-align: center; padding-top: 0; }
  .hero-copy { display: contents; }
  .hero-h1 { order: 1; margin: 10px 0 0; font-size: calc(var(--hs) * .925); line-height: 1; }
  .hero-h1 .pay { max-width: 19em; margin: 16px auto 0; font-size: 18px; line-height: 24px; }
  .hero-photo { order: 2; flex: 1 1 auto; width: auto; height: auto; min-height: 180px; max-height: 110vw; aspect-ratio: auto; margin: 24px 0 0; border-radius: 24px; background: #E9B9B4; }
  .hero-photo .pic { position: absolute; inset: 0; }
  .hero-photo img { transform: none; object-position: 72% 45%; }   /* her hand clear of the frame's left edge, the pack near the middle */
  .hero-photo::after { content: none; }
  /* the form: the same plum capsule as the desktop's, sized for a thumb */
  .hero .unit { order: 3; width: 100%; margin-top: 20px; }
  .hero .dibs-row { display: flex; gap: 0; height: 58px; border-radius: 999px; background: var(--milk); box-shadow: inset 0 0 0 2px var(--ink); overflow: hidden; }
  .hero .dibs-in, .hero .done-compact .dibs-in { flex: 1 1 auto; min-width: 0; height: 58px; padding: 0 0 0 20px; border-radius: 0; background: transparent; box-shadow: none; font: 400 16px/24px var(--body); }
  .hero .dibs-in:hover, .hero .dibs-in:focus-visible { background: transparent; box-shadow: none; outline: none; }
  .hero .dibs-row:focus-within { box-shadow: inset 0 0 0 3px var(--ink); }
  .hero .dibs.is-invalid .dibs-row { box-shadow: inset 0 0 0 3px var(--rasp); }
  .hero .dibs.is-invalid .dibs-in { box-shadow: none; }
  .hero .dibs-go, .hero .done-compact .dibs-go { flex: none; width: 138px; height: 58px; padding: 0; border-radius: 0; font: 700 16px/24px var(--body); }
  /* pain on a phone: the same three photos, one under another at one size, so the cupboard, the point of the
     heading, is reached by scrolling, not hidden behind swipes */
  main > section:not(.hero):not(.squeeze) { scroll-margin-top: 32px; }   /* a landing (an anchor, a jump) leaves each heading clear of the sticky bar */
  .pain-h { max-width: 10em; line-height: 1; }
  .pain-cards { grid-template-columns: 1fr; gap: 28px; }
  .pain-card .shot { height: auto; aspect-ratio: 25 / 16; border-radius: 24px; }
  .pain-cards > li:nth-child(1) img { object-position: 60% 50%; }
  .pain-cards > li:nth-child(2) img { object-position: 60% 38%; }   /* the whole tub, the tap's stream and the cup's mouth */
  .pain-cards > li:nth-child(3) img { object-position: 50% 74%; }
  .pain-card figcaption { max-width: 320px; margin: 16px auto 0; font-size: 22px; line-height: 26px; }
  /* the solution on a phone: the diagonal packet centred, the rail under it */
  .squeeze { --pw: min(calc((100vw - 2 * var(--gutter)) * .814), calc((var(--vh) - 380px) * .814)); --cw: calc(var(--pw) / var(--m-plen)); --ch: calc(var(--cw) * var(--m-cr)); --ph: calc(var(--ch) * var(--m-ph)); --ss: 1; --tilt: 0deg; --pin: 160svh; --pcy: calc(var(--vh) * .45); }
  .packet { left: calc(50vw - var(--cw) * (var(--m-pl) + var(--m-plen) / 2)); top: calc(var(--pcy) - var(--ch) * (var(--m-pt) + var(--m-ph) / 2)); aspect-ratio: var(--m-cw) / var(--m-ch); transform-origin: 50% 50%; }
  .sol-intro { top: 72px; max-width: 11em; }   /* under the sticky bar; the page's heading size, on two balanced lines */
  .js:not(.static) .beats { top: auto; bottom: max(78px, calc(var(--vh) * .11)); gap: 22px; }
  .js:not(.static) .beat { position: static; }
  .js:not(.static) .beat h3 { font-size: clamp(24px, 7vw, 28px); }
  .js:not(.static) .beat p { max-width: calc(100vw - 2 * var(--gutter)); margin-top: 10px; font-size: 16px; }   /* the line hangs centred under the rail */
  .static .squeeze, .static .hero { --vh: min(100svh, 844px); }
  .beats { padding: 0 0 32px; }
  .beat { --bk: 1; margin-top: calc(var(--ch) * -0.12); }
  .beat h3 { margin-top: calc(var(--ch) * -0.2); font-size: clamp(53px, 16vw, 64px); }
  .beat[data-beat="squeeze"] { padding-left: 0; }
  .beat-pic { width: var(--cw); margin: 0 0 0 calc(var(--cw) * -1 * var(--m-pl)); }
  .beat p { margin-top: 12px; font-size: 17px; }

  /* the close-up on a phone: the stick lies on its side, tilted 8 degrees so it rises to the right, the way it leans on
     desktop. The four callouts zig-zag along it, below, above, below, above (the printed "5 g collagen", the jelly,
     the body, the tear notch), every leader square to the stick, so each pair of text blocks steps up with its slope.
     The numbers come from the 1000 x 310 side render drawn 86.8 wide and centred in a zone 38.73 tall, turned by
     --tilt (container units: the figure is the container; change the tilt and they must be worked out again).
     --cx is where a leader meets its text, --off how far past the zone edge it starts, --len its length to the dot.
     The left pair sit on the left page margin and the right pair on the right, so every description fits on two lines,
     and each leader rises from under its title. */
  .figure { --tilt: -8deg; --lg: 2.5cqw; container-type: inline-size; width: calc(100% + 16px); margin: var(--gap-content) -8px 0; aspect-ratio: auto; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "a" "z" "b"; }
  .fig-zone { position: relative; inset: auto; grid-area: z; aspect-ratio: auto; height: 38.73cqw; }
  .fig-stick { display: none; }
  .fig-side { display: block; position: absolute; left: 6.6%; width: 86.8%; top: 5.91cqw; filter: drop-shadow(6px 12px 12px rgba(74, 21, 41, .16)); }   /* shadow cast after the turn, so it still falls down and right */
  .fig-side .pic, .fig-side img { display: block; width: 100%; height: auto; }
  .fig-side img { transform: rotate(var(--tilt)); }
  .leads-desk { display: none; }
  .callouts { position: static; display: contents; }
  .co { position: relative; top: auto; right: auto; left: auto; width: max-content; transform: none; }
  .co-collagen, .co-jelly { justify-self: start; margin: 0 0 0 8px; text-align: left; }
  .co-sugar, .co-notch { justify-self: end; margin: 0 8px 0 0; text-align: right; }
  .co dt { font-size: 14.5px; line-height: 1.2; white-space: nowrap; }
  .co dd { font-size: 13px; line-height: 1.45; margin-top: 6px; }
  .co-jelly, .co-notch { grid-area: a; align-self: end; margin-bottom: calc(var(--off) * 1cqw + var(--lg)); }
  .co-collagen, .co-sugar { grid-area: b; align-self: start; margin-top: calc(var(--off) * 1cqw + var(--lg)); }
  .co-collagen { --cx: 19.91; --off: 8.55; --len: 14.86; }
  .co-jelly { --cx: 23.53; --off: 0.60; --len: 12.95; }
  .co-sugar { --cx: 76.47; --off: 0.60; --len: 12.78; }
  .co-notch { --cx: 82.24; --off: 8.85; --len: 10.69; }
  /* the leaders: a 1.5px line and a dot, turned with the stick, from just past the text to the feature */
  .co::after { content: ""; position: absolute; left: 50%; width: 14px; margin-left: -7px; height: calc(var(--len) * 1cqw + 7px); pointer-events: none; transform: rotate(var(--tilt));
    background: radial-gradient(circle, var(--ink) 4px, var(--milk) 4.5px, var(--milk) 6px, transparent 6.5px) no-repeat, linear-gradient(var(--ink), var(--ink)) no-repeat; background-size: 14px 14px, 1.5px calc(100% - 7px); }
  .co-jelly::after, .co-notch::after { top: calc(100% + var(--lg)); transform-origin: 50% 0; background-position: 50% 100%, 50% 0; }
  .co-collagen::after, .co-sugar::after { bottom: calc(100% + var(--lg)); transform-origin: 50% 100%; background-position: 50% 0, 50% 100%; }
  .co-collagen::after, .co-jelly::after { left: calc(var(--cx) * 1cqw - 8px); }   /* back from the margin to the leader */
  .co-sugar::after, .co-notch::after { left: auto; right: calc((100 - var(--cx)) * 1cqw - 8px); margin: 0 -7px 0 0; }

  .ben-list h3 { font-size: 24px; }
  .ben-line { font-size: 17px; }
  .streak { margin-top: 30px; }
  .streak-lead { font-size: 25px; }
  .streak-body { font-size: 17px; }   /* the phone's body size, like the benefit lines */
  /* the calendar stays twelve weeks across, compact: on a phone its sticks are the same size as on a laptop */
  .cal { --ch: 34px; margin-top: 18px; }
  .wk { font-size: 12.5px; }
  .wk:last-child { left: auto; right: 0; transform: none; }
  .wk:last-child::before { left: auto; right: 13px; }   /* the tick stays under the last week's column */

  .faq-list { margin-top: 52px; }
  .peek { right: 12px; width: 84px; height: 76px; }
  .host { width: 84px; height: 84px; transform: translateY(27px); }
  summary { padding: 18px 44px 18px 0; font-size: 20px; }
  .answer-in { padding-bottom: 20px; }
  .answer p { font-size: 16px; }

  /* the lower journey's phone stops (keyframes (px from the close-up top): pink 0, peach 213, butter 467, cream 835, sky 1380, pinkcream 1735, cola 2515) */
  .closeup { background: linear-gradient(180deg, #FF9ABB 0.0%, #FFA1B3 7.69%, #FFA8AD 15.38%, #FFAFA9 23.08%, #FFB7A7 30.77%, #FFBEA7 38.46%, #FFC4A5 46.15%, #FFC8A0 53.85%, #FFCD9B 61.54%, #FFD297 69.23%, #FFD893 76.92%, #FFDE90 84.62%, #FFE48F 92.31%, #FFE59A 100.0%); }
  .benefits { background: linear-gradient(180deg, #FFE59A 0.0%, #FFE6A6 3.7%, #FFE7B1 7.41%, #FFE9BC 11.11%, #FFEBC7 14.81%, #FFEDD2 18.52%, #FFEFDC 22.22%, #FFF2E6 25.93%, #FFF6EF 29.63%, #FBF5F1 33.33%, #F8F4F2 37.04%, #F4F3F2 40.74%, #F0F2F3 44.44%, #ECF1F4 48.15%, #E8F0F5 51.85%, #E4F0F5 55.56%, #E0EFF6 59.26%, #DCEEF7 62.96%, #D8EDF8 66.67%, #D4ECF8 70.37%, #D0EBF9 74.07%, #CBEAFA 77.78%, #CCE9FC 81.48%, #D3E8FF 85.19%, #DBE7FF 88.89%, #E2E6FF 92.59%, #EAE5FE 96.3%, #F0E5FB 100.0%); }
  .faq { background: linear-gradient(180deg, #F0E5FB 0.0%, #F6E5F8 5.88%, #FBE6F4 11.76%, #FEE7F0 17.65%, #FFE8EF 23.53%, #FFE8EF 29.41%, #FFE7EE 35.29%, #FFE6ED 41.18%, #FEE4EC 47.06%, #FEDFE9 52.94%, #FDD8E4 58.82%, #FBCEDE 64.71%, #F8C1D5 70.59%, #F4B1CB 76.47%, #EE9DC0 82.35%, #E189B2 88.24%, #D075A2 94.12%, #BC608E 100.0%); }
  .final { padding: 72px 0 32px; background: linear-gradient(180deg, #BC608E 0.0%, #AE517F 12.5%, #9F4371 25.0%, #903662 37.5%, #7F2E53 50.0%, #702747 62.5%, #65213E 75.0%, #5D1D37 87.5%, #5A1C35 100.0%); }
  .final h2 { font-size: min(52px, (100vw - 40px) / 8.3); white-space: nowrap; }   /* one line at every phone width: the line runs 7.96x its size, inside the 20px gutters */
  .final .dibs { margin-top: 28px; }
  .final .dibs-row { height: 60px; padding: 5px; gap: 5px; }
  .final .dibs-in { height: 50px; padding: 0 0 0 18px; font-size: 16px; }
  .final .dibs-go { height: 50px; padding: 0 20px; }

  .foot { padding: 40px 0 44px; }
  .foot-grid { grid-template-columns: 1fr; gap: 28px; padding-top: 36px; }
  .foot .wordmark { width: 140px; }
  .foot-legal { margin-top: 10px; }
}

/* the narrowest phones: a little less padding so the email placeholder fits beside the button */
@media (max-width: 380px) {
  .dibs-in, .hero .dibs-in, .final .dibs-in { padding: 0 12px; font-size: 15px; }
  .dibs-go, .hero .dibs-go, .final .dibs-go { padding: 0 14px; }
}

/* short phones: the solution's packet sits a little higher, so the rail keeps its room under it */
@media (max-width: 720px) and (max-height: 760px) {
  .squeeze { --pcy: calc(var(--vh) * .43); }
}

/* ---------- the privacy page (privacy/index.html): a pink masthead with the wordmark, one readable column, the
   home page's dusk footer. Only the page's own pieces live here; type, colour and the footer come from above. ---------- */
.legal-col { width: min(720px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.legal-top { background: var(--pink-soft); }
.legal-bar { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; height: 80px; display: flex; align-items: center; justify-content: space-between; }
.legal-bar .wordmark { width: 132px; }
.legal-mast { padding: clamp(56px, 6vw, 88px) 0 clamp(48px, 5vw, 72px); }
.legal-mast h1 { font-size: clamp(48px, 6vw, 84px); line-height: .95; letter-spacing: -.03em; }
.legal-date { margin-top: 18px; font: 600 15px/1.3 var(--body); opacity: .72; }
.legal { padding: clamp(48px, 5vw, 72px) 0 clamp(88px, 8vw, 120px); font-size: 18px; line-height: 1.65; }
.legal-intro { font-size: clamp(19px, 1.6vw, 21px); line-height: 1.55; }
.legal section { margin-top: 52px; }
.legal h2 { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; letter-spacing: -.015em; margin-bottom: 14px; }
.legal p + p, .legal p + ul, .legal ul + p { margin-top: 14px; }
.legal ul { display: grid; gap: 10px; }
.legal li { position: relative; padding-left: 22px; }
.legal li::before { content: ""; position: absolute; left: 2px; top: .66em; width: 7px; height: 7px; border-radius: 50%; background: var(--rasp); }
.legal strong { font-weight: 700; }
.legal a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.legal a:hover { color: var(--rasp); }
.legal-short { margin-top: 40px; padding: 30px 32px 32px; border-radius: 24px; background: #FFE9F0; box-shadow: inset 0 0 0 1.5px var(--ink-14); }
.legal-short h2 { font-size: clamp(22px, 1.9vw, 26px); }
.legal-page .foot { padding-top: 56px; }
.legal-page .foot-grid { border-top: 0; padding-top: 0; }
.legal-page .foot-legal { margin-top: 18px; }
.legal-page .foot-legal .copy { margin-top: 0; }
@media (max-width: 720px) {
  .legal-bar { height: 64px; }
  .legal-bar .wordmark { width: 108px; }
  .legal-bar .head-cta { height: 34px; padding: 0 14px; font-size: 13px; }
  .legal { font-size: 17px; }
  .legal section { margin-top: 44px; }
  .legal-short { padding: 24px 22px 26px; border-radius: 20px; }
  .legal-page .foot { padding-top: 44px; }
}