/* Restoc brand tokens (generated) */
:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --raise: #eceef2;
  --fg: #14181f;
  --fg-soft: #3a4150;
  --muted: #6b7385;
  --line: #d1d5de;
  --accent: #e8a020;
  --accent-ink: #14181f;
  --accent-1: #fef3dc;
  --accent-2: #f9d98a;
  --accent-3: #e8a020;
  --accent-4: #b87a10;
  --accent-5: #7a4f05;
}

[data-theme="dark"] {
  --bg: #0f1217;
  --surface: #181c24;
  --raise: #1f2430;
  --fg: #edf0f5;
  --fg-soft: #b0b8c8;
  --muted: #6b7693;
  --line: #2a3040;
  --accent: #e8a020;
  --accent-ink: #0f1217;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1217;
    --surface: #181c24;
    --raise: #1f2430;
    --fg: #edf0f5;
    --fg-soft: #b0b8c8;
    --muted: #6b7693;
    --line: #2a3040;
    --accent: #e8a020;
    --accent-ink: #0f1217;
  }
}

:root {
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", "Public Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --space: 1rem;
  --measure: 68ch;
  --radius: 12px;
  --h1-size: clamp(2.5rem, 5.5vw, 4rem);
  --h1-lh: 1.05;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); }
img, svg, video { max-width: 100%; height: auto; }

/* footer site map: its own container, an even column grid, headings on one baseline */
.footer-map { width: min(100% - 2rem, 72rem); margin-inline: auto; display: grid; align-items: start; gap: calc(var(--space) * 1.5); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.footer-map > * { min-width: 0; }
.footer-map ul { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.footer-map .more { margin-top: 0.3rem; }
.footer-map .more a { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.02em; }

/* the site map page: an index of the site, in columns */
.sitemap { padding-block: calc(var(--space) * 2) calc(var(--space) * 3); }
.sitemap .related { margin: 0; padding-block: calc(var(--space) * 1.5); }
.sitemap .related h2 { font-size: 1.25rem; margin-bottom: 0.75rem; }
.sitemap .post-list { gap: 0.4rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.sitemap .post-list li { gap: 0.1rem; padding-bottom: 0; border-bottom: 0; }
.sitemap .post-list a { font-family: var(--font-body); font-size: 1rem; font-weight: 500; }

/* the header's menu panels */
.navmenu { left: -0.75rem; min-width: 17rem; max-width: calc(100vw - 2rem); display: grid; gap: 0.15rem; padding: 0.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px 2px rgb(0 0 0 / 0.05), 0 12px 32px -16px rgb(0 0 0 / 0.3); }
.navmenu a { padding: 0.45rem 0.6rem; border-radius: 6px; }
.navmenu a:hover { background: var(--raise); }
/* the last entry of a shortened menu: the way to the rest, on the site map */
.navmenu a.more { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); margin-top: 0.3rem; padding-top: 0.55rem; border-top: 1px solid var(--line); }
/* Inside the open phone drawer a menu flows in place of floating. */
@media (max-width: 720px) {
  .nav-toggle[open] + .nav .navmenu { box-shadow: none; border: none; background: transparent; padding: 0 0 0 0.85rem; }
}

/* the phone menu trigger: a control a visitor can see is tappable */
.nav-toggle > summary { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.5rem; padding: 0.4rem 0.75rem; cursor: pointer; list-style: none; border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--font-display); font-size: 0.95rem; line-height: 1; }
.nav-toggle > summary:hover, .nav-toggle[open] > summary { border-color: currentColor; }

/* icons (Phase D2 increment H) */
.icon { display: inline-block; width: 1.5rem; height: 1.5rem; flex: none; vertical-align: middle; }
.glyph .icon { display: block; width: 1.25rem; height: 1.25rem; }
.block h2 .icon { width: 0.8em; height: 0.8em; margin-right: 0.4em; vertical-align: -0.08em; color: var(--accent); }

/* engine: a .block is one block inside a page, never a band of the page */
.block { padding-block: 0; }
.block + .block { border-top: 0; }
.block:first-child { margin-top: 0; }

/* engine: what a product capture is, said beside it */
.shot-note { font-size: 0.85rem; line-height: 1.45; margin: var(--space) 0 0; }

/* engine: the product's state, said in the hero over the plan's own pitch */
.hero .state-note { font-size: 0.95rem; line-height: 1.5; margin: var(--space) 0; max-width: 46ch; }

/* engine: what the plan's feature cards are, said over a band with no head */
.spotlights > .wrap > .scope-note { font-size: 0.85rem; line-height: 1.45; margin: 0 0 calc(var(--space) * -2); }

/* Restoc: the venture's own theme (contract rev 3) */
/* ============================================================
   Restoc — the night-watch console
   A dark ops-console identity for the app that watches stock
   24/7. Oversized Space Grotesk headlines, Public Sans copy,
   hairline packing-list panels, numbered rows, tabular figures.
   Amber appears where it means threshold: the reorder tick in
   the stock gauge, the step and status numerals, the alert edge
   on callouts, the line above the waitlist form.
   Light scheme is the same sheet on paper grey.
   ============================================================ */

/* ---------- 1. Palette additions (both schemes) ---------- */

:root {
  --rs-body: #3f4756;             /* running copy, AA+ on bg/surface */
  --rs-dim: #576070;              /* meta, eyebrows, dates */
  --rs-line-2: #d3d8e0;           /* visible hairline */
  --rs-amber-ink: #8a5c04;        /* AA amber-toned text on light */
  --rs-raise: #eef0f4;
  --rs-shadow:
    0 1px 2px rgba(16, 20, 28, 0.06),
    0 10px 28px rgba(16, 20, 28, 0.10);
  --rs-shadow-big:
    0 2px 4px rgba(16, 20, 28, 0.08),
    0 24px 56px rgba(16, 20, 28, 0.16);
  --w-wide: 68rem;                /* one container for everything */
  --measure: 68ch;                /* running copy only */
  --radius: 4px;
}

[data-theme="dark"] {
  --rs-body: #b9c1cf;
  --rs-dim: #99a3b8;
  --rs-line-2: #2d3443;
  --rs-amber-ink: #efb24a;
  --rs-raise: #1d222d;
  --rs-shadow:
    0 1px 2px rgba(0, 0, 0, 0.45),
    0 10px 28px rgba(0, 0, 0, 0.40);
  --rs-shadow-big:
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 26px 60px rgba(0, 0, 0, 0.55);
}

/* ---------- 2. Base ---------- */

html {
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--accent);
  color: #14181f;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fg);
  letter-spacing: -0.018em;
  line-height: 1.15;
  margin: 0 0 0.6em;
  font-weight: 700;
}

