/* Peptide Tracker — peptide-tracker.ai
   Ported from the design's Landing Page / Privacy Policy / Terms / Contact canvases.
   The design is a fixed 1440px poster; this is the fluid version of it. Every colour,
   weight and size below comes from that source. */

:root {
  --ink: #0A0A0A;
  --ink-body: #33332F;
  --ink-mid: #4A4A45;
  --ink-muted: #6B6B65;
  --ink-faint: #9A9A94;
  --lime: #C3E839;
  --lime-bright: #D6FB3C;
  --desk: #E3E2DD;
  --paper: #FFFFFF;
  --shell: 1320px;
  --gut: 56px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font-family: 'Archivo', system-ui, -apple-system, sans-serif;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--ink); text-decoration: none; }

.shell { max-width: var(--shell); margin: 0 auto; padding-inline: var(--gut); }

/* Archivo Black is the display face throughout — the design never sets a display
   size in anything else. */
.display {
  font-family: 'Archivo Black', 'Archivo', system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: -0.038em;
  line-height: 0.88;
}

.eyebrow {
  font-size: 12.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--ink-muted);
}

/* ── Header ─────────────────────────────────────────────────────── */

.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 20px var(--gut);
  background: var(--desk);
  border-bottom: 1.5px solid rgba(10, 10, 10, 0.1);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 38px; height: 38px; border-radius: 22.37%; }
.brand span { font-family: 'Archivo Black', sans-serif; font-size: 20px; letter-spacing: -0.6px; }

.site-nav { display: flex; align-items: center; gap: 30px; }
.site-nav a { font-size: 15px; font-weight: 600; }
.site-nav a:hover { color: var(--ink-mid); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  padding: 11px 20px;
  font-size: 14.5px;
  font-weight: 700;
  white-space: nowrap;
}
.pill:hover { background: #000; color: #fff; }
.pill .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--lime); }

/* ── Hero ───────────────────────────────────────────────────────── */

/* The band is full-bleed lime; the grid inside is held to the same measure as every other
   section, so the hero lines up with the feature bands instead of running to the edges. */
.hero { background: var(--lime); padding: 80px var(--gut) 0; }
.hero-inner {
  max-width: var(--shell);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: 40px;
  align-items: end;
}
.hero-copy { display: flex; flex-direction: column; gap: 30px; padding-bottom: 80px; }
.hero h1 { margin: 0; font-size: clamp(48px, 7.2vw, 104px); line-height: 0.85; letter-spacing: -0.042em; }
.hero .lede {
  font-size: clamp(18px, 1.7vw, 23px);
  line-height: 1.35;
  font-weight: 600;
  color: rgba(10, 10, 10, 0.72);
  max-width: 600px;
  text-wrap: pretty;
}
.cta-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

