/* Aham.Fit marketing site.

   Every token below is lifted from the shipped app (mobile/src/theme.ts) so the
   page and the product read as one thing: teal brand, near-black ink, hairline
   borders, flat surfaces, 20px cards, 14px controls. The only colour the app
   does not define is the chevron gradient, which is sampled off the launcher
   icon. No framework, no build step, system font stack. */

:root {
  /* lightColors */
  --bg: #f3f5f4;
  --surface: #ffffff;
  --text: #14201c;
  --muted: #5c6b66;
  --faint: #8a9691;
  --line: #e4e9e6;
  --brand: #0f766e;
  --brand-hover: #0b5f58;
  --brand-soft: #d7f3ee;
  --brand-ink: #115e59;
  --on-brand: #ffffff;
  --gold: #a16207;
  --gold-soft: #fef3c7;
  --carbs: #0369a1;
  --fat: #b45309;
  --water: #0284c7;
  --over: #c2410c;

  /* launcher-icon chevron */
  --mark-1: #0272de;
  --mark-2: #3e99ef;
  --mark-3: #7cbcf9;

  /* radius tokens */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  --shadow: 0 1px 2px rgba(20, 32, 28, .05), 0 12px 32px rgba(20, 32, 28, .07);
  --wrap: 1120px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* darkColors. Note --on-brand flips to near-black: the app puts white on its
   teal fill, which is fine at #0F766E but fails contrast on #2DD4BF. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg: #0e1110;
    --surface: #1a201e;
    --text: #f2f5f3;
    --muted: #9aa6a1;
    --faint: #6f7b76;
    --line: #2c3431;
    --brand: #2dd4bf;
    --brand-hover: #5eead4;
    --brand-soft: #134e4a;
    --brand-ink: #99f6e4;
    --on-brand: #06251f;
    --gold: #fbbf24;
    --gold-soft: #422006;
    --carbs: #38bdf8;
    --fat: #fbbf24;
    --water: #38bdf8;
    --over: #fb923c;
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 32px rgba(0, 0, 0, .45);
  }
}
:root[data-theme="dark"] {
  --bg: #0e1110;
  --surface: #1a201e;
  --text: #f2f5f3;
  --muted: #9aa6a1;
  --faint: #6f7b76;
  --line: #2c3431;
  --brand: #2dd4bf;
  --brand-hover: #5eead4;
  --brand-soft: #134e4a;
  --brand-ink: #99f6e4;
  --on-brand: #06251f;
  --gold: #fbbf24;
  --gold-soft: #422006;
  --carbs: #38bdf8;
  --fat: #fbbf24;
  --water: #38bdf8;
  --over: #fb923c;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 32px rgba(0, 0, 0, .45);
}

:root[data-theme="auto"] { color-scheme: light dark; }
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* Type ramp mirrors makeType() in the app: heavy weights, tight tracking. */
h1, h2, h3 { line-height: 1.12; letter-spacing: -.03em; margin: 0 0 .5em; font-weight: 800; }
h1 { font-size: clamp(2.3rem, 7vw, 4rem); }
h2 { font-size: clamp(1.6rem, 4.2vw, 2.5rem); }
h3 { font-size: 1.08rem; letter-spacing: -.01em; }
p { margin: 0 0 1em; }

