/* Galleyleaf hub: a galley proof. Cool proof paper, slate ink, and the
   proofreader's blue pencil as the only accent, used for the margin marks. */

/* Newsreader and Public Sans, served from the hub itself (SIL Open Font
   License, in fonts/), so pages don't wait on Google Fonts. Variable files:
   one per script covers every weight, and Newsreader's optical sizes. */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/fonts/newsreader-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/fonts/newsreader-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/public-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/public-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --paper: #eef0eb;
  --sheet: #f7f8f5;
  --ink: #1e2a2f;
  --ink-soft: #52605f;
  --rule: #c8cfca;
  --pencil: #2d6cb0;
  --pencil-soft: #2d6cb01f;
  --red: #b3362b;
  --red-soft: #b3362b14;
  --green: #3b7a4e;
  --focus: #2d6cb0;

  --serif: "Newsreader", Georgia, serif;
  --sans: "Public Sans", system-ui, sans-serif;
  --gutter: 4.5rem;
  color-scheme: light;
}

/* Dark follows the device, unless the reader picked a theme (js/theme.js). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f1428;
    --sheet: #171e38;
    --ink: #f2f3f7;
    --ink-soft: #a7adc6;
    --rule: #2b3354;
    --pencil: #8fbaff;
    --pencil-soft: #8fbaff26;
    --red: #ef8f86;
    --red-soft: #ef8f8614;
    --green: #8cc79c;
    --focus: #8fbaff;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0f1428;
  --sheet: #171e38;
  --ink: #f2f3f7;
  --ink-soft: #a7adc6;
  --rule: #2b3354;
  --pencil: #8fbaff;
  --pencil-soft: #8fbaff26;
  --red: #ef8f86;
  --red-soft: #ef8f8614;
  --green: #8cc79c;
  --focus: #8fbaff;
  color-scheme: dark;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
}

a { color: var(--pencil); text-underline-offset: 0.18em; }

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

.galley {
  max-width: calc(38rem + var(--gutter));
  margin: 0 auto;
  padding: 2.5rem 1rem 5rem;
}

/* ---------- Masthead ---------- */

.masthead { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}
.theme-toggle:hover { color: var(--pencil); background: var(--pencil-soft); }
.theme-toggle svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle[aria-pressed="true"] .i-moon, .theme-toggle[aria-pressed="false"] .i-sun { display: none; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font: 500 1.25rem/1 var(--serif);
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.wordmark svg { width: 1.6rem; height: 1.6rem; color: var(--pencil); }

.intro { margin: 2.75rem 0 2.5rem var(--gutter); }

h1 {
  font: 400 clamp(2.1rem, 6vw, 2.9rem)/1.08 var(--serif);
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
  text-wrap: balance;
}

.lede { margin: 0; color: var(--ink-soft); font-size: 1.125rem; max-width: 34rem; }

/* ---------- Steps with margin marks ---------- */

.steps { list-style: none; margin: 0; padding: 0; }

.step {
  position: relative;
  padding: 0 0 2.25rem var(--gutter);
}
/* The margin rule that runs down the galley. */
.step::before {
  content: "";
  position: absolute;
  left: calc(var(--gutter) - 1.25rem);
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--rule);
}

