/* Sedamin France (index.html, confidentialite.html, conditions.html; built 2026-11-01 by _tools/build-css.mjs, do
   not edit by hand): the German Artroflex page's world as a tricolore. Blue #261fec fields, white #fcfaff card and
   paper, the red #e30e2c for buying, prices and the headline band. Red never sets text on blue (1.9:1). */

@font-face { font-family: "Sharp Grotesk SmBold 25"; src: url("../fonts/SharpGroteskSmBold25.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Sharp Grotesk Black 15"; src: url("../fonts/SharpGrotesk-Black15.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Sharp Grotesk SemiBold 20"; src: url("../fonts/SharpGrotesk-SemiBold20.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Sharp Grotesk Medium 20"; src: url("../fonts/SharpGrotesk-Medium20.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Sharp Grotesk Medium 15"; src: url("../fonts/SharpGrotesk-Medium15.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Sharp Grotesk Book 20"; src: url("../fonts/SharpGrotesk-Book20.woff2") format("woff2"); font-display: swap; }

:root {
  --blue: #261fec;
  --white: #fcfaff;
  --red: #e30e2c;          /* the Artroflex pack red at the depth of its printed bands: white type on it is 4.6:1 */
  --red-deep: #c50d27;     /* red for small text and hairlines on white, 5.7:1 */
  --red-tint: rgb(238 17 49 / .12);
  /* the same three at lower opacity */
  --blue-text-2: rgb(38 31 236 / .74);   /* secondary text on white, 4.8:1 */
  --blue-rule: rgb(38 31 236 / .16);
  --blue-line: rgb(38 31 236 / .3);
  --blue-wash: rgb(38 31 236 / .045);
  --blue-tint: rgb(38 31 236 / .08);
  --white-text-2: rgb(252 250 255 / .8); /* secondary text on blue, 5.4:1 */
  --white-rule: rgb(252 250 255 / .2);
  --shadow-deep: rgb(0 0 0 / .42);

  /* omega's roles: display (wordmark, prices), backdrop (giant words), headline, proof, label, body */
  --font-display: "Sharp Grotesk SmBold 25", "Arial Narrow", sans-serif;
  --font-backdrop: "Sharp Grotesk Black 15", "Arial Narrow", sans-serif;
  --font-headline: "Sharp Grotesk SemiBold 20", "Arial Narrow", sans-serif;
  --font-proof: "Sharp Grotesk Medium 20", "Arial Narrow", sans-serif;
  --font-label: "Sharp Grotesk Medium 15", "Arial Narrow", sans-serif;
  --font-body: "Sharp Grotesk Book 20", Arial, sans-serif;

  --step--1: .75rem; --step-0: .875rem; --step-1: 1rem; --step-2: 1.1875rem; --step-3: 1.5rem; --step-4: 2rem;
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem;
  --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem;
  --gutter: clamp(1.125rem, 4.4vw, 4.5rem);
  --content: 84rem;
  --section: clamp(2.5rem, 4.6vw, 4.5rem); /* tightened for the Artroflex preview */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --notch: 12px;
  --sticky-room: calc(4.75rem + max(.75rem, env(safe-area-inset-bottom)));
  color-scheme: light;
  accent-color: var(--blue);
  scrollbar-color: var(--blue-line) var(--white);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--space-4); scroll-padding-bottom: var(--sticky-room); }
body {
  margin: 0;
  background: var(--white);
  color: var(--blue);
  font: 400 1rem/1.55 var(--font-body);
  letter-spacing: .005em;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
/* the page appears only once all its fonts are in (the short script in each page's head takes the class away), so no
   text is ever drawn in a stand-in font and then switched; should the script not run, it appears after 3 s anyway */
html.fonts-wait body { visibility: hidden; animation: fonts-wait-end 0s 3s forwards; }
@keyframes fonts-wait-end { to { visibility: visible; } }
h1, h2, h3, p, figure, dl, dd, ol, ul { margin: 0; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; hyphens: manual; }
p, dd, li { hyphens: auto; overflow-wrap: break-word; }
ol, ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
/* a picture's sources never take a cell in the grids its image sits in */
source { display: none; }
svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
a { color: inherit; text-decoration: none; text-underline-offset: .2em; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a, button, input, label { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
em { font-style: normal; }
strong { font-weight: 400; }
s { text-decoration-thickness: 2px; }
::selection { background: var(--blue); color: var(--white); }
.field-blue ::selection, .site-header ::selection, .sticky-order ::selection { background: var(--white); color: var(--blue); }
input { caret-color: var(--blue); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
/* on blue and on the night the focus ring is white: red would be lost on blue */
.field-blue :focus-visible, .site-header :focus-visible, .sticky-order :focus-visible, .site-footer :focus-visible { outline-color: var(--white); }
[hidden] { display: none !important; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link { position: fixed; top: -6rem; left: var(--space-4); z-index: 100; padding: var(--space-3) var(--space-4); background: var(--blue); color: var(--white); font: var(--step-1)/1 var(--font-proof); box-shadow: 0 0 0 2px var(--white); }
.skip-link:focus { top: var(--space-3); }
.wrap { width: min(100% - 2 * var(--gutter), var(--content)); margin-inline: auto; }
.nw { white-space: nowrap; }

/* ---- fields ------------------------------------------------------------------------------------ */
.field-blue {
  position: relative;
  background-color: var(--blue);
  background-image: linear-gradient(to right, rgb(252 250 255 / .06) 1px, transparent 1px), linear-gradient(to bottom, rgb(252 250 255 / .06) 1px, transparent 1px);
  background-size: 72px 72px;
  color: var(--white);
}
.field-paper {
  background-color: var(--white);
  background-image: linear-gradient(to right, rgb(38 31 236 / .05) 1px, transparent 1px), linear-gradient(to bottom, rgb(38 31 236 / .05) 1px, transparent 1px);
  background-size: 72px 72px;
}
.field-wash { background: linear-gradient(var(--blue-wash), var(--blue-wash)), var(--white); }

/* omega's notched tag */
.chip {
  display: inline-block;
  padding: .5rem .6875rem .4375rem;
  font: .75rem/1 var(--font-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
}
.chip-white { background: var(--white); color: var(--blue); }
.chip-save { padding: .5rem .75rem .375rem; background: var(--red); color: var(--white); font: 1.5rem/1 var(--font-display); letter-spacing: -.01em; text-transform: none; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }

.section-title { font: clamp(1.875rem, 1rem + 3.4vw, 4.25rem)/.92 var(--font-headline); letter-spacing: -.035em; }
.proof { font: clamp(1.25rem, 1rem + .9vw, 1.875rem)/1.16 var(--font-proof); letter-spacing: -.02em; }
/* running copy never leaves a single word on its last line */
.proof, .lede, .hero-sub, .signal-call, .lifestyle-call, .problems-ledger p, .journey-text > span, .safety-panels p, .order-progress-text, .order-shipping, .order-success p { text-wrap: pretty; }
.lede { font: var(--step-2)/1.5 var(--font-body); color: var(--blue-text-2); }
.field-blue .lede { color: var(--white-text-2); }


/* ---- actions ----------------------------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 3.5rem;
  padding: var(--space-4) var(--space-5);
  border: 0;
  font: 1.5rem/1.05 var(--font-proof);
  letter-spacing: -.015em;
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.button:focus-visible { clip-path: none; }
.button svg { width: 1.375rem; height: 1.375rem; stroke-width: 1.9; transition: transform .35s var(--ease); }
.button:hover svg { transform: translateX(4px); }
.button-red { background: var(--red); color: var(--white); }
.button-red:hover { background: var(--white); color: var(--blue); }
/* on white surfaces the hover turns blue, so the button never vanishes into the page */
.field-paper .button-red:hover, .field-wash .button-red:hover, .order-card .button-red:hover, .legal .button-red:hover, .desk .button-red:hover, .strength .button-red:hover { background: var(--blue); color: var(--white); }


/* ---- header ------------------------------------------------------------------------------------ */
.site-header { position: relative; z-index: 3; background: var(--blue); color: var(--white); border-bottom: 1px solid var(--white-rule); }
.header-inner { display: flex; align-items: center; gap: var(--space-6); min-height: 4rem; }
.brand { display: inline-flex; align-items: baseline; gap: .625rem; }
.brand b { font: 400 1.25rem/1 var(--font-display); letter-spacing: -.02em; text-transform: uppercase; }
.brand i { font: .75rem/1 var(--font-label); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--white-text-2); }
.brand-mark { align-self: center; width: 1.125rem; height: 1.125rem; background: var(--red); clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%); }
.desktop-nav { display: flex; gap: clamp(1rem, 2.2vw, 2rem); margin-inline: auto; font: .8125rem/1 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--white-text-2); }
.desktop-nav a { padding-block: var(--space-4); transition: color .2s; }
.desktop-nav a:hover { color: var(--white); text-decoration: underline; text-decoration-color: var(--white); text-decoration-thickness: 2px; text-underline-offset: .5em; }
.header-order {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  border-bottom: 2px solid var(--white);
  color: var(--white);
  font: 1rem/1 var(--font-proof);
}
.header-order svg { width: 1.125rem; height: 1.125rem; transition: transform .35s var(--ease); }
.header-order:hover svg { transform: translateX(3px); }


/* ---- hero: the promise and the order card ------------------------------------------------------- */
.hero { --hero-pad-end: clamp(2.25rem, 4vw, 3.75rem); padding: clamp(1.25rem, 2.5vw, 2.5rem) 0 var(--hero-pad-end); overflow: clip; }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(23rem, 30rem); gap: clamp(1.5rem, 3.6vw, 3.75rem); align-items: stretch; }
.hero-pitch { display: flex; flex-direction: column; padding-top: clamp(0rem, 2vw, 1.5rem); }
.hero-title { max-width: 13ch; font: clamp(2.5rem, 1.2rem + 3.6vw, 4.5rem)/.9 var(--font-headline); letter-spacing: -.035em; }
/* the second clause sits on a red band with white type, like the bands on the pack: red text on blue would be
   1.9:1, white on the red is 4.2:1 at 40-72px */
.hero-title em { display: inline-block; margin-top: .18em; padding: .03em .12em .07em; line-height: .95; background: var(--red); color: var(--white); }
/* narrow phones: the opening clause scales down a little rather than break its band in two */
@media (max-width: 480px) { .hero:not(.hero-closing) .hero-title em { white-space: nowrap; font-size: min(1em, 10vw); } }
.hero-sub { margin-block: var(--space-5) var(--space-4); font: clamp(1.25rem, 1rem + .9vw, 1.875rem)/1.15 var(--font-proof); letter-spacing: -.02em; }
/* the cinematic figure stands on the section's lower edge, beside the card; its box is the image box,
   so the callouts' percentages are positions on his body */
.hero-figure { position: relative; width: min(100% - 6rem, 38rem); margin: auto 0 calc(-1 * var(--hero-pad-end)) auto; }
.hero-figure img:not(.callout img) { width: 100%; filter: drop-shadow(0 30px 40px var(--shadow-deep)); }
/* a callout: a dot on the joint (--x, --y), a leader to --dx, then the drawing and its label. --tx and
   --ty place the drawing at the leader's end (-100%: left of it, 0: right of it); --flow puts the label
   under (column) or over (column-reverse) the drawing, --align on which side it runs */
.callouts { position: absolute; inset: 0; pointer-events: none; }
.callout { --disc: clamp(4.25rem, 5.6vw, 5.5rem); position: absolute; inset: 0; }
.callout::before { content: ""; position: absolute; left: var(--x); top: var(--y); z-index: 1; width: .625rem; height: .625rem; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 4px rgb(252 250 255 / .32), 0 1px 4px rgb(0 0 0 / .45); transform: translate(-50%, -50%); }
.callout::after { content: ""; position: absolute; top: var(--y); left: min(var(--x), var(--dx)); width: calc(max(var(--x), var(--dx)) - min(var(--x), var(--dx))); border-top: 1.5px solid var(--white); transform: translateY(-50%); filter: drop-shadow(0 1px 1.5px rgb(0 0 0 / .4)); }
.callout-tip { position: absolute; top: var(--y); left: var(--dx); display: flex; flex-direction: var(--flow, column); align-items: var(--align); gap: var(--space-2); transform: translate(var(--tx), var(--ty, calc(var(--disc) / -2))); }
.callout-disc { display: grid; place-items: center; width: var(--disc); aspect-ratio: 1; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 5px rgb(252 250 255 / .26), 0 12px 24px -10px rgb(0 0 0 / .5); }
.callout-disc img { width: 84%; }
.callout b { width: max-content; max-width: 10.75rem; hyphens: manual; overflow-wrap: normal; padding: .4375rem .625rem .375rem; background: var(--white); color: var(--blue); font: 400 .8125rem/1.18 var(--font-proof); letter-spacing: -.005em; text-align: var(--ta); clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%); box-shadow: 0 10px 22px -12px rgb(0 0 0 / .5); }
.callout-shoulder { --x: 33%; --y: 24%; --dx: 16%; --tx: -100%; --align: flex-end; --ta: right; }
.callout-hand { --x: 32%; --y: 58%; --dx: 16%; --tx: -100%; --align: flex-end; --ta: right; }
.callout-knee { --x: 58%; --y: 79%; --dx: 78%; --tx: 0%; --align: flex-start; --ta: left; }
.hero-formula { position: absolute; top: 4%; left: -2%; }


/* the order card: the product stands on its top edge */
.order { position: relative; z-index: 2; }
.order-hero { padding-top: clamp(5.5rem, 8vw, 7rem); }
.order-pack { position: absolute; top: 0; left: 50%; z-index: 3; width: clamp(12rem, 15.5vw, 14.5rem); /* Artroflex: box and bottle side by side, wider than Hondro's tall box */ transform: translateX(-50%) rotate(-4deg); pointer-events: none; }
.order-pack img { width: 100%; filter: drop-shadow(0 18px 20px var(--shadow-deep)); }
.order-hero .order-card, .order-hero .order-success { padding-top: clamp(4.75rem, 6vw, 5.75rem); }
.order-card, .order-success {
  position: relative;
  border-radius: 18px;
  background: var(--white);
  color: var(--blue);
  box-shadow: 0 34px 70px -28px var(--shadow-deep), 0 10px 24px -12px rgb(0 0 0 / .22);
}
.order-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding: clamp(1.25rem, 2.2vw, 1.875rem); }
.order-head { display: grid; justify-items: start; gap: var(--space-3); }
.order-head h2 { font: clamp(1.75rem, 1.3rem + 1.4vw, 2.375rem)/.95 var(--font-headline); letter-spacing: -.03em; }
.order-head h2 em { display: block; color: var(--blue-text-2); }
.order-head h2:focus { outline: none; }

.order-price { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); border-block: 1px solid var(--blue-rule); }
.order-price p { display: grid; gap: .375rem; }
.order-price p > span { font: .75rem/1 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--blue-text-2); }
/* the struck old price: one 3px red rule across figure and unit, through the middle of the figures (50.7 % of the
   1em line); a text line-through would break at the smaller unit and drop under it */
.price-old s { position: relative; justify-self: start; font: 400 1.5rem/1 var(--font-display); letter-spacing: -.02em; color: var(--blue-text-2); text-decoration: none; }
.price-old s::after { content: ""; position: absolute; inset: 50% -.06em auto; height: 3px; translate: 0 -50%; background: var(--red); }
.price-new { justify-items: end; }
.price-new strong { font: 400 clamp(2.75rem, 2.1rem + 2vw, 3.5rem)/.9 var(--font-display); letter-spacing: -.04em; word-spacing: .12em; font-variant-numeric: tabular-nums; }
/* the currency is the price's unit: the same display cut on the same baseline, smaller than the figure so "49 €"
   reads number first. The euro sign is one glyph, so it sits at .62 of the figure (never under 14px), with a
   narrow gap, where the three letters of "CHF" needed .42; every price row keeps one line on a 320px phone */
.price-unit { font-size: max(.62em, .875rem); letter-spacing: 0; word-spacing: .06em; }


.order-steps { display: grid; gap: var(--space-3); }
.order-progress { height: 4px; border-radius: 999px; background: var(--blue-tint); overflow: hidden; }
.order-progress-bar { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--blue); transform: scaleX(var(--progress, .08)); transform-origin: left; transition: transform .6s var(--ease), background-color .3s; }
.order-card.is-ready .order-progress-bar { background: var(--red); }
.order-progress-text { margin-top: calc(-1 * var(--space-1)); font: var(--step-0)/1.35 var(--font-body); color: var(--blue-text-2); }

.field { display: grid; gap: .375rem; }
.field label { font: .75rem/1 var(--font-label); letter-spacing: .08em; text-transform: uppercase; }
.field input {
  width: 100%;
  min-height: 3.375rem;
  padding: 0 var(--space-4);
  border: 1.5px solid var(--blue-line);
  border-radius: 10px;
  background: var(--white);
  font: 1.0625rem/1.2 var(--font-body);
  color: var(--blue);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input::placeholder { color: var(--blue-text-2); opacity: 1; }
.field input:hover { border-color: var(--blue); }
.field input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgb(38 31 236 / .16); }
.field input[aria-invalid="true"] { border-color: var(--red-deep); border-width: 2px; box-shadow: 0 0 0 4px rgb(238 17 49 / .2); }
.field-hint { display: none; align-items: flex-start; gap: .375rem; font: var(--step-0)/1.35 var(--font-proof); color: var(--blue); }
.field-hint::before { content: ""; flex: none; width: .5rem; height: .5rem; margin-top: .3rem; border-radius: 50%; background: var(--red); }
.field:has([aria-invalid="true"]) .field-hint { display: flex; }
.phone-input { position: relative; }
.phone-input span { position: absolute; top: 50%; left: var(--space-4); transform: translateY(-50%); font: 1.0625rem/1 var(--font-proof); pointer-events: none; }
.phone-input input { padding-left: 3.5rem; }

.order-total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--blue-rule); }
.order-total > span { font: .75rem/1.3 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--blue-text-2); }
.order-total strong { font: 400 clamp(1.75rem, 1.4rem + 1vw, 2.25rem)/1 var(--font-display); letter-spacing: -.03em; word-spacing: .12em; font-variant-numeric: tabular-nums; }
.order-shipping { margin-top: calc(-1 * var(--space-2)); font: var(--step-0)/1.4 var(--font-body); color: var(--blue-text-2); }
.form-error { padding: var(--space-3) var(--space-4); border-left: 1px solid var(--red); background: var(--red-tint); font: var(--step-0)/1.4 var(--font-proof); }
.form-error:empty { display: none; }
.button-submit { width: 100%; min-height: 4.25rem; }
.hp { position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden; }
.button-sending { display: none; }
form[data-state="sending"] .button-label { display: none; }
form[data-state="sending"] .button-sending { display: inline; }
form[data-state="sending"] .button-submit { cursor: progress; background: var(--blue-tint); }
.order-assurance { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: var(--space-2); font: .75rem/1.25 var(--font-label); letter-spacing: .05em; text-transform: uppercase; color: var(--blue-text-2); }
.order-assurance li { display: flex; align-items: center; gap: .375rem; }
.order-assurance svg { width: 1rem; height: 1rem; color: var(--blue); }
.order-stock { justify-self: center; font: .75rem/1 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--blue-text-2); }
.order-stock b { font-weight: 400; color: var(--blue); }