.cta {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  padding: 19px 30px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.2px;
  box-shadow: 0 22px 40px -22px rgba(10, 10, 10, 0.6);
}
.cta:hover { background: #000; color: #fff; }
.cta .dot { width: 10px; height: 10px; border-radius: 999px; background: var(--lime); }
.cta.on-ink { background: var(--lime); color: var(--ink); box-shadow: none; }
.cta.on-ink:hover { background: var(--lime-bright); color: var(--ink); }
.cta.on-ink .dot { background: var(--ink); }

.price-note { font-size: 15px; line-height: 1.35; font-weight: 600; color: rgba(10, 10, 10, 0.62); }

.rating { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rating .badge {
  background: var(--ink); color: var(--lime); border-radius: 999px; padding: 7px 15px;
  font-size: 12.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
}
.rating .who { font-size: 14px; font-weight: 600; color: rgba(10, 10, 10, 0.6); }

/* ── Phone ──────────────────────────────────────────────────────── */

.phone {
  background: var(--ink);
  border-radius: 13.2%/6.1%;
  padding: 0.62%;
  width: 100%;
  max-width: 412px;
  box-shadow: 0 40px 70px -30px rgba(10, 10, 10, 0.55);
  flex: none;
}
/* height:auto is load-bearing — the <img> carries width/height attributes for aspect-ratio,
   and without it the element keeps its 1748px attribute height and overflows the well. */
.phone img { border-radius: 12.7%/5.9%; width: 100%; height: auto; }
.phone.on-ink { background: #1F1F1D; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.7); }

/* The design gives every phone a fixed 620px window with the device pinned to its top, so
   the screen is cropped by the band rather than sitting inside it. Without the fixed height
   the row grows to the full ~894px of the image and bottom-aligned copy falls off the fold. */
.phone-well {
  overflow: hidden;
  height: 620px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  align-self: end;
}
.band .phone-well { align-self: start; }
/* The hero's right column is wider than the device, so without this the hero phone sits
   24px shy of the measure the band phones sit flush against. */
.hero .phone-well { justify-content: flex-end; }

/* ── Feature bands ──────────────────────────────────────────────── */

.band { padding: 76px var(--gut) 0; }
.band-inner {
  max-width: var(--shell);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 412px;
  gap: 56px;
  align-items: start;
}
.band-inner.flip { grid-template-columns: 412px minmax(0, 1fr); }
.band-copy { display: flex; flex-direction: column; gap: 18px; align-self: center; padding-bottom: 76px; }
.band-copy h2 { margin: 0; font-size: clamp(52px, 6vw, 82px); }
.band-copy .claim { font-size: clamp(21px, 2vw, 27px); font-weight: 700; line-height: 1.15; letter-spacing: -0.5px; }
.band-copy p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--ink-mid); max-width: 560px; text-wrap: pretty; }

.band.ink { background: var(--ink); color: #fff; }
.band.ink .eyebrow { color: var(--lime); }
.band.ink .band-copy p { color: rgba(255, 255, 255, 0.68); }
.band.desk { background: var(--desk); }
.band.paper { background: var(--paper); }

/* Calculator read-out strip */
.readout {
  display: flex;
  align-items: stretch;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  overflow: hidden;
  margin-top: 8px;
  max-width: 600px;
  flex-wrap: wrap;
}
.readout > div { flex: 1 1 90px; padding: 18px 20px; display: flex; flex-direction: column; gap: 5px; }
.readout > div + div { border-left: 1px solid rgba(255, 255, 255, 0.12); }
.readout .k { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 800; color: rgba(255, 255, 255, 0.45); }
.readout .v { font-size: 19px; font-weight: 700; }
.readout .out { flex: 0 0 auto; background: var(--lime); color: var(--ink); border-left: none; }
.readout .out .k { color: rgba(10, 10, 10, 0.6); }
.readout .out .v { font-family: 'Archivo Black', sans-serif; font-size: 26px; letter-spacing: -0.8px; }

/* ── Level section ──────────────────────────────────────────────── */

.level { background: var(--paper); padding: 76px var(--gut); }
.level-head { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: end; margin-bottom: 40px; }
.level-head h2 { margin: 0; font-size: clamp(38px, 4.4vw, 60px); line-height: 0.92; letter-spacing: -0.035em; }
.level-head p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--ink-mid); text-wrap: pretty; }

.chart-card { background: var(--ink); border-radius: 28px; padding: 38px 40px 30px; display: flex; flex-direction: column; gap: 20px; }
.chart-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.chart-top .k { font-size: 11.5px; letter-spacing: 1.8px; text-transform: uppercase; font-weight: 800; color: rgba(255, 255, 255, 0.45); }
.chart-top .t { font-size: 20px; font-weight: 700; color: #fff; }
.chart-key { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.6); }
.chart-key i { width: 22px; height: 3px; background: var(--lime); border-radius: 2px; display: block; }
.marks { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 14px; gap: 16px; }
.marks .m { font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--lime); }
.marks .n { font-size: 13.5px; color: rgba(255, 255, 255, 0.55); }

/* ── Library ────────────────────────────────────────────────────── */

