/* homewend — the Homewend site theme for homing.
   Minimal: white, one blue, Inter. Dark mode follows the OS and uses the Tokyo Night
   palette. Mobile first; one breakpoint for tablets and one for desktop.
   Every color and every spacing comes from the tokens below — see design.md. */

@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url(/fonts/inter-400.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url(/fonts/inter-500.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url(/fonts/inter-600.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url(/fonts/inter-700.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url(/fonts/jetbrains-mono-400.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url(/fonts/jetbrains-mono-500.woff2) format("woff2"); }

:root {
  /* color */
  --bg: #FFFFFF;
  --surface: #FFFFFF;      /* cards */
  --soft: #FAFAFA;         /* upcoming cards, footer */
  --fg: #0A0A0A;           /* headings */
  --text: #333333;         /* body copy */
  --muted: #6B6B6B;        /* secondary text */
  --faint: #9A9A9A;        /* notes, captions */
  --line: #EDEDED;         /* hairlines between sections and rows */
  --border: #E5E5E5;       /* card borders */
  --field: #D4D4D4;        /* input borders */
  --accent: #2F5BFF;       /* the one action color: buttons, links, icons */
  --accent-soft: #2F5BFF14;
  --on-accent: #FFFFFF;
  --ok: #1E9E5A;
  --warn: #C98A12;
  --err: #D93A2B;
  --folder: #5AA9F5;
  --chip: #FACC15;         /* "Upcoming" */
  --on-chip: #3F2F00;

  /* type */
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  /* spacing scale — nothing uses a value outside it */
  --s-4: 4px; --s-8: 8px; --s-12: 12px; --s-16: 16px; --s-24: 24px;
  --s-32: 32px; --s-40: 40px; --s-64: 64px; --s-96: 96px; --s-128: 128px;

  /* shape */
  --r-s: 6px; --r-m: 12px; --r-l: 16px; --r-pill: 999px;
  --control: 52px;         /* input and button height */

  /* layout */
  --page: 1280px;
  --gutter: var(--s-16);
  --measure: 720px;        /* article column */
}
/* Dark = Tokyo Night. It follows the OS unless the visitor picked a theme with the
   footer toggle (saved as data-theme on <html>). */
:root[data-theme="dark"] {
  --bg: #1A1B26; --surface: #1F2335; --soft: #16161E;
  --fg: #C0CAF5; --text: #A9B1D6; --muted: #9AA5CE; --faint: #565F89;
  --line: #292E42; --border: #2F3549; --field: #3B4261;
  --accent: #7AA2F7; --accent-soft: #7AA2F726; --on-accent: #1A1B26;
  --ok: #9ECE6A; --warn: #E0AF68; --err: #F7768E; --folder: #7DCFFF;
  --chip: #E0AF68; --on-chip: #1A1B26;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1A1B26; --surface: #1F2335; --soft: #16161E;
    --fg: #C0CAF5; --text: #A9B1D6; --muted: #9AA5CE; --faint: #565F89;
    --line: #292E42; --border: #2F3549; --field: #3B4261;
    --accent: #7AA2F7; --accent-soft: #7AA2F726; --on-accent: #1A1B26;
    --ok: #9ECE6A; --warn: #E0AF68; --err: #F7768E; --folder: #7DCFFF;
    --chip: #E0AF68; --on-chip: #1A1B26;
  }
}
@media (min-width: 48rem) { :root { --gutter: var(--s-40); } }
@media (min-width: 72rem) { :root { --gutter: 80px; } }

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { color: var(--fg); margin: 0; font-weight: 700; }
p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { display: block; max-width: 100%; height: auto; }
code, pre { font-family: var(--mono); }
svg { flex: none; }
[hidden] { display: none !important; }
main > section, body > header, body > footer { padding-inline: max(var(--gutter), (100% - var(--page)) / 2); }

/* ---------- header ---------- */
[data-site-header] { display: flex; align-items: center; justify-content: space-between; gap: var(--s-24); padding-block: var(--s-24); }
[data-brand] { display: inline-flex; align-items: center; gap: var(--s-8); color: var(--fg); font-size: 18px; letter-spacing: -0.02em; }
[data-brand]:hover { text-decoration: none; }
[data-brand] strong { font-weight: 700; }
[data-mark] { width: auto; height: 24px; color: var(--accent); }
[data-site-header] nav { display: flex; align-items: center; gap: var(--s-24); font-size: 15px; font-weight: 500; }
[data-site-header] nav a { color: var(--muted); }
[data-site-header] nav a[data-join] { color: var(--accent); font-weight: 600; }
[data-wide] { display: none; }
@media (min-width: 48rem) { [data-wide] { display: inline; } [data-narrow] { display: none; } [data-brand] { font-size: 20px; } [data-mark] { height: 28px; } }

/* ---------- buttons and the waitlist form ---------- */
.homing-form { width: 100%; max-width: 560px; }
.homing-form--newsletter .homing-form__row { display: flex; flex-direction: column; gap: var(--s-12); }
.homing-form__input {
  flex: 1 1 auto; min-width: 0; height: var(--control); padding: 0 var(--s-16);
  font: 400 16px var(--sans); color: var(--fg); background: var(--surface);
  border: 1px solid var(--field); border-radius: var(--r-m);
}
.homing-form__input::placeholder { color: var(--faint); }
.homing-form__input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.homing-form__button--subscribe, .homing-form__button--send, .homing-form__button--accept {
  height: var(--control); padding: 0 var(--s-24); border: 0; border-radius: var(--r-m); cursor: pointer;
  font: 600 16px var(--sans); color: var(--on-accent); background: var(--accent); white-space: nowrap;
}
.homing-form__button--subscribe:hover, .homing-form__button--send:hover, .homing-form__button--accept:hover { filter: brightness(1.08); }
.homing-form__button:disabled { opacity: 0.6; cursor: default; }
/* Waiting on the server: the button keeps its size and turns into a spinner. */
.homing-form__button--subscribe[data-loading] { position: relative; color: transparent; opacity: 1; }
.homing-form__button--subscribe[data-loading]::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px;
  border: 2px solid var(--on-accent); border-right-color: transparent; border-radius: 50%;
  animation: hw-spin .7s linear infinite;
}
@keyframes hw-spin { to { transform: rotate(360deg); } }
.homing-form__msg { margin-top: var(--s-12); font-size: 14px; color: var(--muted); min-height: 1.4em; }
.homing-form__msg:empty { display: none; }
.homing-form__msg[data-state="ok"] { color: var(--ok); font-weight: 600; }
.homing-form__msg[data-state="err"] { color: var(--err); }
@media (min-width: 48rem) { .homing-form--newsletter .homing-form__row { flex-direction: row; } }
/* The code step: title, "we sent a code to <email>", four boxes, resend. */
/* Centred, like the email step it replaces in the hero. */
.homing-form--newsletter .homing-form__step--code:not([hidden]) { display: flex; flex-direction: column; gap: var(--s-12); align-items: center; text-align: center; }
.homing-form__code-title { margin: 0; font: 600 16px var(--sans); color: var(--fg); }
.homing-form__code-msg { margin: 0; font-size: 14px; color: var(--muted); }
.homing-form__code-msg:empty { display: none; }
.homing-form__code-msg strong { color: var(--fg); }
.homing-form__digits { display: flex; gap: var(--s-12); }
.homing-form__digit { flex: 0 0 52px; padding: 0; text-align: center; font: 500 22px var(--mono); }
.homing-form__digits[data-error] .homing-form__digit { border-color: var(--err); }
.homing-form__digits[data-shake] { animation: hw-shake .4s; }
@keyframes hw-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.homing-form__step--code[data-busy] .homing-form__digit { opacity: .55; }
.homing-form__spinner { display: none; }
.homing-form__button--resend { background: none; border: 0; padding: 0; font: 400 14px var(--sans); color: var(--muted); text-decoration: underline; cursor: pointer; }
.homing-form__note { margin: var(--s-12) 0 0; font-size: 14px; color: var(--muted); }
.homing-form__needs-js { margin: var(--s-12) 0 0; font-size: 14px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .homing-form__digits[data-shake] { animation: none; } .homing-form__button--subscribe[data-loading]::after { animation-duration: 2.4s; } }
/* Inbox forms (ama, scrivici): fields stacked, the counter under its field. */
.homing-form--inbox .homing-form__step:not([hidden]) { display: flex; flex-direction: column; gap: var(--s-16); align-items: stretch; }
.homing-form__notice { margin: 0; white-space: pre-line; color: var(--fg); }
.homing-form__field { display: flex; flex-direction: column; gap: 6px; }
.homing-form__field-label { font: 600 14px var(--sans); color: var(--fg); }
.homing-form__optional { font-weight: 400; color: var(--muted); }
textarea.homing-form__input { height: auto; min-height: 6rem; padding: var(--s-12) var(--s-16); resize: vertical; field-sizing: content; }
select.homing-form__input { padding-right: var(--s-8); }
.homing-form__count { align-self: flex-end; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.homing-form__count[data-full] { color: var(--fg); }
.homing-form__button--send, .homing-form__button--accept { align-self: flex-start; }

/* ---------- home: hero ---------- */
[data-hero] { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-24); padding-block: var(--s-40) var(--s-64); }
[data-badge] {
  display: inline-flex; align-items: center; gap: var(--s-8); padding: var(--s-8) 14px;
  font-size: 14px; font-weight: 600; color: var(--ok);
  background: color-mix(in srgb, var(--ok) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 33%, transparent); border-radius: var(--r-pill);
}
[data-badge]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
[data-hero-text] { display: flex; flex-direction: column; align-items: center; gap: var(--s-16); }
[data-hero] h1 { max-width: 11em; font-size: clamp(40px, 7vw, 80px); line-height: 1.03; letter-spacing: -0.037em; text-wrap: balance; }
[data-lead] { font-size: 18px; color: var(--muted); }
/* What Homewend does, said once at length: the story the before and after
   show, set right above them. */
[data-story] { max-width: 34em; margin: 0 auto var(--s-40); text-align: center; font-size: 20px; line-height: 1.5; color: var(--text); text-wrap: pretty; }
[data-story] a { color: var(--accent); text-decoration: none; font-weight: 600; }
[data-story] strong { color: var(--fg); }
@media (max-width: 480px) { [data-story] { font-size: 17px; padding-inline: var(--gutter); } }
/* A measure for reading: the hero's lead no longer spans the whole page. */
[data-hero] [data-lead] { max-width: 28em; text-wrap: pretty; }
[data-hero-cta] { display: flex; flex-direction: column; align-items: center; gap: var(--s-12); width: 100%; }
[data-hero-cta] .homing-form { max-width: 520px; }
[data-note] { font-size: 13px; color: var(--faint); }
/* How to get Homewend: the command line today, the desktop app soon; two rows
   of one panel, so the two ways never read as two buttons side by side. */
[data-get] { width: 100%; max-width: 600px; border: 1px solid var(--border); border-radius: var(--r-l); background: var(--soft); text-align: left; overflow: hidden; }
[data-get-row] { display: flex; flex-direction: column; gap: var(--s-12); padding: var(--s-16); }
[data-get-row] + [data-get-row] { border-top: 1px solid var(--line); }
[data-get-row] h2 { display: flex; align-items: center; justify-content: space-between; gap: var(--s-12); font-size: 17px; font-weight: 600; color: var(--fg); }
[data-get-row] > p { font-size: 15px; color: var(--muted); }
[data-tag] { flex: none; padding: 3px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; }
[data-tag="now"] { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
[data-tag="soon"] { background: var(--chip); color: var(--on-chip); }
[data-command] { display: flex; align-items: center; gap: 10px; min-height: var(--control); padding: 8px 8px 8px 16px; border: 1px solid var(--border); border-radius: var(--r-m); background: var(--surface); font-family: var(--mono); font-size: 15px; color: var(--fg); }
[data-command] > span { color: var(--faint); }
/* One line, as it is pasted: on a narrow screen it scrolls rather than break. */
[data-command] code { flex: 1; min-width: 0; white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
@media (max-width: 480px) { [data-command] { font-size: 13px; } }
[data-command] button { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: var(--r-s); background: none; color: var(--muted); cursor: pointer; }
[data-command] button:hover { background: var(--accent-soft); color: var(--accent); }
[data-command] button svg { width: 16px; height: 16px; }
[data-command] button[data-done] { color: var(--ok); }
[data-signup] summary { list-style: none; display: flex; align-items: center; justify-content: center; height: 48px; border: 1px solid var(--border); border-radius: var(--r-m); background: var(--surface); color: var(--accent); font-weight: 600; cursor: pointer; }
[data-signup] summary::-webkit-details-marker { display: none; }
[data-signup][open] summary { display: none; }
[data-signup] .homing-form { max-width: none; }
[data-signup] [data-note] { margin-top: var(--s-8); }
[data-announce] { padding-block: var(--s-40) var(--s-64); }
@media (min-width: 48rem) {
  [data-hero] { gap: var(--s-40); padding-block: 112px var(--s-96); }
  [data-hero-text] { gap: var(--s-24); }
  [data-badge] { font-size: 15px; }
  [data-lead] { font-size: 24px; }
  [data-note] { font-size: 14px; }
}

/* ---------- home: before / after ---------- */
[data-compare] { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-16); padding-bottom: var(--s-64); }
[data-compare] > article { display: flex; flex-direction: column; gap: var(--s-16); padding: var(--s-24); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-l); }
[data-compare] h2 { display: flex; align-items: center; gap: var(--s-8); font-size: 17px; font-weight: 600; }
[data-compare] h2 svg { width: 20px; height: 20px; color: var(--muted); }
[data-after] h2 svg { color: var(--ok); }
/* The arrow between "today" and "with Homewend": down on the phone, right on desktop. */
[data-arrow] { display: grid; place-items: center; }
[data-arrow] svg { width: 40px; height: 40px; padding: 8px; border-radius: 50%; background: var(--accent); color: var(--on-accent); transform: rotate(90deg); stroke-width: 2.5; }
[data-zips] { list-style: none; margin: 0; padding: 0; }
[data-zips] li { display: grid; grid-template-columns: 1fr auto; gap: var(--s-4) var(--s-12); align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
[data-zips] code { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-size] { display: none; font-family: var(--mono); font-size: 13px; color: var(--faint); }
[data-zips] [data-state] { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: 13px; font-weight: 500; }
[data-zips] [data-state]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
[data-state="ok"] { color: var(--ok); }
[data-state="warn"] { color: var(--warn); }
[data-state="err"] { color: var(--err); }
[data-more] { font-size: 14px; color: var(--muted); }
[data-photos] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
[data-photos] img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-s); background: var(--line); }
[data-count] { display: flex; flex-direction: column; gap: var(--s-4); }
[data-count] strong { font-size: 20px; color: var(--fg); letter-spacing: -0.02em; }
[data-count] span { font-size: 14px; color: var(--muted); }
[data-folders] { display: flex; flex-direction: column; gap: var(--s-12); padding-top: var(--s-8); }
[data-folders] code { font-size: 12px; color: var(--faint); }
[data-folders] ul { display: flex; justify-content: space-between; list-style: none; margin: 0; padding: 0; }
[data-folders] li { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); font-size: 12px; font-weight: 500; color: var(--text); }
[data-folders] li svg { width: 34px; height: 34px; color: var(--folder); stroke-width: 1.6; }
[data-folders] [data-gap] { height: 34px; line-height: 34px; font-size: 20px; color: var(--faint); }
[data-folders] small { font-family: var(--mono); font-size: 11px; color: var(--faint); }
[data-folders] li:nth-child(2), [data-folders] li:nth-child(6) { display: none; }
@media (min-width: 48rem) {
  [data-size] { display: inline; }
  [data-zips] li { grid-template-columns: 1fr auto 130px; }
  [data-folders] li:nth-child(2), [data-folders] li:nth-child(6) { display: flex; }
  [data-folders] li svg, [data-folders] [data-gap] { width: 40px; height: 40px; line-height: 40px; }
}
@media (min-width: 60rem) {
  [data-compare] { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--s-16); padding-bottom: var(--s-96); }
  [data-arrow] svg { transform: none; }
  [data-compare] > article { padding: var(--s-32); gap: var(--s-24); }
}