h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; }

p { margin: 0 0 1em; }

a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--fg) 35%, transparent);
}

a:hover { text-decoration-color: var(--fg); }

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

/* ONE container. Wide for headers, grids and ruled rows;
   running copy is capped at the measure inside it. */
.wrap,
.narrow {
  max-width: var(--w-wide);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2rem);
}

.mono { font-family: var(--font-mono); }

.muted { color: var(--rs-dim); }

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rs-dim);
  margin: 0 0 0.8rem;
}

/* the amber status square: the console's alert light */
.hero .eyebrow::before,
.section-head .eyebrow::before,
.page-head .eyebrow::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: var(--accent);
  margin-right: 0.65rem;
  vertical-align: 7%;
}

/* ---------- 3. The signature: the stock gauge ----------
   A short bar of ink draining to an amber reorder tick.
   It closes every headline on the site. */

.hero h1::after,
.page-head h1::after,
main article > .narrow > h1::after,
.section-head h2::after,
.spotlight > div > h2::after,
.capture h2::after {
  content: "";
  display: block;
  height: 5px;
  width: 8.5rem;
  margin-top: 1.1rem;
  border-radius: 999px;
  background: linear-gradient(90deg,
    var(--fg) 0 54%,
    transparent 54% 62%,
    var(--line) 62% 78%,
    transparent 78% 84%,
    var(--accent) 84% 100%);
}

.hero h1::after { width: 10.5rem; margin-top: 1.4rem; }
.section-head h2::after,
.spotlight > div > h2::after,
.capture h2::after { width: 7rem; height: 4px; }

/* ---------- 4. Buttons & forms ---------- */

.button {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  padding: 0.78rem 1.35rem;
  border-radius: 8px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
}

.button.primary {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

.button.primary:hover {
  background: color-mix(in srgb, var(--fg) 86%, var(--bg));
  border-color: color-mix(in srgb, var(--fg) 86%, var(--bg));
}

.button.secondary {
  background: transparent;
  color: var(--fg);
  border-color: var(--rs-line-2);
}

.button.secondary:hover {
  background: var(--surface);
  border-color: var(--rs-dim);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
}

input[type="email"],
input[type="text"] {
  font: inherit;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--rs-line-2);
  border-radius: 8px;
  padding: 0.74rem 0.95rem;
}

input::placeholder { color: var(--rs-dim); }

input[type="email"]:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 1px;
  border-color: var(--fg);
}

/* ---------- 5. Header ---------- */

header.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

header.site-header .wrap {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.5vw, 1.25rem);
  padding-block: 0.8rem;
}

a.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--fg);
}

a.brand svg.mark { width: 26px; height: 26px; flex: none; }

a.brand .logotype {
  font-family: var(--font-display);
  font-size: 1.32rem;
  line-height: 1;
  white-space: nowrap;
}

header.site-header nav.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.5vw, 1.25rem);
}

header.site-header nav.nav > a:not(.cta),
header.site-header .navgroup summary {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.93rem;
  color: var(--rs-body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

header.site-header nav.nav > a:not(.cta):hover { color: var(--fg); }

header.site-header a.navlabel {
  color: inherit;
  text-decoration: none;
}

header.site-header .navgroup summary:hover,
header.site-header .navgroup[open] summary { color: var(--fg); }

.navgroup .chevron { opacity: 0.65; }

.navmenu {
  background: var(--surface);
  border: 1px solid var(--rs-line-2);
  border-radius: 8px;
  box-shadow: var(--rs-shadow-big);
  padding: 0.45rem;
  margin-top: 0.55rem;
}

.navmenu a {
  display: block;
  padding: 0.52rem 0.75rem;
  border-radius: 5px;
  font-size: 0.93rem;
  color: var(--rs-body);
  text-decoration: none;
  white-space: nowrap;
}

.navmenu a:hover {
  background: var(--rs-raise);
  color: var(--fg);
}

.navmenu a.more {
  color: var(--rs-dim);
  border-top: 1px solid var(--line);
  border-radius: 0 0 5px 5px;
  margin-top: 0.3rem;
  padding-top: 0.6rem;
}

header.site-header a.cta {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  background: var(--fg);
  color: var(--bg);
  text-decoration: none;
  padding: 0.56rem 1.05rem;
  border-radius: 999px;
  white-space: nowrap;
}

header.site-header a.cta:hover {
  background: color-mix(in srgb, var(--fg) 86%, var(--bg));
}

header.site-header .nav-toggle summary {
  background: var(--surface);
  border: 1px solid var(--rs-line-2);
  border-radius: 8px;
  color: var(--fg);
  font-family: var(--font-display);
  font-weight: 600;
}

header.site-header .nav-toggle summary:hover { border-color: var(--rs-dim); }

/* the open phone drawer */
@media (max-width: 720px) {
  header.site-header .nav-toggle[open] + .nav {
    background: var(--bg);
    border-top: 1px solid var(--line);
    padding-block: 0.35rem 1rem;
    gap: 0;
  }
  header.site-header .nav-toggle[open] + .nav > a:not(.cta),
  header.site-header .nav-toggle[open] + .nav .navgroup summary {
    font-size: 1.04rem;
    padding-block: 0.72rem;
    border-bottom: 1px solid var(--line);
  }
  header.site-header .nav-toggle[open] + .nav .navmenu {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0.15rem 0 0.5rem;
    margin: 0;
  }
  header.site-header .nav-toggle[open] + .nav .navmenu a {
    padding-block: 0.5rem;
    white-space: normal;
  }
  header.site-header .nav-toggle[open] + .nav a.cta {
    margin-top: 0.9rem;
    border-radius: 8px;
    text-align: center;
    padding-block: 0.8rem;
  }
}

/* ---------- 6. Sections rhythm ---------- */

main > section {
  padding-block: clamp(3.25rem, 5.5vw, 4.25rem);
}

/* alternate bands so the rhythm reads as design, not leftover space */
section.features,
section.use-cases {
  background: var(--surface);
  border-block: 1px solid var(--line);
}

main > article {
  display: block;
  padding-block: clamp(2.75rem, 5.5vw, 4rem) clamp(3rem, 6vw, 4.5rem);
}

.wash {
  background: var(--surface);
  border-block: 1px solid var(--line);
}

.section-head {
  max-width: 56rem;
  margin-bottom: clamp(1.7rem, 3.5vw, 2.4rem);
}

.section-head h2 {
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  line-height: 1.14;
  margin: 0;
}

.section-head p.muted {
  margin: 0.9rem 0 0;
  color: var(--rs-dim);
  max-width: var(--measure);
}

/* running copy is capped at the measure inside the wide container */
p.lead,
.prose,
.faq details > p,
ul.post-list p,
ol.steps p {
  max-width: var(--measure);
}

.prose > :last-child { margin-bottom: 0; }

/* ---------- 7. Hero ---------- */

.hero {
  position: relative;
  overflow: clip;
  border-bottom: 1px solid var(--line);
  padding-block: clamp(3.25rem, 6.5vw, 5rem);
}

.hero svg.motif {
  position: absolute;
  top: 0;
  right: 0;
  width: min(58%, 48rem);
  height: 100%;
  opacity: 0.16;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(105deg, transparent 0 18%, #000 70%);
  mask-image: linear-gradient(105deg, transparent 0 18%, #000 70%);
}

[data-theme="dark"] .hero svg.motif { opacity: 0.12; }

.hero .wrap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

.hero.with-media .wrap {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.hero .hero-media { grid-column: -2 / -1; min-width: 0; }

.hero .eyebrow { margin-bottom: 1rem; }

.hero h1 {
  font-size: clamp(3.25rem, 6.5vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 0;
}

.hero .lead {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  line-height: 1.62;
  color: var(--rs-body);
  max-width: 36rem;
  margin: 1.4rem 0 0;
}

.hero .actions { margin-top: 2rem; }

/* the hero's second action reads as a quiet text link,
   not a twin pill */
.hero .actions .button.secondary {
  border-color: transparent;
  background: transparent;
  padding-inline: 0.4rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--fg) 35%, transparent);
}

.hero .actions .button.secondary:hover {
  background: transparent;
  text-decoration-color: var(--fg);
}

/* the product shot is a specified panel, not a floating card:
   hairline frame, square corners, a tabular caption strip below */
.hero .hero-media .frame {
  display: flex;
  flex-direction: column;
  box-shadow: none;
  border-radius: 4px;
  border-color: var(--rs-line-2);
}

/* the full capture is unreadable at this size, so crop it to one
   shallow band of the dashboard: the stat cards and the top of
   the inventory table */
.hero .hero-media .frame img {
  aspect-ratio: 39 / 10;
  object-fit: cover;
  object-position: 50% 22%;
}

/* ...and set three real rows of that table in page type at
   legible size, so days of cover and the amber reorder state
   can actually be read; the amber band marks the reorder row */
.hero .hero-media .frame::before {
  content:
    "ITEM                 STOCK  COVER  STATUS\A"
    "Sandalwood candle 8oz   12     3d REORDER\A"
    "Soy mist sampler        60     5d     LOW\A"
    "Matte black snuffer     40    11d      OK";
  order: 3;
  display: block;
  white-space: pre;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 2.2;
  color: var(--fg);
  padding: 0.55em 1.1em 0.75em;
  border-top: 1px solid var(--line);
  background:
    linear-gradient(
      color-mix(in srgb, var(--accent) 22%, transparent),
      color-mix(in srgb, var(--accent) 22%, transparent))
    0 2.75em / 100% 2.2em no-repeat;
}

.hero .hero-media .frame::after {
  order: 4;
  content: "LIVE SAMPLE DATA \00B7 8 SKUS TRACKED \00B7 SYNC OK";
  display: block;
  padding: 0.6rem 0.9rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--rs-dim);
  background: var(--rs-raise);
}

/* ---------- 8. Frames (product shots) ---------- */

figure.frame {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--rs-line-2);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--rs-shadow);
}

figure.frame .bar {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 10px 13px;
  background: var(--rs-raise);
  border-bottom: 1px solid var(--line);
}

figure.frame .bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rs-dim);
  opacity: 0.45;
}