.library { background: var(--desk); padding: 76px var(--gut); }
.library-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 34px; flex-wrap: wrap; }
.library-head h2 { margin: 0; font-size: clamp(38px, 4.4vw, 60px); line-height: 0.92; letter-spacing: -0.035em; }
.library-head p { margin: 0; max-width: 440px; font-size: 17px; line-height: 1.5; color: var(--ink-mid); text-wrap: pretty; }
.lib-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.lib-card { background: var(--paper); border: 2px solid var(--ink); border-radius: 20px; padding: 16px 18px; display: flex; flex-direction: column; gap: 9px; }
.lib-card .row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.lib-card .name { font-size: 17px; font-weight: 700; letter-spacing: -0.2px; line-height: 1.2; }
.lib-card .grade { flex: none; border-radius: 8px; padding: 3px 8px; font-size: 12.5px; font-weight: 800; }
.lib-card .meta { font-size: 13.5px; color: var(--ink-muted); }
.lib-more { font-size: 15px; font-weight: 600; color: var(--ink-muted); margin-top: 34px; }

/* ── Proof ──────────────────────────────────────────────────────── */

.proof { background: var(--lime); padding: 76px var(--gut); }
.stats {
  display: flex; align-items: stretch; background: var(--ink);
  border-radius: 24px; padding: 26px 0; margin-bottom: 34px; flex-wrap: wrap;
}
.stat { flex: 1 1 180px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 20px; }
.stat + .stat { border-left: 1px solid rgba(255, 255, 255, 0.14); }
.stat .v { display: flex; align-items: baseline; gap: 3px; }
.stat .v span { font-family: 'Archivo Black', sans-serif; font-size: 46px; line-height: 1; letter-spacing: -1.4px; color: #fff; }
.stat .v em { font-style: normal; font-size: 22px; font-weight: 800; color: var(--lime); }
.stat .l { font-size: 14.5px; font-weight: 600; color: rgba(255, 255, 255, 0.6); }

.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.quote {
  background: var(--paper); border: 2px solid var(--ink); border-radius: 24px; padding: 24px;
  display: flex; flex-direction: column; gap: 16px;
}
.quote .t { font-size: 19px; line-height: 1.4; font-weight: 600; letter-spacing: -0.2px; text-wrap: pretty; }
.quote .by { display: flex; align-items: center; gap: 11px; margin-top: auto; }
.quote .av {
  flex: none; width: 38px; height: 38px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800;
}
.quote .by span:last-child { display: flex; flex-direction: column; gap: 1px; }
.quote .by b { font-size: 14.5px; font-weight: 700; }
.quote .by i { font-style: normal; font-size: 13px; color: var(--ink-muted); }

/* ── Contact routes ─────────────────────────────────────────────── */

.route-list { display: flex; flex-direction: column; }
.route-list .row {
  display: grid; grid-template-columns: 190px 1fr; gap: 24px; align-items: start;
  padding: 20px 0; border-bottom: 1px solid rgba(10, 10, 10, 0.1);
}
.route-list .k { font-size: 17px; font-weight: 700; letter-spacing: -0.2px; }
.route-list .eta { font-size: 13.5px; font-weight: 600; color: var(--ink-faint); margin-top: 5px; }
.route-list .v { font-size: 17px; line-height: 1.6; color: var(--ink-body); text-wrap: pretty; }

/* ── FAQ ────────────────────────────────────────────────────────── */

.faq { background: var(--paper); padding: 76px var(--gut); }
.faq h2 { margin: 0 0 36px; font-size: clamp(38px, 4.4vw, 60px); line-height: 0.92; letter-spacing: -0.035em; }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 48px; }
.faq-item { display: flex; flex-direction: column; gap: 8px; padding: 20px 0; border-top: 1.5px solid rgba(10, 10, 10, 0.12); }
.faq-item .q { font-size: 19px; font-weight: 700; letter-spacing: -0.2px; }
.faq-item .a { font-size: 16.5px; line-height: 1.55; color: var(--ink-mid); text-wrap: pretty; }

/* ── Closing / footer ───────────────────────────────────────────── */

