/* Show-Off Math! landing page (DRAFT).
   The page is built out of the book's own pieces: graph paper, taped pages, outlined rule cards, the black MATH! banner,
   the SHOW OFF burst. Boldness is spent in one place: the demo GIFs in their hard-shadow frames. Everything else stays quiet. */

:root {
  --ink: #151515;
  --paper: #FFFDF8;
  --grid: #EEE7D4;
  --accent: #FF5A36;        /* buttons, the digit being moved */
  --accent-ink: #B22F0D;    /* the accent as small text: 5.9:1 on paper */
  --accent-soft: #FFE3DA;
  --sun: #FFC93C;           /* marker yellow: pills, the steps band, the price burst */
  --sun-soft: #FFEFB8;
  --tint: #F4F0E6;          /* rule cards */
  --gray: #5D584D;          /* secondary text: 6.7:1 on paper */
  --line: 3px;
  --r-s: 14px;
  --r-m: 22px;
  --r-l: 32px;
  --f-display: "Rubik", "Arial Black", system-ui, sans-serif;
  --f-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1120px;
  --gif: 420px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background-color: var(--paper);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 20px 20px;
  color: var(--ink);
  font: 600 1.125rem/1.55 var(--f-body);
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1rem; }
p, li, dd, figcaption { text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: .6rem 1rem; z-index: 10; }
.skip:focus { left: 0; }

h1, h2, h3 { font-family: var(--f-display); font-weight: 900; line-height: 1.04; letter-spacing: -.012em; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(1.85rem, 4.6vw, 2.9rem); }
h3 { font-size: clamp(1.45rem, 3vw, 1.95rem); }
section { padding-block: clamp(3rem, 7vw, 5.25rem); }
.lede { font-size: 1.25rem; line-height: 1.5; max-width: 40rem; margin-top: 1rem; }
.small { font-size: .95rem; color: var(--gray); }

/* ---------- pieces ---------- */
.wordmark { display: inline-flex; align-items: center; gap: .45rem; font: 900 1.2rem/1 var(--f-display); text-decoration: none; }
.wordmark b { background: var(--ink); color: var(--paper); padding: .2em .5em .22em; border-radius: .38em; transform: rotate(-3deg); display: inline-block; }

.banner { display: inline-block; background: var(--ink); color: var(--paper); padding: .06em .3em .1em; border-radius: .2em; transform: rotate(-1.4deg); }

.btn {
  display: inline-block; background: var(--accent); color: var(--ink); text-decoration: none; text-align: center;
  font: 900 1.2rem/1.1 var(--f-display); padding: 1.05rem 1.7rem; border: var(--line) solid var(--ink); border-radius: 999px;
  box-shadow: 5px 5px 0 var(--ink); transition: transform .08s ease, box-shadow .08s ease;
}
.btn:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink); }
.btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--ink); }
.link { display: inline-block; padding: .75rem .25rem; font-weight: 800; text-underline-offset: .25em; text-decoration-thickness: 2px; }

.chip { display: inline-block; background: var(--sun); border: var(--line) solid var(--ink); border-radius: 999px; padding: .2em .75em; font: 800 .8rem/1.2 var(--f-display); letter-spacing: .05em; text-transform: uppercase; vertical-align: middle; }