/* the confirmation answers back */
.order-success { display: grid; justify-items: center; gap: var(--space-4); padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem); text-align: center; }
.order-success:focus { outline: none; }
.order-success h2 { font: clamp(2rem, 1.5rem + 1.8vw, 3rem)/.95 var(--font-headline); letter-spacing: -.03em; }
.order-success p { max-width: 34ch; font: var(--step-2)/1.45 var(--font-body); color: var(--blue-text-2); }
.order-success .success-recap { padding: var(--space-3) var(--space-4); background: var(--blue-tint); font: var(--step-1)/1.4 var(--font-proof); color: var(--blue); }
.order-success .preview-note { font-size: var(--step-0); }
.success-burst { position: relative; display: grid; place-items: center; width: 5rem; height: 5rem; border-radius: 50%; background: var(--red); color: var(--white); }
.success-check { width: 2.5rem; height: 2.5rem; stroke-width: 2.2; stroke-dasharray: 26; stroke-dashoffset: 26; animation: draw-check .55s .2s var(--ease) forwards; }
.success-burst i { position: absolute; width: .5rem; height: .75rem; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: var(--blue); opacity: 0; animation: mist-drop 1.1s var(--ease) forwards; }
.success-burst i:nth-of-type(1) { --a: 0deg; } .success-burst i:nth-of-type(2) { --a: 60deg; animation-delay: .05s; }
.success-burst i:nth-of-type(3) { --a: 120deg; animation-delay: .1s; } .success-burst i:nth-of-type(4) { --a: 180deg; animation-delay: .05s; }
.success-burst i:nth-of-type(5) { --a: 240deg; animation-delay: .12s; } .success-burst i:nth-of-type(6) { --a: 300deg; animation-delay: .08s; }
@keyframes draw-check { to { stroke-dashoffset: 0; } }
@keyframes mist-drop { 0% { opacity: 1; transform: rotate(var(--a)) translateY(-1.5rem) scale(.4); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-4.25rem) scale(1); } }