.closer { background: var(--ink); color: #fff; padding: 76px var(--gut) 34px; }
.closer-inner { max-width: var(--shell); margin: 0 auto; display: flex; flex-direction: column; gap: 52px; }
.closer-top { display: grid; grid-template-columns: 1fr auto; gap: 56px; align-items: center; }
.closer h2 { margin: 0 0 16px; font-size: clamp(40px, 4.8vw, 64px); line-height: 0.9; letter-spacing: -0.04em; }
.closer p { margin: 0; font-size: 18px; line-height: 1.5; color: rgba(255, 255, 255, 0.62); max-width: 520px; text-wrap: pretty; }

.disclaimer { border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 20px; padding: 22px 26px; display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.disclaimer .k { flex: none; font-size: 11.5px; letter-spacing: 1.8px; text-transform: uppercase; font-weight: 800; color: var(--lime); padding-top: 3px; }
.disclaimer .v { flex: 1 1 320px; font-size: 15.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.62); text-wrap: pretty; }

.site-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 26px; flex-wrap: wrap;
}
.site-foot .who { display: flex; align-items: center; gap: 11px; }
.site-foot .who img { width: 30px; height: 30px; border-radius: 22.37%; }
.site-foot .who b { font-size: 14.5px; font-weight: 700; }
.site-foot .who span { font-size: 14px; color: rgba(255, 255, 255, 0.4); }
.site-foot nav { display: flex; align-items: center; gap: 26px; font-size: 14.5px; flex-wrap: wrap; }
.site-foot nav a { color: rgba(255, 255, 255, 0.62); }
.site-foot nav a:hover { color: var(--lime); }

/* ── Document pages (privacy, terms, contact) ───────────────────── */

.doc-head {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  padding: 20px 40px; background: var(--desk); border-bottom: 1px solid rgba(10, 10, 10, 0.14);
}
.doc-head .brand img { width: 30px; height: 30px; }
.doc-head .brand span { font-family: 'Archivo', sans-serif; font-size: 17px; font-weight: 700; letter-spacing: -0.3px; }
.doc-head nav { display: flex; align-items: center; gap: 24px; font-size: 14.5px; }
.doc-head nav a { color: var(--ink-mid); }

.doc { max-width: 820px; margin: 0 auto; padding: 72px 40px 96px; display: flex; flex-direction: column; gap: 44px; }
.doc a { text-decoration: underline; text-decoration-color: rgba(10, 10, 10, 0.3); text-underline-offset: 3px; }
.doc a:hover { color: var(--ink-mid); text-decoration-color: var(--ink-mid); }
.doc-title { display: flex; flex-direction: column; gap: 18px; }
.doc-kicker { display: flex; align-items: center; gap: 12px; }
.doc-kicker i { width: 34px; height: 2px; background: var(--ink); display: block; }
.doc-kicker span { font-size: 12.5px; letter-spacing: 2.2px; text-transform: uppercase; font-weight: 700; }
.doc-title h1 { margin: 0; font-family: 'Archivo Black', sans-serif; font-weight: 400; font-size: clamp(38px, 6vw, 60px); line-height: 0.94; letter-spacing: -0.035em; }
.doc-title .stamp { font-size: 15px; font-weight: 600; color: var(--ink-muted); }
.doc-title .lede { font-size: 19px; line-height: 1.6; color: var(--ink-body); max-width: 660px; text-wrap: pretty; }

.summary { background: var(--ink); color: #fff; border-radius: 24px; padding: 30px 34px; display: flex; flex-direction: column; gap: 18px; }
.summary .k { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 800; color: var(--lime); }
.summary ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 13px; }
.summary li { display: grid; grid-template-columns: 20px 1fr; gap: 14px; align-items: start; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, 0.85); text-wrap: pretty; }
.summary li::before { content: ''; width: 7px; height: 7px; border-radius: 999px; background: var(--lime); margin-top: 8px; }
.summary .foot { font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.5); border-top: 1px solid rgba(255, 255, 255, 0.16); padding-top: 16px; }

.sections { display: flex; flex-direction: column; gap: 36px; }
.section { display: flex; flex-direction: column; gap: 14px; }
.section > h2 { margin: 0; display: flex; align-items: baseline; gap: 14px; border-bottom: 1.5px solid rgba(10, 10, 10, 0.16); padding-bottom: 10px; font-size: 26px; font-weight: 700; letter-spacing: -0.6px; }
.section > h2 i { flex: none; font-style: normal; font-size: 14px; font-weight: 700; color: var(--ink-faint); }
.section p { margin: 0; font-size: 17.5px; line-height: 1.65; color: var(--ink-body); text-wrap: pretty; }
.deflist { display: flex; flex-direction: column; padding: 4px 0 2px; }
.deflist .row { display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: start; padding: 12px 0; border-top: 1px solid rgba(10, 10, 10, 0.1); }
.deflist .k { font-size: 14.5px; font-weight: 700; letter-spacing: -0.1px; }
.deflist .v { font-size: 16.5px; line-height: 1.55; color: var(--ink-body); text-wrap: pretty; }

