/* Tidy Ship — tidyship.io
   Light theme only (decision of 15/10). First screen after mockup C (doc 67).
   One raised surface: the terminal window. One pattern: the plan grid behind the first screen. */

@font-face {
  font-family: "Martian Mono";
  src: url("/fonts/MartianMono-Variable.woff2") format("woff2");
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
/* Metric-matched fallbacks, so the swap to the web fonts does not move the layout. */
@font-face {
  font-family: "Martian Mono Fallback";
  src: local("Menlo"), local("DejaVu Sans Mono"), local("Consolas"), local("Courier New");
  size-adjust: 107.5%;
  ascent-override: 93%;
  descent-override: 19%;
}
@font-face {
  font-family: "Geist Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 104%;
  ascent-override: 97%;
  descent-override: 28%;
}

:root {
  --bg: #f4f5f2;
  --surface: #ffffff;
  --surface-2: #eaece7;
  --text: #111315;
  --text-muted: #545b56;
  --border: #d5d9d3;
  --border-strong: #7c837d;
  --accent: #1a7346;
  --accent-hover: #145c38;
  --on-accent: #ffffff;
  --focus: var(--accent);
  --grid: rgba(17, 19, 21, 0.055);

  --term-bg: #111315;
  --term-text: #e4e7e2;
  --term-muted: #8d948e;
  --term-ok: #57c785;
  --term-border: #2b3030;
  --term-dot: #2f3436;
  --win-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 30px 60px -24px rgba(17, 19, 21, 0.35),
    0 12px 24px -12px rgba(17, 19, 21, 0.18);
  --btn-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 2px rgba(17, 19, 21, 0.2),
    0 10px 24px -10px rgba(26, 115, 70, 0.75);

  --font-mono: "Martian Mono", "Martian Mono Fallback", ui-monospace, monospace;
  --font-sans: "Geist", "Geist Fallback", ui-sans-serif, system-ui, sans-serif;

  --wrap: 1240px;
  --gutter: 20px;
  --col-gap: 24px;
  --section-gap: 72px;
  --header-h: 76px;

  color-scheme: light;
}
@media (min-width: 521px) {
  :root { --gutter: 32px; }
}
@media (min-width: 1024px) {
  :root { --section-gap: 120px; }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
/* Green is for action and for what passes. Text links are text-coloured and underlined. */
a { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
strong { font-weight: 550; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* Type */
.mono, .eyebrow, .win, .avatar, .path__label, .path__n, .fact strong {
  font-family: var(--font-mono);
  font-variation-settings: "wdth" 87.5;
}
.display, .h1, .h2, .h3 { font-family: var(--font-sans); font-weight: 600; }
.h1 { font-size: 38px; line-height: 44px; letter-spacing: -0.03em; }
.h2 { font-size: 30px; line-height: 36px; letter-spacing: -0.025em; }
.h3 { font-size: 20px; line-height: 28px; letter-spacing: -0.01em; }
@media (min-width: 768px) {
  .h1 { font-size: 46px; line-height: 50px; }
  .h2 { font-size: 36px; line-height: 42px; }
}
.lead { font-size: 18px; line-height: 30px; }
.small { font-size: 14px; line-height: 22px; }
.eyebrow {
  font-weight: 500;
  font-size: 11.5px;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.muted { color: var(--text-muted); }

/* Skip link */
.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: 8px 12px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 7px;
}
.skip:focus { top: 8px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 7px;
  font-family: var(--font-sans);
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
/* The primary action: accent, raised (inner highlight + soft accent-tinted shadow). */
.btn--lg, .btn--primary {
  min-height: 54px;
  padding: 0 24px;
  font-size: 16px;
  line-height: 24px;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--btn-shadow);
}
.btn--lg:hover, .btn--primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn__arrow { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: background-color 150ms ease, color 150ms ease; }
  .btn__arrow { transition: transform 150ms ease; }
}
.btn:hover .btn__arrow { transform: translateX(2px); }
.btn--block { display: flex; width: 100%; }
/* Header button: graphite while a green primary button or #book is on screen, accent otherwise (site.js). */
.btn--sm {
  min-height: 38px;
  padding: 0 16px;
  font-size: 14px;
  line-height: 20px;
  background: var(--text);
  color: var(--bg);
}
.btn--sm:hover { color: var(--bg); }
.is-green .btn--sm { background: var(--accent); color: var(--on-accent); }
.is-green .btn--sm:hover { background: var(--accent-hover); }
.reassure { margin-top: 12px; font-size: 14px; line-height: 22px; color: var(--text-muted); }

/* Header: fixed at the top while scrolling */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid transparent;
}
.is-scrolled.site-header { border-bottom-color: var(--border); }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  gap: 24px;
}
.site-header__logo { display: block; flex: none; }
.site-header__logo img { height: 22px; width: auto; }
.nav ul { display: flex; align-items: center; gap: 30px; }
.nav__link a { color: var(--text-muted); text-decoration: none; font-size: 14.5px; line-height: 20px; font-weight: 450; }
.nav__link a:hover { color: var(--text); }
@media (max-width: 980px) {
  .nav__link { display: none; }
}

/* Hero */
/* overflow: hidden on the hero only (it clips the grid); never on body, main or a wrapper,
   which would break the sticky section titles. */
.hero { position: relative; padding: 40px 0 56px; overflow: hidden; }
/* The plan grid: 1px lines, 40px mesh, faded by a radial mask. First screen only. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 35%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 70% 35%, #000 30%, transparent 75%);
  pointer-events: none;
}
.hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; align-items: center; }
@media (min-width: 981px) {
  .hero { padding: 52px 0 96px; }
  .hero__grid { grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr); gap: 56px; }
}

.pill-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 26px;
  padding: 6px 12px 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-family: var(--font-mono);
  font-variation-settings: "wdth" 87.5;
  font-weight: 500;
  font-size: 11.5px;
  line-height: 26px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pill-eyebrow__dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.hero__title {
  margin: 0 0 28px;
  font-family: var(--font-sans);
  font-weight: 620;
  font-size: 54px;
  line-height: 1.05;
  letter-spacing: -0.038em;
  text-wrap: balance;
}
/* Highlight: an accent band at 22% on the lower part of the letters (hard stops, no fade). */
.hero__hl {
  background: linear-gradient(transparent 60%, rgba(26, 115, 70, 0.22) 60%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hero__muted { display: block; margin-top: 0.06em; color: var(--text-muted); }
.hero__lead { max-width: 31em; margin: 0 0 40px; font-size: 18px; line-height: 30px; color: var(--text-muted); }
.hero__lead strong { color: var(--text); font-weight: 500; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.hero__secondary {
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 2px;
}
.hero__secondary:hover { border-bottom-color: var(--text); }
.checks { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 16px 0 0; font-size: 13px; line-height: 26px; color: var(--text-muted); }
.checks li::before { content: "✓"; margin-right: 6px; color: var(--accent); font-weight: 600; }
.hero__proof {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 34em;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-muted);
}
.hero__proof p { font-size: 14px; line-height: 21px; color: var(--text-muted); }
.hero__proof strong { color: var(--text); font-weight: 550; }

/* Terminal window: the only raised surface (first screen and #example). */
.win__frame {
  background: var(--term-bg);
  color: var(--term-text);
  border: 1px solid var(--term-border);
  border-radius: 12px;
  box-shadow: var(--win-shadow);
  overflow: hidden;
}
.win__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 42px;
  padding: 0 16px;
  border-bottom: 1px solid var(--term-border);
  font-size: 12px;
  color: var(--term-muted);
}
.win__dots { display: flex; gap: 7px; }
.win__dots i { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--term-dot); }
.win__badge {
  font-size: 10.5px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--term-border);
  border-radius: 999px;
  padding: 2px 9px;
}
.win__body { padding: 20px 20px 22px; font-size: 12.5px; line-height: 24px; font-weight: 400; }
.tt { width: 100%; border-collapse: collapse; font: inherit; }
.tt th, .tt td { padding: 0; text-align: left; vertical-align: baseline; font-weight: 400; }
.tt thead th {
  padding-bottom: 6px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--term-muted);
}
.tt th + th, .tt td + td { padding-left: 8px; }
.tt__ctl { width: 52px; color: var(--term-muted); white-space: nowrap; }
.tt thead th:nth-child(3), .tt__built { width: 56px; text-align: center; white-space: nowrap; color: var(--term-muted); }
.tt thead th:nth-child(4), .tt__day { width: 30px; text-align: right; color: var(--term-muted); }
.ok { color: var(--term-ok); font-weight: 600; }
.win__sum {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--term-border);
  font-size: 13px;
}
.win__sum .ok { font-weight: 400; }
.win .cursor { display: inline-block; width: 8px; height: 15px; margin-left: 6px; vertical-align: -2px; background: var(--term-ok); }
.win__caption { margin: 12px 2px 0; font-family: var(--font-sans); font-size: 12.5px; line-height: 26px; color: var(--text-muted); }