/* ---- how to use: a numbered path beside one large photograph and two framed prints --------------- */
.usage { padding-block: var(--section); overflow: clip; }
.usage-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; gap: var(--space-6) clamp(1.5rem, 4vw, 4rem); }
.usage-copy { display: grid; align-content: center; gap: clamp(1.25rem, 2.6vw, 2rem); }
.usage-copy .section-title { font-size: clamp(1.875rem, 1rem + 2.6vw, 3.5rem); }
.usage-steps { position: relative; display: grid; gap: var(--space-5); }
.usage-steps::before { content: ""; position: absolute; top: 1.75rem; bottom: 1.75rem; left: calc(1.75rem - 1px); border-left: 2px dashed var(--blue-line); }
.usage-steps li { position: relative; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); align-items: center; gap: var(--space-5); }
.usage-steps p { max-width: 24ch; font: clamp(1.1875rem, .95rem + .7vw, 1.5rem)/1.15 var(--font-proof); letter-spacing: -.015em; }
.usage-figure { display: block; margin-bottom: .125rem; font: 400 clamp(3rem, 2rem + 3vw, 4.5rem)/.9 var(--font-display); letter-spacing: -.04em; }
.usage-node { position: relative; z-index: 1; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--blue); color: var(--white); font: 1.5rem/1 var(--font-backdrop); box-shadow: 0 0 0 6px var(--white); }
/* step 2 large, steps 1 and 3 as framed prints laid over its corners */
.usage-collage { position: relative; aspect-ratio: 1 / .92; }
.usage-collage img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; }
.usage-main { position: absolute; top: 7%; right: 0; width: 72%; }
.usage-print { position: absolute; padding: .375rem; border-radius: 4px; background: var(--white); box-shadow: 0 0 0 1px var(--blue-rule), 0 28px 44px -24px rgb(0 0 0 / .42); }
.usage-print-1 { top: 0; left: 0; width: 40%; rotate: -3deg; }
.usage-print-3 { bottom: 0; left: 9%; width: 37%; rotate: 2.5deg; }
.usage-collage .usage-node { position: absolute; }
.usage-main .usage-node { top: -1.75rem; right: var(--space-6); }
.usage-print .usage-node { top: -1.5rem; right: -1.25rem; }