.callout { border-radius: 24px; padding: 28px 32px; display: flex; flex-direction: column; gap: 12px; }
.callout.paper { background: var(--paper); border: 2px solid var(--ink); }
.callout.lime { background: var(--lime); border: 2px solid var(--ink); }
.callout .k { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 800; color: var(--ink-muted); }
.callout.lime .k { color: rgba(10, 10, 10, 0.62); }
.callout .v { font-size: 17.5px; line-height: 1.6; color: var(--ink-body); text-wrap: pretty; }
.callout.lime .v { font-size: 17px; color: rgba(10, 10, 10, 0.78); }
.callout .big { font-size: clamp(21px, 3vw, 27px); font-weight: 800; line-height: 1.2; letter-spacing: -0.7px; text-wrap: pretty; }

.mailto {
  background: var(--ink); border-radius: 24px; padding: 32px 34px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  text-decoration: none !important; flex-wrap: wrap;
}
.mailto:hover { background: #000; }
.mailto .k { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 800; color: var(--lime); }
.mailto .addr { font-family: 'Archivo Black', sans-serif; font-size: clamp(22px, 4.4vw, 38px); line-height: 1; letter-spacing: -1.2px; color: #fff; word-break: break-word; }
.mailto .arrow { flex: none; width: 52px; height: 52px; border-radius: 999px; background: var(--lime); display: flex; align-items: center; justify-content: center; }

.doc-foot {
  background: var(--ink); color: #fff; padding: 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.doc-foot .who { display: flex; align-items: center; gap: 11px; }
.doc-foot .who img { width: 26px; height: 26px; border-radius: 22.37%; }
.doc-foot .who b { font-size: 14px; font-weight: 700; }
.doc-foot .who span { font-size: 13.5px; color: rgba(255, 255, 255, 0.4); }
.doc-foot nav { display: flex; align-items: center; gap: 26px; font-size: 14px; flex-wrap: wrap; }
.doc-foot nav a { color: rgba(255, 255, 255, 0.6); }
.doc-foot nav a:hover { color: var(--lime); }

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  :root { --gut: 40px; }
  .lib-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .site-nav .nav-link { display: none; }
  .hero { padding-top: 56px; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-copy { padding-bottom: 48px; }
  .phone { max-width: 300px; margin-inline: auto; justify-self: center; }
  .phone-well, .hero .phone-well { height: 460px; justify-content: center; }
  .band-inner, .band-inner.flip { grid-template-columns: 1fr; gap: 32px; }
  /* On one column the screen should follow the words it illustrates, never lead them. */
  .band-inner.flip .phone-well { order: 2; }
  .band-copy { padding-bottom: 40px; }
  .level-head { grid-template-columns: 1fr; gap: 24px; }
  .faq-grid { grid-template-columns: 1fr; gap: 0; }
  .closer-top { grid-template-columns: 1fr; gap: 32px; }
  .marks { grid-template-columns: repeat(2, 1fr); gap: 20px 16px; }
  .quotes { grid-template-columns: 1fr; }
  .stat + .stat { border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 20px; margin-top: 20px; }
  .route-list .row { grid-template-columns: 1fr; gap: 8px; }
}

@media (max-width: 620px) {
  :root { --gut: 22px; }
  .band, .level, .library, .faq, .closer { padding-inline: var(--gut); }
  .lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doc { padding: 48px 22px 72px; }
  .doc-head { padding: 16px 22px; }
  .doc-head nav { gap: 16px; font-size: 13.5px; }
  .deflist .row { grid-template-columns: 1fr; gap: 6px; }
  .chart-card { padding: 26px 22px 22px; }
  .summary { padding: 24px 22px; }
  .callout { padding: 22px 20px; }
  .readout > div + div { border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.12); }
  .site-foot, .doc-foot { flex-direction: column; align-items: flex-start; gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}