/* GrocerAid site styles, shared by every page. */

/* Layout: pantry shelves. Full-width bands stacked like shelves, content on one
   left-aligned rail; the hero splits the copy from the camera photo, with a
   pantry log tucked under it. */
:root {
  --paper: #F5F7F1;       /* page: off-white leaning sage */
  --shelf: #E9EDE2;       /* alternate band, insets */
  --card: #FFFFFF;
  --ink: #1B2318;         /* text */
  --ink-2: #4D5848;       /* secondary text */
  --rule: #D3D9CA;        /* hairlines */
  --olive: #2E5530;       /* actions, links, "in" */
  --olive-hover: #24452A;
  --on-olive: #F5F7F1;
  --mustard: #E2A42B;     /* accent, "out" */
  --on-mustard: #1B2318;
  --band: #1E3521;        /* the privacy band */
  --on-band: #EEF2E8;
  --on-band-2: #B5C3AE;
  --band-rule: #36523B;
  --tape: #1B2318;        /* label-maker tape */
  --on-tape: #F5F7F1;
  --fill: #F6DFA8;        /* placeholders still to fill in */
  --scene-wall: #E3E8DA;  /* the drawing in the photo slots */
  --scene-inside: #CBD4BF;
  --scene-frame: #FBFCF8;
  --scene-soft: #9DB08F;
  --drop: rgba(27, 35, 24, .16);
  --shadow: 0 1px 2px rgba(27, 35, 24, .06), 0 12px 32px rgba(27, 35, 24, .09);
  --focus: #2E5530;

  --font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --step--1: .9rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: clamp(1.4rem, 1.2rem + .8vw, 1.75rem);
  --step-3: clamp(2rem, 1.45rem + 2.2vw, 3rem);
  --step-4: clamp(2.5rem, 1.5rem + 4.6vw, 4.75rem);

  --rail: 74rem;
  --radius: 16px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #10150F;
    --shelf: #161D14;
    --card: #1B2319;
    --ink: #E7EDE1;
    --ink-2: #A5B19E;
    --rule: #2C3729;
    --olive: #8DC286;
    --olive-hover: #A6D39F;
    --on-olive: #10150F;
    --mustard: #EBB245;
    --on-mustard: #10150F;
    --band: #0B100A;
    --on-band: #E7EDE1;
    --on-band-2: #A5B19E;
    --band-rule: #26331F;
    --tape: #EBB245;
    --on-tape: #10150F;
    --fill: #5A4515;
    --scene-wall: #182016;
    --scene-inside: #0C110B;
    --scene-frame: #2A3527;
    --scene-soft: #4E6447;
    --drop: rgba(0, 0, 0, .5);
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 32px rgba(0, 0, 0, .4);
    --focus: #EBB245;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #10150F;
  --shelf: #161D14;
  --card: #1B2319;
  --ink: #E7EDE1;
  --ink-2: #A5B19E;
  --rule: #2C3729;
  --olive: #8DC286;
  --olive-hover: #A6D39F;
  --on-olive: #10150F;
  --mustard: #EBB245;
  --on-mustard: #10150F;
  --band: #0B100A;
  --on-band: #E7EDE1;
  --on-band-2: #A5B19E;
  --band-rule: #26331F;
  --tape: #EBB245;
  --on-tape: #10150F;
  --fill: #5A4515;
  --scene-wall: #182016;
  --scene-inside: #0C110B;
  --scene-frame: #2A3527;
  --scene-soft: #4E6447;
  --drop: rgba(0, 0, 0, .5);
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 32px rgba(0, 0, 0, .4);
  --focus: #EBB245;
  color-scheme: dark;
}

/* Base */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Paints the strip above the sticky header on phones with a notch. */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 30;
  background: var(--paper);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--olive); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--olive-hover); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  line-height: 1.08;
  letter-spacing: -.02em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); font-weight: 760; letter-spacing: -.035em; }
h2 { font-size: var(--step-3); font-weight: 700; }
h3 { font-size: var(--step-1); font-weight: 650; letter-spacing: -.01em; line-height: 1.25; }
p { margin: 0; }

.wrap {
  width: 100%;
  max-width: var(--rail);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 720px) {
  .wrap {
    padding-left: max(32px, env(safe-area-inset-left, 0px));
    padding-right: max(32px, env(safe-area-inset-right, 0px));
  }
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 50;
  padding: .6rem 1rem;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
}
.skip:focus { top: calc(1rem + env(safe-area-inset-top, 0px)); color: var(--paper); }

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