/* ---- how ordering works: three stations rising toward the delivery, the money in two numbers ----- */
.ordering { --journey-gap: clamp(1.25rem, 3vw, 2.5rem); padding-block: var(--section); }
.journey { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1fr) minmax(0, 1.4fr); grid-template-rows: auto auto; column-gap: var(--journey-gap); margin-top: clamp(1.25rem, 2.6vw, 2.25rem); }
/* the photographs share one bottom line, so the three steps climb toward the delivery */
.journey-step { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
.journey-step img { align-self: end; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; }
.journey-text { position: relative; display: grid; align-content: start; gap: var(--space-2); padding-top: 2.75rem; border-top: 2px dashed var(--blue-line); }
.journey-step:not(:last-child) .journey-text { margin-right: calc(-1 * var(--journey-gap)); padding-right: var(--journey-gap); }
.journey-step:last-child .journey-text { border-top: 2px solid var(--blue); }
/* the path arrives: a filled stop closes the last stretch */
.journey-step:last-child .journey-text::after { content: ""; position: absolute; top: -1px; right: 0; width: .875rem; height: .875rem; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px var(--white); translate: 0 -50%; }
/* the stop on the path: a paper capsule centred on the line, so it notches the photo with a round cut */
.journey-node { position: absolute; top: -1px; left: var(--space-4); display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px var(--space-4) 6px 6px; border-radius: 999px; background: var(--white); translate: 0 -50%; }
.journey-node svg { width: 3rem; height: 3rem; padding: .8125rem; border-radius: 50%; background: var(--blue); color: var(--white); }
.journey-node i { font: 1.5rem/1 var(--font-backdrop); font-style: normal; letter-spacing: -.02em; }
.is-pay .journey-node svg { background: var(--red); color: var(--white); }
.journey-text b { font: 400 var(--step-3)/1.1 var(--font-proof); letter-spacing: -.015em; }
.journey-text > span:last-child { max-width: 30ch; font: var(--step-1)/1.45 var(--font-body); color: var(--blue-text-2); }
.money { display: grid; grid-template-columns: auto minmax(3rem, 1fr) auto; align-items: end; gap: var(--space-6); margin-top: clamp(2rem, 4vw, 3.25rem); }
.money p { display: grid; gap: var(--space-3); }
.money p > span { font: .75rem/1 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--blue-text-2); }
.money strong { font: 400 clamp(3.5rem, 1.8rem + 5vw, 6.5rem)/.85 var(--font-display); letter-spacing: -.04em; word-spacing: .08em; font-variant-numeric: tabular-nums; }
.money-later { justify-items: end; }
.money-later strong { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: .09em; text-underline-offset: .14em; }
.money-line { position: relative; align-self: center; border-top: 2px dashed var(--blue-line); }
.money-line::after { content: ""; position: absolute; right: 0; top: -.4375rem; width: .75rem; height: .75rem; border-top: 2px solid var(--blue); border-right: 2px solid var(--blue); rotate: 45deg; }


/* the call to action takes a line of its own; from 1300px it fits on one, so the headline sets in three
   lines like the first hero's */
/* the call takes a line of its own (a <br> before it in the page); from 1300px it never breaks */
@media (min-width: 1300px) {
  .hero-closing .hero-title { max-width: none; }
  .hero-closing .hero-title em { white-space: nowrap; }
}

/* ---- footer -------------------------------------------------------------------------------------- */
.site-footer { padding-block: clamp(2.25rem, 4.5vw, 3.75rem) var(--space-5); border-top: 1px solid var(--white-rule); }
.site-footer:has(+ .sticky-order) { padding-bottom: calc(var(--space-6) + var(--sticky-room)); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand brand" "claim claim" "legal top" "copy top"; gap: var(--space-4) var(--space-6); }
.footer-brand { grid-area: brand; font: clamp(3rem, 1.6rem + 6vw, 7.5rem)/.82 var(--font-display); letter-spacing: -.04em; text-transform: uppercase; }
.footer-claim { grid-area: claim; padding-bottom: var(--space-5); border-bottom: 1px solid var(--white-rule); font: var(--step-3)/1.2 var(--font-proof); letter-spacing: -.015em; color: var(--white-text-2); }
.footer-legal { grid-area: legal; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font: .75rem/1 var(--font-label); letter-spacing: .08em; text-transform: uppercase; }
.footer-legal a { display: inline-flex; align-items: center; min-height: 3rem; text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 1px; color: var(--white-text-2); }
.footer-legal a:hover { color: var(--white); text-decoration-thickness: 2px; }
.footer-copy { grid-area: copy; font: var(--step-0)/1.4 var(--font-body); color: var(--white-text-2); }
.back-top { grid-area: top; align-self: center; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 3rem; font: .75rem/1 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--white-text-2); }
.back-top:hover { color: var(--white); }
.back-top:hover svg { color: var(--white); }
.back-top svg { width: 1rem; height: 1rem; }

/* ---- legal pages (Datenschutz, Impressum, 404): the same world in Read mode ------------------------
   the title holds still on the left while the text reads on the right, one rule between topics */
.legal { padding-block: clamp(3rem, 7vw, 6rem) clamp(4rem, 8vw, 7rem); background: var(--white); }
.legal-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr); gap: var(--space-7) clamp(2rem, 6vw, 6rem); align-items: start; }
.legal-head { position: sticky; top: var(--space-6); display: grid; justify-items: start; gap: var(--space-4); }
.legal-title { max-width: 12ch; font: clamp(2.25rem, 1.3rem + 3.4vw, 4.25rem)/.92 var(--font-headline); letter-spacing: -.035em; }
.legal-lede { max-width: 32ch; font: var(--step-2)/1.45 var(--font-body); color: var(--blue-text-2); }
.legal-meta { font: var(--step-0)/1.4 var(--font-body); color: var(--blue-text-2); }
.legal-back { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; border-bottom: 2px solid var(--red); font: var(--step-1)/1 var(--font-proof); }
.legal-back svg { width: 1.125rem; height: 1.125rem; transform: rotate(180deg); }
.legal-body { display: grid; gap: var(--space-7); max-width: 68ch; }
.legal-body section { display: grid; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--blue-rule); }
.legal-body h2 { font: clamp(1.375rem, 1.1rem + .8vw, 1.75rem)/1.1 var(--font-proof); letter-spacing: -.015em; }
.legal-body p, .legal-body li, .legal-body dd { font: var(--step-1)/1.6 var(--font-body); }
.legal-body ul { display: grid; gap: var(--space-2); padding-left: 1.125rem; list-style: square; }
.legal-body li::marker { color: var(--blue-line); }
.legal-body dl { display: grid; grid-template-columns: minmax(8rem, .45fr) minmax(0, 1fr); gap: var(--space-3) var(--space-5); margin: 0; }
.legal-body dt { font: var(--step-1)/1.4 var(--font-proof); }
.legal-body a { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.legal-body a:hover { text-decoration-color: var(--red-deep); }
.legal-note { padding-top: var(--space-3); border-top: 1px solid var(--blue-line); }
.lost { min-height: 60vh; display: grid; align-content: center; }
.lost-disc { display: grid; place-items: center; width: clamp(5.5rem, 9vw, 7.5rem); aspect-ratio: 1; margin-bottom: var(--space-2); border-radius: 50%; background: var(--white); box-shadow: 0 0 0 1px var(--blue-rule), 0 0 0 7px var(--blue-wash), 0 16px 30px -16px rgb(0 0 0 / .35); }
.lost-disc img { width: 84%; }
@media (max-width: 899px) {
  .legal-grid { grid-template-columns: minmax(0, 1fr); }
  .legal-head { position: static; }
  .legal-body dl { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .legal-body dd { margin: 0 0 var(--space-3); }
}


/* ---- the floating order bar: always on screen, out of the way only while typing -------------------
   omega's bar, where the user wants it: at the bottom. Phones: across the screen, under the thumb.
   Desktop: at the bottom of the left column, 22rem wide so it sits beside the hero figure, not across her. */
.sticky-order {
  --sticky-x: -50%;
  position: fixed;
  left: 50%;
  bottom: max(.75rem, env(safe-area-inset-bottom));
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: min(100% - 1.5rem, 34rem);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  border-radius: 12px;
  background: var(--blue);
  color: var(--white);
  box-shadow: 0 0 0 1px rgb(252 250 255 / .28), 0 18px 40px -14px rgb(0 0 0 / .55);
  transform: translateX(var(--sticky-x));
  animation: sticky-in .4s var(--ease);
  container-type: inline-size;
}
/* the price line needs the room more than the thumbnail: "49 € bei Erhalt" stays whole on a 390px phone */
@container (max-width: 24rem) { .sticky-order img { display: none; } }
@container (max-width: 18.75rem) { .sticky-order .button svg { display: none; } }
.sticky-order img { width: 2rem; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .35)); }
.sticky-order p { display: grid; flex: 1; gap: .25rem; min-width: 0; }
.sticky-order b { font: 400 .75rem/1 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--white-text-2); }
.sticky-order span { font: var(--step-1)/1.1 var(--font-proof); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-order .button { gap: var(--space-3); min-height: 3.25rem; padding: var(--space-2) var(--space-4); }
/* the button keeps the size of every other button (24px): white on red is 4.2:1, enough only for large text */
.sticky-order .button span { font: inherit; }
@keyframes sticky-in { from { transform: translate(var(--sticky-x), 130%); } to { transform: translate(var(--sticky-x), 0); } }
@media (min-width: 900px) {
  .sticky-order {
    --sticky-x: 0;
    left: max(var(--gutter), (100% - var(--content)) / 2);
    width: 22rem;
  }
  .sticky-order img { display: none; }
}
/* narrow desktops: the column is too narrow for her full height, so she runs on behind the card's
   left edge (the card sits in front) and still starts right under the sub line */
/* the nav returns at 1080px; until then the order link holds the right edge alone */
@media (min-width: 900px) and (max-width: 1079px) { .desktop-nav { display: none; } .header-order { margin-left: auto; } }

.sticky-order.is-done b { color: var(--white); }
.sticky-order.is-done .button { width: 3rem; padding: 0; justify-content: center; border-radius: 50%; clip-path: none; }
.sticky-order.is-done .button span { display: none; }
.sticky-order.is-done .button svg { width: 1.5rem; height: 1.5rem; stroke-width: 2.2; stroke-dasharray: 26; stroke-dashoffset: 26; animation: draw-check .55s .15s var(--ease) forwards; }
.sticky-order.is-done .button:hover svg { transform: none; }

/* ---- the two order sections, on the blue field --------------------------------------------------------
   The light: the field keeps its grid and falls off a little toward the edges (a neutral shade, never another
   colour), and a soft white light stands behind the man's head and shoulders, so the 2K cut-out lifts off the blue.
   Nothing is laid over the photographs: no grain, no tint. */
.hero.field-blue {
  background-image:
    linear-gradient(to right, rgb(252 250 255 / .06) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(252 250 255 / .06) 1px, transparent 1px),
    radial-gradient(125% 110% at 38% 45%, rgb(0 0 0 / 0) 52%, rgb(0 0 0 / .2) 100%);
  background-size: 72px 72px, 72px 72px, auto;
}
.hero .hero-figure { isolation: isolate; }
.hero .hero-figure::before { content: ""; position: absolute; inset: -3% -14% 34%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgb(252 250 255 / .3), rgb(252 250 255 / .11) 50%, rgb(252 250 255 / 0)); pointer-events: none; }
/* the joints a callout names are marked like the active spot in the drawings: a red dot in a white ring (no glow:
   a glowing red joint reads as pain, and these callouts are benefits) */