/* "Your path" card */
.path { margin-top: 24px; padding: 18px 22px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.path__label { margin: 0 0 18px; font-size: 11px; line-height: 26px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.path__steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Link line: green up to the Build, grey after (hard stop). */
.path__steps::before {
  content: "";
  position: absolute;
  left: 14px;
  right: calc(33.33% - 14px);
  top: 13px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent) 50%, var(--border) 50%);
}
.path__step { position: relative; padding-right: 12px; }
.path__n {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 12px;
  font-weight: 600;
}
.path__step--next .path__n { background: var(--surface); color: var(--text-muted); border: 2px solid var(--border); }
.path__step strong { display: block; font-size: 15px; line-height: 26px; font-weight: 600; letter-spacing: -0.01em; }
.path__detail { display: block; margin-top: 2px; font-size: 13px; line-height: 26px; color: var(--text-muted); }

/* Facts strip, under the first screen */
.facts { background: var(--surface); border-block: 1px solid var(--border); }
.facts__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fact { padding: 20px 0 20px 20px; border-left: 1px solid var(--border); border-top: 1px solid var(--border); }
.fact:nth-child(odd) { border-left: 0; padding-left: 0; }
.fact:nth-child(-n + 2) { border-top: 0; }
.fact strong { display: block; font-weight: 500; font-size: 20px; line-height: 28px; letter-spacing: -0.01em; }
.fact span { font-size: 13.5px; line-height: 20px; color: var(--text-muted); }
@media (min-width: 981px) {
  .facts__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fact { padding: 26px 0 26px 28px; border-top: 0; }
  .fact:nth-child(odd) { border-left: 1px solid var(--border); padding-left: 28px; }
  .fact:first-child { border-left: 0; padding-left: 0; }
}