.mark {
  position: absolute;
  left: 0;
  top: -0.2rem;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--pencil);
}
.mark svg { width: 100%; height: 100%; overflow: visible; }
.mark .ring { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.mark .num { font: 500 15px/1 var(--serif); fill: currentColor; text-anchor: middle; dominant-baseline: central; }
.mark .tick {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  opacity: 0;
}
.step.is-done .mark .num { opacity: 0; }
.step.is-done .mark .tick { opacity: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 420ms cubic-bezier(.6,.1,.3,1); }

.step.is-waiting { color: var(--ink-soft); }
.step.is-waiting .mark { color: var(--rule); }
.step.is-waiting .step-body { display: none; }

h2 {
  font: 500 1.375rem/1.25 var(--serif);
  font-variation-settings: "opsz" 24;
  margin: 0 0 0.6rem;
}

.step p { margin: 0 0 0.9rem; }
.hint { color: var(--ink-soft); font-size: 0.9375rem; }

.summary { color: var(--ink-soft); margin: -0.2rem 0 0; }
.step:not(.is-done) .summary { display: none; }
.step.is-done.is-collapsed .step-body { display: none; }

ol.plain { margin: 0 0 1rem; padding-left: 1.25rem; }
ol.plain li { margin-bottom: 0.35rem; }

/* ---------- Controls ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.875rem;
  padding: 0 1.25rem;
  border-radius: 0.5rem;
  border: 1.5px solid var(--pencil);
  background: transparent;
  color: var(--pencil);
  font: 600 1rem/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--pencil-soft); }
.btn-primary { background: var(--pencil); color: var(--sheet); }
.btn-primary:hover { background: var(--pencil); filter: brightness(1.08); }
.btn:disabled { opacity: 0.5; cursor: default; filter: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

.link-btn {
  background: none;
  border: 0;
  padding: 0.25rem 0;
  min-height: 2.75rem;
  color: var(--pencil);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.field .hint { display: block; margin-top: 0.3rem; }
input[type="text"], input[type="email"], select {
  width: 100%;
  min-height: 2.875rem;
  padding: 0.55rem 0.75rem;
  border: 1.5px solid var(--rule);
  border-radius: 0.5rem;
  background: var(--sheet);
  color: var(--ink);
  font: inherit;
}
input:focus, select:focus { border-color: var(--pencil); outline: none; box-shadow: 0 0 0 3px var(--pencil-soft); }

/* ---------- Project list ---------- */

.projects { list-style: none; margin: 0 0 0.75rem; padding: 0; border-top: 1px solid var(--rule); }
.projects li { border-bottom: 1px solid var(--rule); }
.projects label {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  min-height: 3.25rem;
  padding: 0.5rem 0.25rem;
  cursor: pointer;
}
.projects input { accent-color: var(--pencil); width: 1.15rem; height: 1.15rem; flex: none; }
.projects .id { display: block; color: var(--ink-soft); font-size: 0.875rem; }

.note {
  border-left: 3px solid var(--pencil);
  background: var(--pencil-soft);
  padding: 0.7rem 0.9rem;
  margin: 0 0 1rem;
  border-radius: 0 0.4rem 0.4rem 0;
}
.note.is-warning { border-color: var(--red); background: var(--red-soft); }
.note p:last-child { margin-bottom: 0; }

details { margin: 0 0 1rem; }
summary { cursor: pointer; color: var(--pencil); min-height: 2.75rem; display: flex; align-items: center; }
details[open] summary { margin-bottom: 0.5rem; }

.plain-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.plain-fieldset legend { padding: 0; margin-bottom: 0.5rem; }

/* The "create a project" guide: one item per Firebase console screen. */
.guide { margin: 0 0 1rem; }
.guide[open] { padding-bottom: 0.25rem; }
.screens { margin: 0 0 1rem; padding-left: 1.4rem; }
.screens li { margin-bottom: 0.6rem; padding-left: 0.2rem; }
.screens li::marker { color: var(--pencil); font: 500 1rem var(--serif); }
.screens figure { margin: 0.5rem 0 0; }
.screens img { display: block; max-width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 0.5rem; }
.on-phone { display: none; }
@media (pointer: coarse) { .on-phone { display: block; } }
.waiting-line::before {
  content: "";
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--pencil);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.25; } }

/* ---------- Progress ---------- */