.hero .callout::before { background: var(--red); box-shadow: 0 0 0 3px var(--white), 0 2px 6px rgb(0 0 0 / .5); }

/* the legal pages have no nav to push it: the order link holds the header's right edge at every width */
.legal-page .header-order { margin-left: auto; }

/* ---- facts in a list: a blue check, the term in the proof cut, the rest in body ------------------------ */
.checks { display: grid; gap: var(--space-3); }
.checks li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); column-gap: var(--space-3); align-items: start; max-width: 42ch; font: var(--step-1)/1.45 var(--font-body); color: var(--blue-text-2); text-wrap: pretty; }
.checks svg { width: 1.25rem; height: 1.25rem; margin-top: .1rem; stroke-width: 2.4; color: var(--blue); }
.checks b { font-family: var(--font-proof); font-weight: 400; color: var(--blue); }

/* ---- usage: the habit tip under the steps -------------------------------------------------------------- */
.usage-tip { max-width: 34ch; padding-top: var(--space-4); border-top: 1px solid var(--blue-rule); font: var(--step-1)/1.45 var(--font-body); color: var(--blue-text-2); text-wrap: pretty; }

@media (max-width: 899px) {
  .usage-tip { order: 3; }
}


/* ---- shared responsive rules (from the German page) ---------------------------------------------------- */
.order-hero { padding-top: clamp(6.5rem, 9vw, 8rem); }
.order-pack { width: clamp(6.5rem, 8vw, 7.5rem); }
.sticky-order img { width: 1.5rem; }
@media (max-width: 899px) {
  .desktop-nav { display: none; }
  .header-order { margin-left: auto; }
  .brand i { display: none; }
  .header-inner { gap: clamp(.75rem, 4vw, 2rem); }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .hero-title { max-width: 15ch; }
  .hero-figure { align-self: center; margin: 2.75rem 0 0; }
  .callout { --disc: 2.75rem; }
  .callout-disc { box-shadow: 0 0 0 4px rgb(252 250 255 / .26), 0 10px 20px -10px rgb(0 0 0 / .5); }
  .callout b { max-width: 10.25rem; font-size: .75rem; }
  .hero-formula { top: -.625rem; left: var(--gutter); transform: translateY(-100%); }
  .order-pack { width: 6.25rem; }
  .usage-grid { grid-template-columns: minmax(0, 1fr); }
  .usage-copy { display: contents; }
  .usage-collage { order: 1; margin-block: var(--space-4) var(--space-5); }
  .usage-collage .usage-node { width: 3rem; height: 3rem; box-shadow: 0 0 0 4px var(--white); }
  .usage-steps { order: 2; }
  .usage-tip { order: 3; }
  .journey { --rail: 3.5rem; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: var(--space-6); padding-left: var(--rail); }
  .journey-step { position: relative; grid-row: auto; grid-template-rows: none; align-content: start; gap: var(--space-4); }
  .journey-step::before { content: ""; position: absolute; top: 1.5rem; bottom: calc(-1 * var(--space-6) - 1.5rem); left: calc(var(--rail) / -2 - 1px); border-left: 2px dashed var(--blue-line); }
  .journey-step:last-child::before { bottom: 0; width: 2px; border-left: 0; background: var(--blue); }
  .journey-step:last-child::after { content: ""; position: absolute; bottom: 0; left: calc(var(--rail) / -2); width: .875rem; height: .875rem; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px var(--white); translate: -50% 50%; }
  .journey-step img { align-self: start; width: 62%; }
  .journey-step:nth-child(2) img { width: 80%; }
  .journey-step:last-child img { width: 100%; }
  .journey-text, .journey-step:not(:last-child) .journey-text, .journey-step:last-child .journey-text { position: static; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: var(--space-3); margin-right: 0; padding: 0; border-top: 0; }
  .journey-step:last-child .journey-text::after { display: none; }
  .journey-node { display: contents; }
  .journey-node svg { position: absolute; top: 0; left: calc(var(--rail) / -2); z-index: 1; translate: -50% 0; box-shadow: 0 0 0 5px var(--white); }
  .journey-text b { grid-column: 2; font-size: var(--step-2); }
  .journey-text > span:last-child { grid-column: 2; }
  .money { gap: var(--space-4); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "claim" "legal" "copy" "top"; }
  .back-top { justify-self: start; }
}
@media (max-width: 480px) {
  .hero-title, .section-title { hyphens: auto; }
  .order-assurance { grid-template-columns: minmax(0, 1fr); justify-content: start; }
  .money strong { font-size: clamp(2.75rem, 2.1rem + 2vw, 3.5rem); }
  .money { grid-template-columns: auto minmax(1.5rem, 1fr) auto; gap: var(--space-3); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .success-check, .sticky-order.is-done .button svg { stroke-dashoffset: 0; }
}



/* ==== Sedamin France: the page's own parts ============================================================== */

/* running copy never leaves a single word on its last line */
.proof, .lede, .hero-sub, .scene-call, .loop-detail, .snags-ledger p, .snags-ledger span, .journey-text > span, .order-progress-text, .order-shipping, .order-success p, .dose-text p, .loop-station > span:not(.loop-node) { text-wrap: pretty; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* a hyphenated word never breaks at its hyphen (« L- » / « théanine », « petit- » / « déjeuner ») */
.nobr { white-space: nowrap; }
/* no word is ever cut by the browser's hyphenation: the copy breaks between words only, titles and the closing
   red band included (the band takes its narrowest width, so hyphenation would cut it into syllables) */
p, dd, li, .hero-title, .section-title { hyphens: manual; }
.field-blue { --field: var(--blue); }
.field-paper, .field-wash { --field: var(--white); }

/* a section title's second sentence steps back to the softer tone on its own line (never red, as on the card) */
.section-title em { display: block; }
.field-paper .section-title em, .field-wash .section-title em { color: var(--blue-text-2); }
.field-blue .section-title em { color: var(--white-text-2); }
.field-blue .checks li { color: var(--white-text-2); }
.field-blue .checks svg, .field-blue .checks b { color: var(--white); }

/* ---- the two order sections: each figure brings its own body points (--x, --y, measured on the cut-out) -- */
.hero-figure[data-figure] { width: min(100% - 6rem, 32rem); }
.callout-head { --x: 35%; --y: 7%; --dx: 64%; --tx: 0%; --align: flex-start; --ta: left; }
.callout-chest { --x: 19%; --y: 23%; --dx: 5%; --tx: -100%; --ty: calc(var(--disc) / 2 - 100%); --flow: column-reverse; --align: flex-end; --ta: right; }
.callout-belly { --x: 27%; --y: 37.5%; --dx: 5%; --tx: -100%; --align: flex-end; --ta: right; }
.callout-hand { --x: 10.5%; --y: 56.5%; --dx: -2%; --tx: -100%; --align: flex-end; --ta: right; }
.hero-figure[data-figure="polytech"] .callout-head { --x: 30%; --y: 6.5%; --dx: 60%; }
.hero-figure[data-figure="polytech"] .callout-chest { --x: 14%; --y: 23%; --dx: 2%; }
/* the closing call is longer than the German one: its red band may take two lines, always as one clean block */
.hero-closing .hero-title em { width: min-content; white-space: normal; }
/* the opening band is longer than the German one too: on phones it wraps as one block instead of shrinking */
@media (max-width: 480px) { .hero:not(.hero-closing) .hero-title em { white-space: normal; font-size: 1em; } }
/* the order bar on desktop: the first-person button (« Je commande ») is wider than the German one, so the bar
   takes 27rem to keep « 49 € à la livraison » on one line */
@media (min-width: 900px) { .sticky-order { width: 27rem; } }
/* the order card's button: « Je commande à −50 % », and « Je commande » wherever the card is too narrow for it
   (phones, and the 23rem card of narrow desktops), so it always sets on one line; the long label needs 366px */
.label-short { display: none; }
.order-card { container-type: inline-size; }
@container (max-width: 24rem) { .order-card .label-long { display: none; } .order-card .label-short { display: inline; } }
/* the bar reads « 49 € à la livraison » (143px). Phones give it the bottle's and the arrow's room, and on the
   narrowest bars the price keeps « à la livraison » whole on a second line rather than cut it */
@container (max-width: 30rem) { .sticky-order img { display: none; } }
@media (max-width: 480px) { .sticky-order .button svg { display: none; } }
@media (max-width: 400px) { .sticky-order { gap: .5rem; } .sticky-order .button { padding-inline: .75rem; } }
.sticky-order p span { white-space: normal; overflow-wrap: normal; text-wrap: balance; }
/* phones: « Je commande à −50 % » keeps one line at the 24px every button needs (white on red): a tighter gap and inset
   from 480px down, and no arrow under 380px */
@media (max-width: 480px) { .scene-copy .button, .formula-action .button { gap: .75rem; padding-inline: 1.125rem; } }
/* each scene has its own label now, the longest « Je commande maintenant » (320px at the 24px a red button needs):
   under 430px the arrows go and the inset tightens, and under about 385px that one label sets on two balanced lines
   rather than shrink below 24px */
@media (max-width: 429px) {
  .scene-copy .button svg, .formula-action .button svg { display: none; }
  .scene-copy .button, .formula-action .button { padding-inline: .875rem; }
  .scene-copy .button span { text-wrap: balance; }
}
/* the order card's three reassurances read as a short list: the call line is long enough to wrap in a row of three,
   and too long for capitals, so the list takes the caption cut in sentence case, like the callout labels */
.order-assurance { grid-template-columns: minmax(0, 1fr); justify-content: start; font: 400 .8125rem/1.3 var(--font-proof); letter-spacing: -.005em; text-transform: none; }
/* small phones: the chest label is longer now. The head label narrows to two lines so the two labels never meet,
   and the cadre's chest label sits a step lower so it clears the line from his temple */
@media (max-width: 400px) {
  .hero .callout-head b { max-width: 8rem; }
  .hero-figure[data-figure="cadre"] .callout-chest { --ty: calc(var(--disc) / 2 - 100% + .5rem); }
}

/* ---- the five grains of sand: photographs on one ledger, each a way down to its scene ------------------- */
.snags { padding-block: var(--section); }
.snags-lead { display: grid; gap: var(--space-4); }
/* the title's second sentence is long: a wider measure sets it in three balanced lines on desktop instead of six */
.snags-lead .section-title { max-width: 24ch; text-wrap: balance; }
.snags-lead .proof { max-width: 36ch; color: var(--blue-text-2); }
.snags-ledger { --rule-gap: var(--space-4); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: calc(2 * var(--rule-gap)); margin-top: clamp(1.5rem, 3vw, 2.5rem); border-top: 2px solid var(--blue); }
.snags-ledger li { position: relative; }
.snags-ledger li + li::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--rule-gap)); border-left: 1px solid var(--blue-rule); }
.snags-ledger a { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--space-3); height: 100%; padding-top: var(--space-5); }
.snags-ledger img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; transition: filter .35s var(--ease); }
.snags-ledger p { font: clamp(1.1875rem, .95rem + .5vw, 1.4375rem)/1.1 var(--font-proof); letter-spacing: -.015em; }
.snags-ledger span { font: var(--step-1)/1.45 var(--font-body); color: var(--blue-text-2); }
.snag-link { display: inline-flex; align-items: center; gap: var(--space-2); justify-self: start; padding-bottom: .3125rem; border-bottom: 2px solid var(--blue); font: var(--step-1)/1.1 var(--font-proof); }
.snag-link svg { width: 1rem; height: 1rem; stroke-width: 2; transition: transform .35s var(--ease); }
.snags-ledger a:hover .snag-link svg, .snags-ledger a:focus-visible .snag-link svg { transform: translateY(3px); }
.snags-ledger a:hover img { filter: saturate(1.1) contrast(1.04); }

