/* Hondro Sol, Austria: the omega.easedesigned.com type system and form, in three colours only:
   blue #261fec (fields, text on white), white #fcfaff (order card, reading chapters) and the box's
   amber-orange #eca93f (purchase actions, prices, savings). Tints are those three at lower opacity. */

@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;
  --orange: #eca93f;
  /* 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(3.5rem, 7vw, 6.5rem);
  --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;
}
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; }
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; }
.field-blue :focus-visible, .site-header :focus-visible, .sticky-order :focus-visible, .site-footer :focus-visible { outline-color: var(--orange); }
[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(--orange); color: var(--blue); 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; }
.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-orange { background: var(--orange); color: var(--blue); }
.button-orange:hover { background: var(--white); }
.field-paper .button-orange:hover, .field-wash .button-orange:hover, .order-card .button-orange:hover, .legal .button-orange: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(--orange); 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(--orange); 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(--orange);
  color: var(--white);
  font: 1rem/1 var(--font-proof);
}
.header-order svg { color: var(--orange); }
.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(3rem, 6vw, 5.5rem); padding: clamp(1.75rem, 3.5vw, 3.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(2rem, 5vw, 5.5rem); 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; }
.hero-title em { color: var(--orange); }
.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 her 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: 10rem; 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: 56%; --dx: 16%; --tx: -100%; --align: flex-end; --ta: right; }
.callout-knee { --x: 58%; --y: 79%; --dx: 80%; --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(9.5rem, 12vw, 11.5rem); 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; 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); }
.price-old s { font: 400 1.5rem/1 var(--font-display); letter-spacing: -.02em; color: var(--blue-text-2); text-decoration-color: var(--orange); text-decoration-thickness: 3px; }
.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; }


.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(--orange); }
.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(--orange); border-width: 2px; box-shadow: 0 0 0 4px rgb(236 169 63 / .35); }
.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(--orange); }
.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(--orange); background: rgb(236 169 63 / .18); 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(--orange); color: var(--blue); }
.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); } }

/* ---- problems: four photographs on one ledger --------------------------------------------------- */
.problems { padding-block: var(--section); }
.problems-title { max-width: 16ch; }
.problems-ledger { --rule-gap: var(--space-5); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: calc(2 * var(--rule-gap)); margin-top: clamp(2rem, 4vw, 3.5rem); border-top: 2px solid var(--blue); }
.problems-ledger li { position: relative; display: grid; align-content: start; gap: var(--space-4); padding-top: var(--space-5); }
/* the rule between photos sits in the middle of the gap, so every photo has the same width and baseline */
.problems-ledger li + li::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--rule-gap)); border-left: 1px solid var(--blue-rule); }
.problems-ledger img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }
.problems-ledger p { font: clamp(1.1875rem, .95rem + .7vw, 1.5rem)/1.12 var(--font-proof); letter-spacing: -.015em; }

/* ---- and what do you do? the photograph runs to the page edge ------------------------------------ */
.endure { padding-block: var(--section); background: var(--white); }
.endure-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); padding-left: max(var(--gutter), (100% - var(--content)) / 2); }
.endure-copy { display: grid; gap: var(--space-5); max-width: 32rem; }
.endure-copy .proof { color: var(--blue-text-2); }
.endure-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* ---- the signal --------------------------------------------------------------------------------- */
.signal { padding-block: var(--section); overflow: clip; }
.signal-grid { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); }
.signal-photo { position: relative; }
.signal-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }
.signal-copy { display: grid; justify-items: start; gap: var(--space-5); }
.signal-copy .section-title { max-width: 15ch; }
.signal-copy .proof { max-width: 30ch; }
.stages { display: grid; gap: var(--space-3); width: 100%; padding: clamp(1rem, 2vw, 1.5rem); border-radius: 12px; background: var(--white); color: var(--blue); }
.stages img { width: 100%; }
.stages figcaption { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: center; font: .75rem/1.25 var(--font-label); letter-spacing: .06em; text-transform: uppercase; }
.signal-call { font: var(--step-3)/1.15 var(--font-proof); letter-spacing: -.015em; }

/* ---- composition: the knee, and what reaches it ------------------------------------------------- */
.composition { padding-block: var(--section); overflow: clip; }
.composition-lead { display: grid; gap: var(--space-4); }
.composition-lead .section-title { max-width: 18ch; }
/* desktop: the knee on the left, the plants on the right. A line leaves the knee's outline at the joint
   (48 % down, 73.4 % across the drawing), meets a bus in the middle of the gap, and the bus feeds each
   group of plants at the height of its drawings. */
