/* Legibl — one stylesheet, no build step, no dependencies.

   The design is dark and committed to it. The artboards in
   legibl-website/website specify a single dark treatment, and a light theme
   derived from them would be an extrapolation nobody approved. `color-scheme:
   dark` tells the browser to render its own controls to match, so form fields
   and scrollbars belong to the page rather than fighting it.

   Three typefaces, self-hosted. Each is a variable font covering every weight
   used here, which is why there are three files and not eleven — Google serves
   the same file for each requested weight, and fonttools confirms the wght
   axis before we relied on it. No third-party request on any page load. */

@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk-87c506d88b9f587f0e2292bc271f5083.woff2?vsn=d") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-fa41c43a3d8e68fafc0ec15acca8b6fd.woff2?vsn=d") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-b636a65da4f00129f08c7df6e5dd75ac.woff2?vsn=d") format("woff2-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Grounds, deepest first. --bg-sunk is the inset surface: inputs, code. */
  --bg:          #0a0d0c;
  --bg-sunk:     #070a09;
  --bg-soft:     #101614;
  --bg-raised:   #141b18;

  /* Ink. Four steps, because three was never enough for a data table. */
  --ink:         #eaf2ee;
  --ink-soft:    #93a59b;
  --ink-muted:   #7f8f87;
  --ink-faint:   #5e6d65;

  /* Rules, quietest first. */
  --rule:        #1a221e;
  --rule-soft:   #1c2621;
  --rule-strong: #253029;
  --rule-loud:   #2c3a33;

  --accent:      oklch(0.82 0.17 150);
  --accent-lift: oklch(0.88 0.17 150);
  --on-accent:   #06120c;
  --accent-dim:  oklch(0.82 0.17 150 / 0.12);

  --warn:        oklch(0.78 0.14 75);
  --warn-dim:    oklch(0.78 0.14 75 / 0.12);
  --bad:         oklch(0.72 0.17 25);
  --bad-dim:     oklch(0.72 0.17 25 / 0.12);

  --display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --body:    "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --measure: 68ch;
  --shell:   min(72rem, 100% - 2.5rem);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* The glow the artboards put behind the fold, kept faint enough that a data
     table over it stays legible. */
  background-image: radial-gradient(900px 420px at 50% -8%, oklch(0.82 0.17 150 / 0.07), transparent 70%);
  background-repeat: no-repeat;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-lift); text-decoration: underline; text-underline-offset: 3px; }

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

.skip-link {
  position: absolute; left: -9999px;
  background: var(--accent); color: var(--on-accent);
  padding: 10px 16px; border-radius: 8px; font-weight: 600;
}
.skip-link:focus { left: 12px; top: 12px; z-index: 100; }

/* ------------------------------------------------------------- masthead -- */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 20;
}
.masthead-inner {
  width: var(--shell); margin: 0 auto;
  display: flex; align-items: center; gap: 1.75rem;
  padding: 0.9rem 0;
}
.wordmark {
  font-family: var(--display);
  font-weight: 700; font-size: 1.2rem; letter-spacing: -0.03em;
  color: var(--ink);
}
.wordmark:hover { color: var(--ink); text-decoration: none; }
.masthead nav { display: flex; align-items: center; gap: 1.4rem; }
.masthead nav a {
  font-family: var(--display);
  font-size: 0.94rem; font-weight: 500; color: var(--ink-soft);
}
.masthead nav a:hover { color: var(--ink); text-decoration: none; }
/* Log out is a form (see root.html.heex), styled to read as the link beside it. */
.masthead nav .nav-form { display: inline; margin: 0; }
.masthead nav .nav-button {
  font-family: var(--display);
  font-size: 0.94rem; font-weight: 500; color: var(--ink-soft);
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer; line-height: inherit;
}
.masthead nav .nav-button:hover { color: var(--ink); }
.masthead nav .nav-button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.masthead .spacer { flex: 1; }

/* `.masthead nav a` is one class and two elements — 0,1,2 — and beat `a.cta`
   at 0,1,1, so the call to action rendered in the nav's own muted green on a
   green pill and could not be read. Matched at the same depth to win on order
   rather than piling on !important. */
.masthead nav a.cta, .cta, a.cta {
  font-family: var(--display);
  background: var(--accent); color: var(--on-accent);
  padding: 0.5rem 1rem; border-radius: 999px;
  font-weight: 700; font-size: 0.92rem;
}
.masthead nav a.cta:hover, .cta:hover, a.cta:hover { background: var(--accent-lift); color: var(--on-accent); text-decoration: none; }