/* ---- the five scenes: a man at the moment one ingredient matters, cut out, in front of its name ----------
   The name runs the content width at the top; the figure stands on the section's lower edge in its half and
   rises in front of the name; the copy sits in the other half. A soft light stands behind the figure and its
   foot fades into the field (the overlay), so no crop line ever shows. */
.scene { position: relative; overflow: clip; padding-top: var(--section); }
.scene-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: clamp(1.5rem, 4vw, 4.5rem); container-type: inline-size; }
/* the name fills the content width: Sharp Grotesk Black 15 advances about .43em a capital, so 2.2 / letters */
.scene-word { grid-column: 1 / -1; grid-row: 1; z-index: 0; margin-bottom: -.06em; font: calc(100cqi * 2.2 / var(--len)) / .8 var(--font-backdrop); letter-spacing: -.035em; text-transform: uppercase; white-space: nowrap; text-align: center; pointer-events: none; user-select: none; }
.field-blue .scene-word { color: rgb(252 250 255 / .2); }
.field-paper .scene-word { color: rgb(38 31 236 / .1); }
.scene-figure { position: relative; z-index: 1; grid-row: 1 / -1; align-self: start; justify-self: center; width: min(100%, var(--fig-w, 34rem)); margin-top: calc(100cqi * 2.2 / var(--len) * .8 * .5); isolation: isolate; }
.scene-cut { display: block; filter: drop-shadow(0 30px 40px var(--shadow-deep)); }
.field-paper .scene-cut { filter: drop-shadow(0 22px 28px rgb(0 0 0 / .2)); }
.scene-cut img { width: 100%; -webkit-mask-image: var(--fade); mask-image: var(--fade); }
.scene-figure { --fade: linear-gradient(to bottom, #000 80%, transparent 100%); }
/* figures cut by the frame at the sides (a counter, a table) fade there too */
.scene-figure[data-figure="chef"], .scene-figure[data-figure="temoin"] { --fade: linear-gradient(to bottom, #000 80%, transparent 100%), linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); }
.scene-figure[data-figure="chef"] .scene-cut img, .scene-figure[data-figure="temoin"] .scene-cut img { -webkit-mask-composite: source-in; mask-composite: intersect; }
.scene-figure::before { content: ""; position: absolute; inset: -2% -12% 30%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgb(252 250 255 / .28), rgb(252 250 255 / .1) 50%, rgb(252 250 255 / 0)); pointer-events: none; }
.field-paper .scene-figure::before { display: none; }
/* the copy reads in three groups: the claim (title and the moment), the science (checks), the push (call and button) */
.scene-copy { position: relative; z-index: 2; grid-row: 2; display: grid; justify-items: start; align-content: center; padding-block: var(--space-6) var(--section); }
.scene-copy .section-title { margin-bottom: var(--space-4); }
.scene-copy .proof { margin-bottom: var(--space-6); font-size: clamp(1.1875rem, .95rem + .55vw, 1.5rem); line-height: 1.3; }
.scene-copy .checks { margin-bottom: var(--space-6); }
.scene-copy .scene-call { margin-bottom: var(--space-4); }
.scene[data-side="right"] .scene-copy { grid-column: 1; }
.scene[data-side="right"] .scene-figure { grid-column: 2; }
.scene[data-side="left"] .scene-copy { grid-column: 2; }
.scene[data-side="left"] .scene-figure { grid-column: 1; }
.scene-copy .section-title { max-width: 15ch; font-size: clamp(1.875rem, 1rem + 2.6vw, 3.5rem); }
.scene-copy .proof { max-width: 32ch; }
.field-paper .scene-copy .proof { color: var(--blue-text-2); }
.field-blue .scene-copy .proof { color: var(--white-text-2); }
.scene-call { max-width: 28ch; padding-top: var(--space-4); border-top: 1px solid var(--blue-rule); font: var(--step-3)/1.15 var(--font-proof); letter-spacing: -.015em; }
.field-blue .scene-call { border-top-color: var(--white-rule); }
/* each figure's width (its column allowing) and the point its callout names */
.scene-figure[data-figure="chef"] { --fig-w: 38rem; }
.scene-figure[data-figure="dev"] { --fig-w: 34rem; }
.scene-figure[data-figure="beauxparents"] { --fig-w: 28rem; }
.scene-figure[data-figure="temoin"] { --fig-w: 38rem; }
.scene-figure[data-figure="boulanger"] { --fig-w: 34rem; }
.callout-scene { --disc: clamp(4.25rem, 5.6vw, 5.5rem); }
.scene-figure[data-figure="chef"] .callout-scene { --x: 40%; --y: 62%; --dx: 12%; --tx: -100%; --ty: calc(var(--disc) / 2 - 100%); --flow: column-reverse; --align: flex-end; --ta: right; }
.scene-figure[data-figure="dev"] .callout-scene { --x: 40%; --y: 9%; --dx: 84%; --tx: -50%; --ty: -50%; --flow: column; --align: center; --ta: center; }
.scene-figure[data-figure="beauxparents"] .callout-scene { --x: 50%; --y: 66%; --dx: 96%; --tx: 0%; --flow: column; --align: flex-start; --ta: left; }
.scene-figure[data-figure="temoin"] .callout-scene { --x: 58%; --y: 33%; --dx: 92%; --tx: -50%; --ty: -50%; --flow: column; --align: center; --ta: center; }
.scene-figure[data-figure="boulanger"] .callout-scene { --x: 22%; --y: 24%; --dx: 6%; --tx: -100%; --flow: column; --align: flex-end; --ta: right; }
.scene .callout::before { background: var(--red); box-shadow: 0 0 0 3px var(--white), 0 2px 6px rgb(0 0 0 / .5); }
.scene .callout b { max-width: 11rem; }

/* ---- the stress loop: four steps on one path, the way back arching over them, and the bottle breaking it -- */
.loop-section { padding-block: var(--section); overflow: clip; }
.loop-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: var(--space-5) clamp(2rem, 5vw, 5rem); }
.loop-copy { display: contents; }
.loop-copy .section-title { grid-column: 1; max-width: 12ch; }
.loop-copy .proof { grid-column: 2; max-width: 32ch; }
.loop-detail { grid-column: 2; max-width: 44ch; padding-top: var(--space-4); border-top: 1px solid var(--blue-rule); font: var(--step-1)/1.55 var(--font-body); color: var(--blue-text-2); }
.loop { --node: 3.25rem; --gap: clamp(1rem, 2.5vw, 2.5rem); --arch: 4.75rem; --wash: color-mix(in srgb, var(--blue) 4.5%, var(--white)); grid-column: 1 / -1; position: relative; margin-top: clamp(1.5rem, 3vw, 2.5rem); padding-top: calc(var(--arch) + 2.5rem); }
/* the way back: from the fourth step, up over the others, down into the first */
.loop::before { content: ""; position: absolute; top: 2.5rem; left: calc(12.5% - var(--gap) * .375); right: calc(12.5% - var(--gap) * .375); height: calc(var(--arch) + var(--node) / 2); border: 2px dashed var(--blue-line); border-bottom: 0; border-radius: 999px 999px 0 0; }
.loop::after { content: ""; position: absolute; top: calc(var(--arch) + 2.5rem - 1.375rem); left: calc(12.5% - var(--gap) * .375); width: .75rem; height: .75rem; border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue); rotate: 45deg; translate: -50% 0; }
.loop-stations { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.loop-stations::before { content: ""; position: absolute; top: calc(var(--node) / 2); left: calc(12.5% - var(--gap) * .375); right: calc(12.5% - var(--gap) * .375); border-top: 2px dashed var(--blue-line); }
.loop-station { position: relative; display: grid; justify-items: center; align-content: start; gap: var(--space-2); text-align: center; }
.loop-node { display: grid; place-items: center; width: var(--node); height: var(--node); margin-bottom: var(--space-2); border-radius: 50%; background: var(--blue); color: var(--white); font: 1.375rem/1 var(--font-backdrop); box-shadow: 0 0 0 6px var(--wash); }
.loop-station b { font: 400 var(--step-3)/1.1 var(--font-proof); letter-spacing: -.015em; }
.loop-station > span:not(.loop-node) { max-width: 22ch; font: var(--step-1)/1.45 var(--font-body); color: var(--blue-text-2); }
.loop-chip { margin-top: var(--space-1); padding: .4375rem .625rem .375rem; background: var(--blue-tint); color: var(--blue); font: .75rem/1 var(--font-label); letter-spacing: .08em; text-transform: uppercase; clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%); transition: background-color .2s var(--ease), color .2s var(--ease); }
.loop-chip + .loop-chip { margin-top: 0; }
.loop-chip:hover { background: var(--blue); color: var(--white); }
.loop-pack { position: absolute; top: 0; left: 50%; z-index: 1; width: 3.75rem; padding-inline: .75rem; background: var(--wash); translate: -50% 0; rotate: -4deg; }
.loop-pack img { width: 100%; filter: drop-shadow(0 12px 14px rgb(0 0 0 / .35)); }

/* ---- the formula: nine actives, the label's doses as figures --------------------------------------------- */
.formula-section { padding-block: var(--section); }
.formula-lead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: var(--space-4) clamp(2rem, 5vw, 5rem); }
.formula-lead .section-title { max-width: 13ch; }
.formula-lead .lede { max-width: 30ch; font: clamp(1.25rem, 1rem + .9vw, 1.875rem)/1.16 var(--font-proof); letter-spacing: -.02em; }
.dose-ledger { margin-top: clamp(1.5rem, 3vw, 2.5rem); border-top: 2px solid var(--white); }
.dose-row { --disc: clamp(4rem, 5vw, 5.5rem); display: grid; grid-template-columns: var(--disc) minmax(0, 1fr) auto; align-items: center; column-gap: clamp(1rem, 2.5vw, 2.5rem); padding-block: var(--space-4); border-bottom: 1px solid var(--white-rule); }
.dose-disc { display: grid; place-items: center; width: var(--disc); aspect-ratio: 1; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 5px rgb(252 250 255 / .16); }
.dose-disc img { width: 84%; }
.dose-text { display: grid; gap: .375rem; }
.dose-text h3 { font: 400 var(--step-3)/1.1 var(--font-proof); letter-spacing: -.015em; }
.dose-latin { font: var(--step-0)/1.35 var(--font-body); color: var(--white-text-2); }
.dose-text p:last-child { max-width: 46ch; font: var(--step-1)/1.45 var(--font-body); color: var(--white-text-2); }
.dose-amount { justify-self: end; font: 400 clamp(2.25rem, 1.4rem + 2.6vw, 4rem)/.9 var(--font-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dose-amount span { font-size: max(.4em, 1rem); letter-spacing: 0; }
.dose-vitamins { justify-self: end; display: grid; grid-template-columns: repeat(4, auto); gap: var(--space-2) clamp(1rem, 2vw, 1.75rem); margin: 0; }
.dose-vitamins div { display: grid; gap: .375rem; justify-items: end; }
.dose-vitamins dt { font: .75rem/1 var(--font-label); letter-spacing: .08em; color: var(--white-text-2); }
.dose-vitamins dd { margin: 0; font: 400 clamp(1.25rem, 1rem + .8vw, 1.75rem)/1 var(--font-display); letter-spacing: -.02em; white-space: nowrap; }
.quality-line { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.formula-action { margin-top: clamp(2rem, 4vw, 3rem); }

/* ---- testimonials: three empty places until the user's own arrive ---------------------------------------- */
.reviews { padding-block: var(--section); }
.voices-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.voice-slot { display: grid; align-content: start; gap: var(--space-4); }
.voice-slot-photo { display: grid; place-items: center; width: min(100%, 13rem); aspect-ratio: 4 / 5; border: 1px dashed rgb(252 250 255 / .45); border-radius: 4px; font: .75rem/1 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--white-text-2); }
.voice-slot p { font: var(--step-2)/1.5 var(--font-body); color: var(--white-text-2); }

/* ---- the index of the five actives: a dot each at the right edge while the scenes go by (desktop) -------- */
.rail { position: fixed; top: 50%; right: 1rem; z-index: 40; display: none; flex-direction: column; gap: .5rem; translate: 0 -50%; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s; }
.rail.is-on { opacity: 1; visibility: visible; }
.rail a { position: relative; display: block; width: 1.75rem; height: 1.75rem; }
.rail a::before { content: ""; position: absolute; top: 50%; left: 50%; width: .625rem; height: .625rem; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 2px var(--blue), 0 2px 6px rgb(0 0 0 / .25); translate: -50% -50%; transition: scale .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease); }
.rail a.is-active::before { scale: 1.5; background: var(--red); box-shadow: 0 0 0 2px var(--white), 0 2px 8px rgb(0 0 0 / .35); }
.rail span { position: absolute; top: 50%; right: calc(100% + .25rem); padding: .4375rem .625rem .375rem; background: var(--white); color: var(--blue); font: .75rem/1 var(--font-label); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%); box-shadow: 0 0 0 1px var(--blue-rule); translate: .25rem -50%; opacity: 0; pointer-events: none; transition: opacity .2s var(--ease), translate .2s var(--ease); }
.rail a:hover span, .rail a:focus-visible span { opacity: 1; translate: 0 -50%; }
@media (min-width: 1200px) { .rail { display: flex; } }