/* the console's status light */
figure.frame .bar i:last-child {
  background: var(--accent);
  opacity: 1;
}

figure.frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- 9. Cards: hairline packing-list panels ---------- */

.grid {
  display: grid;
  gap: 1.1rem;
}

.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.card {
  background: transparent;
  border: 1px solid var(--rs-line-2);
  border-radius: 4px;
  padding: 1.4rem 1.4rem 1.3rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.card h3 {
  font-size: 1.1rem;
  line-height: 1.3;
  margin: 0 0 0.55rem;
}

.card p { margin: 0; color: var(--rs-body); font-size: 0.95rem; }

.card p + p { margin-top: 0.6em; }

/* icons are dropped on the panels; each leads with a line number,
   the way a packing list does */
.features .card .glyph,
.use-cases .card .glyph,
.benefits .card .glyph { display: none; }

.features .grid,
.use-cases .grid,
.benefits { counter-reset: panel; }

.features .grid > .card::before,
.use-cases .grid > .card::before,
.benefits > .card::before {
  counter-increment: panel;
  content: counter(panel, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--rs-amber-ink);
  border-bottom: 1px solid var(--rs-line-2);
  align-self: stretch;
  padding-bottom: 0.6rem;
  margin-bottom: 1rem;
}

.glyph {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: transparent;
  border: 1px solid var(--rs-line-2);
  color: var(--fg);
  margin-bottom: 1rem;
}

.glyph .icon { width: 21px; height: 21px; }

.card .eyebrow {
  font-size: 0.68rem;
  line-height: 1.4;
  margin: 0 0 0.45rem;
}

/* keep paired "who it is for" cards on one baseline even
   when an eyebrow wraps to a second line */
@media (min-width: 721px) {
  .use-cases .card .eyebrow { min-height: 2.8em; }
}

/* ---------- 10. Home sections ---------- */

.problem .narrow > p:not(.eyebrow):not(.muted) {
  font-size: clamp(1.12rem, 1.8vw, 1.35rem);
  line-height: 1.55;
  color: var(--fg);
  margin-bottom: 0;
  max-width: 56ch;
}

/* spotlights */
.spotlight {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: center;
}

.spotlight > * { min-width: 0; }

.spotlight.flip > figure,
.spotlight.flip > .frame { order: -1; }

.spotlight h2 {
  font-size: clamp(1.45rem, 2.4vw, 1.95rem);
  margin: 0;
}

.spotlight p.muted {
  margin: 1rem 0 0;
  color: var(--rs-body);
}

/* steps: the numbered rows of the board */
ol.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
}

.how ol.steps { margin-bottom: 0; }

ol.steps > li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: 1.1rem;
  padding-block: 1.4rem;
  border-top: 1px solid var(--line);
}

ol.steps > li:last-child { border-bottom: 1px solid var(--line); }

ol.steps > li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--rs-amber-ink);
}

ol.steps h3 { margin: 0.1rem 0 0.4rem; }
ol.steps p { margin: 0; color: var(--rs-body); }

/* gallery */
.gallery .shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: start;
}