.tasks { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.task { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.6rem; padding: 0.4rem 0; }
.task-icon { width: 1.5rem; height: 1.5rem; margin-top: 0.05rem; color: var(--rule); }
.task-icon svg { width: 100%; height: 100%; }
.task-detail { display: block; color: var(--ink-soft); font-size: 0.875rem; }
.task.is-working .task-icon { color: var(--pencil); }
.task.is-working .task-icon svg { animation: spin 1.1s linear infinite; }
.task.is-done .task-icon { color: var(--pencil); }
.task.is-failed .task-icon { color: var(--red); }
.task.is-failed .task-detail { color: var(--red); }
@keyframes spin { to { transform: rotate(360deg); } }

/* The finished site, set like a proof sheet so the address is the first thing seen. */
.site-card {
  margin: 0 0 1.75rem;
  padding: 1.5rem 1.5rem 1.6rem;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 0.25rem;
}
.site-link {
  display: inline-block;
  font: 500 clamp(1.625rem, 6vw, 2.25rem)/1.15 var(--serif);
  color: var(--ink);
  text-decoration-color: var(--pencil);
  text-decoration-thickness: 2px;
  word-break: break-all;
}
.site-link:hover { color: var(--pencil); }
.site-card-note { margin: 0.4rem 0 1.25rem; color: var(--ink-soft); }
.result ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.result li { margin-bottom: 0.35rem; }

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

.prose { margin-left: var(--gutter); max-width: 38rem; }
.prose h2 { margin-top: 2.25rem; }
.prose ul { padding-left: 1.25rem; margin: 0 0 1rem; }
.prose li { margin-bottom: 0.4rem; }
.prose p { margin: 0 0 0.9rem; }

/* Privacy and terms: one reading column, dated like a proof. */
.updated { margin: 1rem 0 0; color: var(--ink-soft); font-size: 0.9375rem; }
.policy h2 { font-size: 1.375rem; scroll-margin-top: 1.5rem; }
.prose .policy-end { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); color: var(--ink-soft); }

.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); margin: 0; }
.faq details, .learn > section { scroll-margin-top: 1.5rem; }
.faq summary {
  list-style: none;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.25rem;
  padding: 0.6rem 0;
  color: var(--ink);
  font: 500 1.125rem/1.35 var(--serif);
}
.faq summary::-webkit-details-marker { display: none; }
/* A pencilled plus that turns into a minus. */
.faq summary::after {
  content: "+";
  flex: none;
  color: var(--pencil);
  font: 400 1.5rem/1 var(--sans);
}
.faq details[open] summary::after { content: "\2212"; }
.faq details[open] summary { margin-bottom: 0; }
.faq details > :not(summary) { margin-top: 0; }
.faq details[open] { padding-bottom: 0.75rem; }

/* ---------- Maintainer's admin page ---------- */
/* A wider desk than the galley, for tables. */

.desk { max-width: 76rem; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
.desk-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.desk-account { display: flex; align-items: center; gap: 0.75rem; color: var(--ink-soft); font-size: 0.9375rem; }
.desk h1 { font-size: clamp(1.9rem, 4vw, 2.4rem); margin-bottom: 1.25rem; }
.desk .lede { margin-bottom: 1rem; }

.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0;
  margin: 0 0 2.5rem;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}
.figure { padding: 0.9rem 1rem 1rem 0; }
.figure + .figure { padding-left: 1rem; border-left: 1px solid var(--rule); }
.figure dt { color: var(--ink-soft); font-size: 0.875rem; }
.figure dd { margin: 0.15rem 0 0; font: 400 2.25rem/1.1 var(--serif); font-variant-numeric: lining-nums tabular-nums; }

.panel { margin-bottom: 2.75rem; }
.panel h2 { margin-bottom: 0.25rem; }
.panel > .hint { margin: 0 0 0.75rem; }
.panel-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.filter { display: flex; align-items: center; gap: 0.5rem; color: var(--ink-soft); font-size: 0.9375rem; }
.filter select { width: auto; min-height: 2.5rem; padding: 0.3rem 0.6rem; }
.empty { padding: 1rem 0; border-top: 1px solid var(--rule); }