a { color: var(--brand-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

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

code {
  font-family: var(--mono);
  font-size: .86em;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .1em .4em;
  word-break: break-all;
}
pre {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 14px;
  overflow-x: auto;
}
pre code { background: none; border: 0; padding: 0; }

.skip {
  position: absolute; left: -9999px;
  background: var(--text); color: var(--surface);
  padding: 10px 16px; z-index: 99; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; top: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 760px; }
.center { text-align: center; }
.micro { font-size: .875rem; color: var(--muted); }

/* ---------- header ---------- */

.site-head {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--line);
}
.head-inner { display: flex; align-items: center; gap: 16px; height: 62px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand-mark { display: block; }
.brand-name { font-weight: 800; letter-spacing: -.03em; font-size: 1.1rem; }
.brand-name .dot { color: var(--brand); }
.head-nav { margin-left: auto; display: none; gap: 24px; }
.head-nav a { color: var(--muted); text-decoration: none; font-size: .95rem; font-weight: 600; }
.head-nav a:hover { color: var(--text); }
.theme-btn {
  margin-left: auto;
  font: inherit; font-size: .82rem; font-weight: 700;
  color: var(--muted); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 7px 14px; cursor: pointer; min-width: 74px;
}
.theme-btn:hover { color: var(--text); border-color: var(--faint); }
@media (min-width: 760px) {
  .head-nav { display: flex; }
  .theme-btn { margin-left: 24px; }
}

/* ---------- buttons: 14px radius, matching the app's Button ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 700; font-size: 1rem; line-height: 1;
  padding: 16px 24px; border-radius: var(--r-md);
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: var(--on-brand); }
.btn-primary:hover { background: var(--brand-hover); }
.btn-ghost { background: var(--surface); color: var(--brand-ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--brand); }
.btn-ico { flex: none; }
.btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 14px; }
.center-row { justify-content: center; }

/* ---------- hero ---------- */

.kicker {
  font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 14px;
}
.hero { padding: 60px 0 0; }
.hero-inner { max-width: 820px; }
.hl { color: var(--brand); }
.lede { font-size: 1.16rem; color: var(--muted); max-width: 58ch; }
.section-lede { font-size: 1.06rem; color: var(--muted); max-width: 62ch; }

/* ---------- device mockups ----------
   These are the app's own UI rebuilt in HTML, not screenshots, so they stay
   sharp at any density and follow the page's light/dark theme the way the app
   follows the system one. Everything inside .screen is sized in em off a single
   font-size, so one number scales a whole phone. */

.devices {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 18px; margin: 48px 0 0;
}
.device {
  flex: none;
  width: 264px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 30px;
  box-shadow: var(--shadow);
  padding: 8px;
}
.device .screen {
  font-size: 9.4px;
  border-radius: 23px;
  background: var(--bg);
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex; flex-direction: column;
  height: 540px;
}
.device-side { display: none; width: 224px; opacity: .92; }
.device-side .screen { height: 470px; font-size: 8px; }
.device-l { transform: rotate(-3deg) translateY(10px); }
.device-r { transform: rotate(3deg) translateY(10px); }
@media (min-width: 940px) { .device-side { display: block; } }

.app { flex: 1; padding: 1.6em 1.4em; overflow: hidden; }
.app-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; }
.app-title { font-size: 2.4em; font-weight: 800; letter-spacing: -.03em; color: var(--text); }
.app-streak { text-align: right; line-height: 1.2; }
.app-streak b { display: block; font-size: 1.8em; font-weight: 800; color: var(--gold); }
.app-streak i { font-style: normal; font-size: 1.15em; color: var(--gold); }

.app-datenav {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8em; margin: 1.2em 0;
}
.app-dot {
  width: 3.4em; height: 3.4em; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--muted); font-size: 1em; font-weight: 700;
}
.app-date { font-size: 1.35em; font-weight: 700; color: var(--text); }

.app-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.5em;
  margin-bottom: 1.2em;
}
.app-kicker {
  font-size: 1.1em; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--faint);
}
.app-display {
  font-size: 4.4em; font-weight: 800; letter-spacing: -.045em;
  color: var(--brand); line-height: 1.05; margin-top: .05em;
}
.app-display span { font-size: .33em; font-weight: 700; color: var(--muted); letter-spacing: 0; }
.app-meta { font-size: 1.25em; color: var(--muted); margin-top: .3em; line-height: 1.35; }

.app-macros { display: flex; gap: 1.1em; margin-top: 1.4em; }
.app-macro { flex: 1; }
.app-macro b { display: block; font-size: 1.6em; font-weight: 800; margin-top: .25em; }
.app-macro b i { font-style: normal; font-size: .74em; font-weight: 600; color: var(--muted); }
.app-bar {
  height: .62em; border-radius: var(--r-pill);
  background: var(--brand-soft); margin-top: .7em; overflow: hidden;
}
.app-bar span { display: block; height: 100%; border-radius: var(--r-pill); }

/* Bar widths and macro colours live here rather than in style="" attributes:
   the CSP in _headers ships style-src 'self' with no 'unsafe-inline'. */
.m-p b { color: var(--brand); }
.m-c b { color: var(--carbs); }
.m-f b { color: var(--fat); }
.m-p .app-bar span { width: 52%; background: var(--brand); }
.m-c .app-bar span { width: 49%; background: var(--carbs); }
.m-f .app-bar span { width: 46%; background: var(--fat); }
.fill-water { height: 65%; background: var(--water); }

.app-btn {
  margin-top: 1.5em; border-radius: var(--r-md);
  background: var(--brand); color: var(--on-brand);
  font-size: 1.45em; font-weight: 700; text-align: center; padding: .95em 1em;
}