/* Mobile values from mockup C (≤ 980px, ≤ 520px). */
@media (max-width: 980px) {
  .hero__title { font-size: 44px; line-height: 1.04; }
}
@media (max-width: 520px) {
  .hero__title { font-size: 38px; }
  .hero__lead { font-size: 17px; line-height: 27px; }
  .hero__actions { gap: 16px; }
  .hero__actions .btn--lg { width: 100%; }
  .pill-eyebrow { gap: 7px; margin-bottom: 20px; padding: 5px 10px 5px 9px; font-size: 9.5px; letter-spacing: 0.03em; white-space: nowrap; }
  .checks { flex-direction: column; }
  .win__body { padding: 16px; font-size: 11.5px; }
  .tt__ctl { width: 52px; }
  .tt thead th:nth-child(3), .tt__built { width: 52px; }
  .tt th + th, .tt td + td { padding-left: 6px; }
  .path { padding: 16px; }
  .path__step strong { font-size: 14px; }
  .path__detail { font-size: 12px; }
}

/* Sections 2–11: a 1px rule and space between them, heading column left, content right. */
.section { margin-top: var(--section-gap); }
.section__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 32px;
  border-top: 1px solid var(--border);
  padding-top: 32px;
}
.section__head .eyebrow { margin-bottom: 12px; }
.section__head .h2 { max-width: 24ch; text-wrap: balance; }
.section__body { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.section__body > * { max-width: 100%; }
.prose, .section__body > p { max-width: 68ch; }
.note { font-size: 14px; line-height: 22px; color: var(--text-muted); max-width: 72ch; }
.note--rule { margin-top: -8px; }
.section__cta { margin-top: 16px; }
@media (min-width: 1024px) {
  .section__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    padding-top: 40px;
  }
  .section__head { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
  .section__body { grid-column: 5 / span 8; }
}

/* Lists separated by rules, not cards */
.rules > li, .rules > div { border-top: 1px solid var(--border); padding-block: 16px; }
.rules > :last-child { border-bottom: 1px solid var(--border); }
.rules--list > li { padding-block: 12px; }

/* How it works */
.steps__item { display: grid; grid-template-columns: 4ch minmax(0, 1fr); column-gap: 16px; padding-block: 24px !important; }
.steps__n { font-size: 14px; line-height: 28px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.steps__terms { margin: 4px 0 12px; font-size: 14px; line-height: 22px; color: var(--text-muted); }
.bonus { display: grid; gap: 8px; }

/* Two-column lists (Build, principles, guarantees) */
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 32px; }
.grid2 > :last-child { border-bottom: 0; }
.grid2 { border-bottom: 1px solid var(--border); }
.feature { display: grid; gap: 8px; align-content: start; padding-block: 20px !important; }
.feature__name { font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; }
.feature__n { font-family: var(--font-mono); font-variation-settings: "wdth" 87.5; font-weight: 500; font-size: 13px; color: var(--text-muted); }
@media (min-width: 768px) {
  .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Comparison table (#options) and legal tables */
.compare { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 24px; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-top: 1px solid var(--border); font-weight: 400; }
.compare thead th {
  font-family: var(--font-mono);
  font-variation-settings: "wdth" 87.5;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-top: 0;
  padding-top: 0;
}
/* Every option, Tidy Ship included, in Geist 600. */
.compare tbody th { font-weight: 600; }
.compare tbody tr:last-child > * { border-bottom: 1px solid var(--border); }
/* The Tidy Ship row: the highlight is drawn 16px outside the table on both sides, behind the
   cells, so its text stays on the same columns as every other row. The pseudo-element sits on
   the first cell (on the row, Chromium would lay it out as an extra cell) and is positioned
   against the row. */
.compare__ours { position: relative; z-index: 0; }
.compare__ours > :first-child::before {
  content: "";
  position: absolute;
  inset: 0 -16px;
  z-index: -1;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
}
.compare__ours > *,
.compare tbody tr:last-child.compare__ours > * { border-top-color: transparent; border-bottom-color: transparent; }
@media (max-width: 767.98px) {
  /* One block per row: the option, then each column as a labelled line. */
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; }
  .compare tr { border-top: 1px solid var(--border); padding-block: 12px; }
  .compare tbody tr:last-child { border-bottom: 1px solid var(--border); }
  .compare th, .compare td { border: 0 !important; padding: 2px 0; }
  .compare tbody th { padding-bottom: 6px; }
  .compare td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-mono);
    font-variation-settings: "wdth" 87.5;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 8px;
  }
  .compare tr.compare__ours { border-top-color: transparent; margin-top: 12px; }
  .compare tbody tr:last-child.compare__ours { border-bottom-color: transparent; }
}