/* faq */
.faq details {
  border-top: 1px solid var(--line);
}

.faq details:last-of-type { border-bottom: 1px solid var(--line); }

.faq summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 1.05rem 2.4rem 1.05rem 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.04rem;
  color: var(--fg);
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  position: absolute;
  right: 0.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--rs-dim);
}

.faq details[open] summary::after {
  content: "\2212";
  color: var(--rs-amber-ink);
}

.faq details > p {
  margin: 0;
  padding: 0 0 1.3rem;
  color: var(--rs-body);
}

/* capture / waitlist: the threshold line, then the form */
.cta.wash { border-top: 2px solid var(--accent); }

.cta.wash .capture {
  max-width: 44rem;
}

.capture h2 {
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  margin: 0;
}

.capture p.muted {
  margin: 1rem 0 0;
  color: var(--rs-body);
  max-width: 54ch;
}

.capture form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.6rem;
}

.capture input[type="email"] {
  flex: 1 1 16rem;
  min-width: 0;
}

.capture label.hp { display: none; }

.capture .note {
  margin: 0.9rem 0 0;
  font-size: 0.85rem;
  color: var(--rs-dim);
}

.capture .note a { color: var(--rs-dim); }
.capture .note a:hover { color: var(--fg); }

.capture .thanks {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--fg);
  margin: 1.4rem 0 0;
}

/* ---------- 11. Content pages ---------- */

/* content pages share the site's one left edge: every child of
   the article starts on the wrap's own gutter, like the indexes
   and the section heads, capped at the one reading measure; only
   the plan rack and the product shot run wider */
main article > .narrow > * {
  max-width: var(--measure);
}

main article > .narrow > .page-hero { max-width: 54rem; }

main article > .narrow > .block:has(.plan-cards) { max-width: none; }

main article > .narrow > .block:has(.plan-cards) > p {
  max-width: var(--measure);
}

/* a note before the plans is an honest-limits note: alert edge */
main article > .narrow > .block > p.muted,
main article > .narrow > .block:has(.plan-cards) > p.muted {
  border-left: 3px solid var(--accent);
  padding-left: 1rem;
  color: var(--rs-body);
}

/* numbered section heads where the engine printed icons */
main article > .narrow { counter-reset: specblock; }

.block > h2 .icon { display: none; }

.block > h2:has(.icon)::before {
  counter-increment: specblock;
  content: counter(specblock, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--rs-amber-ink);
  align-self: center;
  padding-top: 0.2em;
}

p.crumbs {
  font-size: 0.8rem;
  color: var(--rs-dim);
  margin: 0 0 1.6rem;
}

p.crumbs a {
  color: var(--rs-dim);
  text-decoration-color: color-mix(in srgb, var(--rs-dim) 45%, transparent);
}

p.crumbs a:hover { color: var(--fg); text-decoration-color: var(--fg); }

main article > .narrow > h1,
.page-head h1 {
  font-size: clamp(1.9rem, 3.8vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: -0.024em;
  margin-block: 0;
}

main article > .narrow > h1,
.page-head h1 { max-width: 56rem; }

p.lead {
  font-size: clamp(1.02rem, 1.4vw, 1.15rem);
  line-height: 1.62;
  color: var(--rs-body);
  margin: 1.4rem 0 0;
}

main > section.page-head {
  padding-block: clamp(2.75rem, 5.5vw, 4rem) 0;
}

main > section.page-head + section {
  padding-top: clamp(1.6rem, 3vw, 2.4rem);
}

.page-hero { margin: 2.2rem 0 0; }

section.block {
  margin-top: clamp(2.5rem, 4.5vw, 3.4rem);
}

.block > h2 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  line-height: 1.25;
  margin: 0 0 1rem;
  max-width: 56rem;
}

.block > h2 .icon { color: var(--rs-dim); flex: none; }

/* prose */
.prose { color: var(--rs-body); }

.prose p { margin: 0 0 1em; }

.prose strong { color: var(--fg); }

.prose h2 {
  font-size: 1.45rem;
  margin: 1.8em 0 0.6em;
}

.prose h3 {
  font-size: 1.12rem;
  margin: 1.7em 0 0.5em;
}

.prose ul, .prose ol {
  margin: 0 0 1.1em;
  padding-left: 1.3rem;
}

.prose li { margin-block: 0.4em; }

.prose li::marker { color: var(--rs-dim); }

.prose blockquote {
  margin: 1.4em 0;
  padding: 0.25em 0 0.25em 1.2em;
  border-left: 3px solid var(--rs-line-2);
  color: var(--rs-body);
}

.prose code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--rs-raise);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.12em 0.4em;
}

.prose pre {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.1rem 1.25rem;
  overflow-x: auto;
  font-size: 0.9rem;
  line-height: 1.6;
}

.prose pre code {
  background: transparent;
  border: 0;
  padding: 0;
}

/* tables */
.table-wrap {
  margin-block: 1.2rem;
  background: transparent;
  border: 1px solid var(--rs-line-2);
  border-radius: 4px;
}

.table-wrap table,
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
}

.table-wrap th, .prose th {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rs-dim);
  text-align: left;
  padding: 0.75rem 0.95rem;
  border-bottom: 2px solid var(--rs-line-2);
}

.table-wrap td, .prose td {
  padding: 0.7rem 0.95rem;
  border-bottom: 1px solid var(--line);
  color: var(--rs-body);
}

.table-wrap td:first-child, .prose td:first-child { color: var(--fg); }

.table-wrap tr:last-child td { border-bottom: 0; }

.prose table { margin-block: 1.2rem; }

/* callout: an alert card, so it wears the alert edge */
aside.callout {
  background: transparent;
  border: 1px solid var(--rs-line-2);
  border-left: 3px solid var(--accent);
  border-radius: 0 4px 4px 0;
  padding: 1.1rem 1.3rem;
  margin-block: 1.5rem;
  color: var(--fg);
  max-width: var(--measure);
}

aside.callout p:last-child { margin-bottom: 0; }

/* benefits */
.benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1.1rem;
  margin-top: 0.4rem;
}

/* plan cards: the full-width rack, prices never wrap,
   every card hugs its own content */
.plan-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 1.1rem;
  margin-top: 1.6rem;
}

@media (min-width: 1024px) {
  .plan-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.card.plan { gap: 0; }

/* the yearly twins are quieter, so the monthly plans lead */
.plan-cards > .card.plan:nth-child(even) {
  border-color: color-mix(in srgb, var(--rs-line-2) 55%, transparent);
}

.plan-cards > .card.plan:nth-child(even) .price {
  font-size: 1.35rem;
  color: var(--rs-body);
}

.plan-cards > .card.plan:nth-child(even) .meta {
  color: var(--rs-dim);
}

/* the recommended tier crosses the threshold edge */
.plan-cards > .card.plan:nth-child(3) {
  border-left: 3px solid var(--accent);
}

.card.plan h3 { margin: 0; font-size: 1.02rem; }

.card.plan .price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--fg);
  white-space: nowrap;
  margin: 0.4rem 0 0;
}

