/* Multiplings website. The app's own world, translated to the page:
   nine family colours owning whole bands, cream resting between them. */

@font-face {
  font-family: 'Fredoka';
  src: url('fonts/Fredoka.ttf') format('truetype-variations');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('fonts/Nunito.ttf') format('truetype-variations');
  font-weight: 200 900;
  font-display: swap;
}

:root {
  --ink: #2b2d42;
  --ink-soft: #5c5f7a;
  --cream: #fff8ec;
  --cream-dark: #f6ebd6;
  --white: #ffffff;

  /* The nine families, in the order a child meets them. */
  --f2: #ff6b6b;
  --f3: #ff9f1c;
  --f4: #ffd93d;
  --f5: #6bcb77;
  --f10: #1fb6a0;
  --f6: #3a86ff;
  --f7: #9b5de5;
  --f8: #f15bb5;
  --f9: #00bbf9;
  /* Two family hues adjusted until text reads on them. Neither is a new
     colour: one is Ocean darkened, one is Bubblegum lightened. */
  --f6-deep: #2a5fb8;
  --f8-tint: #f9a0d4;

  /* Text on a colour field is a dark or light tint of that field, never gray.
     One warm tint carries every dark-on-colour case, two cool ones the
     light-on-dark cases. */
  --on-warm: #3a2733;
  --on-coral: #4a2b2f;
  --on-ink: #d8d5e8;
  --on-grape: #efe6ff;
  --on-ink-soft: #cfccdf;
  --on-ocean-deep: #e7f0ff;

  /* The sun: a hot core in a soft corona of Sunflower. */
  --sun-core: rgba(255, 240, 190, .95);
  --sun-glow: rgba(255, 217, 61, .34);
  --sun-edge: rgba(255, 217, 61, .12);

  --display: 'Fredoka', ui-rounded, 'Segoe UI Rounded', system-ui, sans-serif;
  --body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --band-y: clamp(3.5rem, 7vw, 6rem);
  --path-gap: clamp(2.4rem, 4vw, 4rem);
  --col: 1080px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --measure: 62ch;
  --radius: 28px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1.0625rem, 0.42vw + 0.96rem, 1.1875rem);
  line-height: 1.62;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

/* Browser surfaces belong to the design too. */
::selection { background: var(--f4); color: var(--ink); }
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 6px;
}
* { scrollbar-color: var(--f2) var(--cream-dark); scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--cream-dark); }
::-webkit-scrollbar-thumb {
  background: var(--f2);
  border-radius: 999px;
  border: 3px solid var(--cream-dark);
}

h1, h2, h3 {
  overflow-wrap: break-word;
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 7.6vw, 5.5rem); }
h2 { font-size: clamp(1.7rem, 4.4vw, 3.25rem); }
h3 { font-size: clamp(1.2rem, 2.1vw, 1.6rem); }
p { margin: 0 0 1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 2px; }
a:hover { text-decoration-thickness: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--ink); color: var(--cream);
  padding: 0.8rem 1.2rem; border-radius: 0 0 12px 0;
  font-family: var(--display); font-weight: 600;
}
.skip:focus { left: 0; }

/* ---- The chunky pressable button, exactly as the app draws it ---- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  padding: 0.85em 1.5em;
  border-radius: 999px; border: none;
  background: var(--white); color: var(--ink);
  box-shadow: 0 6px 0 rgba(43, 45, 66, 0.32);
  text-decoration: none; cursor: pointer;
  transition: transform 140ms var(--ease), box-shadow 140ms var(--ease);
}
.btn:hover { transform: translateY(2px); box-shadow: 0 4px 0 rgba(43, 45, 66, 0.32); }
.btn:active { transform: translateY(6px); box-shadow: 0 0 0 rgba(43, 45, 66, 0.32); }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
.btn--ink { background: var(--ink); color: var(--cream); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.35); }


/* ---- Scene: the app's own sky, brought to the page ----
   Every band is a place, the way every screen in the app is a place: an array
   lattice for ground texture, soft clouds above, rolling hills at the foot.
   All of it is drawn here rather than shipped as images, so it costs one
   stylesheet and scales to any width. */