.formula-map { --knee: clamp(18rem, 33vw, 32rem); --lead: clamp(1.75rem, 3.5vw, 3rem); --plant: clamp(6.5rem, 9.5vw, 10rem); --bus-gap: var(--space-7); --line: 2px solid var(--blue-line); display: grid; grid-template-columns: var(--knee) minmax(0, 32rem); justify-content: center; align-items: center; column-gap: calc(2 * var(--lead)); margin-top: clamp(2rem, 4vw, 3.5rem); }
.map-center { position: relative; }
.map-center img { width: 100%; }
.map-center::before { content: ""; position: absolute; top: 48%; left: 73.4%; z-index: 1; width: .75rem; height: .75rem; border: 2px solid var(--blue); border-radius: 50%; background: var(--white); transform: translate(-50%, -50%); }
.map-center::after { content: ""; position: absolute; top: 48%; left: 73.4%; width: calc(26.6% + var(--lead)); border-top: var(--line); }
.map-legend { display: grid; gap: var(--bus-gap); }
.map-group { position: relative; display: grid; justify-items: start; gap: var(--space-4); }
.map-group::before { content: ""; position: absolute; top: calc(var(--plant) / 2); right: 100%; width: var(--lead); border-top: var(--line); }
.map-group::after { content: ""; position: absolute; left: calc(-1 * var(--lead)); border-left: var(--line); }
.map-group:first-child::after { top: calc(var(--plant) / 2); bottom: calc(-1 * var(--bus-gap)); }
.map-group:last-child::after { top: 0; height: calc(var(--plant) / 2); }
.map-plants { display: flex; gap: clamp(1rem, 2.5vw, 2rem); }
.map-plant { display: grid; justify-items: center; align-content: start; gap: var(--space-2); }
.map-plant img { width: var(--plant); }
.map-plant figcaption { max-width: 10rem; font: var(--step-2)/1.1 var(--font-proof); letter-spacing: -.01em; text-align: center; }
.map-tags { display: flex; flex-wrap: wrap; gap: .375rem; max-width: 30rem; }
.map-tags li { padding: .4375rem .6875rem .375rem; border: 1px solid var(--blue-line); border-radius: 999px; background: var(--white); font: .8125rem/1 var(--font-proof); hyphens: manual; }

/* ---- safety: three drawings at panel scale ------------------------------------------------------- */
.safety { padding-block: var(--section); }
.safety-title { max-width: 21ch; }
.safety-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); margin-top: clamp(2rem, 4vw, 3.5rem); }
.safety-panels li { display: grid; align-content: start; gap: var(--space-3); }
.safety-panels img { width: 100%; aspect-ratio: 1; margin-bottom: var(--space-2); padding: 3%; border-radius: 12px; background: var(--white); }
.safety-panels h3 { font: clamp(1.5rem, 1.15rem + 1vw, 2rem)/1.05 var(--font-proof); letter-spacing: -.02em; }
.safety-panels p { font: var(--step-1)/1.45 var(--font-body); color: var(--white-text-2); }
.safety-action { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); margin-top: var(--space-6); }
.safety-action p { max-width: 36ch; font: var(--step-0)/1.4 var(--font-body); color: var(--white-text-2); }

