/* ==========================================================================
   Neem Up
   --------------------------------------------------------------------------
   Black and white. The wallpaper is the only picture, and one pink is
   the only other colour on the page.
   Type scale, spacing and breakpoints follow _extracted/DESIGN.md.
   ========================================================================== */

:root {
  --white: #ffffff;
  --black: #000000;

  --ink-muted: rgba(0, 0, 0, 0.62);
  --ink-faint: rgba(0, 0, 0, 0.45);
  --hairline:      rgba(0, 0, 0, 0.14);
  --hairline-soft: rgba(0, 0, 0, 0.08);

  /* Inverted equivalents, for the black surfaces. */
  --on-dark-muted: rgba(255, 255, 255, 0.66);
  --on-dark-faint: rgba(255, 255, 255, 0.48);
  --hairline-dark: rgba(255, 255, 255, 0.22);

  /* Average tone of the wallpaper, painted under it so the first frame is
     never a white flash while the texture is still downloading. */
  --wallpaper-tone: #9b7649;
  /* The one highlight colour: the pink. Anything that sits on it is
     set in white. */
  --pop:      #f5276c;
  --pop-2:    #f5276c;
  --pop-dark: #f5276c;
  --on-pop:   #ffffff;
  /* The marker behind Chapter 2's paragraph. */
  --mark: #f5276c;

  /* The Price/Questions rail: the heading column, its gap, a card. */
  --faq-head: min(30vw, 440px);
  --faq-gap: 6vw;
  --faq-card: min(34vw, 460px);

  --base: 8px;
  --gutter: 32px;
  --margin-mobile: 24px;
  --section-lg: 120px;
  --section-sm: 64px;
  --container-max: 1280px;

  --radius: 0.25rem;
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --dur: 400ms;
  --nav-h: 80px;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background-color: var(--black);
}

body {
  margin: 0;
  background-color: var(--white);
  color: var(--black);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection { background: var(--pop); color: var(--on-pop); }

img { max-width: 100%; display: block; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--pop); outline-offset: 3px; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 200;
  background: var(--pop);
  color: var(--on-pop);
  padding: 12px 24px;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: top var(--dur) var(--ease-out-expo);
}
.skip-link:focus { top: 16px; }

/* --------------------------------------------------------------------------
   Type scale
   -------------------------------------------------------------------------- */

.display-lg, .headline-lg, .headline-md,
.wordmark, .ch1__word, .ch2__headline, .ch2__value {
  font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.display-lg  { font-size: 72px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.headline-lg { font-size: 48px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.headline-md { font-size: 32px; font-weight: 500; line-height: 1.3; }
.body-lg     { font-size: 18px; font-weight: 400; line-height: 1.7; letter-spacing: 0.01em; }
.body-md     { font-size: 16px; font-weight: 400; line-height: 1.6; }
.label-caps  { font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: 0.15em; text-transform: uppercase; }

/* ==========================================================================
   CHAPTER 1 — the wallpaper tear
   ========================================================================== */

/* Scroll distance for the tear, a hold, the letter swap, and a final hold —
   see TEAR_END / SWAP_START / SWAP_END in main.js. */
/* The tear frames are keyed, so what the paper comes away from is simply
   this surface. Black, with the wordmark in white on it. */
.ch1 {
  position: relative;
  height: 420vh;
  background-color: var(--black);
}

.ch1__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background-color: var(--black);
}

/* The void: black, with the real <h1> centred on it. */
.ch1__void {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--black);
}

/* The wordmark has to land on the same pixels as the last frame of the tear
   video, which is 1280×720 and drawn cover-fitted. At 1280×720 the two terms
   below are both 166.4px; on any other viewport the max() follows whichever
   axis the cover-fit scales by, so the DOM handoff stays seamless. No clamp —
   a clamp would break the match exactly where the video is scaled most. */
.ch1__word {
  font-weight: 700;
  font-size: max(13vw, 23.111vh);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--white);
  white-space: nowrap;
  margin: 0;
}

/* #endframe: the page rendering its own Chapter 1 end state, so the video's
   last frame can be screenshotted from the real CSS. Nothing but the void. */
.is-endframe .ch1 { height: 100vh; }
.is-endframe .ch1__stage > :not(.ch1__void) { display: none; }
.is-endframe .ch2, .is-endframe .idx, .is-endframe .idx-menu, .is-endframe .lang,
.is-endframe main, .is-endframe .footer, .is-endframe .skip-link { display: none; }

/* Each letter is boxed at the width of the wider of the two faces and the
   glyph centred inside, so a face swap changes the letterform and never the
   layout. Widths are written by main.js after document.fonts.ready. */
.ch1__word .ch1__ltr {
  display: inline-block;
  text-align: center;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 700;
}

.ch1__word .ch1__ltr.is-sans {
  font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
}

/* Fitting the DOM letters to where the clip actually put them.
   The model re-draws the wordmark rather than reproducing the end frame, and
   on this clip every glyph sits ~12px higher and the word is tracked tighter
   (measured at 1280x720, ink bounding boxes of the clip's last frame against
   tear-end-720p.png). Each letter is nudged by exactly its own error, in the
   clip's reference pixels scaled the same way the cover-fit scales the clip,
   so the handoff lands on the same ink.
   --s is one reference pixel in viewport units. */
.ch1__word { --s: max(0.078125vw, 0.138889vh); }

/* --fit is 1 while the clip's lettering is what you see and eases to 0 as
   the letters convert, so the sans wordmark ends at its natural spacing. */
.ch1__word { --fit: 1; }
.ch1__word .ch1__ltr {
  transform: translate(calc(var(--dx, 0) * var(--s) * var(--fit)), calc(var(--dy, 0) * var(--s) * var(--fit)))
             scale(calc(1 + (var(--sx, 1) - 1) * var(--fit)), calc(1 + (var(--sy, 1) - 1) * var(--fit)));
  transform-origin: 50% 50%;
}
/* Take e62a (Topaz 4K): its lettering is 82% as wide as the page's, so the
   nudges run from +60 on the N to -76 on the p. Derived by
   scratchpad/measure-letters.js from a fresh capture of the page's own end
   frame (assets/img/tear-end-720p.png, regenerated from /#endframe at
   1280x720), then tuned on the live page: scratchpad/verify-fit.js drives
   Chapter 1 to the handoff and measures the DOM ink against the clip's, and
   the residual it found there — e/e/m two pixels high, U half, p one — is
   taken out here. Measured again afterwards, it lands within a pixel. */
.ch1__word .ch1__ltr:nth-child(1) { --dx: 60.5;  --dy: -11.5; --sx: 0.973; --sy: 0.975; } /* N */
.ch1__word .ch1__ltr:nth-child(2) { --dx: 41;    --dy: -10.5; --sx: 0.986; --sy: 0.967; } /* e */
.ch1__word .ch1__ltr:nth-child(3) { --dx: 10;    --dy: -10;   --sx: 1.014; --sy: 0.957; } /* e */
.ch1__word .ch1__ltr:nth-child(4) { --dx: -22.5; --dy: -10;   --sx: 0.959; --sy: 0.955; } /* m */
.ch1__word .ch1__ltr:nth-child(6) { --dx: -62;   --dy: -11.5; --sx: 0.982; --sy: 0.967; } /* U */
.ch1__word .ch1__ltr:nth-child(7) { --dx: -76;   --dy: -11;   --sx: 0.978; --sy: 0.966; } /* p */

/* The end frame is the reference these offsets were measured against, so it
   must render without them; portrait has no clip to match at all. */
.is-endframe .ch1__ltr,
.ch1--portrait .ch1__ltr,
.no-motion .ch1__ltr { transform: none; }

/* Ohne Tapete traegt der Schriftwechsel Kapitel 1 auf dem Telefon allein,
   also soll jeder Buchstabe auch ankommen und nicht bloss die Schnittform
   tauschen: er setzt sich von unten in die Zeile. Die Animation laeuft je
   Buchstabe einmal und in ihrer eigenen Zeit — sie haengt nicht daran, wie
   schnell gewischt wird, und spielt beim Zurueckscrollen erneut. */