/* ---- responsive ------------------------------------------------------------------------------------------ */
@media (max-width: 1100px) {
  .snags-ledger { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-6); }
  .snags-ledger li:nth-child(4)::before { display: none; }
}
/* narrow desktops: the card gives up 7rem, so the column keeps a man of full height without sending him behind
   the card */
@media (min-width: 900px) and (max-width: 1199px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) 23rem; }
  .loop-station b { font-size: var(--step-2); }
}
/* under 1366px there is no room beside the figures for their labels: every callout turns inward, as on phones,
   its disc on the figure's edge and its label running over the picture, never under the card or off the screen */
@media (min-width: 900px) and (max-width: 1365px) {
  .hero-figure[data-figure] { width: min(100%, 32rem); }
  .callout, .callout-scene { --disc: 3.5rem; }
  .hero-figure[data-figure] .callout-chest, .hero-figure[data-figure] .callout-belly, .hero-figure[data-figure] .callout-hand { --dx: var(--disc); --tx: calc(-1 * var(--disc)); --align: flex-start; --ta: left; }
  .hero-figure[data-figure] .callout-head { --dx: 100%; --tx: -100%; --align: flex-end; --ta: right; }
  .hero-figure[data-figure="polytech"] .callout-chest { --ty: calc(var(--disc) / -2); --flow: column; }
  /* the student's hand sits too near the edge for a disc there: his disc starts just right of the hand */
  .hero-figure[data-figure="polytech"] .callout-hand { --dx: calc(10.5% + 1.25rem); --tx: 0%; }
  .scene-figure[data-figure="chef"] .callout-scene, .scene-figure[data-figure="boulanger"] .callout-scene { --dx: calc(var(--disc) + .25rem); --tx: calc(-1 * var(--disc)); --align: flex-start; --ta: left; }
  /* the baker's disc sits level with the title's first line: it keeps a clear step away from it */
  .scene-figure[data-figure="boulanger"] .callout-scene { --dx: calc(var(--disc) + 1.5rem); }
  .scene-figure[data-figure="dev"] .callout-scene, .scene-figure[data-figure="beauxparents"] .callout-scene, .scene-figure[data-figure="temoin"] .callout-scene { --dx: calc(100% - .25rem); --tx: -100%; --ty: calc(var(--disc) / -2); --flow: column; --align: flex-end; --ta: right; }
}
@media (max-width: 899px) {
  .hero-figure[data-figure] { width: min(100% + 2 * var(--gutter), 26rem); }
  /* tablets: the card keeps its desktop width under the centred man instead of stretching into a banner */
  .order-hero { width: min(100%, 30rem); justify-self: center; }
  /* phones: the man runs the screen's width; the left callouts' discs line up with the text column and their labels
     run inward over the clothes, never off the screen */
  .hero-figure[data-figure] .callout-chest, .hero-figure[data-figure] .callout-belly, .hero-figure[data-figure] .callout-hand { --dx: calc(var(--gutter) + var(--disc)); --tx: calc(-1 * var(--disc)); --align: flex-start; --ta: left; }
  .hero-figure[data-figure] .callout-head { --dx: calc(100% - var(--gutter)); --tx: -100%; --align: flex-end; --ta: right; }
  /* scenes: every callout stays inside the figure, its label running inward */
  .scene-figure[data-figure="chef"] .callout-scene, .scene-figure[data-figure="boulanger"] .callout-scene { --dx: calc(var(--disc) + .25rem); --tx: calc(-1 * var(--disc)); --align: flex-start; --ta: left; }
  .scene-figure[data-figure="dev"] .callout-scene, .scene-figure[data-figure="beauxparents"] .callout-scene, .scene-figure[data-figure="temoin"] .callout-scene { --dx: calc(100% - .25rem); --tx: -100%; --ty: calc(var(--disc) / -2); --flow: column; --align: flex-end; --ta: right; }
  .scene-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .scene[data-side] .scene-figure { grid-column: 1; grid-row: 1 / 3; width: min(100%, calc(var(--fig-w) * .76)); }
  .scene[data-side] .scene-copy { grid-column: 1; grid-row: 3; padding-top: var(--space-5); }
  .callout-scene { --disc: 3.25rem; }
  .scene .callout b { max-width: 9.5rem; font-size: .75rem; }
  .loop-grid { grid-template-columns: minmax(0, 1fr); }
  .loop-copy .section-title, .loop-copy .proof, .loop-detail { grid-column: 1; }
  /* phones: the steps run down a rail; the way back is said under them, beside the bottle */
  .loop { padding-top: 0; }
  .loop::before, .loop::after { display: none; }
  .loop-stations { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-6); padding-left: calc(var(--node) + var(--space-4)); }
  .loop-stations::before { top: calc(var(--node) / 2); bottom: 0; left: calc(var(--node) / 2 - 1px); right: auto; border-top: 0; border-left: 2px dashed var(--blue-line); }
  .loop-station { justify-items: start; text-align: left; }
  .loop-node { position: absolute; top: -.25rem; left: calc(-1 * (var(--node) + var(--space-4))); }
  .loop-station b { padding-top: .5rem; font-size: var(--step-2); }
  .loop-pack { display: none; }
  .hero-figure[data-figure="polytech"] .callout-chest { --ty: calc(var(--disc) / -2); --flow: column; }
  .formula-lead { grid-template-columns: minmax(0, 1fr); }
  .dose-row { --disc: 3.75rem; grid-template-columns: var(--disc) minmax(0, 1fr); align-items: start; row-gap: var(--space-3); }
  .dose-amount, .dose-vitamins { grid-column: 2; justify-self: start; }
  .dose-amount { font-size: clamp(2.25rem, 1.4rem + 2.6vw, 2.75rem); }
  .dose-vitamins { grid-template-columns: repeat(2, auto); }
  .dose-vitamins div { justify-items: start; }
}
@media (max-width: 719px) {
  /* the five grains of sand become a swipe row */
  .snags-ledger { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 66%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); }
  .snags-ledger::-webkit-scrollbar { display: none; }
  .snags-ledger li { scroll-snap-align: start; }
  .snags-ledger li:nth-child(4)::before { display: block; }
  .voices-slots { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 66%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); }
  .voices-slots::-webkit-scrollbar { display: none; }
  .voice-slot { scroll-snap-align: start; }
}

/* sections below the first screen lay out as they come near it */
.snags, .scene, .loop-section, .formula-section, .usage, .reviews, .ordering, .hero-closing, .site-footer { content-visibility: auto; contain-intrinsic-size: auto 1000px; }