.data-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.data-table th {
  text-align: left;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  padding: 0.55rem 0.75rem 0.55rem 0;
  border-bottom: 2px solid var(--ink);
  white-space: nowrap;
}
.data-table td { padding: 0.65rem 0.75rem 0.65rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; overflow-wrap: anywhere; }
.data-table tbody tr:hover { background: var(--pencil-soft); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table .primary { font-weight: 600; }
.data-table .wide { min-width: 16rem; }
/* Emails and project ids stay on one line; the details column takes the rest. */
.data-table td[data-label="Author"], .data-table td[data-label="Project"] { white-space: nowrap; overflow-wrap: normal; }
.data-table time { white-space: nowrap; }
.data-table .error { display: block; color: var(--red); }
.data-table .sub { display: block; color: var(--ink-soft); font-size: 0.8125rem; margin-top: 0.15rem; }

.badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge-ok { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
.badge-bad { color: var(--red); background: var(--red-soft); }
.badge-warn { color: var(--pencil); background: var(--pencil-soft); }

/* Phones and narrow windows: each row becomes a small card. */
@media (max-width: 759px) {
  .data-table thead { display: none; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table tr { padding: 0.75rem 0; border-bottom: 1px solid var(--rule); }
  .data-table td { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.75rem; padding: 0.2rem 0; border: 0; text-align: left; }
  .data-table td > * { justify-self: start; }
  .data-table td[data-label="Author"], .data-table td[data-label="Project"] { white-space: normal; overflow-wrap: anywhere; }
  .data-table td::before { content: attr(data-label); color: var(--ink-soft); font-size: 0.8125rem; padding-top: 0.1rem; }
  .data-table td:empty { display: none; }
  .data-table .primary::before { font-weight: 400; }
  .data-table .num { text-align: left; }
  .data-table .wide { min-width: 0; }
  .data-table tbody tr:hover { background: none; }
  .figure { padding-left: 0 !important; border-left: 0 !important; }
}

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

.hero-cta { margin-top: 1.75rem; }

/* Two real phone screens, the chapter in front and the reader's note behind it.
   They're about 1.45 times as tall as they are wide, so the width comes from the
   screen height left under the headline: the whole hero fits the first view. */
.hero-phones {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  width: clamp(15rem, calc((100svh - 30rem) / 1.45), 24rem);
  max-width: 100%;
  margin: 0 0 3.5rem var(--gutter);
}
.hero-phones img { grid-row: 1; }
.hero-back { grid-column: 1 / 8; margin-top: 14%; }
.hero-front { grid-column: 5 / 13; position: relative; }

.promises { margin: 0 0 3.5rem var(--gutter); border-top: 2px solid var(--ink); }
.promise {
  display: grid;
  grid-template-columns: 12.5rem minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1.25rem 0 1.4rem;
  border-bottom: 1px solid var(--rule);
}
.promise h3 {
  margin: 0;
  font: 500 1.375rem/1.2 var(--serif);
  font-variation-settings: "opsz" 24;
  text-wrap: balance;
}
.promise p { margin: 0; }

.section-title { margin-left: var(--gutter); margin-bottom: 1.5rem; font-size: 1.75rem; }
.how .step h3 { font: 500 1.25rem/1.3 var(--serif); margin: 0.2rem 0 0.4rem; }
.how .step p { margin: 0; }
.how .step:last-child { padding-bottom: 0.5rem; }

/* Real phone screens from a sample book. On narrow screens each group is a
   slider that rests with one screen in the middle, and dots show where you are
   (js/tour.js). From 1100px they're laid out on a four-column grid. */
.tour { margin: 3.5rem 0 0; --shot-w: min(16rem, 72vw); }
.tour-group { margin: 0 0 2.5rem var(--gutter); }
.tour h3 { margin: 0 0 1rem; font: 500 1.25rem/1.3 var(--serif); }
.tour-note { margin: -0.6rem 0 1rem; color: var(--ink-soft); }
.shots {
  position: relative;
  display: flex;
  gap: 1.25rem;
  margin: 0 -1rem;
  /* Room either side so the first and last screens can rest in the middle. */
  padding: 0.5rem calc(50% + 1rem - var(--shot-w) / 2) 0.75rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.shots::-webkit-scrollbar { display: none; }
.shot { flex: none; width: var(--shot-w); scroll-snap-align: center; scroll-snap-stop: always; text-align: center; transition: opacity 250ms ease; }
@media (max-width: 1099px) { .shots.is-sliding .shot:not(.is-current) { opacity: 0.4; } }
.shot img, .hero-phones img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.6rem;
  /* A paper-coloured bezel, so the dark screens sit on the proof like a phone laid on it. */
  box-shadow: 0 0 0 5px var(--sheet), 0 0 0 6px var(--rule);
  margin-bottom: 1rem;
}
.shot-title { margin: 0 0 0.2rem; font: 500 1.125rem/1.3 var(--serif); }
.shot-text { margin: 0; color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.5; }

.shot-dots { display: flex; justify-content: center; gap: 0.25rem; margin-top: 0.25rem; }
.shot-dots button {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.shot-dots button::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  border: 1.5px solid var(--pencil);
  transition: background-color 200ms ease;
}
.shot-dots button[aria-current="true"]::before { background: var(--pencil); }

.closing { margin: 3rem 0 3.5rem; }
.closing p, .closing .btn-row { margin: 0 0 1.25rem var(--gutter); max-width: 34rem; }

@media (max-width: 719px) {
  .promise { grid-template-columns: 1fr; gap: 0.4rem; }
}

/* ---------- Wide screens: the galley opens up into a spread ---------- */

.learn-side-cta { display: none; }
.learn-end-cta { margin-top: 2rem; }

@media (min-width: 1100px) {
  .galley { max-width: 76rem; padding-left: 2rem; padding-right: 2rem; }

  /* Landing: the headline beside the phone screens. */
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 4.5rem;
    align-items: center;
    margin: 2.5rem 0 5rem var(--gutter);
  }
  .hero .intro, .hero .hero-phones { margin: 0; }
  .hero-phones { justify-self: center; width: clamp(17rem, calc((100svh - 10rem) / 1.45), 26rem); }
  .home h1 { font-size: clamp(2.6rem, 3.4vw, 3.2rem); }

  .promises {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3.5rem;
    margin-bottom: 5rem;
  }
  .promise { display: block; padding: 1.4rem 0 0; border-bottom: 0; }
  .promise h3 { margin-bottom: 0.6rem; }

  /* The three steps run across the page, joined by the margin rule. */
  .how .steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3.5rem;
    margin-left: var(--gutter);
  }
  .how .step { padding: 3.6rem 0 0; }
  .how .step::before { left: 3.5rem; right: -2.5rem; top: 1.25rem; bottom: auto; border-left: 0; border-top: 1px solid var(--rule); }
  .how .step:last-child::before { display: none; }

  /* Four reader screens across, then the author's two, each beside its caption, on the same columns. */
  .tour { margin-top: 5rem; }
  .tour-group { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 3rem; margin-bottom: 4rem; }
  .tour-group h3, .tour-note { grid-column: 1 / -1; }
  .tour-note { margin: -0.6rem 0 1rem; }
  .shots { display: contents; }
  .shot { width: auto; padding-top: 0.5rem; text-align: left; }
  .tour-group:last-child .shot { grid-column: span 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; align-items: center; }
  .tour-group:last-child .shot img { margin: 0; }
  .shot-dots { display: none; }

  .closing {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 0 4.5rem;
    margin: 5rem 0 4rem var(--gutter);
    padding: 2.5rem 0;
    border-top: 2px solid var(--ink);
  }
  .closing .section-title { grid-row: span 2; margin: 0; font-size: 2.25rem; }
  .closing p, .closing .btn-row { margin-left: 0; }

  /* Help page: the basics stay in view beside the questions. */
  .prose.learn {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: 5rem;
    max-width: none;
    align-items: start;
  }
  .learn-basics { position: sticky; top: 2rem; }
  .learn-basics > h2:first-child, .learn-questions > h2:first-child { margin-top: 0; }
  .learn-side-cta { display: flex; margin-top: 1.75rem; }
  .learn-end-cta { display: none; }

  /* Setup: the steps, with what Galleyleaf does with your access beside them. */
  .setup-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: 5rem;
    align-items: start;
  }
  .setup-layout .steps { max-width: calc(40rem + var(--gutter)); }
  .setup-layout .colophon { position: sticky; top: 2rem; margin: 0; }
}

/* ---------- Footer ---------- */

.colophon {
  margin: 1rem 0 0 var(--gutter);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 0.9375rem;
}
.colophon h2 { font-size: 1.125rem; color: var(--ink); }
.colophon ul { padding-left: 1.25rem; margin: 0 0 1rem; }

[hidden] { display: none !important; }

/* ---------- Phones: marks sit above each step ---------- */

@media (max-width: 599px) {
  :root { --gutter: 0rem; }
  .galley { padding-top: 1.5rem; }
  .intro { margin-top: 2rem; }
  .step { padding-top: 3.1rem; }
  .step::before { display: none; }
  .mark { top: 0; width: 2.25rem; height: 2.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .step.is-done .mark .tick { transition: none; }
  .task.is-working .task-icon svg { animation: none; }
  .waiting-line::before { animation: none; }
  .shot, .shot-dots button::before { transition: none; }
}