:root {
  --hills-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 170' preserveAspectRatio='none'%3E%3Cpath d='M0 104C170 44 330 132 560 96 790 60 910 132 1200 88V170H0Z' fill='%23fff' fill-opacity='.13'/%3E%3Cpath d='M0 134C220 90 380 158 640 126 880 96 1010 156 1200 122V170H0Z' fill='%23fff' fill-opacity='.2'/%3E%3C/svg%3E");
  --hills-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 170' preserveAspectRatio='none'%3E%3Cpath d='M0 104C170 44 330 132 560 96 790 60 910 132 1200 88V170H0Z' fill='%232b2d42' fill-opacity='.045'/%3E%3Cpath d='M0 134C220 90 380 158 640 126 880 96 1010 156 1200 122V170H0Z' fill='%232b2d42' fill-opacity='.07'/%3E%3C/svg%3E");
  --clouds-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300'%3E%3Cg fill='%23fff' fill-opacity='.3'%3E%3Cpath d='M120 96c-26 0-40-16-40-32 0-19 15-31 33-31 6-19 23-31 44-31 24 0 44 15 50 36 5-3 11-5 18-5 19 0 34 14 34 32 0 17-14 31-33 31Z' transform='translate(60 18)'/%3E%3Cpath d='M120 96c-26 0-40-16-40-32 0-19 15-31 33-31 6-19 23-31 44-31 24 0 44 15 50 36 5-3 11-5 18-5 19 0 34 14 34 32 0 17-14 31-33 31Z' transform='translate(890 150) scale(1.25)'/%3E%3Cpath d='M120 96c-26 0-40-16-40-32 0-19 15-31 33-31 6-19 23-31 44-31 24 0 44 15 50 36 5-3 11-5 18-5 19 0 34 14 34 32 0 17-14 31-33 31Z' transform='translate(470 206) scale(.72)'/%3E%3C/g%3E%3C/svg%3E");
  --clouds-dim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300'%3E%3Cg fill='%23fff' fill-opacity='.12'%3E%3Cpath d='M120 96c-26 0-40-16-40-32 0-19 15-31 33-31 6-19 23-31 44-31 24 0 44 15 50 36 5-3 11-5 18-5 19 0 34 14 34 32 0 17-14 31-33 31Z' transform='translate(60 18)'/%3E%3Cpath d='M120 96c-26 0-40-16-40-32 0-19 15-31 33-31 6-19 23-31 44-31 24 0 44 15 50 36 5-3 11-5 18-5 19 0 34 14 34 32 0 17-14 31-33 31Z' transform='translate(890 150) scale(1.25)'/%3E%3Cpath d='M120 96c-26 0-40-16-40-32 0-19 15-31 33-31 6-19 23-31 44-31 24 0 44 15 50 36 5-3 11-5 18-5 19 0 34 14 34 32 0 17-14 31-33 31Z' transform='translate(470 206) scale(.72)'/%3E%3C/g%3E%3C/svg%3E");
}

/* The lattice is the array, at the scale of a tray tile. It is the one texture
   on this site that means something: every game is rows of these. */
.band, .hero {
  background-image:
    var(--clouds, none),
    var(--hills, none),
    radial-gradient(var(--grain, transparent) 1.4px, transparent 1.5px);
  background-repeat: no-repeat, repeat-x, repeat;
  background-position: center top, center bottom, 0 0;
  /* Clouds keep their natural size on a phone rather than shrinking to
     specks; the viewport crops the layer instead. */
  background-size: max(1000px, 100%) auto, max(900px, 100%) 170px, 30px 30px;
}

/* ---- Bands: each one owns its colour, the way a level owns its sky ---- */
.band { position: relative; padding: var(--band-y) var(--gutter); }
.band > .inner {
  max-width: var(--col);
  margin: 0 auto;
  padding-inline: var(--path-gap) 0;
}
.band--cream { background-color: var(--cream); --grain: rgba(43, 45, 66, .055); --hills: var(--hills-dark); }
.band--ink { background-color: var(--ink); color: var(--cream); --grain: rgba(255, 255, 255, .08); --hills: var(--hills-light); --clouds: var(--clouds-dim); }
.band--ink p { color: var(--on-ink); }
.band--ink h2, .band--ink h3 { color: var(--cream); }

/* Colour bands: ink stays readable on every family hue. */
.band--f2 { background-color: var(--f2); --grain: rgba(255, 255, 255, .13); --hills: var(--hills-light); --clouds: var(--clouds-light); }
.band--f5 { background-color: var(--f5); --grain: rgba(255, 255, 255, .15); --hills: var(--hills-light); --clouds: var(--clouds-light); }
.band--f8 { background-color: var(--f8-tint); --grain: rgba(255, 255, 255, .17); --hills: var(--hills-light); --clouds: var(--clouds-light); }
.band--f2 p, .band--f5 p, .band--f8 p { color: var(--on-warm); }