/* Label-maker tape: the eyebrow on every section. */
.tape {
  display: inline-block;
  padding: .52em .8em .46em;
  border-radius: 3px;
  background: var(--tape);
  color: var(--on-tape);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  transform: rotate(-1.2deg);
  box-shadow: 0 1px 0 var(--drop);
}
.tape--mustard { background: var(--mustard); color: var(--on-mustard); }
.tape--light { background: var(--on-band); color: var(--band); }

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 3rem;
  padding: 0 1.4rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--olive);
  color: var(--on-olive);
  font: 600 1rem/1 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, transform .15s;
}
.btn:hover { background: var(--olive-hover); color: var(--on-olive); }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--ghost:hover { background: var(--card); color: var(--ink); }
.btn--small { min-height: 2.4rem; padding: 0 1rem; font-size: .95rem; }
.btn--wide { width: 100%; }

/* Header */

.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--rule);
}
.bar { display: flex; align-items: center; gap: 1.5rem; min-height: 4rem; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 760;
  letter-spacing: -.025em;
  text-decoration: none;
}
.brand:hover { color: var(--ink); }
.mark { width: 30px; height: 30px; flex: none; }
.mark .jar { fill: var(--olive); }
.mark .lid { fill: var(--mustard); }
.mark .lens { fill: var(--paper); }
.mark .pupil { fill: var(--olive); }
.nav { display: flex; align-items: center; gap: 1.5rem; margin-left: auto; }
.nav a { color: var(--ink-2); font-size: .95rem; text-decoration: none; }
.nav a:hover { color: var(--ink); }
@media (max-width: 600px) {
  .bar { gap: 1rem; }
  .nav { gap: 1rem; }
  .nav__wide { display: none; }
}

/* Hero */

.hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(4rem, 9vw, 7rem); overflow-x: clip; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.4rem; }
.lead { max-width: 34rem; color: var(--ink-2); font-size: var(--step-1); line-height: 1.5; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  margin: .4rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .04em;
}
.facts li { display: inline-flex; align-items: center; gap: .5rem; }
.facts li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mustard); }

.hero__media { position: relative; padding-bottom: 2.5rem; }

/* The camera photo slot: shows a drawing of GrocerAid at a pantry door until
   assets/groceraid.jpg exists. */
.shot {
  position: relative;
  max-width: 100%;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 24px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot--square { aspect-ratio: 1 / 1; }
.shot__empty { display: none; }
.shot.is-empty img { display: none; }
.shot.is-empty .shot__empty { position: absolute; inset: 0; display: block; }
.scene { display: block; width: 100%; height: 100%; }
.sc-wall { fill: var(--scene-wall); }
.sc-inside { fill: var(--scene-inside); }
.sc-frame { fill: var(--scene-frame); }
.sc-olive, .scene .jar, .scene .pupil { fill: var(--olive); }
.sc-mustard, .scene .lid { fill: var(--mustard); }
.sc-ink, .sc-hand { fill: var(--ink-2); }
.sc-soft { fill: var(--scene-soft); }
.scene .lens { fill: var(--paper); }
.sc-view { fill: var(--olive); opacity: .12; }
.sc-line { stroke: var(--mustard); stroke-width: 3; stroke-dasharray: 9 7; }
.hero .shot { width: min(100%, 30rem); margin-left: auto; }

/* The pantry log: a receipt with a torn edge. */
.log {
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(19.5rem, 80%);
  padding: 1rem 1.1rem .9rem;
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: .72rem;
  line-height: 1.5;
  transform: rotate(-2.2deg);
  filter: drop-shadow(0 12px 18px var(--drop));
}
.log::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 10px;
  background:
    linear-gradient(135deg, var(--card) 5px, transparent 0) 0 0 / 10px 10px repeat-x,
    linear-gradient(-135deg, var(--card) 5px, transparent 0) 0 0 / 10px 10px repeat-x;
}
.log__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .55rem;
  border-bottom: 1px dashed var(--rule);
  color: var(--ink-2);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.log__day { margin-top: .6rem; font-weight: 500; }