/* ---------- home: section titles, steps, boxes ---------- */
[data-steps], [data-boxes] { display: flex; flex-direction: column; gap: var(--s-24); padding-block: var(--s-40); border-top: 1px solid var(--line); }
[data-boxes][data-upcoming] { border-top: 0; padding-top: 0; padding-bottom: var(--s-64); }
[data-steps] > h2, [data-boxes] > h2 { font-size: 30px; letter-spacing: -0.03em; }
[data-steps] ol { display: grid; gap: var(--s-32); list-style: none; margin: 0; padding: 0; }
[data-steps] li { display: flex; flex-direction: column; gap: var(--s-12); }
[data-steps] li svg { width: 26px; height: 26px; color: var(--accent); }
[data-steps] h3 { font-size: 19px; font-weight: 600; }
[data-steps] p { color: var(--muted); line-height: 1.5; }
[data-grid] { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-12); }
[data-box] { display: flex; flex-direction: column; gap: var(--s-12); padding: var(--s-24); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-l); }
[data-box-top] { display: flex; align-items: center; justify-content: space-between; }
[data-icon] { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-m); background: var(--accent-soft); color: var(--accent); }
[data-icon] svg { width: 22px; height: 22px; }
[data-box] h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; margin-top: var(--s-4); }
[data-box] p { color: var(--muted); line-height: 1.5; }
[data-chip] { padding: 5px 11px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; background: var(--chip); color: var(--on-chip); }
/* upcoming = greyed out: it does not exist yet */
[data-upcoming] [data-box] { background: var(--soft); border-color: var(--line); }
[data-upcoming] [data-icon] { background: var(--line); color: var(--faint); }
[data-upcoming] [data-box] h3 { color: var(--muted); }
[data-upcoming] [data-box] p { color: var(--faint); }
@media (min-width: 48rem) {
  [data-steps], [data-boxes] { gap: var(--s-40); padding-block: var(--s-64); }
  [data-boxes][data-upcoming] { padding-bottom: var(--s-128); }
  [data-steps] > h2, [data-boxes] > h2 { font-size: 40px; }
  [data-steps] ol { grid-template-columns: repeat(3, 1fr); gap: var(--s-40); }
  [data-steps] h3 { font-size: 20px; }
  [data-grid] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-24); }
  [data-box] { padding: 28px; }
  [data-box] h3 { font-size: 21px; }
}
@media (min-width: 72rem) { [data-steps], [data-boxes] { padding-inline: max(160px, (100% - var(--page)) / 2); } }