@keyframes ch1-letter-set {
  from { transform: translateY(0.16em); opacity: 0.35; }
  to   { transform: none; opacity: 1; }
}
.ch1--portrait .ch1__ltr.is-sans {
  animation: ch1-letter-set 380ms var(--ease-out-expo) both;
}
.no-motion .ch1--portrait .ch1__ltr.is-sans,
.no-js .ch1--portrait .ch1__ltr.is-sans { animation: none; }

/* The scrubbed tear, above the void. Opaque while it is showing; hidden the
   instant the last frame is reached, which hands over to the DOM wordmark
   sitting on the identical pixels underneath. */
.ch1__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background-color: var(--wallpaper-tone);
}

/* First paint, on top of everything. Cover-fitted exactly as the canvas
   draws frame 0, so the two are the same image. */
.ch1__landing {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background-color: var(--wallpaper-tone);
}

.ch1__canvas.is-hidden,
.ch1__landing.is-hidden { display: none; }

/* Portrait viewports can't be served by a 16:9 clip — cover-fitting it would
   crop the tear and the wordmark past recognition, and a still of it that
   dissolves within the first thumb-scroll was not worth its weight. So on a
   phone there is no wallpaper at all: the chapter opens black with the
   wordmark already there, and the letter swap is the whole of it. */
.ch1--portrait .ch1__canvas,
.ch1--portrait .ch1__landing { display: none; }

/* No clip to match on portrait, so the wordmark can simply fit the width —
   the cover-fit rule above would follow the height and run off both edges. */
.ch1--portrait .ch1__word { font-size: 13vw; }

/* ==========================================================================
   CHAPTER 2 — layered horizontal drift
   ========================================================================== */

/* Scroll budget: the opening line, the headline, then the track — see the
   timeline in main.js. The chapter leaves as a black block; its bottom edge
   carries a pixel seam. */
.ch2 {
  position: relative;
  height: 560vh;
  background-color: var(--black);
  color: var(--white);
}

.ch2__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  background-color: var(--black);
}

/* --- the track: copy, then the figures, all in one row ------------------ */

/* One row, everything on it centred on the same line: the copy, the
   paragraph, the three figures. */
.ch2__track {
  display: flex;
  align-items: center;
  gap: 10vw;
  width: max-content;
  padding-left: 8vw;
  will-change: transform;
}

/* The copy: the opening line, small once it has landed, over the headline
   at its full size. main.js centres it in the stage to begin with. */
.ch2__copy {
  flex: 0 0 auto;
  width: max-content;
  max-width: 88vw;
}

/* The opening line arrives large in the middle of the stage, holds, then
   shrinks up to its place over the headline; the headline then fades in at
   its full size beneath it. main.js drives both from measured geometry;
   nothing here transitions. */
/* The line is set at the headline's size and scaled DOWN to its small place,
   never up: text scaled up from a small raster goes soft, text scaled down
   from a large one stays sharp. The <p> is only a 15px-tall placeholder in
   the flow; the text itself is absolute inside it. */
.ch2__eyebrow {
  position: relative;
  height: 18px;
  margin-bottom: 24px;
}
/* Der Umbruch in der Auftaktzeile: auf breiten Schirmen laeuft sie in einer
   Zeile durch, auf dem Handy bricht sie nach dem Komma. */
.brk-m { display: none; }

.ch2__eyebrow-txt {
  position: absolute;
  left: 0; top: 0;
  opacity: 0;
  transform-origin: 0 0;
  font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(1.7rem, 4.6vw, 3.7rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--white);
}

.ch2__headline {
  font-size: clamp(1.7rem, 4.6vw, 3.7rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--white);
  opacity: 0;
  will-change: opacity;
}

.ch2__line { display: block; }
.ch2__line + .ch2__line { margin-top: 0.12em; }

/* "build" — the promise the whole page turns on, so it gets the one piece of
   emphasis in the chapter: a hard white block wipes in behind it and the word
   flips to black. Same hard-edged language as the pixelation blocks. */
.ch2__pop {
  position: relative;
  display: inline-block;
  padding-inline: 0.1em;
}
.ch2__pop-bg {
  position: absolute;
  inset: 0.1em -0.02em 0.08em;
  background-color: var(--pop);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 560ms var(--ease-out-expo);
}
.ch2__pop-txt {
  position: relative;
  transition: color 160ms linear;
}
.ch2__pop.is-pop .ch2__pop-bg { transform: scaleX(1); }
.ch2__pop.is-pop .ch2__pop-txt { color: var(--on-pop); transition-delay: 200ms; }

/* The paragraph: its own item on the track, each line in a brown marker
   that hugs the words. The lines rise as the track brings it in. */
.ch2__sub {
  flex: 0 0 auto;
  width: max-content;
  max-width: 90vw;
  font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(0.85rem, 1.45vw, 1.2rem);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--white);
}
/* The two lines are authored — the break is where the client put it. */
.ch2__sub .ch2__pline { display: block; overflow: hidden; padding-bottom: 0.1em; }
.ch2__sub .ch2__pline > span {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  padding: 0.06em 0.4em;
  background-color: var(--mark);
  color: var(--on-pop);
  transform: translateY(110%);
  transition: transform 1300ms var(--ease-out-expo);
}
/* One line after the other, unhurried. */
.ch2__sub .ch2__pline:nth-child(2) > span { transition-delay: 450ms; }
.ch2__sub .ch2__pline:nth-child(3) > span { transition-delay: 900ms; }
.ch2__sub .ch2__pline:nth-child(4) > span { transition-delay: 1350ms; }
.ch2__sub .ch2__pline:nth-child(5) > span { transition-delay: 1800ms; }
.ch2__sub.is-in .ch2__pline > span { transform: none; }

/* Short landscape viewports (laptops at ~700px): the copy block and the rail
   would otherwise meet in the middle. Tighten both. */
@media (min-width: 768px) and (max-height: 820px) {
  .ch2__sub      { font-size: 16px; }
  .ch2__value    { font-size: clamp(3.5rem, 8vw, 7rem); }
}

/* --- the figures, bottom of the stage — a rail wider than the viewport ---- */

.ch2__rail {
  display: flex;
  align-items: center;
  gap: 7vw;
  width: max-content;
}

.ch2__stat {
  flex: 0 0 auto;
  width: min(44vw, 560px);
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 500ms var(--ease-out-expo),
              transform 700ms var(--ease-out-expo);
}

.ch2__stat.is-in {
  opacity: 1;
  transform: none;
}

.ch2__value {
  display: block;
  font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(4rem, 11vw, 10.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--white);
}

.ch2__label {
  display: block;
  margin-top: 16px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* ==========================================================================
   Pixel seams — where black meets white
   --------------------------------------------------------------------------
   A strip of square pixels on a section's bottom edge, in the colour of the
   section that follows. main.js builds the cells and snaps them in, lower
   rows first, as the edge scrolls up. Hard squares, no blur, no radius:
   currentColor is the whole palette. Sections that carry one reserve room
   for it so their last line is never under the fringe.
   ========================================================================== */

.px-seam {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 10;
  pointer-events: none;
  color: var(--white);
}
.px-seam--white { color: var(--white); }
.px-seam--black { color: var(--black); }

.px-seam__panel { display: flex; width: 100%; }
.px-seam__col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  flex: 1 1 0;
  min-width: 0;
}
.px-seam__px {
  aspect-ratio: 1;
  width: 100%;
  background-color: currentColor;
  /* the same bleed the old grid needed: fractional tracks show hairlines */
  box-shadow: 0 0 0 1px currentColor;
  backface-visibility: hidden;
  will-change: opacity;
  opacity: 0;
}

/* 4 rows at 32 columns = 12.5vw; 3 rows at 10 columns = 30vw on phones. */
.section--seam { --seam-h: 12.5vw; padding-bottom: calc(var(--section-sm) + var(--seam-h)); }