/* ---------------------------------------------------------------- page --- */

.page { width: var(--shell); margin: 0 auto; padding: 3.5rem 0 5rem; }
.prose { max-width: var(--measure); }

h1, h2, h3 { font-family: var(--display); text-wrap: balance; }
h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.1rem);
  line-height: 1.06; letter-spacing: -0.035em; font-weight: 700;
  margin: 0 0 1rem;
}
h2 {
  font-size: 1.45rem; line-height: 1.25; letter-spacing: -0.022em;
  font-weight: 650; margin: 3rem 0 0.9rem;
}
h3 {
  font-size: 1.08rem; letter-spacing: -0.012em; font-weight: 650;
  margin: 1.9rem 0 0.5rem;
}
p { margin: 0 0 1.05rem; max-width: var(--measure); }
ul, ol { max-width: var(--measure); padding-left: 1.15rem; margin: 0 0 1.05rem; }
li { margin: 0.35rem 0; }
li::marker { color: var(--ink-faint); }

.lede { font-size: 1.2rem; line-height: 1.55; color: var(--ink-soft); max-width: 46ch; }
.muted { color: var(--ink-muted); }
.small { font-size: 0.88rem; color: var(--ink-muted); }

code {
  font-family: var(--mono); font-size: 0.88em;
  background: var(--bg-sunk); border: 1px solid var(--rule-soft);
  border-radius: 5px; padding: 0.12em 0.38em; color: var(--ink);
}
pre {
  font-family: var(--mono); font-size: 0.86rem; line-height: 1.6;
  background: var(--bg-sunk); border: 1px solid var(--rule-soft);
  border-radius: 12px; padding: 1.1rem 1.2rem;
  overflow-x: auto; margin: 0 0 1.2rem;
}
pre code { background: none; border: 0; padding: 0; font-size: inherit; }

/* --------------------------------------------------------------- cards --- */

.grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem; margin: 1.6rem 0; max-width: none;
}
.card {
  background: var(--bg-raised); border: 1px solid var(--rule-soft);
  border-radius: 14px; padding: 1.3rem 1.4rem;
}
.card h3 { margin: 0 0 0.45rem; font-size: 1rem; }
.card p { color: var(--ink-soft); font-size: 0.95rem; }
.card p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- tables --- */

.table-scroll {
  overflow-x: auto; border: 1px solid var(--rule-soft);
  border-radius: 12px; margin: 1.4rem 0; background: var(--bg-raised);
}
table { border-collapse: collapse; width: 100%; font-size: 0.93rem; min-width: 34rem; }
th, td { padding: 0.72rem 1rem; text-align: left; border-bottom: 1px solid var(--rule-soft); }
th {
  font-family: var(--mono); font-size: 0.73rem; font-weight: 500;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-muted);
  white-space: nowrap;
}
td { color: var(--ink-soft); }
td:first-child { color: var(--ink); }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ callouts --- */

.note, .warn, .stop {
  border: 1px solid var(--rule-soft); border-left-width: 3px;
  border-radius: 6px; padding: 0.9rem 1.1rem; margin: 1.4rem 0;
  max-width: var(--measure); background: var(--bg-raised);
}
.note { border-left-color: var(--accent); background: var(--accent-dim); }
.warn { border-left-color: var(--warn); background: var(--warn-dim); }
.stop { border-left-color: var(--bad); background: var(--bad-dim); }
.note p:last-child, .warn p:last-child, .stop p:last-child { margin-bottom: 0; }
.callout-title {
  font-family: var(--display); font-weight: 650; font-size: 0.95rem;
  margin: 0 0 0.35rem;
}

/* ---------------------------------------------------------------- pills -- */

.pill {
  display: inline-block; font-family: var(--mono);
  font-size: 0.7rem; letter-spacing: 0.07em; text-transform: uppercase;
  font-weight: 700; padding: 0.22rem 0.55rem; border-radius: 999px;
}
.pill-yes  { background: var(--accent-dim); color: var(--accent); }
.pill-part { background: var(--warn-dim);   color: var(--warn); }
.pill-no   { background: var(--bad-dim);    color: var(--bad); }

/* --------------------------------------------------------------- flash --- */

.flash {
  border-radius: 10px; padding: 0.85rem 1.1rem; margin: 0 0 1.5rem;
  border: 1px solid var(--rule-strong); max-width: var(--measure);
  font-size: 0.95rem;
}
.flash-info  { background: var(--accent-dim); border-color: var(--accent); color: var(--ink); }
.flash-error { background: var(--bad-dim);    border-color: var(--bad);    color: var(--ink); }