/* ---- The path: one line down the page, a stone at every milestone ---- */
.path-line {
  position: absolute;
  left: calc(max(var(--gutter), (100% - var(--col)) * 0.5) + 0.6rem);
  top: 0; bottom: 0;
  width: 6px;
  margin-left: -3px;
  background: currentColor;
  opacity: 0.22;
  border-radius: 999px;
}
.stone {
  position: absolute;
  left: calc(max(var(--gutter), (100% - var(--col)) * 0.5) + 0.6rem);
  top: var(--band-y);
  width: 34px; height: 34px;
  margin-left: -17px;
  border-radius: 50%;
  background: var(--cream);
  border: 5px solid var(--ink);
  transform: scale(0.82);
  transition: transform 420ms var(--ease), background-color 420ms var(--ease);
}
.stone[data-lit='true'] { transform: scale(1.18); background: var(--stone-lit, var(--f4)); }
@media (max-width: 620px) {
  #make .stone { top: calc(var(--band-y) + 2.4rem); }
}

/* ---- Hero ---- */
.hero {
  position: relative; z-index: 1;
  /* The sun rises off the right edge. Clip that axis only: `hidden` would
     force the other axis to scroll and cut stone one off the bottom. */
  overflow-x: clip;
  overflow-y: visible;
  background-color: var(--f2);
  color: var(--ink);
  padding: clamp(3rem, 7vw, 5rem) 0 0;
  --grain: rgba(255, 255, 255, .13);
  --hills: var(--hills-light);
  --clouds: var(--clouds-light);
}
/* The sun, where the app always puts it. */
.hero::before {
  content: '';
  position: absolute;
  top: clamp(-6rem, -7vw, -3.5rem); right: clamp(-5rem, -3vw, 1rem);
  width: clamp(15rem, 26vw, 24rem); aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--sun-core) 0 38%, transparent 39%),
    radial-gradient(circle, var(--sun-glow) 0 52%, var(--sun-edge) 66%, transparent 72%);
  pointer-events: none;
}
/* On a phone the sun would sit behind the headline. Send it further off the
   corner, where it reads as weather rather than as a stain on the words. */
@media (max-width: 620px) {
  .hero::before {
    top: -7rem; right: -7rem;
    width: 15rem;
  }
}
.hero .inner { max-width: 1080px; margin: 0 auto; padding-inline: var(--gutter); }
.hero__brand { display: flex; align-items: center; gap: 0.85rem; margin-bottom: clamp(2rem, 6vw, 4rem); }
/* The mark carries its own coral sky, which disappears against the coral
   hero. A cream edge frames it the way a store listing does. */