/* ==========================================================================
   The index layer — the only chrome on the page
   --------------------------------------------------------------------------
   Fixed to the four corners, set in white and blended with difference, so it
   is black over white sections and white over black ones with no second
   colour and no backdrop. Hidden until Chapter 2 has left.
   ========================================================================== */

.idx {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  color: var(--white);
  mix-blend-mode: difference;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease-out-expo), visibility 0s linear var(--dur);
}
.idx.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur) var(--ease-out-expo), visibility 0s;
}

.idx > * {
  position: absolute;
  margin: 0;
  pointer-events: auto;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  color: inherit;
}

.idx__brand {
  top: 26px; left: var(--gutter);
  font-family: Montserrat, sans-serif;
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
}
.idx__toggle {
  background: none; border: 0; padding: 8px 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 500;
}
.idx__toggle  { top: 20px; right: var(--gutter); }
.idx__counter { bottom: 26px; left: var(--gutter); }

/* Der Sprachschalter gehoert nicht zur Eckenleiste, sondern steht vom ersten
   Bild an da: wer die Seite nicht lesen kann, muss sie sofort verlassen
   koennen. Waehrend der beiden Auftaktkapitel ist alles dahinter dunkel, da
   genuegt Weiss; danach wechseln helle und dunkle Kapitel, und die
   Differenz-Ueberblendung dreht die Schrift jeweils mit. */
.lang {
  position: fixed;
  bottom: 26px;
  right: var(--gutter);
  z-index: 110;
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--white);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
}
.is-past-intro .lang,
.no-motion .lang,
.no-js .lang { mix-blend-mode: difference; }

.lang__link {
  opacity: 0.45;
  transition: opacity 300ms var(--ease-out-expo);
}
.lang__link:hover,
.lang__link.is-on { opacity: 1; }
.lang__sep { opacity: 0.3; }


.idx__name    { margin-left: 0.6em; }

.idx__toggle-close { display: none; }
.idx.is-open .idx__toggle-open  { display: none; }
.idx.is-open .idx__toggle-close { display: inline; }

/* The index itself: six lines of the serif on black. */
.idx-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--nav-h) var(--gutter);
  background-color: var(--black);
  color: var(--white);
  opacity: 0;
  visibility: hidden;
  transition: opacity 500ms var(--ease-out-expo), visibility 0s linear 500ms;
}
.idx-menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 500ms var(--ease-out-expo), visibility 0s;
}

.idx-menu__list { max-width: var(--container-max); width: 100%; margin-inline: auto; }
.idx-menu__list li { opacity: 0; transform: translateY(0.4em); }
.idx-menu.is-open li {
  animation: idx-in 700ms var(--ease-out-expo) forwards;
  animation-delay: calc(var(--i, 0) * 55ms + 80ms);
}
.idx-menu__list li:nth-child(1) { --i: 0; } .idx-menu__list li:nth-child(2) { --i: 1; }
.idx-menu__list li:nth-child(3) { --i: 2; } .idx-menu__list li:nth-child(4) { --i: 3; }
.idx-menu__list li:nth-child(5) { --i: 4; } .idx-menu__list li:nth-child(6) { --i: 5; }
@keyframes idx-in { to { opacity: 1; transform: none; } }

.idx-menu__list a {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  padding: 0.08em 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2rem, 7.2vw, 6.25rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.42);
  transition: color 300ms var(--ease-out-expo), padding-left 500ms var(--ease-out-expo);
}
.idx-menu__list a:hover { color: var(--white); }
.idx-menu__list a.is-current { color: var(--pop-dark); }
.idx-menu__list a:hover { padding-left: 0.2em; }

.idx-menu__num {
  min-width: 2.6em;
  font-family: Inter, sans-serif;
  font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
  color: var(--on-dark-faint);
}
.idx-menu__legal {
  position: absolute; left: 50%; bottom: 56px;
  transform: translateX(-50%);
  margin: 0;
  white-space: nowrap;
  font-family: Inter, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
  color: var(--white);
}
.idx-menu__legal a { text-decoration: underline; text-underline-offset: 3px; }
.idx-menu__foot {
  position: absolute; left: 0; right: 0; bottom: 26px;
  text-align: center;
  font-family: Inter, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
  color: var(--on-dark-muted);
}

/* The loading counter, in Chapter 1's corner while the frames come in. */
/* Links unten, weil rechts unten jetzt der Sprachschalter steht. Die
   Kapitelzaehlung, die hier spaeter sitzt, ist waehrend Kapitel 1 aus. */
.loader {
  position: absolute;
  left: var(--gutter); bottom: 26px;
  z-index: 5;
  margin: 0;
  color: var(--white);
  font-family: Inter, sans-serif;
  font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  transition: opacity 600ms var(--ease-out-expo);
}
.loader.is-done { opacity: 0; }

/* ==========================================================================
   The chapters — one screen, one idea, a label in the corner
   ========================================================================== */

/* clip, not hidden: the chapters that ride over one another poke past the edges, and
   hidden would make main a scroll container and break the sticky frame. */
.chapters { overflow-x: clip; }

.ch {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--nav-h) + 16px);
  padding-inline: var(--gutter);
  padding-bottom: var(--section-sm);
}
.ch.section--seam { padding-bottom: calc(var(--section-sm) + var(--seam-h)); }

.section--invert {
  background-color: var(--black);
  color: var(--white);
}

.ch__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
}

.ch__head { margin-bottom: clamp(32px, 6vh, 64px); }

.ch__label {
  margin-bottom: 18px;
  font-family: Inter, sans-serif;
  font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 0.02em;
  color: var(--ink-muted);
}
.section--invert .ch__label { color: var(--on-dark-muted); }

.ch__title {
  font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(2.25rem, 6vw, 5.5rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 14ch;
  color: var(--black);
}
.ch__sub { margin-top: 20px; font-size: 18px; color: var(--ink-muted); }

/* Anything that rises into place: wrapped, clipped, translated up on entry. */
[data-reveal] { --rise: 1; }
.rise {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1000ms var(--ease-out-expo);
}
[data-reveal].is-in .rise { transform: none; }

/* The pill — the only button shape on the page */
.pill {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6em;
  padding: 20px 36px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: none;
  color: inherit;
  font-family: Inter, sans-serif;
  font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: 0.01em;
  cursor: pointer;
  will-change: transform;
  transition: background-color 300ms var(--ease-out-expo), color 300ms var(--ease-out-expo);
}
.pill__note { font-weight: 400; opacity: 0.6; }
.pill:hover { background-color: var(--pop); border-color: var(--pop); color: var(--on-pop); }
.section--invert .pill:hover { background-color: var(--pop); border-color: var(--pop); color: var(--on-pop); }

/* --------------------------------------------------------------------------
   01 Before / after — one practice on an iPad and an iPhone
   --------------------------------------------------------------------------
   The stage is sticky for one viewport beyond its own (the stack into
   Price). Each device is a CSS frame around a screen that holds two coded
   sites, before and after, each its own scroller; the switch wipes the
   after site down over the before. Both are real HTML, sized to the screen
   with container queries.
   -------------------------------------------------------------------------- */

/* Ein geparktes Kapitel bleibt im Markup und faellt nur aus dem Fluss. Die
   eigenen display-Werte der Kapitel wuerden das Browser-Standardverhalten von
   [hidden] ueberschreiben, darum steht es hier ausdruecklich. */
.ch[hidden] { display: none; }
.idx-menu__list li[hidden] { display: none; }

.ch--work { height: calc(100vh * 2.6); padding: 0; display: block; }

.work {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: calc(var(--nav-h) + 8px) var(--gutter) 52px;
  max-width: calc(var(--container-max) + var(--gutter) * 2);
  margin-inline: auto;
  transform-origin: 50% 40%;
  will-change: transform, opacity;
}

.work__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}
.work__title { font-size: clamp(1.6rem, 3.2vw, 2.75rem); max-width: none; }
.work__hint {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: none;
  margin: 0;
  font-family: Inter, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: 0.02em;
  color: var(--ink-muted);
}
.work__state {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-faint);
  font: inherit;
  cursor: pointer;
  transition: color 300ms var(--ease-out-expo);
}
.work__state:hover { color: var(--black); }
.work__state.is-on { color: var(--pop); font-weight: 600; }
.work__sep { color: var(--ink-faint); }
.work__cue { margin-left: 6px; }