/* ---- statistics: two charts drawn from the original's data -------------------------------------- */
.evidence { padding-block: var(--section); }
.evidence-lead { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; gap: var(--space-5) clamp(2rem, 6vw, 6rem); }
.evidence-lead .section-title { max-width: 17ch; }
.evidence-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) clamp(2rem, 4vw, 3.5rem); margin-top: clamp(2rem, 4vw, 3.5rem); padding-top: var(--space-5); border-top: 2px solid var(--blue); }
.chart { display: grid; gap: var(--space-4); }
.chart figcaption { display: grid; gap: .375rem; }
.chart figcaption b { font: 400 var(--step-3)/1.1 var(--font-proof); letter-spacing: -.015em; }
.chart figcaption span { font: var(--step-0)/1.3 var(--font-body); color: var(--blue-text-2); }
.chart-svg { width: 100%; height: auto; overflow: visible; }
.chart-grid line { stroke: var(--blue-rule); stroke-width: 1; stroke-dasharray: 4 6; }
.chart-axis text { fill: var(--blue-text-2); stroke: none; font: 13px var(--font-label); letter-spacing: .04em; text-anchor: end; }
.series { fill: none; stroke-width: 3; stroke-linejoin: round; }
.series-prod { stroke: var(--blue); }
.series-other { stroke: var(--blue-line); stroke-dasharray: 7 7; }
.dots circle { stroke-width: 3; }
.dots-prod circle { fill: var(--orange); stroke: var(--blue); }
.dots-other circle { fill: var(--white); stroke: var(--blue-line); }
.stems line { stroke-width: 3; }
.stems-prod line { stroke: var(--blue); }
.stems-other line { stroke: var(--blue-line); stroke-dasharray: 6 6; }
.chart-legend { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font: var(--step-1)/1 var(--font-proof); }
.chart-legend li { display: flex; align-items: center; gap: var(--space-3); }
.chart-legend li::before { content: ""; width: 2.25rem; height: 0; border-top: 3px solid var(--blue); }
.chart-legend .legend-prod::after { content: ""; order: -1; width: .75rem; height: .75rem; margin-right: -1.5rem; border: 3px solid var(--blue); border-radius: 50%; background: var(--orange); position: relative; left: .75rem; }
.chart-legend .legend-other::before { border-top: 3px dashed var(--blue-line); }
.evidence-note { margin-top: var(--space-5); font: var(--step-0)/1.4 var(--font-body); color: var(--blue-text-2); }

/* ---- how to use: three steps on one track -------------------------------------------------------- */
.usage { padding-block: var(--section); }
.usage-track { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); margin-top: clamp(2rem, 4vw, 3.5rem); }
.usage-track li { position: relative; display: grid; align-content: start; }
.usage-track img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; }
.usage-node { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin: -1.75rem 0 0 var(--space-4); border-radius: 50%; background: var(--orange); color: var(--blue); font: 1.5rem/1 var(--font-backdrop); position: relative; z-index: 1; box-shadow: 0 0 0 6px var(--white); }
.usage-track p { margin-top: var(--space-4); max-width: 24ch; font: clamp(1.1875rem, .95rem + .7vw, 1.5rem)/1.15 var(--font-proof); letter-spacing: -.015em; }

/* ---- reviews ------------------------------------------------------------------------------------- */
.reviews { padding-block: var(--section); }
/* the portraits lead: three at full card width, the other six behind one control (desktop) or along a
   swipe rail (phones) */
.reviews-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7) clamp(1.5rem, 3vw, 3rem); margin-top: clamp(2rem, 4vw, 3.5rem); }
.review { display: grid; align-content: start; gap: var(--space-3); }
.review-portrait { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; margin-bottom: var(--space-2); }
.review header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.review header p { display: grid; gap: .25rem; }
.review header b { font: 400 var(--step-3)/1.1 var(--font-proof); letter-spacing: -.015em; }
.review header p span { font: .75rem/1.2 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--blue-text-2); }
.stars { display: flex; gap: .125rem; color: var(--blue); }
.stars svg { width: 1rem; height: 1rem; fill: currentColor; stroke: none; }
.stars .star-off { color: var(--blue-tint); }
.review-text { font: var(--step-1)/1.55 var(--font-body); color: var(--blue-text-2); }
.review.is-clamped .review-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.review-more { justify-self: start; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; padding: 0; border: 0; border-bottom: 1px solid currentColor; background: none; font: var(--step-0)/1 var(--font-proof); }
.review-more svg { width: 1rem; height: 1rem; transition: transform .3s var(--ease); }
.review-more[aria-expanded="true"] svg { transform: rotate(45deg); }
.reviews-all { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 3rem; margin-top: var(--space-7); padding: 0; border: 0; border-bottom: 2px solid currentColor; background: none; font: var(--step-3)/1 var(--font-proof); letter-spacing: -.015em; }
.reviews-all svg { width: 1.25rem; height: 1.25rem; stroke-width: 2; }
@media (min-width: 900px) { .reviews-grid.is-collapsed .review:nth-child(n + 4) { display: none; } }