/* --------------------------------------------------------------- forms --- */

form { max-width: 30rem; }
label {
  display: block; font-family: var(--display);
  font-size: 0.85rem; font-weight: 600; color: var(--ink-soft);
  margin: 0 0 0.4rem;
}
input, select, textarea {
  font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: var(--bg-sunk); border: 1px solid var(--rule-strong);
  border-radius: 10px; padding: 0.72rem 0.85rem; width: 100%;
  margin: 0 0 1.1rem;
}
textarea { min-height: 9rem; resize: vertical; line-height: 1.6; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

button, .button {
  font-family: var(--display); font-size: 1rem; font-weight: 700;
  color: var(--on-accent); background: var(--accent);
  border: 0; border-radius: 999px; padding: 0.75rem 1.5rem;
  cursor: pointer; display: inline-block; text-align: center;
}
button:hover, .button:hover { background: var(--accent-lift); color: var(--on-accent); text-decoration: none; }
button.secondary, .button.secondary {
  background: transparent; color: var(--ink);
  border: 1px solid var(--rule-loud);
}
button.secondary:hover, .button.secondary:hover { background: var(--bg-raised); border-color: var(--ink-faint); }
button.danger, .button.danger { background: var(--bad); color: var(--bg-sunk); }
button.danger:hover, .button.danger:hover { filter: brightness(1.12); }

.field-error { color: var(--bad); font-size: 0.85rem; margin: -0.75rem 0 1rem; }
.inline-form { display: inline; }
.checkbox-row { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1.1rem; }
.checkbox-row label { margin: 0; font-weight: 500; color: var(--ink-soft); }
.checkbox-row input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--accent); }

/* ----------------------------------------------------------------- keys -- */

.key-once {
  border: 1px solid var(--accent); background: var(--accent-dim);
  border-radius: 12px; padding: 1.1rem 1.2rem; margin: 1.4rem 0;
  max-width: var(--measure);
}
.key-value {
  font-family: var(--mono); font-size: 0.95rem; word-break: break-all;
  background: var(--bg-sunk); border: 1px solid var(--rule-strong);
  border-radius: 8px; padding: 0.7rem 0.85rem; display: block; margin: 0.6rem 0 0;
  color: var(--ink);
}

/* --------------------------------------------------------------- status -- */

.status-banner {
  border: 1px solid var(--rule-soft); border-radius: 14px;
  padding: 1.3rem 1.4rem; margin: 0 0 1.6rem;
  background: var(--bg-raised); max-width: var(--measure);
}
.status-word { font-family: var(--display); font-weight: 700; letter-spacing: -0.01em; }
.status-ok      .status-word { color: var(--accent); }
.status-degraded .status-word { color: var(--warn); }
.status-down    .status-word { color: var(--bad); }
.status-unknown .status-word { color: var(--ink-muted); }
.status-ok      { border-left: 3px solid var(--accent); }
.status-degraded { border-left: 3px solid var(--warn); }
.status-down    { border-left: 3px solid var(--bad); }
.status-unknown { border-left: 3px solid var(--ink-faint); }

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

.site-footer { border-top: 1px solid var(--rule); margin-top: 5rem; background: var(--bg-sunk); }
.footer-inner {
  width: var(--shell); margin: 0 auto; padding: 3rem 0 1.5rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 2rem;
}
.footer-group h2 {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-faint);
  margin: 0 0 0.7rem;
}
.footer-group ul { list-style: none; padding: 0; margin: 0; }
.footer-group li { margin: 0.3rem 0; }
.footer-group a { color: var(--ink-soft); font-size: 0.92rem; }
.footer-group a:hover { color: var(--ink); text-decoration: none; }
.footer-note {
  width: var(--shell); margin: 0 auto; padding: 0 0 3rem;
  color: var(--ink-faint); font-size: 0.85rem; max-width: var(--measure);
}