.app-cardhead { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.app-link { font-size: 1.25em; font-weight: 700; color: var(--brand); }

.app-row {
  display: flex; align-items: center; gap: .8em;
  padding: .85em 0; border-top: 1px solid var(--line);
}
.app-card > .app-row:first-of-type { border-top: 0; padding-top: 1em; }
.app-row span { flex: 1; font-size: 1.35em; font-weight: 700; color: var(--text); }
.app-row em { font-style: normal; font-size: 1.25em; color: var(--muted); }
.app-chev {
  width: .5em; height: .5em; flex: none;
  border-right: 1.5px solid var(--faint); border-bottom: 1.5px solid var(--faint);
  transform: rotate(-45deg); font-size: 1.6em;
}

.app-habits { display: flex; gap: .8em; margin-top: 1em; }
.app-habit {
  flex: 1; position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--bg); padding: .9em .8em; min-height: 6em;
}
.app-habit .fill { position: absolute; left: 0; right: 0; bottom: 0; opacity: .18; }
.app-habit b { display: block; position: relative; font-size: 1.5em; font-weight: 800; margin-top: .2em; }
.app-habit i { position: relative; font-style: normal; display: block; font-size: 1.2em; color: var(--muted); margin-top: .15em; }
.app-habit .app-kicker { position: relative; }

/* log + confirm screens */
.app-search {
  display: flex; align-items: center; gap: .7em;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 1em 1.1em;
  font-size: 1.35em; color: var(--faint); margin-bottom: 1.2em;
}
.app-methods { display: flex; gap: .7em; margin-bottom: 1.3em; }
.app-method {
  flex: 1; text-align: center;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); padding: 1em .4em;
  font-size: 1.2em; font-weight: 700; color: var(--brand-ink);
}
.app-method svg { display: block; margin: 0 auto .4em; }
.app-item {
  display: flex; align-items: center; gap: .8em;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 1em 1.1em; margin-bottom: .7em;
}
.app-item div { flex: 1; min-width: 0; }
.app-item strong { display: block; font-size: 1.35em; font-weight: 700; }
.app-item small { display: block; font-size: 1.15em; color: var(--muted); margin-top: .15em; }
.app-pill {
  font-size: 1.05em; font-weight: 800; color: var(--gold);
  background: var(--gold-soft); border-radius: var(--r-pill); padding: .3em .8em;
}

.app-total {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: .4em; padding-top: 1em; border-top: 1px solid var(--line);
}
.app-total b { font-size: 2em; font-weight: 800; color: var(--text); letter-spacing: -.03em; }

/* progress screen */
.app-chart { margin-top: 1.2em; }
.app-chart svg { display: block; width: 100%; height: auto; }
.app-stats { display: flex; gap: 1.1em; margin-top: 1.2em; }
.app-stat { flex: 1; }
.app-stat b { display: block; font-size: 1.8em; font-weight: 800; letter-spacing: -.03em; margin-top: .2em; }