/* ---- how ordering works -------------------------------------------------------------------------- */
.ordering { padding-block: var(--section); }
.ordering-track { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); margin-top: clamp(2rem, 4vw, 3.5rem); }
.ordering-track li { display: grid; align-content: start; gap: var(--space-2); }
.ordering-track img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; }
.ordering-node { display: inline-flex; align-items: center; gap: var(--space-3); width: max-content; margin: -1.5rem 0 var(--space-2) var(--space-4); padding-right: var(--space-3); background: var(--blue); position: relative; z-index: 1; }
.ordering-node svg { width: 3rem; height: 3rem; padding: .8125rem; border-radius: 50%; background: var(--white); color: var(--blue); }
.ordering-node i { font: 1.5rem/1 var(--font-backdrop); font-style: normal; letter-spacing: -.02em; color: var(--orange); }
.ordering-track .is-pay .ordering-node svg { background: var(--orange); }
.ordering-track b { font: 400 var(--step-3)/1.1 var(--font-proof); letter-spacing: -.015em; }
.ordering-track li > span:last-child { max-width: 30ch; font: var(--step-1)/1.45 var(--font-body); color: var(--white-text-2); }
.money-rail { position: relative; display: flex; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-7); padding-top: var(--space-3); font: .75rem/1.2 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--white-text-2); }
.money-rail::before { content: ""; position: absolute; top: 0; left: 0; right: 30%; border-top: 2px dashed rgb(252 250 255 / .45); }
.money-rail::after { content: ""; position: absolute; top: -1px; right: 0; width: 30%; height: 4px; background: var(--orange); }
.money-pay { color: var(--white); }

/* ---- closing: the second order card ------------------------------------------------------------- */
.closing { padding-block: var(--section) clamp(4rem, 8vw, 7rem); }
.closing-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(23rem, 30rem); gap: clamp(2rem, 5vw, 5.5rem); align-items: start; }
.closing-visual { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.closing-title { max-width: 16ch; }
.closing-title em { color: var(--blue-text-2); }
.closing-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }

/* ---- footer -------------------------------------------------------------------------------------- */
.site-footer { padding-block: clamp(3rem, 6vw, 5rem) var(--space-6); }
.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-color: var(--orange); }
.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(--orange); }
.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(--orange); 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(--orange); }
.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%; }
/* no floating bar on these pages: the header keeps its own way back to the order */
@media (min-width: 900px) {
  .legal-page .header-order { display: inline-flex; margin-left: auto; }
  .legal-page .header-inner { padding-right: 0; }
}
@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 -------------------
   phones: at the bottom, under the thumb. Desktop: docked in the header strip, top right, so it never
   covers the woman or the order card beside 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;
}
@container (max-width: 21.5rem) { .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); }
@keyframes sticky-in { from { transform: translate(var(--sticky-x), 130%); } to { transform: translate(var(--sticky-x), 0); } }
@keyframes sticky-drop { from { transform: translateY(-130%); } to { transform: none; } }
@media (min-width: 900px) {
  html { scroll-padding-top: 5rem; scroll-padding-bottom: 0; }
  .sticky-order {
    --sticky-x: 0;
    top: .4375rem;
    right: max(var(--gutter), (100% - var(--content)) / 2);
    bottom: auto;
    left: auto;
    width: 22.5rem;
    padding: .3125rem .3125rem .3125rem var(--space-4);
    animation-name: sticky-drop;
  }
  .sticky-order img { display: none; }
  .sticky-order .button { min-height: 2.75rem; padding: var(--space-1) var(--space-4); }
  /* the bar takes the header's order link's place; the nav centres in what is left */
  .header-order { display: none; }
  .header-inner { padding-right: calc(22.5rem + var(--space-6)); }
  .site-footer:has(+ .sticky-order) { padding-bottom: var(--space-6); }
}
/* 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 */
@media (min-width: 900px) and (max-width: 1199px) {
  .desktop-nav { display: none; }
  .hero-figure { width: min(100% + 9rem, 36rem); margin-right: -9rem; }
}
/* below 1200px the figure is too narrow for a callout on its card side: two callouts on the open left
   side, their labels running inward over the cardigan, never over the face */