.hero__brand img {
  width: 54px; height: 54px;
  border-radius: 15px;
  display: block;
  border: 3px solid var(--cream);
  box-shadow: 0 5px 14px rgba(43, 45, 66, 0.24);
}
.hero__brand span { font-family: var(--display); font-weight: 600; font-size: 1.35rem; }
.hero h1 { margin-bottom: 0.28em; }
.hero__lede {
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  font-weight: 600;
  max-width: 24ch;
  color: var(--on-coral);
}
.hero__lede b { font-weight: 800; color: var(--ink); }
.hero__lede { margin-bottom: 1.25rem; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
/* Sits immediately above the action, so the answer to "what does it cost"
   travels with the thing the reader clicks. */
.hero__soon { margin: 0; font-weight: 700; color: var(--on-coral); font-size: 1rem; }

/* ---- The lede, and the same offer as something to scan ----
   The lede is capped at 24ch and the headline runs above both, so the right
   half of the hero below the sun is empty. The QR stands there, level with the
   line that says where the app is. Bottom-aligned, so its caption and the
   availability line finish together. */
.hero__row {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: 1.5rem clamp(2rem, 5vw, 4rem);
}
/* Hidden by default and shown only to a mouse or a trackpad. A width query
   alone would keep it on a tablet, where scanning the screen in your hand is a
   dead end, and drop it from a narrow laptop window, which is the case it
   exists for. Hidden is the safe direction: the App Store words beside it are
   the route for everyone. */
.qr { display: none; margin: 0; flex: none; text-align: center; }
/* A code to scan is a small framed picture, so it takes the screenshot's
   vocabulary: white behind the ink, a 4px ink outline, and the screenshot
   lift. Nothing here is a button, so nothing gets a pressed edge. */
.qr img {
  display: block;
  width: 132px; height: 132px;
  padding: 10px;
  background: var(--white);
  border-radius: 18px;
  border: 4px solid var(--ink);
  box-shadow: 0 14px 30px rgba(43, 45, 66, 0.22);
}
/* Gray is for cream fields only; on coral the caption takes the field's own
   dark tint, the same one the lede and the availability line take. */
.qr figcaption {
  font-size: 0.95rem; font-weight: 700; margin-top: 0.6rem;
  color: var(--on-coral);
}
@media (min-width: 860px) and (hover: hover) and (pointer: fine) {
  .qr { display: block; }
}

/* The path begins in the hero and runs off the bottom of the screen. */
.hero__path {
  position: relative;
  height: clamp(7.5rem, 15vw, 10.5rem);
  margin-top: clamp(1.25rem, 3.5vw, 2.25rem);
  --stone-x: calc(max(var(--gutter), (100% - var(--col)) * 0.5) + 0.6rem);
}
/* The trail arrives from the right and lands on stone one. */
.hero__trail {
  position: absolute;
  left: var(--stone-x); right: 0;
  top: 30%; bottom: 0;
  border-top: 6px solid rgba(43, 45, 66, 0.24);
  border-left: 6px solid rgba(43, 45, 66, 0.24);
  border-top-left-radius: 4rem;
}
.hero__stone {
  position: absolute;
  border-radius: 50%;
  background: var(--cream);
  border: 5px solid var(--ink);
  width: 22px; height: 22px;
  margin: -11px 0 0 -11px;
}
.hero__stone--far { left: 92%; top: 30%; }
.hero__stone--mid { left: 68%; top: 30%; }
/* Stone one is lit, and the primary action stands on it. */
.hero__stone--one {
  left: var(--stone-x);
  bottom: 0;
  width: 42px; height: 42px;
  margin: 0 0 -21px -21px;
  border-width: 6px;
  background: var(--f4);
}
.hero__cta { position: absolute; left: var(--stone-x); bottom: 0; transform: translate(-16px, -42%); }
@media (max-width: 620px) {
  .hero__cta { transform: translate(-13px, -42%); }
  .hero__stone--far { left: 88%; }
  .hero__stone--mid { left: 62%; }
}

/* ---- Milestones along the path ---- */
.milestone { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 760px) {
  .milestone { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); }
  .milestone--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 250px); }
  .milestone--flip > .milestone__shot { order: 2; }
}
.milestone__shot {
  margin: 0;
  justify-self: center;
  max-width: 250px;
  width: 100%;
}
.milestone__shot img {
  width: 100%; height: auto; display: block;
  border-radius: 26px;
  border: 4px solid var(--ink);
  box-shadow: 0 14px 30px rgba(43, 45, 66, 0.22);
  background: var(--cream);
}
.milestone__shot figcaption {
  font-size: 0.95rem; font-weight: 700; margin-top: 0.7rem; text-align: center;
  color: var(--ink-soft);
}
.band--f2 figcaption, .band--f5 figcaption, .band--f8 figcaption { color: var(--on-warm); }
.band--ink figcaption { color: var(--on-grape); }
.milestone__maths {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  background: var(--white);
  border-radius: 18px;
  padding: 0.6em 1em;
  display: inline-block;
  margin-top: 0.4rem;
}

/* A tighter run of milestones, staggered like stepping stones. */
.steps { display: grid; gap: clamp(2.5rem, 6vw, 4rem); }

/* ---- The split demonstration: the page does the maths ---- */
.split { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); }
.split__shot { margin: 0; justify-self: start; max-width: 230px; width: 100%; }
.split__shot img {
  width: 100%; height: auto; display: block;
  border-radius: 24px; border: 4px solid var(--ink);
  box-shadow: 0 14px 30px rgba(43, 45, 66, 0.24);
}
.split__shot figcaption { font-size: .95rem; font-weight: 700; margin-top: .6rem; color: var(--on-warm); }
@media (min-width: 860px) {
  .split { grid-template-columns: 230px minmax(0, 1fr); align-items: start; }
  .split__shot { grid-row: span 2; }
}
.split__stage {
  background: var(--white);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: 0 14px 34px rgba(43, 45, 66, 0.16);
}
.split__row { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(0.75rem, 3vw, 1.75rem); }
.tray { display: grid; gap: 4px; }
/* Each tile is the drawn object itself. An SVG with no width attribute falls
   back to 300 x 150 and drags the grid track with it, so the size is stated
   here rather than inferred. */
.tray .obj {
  width: clamp(20px, 4.6vw, 30px);
  height: clamp(20px, 4.6vw, 30px);
  display: block;
  padding: 13%;
  background: rgba(107, 203, 119, 0.24);
  border-radius: 7px;
}
.tray--rest .obj { background: rgba(255, 217, 61, 0.45); }
.sign { font-family: var(--display); font-weight: 600; font-size: clamp(1.4rem, 3.4vw, 2.2rem); }
.sum {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.15rem, 2.6vw, 1.7rem);
  margin-top: 1rem;
}