/* Which business */
.sites {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.sites__btn {
  padding: 9px 14px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: none;
  color: var(--ink-muted);
  font-family: Inter, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 300ms var(--ease-out-expo), color 300ms var(--ease-out-expo), border-color 300ms;
}
.sites__btn:hover { border-color: var(--pop); color: var(--pop); }
.sites__btn.is-on { background-color: var(--pop); border-color: var(--pop); color: var(--on-pop); }
.sites__num { margin-right: 0.5em; opacity: 0.6; }

/* The devices — photographs of the real things, the screen area of each
   measured on the image and given here as insets, so the live site sits
   exactly inside the glass. */
.devices {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(16px, 4vw, 56px);
  padding-bottom: 28px;
}
.device {
  position: relative;
  height: 100%;
  aspect-ratio: var(--ar);
  margin: 0;
  container-type: inline-size;
}
.device__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  user-select: none;
}
.device__screen {
  position: absolute;
  top: var(--st); right: var(--sr); bottom: var(--sb); left: var(--sl);
  overflow: hidden;
  border-radius: var(--sradius);
  background-color: var(--white);
  color: var(--black);
  container-type: inline-size;
}
/* Insets are written by tools/measure-devices.js from the images. */
/* Measured on the renders (tools: scratchpad/measure-devices.js): the glass
   inside the bezel, as insets of the cropped image. cqw here is the device
   width, since .device is the container. */
.device--tablet { --ar: 1467 / 1953; --st: 3.99%; --sr: 5.32%; --sb: 3.99%; --sl: 5.25%; --sradius: 1.6cqw; }
.device--phone  { --ar: 1248 / 2572; height: 92%; --st: 2.53%; --sr: 5.05%; --sb: 2.49%; --sl: 5.21%; --sradius: 11.5cqw; }
/* The phone's camera island sits over whatever the site puts up there,
   the way it does on the real thing. */
.device--phone .device__screen::after {
  content: "";
  position: absolute; z-index: 5;
  top: 0.9%; left: 50%;
  width: 28%; height: 3.5%;
  transform: translateX(-50%);
  background-color: #000;
  border-radius: 999px;
}
.device__label {
  position: absolute; left: 0; right: 0; bottom: -26px;
  text-align: center;
  font-family: Inter, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
  color: var(--ink-muted);
}

/* Two sites in one screen, one over the other, each showing that site's
   hero and nothing more — the screens do not scroll, so the page keeps the
   scroll to itself. A click anywhere on a screen switches the pair: the
   rebuild wipes down over the old site on both devices at once. */