/* tab bar */
.app-tabs {
  display: flex; align-items: center; justify-content: space-around;
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: .7em .4em 1em;
}
.app-tab {
  font-size: 1.1em; font-weight: 700; color: var(--faint);
  display: flex; flex-direction: column; align-items: center; gap: .35em;
}
.app-tab svg { display: block; }
.app-tab.is-on { color: var(--text); }
.app-tab-log .mark {
  width: 4.2em; height: 2.8em; border-radius: var(--r-md);
  background: var(--brand); display: grid; place-items: center;
}
.app-tab-log .mark .ti { width: 1.7em; height: 1.7em; color: var(--on-brand); stroke-width: 2.6; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ti {
  width: 2em; height: 2em;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.app-tab .ti { width: 1.7em; height: 1.7em; }
.app-search .ti, .app-method .ti { width: 1.6em; height: 1.6em; }
.card-ico .ti { width: 19px; height: 19px; }
.btn .ti { width: 20px; height: 20px; }

/* Diary groups sit on the page background, the way the app's food rows do. */
.app-group { margin-bottom: 1.4em; }
.app-group .app-cardhead { margin-bottom: .8em; }

/* ---------- bands & sections ---------- */

.band { border-block: 1px solid var(--line); background: var(--surface); margin-top: 64px; }
.facts { display: grid; gap: 18px; padding-block: 30px; }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.fact strong { display: block; font-size: 1.45rem; font-weight: 800; letter-spacing: -.03em; color: var(--brand); }
.fact span { display: block; font-size: .92rem; color: var(--muted); margin-top: 2px; }

.section { padding: 72px 0; }
.section-alt { background: var(--surface); border-block: 1px solid var(--line); }
.h-sub { margin-top: 44px; font-size: 1.2rem; }

.grid { display: grid; gap: 16px; margin-top: 36px; }
@media (min-width: 620px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(4, 1fr); } }

.card {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 24px;
}
.section:not(.section-alt) .card { background: var(--surface); }
.card h3 { margin-bottom: .45em; }
.card p { margin: 0; font-size: .95rem; color: var(--muted); }
.card-ico {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  background: var(--brand-soft); color: var(--brand-ink);
  display: grid; place-items: center; margin-bottom: 14px;
}

/* ---------- how it works ---------- */

.flow { display: grid; gap: 34px; margin-top: 40px; }
@media (min-width: 900px) { .flow { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.flow-step { margin: 0; }
.flow-step .device { width: 100%; max-width: 300px; margin-inline: auto; }
.flow-step .screen { height: 470px; font-size: 9px; }
.flow-cap { margin-top: 18px; }
.flow-cap b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; margin-right: 10px;
  background: var(--brand); color: var(--on-brand); font-size: .82rem; font-weight: 800;
}
.flow-cap h3 { display: inline; font-size: 1.06rem; }
.flow-cap p { margin: 8px 0 0; font-size: .95rem; color: var(--muted); }

/* ---------- plus ---------- */

.plans { display: grid; gap: 18px; margin-top: 36px; }
@media (min-width: 860px) { .plans { grid-template-columns: 1fr 1.35fr; align-items: start; } }
.plan {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 28px;
}
.plan-hl { border-color: var(--brand); box-shadow: var(--shadow); }
.plan h3 { font-size: 1.3rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.tag {
  font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--on-brand); background: var(--brand); padding: 5px 11px; border-radius: var(--r-pill);
}
.ticks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 30px; font-size: .95rem; color: var(--muted); }
.ticks li b { color: var(--text); font-weight: 700; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .3em;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--brand-soft);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12'/%3E%3C/svg%3E") center / cover;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12'/%3E%3C/svg%3E") center / cover;
}
.ticks li::after {
  content: ""; position: absolute; left: 4px; top: calc(.3em + 4px);
  width: 10px; height: 10px;
  background: var(--brand-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round' d='M5 12.6l4.6 4.6L19 7.2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round' d='M5 12.6l4.6 4.6L19 7.2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.plan-note {
  margin: 22px 0 0; font-size: .9rem; color: var(--muted);
  border-top: 1px solid var(--line); padding-top: 18px;
}

/* ---------- download ---------- */

.dl-card {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px; margin-top: 30px;
}
.dl-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.dl-name { margin: 0; font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; }
.dl-meta { margin: 3px 0 0; font-size: .9rem; color: var(--muted); }
.dl-facts { margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--line); }
.dl-facts dt { font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
.dl-facts dd { margin: 7px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.copy {
  font: inherit; font-size: .78rem; font-weight: 700;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 5px 13px; cursor: pointer;
}
.copy:hover { border-color: var(--faint); }
.warn {
  margin: 22px 0 0; padding: 15px 17px; font-size: .92rem;
  background: var(--gold-soft);
  border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--line));
  border-radius: var(--r-md); color: var(--text);
}

.steps { margin: 20px 0 0; padding-left: 22px; display: grid; gap: 12px; }
.steps li { color: var(--muted); }
.steps li b { color: var(--text); }

details { border-bottom: 1px solid var(--line); padding: 18px 0; }
details summary {
  cursor: pointer; font-weight: 700; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: "+"; font-weight: 700; font-size: 1.35rem; color: var(--brand); line-height: 1;
}
details[open] summary::after { content: "−"; }
details > *:not(summary) { margin-top: 12px; color: var(--muted); font-size: .96rem; }
.verify {
  margin-top: 28px;
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 18px;
}

.cta-end { padding: 80px 0 92px; }

/* ---------- footer ---------- */

.site-foot { border-top: 1px solid var(--line); background: var(--surface); padding: 44px 0 34px; }
.foot-inner { display: grid; gap: 24px; }
@media (min-width: 720px) { .foot-inner { grid-template-columns: 1fr auto; align-items: start; } }
.foot-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.foot-brand .micro { width: 100%; margin: 4px 0 0; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot-nav a { color: var(--muted); text-decoration: none; font-size: .92rem; font-weight: 600; }
.foot-nav a:hover { color: var(--text); text-decoration: underline; }
.foot-legal {
  margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line);
  display: grid; gap: 8px;
}
.foot-legal .micro { max-width: 74ch; margin: 0; }

/* ---------- legal pages ---------- */

.doc { padding: 60px 0 84px; }
.doc h2 { font-size: 1.3rem; margin-top: 2em; }
.doc ul { color: var(--muted); padding-left: 22px; display: grid; gap: 8px; }
.doc .stamp { font-size: .875rem; color: var(--muted); }
.doc .warn { margin-bottom: 28px; }