/* ---- Promises: three statements, deliberately different weights ---- */
.promises { display: grid; gap: clamp(2rem, 5vw, 3rem); }
.promise__head {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  line-height: 1.08; margin: 0 0 0.4em;
}
.promise--lead .promise__head { font-size: clamp(2rem, 6vw, 3.6rem); }
@media (min-width: 860px) {
  .promises { grid-template-columns: 1.35fr 1fr; align-items: start; }
  .promise--lead { grid-column: 1 / -1; max-width: 34ch; }
}
.promise p { max-width: 46ch; }

/* ---- Languages ---- */
.langs { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.langs li {
  font-family: var(--display); font-weight: 600;
  background: var(--white); color: var(--ink);
  border-radius: 999px; padding: 0.4em 1em; font-size: 1rem;
}

/* ---- Close ---- */
.close { text-align: left; }
.close__shot { margin: 0 0 clamp(1.5rem, 4vw, 2.25rem); max-width: 240px; }
.close__shot img {
  width: 100%; height: auto; display: block;
  border-radius: 24px; border: 4px solid var(--ink);
  box-shadow: 0 14px 30px rgba(43, 45, 66, 0.2);
}
.close__shot figcaption { font-size: .95rem; font-weight: 700; margin-top: .6rem; color: var(--ink-soft); }
@media (min-width: 860px) {
  .close .inner { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
  .close__shot { margin-bottom: 0; }
  .close h2 { margin-top: 0; }
}
/* One cell for the picture, one for every word. Without the wrapper the grid
   deals the heading, the copy and the button into alternate columns. */
.close__words > :first-child { margin-top: 0; }
.close h2 { max-width: 18ch; }

/* ---- Footer ---- */
.site-foot {
  background: var(--ink); color: var(--on-ink-soft);
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  font-size: 1rem;
}
.site-foot .inner { max-width: 1080px; margin: 0 auto; padding-inline: var(--gutter); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin-bottom: 1.25rem; }
.site-foot a { color: var(--cream); font-weight: 700; }
.site-foot p { max-width: 60ch; margin-bottom: 0.4rem; }

/* ---- Legal pages ---- */
.legal { background-color: var(--cream); }
/* The legal pages are the same world, not a plain document shell. */
.legal__head, .legal__body {
  background-image:
    var(--clouds, none),
    var(--hills, none),
    radial-gradient(var(--grain, transparent) 1.4px, transparent 1.5px);
  background-repeat: no-repeat, repeat-x, repeat;
  background-position: center top, center bottom, 0 0;
  background-size: max(1000px, 100%) auto, max(900px, 100%) 170px, 30px 30px;
}
.legal__body { --grain: rgba(43, 45, 66, .055); }
/* Tangerine, the 3 family. It replaced Ocean darkened in September 2026: the
   one cold field on the site did not read as the same world as the hero. It
   is a warm colour band now, so it follows their grammar exactly — ink
   inherited for the title, --on-warm for the secondary line, white lattice in
   the saturated 0.13-0.17 range, and the light clouds rather than the dim
   ones a dark band needs. */
.legal__head { background-color: var(--f3); --grain: rgba(255, 255, 255, .15); --hills: var(--hills-light); --clouds: var(--clouds-light); padding: clamp(3rem, 7vw, 5rem) 0 clamp(2rem, 5vw, 3rem); }
.legal__head .inner, .legal__body .inner { max-width: 760px; margin: 0 auto; padding-inline: var(--gutter); }
.legal__head a { color: var(--ink); font-weight: 700; }
.legal__head h1 { font-size: clamp(2.4rem, 7vw, 4rem); margin-bottom: 0.2em; }
.legal__head p { color: var(--on-warm); margin: 0; font-weight: 700; }
.legal__body { padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(4rem, 9vw, 6rem); }
.legal__body h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); margin-top: 2.2em; }
.legal__body h2:first-of-type { margin-top: 0; }
.legal__body ul { max-width: var(--measure); padding-left: 1.2rem; }
.legal__body li { margin-bottom: 0.5em; }
.legal__body strong { font-weight: 800; }
.summary {
  background: var(--white); border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  box-shadow: 0 12px 28px rgba(43, 45, 66, 0.12);
  margin-bottom: 2.5rem;
}
.summary p { font-size: 1.15rem; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}