.card.plan .meta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rs-amber-ink);
  margin: 0.35rem 0 0.8rem;
}

.card.plan ul.includes {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  width: 100%;
  border-top: 1px solid var(--line);
}

.card.plan ul.includes li {
  position: relative;
  padding: 0.55rem 0 0.55rem 1.2rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.87rem;
  color: var(--rs-body);
}

.card.plan ul.includes li::before {
  content: "";
  position: absolute;
  left: 0.05rem;
  top: 1.1em;
  width: 0.5rem;
  height: 2px;
  background: var(--rs-dim);
}

.card.plan ul.includes li:last-child { border-bottom: 0; }

/* sources */
.sources {
  margin-top: clamp(2.5rem, 4.5vw, 3.4rem);
  font-size: 0.9rem;
  color: var(--rs-dim);
  max-width: var(--measure);
}

.sources a { color: var(--rs-body); }
.sources a:hover { color: var(--fg); }
.sources li { margin-block: 0.4em; }

/* ---------- 12. Articles ---------- */

p.byline {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--rs-dim);
  margin: 1.1rem 0 0;
}

figure.cover {
  margin-block: 2.2rem;
  border: 1px solid var(--rs-line-2);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: none;
  aspect-ratio: 16 / 7;
}

figure.cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

main article > .narrow > .prose { margin-top: 2rem; }

/* ---------- 13. Reading lists (indexes, related, 404, site map) ---------- */

ul.post-list {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
}

ul.post-list > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 1.2rem;
  padding-block: 1.15rem;
  border-top: 1px solid var(--line);
}

ul.post-list > li:last-child { border-bottom: 1px solid var(--line); }

ul.post-list a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.35;
  color: var(--fg);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, var(--fg) 30%, transparent);
}

ul.post-list a:hover { text-decoration-color: var(--rs-amber-ink); }

ul.post-list span.meta {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--rs-dim);
  white-space: nowrap;
}

ul.post-list p {
  grid-column: 1 / -1;
  margin: 0.4rem 0 0;
  font-size: 0.94rem;
  color: var(--rs-body);
}

p.pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.2rem;
}

p.pager a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  border: 1px solid var(--rs-line-2);
  border-radius: 8px;
  padding: 0.55rem 1rem;
  color: var(--fg);
}

p.pager a:hover { background: var(--surface); border-color: var(--rs-dim); }

/* related block on pages */
.related { margin-top: clamp(2.5rem, 4.5vw, 3.4rem); }

/* site map */
.sitemap .block h2 { font-size: 1.2rem; }
.sitemap ul.post-list a { font-size: 0.98rem; }

/* 404 */
body[data-kind="not_found"] .page-head .eyebrow { color: var(--rs-amber-ink); }
body[data-kind="not_found"] p.actions { margin-top: 2.4rem; }

/* ---------- 14. Footer ---------- */

footer.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--line);
}

footer.site-footer .footer-map {
  max-width: var(--w-wide);
  margin-inline: auto;
  padding: clamp(2.4rem, 5vw, 3.2rem) clamp(1.1rem, 4vw, 2rem) 1.8rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 2rem 1.6rem;
}

footer.site-footer .footer-map .eyebrow {
  font-size: 0.68rem;
  margin-bottom: 0.7rem;
}

footer.site-footer .footer-map ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

footer.site-footer .footer-map li { margin-block: 0.42rem; }

footer.site-footer .footer-map a {
  font-size: 0.9rem;
  color: var(--rs-body);
  text-decoration: none;
}

footer.site-footer .footer-map a:hover {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 3px;
}

footer.site-footer .footer-map li.more a { color: var(--rs-dim); }

footer.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 2rem;
  padding-block: 1.4rem;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}

footer.site-footer .wrap strong {
  font-family: var(--font-display);
  font-weight: 700;
}

footer.site-footer .wrap .muted { color: var(--rs-dim); }

footer.site-footer .wrap nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
}

footer.site-footer .wrap nav a {
  color: var(--rs-body);
  text-decoration: none;
}

footer.site-footer .wrap nav a:hover {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 3px;
}

footer.site-footer a.stamp {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--rs-body);
  text-decoration: none;
  font-size: 0.85rem;
}

footer.site-footer a.stamp:hover { color: var(--fg); }

footer.site-footer a.stamp img { display: block; }

/* ---------- 15. Motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  a,
  .button,
  summary,
  .navmenu a,
  footer.site-footer a,
  input[type="email"] {
    transition: color 0.15s ease, background-color 0.15s ease,
      border-color 0.15s ease, text-decoration-color 0.15s ease;
  }
  .button, header.site-header a.cta {
    transition: background-color 0.15s ease, border-color 0.15s ease,
      transform 0.18s ease;
  }
  .button.primary:hover,
  header.site-header a.cta:hover { transform: translateY(-1px); }
}

/* ---------- 16. Responsive ---------- */