@media (max-width: 640px) {
  .masthead-inner { gap: 1rem; flex-wrap: wrap; }
  .masthead nav { gap: 1rem; }
  .page { padding: 2.5rem 0 3.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ================================================================= home == */
/* Artboard 2a. The hero carries the sequence a request actually goes through,
   because the product is invisible by design and a list of adjectives cannot
   show that. */

.hero { padding: 1rem 0 3rem; }

.eyebrow {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 1.4rem;
}

.hero h1 { max-width: 18ch; }
.hero .lede { margin-bottom: 2rem; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 3.5rem; }

/* ------------------------------------------------------------- runner --- */

.runner {
  border: 1px solid var(--rule-soft); border-radius: 16px;
  background: var(--bg-raised); padding: 1.5rem 1.6rem 1.6rem;
  max-width: 46rem;
}
.runner-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin: 0 0 1.2rem;
}
.runner-head h2 { margin: 0; font-size: 1.02rem; letter-spacing: -0.012em; }
.runner-state {
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em;
  color: var(--ink-muted); white-space: nowrap;
}

.runner-steps { list-style: none; margin: 0 0 1.3rem; padding: 0; display: grid; gap: 2px; }
.runner-steps li {
  display: grid; grid-template-columns: 2.4rem 1fr auto; gap: 0.9rem;
  align-items: baseline; padding: 0.7rem 0.9rem; border-radius: 8px;
  background: var(--bg-sunk); border: 1px solid transparent;
  color: var(--ink-faint); margin: 0;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.runner-steps .step { font-family: var(--mono); font-size: 0.78rem; }
.runner-steps .name { font-family: var(--display); font-weight: 600; font-size: 0.95rem; }
.runner-steps .meta { font-family: var(--mono); font-size: 0.76rem; text-align: right; }

/* Without JavaScript every step stays legible at rest — the sequence is the
   content, and the animation only paces it. */
.runner-steps li.done { color: var(--ink-soft); border-color: var(--rule-soft); }
.runner-steps li.done .name { color: var(--ink); }
.runner-steps li.active {
  color: var(--ink); border-color: var(--accent); background: var(--accent-dim);
}
.runner-steps li.active .name, .runner-steps li.active .step { color: var(--accent); }

.runner button[disabled] { opacity: 0.55; cursor: default; }

/* ------------------------------------------------------------- figures --- */

.figures {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px; background: var(--rule-soft);
  border: 1px solid var(--rule-soft); border-radius: 14px; overflow: hidden;
  margin: 0 0 1rem;
}
.figure {
  background: var(--bg); padding: 1.4rem 1.3rem;
  display: flex; flex-direction: column; gap: 0.3rem;
}
.figure strong {
  font-family: var(--display); font-size: 1.6rem; font-weight: 700;
  letter-spacing: -0.03em; color: var(--accent); line-height: 1.1;
}
.figure span { font-size: 0.88rem; color: var(--ink-muted); line-height: 1.4; }

/* --------------------------------------------------------- price cards --- */

.price-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem; margin: 1.6rem 0;
}
.price-card {
  border: 1px solid var(--rule-soft); border-radius: 14px;
  background: var(--bg-raised); padding: 1.2rem 1.3rem;
  display: flex; flex-direction: column; gap: 0.35rem;
}
.price-name { font-family: var(--display); font-weight: 600; font-size: 0.95rem; }
.price-figure {
  font-family: var(--display); font-size: 1.9rem; font-weight: 700;
  letter-spacing: -0.03em; color: var(--ink); line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.price-unit { font-family: var(--mono); font-size: 0.74rem; color: var(--ink-muted); }

.closing { margin-top: 3.5rem; }

.price-id {
  font-family: var(--mono); font-size: 0.72rem; color: var(--ink-muted);
  background: none; border: 0; padding: 0; align-self: flex-start;
}

/* ================================================================= auth == */
/* Artboard 3a. One card, centred, with the glow the artboards put behind it. */

.auth-shell {
  width: var(--shell); margin: 0 auto;
  padding: 4rem 0 6rem; display: flex; justify-content: center;
}
.auth-card {
  width: 100%; max-width: 30rem;
  background: var(--bg-raised); border: 1px solid var(--rule-soft);
  border-radius: 16px; padding: 2.6rem 2.6rem 2.4rem;
  background-image: radial-gradient(520px 260px at 50% 0%, var(--accent-dim), transparent 70%);
}
.auth-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin: 0 0 2.4rem;
}
.auth-card h1 { font-size: 1.9rem; margin: 0 0 0.4rem; }
.auth-sub { color: var(--ink-soft); margin: 0 0 2rem; font-size: 0.98rem; }
.auth-card form { max-width: none; }
.auth-card label { display: flex; justify-content: space-between; align-items: baseline; }
.label-aside { font-weight: 500; font-size: 0.82rem; color: var(--ink-muted); }
.label-aside:hover { color: var(--ink); text-decoration: none; }
button.full { width: 100%; margin-top: 0.4rem; }

/* ============================================================== account == */
/* Artboard 3b's stat treatment. The pages stay separate — merging Account,
   Usage and API keys into one dashboard is an information-architecture change
   rather than a visual one, and is not what was asked for here. */

.card .stat {
  font-family: var(--display); font-size: 1.75rem; font-weight: 700;
  letter-spacing: -0.03em; color: var(--ink); margin: 0.2rem 0;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.card .stat-accent { color: var(--accent); }

/* ---------------------------------------------------- full-bleed bands --- */
/* The artboard alternates full-width bands; the layout wraps every page in a
   fixed column, so a band has to break out of it and re-centre its own
   contents. */

/* `margin-inline: calc(50% - 50vw)` with matching padding, rather than
   `width: 100vw`. 100vw counts the scrollbar's width, so on a browser with
   classic scrollbars the band is wider than the viewport and the whole page
   scrolls sideways. Headless Chromium uses overlay scrollbars and never shows
   it, which is why this is worth writing down rather than testing for. */
.band {
  margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%);
  padding-block: 3.5rem; border-top: 1px solid var(--rule);
}
.band-tint { background: var(--bg-sunk); }
.band-inner { width: var(--shell); margin: 0 auto; }

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

.hero.centred { text-align: center; padding: 4.5rem 0 4rem; }
.hero.centred h1 {
  font-size: clamp(2.6rem, 6.6vw, 4.75rem);
  max-width: 16ch; margin-inline: auto; line-height: 1.02;
}
.hero.centred .lede { margin-inline: auto; max-width: 58ch; text-align: center; }
.hero.centred .hero-actions { justify-content: center; }

.eyebrow-pill {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.06em;
  color: var(--accent); border: 1px solid var(--rule-strong);
  background: var(--bg-raised); border-radius: 999px;
  padding: 0.35rem 0.9rem; margin: 0 0 1.8rem;
}
.eyebrow-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.35 } }