/* #example: the second terminal window. Every line of the table becomes a stacked block on
   small screens (finding, control, fix, day), so no text is cut. */
.example__win .win__body { font-size: 12.5px; line-height: 22px; }
@media (min-width: 1024px) { .example__win .win__body { padding: 24px 28px 26px; font-size: 13px; } }
.xt { width: 100%; border-collapse: collapse; font: inherit; }
.xt th, .xt td { padding: 4px 0 4px 2ch; text-align: left; vertical-align: top; font-weight: 400; }
.xt th:first-child, .xt td:first-child { padding-left: 0; }
.xt thead th { padding-bottom: 10px; font-size: 11px; letter-spacing: 0.06em; color: var(--term-muted); }
.xt__ctl, .xt__day { color: var(--term-muted); white-space: nowrap; }
.xt__day { text-align: right !important; }
@media (max-width: 767.98px) {
  .xt thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .xt, .xt tbody, .xt tr, .xt td { display: block; }
  .xt tr { padding-block: 12px; border-top: 1px solid var(--term-border); }
  .xt tr:first-child { border-top: 0; padding-top: 0; }
  .xt td { padding: 0 !important; text-align: left !important; display: grid; grid-template-columns: 9ch minmax(0, 1fr); white-space: normal; }
  .xt td::before { content: attr(data-label); color: var(--term-muted); }
  .xt__finding { color: var(--term-text); }
}

/* About */
.section--about a { font-weight: 500; }

/* FAQ: every answer visible */
.faq__item { display: grid; gap: 8px; padding-block: 20px !important; }
.faq__q { font-weight: 600; font-size: 18px; line-height: 26px; letter-spacing: -0.01em; }
@media (min-width: 768px) { .faq__q { font-size: 20px; line-height: 28px; } }

/* Book: the Tally form on a white card (radius 12px, border). */
.book__slot { font-weight: 550; }
.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  color-scheme: light;
}
@media (min-width: 768px) { .form-card { padding: 24px 32px; } }
.form-card iframe { display: block; width: 100%; border: 0; }

/* Subpages */
/* Same left edge as the header logo; text kept to 720px. */
.message { padding-block: 64px 0; }
.message > * { max-width: 720px; }
@media (min-width: 1024px) { .message { padding-top: 96px; } }
.message .eyebrow { margin-bottom: 16px; }
.message .h1 { margin-bottom: 24px; text-wrap: balance; }
.message .prose { font-size: 18px; line-height: 28px; margin-bottom: 24px; }
.message__action { margin-bottom: 16px; }
.message__back { margin-top: 32px; }

.doc { padding-top: 48px; }
.doc__jump { font-size: 14px; line-height: 22px; margin-bottom: 32px; }
.doc__lang { max-width: 760px; display: flex; flex-direction: column; gap: 16px; }
.doc__lang + .doc__lang { margin-top: var(--section-gap); border-top: 1px solid var(--border); padding-top: 48px; }
.doc__lang .h1 { margin-bottom: 16px; }
.doc__lang .h3 { margin-top: 24px; }
.compare--doc { font-size: 14px; line-height: 22px; }

/* Footer */
.site-footer {
  margin-top: var(--section-gap);
  border-top: 1px solid var(--border);
  padding-block: 32px 96px;
  font-size: 14px;
  line-height: 22px;
  color: var(--text-muted);
}
.site-footer__list { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-footer a { color: var(--text-muted); }
.site-footer a:hover { color: var(--text); }
@media (min-width: 900px) { .site-footer { padding-bottom: 48px; } }

/* Mobile bar */
.mobile-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 30;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.mobile-bar[hidden] { display: none; }
@media (min-width: 900px) { .mobile-bar { display: none; } }

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