@media (max-width: 1000px) {
  .grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .hero.with-media .wrap { grid-template-columns: minmax(0, 1fr); }
  .hero .hero-media { grid-column: auto; }
  .hero .hero-media .frame { max-width: 34rem; }
  .spotlight { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .spotlight.flip > figure,
  .spotlight.flip > .frame { order: 0; }
  .gallery .shots { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .grid.cols-3,
  .grid.cols-2,
  .plan-cards { grid-template-columns: minmax(0, 1fr); }

  .hero h1 {
    font-size: clamp(2rem, 8.5vw, 2.6rem);
    line-height: 1.05;
  }

  main article > .narrow > h1,
  .page-head h1 {
    font-size: clamp(1.65rem, 7vw, 2.1rem);
    line-height: 1.08;
  }

  main > section { padding-block: 2.6rem; }
  main > article { padding-block: 2.3rem 2.8rem; }

  ol.steps > li { grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.9rem; }
  ol.steps > li::before { font-size: 1.1rem; }

  ul.post-list > li {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.25rem;
  }
  ul.post-list span.meta { order: -1; }

  .capture form { flex-direction: column; align-items: stretch; }
  .capture .button { width: 100%; }

  .table-wrap table, .prose table { font-size: 0.86rem; }
  .table-wrap th, .table-wrap td,
  .prose th, .prose td { padding: 0.55rem 0.7rem; }
}

.capture .hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.hidden, [hidden] { display: none !important; }
.nav-toggle summary { cursor: pointer; list-style: none; }
.nav-toggle summary::-webkit-details-marker { display: none; }
@media (min-width: 721px) {
  .nav-toggle { display: none !important; }
}
@media (max-width: 720px) {
  .site-header .wrap { flex-wrap: wrap; }
  .nav-toggle { display: block !important; }
  .nav { display: flex !important; flex-wrap: wrap; align-items: center; }
  .nav-toggle:not([open]) + .nav > a:not(.cta),
  .nav-toggle:not([open]) + .nav > details { display: none !important; }
  .nav-toggle[open] + .nav { flex-basis: 100% !important; width: 100%; flex-direction: column; align-items: stretch; }
}

/* a phone app's screenshot: a phone, never a browser window */
figure.frame.phone { display: block !important; box-sizing: border-box !important; width: min(18.5rem, calc(80vh * var(--frame-ratio, 390 / 844))) !important; max-width: 100% !important; min-width: 0 !important; flex: 0 1 auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; align-self: start !important; margin-inline: auto !important; padding: 0.5rem !important; border-radius: min(2.5rem, 13%) / min(2.5rem, calc(13% * var(--frame-ratio, 390 / 844))) !important; overflow: hidden !important; }
figure.frame.phone::before, figure.frame.phone::after { content: none !important; display: none !important; }
figure.frame.phone > img { display: block !important; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; aspect-ratio: var(--frame-ratio, 390 / 844) !important; object-fit: cover !important; object-position: top center !important; margin: 0 !important; border-radius: min(2rem, 11%) / min(2rem, calc(11% * var(--frame-ratio, 390 / 844))) !important; }
.shots:has(> figure.frame.phone):not(:has(> figure.frame:not(.phone))) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)) !important; }
@supports (width: 1svh) { figure.frame.phone { width: min(18.5rem, calc(80svh * var(--frame-ratio, 390 / 844))) !important; } }

/* the header's menu labels */
.navgroup > summary { cursor: pointer; list-style: none; }
.navgroup > summary::-webkit-details-marker { display: none; }
.navgroup > summary > .chevron { display: inline-block; width: 0.62em; height: 0.62em; margin-left: 0.3em; vertical-align: -0.04em; opacity: 0.7; transition: transform 120ms ease-out; }
.navgroup[open] > summary > .chevron { transform: rotate(180deg); }
/* the phone menu trigger's mark: the bars while it is shut, the cross while it is open */
.nav-toggle > summary > .burger { display: inline-block; flex: none; width: 1.1em; height: 1.1em; vertical-align: -0.18em; }
.nav-toggle:not([open]) > summary > .burger > .cross { display: none; }
.nav-toggle[open] > summary > .burger > .bars { display: none; }

/* engine: a header menu opens as an overlay anchored under its own trigger, so the bar keeps its single row */
.navgroup { position: relative; }
.navmenu { position: absolute; top: calc(100% + 0.4rem); z-index: 20; }
header.site-header .wrap, header.site-header .nav, header.site-header .navgroup { overflow: visible; }
/* the phone drawer is not a bar: inside it an open menu flows in place */
@media (max-width: 720px) {
  .nav-toggle[open] + .nav .navmenu { position: static !important; min-width: 0; }
}

/* engine: an open header menu is never taller than the window it opens in */
.navmenu { max-height: calc(100vh - 8rem); }
.navmenu { max-height: min(32rem, calc(100svh - 8rem)); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 720px) {
  .nav-toggle[open] + .nav .navmenu { max-height: none !important; overflow: visible !important; }
}

/* engine: the header's bar holds one row at desktop width, whatever a theme sets on it */
@media (min-width: 721px) {
  header.site-header .wrap { display: flex; flex-direction: row; flex-wrap: nowrap; }
  header.site-header nav.nav { display: flex; flex-direction: row; flex-wrap: nowrap; }
  header.site-header .wrap > .brand, header.site-header .wrap > nav.nav { flex-shrink: 1; }
  header.site-header .nav { min-width: 0; column-gap: clamp(0.5rem, 1.1vw, 1.25rem); }
  header.site-header .nav > a, header.site-header .nav > details > summary { white-space: nowrap; }
  :is(header.site-header nav.nav > a:not(.cta), header.site-header nav.nav > details > summary) { padding-inline: clamp(0.3rem, 0.8vw, 0.9rem); }
  :is(header.site-header nav.nav > a:not(.cta), header.site-header nav.nav > details, header.site-header nav.nav > details > summary, header.site-header nav.nav > details > summary > .navlabel) { margin-inline: 0; }
  header.site-header nav.nav > details > summary > .navlabel { padding-inline: 0; }
  header.site-header .nav > a.cta { flex: none; }
}

/* engine: the action's compact twin shows only on a narrow phone, and only with the menu shut */
@media (min-width: 541px) {
  header.site-header a.cta.cta-short { display: none; }
}
/* engine: on a narrow phone the header is one row, the brand with the menu trigger and a compact action beside it */
@media (max-width: 540px) {
  header.site-header .wrap { column-gap: 0.5rem; }
  header.site-header .nav-toggle > summary { gap: 0; min-width: 2.5rem; justify-content: center; padding-inline: 0.5rem; }
  header.site-header .nav-toggle > summary > .navlabel { display: none; }
  header.site-header .nav-toggle:not([open]) + .nav > a.cta:not(.cta-short) { display: none; }
  header.site-header .nav-toggle[open] + .nav > a.cta.cta-short { display: none; }
  header.site-header .nav-toggle:not([open]) + .nav > a.cta { padding-inline: clamp(0.5rem, 3vw, 1rem); }
}

/* engine: the phone menu's trigger is the last box of the header's own row, so the cross is drawn where the bars were tapped */
@media (max-width: 720px) {
  header.site-header .wrap { display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-end; }
  header.site-header .wrap > .brand { margin-right: auto; }
  header.site-header .nav-toggle { order: 2; }
  header.site-header .nav-toggle:not([open]) + .nav { order: 1; margin-left: auto; }
  header.site-header .nav-toggle[open] { margin-left: auto; }
  header.site-header .nav-toggle[open] + .nav { order: 3; }
}

/* engine: while the phone menu is shut every box of the header is as wide as what it holds, so none of them can take the row from the other two */
@media (max-width: 720px) {
  header.site-header .wrap > .brand { flex: 0 1 auto; width: auto; min-width: 0; }
  header.site-header .nav-toggle:not([open]) { flex: 0 0 auto; width: auto; }
  header.site-header .nav-toggle:not([open]) + .nav { flex: 0 1 auto; width: auto; min-width: 0; }
  header.site-header .nav-toggle:not([open]) + .nav > a.cta { width: auto; }
}