.runner { margin-inline: auto; }

/* ------------------------------------------------- figures, full bleed --- */
/* Replaces the boxed treatment: the artboard runs these edge to edge with
   hairline dividers and no outer border. */

.figures.bleed {
  margin-inline: calc(50% - 50vw); margin-block: 0;
  border: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  border-radius: 0; background: none; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.figures.bleed .figure {
  border-left: 1px solid var(--rule); padding: 1.9rem 2rem;
}
.figures.bleed .figure:first-child { border-left: 0; }
.figures.bleed .figure strong { font-size: 1.85rem; }
/* The artboard tints only the second figure's number; the rest stay ink. */
.figure.lit strong { color: var(--accent); }
.figure:not(.lit) strong { color: var(--ink); }

/* ------------------------------------------------------ two-column head -- */

.section-split {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 3rem; align-items: start; margin: 0 0 1.5rem;
}
.section-split h2 { margin-top: 0; }
.section-split .aside {
  color: var(--ink-muted); font-size: 0.95rem; text-align: right; margin: 0.6rem 0 0;
}

/* ------------------------------------------------------- split callout --- */

.stop.split, .note.split {
  display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 1.6rem;
  align-items: start; max-width: none;
}
.stop.split .callout-title, .note.split .callout-title {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; margin: 0; color: var(--warn);
}
.stop.split p:last-child, .note.split p:last-child { margin: 0; }

/* ----------------------------------------------------- closing, centred -- */

.closing.centred { text-align: center; margin: 0 auto; max-width: 46rem; }
.closing.centred h2 {
  font-size: clamp(2rem, 4.4vw, 3rem); letter-spacing: -0.035em;
  margin: 0 0 1rem; max-width: 18ch; margin-inline: auto;
}
.closing.centred p { margin-inline: auto; }

.price-figure { color: var(--accent); }

@media (max-width: 780px) {
  .section-split { grid-template-columns: 1fr; gap: 0.5rem; }
  .section-split .aside { text-align: left; }
  .stop.split, .note.split { grid-template-columns: 1fr; gap: 0.6rem; }
}

.auth-foot {
  margin: 1.8rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--rule-soft);
  font-size: 0.83rem; line-height: 1.5; color: var(--ink-faint);
}

/* The bands run to the footer in the artboard. Where a page ends in one, the
   page's own bottom padding and the footer's top margin stack into 160px of
   empty ground that is not in the design. */
.page:has(> .band:last-of-type) { padding-bottom: 0; }
.page:has(> .band:last-of-type) + .site-footer,
main:has(.band:last-of-type) ~ .site-footer { margin-top: 0; }