/* two charts side by side shrink the 560-unit drawing: keep the axis text at 12px or more */
@media (min-width: 900px) and (max-width: 1199px) { .chart-axis text { font-size: 18px; } }
@media (max-width: 1199px) {
  .callout-hand { display: none; }
  .callout-shoulder { --x: 34%; --y: 24%; --dx: 12%; --tx: calc(-1 * var(--disc)); --align: flex-start; --ta: left; }
  .callout-knee { --x: 50%; --y: 77%; --dx: 15%; --tx: calc(-1 * var(--disc)); --ty: calc(var(--disc) / 2 - 100%); --flow: column-reverse; --align: flex-start; --ta: left; }
}
.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; }

/* ---- responsive ---------------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .problems-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-6); }
  .problems-ledger li:nth-child(3)::before { display: none; }
}
@media (max-width: 899px) {
  .desktop-nav { display: none; }
  .header-order { margin-left: auto; }
  .brand i { display: none; }
  /* phones: the promise, the figure with two callouts, then the pack on the card */
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .hero-title { max-width: 15ch; }
  .hero-figure { width: min(86%, 22.5rem); margin: 2.75rem auto 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: 9.5rem; font-size: .75rem; }
  .hero-formula { top: -.625rem; left: 0; transform: translateY(-100%); }
  .order-pack { width: 9rem; }
  .endure-grid { grid-template-columns: minmax(0, 1fr); padding-left: 0; }
  .endure-copy { width: min(100% - 2 * var(--gutter), 36rem); margin-inline: auto; }
  .endure-photo { order: -1; }
  .signal-grid { grid-template-columns: minmax(0, 1fr); }
  .signal-photo { width: min(100%, 26rem); }
  /* phones: the knee on top; the line leaves its left outline at the joint, runs to a bus on the left
     edge and down to both groups of plants */
  .formula-map { --knee-w: min(15rem, 68vw); --lead: 1.25rem; --plant: 5.75rem; --bus-gap: var(--space-6); position: relative; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-6); }
  .formula-map::before { content: ""; position: absolute; top: calc(var(--knee-w) * .48); left: 0; width: calc((100% - var(--knee-w)) / 2 + var(--knee-w) * .295); border-top: var(--line); }
  .formula-map::after { content: ""; position: absolute; top: calc(var(--knee-w) * .48); left: 0; height: calc(var(--knee-w) * .52 + var(--space-6)); border-left: var(--line); }
  .map-center { width: var(--knee-w); justify-self: center; }
  .map-center::before { left: 29.5%; }
  .map-center::after { display: none; }
  .map-legend { margin-left: var(--lead); }
  .map-group:first-child::after { top: 0; }
  .map-plant figcaption { font-size: var(--step-1); }
  .evidence-lead { grid-template-columns: minmax(0, 1fr); }
  .evidence-charts { grid-template-columns: minmax(0, 1fr); }
  .usage-track, .ordering-track { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-7); }
  .usage-track li { grid-template-columns: minmax(0, 1fr); }
  .money-rail::before { right: 42%; }
  .money-rail::after { width: 42%; }
  .closing-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "claim" "legal" "copy" "top"; }
  .back-top { justify-self: start; }
  /* the reviews become a swipe rail of portraits */
  .reviews-grid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: min(78%, 20rem); gap: var(--space-5); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); }
  .reviews-grid::-webkit-scrollbar { display: none; }
  .review { scroll-snap-align: start; }
  .reviews-all { display: none; }
}
@media (max-width: 719px) {
  /* the four problems become a swipe row */
  .problems-ledger { --rule-gap: var(--space-4); grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); }
  .problems-ledger::-webkit-scrollbar { display: none; }
  .problems-ledger li { scroll-snap-align: start; }
  .problems-ledger li:nth-child(3)::before { display: block; }
  /* the three safety drawings become a swipe row too */
  .safety-panels { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); }
  .safety-panels::-webkit-scrollbar { display: none; }
  .safety-panels li { scroll-snap-align: start; }
  .chart-axis text { font-size: 21px; }
}
@media (max-width: 480px) {
  .hero-title, .section-title { hyphens: auto; }
  .order-assurance { grid-template-columns: minmax(0, 1fr); justify-content: start; }
  .money-rail { flex-direction: column; gap: var(--space-2); }
  .money-rail::before { right: 0; }
  .money-rail::after { display: none; }
}

/* sections below the first screen lay out as they come near it */
.problems, .endure, .signal, .composition, .safety, .evidence, .usage, .reviews, .ordering, .closing, .site-footer { content-visibility: auto; contain-intrinsic-size: auto var(--rendered-estimate, 1000px); }

@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; }
}