/* ---------- article ---------- */
[data-article], [data-index] { max-width: calc(var(--measure) + 2 * var(--gutter)); margin: 0 auto; padding: var(--s-32) var(--gutter) var(--s-64); }
[data-article] > article > header { display: flex; flex-direction: column; gap: var(--s-16); padding-bottom: var(--s-24); margin-bottom: var(--s-32); border-bottom: 1px solid var(--line); }
[data-crumb] a { font-size: 14px; font-weight: 600; }
[data-article] h1 { font-size: clamp(32px, 5vw, 52px); line-height: 1.1; letter-spacing: -0.035em; }
[data-article] [data-lead] { font-size: 18px; line-height: 1.55; }
[data-meta] { font-size: 14px; color: var(--faint); }
[data-body] { font-size: 17px; line-height: 1.7; }
[data-body] > * + * { margin-top: var(--s-24); }
[data-body] h2 { font-size: 24px; letter-spacing: -0.02em; line-height: 1.25; margin-top: var(--s-40); }
[data-body] h3 { font-size: 20px; line-height: 1.3; margin-top: var(--s-32); }
[data-body] a { text-decoration: underline; text-underline-offset: 2px; }
[data-body] ul, [data-body] ol { padding-left: 1.25em; }
[data-body] li + li { margin-top: var(--s-8); }
[data-body] strong { color: var(--fg); }
[data-body] code { font-size: 0.88em; padding: 2px 5px; border-radius: 4px; background: var(--soft); border: 1px solid var(--line); }
[data-body] pre { overflow-x: auto; padding: var(--s-16); border-radius: var(--r-m); background: var(--soft); border: 1px solid var(--line); font-size: 14px; line-height: 1.6; }
[data-body] pre code { padding: 0; border: 0; background: none; }
[data-body] blockquote { margin-inline: 0; padding: var(--s-16) var(--s-24); border-left: 3px solid var(--accent); border-radius: 0 var(--r-m) var(--r-m) 0; background: color-mix(in srgb, var(--accent) 6%, transparent); }
[data-body] table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 1.45; border: 1px solid var(--border); border-radius: var(--r-m); overflow: hidden; display: block; overflow-x: auto; }
[data-body] th, [data-body] td { padding: var(--s-12) var(--s-16); text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
[data-body] th { font-weight: 600; color: var(--muted); background: var(--soft); }
[data-body] tr:last-child td { border-bottom: 0; }
[data-body] img, [data-body] figure { margin-inline: 0; border-radius: var(--r-m); }
[data-body] hr { border: 0; border-top: 1px solid var(--line); }
[data-endcta] { display: flex; flex-direction: column; gap: var(--s-12); margin-top: var(--s-64); padding: var(--s-24); border: 1px solid var(--border); border-radius: var(--r-l); }
[data-endcta] h2 { display: flex; align-items: center; gap: var(--s-8); font-size: 18px; letter-spacing: -0.015em; }
[data-endcta] h2 [data-mark] { height: 22px; }
[data-endcta] > p { color: var(--muted); }
[data-endcta] .homing-form { margin-top: var(--s-4); }
@media (min-width: 48rem) {
  [data-article], [data-index] { padding-top: var(--s-64); padding-bottom: var(--s-96); }
  [data-article] [data-lead] { font-size: 21px; }
  [data-body] { font-size: 18px; }
  [data-body] h2 { font-size: 30px; margin-top: var(--s-64); }
  [data-endcta] { padding: 28px; }
}

/* ---------- list ---------- */
[data-index] > header { display: flex; flex-direction: column; gap: var(--s-16); margin-bottom: var(--s-32); }
[data-index] h1 { font-size: clamp(32px, 5vw, 52px); letter-spacing: -0.035em; line-height: 1.1; }
[data-index] ul { list-style: none; margin: 0; padding: 0; }
[data-index] li { border-top: 1px solid var(--line); }
[data-index] li a { display: flex; flex-direction: column; gap: var(--s-8); padding-block: var(--s-24); color: inherit; }
[data-index] li a:hover { text-decoration: none; }
[data-index] li a:hover h2 { color: var(--accent); }
[data-index] li h2 { font-size: 20px; letter-spacing: -0.015em; line-height: 1.3; }
[data-index] li p { color: var(--muted); }
[data-index] time { font-size: 14px; color: var(--faint); }

/* ---------- footer ---------- */
[data-site-footer] { display: flex; flex-direction: column; gap: var(--s-32); padding-block: var(--s-40) var(--s-32); background: var(--soft); border-top: 1px solid var(--line); }
[data-foot-top] { display: flex; flex-direction: column; gap: var(--s-32); }
[data-foot-brand] { display: flex; flex-direction: column; gap: var(--s-12); max-width: 320px; }
[data-foot-brand] p { font-size: 14px; line-height: 1.55; color: var(--muted); }
[data-foot-cols] { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-32) var(--s-24); }
[data-foot-cols] strong { display: block; margin-bottom: var(--s-12); font-size: 13px; font-weight: 600; color: var(--fg); }
[data-foot-cols] ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-12); }
[data-foot-cols] a { font-size: 14px; color: var(--muted); }
[data-foot-bottom] { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-top: var(--s-24); border-top: 1px solid var(--line); font-size: 13px; color: var(--faint); }
[data-theme-toggle] { display: grid; place-items: center; width: 36px; height: 36px; margin-top: var(--s-8); padding: 0; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); color: var(--muted); cursor: pointer; }
[data-theme-toggle]:hover { color: var(--fg); border-color: var(--field); }
[data-theme-toggle] svg { width: 18px; height: 18px; }
[data-when="dark"] { display: none; }
:root[data-theme="dark"] [data-when="dark"] { display: contents; }
:root[data-theme="dark"] [data-when="light"] { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-when="dark"] { display: contents; }
  :root:not([data-theme="light"]) [data-when="light"] { display: none; }
}