/* engine: while the phone menu is shut the box around the action draws nothing of its own, so what a theme wrote for the open drawer is never a fragment in the header */
@media (max-width: 720px) {
  header.site-header .nav-toggle:not([open]) + .nav { border: 0; background: none; box-shadow: none; padding: 0; margin-block: 0; }
}

/* engine: every row of the open phone drawer starts its words at the page's own gutter, the action with them, and the action's own mark holds the far end of its full width box */
@media (max-width: 720px) {
  .nav-toggle[open] + .nav { padding-inline: 0; }
  header.site-header .nav-toggle[open] + .nav > a,
  header.site-header .nav-toggle[open] + .nav > details > summary,
  header.site-header .nav-toggle[open] + .nav > details > summary > .navlabel { padding-inline: 0; margin-inline: 0; text-align: left; text-indent: 0; justify-content: flex-start; justify-items: start; }
  header.site-header .nav-toggle[open] + .nav > a.cta { text-align: left; text-indent: 0; justify-content: flex-start; justify-items: start; }
  header.site-header .nav-toggle[open] + .nav > a.cta:not(.cta-short) { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; }
  header.site-header .nav-toggle[open] + .nav > a.cta:not(.cta-short)::after { content: ""; flex: none; width: 1.1em; height: 1.1em; margin-inline-start: auto; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000'%20stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h10M8.75 4.25 12.5 8l-3.75 3.75'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000'%20stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h10M8.75 4.25 12.5 8l-3.75 3.75'/%3E%3C/svg%3E") center / contain no-repeat; }
}

/* engine: the open phone drawer's action is a row of the drawer, on the rows' own edges and clear of the last of them */
@media (max-width: 720px) {
  header.site-header .nav-toggle[open] + .nav > a.cta { align-self: stretch; width: auto; max-width: none; margin-inline: 0; margin-block-start: 1.25rem; }
}

/* engine: every row of the open phone drawer is a single-line row, tall enough for a thumb, with what it holds in the middle of that height */
@media (max-width: 720px) {
  header.site-header .nav-toggle[open] + .nav > a:not(.cta-short),
  header.site-header .nav-toggle[open] + .nav > details > summary { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; min-height: 2.75rem; }
}

/* engine: nothing a page says can push it wider than the window */
html { overflow-wrap: break-word; }
.button, .nav .cta { max-width: 100%; overflow-wrap: anywhere; }
.post-list a { overflow-wrap: anywhere; }
.table-wrap { max-width: 100%; overflow-x: auto; }
.prose th, .prose td { overflow-wrap: anywhere; }

/* engine: under 600px a table is a card per row, not columns a phone cannot hold */
@media (max-width: 600px) {
  .table-wrap table, .table-wrap tbody, .table-wrap tr { display: block !important; width: auto !important; }
  .table-wrap thead { display: none !important; }
  .table-wrap tr { padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
  .table-wrap tr:last-child { border-bottom: 0; }
  .table-wrap td {
    display: flex !important;
    width: auto !important;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.5rem;
    padding: 0.15rem 0;
    border-bottom: 0;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
  .table-wrap td.rowname, .table-wrap td:not([data-label]) { font-weight: 600; }
  .table-wrap td.rowname { font-family: var(--font-display); font-size: 1.1rem; line-height: 1.2; padding-bottom: 0.3rem; }
  .table-wrap td[data-label]::before {
    content: attr(data-label);
    max-width: 100%;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    line-height: 1.5;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
  }
}

/* engine: under 600px every group of the footer's map is a row of its own, opens on its own heading, and the shut ones read as one block */
@media (max-width: 600px) {
  footer.site-footer .footer-map { display: grid !important; grid-template-columns: 1fr !important; row-gap: 0 !important; }
  footer.site-footer .footer-map > * { margin-block: 0 !important; padding-block: 0 !important; }
  footer.site-footer .footer-map .eyebrow[aria-expanded="false"] { margin-block: 0 !important; }
  footer.site-footer .footer-map ul[hidden] { display: none !important; }
  .footer-map ul { margin: 0.2rem 0 0.9rem; gap: 0.2rem; }
  .footer-map li { line-height: 1.4; }
  .footer-map .eyebrow { margin-bottom: 0; }
  .footer-map .eyebrow[aria-expanded] { display: flex; align-items: center; min-height: 40px; border-top: 1px solid var(--line); cursor: pointer; }
  .footer-map > :first-child .eyebrow[aria-expanded] { border-top: 0; }
  .footer-map .eyebrow[aria-expanded]::after { content: ""; flex: none; margin-left: auto; width: 0.4em; height: 0.4em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-0.12em) rotate(45deg); transition: transform 120ms ease-out; }
  .footer-map .eyebrow[aria-expanded="true"]::after { transform: translateY(0.06em) rotate(225deg); }
}

/* engine: a row of one of the engine's own reading lists wears the site's own link treatment, and the line itself is not a theme's to take away */
main .post-list > li > a:any-link { text-decoration-line: underline !important; text-decoration-thickness: from-font; text-underline-offset: 0.15em; text-decoration-color: var(--accent); }

/* engine: the door inside the engine's line over the plan's cards wears the site's own link treatment, whatever a theme sets on it */
main .scope-note a:any-link { text-decoration-line: underline; text-decoration-thickness: from-font; text-underline-offset: 0.15em; text-decoration-color: var(--accent); }

/* engine: a row of one of the engine's own reading lists is one measure, and its title, date and summary share it */
.post-list li { max-width: var(--measure); display: grid; grid-template-columns: minmax(0, 1fr); }
.post-list li > a, .post-list li > .meta, .post-list li > p { grid-column: 1; }
.post-list li > a, .post-list li > p { max-width: none; width: auto; justify-self: stretch; }

/* engine: a row of one of the engine's own reading lists reads in one order at every width: its title, then its date, then its summary */
.post-list li > a, .post-list li > .meta, .post-list li > p { order: 0; }
.post-list li:has(> .meta) > a { grid-row: 1; }
.post-list li:has(> .meta) > .meta { grid-row: 2; }
.post-list li:has(> .meta) > p { grid-row: 3; }
.post-list li:not(:has(> .meta)) > a { grid-row: 1; }
.post-list li:not(:has(> .meta)) > p { grid-row: 2; }

/* engine: a row of one of the engine's own reading lists prints its own words in full: they wrap, and no box cuts them */
.post-list li { overflow: visible; height: auto; max-height: none; }
.post-list li > a, .post-list li > p { white-space: normal; overflow: visible; text-overflow: clip; height: auto; max-height: none; -webkit-line-clamp: none; line-clamp: none; }

/* engine: the column under a page head continues it, so it is not a second band of the page */
.page-head:has(+ .page-body) { padding-bottom: calc(var(--space) * 1.5); }
/* engine: and it ends where its words do, so a short page never ends in a band of nothing */
.page-body { padding-top: var(--space); padding-bottom: calc(var(--space) * 1.5); border-top: 0; min-height: 0; height: auto; margin-block: 0; }
.page-body > .narrow { padding-block: 0; margin-block: 0; }
.page-body > .narrow > :last-child,
.page-body > .narrow > :last-child > :last-child,
.page-body > .narrow > :last-child > :last-child > :last-child,
.page-body > .narrow > :last-child > :last-child > :last-child > :last-child { margin-bottom: 0; }
/* engine: and the air between the head's last words and that column's first words is the engine's own rhythm, whatever makes it, padding as well as margin */
.page-head:has(+ .page-body) > .narrow { margin-bottom: 0; padding-bottom: 0; }
.page-head:has(+ .page-body) > .narrow > :last-child,
.page-head:has(+ .page-body) > .narrow > :last-child > :last-child,
.page-head:has(+ .page-body) > .narrow > :last-child > :last-child > :last-child,
.page-head:has(+ .page-body) > .narrow > :last-child > :last-child > :last-child > :last-child { margin-bottom: 0; padding-bottom: 0; }
/* engine: and that padding is measured from the standfirst's LAST LINE: its own box carries the trailing half of its line box, which a generously led standfirst would otherwise add to the air */
.page-head:has(+ .page-body) > .narrow > :last-child { margin-bottom: min(0px, 0.6em - 0.5lh); }
/* engine: and the head is as tall as what it holds, so no floor of its own can open that air under its standfirst */
.page-head:has(+ .page-body),
.page-head:has(+ .page-body) > .narrow,
.page-head:has(+ .page-body) > .narrow > :last-child,
.page-head:has(+ .page-body) > .narrow > :last-child > :last-child,
.page-head:has(+ .page-body) > .narrow > :last-child > :last-child > :last-child,
.page-head:has(+ .page-body) > .narrow > :last-child > :last-child > :last-child > :last-child { min-height: 0; height: auto; aspect-ratio: auto; }
.page-body > .narrow > :first-child,
.page-body > .narrow > :first-child > :first-child,
.page-body > .narrow > :first-child > :first-child > :first-child,
.page-body > .narrow > :first-child > :first-child > :first-child > :first-child { margin-top: 0; }
/* engine: and that air is made INSIDE those two boxes, so the join between them is flush: neither a margin between the head and the column nor a gap the page lays its bands out by can open it from outside both */
.page-head:has(+ .page-body) { margin-bottom: 0; }
.page-head + .page-body { margin-top: 0; }
main:has(> .page-head + .page-body) { row-gap: 0; }
/* engine: and on an index, which is that column led by the engine's own reading list, the air is one of the list's own gaps over a rem, so it reads as the rhythm of the list whatever the theme spaces its rows by */
.page-head:has(+ .page-body > .narrow > ul.post-list:first-child) { padding-bottom: 1rem; }
.page-head + .page-body:has(> .narrow > ul.post-list:first-child) { padding-top: 0; }
.page-head + .page-body > .narrow > ul.post-list:first-child { padding-top: 0; grid-template-rows: 0; }
.page-head + .page-body > .narrow > ul.post-list:first-child::before { content: ""; display: block; height: 0; min-height: 0; margin: 0; padding: 0; border: 0; grid-column: 1 / -1; }
/* engine: and no rule is drawn across the top of that column, on any box above its first words, because what is over it is the page's own head, which it continues */
.page-body > .narrow,
.page-body > .narrow > :first-child,
.page-body > .narrow > :first-child > :first-child,
.page-body > .narrow > :first-child > :first-child > :first-child,
.page-body > .narrow > :first-child > :first-child > :first-child > :first-child { border-top: 0; }
/* engine: and where that column opens with a block of the engine's own, the air over its heading is a rem over one of the theme's own spaces, never a band of the page */
.page-head:has(+ .page-body > .narrow > .block:first-child) { padding-bottom: 1rem; }
.page-body > .narrow > .block:first-child,
.page-body > .narrow > .block:first-child > :first-child { padding-top: 0; }
/* engine: and on a page that is only this column, the space under it is the engine's too */
main:has(> .page-body:last-child) { padding-bottom: 0; margin-bottom: 0; }
main:has(> .page-body:last-child) + footer { margin-top: 0; }

/* engine: the waitlist card's field is a line of text tall, whatever axis a theme stacks its form on */
.capture form input[type=email] { max-height: 4.5em; }

/* engine: under 600px a product capture is the picture itself, whole: its box is sized from it and nothing crops it */
@media (max-width: 600px) {
  .hero-media { max-width: 100% !important; min-width: 0 !important; }
  figure.frame:not(.phone) { max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; }
  figure.frame:not(.phone) > img { max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; object-fit: contain !important; }
}

/* engine: under 600px the hero is one column and a product capture fills the box it was given, so the one picture of the product is never a tile in a panel */
@media (max-width: 600px) {
  .hero.with-media .wrap { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: none !important; grid-auto-flow: row !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; }
  .hero.with-media .wrap > * { grid-column: 1 / -1 !important; grid-row: auto !important; flex: 0 1 auto !important; }
  .hero.with-media .hero-media:not(:has(> figure.frame.phone)) { height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; min-width: min(100%, 20rem) !important; }
  figure.frame:not(.phone) { margin-inline: 0 !important; min-width: min(100%, 20rem) !important; }
}

/* engine: what a product capture is, said on the picture itself */
figure.frame { position: relative !important; }
figure.frame > .shot-mark { display: block !important; position: absolute !important; z-index: 2 !important; inset-block-start: 0.5rem !important; inset-inline-start: 0.5rem !important; inset-block-end: auto !important; inset-inline-end: auto !important; margin: 0 !important; padding: 0.15rem 0.5rem !important; max-width: calc(100% - 1.5rem) !important; overflow: hidden !important; font-family: var(--font-mono), ui-monospace, SFMono-Regular, Menlo, monospace !important; font-size: 0.6875rem !important; line-height: 1.6 !important; font-weight: 500 !important; font-style: normal !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; text-align: start !important; white-space: nowrap !important; text-overflow: ellipsis !important; color: #ffffff !important; background: rgb(15 16 20 / 0.92) !important; border: 0 !important; border-radius: 0.3125rem !important; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.35) !important; opacity: 1 !important; visibility: visible !important; }