.log__rows { display: grid; gap: .3rem; margin: .4rem 0 0; padding: 0; list-style: none; }
.log__rows li { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; align-items: center; gap: .5rem; }
.log__rows time { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.log__rows span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log__rows b {
  padding: .22em .5em;
  border-radius: 3px;
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.log__rows .in { background: var(--olive); color: var(--on-olive); }
.log__rows .out { background: var(--mustard); color: var(--on-mustard); }
.log__rows .ask { border: 1px dashed var(--ink-2); color: var(--ink); }
.log__foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .7rem;
  padding-top: .55rem;
  border-top: 1px dashed var(--rule);
  color: var(--ink-2);
}

@media (max-width: 880px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__media { padding-bottom: 0; }
  .hero .shot { margin-inline: auto; }
  .log { position: relative; width: min(19.5rem, 88%); margin: -4rem auto 0; }
}

/* Sections */

.band { padding-block: clamp(4rem, 9vw, 7rem); }
.band--shelf { background: var(--shelf); }
.band--dark { background: var(--band); color: var(--on-band); }
.section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

/* How it works */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.step { display: flex; flex-direction: column; gap: .6rem; padding-top: 1.1rem; border-top: 2px solid var(--ink); }
.step__n { color: var(--ink-2); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.step p { color: var(--ink-2); }
@media (max-width: 760px) { .steps { grid-template-columns: minmax(0, 1fr); } }

.reach {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
}
.reach__text { display: flex; flex-direction: column; gap: .75rem; }
.reach__text p { color: var(--ink-2); }
.reach__rows { display: grid; gap: 1.25rem; }
.reach__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: center; gap: .6rem; margin: 0; }
.frame {
  display: grid;
  justify-items: center;
  gap: .4rem;
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
}
.frame svg { width: 100%; max-width: 8.5rem; height: auto; }
.f-bg { fill: var(--paper); stroke: var(--rule); stroke-width: 2; }
.f-shelves { fill: none; stroke: var(--rule); stroke-width: 3; stroke-linecap: round; }
.f-line { stroke: var(--mustard); stroke-width: 2.5; stroke-dasharray: 5 4; }
.f-hand { fill: var(--ink-2); }
.f-item { fill: var(--olive); }
.verdict {
  padding: .45em .7em;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.verdict--in { background: var(--olive); color: var(--on-olive); }
.verdict--out { background: var(--mustard); color: var(--on-mustard); }
@media (max-width: 880px) { .reach { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) {
  .reach__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .verdict { grid-column: 1 / -1; justify-self: start; }
}

/* What it does */

.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
}
.feature { display: flex; flex-direction: column; gap: .55rem; }
.feature svg { width: 28px; height: 28px; margin-bottom: .3rem; color: var(--olive); }
.feature p { color: var(--ink-2); }
@media (max-width: 880px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .features { grid-template-columns: minmax(0, 1fr); } }

.soon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem 1rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: 1.1rem 1.25rem;
  border: 1px dashed var(--ink-2);
  border-radius: 12px;
}

/* Privacy */

.band--dark .lead { color: var(--on-band-2); }
.band--dark a { color: var(--on-band); }
.keeps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 3rem; margin: 0; }
.keep { display: flex; flex-direction: column; gap: .5rem; padding-top: 1.1rem; border-top: 1px solid var(--band-rule); }
.keep dt { font-family: var(--font-display); font-size: var(--step-2); font-weight: 650; line-height: 1.15; letter-spacing: -.015em; }
.keep__label {
  display: block;
  margin-bottom: .55rem;
  color: var(--mustard);
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.keep dd { margin: 0; color: var(--on-band-2); }
.privacy__more { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
@media (max-width: 720px) { .keeps { grid-template-columns: minmax(0, 1fr); } }

/* Buy */

.buy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.buy__body { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
.price { font-family: var(--font-display); font-size: var(--step-3); font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.price small { margin-left: .3rem; color: var(--ink-2); font-family: var(--font-mono); font-size: .8rem; font-weight: 400; letter-spacing: .08em; }
.ticks { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.ticks li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .3rem; }
.ticks li::before {
  content: "";
  width: .9rem;
  height: .5rem;
  margin-top: .45rem;
  border-left: 2.5px solid var(--olive);
  border-bottom: 2.5px solid var(--olive);
  transform: rotate(-45deg);
}
.needs, .buy__note { color: var(--ink-2); font-size: var(--step--1); }
.policies { color: var(--ink-2); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .03em; line-height: 1.8; }
@media (max-width: 820px) { .buy { grid-template-columns: minmax(0, 1fr); } }

/* Support */

.help { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.help__card {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.5rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
}
.help__card p, .help__card li { color: var(--ink-2); }
.help__card ol { display: grid; gap: .5rem; margin: 0; padding-left: 1.2rem; }
.path {
  padding: .05em .35em;
  border-radius: 4px;
  background: var(--shelf);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: .8em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.help__card .path { background: var(--paper); }
@media (max-width: 880px) { .help { grid-template-columns: minmax(0, 1fr); } }

.faq { max-width: 50rem; margin-top: clamp(3rem, 6vw, 4rem); }
.faq__title { margin-bottom: 1rem; font-size: var(--step-2); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq details:first-of-type { border-top: 1px solid var(--rule); }
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  font-size: 1.05rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--olive); font-family: var(--font-mono); font-weight: 400; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { max-width: 44rem; padding-bottom: 1.2rem; color: var(--ink-2); }

.contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-top: clamp(3rem, 6vw, 4rem);
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
}
.contact__text { display: grid; gap: .4rem; min-width: 0; max-width: 34rem; }
.contact__text p { color: var(--ink-2); }
.contact__email { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; min-width: 0; }
.contact__email a { color: var(--ink); font-family: var(--font-mono); font-size: .92rem; overflow-wrap: anywhere; }

/* Footer */

.site-footer { padding-block: 3rem 2rem; border-top: 1px solid var(--rule); font-size: .95rem; }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 2rem; }
.footer__brand { display: grid; align-content: start; gap: .8rem; }
.footer__brand p { max-width: 22rem; color: var(--ink-2); }
.site-footer nav { display: grid; align-content: start; gap: .5rem; }
.site-footer h2 {
  margin-bottom: .3rem;
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.site-footer nav a { color: var(--ink); text-decoration: none; }
.site-footer nav a:hover { text-decoration: underline; }
.footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 2rem;
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: .85rem;
}
@media (max-width: 760px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}

/* Policy pages */

.legal { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(4rem, 8vw, 6rem); }
.legal .wrap { max-width: 52rem; }
.legal h1 { margin-top: 1.1rem; font-size: var(--step-3); }
.legal__meta { margin-top: .8rem; color: var(--ink-2); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; }
.legal .lead { margin-top: 1.25rem; max-width: none; }
.toc { margin-top: 2rem; padding: 1.1rem 1.4rem; border-radius: 12px; background: var(--shelf); }
.toc h2 { margin-bottom: .5rem; color: var(--ink-2); font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.toc ol { margin: 0; padding-left: 1.2rem; columns: 2; column-gap: 2.5rem; }
.toc li { padding-block: .1rem; break-inside: avoid; }
@media (max-width: 560px) { .toc ol { columns: 1; } }
.legal section { display: grid; gap: .9rem; margin-top: 2.75rem; }
.legal section h2 { font-size: var(--step-2); }
.legal section h3 { margin-top: .4rem; font-size: 1.05rem; }
.legal ul { display: grid; gap: .5rem; margin: 0; padding-left: 1.2rem; }
.table-wrap { overflow-x: auto; }
.legal table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.legal th, .legal td { padding: .75rem .75rem .75rem 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.legal th { width: 42%; font-weight: 600; }
.legal thead th { color: var(--ink-2); font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
/* Open-source credits: three short columns, and one long list of packages */
.credits th { width: 40%; }
.credits td:last-child { width: 24%; }
.credits__all summary { cursor: pointer; font-weight: 600; }
.credits__scroll { max-height: 34rem; margin-top: .75rem; overflow: auto; }
.credits--all { font-size: .8rem; }
.credits--all th { width: auto; }
.credits--all th:nth-child(1) { width: 32%; }
.credits--all th:nth-child(2) { width: 11%; }
.credits--all th:nth-child(3) { width: 15%; }
.credits--all td { padding-block: .45rem; overflow-wrap: anywhere; }
.credits--all td:last-child { width: auto; }
@media (max-width: 560px) { .credits td, .credits th { font-size: .85rem; } }
mark.fill { padding: 0 .25em; border-radius: 3px; background: var(--fill); color: var(--ink); }