@media (min-width: 60rem) {
  [data-site-footer] { gap: var(--s-40); padding-block: var(--s-64) var(--s-40); }
  [data-foot-top] { flex-direction: row; gap: var(--s-64); }
  [data-foot-brand] { flex: 0 0 320px; }
  [data-foot-cols] { flex: 1; grid-template-columns: repeat(4, 1fr); }
  [data-foot-bottom] { flex-direction: row; align-items: center; gap: var(--s-24); }
  [data-foot-bottom] > span:nth-child(2) { margin-left: auto; }
  [data-theme-toggle] { margin-top: 0; }
}

/* ---------- features page, and the link from the home to it ---------- */
[data-more-link] { font-size: 15px; font-weight: 600; }
[data-features] [data-page-head] { display: flex; flex-direction: column; gap: var(--s-16); padding-block: var(--s-64) var(--s-16); max-width: calc(var(--measure) + 2 * var(--gutter)); }
[data-features] [data-page-head] h1 { font-size: clamp(32px, 5vw, 52px); letter-spacing: -0.035em; line-height: 1.1; }
[data-features] > [data-boxes] { border-top: 0; }
[data-features] > [data-endcta] { margin: 0 auto var(--s-64); max-width: var(--measure); }
@media (min-width: 72rem) { [data-features] [data-page-head] { padding-inline: max(160px, (100% - var(--page)) / 2); } }

/* ---------- home: the closing call to action ---------- */
[data-closing] { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-16); padding-block: var(--s-64); background: var(--soft); border-top: 1px solid var(--line); }
[data-closing] h2 { font-size: clamp(34px, 6vw, 64px); line-height: 1.05; letter-spacing: -0.035em; }
[data-closing] .homing-form { max-width: 520px; margin-top: var(--s-8); }
[data-closing] [data-note] a { color: var(--faint); text-decoration: underline; }
@media (min-width: 48rem) { [data-closing] { gap: var(--s-24); padding-block: var(--s-96) 112px; } }

/* The story continues the hero: no section's worth of space between them. */
[data-hero]:has(+ [data-story]) { padding-bottom: var(--s-24); }