.device__screen { cursor: pointer; }
.mock {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.mock--before { transition: visibility 0s linear 700ms; }
.mock--after {
  z-index: 2;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 700ms var(--ease-out-expo);
}
.devices[data-state="after"] .mock--after  { clip-path: inset(0); }
.devices[data-state="after"] .mock--before { visibility: hidden; }

/* The screenshot is a whole page; the glass shows its top, filling the
   screen without distortion. */
.mock__shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* The coded pairs are laid out at the screen's width and simply clipped. */
.mock .ob, .mock .nb { min-height: 100%; }

/* --- before: the practice's current site -------------------------------- */

.ob {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: clamp(9px, 3.2cqw, 13px);
  line-height: 1.5;
  color: #222;
  background-color: #f2f2f2;
  min-height: 100%;
}
.ob__top {
  padding: 6% 5% 4%;
  background: linear-gradient(#e9eef6, #c9d5e6);
  border-bottom: 2px solid #8fa3c2;
}
.ob__logo {
  display: block;
  font-family: "Times New Roman", Times, serif;
  font-size: 2.1em; font-weight: 700; color: #1f3d7a;
  text-shadow: 1px 1px 0 #fff;
}
.ob__tag { display: block; margin-top: 0.3em; font-style: italic; color: #555; }
.ob__nav {
  display: flex; flex-wrap: wrap; gap: 3px;
  margin: 0; padding: 3px 5%;
  background-color: #dcdcdc;
  border-bottom: 1px solid #999;
  list-style: none;
}
.ob__nav li {
  padding: 0.35em 0.8em;
  background: linear-gradient(#fff, #e0e0e0);
  border: 1px solid #999;
  color: #0033aa; text-decoration: underline;
  font-size: 0.95em;
}
.ob__body { padding: 5%; background-color: #fff; margin: 3% 5%; border: 1px solid #ccc; }
.ob__body h1 { font-family: "Times New Roman", Times, serif; font-size: 1.8em; color: #1f3d7a; margin: 0 0 0.5em; }
.ob__body h2 { font-family: "Times New Roman", Times, serif; font-size: 1.35em; color: #1f3d7a; margin: 1.2em 0 0.4em; border-bottom: 1px dotted #999; }
.ob__body p { margin: 0 0 1em; text-align: justify; }
.ob__body u { color: #0033aa; }
.ob__img {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3; width: 55%;
  margin: 0 0 1em;
  border: 2px inset #aaa;
  background-color: #ddd;
  color: #777; font-size: 0.9em;
}
.ob__img--wide { width: 100%; aspect-ratio: 3 / 1; }
.ob__list { margin: 0 0 1em 1.4em; padding: 0; list-style: disc; }
.ob__table { border-collapse: collapse; width: 100%; margin-bottom: 1em; }
.ob__table td { border: 1px solid #aaa; padding: 0.35em 0.6em; }
.ob__table tr:nth-child(odd) td { background-color: #f4f6fa; }
.ob__news { padding: 0.6em 0.8em; background-color: #fff6c8; border: 1px solid #e0c96a; color: #6a4b00; }
.ob__foot { padding: 4% 5%; font-size: 0.85em; color: #666; text-align: center; }
.ob__foot u { color: #0033aa; }

/* Five dated looks, one per business. The dentist is the default (blue,
   Verdana, bevelled buttons); the others override what makes them theirs. */
.ob--bakery { font-family: "Trebuchet MS", Tahoma, sans-serif; background-color: #fbf3e4; color: #3b2a1a; }
.ob--bakery .ob__top { background: linear-gradient(#c68a4a, #8a5a2b); border-bottom-color: #5c3a17; }
.ob--bakery .ob__logo { font-family: "Comic Sans MS", "Chalkboard SE", cursive; color: #fff7e6; text-shadow: 1px 1px 0 #5c3a17; }
.ob--bakery .ob__tag { color: #fbe9cc; }
.ob--bakery .ob__nav { background-color: #e9d3b3; border-bottom-color: #a77b4d; }
.ob--bakery .ob__nav li { background: linear-gradient(#fff8ea, #e9d3b3); border-color: #a77b4d; color: #7a3d0b; }
.ob--bakery .ob__body { border-color: #d9bb90; }
.ob--bakery .ob__body h1, .ob--bakery .ob__body h2 { font-family: "Comic Sans MS", "Chalkboard SE", cursive; color: #8a5a2b; }
.ob--bakery .ob__news { background-color: #fff0cc; border-color: #d9a441; color: #6b3f00; }

.ob--law { font-family: "Times New Roman", Times, serif; background-color: #f3f2ec; color: #222; }
.ob--law .ob__top { background: #1c2a4a; border-bottom: 4px double #c9a24a; }
.ob--law .ob__logo { color: #c9a24a; font-variant: small-caps; letter-spacing: 0.04em; text-shadow: none; }
.ob--law .ob__tag { color: #dfd6bd; }
.ob--law .ob__nav { background-color: #2a3b63; border-bottom-color: #c9a24a; }
.ob--law .ob__nav li { background: #2a3b63; border-color: #4a5c85; color: #f0e6c8; text-decoration: none; font-variant: small-caps; }
.ob--law .ob__body { border-color: #c9c4b0; }
.ob--law .ob__body h1, .ob--law .ob__body h2 { color: #1c2a4a; font-variant: small-caps; border-bottom-color: #c9a24a; }
.ob--law .ob__table td { border-color: #c9c4b0; }
.ob--law .ob__news { background-color: #f7f2e2; border-color: #c9a24a; color: #4a3a10; }

.ob--yoga { font-family: Georgia, "Times New Roman", serif; background-color: #f4effa; color: #3a2f4d; text-align: center; }
.ob--yoga .ob__top { background: linear-gradient(#b088d8, #6b3fa0); border-bottom-color: #4a2a75; }
.ob--yoga .ob__logo { font-style: italic; color: #fff; text-shadow: 1px 1px 2px #4a2a75; }
.ob--yoga .ob__tag { color: #efe4ff; }
.ob--yoga .ob__nav { justify-content: center; background-color: #e6d9f5; border-bottom-color: #a98acb; }
.ob--yoga .ob__nav li { background: linear-gradient(#fff, #e6d9f5); border-color: #a98acb; color: #6b3fa0; }
.ob--yoga .ob__body { border-color: #d5c5ea; }
.ob--yoga .ob__body h1, .ob--yoga .ob__body h2 { font-style: italic; color: #6b3fa0; border-bottom-color: #a98acb; }
.ob--yoga .ob__body p { text-align: center; }
.ob--yoga .ob__img { margin-inline: auto; }
.ob--yoga .ob__list { display: inline-block; text-align: left; }
.ob--yoga .ob__news { background-color: #efe4ff; border-color: #a98acb; color: #4a2a75; }

.ob--garage { font-family: Arial, Helvetica, sans-serif; background-color: #ececec; color: #111; }
.ob--garage .ob__top { background: #111 repeating-linear-gradient(135deg, #111 0 12px, #1d1d1d 12px 24px); border-bottom: 6px solid #ffcc00; }
.ob--garage .ob__logo { font-family: Impact, "Arial Narrow", sans-serif; font-weight: 400; letter-spacing: 0.02em; color: #ffcc00; text-shadow: 2px 2px 0 #000; text-transform: uppercase; }
.ob--garage .ob__tag { color: #ddd; }
.ob--garage .ob__nav { background-color: #333; border-bottom-color: #000; }
.ob--garage .ob__nav li { background: linear-gradient(#555, #222); border-color: #000; color: #ffcc00; text-decoration: none; text-transform: uppercase; font-weight: 700; }
.ob--garage .ob__body { border-color: #bbb; }
.ob--garage .ob__body h1, .ob--garage .ob__body h2 { font-family: Impact, "Arial Narrow", sans-serif; font-weight: 400; color: #c00; text-transform: uppercase; border-bottom-color: #c00; }
.ob--garage .ob__news { background-color: #fff3b0; border-color: #e0b400; color: #6b4b00; font-weight: 700; }

/* --- after: the same business, rebuilt ---------------------------------- */

.nb {
  font-family: Inter, sans-serif;
  font-size: clamp(9px, 3.1cqw, 14px);
  line-height: 1.5;
  min-height: 100%;
  background-color: var(--white);
  color: var(--black);
}
.nb__label { margin: 0; font-size: 0.85em; font-weight: 500; letter-spacing: 0.02em; color: rgba(0, 0, 0, 0.55); }
.nb__dark .nb__label, .nb__foot .nb__label { color: rgba(255, 255, 255, 0.6); }
.nb__bar { display: flex; justify-content: space-between; align-items: baseline; padding: 5% 6%; }
.nb__brand { font-family: Montserrat, sans-serif; font-weight: 600; font-size: 1.05em; letter-spacing: -0.01em; }
.nb__hero { padding: 8% 6% 10%; }
.nb__h1 {
  margin: 0.8em 0 0.5em;
  font-family: Montserrat, sans-serif;
  font-size: 2.6em; font-weight: 600; line-height: 1.02; letter-spacing: -0.03em;
}
.nb__lede { margin: 0 0 1.6em; font-size: 1.05em; color: rgba(0, 0, 0, 0.62); max-width: 30ch; }
.nb__pill {
  display: inline-block;
  padding: 0.9em 1.6em;
  border: 1px solid currentColor; border-radius: 999px;
  font-weight: 600; font-size: 0.95em;
}
.nb__pill--light { border-color: var(--white); }
.nb__dark { padding: 10% 6%; background-color: var(--black); color: var(--white); }
.nb__big {
  margin: 0.4em 0 0;
  font-family: Montserrat, sans-serif;
  font-size: 1.7em; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em;
  max-width: 18ch;
}
.nb__cta .nb__big { margin-bottom: 1.2em; }
.nb__list, .nb__hours { padding: 6% 6% 8%; }
.nb__hours .nb__label { margin-bottom: 0.8em; }
.nb__row {
  display: flex; justify-content: space-between; gap: 1em;
  padding: 0.9em 0;
  border-top: 1px solid rgba(0, 0, 0, 0.14);
  font-family: Montserrat, sans-serif; font-weight: 600; font-size: 1.1em; letter-spacing: -0.01em;
}
.nb__list .nb__row:last-child, .nb__hours .nb__row:last-child { border-bottom: 1px solid rgba(0, 0, 0, 0.14); }
.nb__hours .nb__row { font-family: Inter, sans-serif; font-weight: 400; font-size: 1em; }
.nb__num { flex: none; width: 3em; font-family: Inter, sans-serif; font-weight: 500; font-size: 0.8em; color: rgba(0, 0, 0, 0.45); }
.nb__foot { display: flex; justify-content: space-between; gap: 1em; padding: 6%; background-color: var(--black); color: var(--white); font-size: 0.85em; }

/* --------------------------------------------------------------------------
   02 Price — the figure, then the table
   -------------------------------------------------------------------------- */

/* The stack: Price starts one viewport early, over the pinned devices, and
   slides up across it while the frame recedes (main.js scrubs the frame).
   Then it pins: its stage holds while the track inside moves left, the price
   going out and "FAQ." with the first question coming in. */
/* Ist Vorher/Nachher geparkt, gibt es nichts zu ueberlagern: der Vorlauf
   faellt weg, sonst zoege sich der Preis ueber das Ende von Kapitel 2. */
.ch--work[hidden] + .ch--price { margin-top: 0; }

.ch--price {
  z-index: 2;
  margin-top: -100vh;
  height: 340vh;
  min-height: 0;
  padding: 0;
  display: block;
  background-color: var(--white);
}
.pq-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  padding: var(--nav-h) var(--gutter) 9vh;
}
/* The track is as tall as the stage; the price and the FAQ block both sit in
   the middle of it. */
.pq-track {
  display: flex;
  align-items: center;
  gap: 12vw;
  width: max-content;
  height: 100%;
  will-change: transform;
}
.pq-price { flex: 0 0 auto; align-self: center; width: min(88vw, var(--container-max)); }
.pq-price__grid {
  display: grid;
  grid-template-columns: auto minmax(0, 34rem);
  gap: 5vw;
  align-items: center;
}
.pq-price__grid .price__table { margin-top: 0; }
.pq-price .pill { display: inline-flex; margin-top: 28px; }

/* "FAQ." large, the first question beside it */
.pq-faq {
  flex: 0 0 auto;
  align-self: center;
  display: flex;
  align-items: flex-end;
  gap: var(--faq-gap);
}
.faq-head { flex: 0 0 auto; width: var(--faq-head); }
.faq-title { font-size: clamp(3rem, 9vw, 8rem); line-height: 0.95; max-width: none; }

.price { margin: 0; }
.price__figure {
  display: inline-block;
  overflow: hidden;
  font-family: Montserrat, sans-serif;
  font-size: clamp(4rem, 11vw, 10rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: var(--black);
}
.price__cur { font-size: 0.42em; font-weight: 500; letter-spacing: -0.02em; margin-left: 0.08em; }
.price__note {
  display: block;
  margin-top: 14px;
  max-width: 34ch;
  font-family: Inter, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.5; letter-spacing: 0.02em;
  color: var(--ink-muted);
}

.price__table { margin-top: 0; }
.pq-price .pill { display: inline-flex; margin-top: 28px; }

/* "FAQ." large, the first question beside it */
.pq-faq {
  flex: 0 0 auto;
  align-self: center;
  display: flex;
  align-items: flex-end;
  gap: var(--faq-gap);
}
.faq-head { flex: 0 0 auto; width: var(--faq-head); }
.faq-title { font-size: clamp(3rem, 9vw, 8rem); line-height: 0.95; max-width: none; }

.price { margin: 0; max-width: 20ch; }
.price__line {
  display: block;
  overflow: hidden;
  font-family: Montserrat, sans-serif;
  font-size: clamp(1.6rem, 4vw, 3.4rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--black);
}
.price__line + .price__line { margin-top: 0.1em; }
.price__line:last-child { color: var(--ink-muted); }

.price__table {
  max-width: 56rem;
  margin: clamp(32px, 6vh, 64px) 0 0;
  border-top: 1px solid var(--hairline);
}
.price__row {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 17px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms var(--ease-out-expo), transform 800ms var(--ease-out-expo);
}
.price__row.is-in { opacity: 1; transform: none; }
.price__row dt, .price__row dd { margin: 0; }
.price__row dd { white-space: nowrap; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.price__row--foot { font-size: 15px; color: var(--ink-muted); }
.price__row--foot dt { max-width: 40rem; }

/* --------------------------------------------------------------------------
   03 Questions, continued — the other three, beneath
   -------------------------------------------------------------------------- */

.ch--faq {
  min-height: 0;
  padding: 0 var(--gutter) var(--section-sm);
  display: block;
  /* Starts under the rail's last stretch, layered above it, so the second
     question rises in beneath the first — which sits mid-screen — before
     the stage has scrolled away. */
  z-index: 3;
  margin-top: -24vh;
}
/* In the first question's column, right under it. */
.faq-rest {
  display: grid;
  /* Spaced so each question crosses into view on its own, one after another. */
  gap: clamp(40px, 12vh, 110px);
  padding-left: calc(var(--faq-head) + var(--faq-gap));
}

.qcard {
  flex: 0 0 auto;
  width: var(--faq-card);
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
  cursor: pointer;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 500ms var(--ease-out-expo), transform 700ms var(--ease-out-expo);
}
.qcard.is-in { opacity: 1; transform: none; }
.qcard__num {
  display: block;
  font-family: Inter, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
  color: var(--ink-faint);
  transition: color 400ms var(--ease-out-expo) 300ms;
}
.qcard.is-in .qcard__num { color: var(--pop); }
.qcard__q {
  margin: 12px 0 0;
  font-family: Montserrat, sans-serif;
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
/* The question is the button; the answer opens beneath it on a click. */
.qcard__btn {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 300ms var(--ease-out-expo);
}
.qcard:hover .qcard__btn, .qcard.is-open .qcard__btn { color: var(--pop); }
/* The plus, in a ring: pink, and filled when the question is open or under
   the cursor. The vertical bar folds away when open. */
.qcard__mark {
  position: relative; flex: none;
  width: 36px; height: 36px;
  margin-top: -0.1em;
  border: 1.5px solid var(--pop-2);
  border-radius: 50%;
  color: var(--pop-2);
  transition: background-color 300ms var(--ease-out-expo), color 300ms var(--ease-out-expo);
}
.qcard__mark::before, .qcard__mark::after {
  content: ""; position: absolute; background: currentColor;
  transition: transform 400ms var(--ease-out-expo);
}
.qcard__mark::before { left: 10px; right: 10px; top: 50%; height: 2px; margin-top: -1px; }
.qcard__mark::after  { top: 10px; bottom: 10px; left: 50%; width: 2px; margin-left: -1px; }
.qcard:hover .qcard__mark, .qcard.is-open .qcard__mark { background-color: var(--pop-2); color: var(--on-pop); }
.qcard.is-open .qcard__mark::after { transform: scaleY(0); }
.qcard__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 500ms var(--ease-out-expo);
}
.qcard.is-open .qcard__body { grid-template-rows: 1fr; }
.qcard__a {
  overflow: hidden;
  margin: 0;
  padding-top: 0;
  font-size: 16px; line-height: 1.6; color: var(--ink-muted);
  transition: padding-top 500ms var(--ease-out-expo);
}
.qcard.is-open .qcard__a { padding-top: 12px; }

/* --------------------------------------------------------------------------
   04 The claim — serif to sans, a letter at a time, as you scroll past
   -------------------------------------------------------------------------- */

/* The iris. The chapter is tall and white; its stage is sticky and black,
   clipped to a horizontal slit across the middle (--open is the inset from
   top and bottom, 50% → 0). main.js scrubs the slit open over the first
   part of the chapter and the claim rises in (--in) as it does. */
.ch--claim { height: 170vh; padding: 0; display: block; z-index: 2; }
/* Your site lies beneath the claim's box; nothing in the claim is clickable,
   so the pointer goes through to the address field and the button. */
.ch--claim, .ch--claim * { pointer-events: none; }
.claim__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: calc(var(--nav-h) + 16px) var(--gutter) var(--section-sm);
  clip-path: inset(var(--open, 50%) 0);
  will-change: clip-path;
}
.claim__stage .ch__inner {
  position: relative;
  z-index: 1;
  opacity: var(--in, 0);
  transform: translateY(calc((1 - var(--in, 0)) * 4vh));
}

/* The split: the black is two panels that part as the chapter leaves,
   the top one up and the bottom one down (--split 0 → 1), uncovering the
   white beneath. The stage itself has no background of its own. */
.claim__stage.section--invert { background-color: transparent; }
.claim__panel {
  position: absolute;
  left: 0; right: 0;
  height: 50%;
  background-color: var(--black);
  will-change: transform;
}
/* Offen fahren beide 2px ueber ihre Hoehe hinaus: sonst endet ihre Kante genau
   auf der Kante, an der sie abgeschnitten werden, und auf einem halben Pixel
   bleibt ein Hauch davon als Haarlinie stehen. */
.claim__panel--top    { top: 0;    transform: translateY(calc(var(--split, 0) * (-100% - 2px))); }
.claim__panel--bottom { bottom: 0; transform: translateY(calc(var(--split, 0) * (100% + 2px))); }

.claim {
  margin: auto 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2.4rem, 7vw, 6.5rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 13ch;
  color: var(--white);
}
.claim__line { display: block; }

/* Der deutsche Klartext hat vier Zeilen statt drei, die laengste 26 Zeichen.
   Mit dem englischen Mass braechen zwei davon um, und das Kapitel liefe unten
   aus dem Bild. Also kleiner gesetzt, breiteres Mass, und ab Tablet bleibt
   jede Zeile eine Zeile. Darunter darf sie umbrechen, sonst passt sie nicht. */
[lang="de"] .claim { font-size: clamp(1.6rem, 4.8vw, 4rem); max-width: 24ch; }
@media (min-width: 768px) { [lang="de"] .claim__line { white-space: nowrap; } }
.claim__word { display: inline-block; white-space: nowrap; }

/* Each letter boxed at the wider of its two faces (widths written by
   main.js), so the swap changes the letterform and never the line. */
.claim__ltr {
  display: inline-block;
  text-align: center;
  font-family: "Playfair Display", Georgia, serif;
}
.claim__ltr.is-sans {
  font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
}
/* The last line takes the highlight as it converts. */
.claim__line:last-child .claim__ltr.is-sans { color: var(--pop-dark); }

/* --------------------------------------------------------------------------
   05 Your site — the URL, typed at headline size
   -------------------------------------------------------------------------- */

/* Your site starts under the claim's last stretch, so that when the black
   panels part it is already there — in the lower part of the screen — and
   the colophon follows straight after it. */
.ch--start { z-index: 1; margin-top: -72vh; min-height: 72vh; padding-top: 5vh; }
.ch--start .ch__head { margin-bottom: clamp(20px, 4vh, 40px); }

.start { max-width: var(--container-max); }

.start__input {
  display: block;
  width: 100%;
  padding: 0.1em 0;
  border: 0;
  border-bottom: 2px solid var(--black);
  border-radius: 0;
  background: transparent;
  color: var(--black);
  font-family: Montserrat, sans-serif;
  font-size: clamp(1.6rem, 4.6vw, 4rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.start__input::placeholder { color: var(--ink-faint); }
.start__input { caret-color: var(--pop); }
.start__input:focus { outline: 0; border-bottom-color: var(--pop); }

/* Die Einwilligung (Kontaktformular im Impressum): klein und ruhig, aber
   lesbar und mit echtem Haekchen — sie ist eine Rechtsgrundlage, kein
   Kleingedrucktes. */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 44rem;
  margin-top: 22px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-muted);
  cursor: pointer;
}
.consent__box {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin: 1px 0 0;
  accent-color: var(--pop);
  cursor: pointer;
}
.consent__link { color: var(--black); text-decoration: underline; text-underline-offset: 3px; }

.start__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: 32px;
}
.start__note { margin: 0; min-height: 1.4em; font-size: 15px; line-height: 1.4; color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   Colophon (black)
   -------------------------------------------------------------------------- */

.footer {
  background-color: var(--black);
  color: var(--white);
  padding: 40px var(--gutter) 44px;
  --p: 0;
}
/* The rule draws itself left to right as the footer arrives; the line of
   text beneath rises with it. main.js scrubs --p. */
.footer__rule {
  display: block;
  height: 1px;
  margin-bottom: 36px;
  background-color: var(--white);
  transform: scaleX(var(--p));
  transform-origin: 0 50%;
}
.footer__inner {
  opacity: var(--p);
  transform: translateY(calc((1 - var(--p)) * 20px));
}
.footer__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 32px;
  font-family: Inter, sans-serif;
  font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
}
.footer__inner p { margin: 0; }
.footer__brand { font-family: Montserrat, sans-serif; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.footer__line, .footer__copy { color: var(--on-dark-muted); }
/* Waehrend das Formular sendet, nimmt der Knopf keine zweite Eingabe an. */
.start.is-sending .pill { opacity: 0.5; pointer-events: none; }

.footer__legal { color: inherit; text-decoration: underline; text-underline-offset: 3px; transition: color 300ms var(--ease-out-expo); }
.footer__legal:hover { color: var(--white); }

/* --------------------------------------------------------------------------
   Responsive — DESIGN.md breakpoints
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .ch, .work, .footer { padding-inline: var(--margin-mobile); }
  .idx__brand, .idx__counter { left: var(--margin-mobile); }
  .idx__toggle { right: var(--margin-mobile); }
  .lang { right: var(--margin-mobile); }
  .loader { left: var(--margin-mobile); }
  .idx-menu { padding-inline: var(--margin-mobile); }

  /* Long pinned runs are a lot of thumb-scrolling on a phone. Chapter 1 has
     no wallpaper here — only the wordmark converting — so it is shorter than
     anywhere else. */
  .ch1 { height: 200vh; }
  .ch2 { height: 460vh; }
  .ch2__track { padding-left: 6vw; }

  /* Zwei Zeilen: der Umbruch zaehlt, und der Platzhalter im Fluss muss beide
     Zeilen tragen (15px Schrift, Zeilenabstand 1.2, gerundet). */
  .brk-m { display: inline; }
  .ch2__eyebrow-txt { white-space: normal; }
  .ch2__eyebrow { height: 40px; }
  .section--seam { --seam-h: 30vw; }

  .ch2__track { gap: 18vw; }
  .ch2__copy { max-width: 84vw; }
  .ch2__headline { font-size: 1.5rem; }
  /* Sonst bricht die Zeile nach dem Artikel: "We don't just sell you a /
     redesign." Ausgewogen umbrochen faellt der Bruch dorthin, wo er
     hingehoert — und zwar in jeder Sprache, ohne festen Umbruch. */
  .ch2__line { text-wrap: balance; }
  .ch2__sub { width: 84vw; font-size: 0.95rem; }
  .ch2__sub .ch2__pline > span { white-space: normal; }
  .ch2__rail { gap: 14vw; }
  .ch2__stat { width: 68vw; }
  .ch2__value { font-size: 4.25rem; }

  .work { padding-bottom: 44px; }
  .work__head { flex-direction: column; align-items: flex-start; gap: 12px; }
  /* Two devices do not fit a phone side by side: the row scrolls sideways. */
  .devices { justify-content: flex-start; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: 2px; }
  .devices::-webkit-scrollbar { display: none; }
  .device { flex: none; scroll-snap-align: center; }
  .device--tablet { height: 74%; }
  .device--phone  { height: 70%; }
  .process { padding-left: 24px; }
  .price__row { flex-direction: column; gap: 4px; }
  /* No rail on a phone: price, then FAQ, then the questions, in a column. */
  /* --q-gap: der eine Abstand zwischen zwei Fragen. Frage 01 steht im
     Preiskapitel, 02 bis 04 im naechsten, also muss der Abstand zwischen den
     beiden Kapiteln derselbe sein wie der innerhalb der Liste. */
  :root { --faq-head: auto; --faq-gap: 24px; --faq-card: 100%; --q-gap: clamp(28px, 7vh, 52px); }
  .ch--price { height: auto; padding: calc(var(--nav-h) + 16px) var(--margin-mobile) var(--q-gap); }
  .pq-stage { position: static; height: auto; padding: 0; overflow: visible; }
  .pq-track { flex-direction: column; align-items: stretch; width: auto; height: auto; gap: 56px; }
  .pq-price, .pq-faq { align-self: stretch; }
  .pq-price { width: auto; }
  .pq-price__grid { grid-template-columns: 1fr; gap: 28px; }
  .pq-faq { flex-direction: column; align-items: stretch; gap: 24px; }
  /* Der Preis-zu-FAQ-Moment, dem Hochformat angepasst. Fuer die Schiene des
     Desktops ist kein Platz — der Preisblock allein ist hoeher als ein
     kleines Telefon — aber die Geste bleibt: "FAQ." kommt von rechts herein,
     gesteuert in main.js. Nur eine Transformation, im Fluss verrutscht also
     nichts, und .chapters { overflow-x: clip } faengt den Ueberstand. */
  .faq-title { font-size: 4.6rem; }
  .pq-faq { will-change: transform; }
  .ch--faq { padding-inline: var(--margin-mobile); margin-top: 0; }
  /* Der Abstand von rund 110px ist fuer den Desktop gedacht, wo jede Frage
     einzeln ins Bild kommen soll. Auf dem Telefon stehen drei einzeilige
     Fragen dann in einem Feld aus Leerraum — hier reicht die Haelfte. */
  .faq-rest { padding-left: 0; padding-top: 0; gap: var(--q-gap); }
  .ch--start { margin-top: -60vh; min-height: 60vh; }
  .footer__inner { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Reduced motion / no JS
   --------------------------------------------------------------------------
   None of the chapters can be driven without script, and a wallpaper that can
   never be torn would simply block the page. Each chapter collapses to the
   state it ends on.
   ========================================================================== */

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

.no-motion .ch1,
.no-js .ch1 { height: 100vh; }

.no-motion .ch2, .no-js .ch2 { height: auto; }

.no-motion .ch1__stage, .no-js .ch1__stage,
.no-motion .ch2__stage, .no-js .ch2__stage {
  position: static;
  height: 100vh;
}

/* Chapter 1 settles on its end state: black, white wordmark, no paper. */
.no-motion .ch1__canvas,  .no-js .ch1__canvas,
.no-motion .ch1__landing, .no-js .ch1__landing,
.no-motion .loader,       .no-js .loader { display: none; }

.no-motion .ch1__word .ch1__ltr,
.no-js .ch1__word .ch1__ltr {
  font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Chapter 2 settles fully revealed: copy in, all three figures in place. */
.no-motion .ch2__eyebrow-txt, .no-js .ch2__eyebrow-txt,
.no-motion .ch2__stat,    .no-js .ch2__stat { opacity: 1; transform: none; }
.no-motion .ch2__eyebrow, .no-js .ch2__eyebrow { height: auto; }
.no-motion .ch2__eyebrow-txt, .no-js .ch2__eyebrow-txt { position: static; white-space: normal; font-size: 15px; }
.no-motion .ch2__headline, .no-js .ch2__headline { opacity: 1; }
.no-motion .ch2__sub .ch2__pline > span, .no-js .ch2__sub .ch2__pline > span { transform: none; }
.no-motion .ch2__pop-bg, .no-js .ch2__pop-bg { transform: scaleX(1); }
.no-motion .ch2__pop-txt, .no-js .ch2__pop-txt { color: var(--on-pop); }
.no-motion .ch2__stage, .no-js .ch2__stage { align-items: stretch; }
.no-motion .ch2__track, .no-js .ch2__track {
  width: auto; flex-direction: column; align-items: flex-start;
  gap: var(--section-sm); padding: var(--section-sm) var(--gutter);
}
.no-motion .ch2__copy, .no-js .ch2__copy { width: auto; max-width: 46rem; }
.no-motion .ch2__rail, .no-js .ch2__rail { width: auto; flex-wrap: wrap; gap: var(--gutter); }
.no-motion .ch2__stat, .no-js .ch2__stat { width: min(100%, 20rem); }

/* The chapters: nothing pinned, nothing waiting to be revealed. The devices
   sit in a row, both sites shown. */
.no-motion .idx, .no-js .idx { opacity: 1; visibility: visible; }
.no-motion .ch--work, .no-js .ch--work { height: auto; }
.no-motion .work, .no-js .work { position: static; height: auto; }
.no-motion .devices, .no-js .devices { height: 72vh; flex: none; }
.no-motion .price__row,    .no-js .price__row { opacity: 1; transform: none; }
.no-motion .ch--price, .no-js .ch--price,
.no-motion .ch--start, .no-js .ch--start { margin-top: 0; }
.no-motion .ch--price, .no-js .ch--price { height: auto; padding: var(--section-sm) var(--gutter); }
.no-motion .pq-stage, .no-js .pq-stage { position: static; height: auto; padding: 0; overflow: visible; }
.no-motion .pq-track, .no-js .pq-track { flex-wrap: wrap; width: auto; height: auto; align-items: flex-start; gap: var(--section-sm); }
.no-motion .pq-price, .no-js .pq-price, .no-motion .pq-faq, .no-js .pq-faq { align-self: auto; }
.no-motion .ch--faq, .no-js .ch--faq { margin-top: 0; }
.no-motion .qcard, .no-js .qcard { opacity: 1; transform: none; }
.no-js .qcard__body { grid-template-rows: 1fr; }
.no-js .qcard__a { padding-top: 12px; }
.no-js .qcard__mark { display: none; }
.no-motion .ch--claim, .no-js .ch--claim { height: auto; }
.no-motion .claim__stage, .no-js .claim__stage { position: static; height: auto; min-height: 100vh; --open: 0%; --in: 1; }
.no-motion .footer, .no-js .footer { --p: 1; }
.no-motion .rise, .no-js .rise { transform: none; }
.no-motion .claim, .no-js .claim {
  font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ==========================================================================
   Impressum — eine ruhige Textseite
   ========================================================================== */

/* Kein Kapitel, keine Bewegung: weisser Grund, eine lesbare Spalte, die
   Marke oben links als Weg zurueck. */
.legal-page { background-color: var(--white); }
.legal-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  max-width: calc(var(--container-max) + var(--gutter) * 2);
  margin-inline: auto;
  padding: 26px var(--gutter);
}
.legal-bar__brand { font-family: Montserrat, sans-serif; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.legal-bar__back {
  font-family: Inter, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
  color: var(--ink-muted);
  transition: color 300ms var(--ease-out-expo);
}
.legal-bar__back:hover { color: var(--black); }
.legal-bar__nav { display: flex; align-items: baseline; gap: 24px; }
.legal-bar__lang {
  font-family: Inter, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
  color: var(--ink-muted);
  text-decoration: underline; text-underline-offset: 3px;
  transition: color 300ms var(--ease-out-expo);
}
.legal-bar__lang:hover { color: var(--black); }

/* Auftritt und Vertretung: Pflichtangaben, aber als Nebenzeile unter der
   Anschrift gesetzt, wie im Botanics-Impressum. Leiser durch die Groesse,
   nicht durch den Kontrast — lesbar muss sie bleiben. */
.legal__aside { margin-top: 12px !important; font-size: 14px !important; color: var(--ink-muted); }
.legal__aside strong { color: var(--black); font-weight: 600; }
.legal__block a { text-decoration: underline; text-underline-offset: 3px; }

/* Die Datenschutzerklaerung ist Fliesstext: Absaetze brauchen Luft zwischen
   sich, Listen eine Einrueckung. */
.legal__block p + p { margin-top: 14px; }
.legal__block ul { margin: 12px 0 14px; padding-left: 1.2em; font-size: 17px; line-height: 1.6; }
.legal__block li + li { margin-top: 6px; }
.legal--prose .legal__block > p:first-child:not(:only-child) { margin-top: 0; }
.legal__basis { margin: 28px 0 0; font-size: 13px; color: var(--ink-faint); }

/* Das Kontaktformular im Impressum: dieselben Mittel wie die Startseite,
   eine Nummer ruhiger. */
.legal__block .cform__intro { margin-top: 22px; font-size: 15px; color: var(--ink-muted); }
.cform { margin-top: 14px; }
.cform__label {
  display: block;
  margin: 18px 0 6px;
  font-family: Inter, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
  color: var(--ink-muted);
}
.cform__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--black);
  border-radius: 0;
  background: transparent;
  color: var(--black);
  font: 400 17px/1.5 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  caret-color: var(--pop);
}
.cform__input:focus { outline: 0; border-bottom-color: var(--pop); }
.cform__area { min-height: 7.5em; resize: vertical; }
.cform .consent { margin-top: 20px; }
.cform__row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 24px; }
.legal__block .cform__note { margin: 0; min-height: 1.4em; font-size: 15px; line-height: 1.4; color: var(--ink-muted); }
.cform.is-sending .pill { opacity: 0.5; pointer-events: none; }

.legal {
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(48px, 10vh, 120px) var(--gutter) var(--section-sm);
}
.legal__title {
  margin: 0 0 clamp(40px, 7vh, 72px);
  font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}
.legal__block { padding: 22px 0; border-top: 1px solid rgba(0, 0, 0, 0.12); }
.legal__block h2 {
  margin: 0 0 8px;
  font-family: Inter, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
  color: var(--ink-muted);
}
.legal__block p { margin: 0; font-size: 17px; line-height: 1.6; }

/* Fehlende Angaben, unuebersehbar. Steht davon noch etwas im Text, warnt
   tools/stamp.js — so geht keine halbe Seite online. */
.todo { background-color: var(--pop); color: var(--on-pop); padding: 0 4px; }

/* Der Footer der Textseite: dieselbe Zeile wie auf der Startseite. Dort
   blendet main.js ihn ueber --p mit dem Scrollen ein; hier gibt es kein
   main.js, also steht er gleich im Endzustand — sonst bliebe er unsichtbar. */
.legal-footer { --p: 1; }

@media (max-width: 767px) {
  .legal-bar, .legal { padding-inline: var(--margin-mobile); }
}