/* a demo in its frame: the bold thing on the page */
.frame { margin: 0; border: var(--line) solid var(--ink); border-radius: var(--r-m); box-shadow: 8px 8px 0 var(--ink); background: var(--paper); overflow: hidden; aspect-ratio: 4 / 5; }
.frame img { width: 100%; height: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* the demo player (player.js): the video, play / pause and the speed on its header, and a bar under it with the loop's
   parts (tap one to jump there) and start over. The part being played is marker yellow. */
.player { position: relative; cursor: pointer; }
.player video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the current frame, held over the video while it switches to another speed's file (no flash of the cover image) */
.player-still { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.player-still[hidden] { display: none; }
/* the header controls ride in the TRICK chip's row (the chip's center is 4.8% down the frame; it ends 27% across), right
   of the chip and above the title, which reaches 81% across on FIVE-SQUARED MAGIC. In percentages of the frame, so they
   stay in that row at any width; test_layout.py checks it. Vince, 2026-10-27: the big centered play button covered the
   problem. Each button is a 40 px tap target; the pill drawn inside is smaller so it fits the row. */
.player-top { --pill: 1.8rem; position: absolute; top: calc(4.8% - 1.25rem); right: 3.5%; display: flex; gap: .2rem; }
/* phones under 400 px: the frame is 320 to 350 wide and the chip's row only about 34 px tall, so smaller pills, a little
   higher, keep clear air above a long title */
@media (max-width: 400px) { .player-top { --pill: 1.55rem; top: calc(4.8% - 1.4rem); } }
.player-pill { display: grid; place-items: center; height: 2.5rem; min-width: 2.5rem; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.player-pill > span { display: grid; place-items: center; height: var(--pill); min-width: var(--pill); padding: 0 .55rem; border: 2.5px solid var(--ink); border-radius: 999px; background: var(--paper); box-shadow: 2px 2px 0 var(--ink); font: 800 calc(var(--pill) * .45)/1 var(--f-display); white-space: nowrap; }
.player-toggle > span { padding: 0; }
.player-toggle svg { width: calc(var(--pill) * .55); height: calc(var(--pill) * .55); }
.player-toggle.is-asking > span { background: var(--accent); }        /* paused, or waiting for a tap: press me */
.player-speed > span { min-width: calc(var(--pill) * 2.1); }           /* room for 0.25x, so the pill doesn't jump */
.player-speed:not([data-rate="1"]) > span { background: var(--sun); }  /* slowed down: marker yellow, so it shows */
.player-pill:active > span { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.player-pill:focus-visible { outline: none; }
.player-pill:focus-visible > span { outline: 3px solid var(--ink); outline-offset: 2px; }
.player-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "parts again" "now ."; align-items: center; column-gap: .6rem; margin-top: 1.2rem; }
.player-btn { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: var(--line) solid var(--ink); border-radius: 50%; background: var(--paper); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); cursor: pointer; }
.player-btn svg { width: 1.35rem; height: 1.35rem; }
.player-btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.player-again { grid-area: again; }
.player-parts { grid-area: parts; display: flex; gap: 5px; list-style: none; margin: 0; padding: 0; }
.player-parts li { flex: 1 1 0; min-width: 0; }
.player-part { display: flex; align-items: center; width: 100%; height: 2.75rem; padding: 0; border: 0; background: none; cursor: pointer; }
.player-track { display: block; width: 100%; height: .8rem; overflow: hidden; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); }
.player-fill { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left center; }
.player-part[aria-current] .player-track { background: var(--sun); }
.player-now { grid-area: now; margin: 0; font: 800 .92rem/1.3 var(--f-display); }
.player-now span { margin-left: .3rem; color: var(--gray); font: 700 .88rem/1.3 var(--f-body); }

/* the book's rule card: WORKS FOR / WATCH OUT in its own words */
.rules { display: grid; gap: .6rem; margin: 1.25rem 0 0; }
.rule { display: grid; grid-template-columns: 5.4rem 1fr; gap: .15rem .8rem; align-items: baseline; background: var(--tint); border: var(--line) solid var(--ink); border-radius: var(--r-s); padding: .65rem .9rem; margin: 0; font-size: 1rem; line-height: 1.4; }
.rule dt { font: 800 .72rem/1.2 var(--f-display); letter-spacing: .07em; text-transform: uppercase; }
.rule dd { margin: 0; font-weight: 700; }
.rule-watch { background: var(--accent-soft); }
.rule-watch dt { color: var(--accent-ink); }
@media (max-width: 420px) { .rule { grid-template-columns: 1fr; } }

/* a slot the page still needs filled in (support email, checkout, legal links). Never ship these. */
.draft { position: relative; border: 3px dashed var(--accent-ink); background: #FFF3EE; border-radius: var(--r-m); padding: 1.6rem 1.3rem 1.3rem; }
.draft::before { content: "DRAFT"; position: absolute; top: -.85rem; left: 1rem; background: var(--accent); color: var(--ink); font: 900 .78rem/1 var(--f-display); letter-spacing: .08em; padding: .35em .75em; border: 2px solid var(--ink); border-radius: 999px; }
.fill { background: #FFD9CC; padding: 0 .25em; border-radius: .25em; font-weight: 800; }

/* ---------- hero ---------- */
.hero { padding-block: 1.1rem 3.25rem; }
/* the brand lockup: a bigger wordmark, and the brand line under it as a swipe of the book's marker yellow, tilted like
   the MATH! badge (no hard shadow: on this page that means "button") */
.hero-top { display: flex; flex-direction: column; align-items: flex-start; gap: .8rem; margin-bottom: 2rem; }
.hero-top .wordmark { font-size: clamp(1.55rem, 5.5vw, 2.15rem); }
/* the house brand's credit over the product's wordmark, like a film's "presents" line, and kept small so Show-Off Math!
   stays the name you remember (Vince, 2026-10-27: Kid Who Did is the house brand, Show-Off Math! the product) */
.presents { font: 700 clamp(.95rem, 2.9vw, 1.05rem)/1.2 var(--f-body); color: var(--gray); margin-bottom: -.35rem; }
.presents b { font: 900 1.06em/1 var(--f-display); color: var(--ink); }
.tagline { display: inline-block; background: var(--sun); color: var(--ink); font: 900 clamp(1rem, 3.6vw, 1.3rem)/1.2 var(--f-display); padding: .24em .6em .28em; border-radius: .3em; transform: rotate(-1.5deg); margin-left: .15rem; }
.hero-grid { display: grid; gap: 2.6rem; align-items: center; }
.hero h1 { font-size: clamp(2.15rem, 7.6vw, 3.75rem); line-height: 1.04; }
.hero h1 .banner { margin-top: .12em; }
.hero .lede { margin-top: 1.4rem; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 1.75rem; }
.hero-visual { position: relative; width: min(100%, var(--gif)); margin: 1.8rem auto 0; }
@media (min-width: 880px) {
  .hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 3.4rem; }
  .hero-visual { margin: 1.6rem 0 0 auto; }
}

/* ---------- demos ---------- */
.demos { padding-top: clamp(2.4rem, 5vw, 3.6rem); }
.demo-list { margin-top: 1.6rem; }
.demo { display: grid; gap: 1.6rem; padding-block: 2.6rem; border-top: 2px dashed #B9AF97; }
.demo:first-child { border-top: 0; }
.demo-media { position: relative; width: min(100%, var(--gif)); margin-inline: auto; }
.demo-text h3 { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .8rem; }
.demo-what { font-size: 1.2rem; margin: .8rem 0 0; }
/* stacked (under 880 px), the video right above already shows the trick's chip, title and goal line, so the card's copy is
   kept for screen readers and search only (Vince, 2026-10-27: on a phone it read as the same heading twice) */
@media (max-width: 879.98px) {
  .demo-text h3, .demo-text .demo-what { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .demo-text .recipe-ask { margin-top: 0; }   /* now the card's first line */
}
.recipe { list-style: none; counter-reset: step; display: grid; gap: .6rem; margin-top: 1.1rem; }
/* the problem the steps work, above step 1, in the book's own words ("Let's do 11 × 43") */
.recipe-ask { margin: 1.1rem 0 0; font-size: 1.1rem; }
.recipe-ask strong { font: 900 1.3rem/1.2 var(--f-display); white-space: nowrap; }
.recipe-ask + .recipe { margin-top: .75rem; }
.recipe li { counter-increment: step; display: grid; grid-template-columns: 2rem 1fr; gap: .75rem; align-items: start; }
.recipe li::before { content: counter(step); display: grid; place-items: center; width: 2rem; height: 2rem; background: #fff; border: var(--line) solid var(--ink); border-radius: 50%; font: 900 .9rem/1 var(--f-display); margin-top: .1rem; }
@media (min-width: 880px) {
  .demo { grid-template-columns: minmax(0, var(--gif)) minmax(0, 1fr); gap: 3.4rem; align-items: center; }
  .demo:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, var(--gif)); }
  .demo:nth-child(even) .demo-media { order: 2; }
  .demo-media { margin-inline: 0; }
}

.cta-strip { background: var(--ink); color: var(--paper); border-block: var(--line) solid var(--ink); padding-block: 2rem; }
.cta-strip .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; }
.cta-strip p { margin: 0; font: 900 clamp(1.4rem, 3.4vw, 2rem)/1.15 var(--f-display); max-width: 34rem; }

/* ---------- the loop on every page ---------- */
.steps { background: var(--sun); border-block: var(--line) solid var(--ink); }
.step-grid { display: grid; gap: 1.8rem; margin-top: 2.2rem; align-items: start; }
.step { background: var(--paper); border: var(--line) solid var(--ink); border-radius: var(--r-m); overflow: hidden; }
.step img { width: 100%; border-bottom: var(--line) solid var(--ink); background: #fff; }
.step-body { padding: 1rem 1.2rem 1.35rem; }
.step-body h3 { font-size: 1.5rem; display: flex; align-items: center; gap: .65rem; }
.step-num { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; flex: none; border-radius: 50%; background: var(--ink); color: var(--paper); font: 900 1rem/1 var(--f-display); }
.step-body p { margin: .7rem 0 0; font-size: 1.05rem; }
@media (min-width: 900px) {
  .step-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .step:nth-child(1) { margin-top: 4.5rem; }
  .step:nth-child(2) { margin-top: 2.2rem; }
}

/* ---------- levels: a staircase ---------- */
.stairs { list-style: none; display: grid; gap: .8rem; margin-top: 2.4rem; }
.stair { margin-left: calc(var(--i) * 1.1rem); background: var(--paper); border: var(--line) solid var(--ink); border-radius: var(--r-s); padding: 1rem 1.1rem 1.1rem; }
.stair h3 { font-size: 1.15rem; display: flex; align-items: center; gap: .6rem; line-height: 1.1; }
.stair .step-num { width: 1.9rem; height: 1.9rem; font-size: .9rem; }
.stair p { margin: .5rem 0 .6rem; font-size: .98rem; line-height: 1.4; }
.stair ul { list-style: none; font-size: .92rem; line-height: 1.5; color: var(--gray); font-weight: 700; }
.stair-last { background: var(--ink); color: var(--paper); }
.stair-last ul { color: var(--sun); }
.stair-last .step-num { background: var(--sun); color: var(--ink); }
@media (min-width: 900px) {
  .stairs { grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; gap: 0; }
  .stair { margin-left: calc(var(--line) * -1); border-radius: 0; min-height: calc(15.5rem + var(--i) * 2.7rem); padding: 1rem .9rem 1.1rem; }
  .stair:first-child { margin-left: 0; border-radius: var(--r-s) 0 0 var(--r-s); }
  .stair-last { border-radius: 0 var(--r-s) var(--r-s) 0; }
  .stair h3 { flex-wrap: wrap; }
}

/* ---------- look inside ---------- */
.pages { display: grid; gap: 2.4rem 1.8rem; margin-top: 2.6rem; }
.page-fig { margin: 0; position: relative; }
.page-fig img { width: 100%; background: #fff; border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); }
/* tap to enlarge a book page (zoom.js): it opens wider than a phone screen, in a dialog you scroll around in */
.zoom { position: relative; display: block; cursor: zoom-in; }
.zoom::after { content: "Enlarge"; position: absolute; right: .7rem; bottom: .8rem; background: var(--ink); color: var(--paper); font: 800 .82rem/1 var(--f-display); padding: .55em .85em; border-radius: 999px; }
.zoom-box { width: min(96vw, 1100px); max-width: none; max-height: 94vh; padding: 0; border: var(--line) solid var(--ink); border-radius: var(--r-m); background: #fff; overflow: hidden; }
.zoom-box::backdrop { background: rgb(21 21 21 / .78); }
.zoom-scroll { max-height: 94vh; overflow: auto; }
.zoom-scroll img { display: block; width: max(100%, 820px); max-width: none; height: auto; }
.zoom-close { position: absolute; top: .7rem; right: .7rem; z-index: 1; width: 2.75rem; height: 2.75rem; padding: 0; border: var(--line) solid var(--ink); border-radius: 50%; background: var(--sun); color: var(--ink); font: 900 1.5rem/1 var(--f-display); cursor: pointer; box-shadow: 3px 3px 0 var(--ink); }
.page-fig::before { content: ""; position: absolute; z-index: 1; top: -.8rem; left: 50%; width: 5.2rem; height: 1.6rem; margin-left: -2.6rem; background: rgba(255, 201, 60, .82); transform: rotate(-3deg); }
.page-fig:nth-child(2)::before { transform: rotate(3deg); }
.page-fig figcaption { margin-top: 1.1rem; font-size: 1rem; line-height: 1.45; }
@media (min-width: 760px) {
  .pages { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .page-fig:nth-child(2) { margin-top: 2rem; }
}


/* ---------- grown-ups ---------- */
.grownups { background: var(--ink); color: var(--paper); border-block: var(--line) solid var(--ink); }
.grownups h2 { margin-bottom: 2rem; }
.grownups-grid { display: grid; gap: 2.4rem; }
.grownups h3 { font-size: 1.5rem; color: var(--sun); margin-bottom: 1rem; }
.grownups ul { list-style: none; display: grid; gap: 1.1rem; }
.grownups li { padding-left: 1.6rem; position: relative; }
.grownups li::before { content: ""; position: absolute; left: 0; top: .5em; width: .7rem; height: .7rem; background: var(--sun); border-radius: 50%; }
.grownups .hot { color: var(--sun); font-weight: 900; }
@media (min-width: 880px) { .grownups-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; } }

/* ---------- the offer ---------- */
.offer-grid { display: grid; gap: 2.8rem; align-items: center; }
.offer-cover { position: relative; width: min(100%, 22rem); margin-inline: auto; }
.offer-cover img { border: var(--line) solid var(--ink); box-shadow: 10px 10px 0 var(--ink); background: #fff; transform: rotate(-3deg); }
.price-burst { position: absolute; right: .1rem; top: -2.6rem; width: 7.4rem; height: 7.4rem; display: grid; place-items: center; transform: rotate(-8deg); z-index: 1; }
.price-burst svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.price-burst span { position: relative; font: 900 2.1rem/1 var(--f-display); }
.checks { list-style: none; display: grid; gap: .7rem; margin: 1.3rem 0 1.8rem; }
.checks li { position: relative; padding-left: 2rem; }
.checks li::before { content: ""; position: absolute; left: .45rem; top: .32em; width: .55rem; height: 1rem; border: solid var(--accent-ink); border-width: 0 4px 4px 0; transform: rotate(40deg); }
.buy-fine { margin: 1rem 0 0; }
.guarantee { margin-top: 2rem; background: var(--sun-soft); border: var(--line) solid var(--ink); border-radius: var(--r-m); padding: 1.2rem 1.4rem 1.3rem; }
.guarantee h3 { font-size: 1.4rem; }
.guarantee p { margin: .6rem 0 0; }
@media (min-width: 880px) { .offer-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 4rem; } .offer-cover { margin: 0 auto 0 0; } .price-burst { right: -2.2rem; } }

/* ---------- questions ---------- */
.qa-list { display: grid; gap: 2.1rem; margin-top: 2.2rem; max-width: 46rem; }
.qa { display: grid; gap: 1rem; }
.q { position: relative; justify-self: start; max-width: 100%; background: #fff; border: var(--line) solid var(--ink); border-radius: var(--r-m); padding: .65rem 1.1rem; font: 800 1.12rem/1.25 var(--f-display); margin: 0; }
.q::after { content: ""; position: absolute; left: 1.7rem; bottom: -.78rem; width: 1.1rem; height: 1.1rem; background: #fff; border-right: var(--line) solid var(--ink); border-bottom: var(--line) solid var(--ink); transform: rotate(45deg); }
.qa:nth-child(even) .q { justify-self: end; }
.qa:nth-child(even) .q::after { left: auto; right: 1.7rem; }
.qa p { margin: 0; }
@media (min-width: 880px) { .qa-list { margin-left: 0; } .qa:nth-child(even) { margin-left: 4rem; } }

/* ---------- closing and footer ---------- */
.closing { text-align: center; padding-block: clamp(3.5rem, 8vw, 6rem); }
.closing h2 { font-size: clamp(1.9rem, 5.4vw, 3.4rem); }
.closing p { max-width: 34rem; margin: 1.4rem auto 1.8rem; font-size: 1.2rem; }
.footer { background: var(--ink); color: var(--paper); padding-block: 2rem 2.4rem; font-size: .95rem; }
.footer .wrap { display: flex; flex-wrap: wrap; gap: .6rem 2rem; justify-content: space-between; align-items: center; }
.footer a { text-underline-offset: .2em; }
.footer-links { display: inline-flex; gap: 1.4rem; }
.footer-links a { display: inline-block; padding: .65rem 0; }   /* full-size tap targets */

/* Terms and Privacy (legal.js): a dialog from the footer, in the page's look, readable at a phone's width */
.legal { width: min(94vw, 46rem); max-width: none; max-height: 88vh; padding: 0; border: var(--line) solid var(--ink); border-radius: var(--r-m); background: var(--paper); color: var(--ink); box-shadow: 8px 8px 0 var(--ink); overflow: auto; }
.legal::backdrop { background: rgb(21 21 21 / .72); }
html:not(.legal-js) .legal:target:not([open]) { display: block; position: fixed; inset: 0; margin: auto; z-index: 30; }   /* no script: following the link still shows it */
.legal-bar { position: sticky; top: 0; display: flex; justify-content: flex-end; padding: .75rem .75rem 0; }
.legal-close { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: var(--line) solid var(--ink); border-radius: 50%; background: var(--sun); color: var(--ink); font: 900 1.5rem/1 var(--f-display); text-decoration: none; box-shadow: 3px 3px 0 var(--ink); }
.legal-body { padding: 0 clamp(1.2rem, 4vw, 2.4rem) 2.2rem; margin-top: -1.4rem; }
.legal h2 { font-size: clamp(1.8rem, 5vw, 2.3rem); }
.legal-date { margin: .45rem 0 1.4rem; color: var(--gray); font-size: .95rem; }
.legal h3 { font: 800 1.15rem/1.25 var(--f-display); margin: 1.6rem 0 .45rem; }
.legal p, .legal li { font-size: 1.02rem; line-height: 1.6; max-width: 62ch; }
.legal ul { list-style: disc; padding-left: 1.3rem; margin: 0 0 1rem; }
.legal li { margin: .35rem 0; }