/* Seenby brand tokens (generated) */
:root {
  --bg: #f7f9fa;
  --surface: #ffffff;
  --raise: #eef2f4;
  --fg: #111a1f;
  --fg-soft: #3b4850;
  --muted: #66737b;
  --line: #dbe2e6;
  --accent: #0b7a70;
  --accent-ink: #ffffff;
  --accent-1: #d3f2ee;
  --accent-2: #6fd3c6;
  --accent-3: #14a394;
  --accent-4: #0b7a70;
  --accent-5: #064d47;
}

[data-theme="dark"] {
  --bg: #0d1317;
  --surface: #151d22;
  --raise: #1d272d;
  --fg: #e8eef1;
  --fg-soft: #b4c0c6;
  --muted: #85929a;
  --line: #2a363d;
  --accent: #2bbfae;
  --accent-ink: #04201d;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1317;
    --surface: #151d22;
    --raise: #1d272d;
    --fg: #e8eef1;
    --fg-soft: #b4c0c6;
    --muted: #85929a;
    --line: #2a363d;
    --accent: #2bbfae;
    --accent-ink: #04201d;
  }
}

:root {
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", "IBM Plex 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: and at the top of a page the writer wrote, over its first claim */
article.page .state-note { font-size: 0.9rem; line-height: 1.5; margin: var(--space) 0 0; }
/* engine: and in the head of a page the engine composes, under its standfirst */
.page-head .state-note { font-size: 0.9rem; line-height: 1.5; margin: var(--space) 0 0; }

/* engine: the product's own screen at the top of a section index, under the standfirst */
.page-head > .narrow > .page-hero { margin: var(--space) 0 0; }

/* engine: the terms a reading list's line quotes are planned */
.post-list .row-terms { color: var(--fg-soft); }

/* engine: the pages a row of an index folds under it, because they say what it says */
.post-list .also { margin: 0.35rem 0 0; font-size: 0.9em; color: var(--muted); }
.post-list .also a { color: inherit; }

/* 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); }

/* Seenby: the venture's own theme (contract rev 3) */
/* ============================================================
   Luminary — the signal desk
   Dark-first evidence briefing: editorial Manrope headlines,
   numbered ledger sections, IBM Plex Sans/Mono report register,
   and the caveat strip pinned under every claim.
   ============================================================ */

/* ---------- custom properties (defined for BOTH schemes) ---- */
:root {
  --caveat-bg: #e4eef7;
  --caveat-fg: #0b567f;
  --chip-bg: #dcebf6;
  --glow: rgba(14, 111, 173, 0.13);
  --shadow: rgba(15, 28, 46, 0.16);
  --btn-hover: #094d7a;
  --btn-hover-ink: #ffffff;
  --link-hover: #094d7a;
  --meta-ink: #637180;

  --space: 1rem;
  --measure: 62ch;
  --radius: 10px;
  --h1-size: clamp(2.7rem, 6.4vw, 4.6rem);
  --h1-lh: 1.02;
}

[data-theme="dark"] {
  --caveat-bg: #0e2338;
  --caveat-fg: #a8cceb;
  --chip-bg: #122b44;
  --glow: rgba(59, 150, 207, 0.16);
  --shadow: rgba(0, 0, 0, 0.55);
  --btn-hover: #7ec0e8;
  --btn-hover-ink: #0a1520;
  --link-hover: #7ec0e8;
  --meta-ink: #a3b4c8;
}

/* ---------- base ------------------------------------------- */
body {
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2rem);
}

/* .narrow shares the .wrap container so every section keeps one
   left edge; reading measures are capped per element instead. */
.narrow {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2rem);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-weight: 800; }
h2 { font-weight: 800; }
h3 { font-weight: 700; }

p { margin: 0 0 1em; }

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
a:hover { color: var(--link-hover); text-decoration-color: currentColor; }

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

::selection { background: var(--accent); color: var(--accent-ink); }

.muted { color: var(--muted); }
[data-theme="dark"] .muted,
[data-theme="dark"] .note,
[data-theme="dark"] .meta,
[data-theme="dark"] .crumbs,
[data-theme="dark"] .byline { color: var(--fg-soft); }

.mono,
.eyebrow,
.meta,
.crumbs,
.byline {
  font-family: var(--font-mono);
}

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

/* ---------- buttons ---------------------------------------- */
.button {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.8rem 1.3rem;
  border-radius: 8px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
}

.button.primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.button.primary:hover {
  background: var(--btn-hover);
  border-color: var(--btn-hover);
  color: var(--btn-hover-ink);
}

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

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.6rem;
}

/* ---------- the caveat strip (signature) -------------------- */
.hero .actions::after,
.plan .price::after {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--caveat-fg);
  background: var(--caveat-bg);
  border-left: 3px solid var(--accent);
  padding: 0.55rem 0.85rem;
  border-radius: 0 6px 6px 0;
}

.hero .actions::after {
  content: "measured weekly \00b7 two providers \00b7 the caveat ships with every score";
  flex-basis: 100%;
  max-width: 44rem;
  margin-top: 0.9rem;
}

.plan .price::after {
  content: "planned pricing \00b7 may change before launch";
  margin-top: 0.7rem;
  font-weight: 500;
}

.capture .note {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--caveat-fg);
  background: var(--caveat-bg);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  padding: 0.6rem 0.85rem;
  margin: 1.1rem 0 0;
}
.capture .note a { color: var(--caveat-fg); text-decoration-color: currentColor; }

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

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.25rem;
  padding-block: 0.6rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--fg);
  margin-right: auto;
}
.brand .mark { width: 30px; height: 30px; flex: none; }
.brand .logotype {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--fg);
}

.nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav > a,
.nav .navgroup > summary {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--fg-soft);
  text-decoration: none;
  padding: 0.45rem 0.65rem;
  border-radius: 7px;
}
.nav > a:hover,
.nav .navgroup > summary:hover { color: var(--accent); background: var(--raise); }
.nav > a[aria-current], .nav > a.active { color: var(--accent); }

.navgroup { position: relative; }
.navgroup > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.navgroup > summary::-webkit-details-marker { display: none; }
.navgroup > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.7;
}
.navgroup[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }

.navmenu {
  position: absolute;
  top: calc(100% + 0.8rem);
  right: -1rem;
  width: 22.5rem;
  max-width: 86vw;
  display: grid;
  gap: 0.15rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 20px 48px -16px var(--shadow);
  padding: 0.6rem;
  z-index: 70;
}
.navmenu a {
  display: block;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--fg-soft);
  text-decoration: none;
  padding: 0.5rem 0.65rem;
  border-radius: 7px;
}
.navmenu a:hover { background: var(--raise); color: var(--accent); }

.nav a.cta {
  margin-left: 0.6rem;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  padding: 0.6rem 1.05rem;
  border-radius: 8px;
}
.nav a.cta:hover { background: var(--btn-hover); color: var(--btn-hover-ink); }

.nav-toggle summary {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.55rem 0.9rem;
}
.nav-toggle[open] summary { border-color: var(--accent); color: var(--accent); }

@media (max-width: 720px) {
  .site-header .wrap { row-gap: 0.4rem; }
  .nav-toggle[open] + .nav {
    gap: 0;
    padding: 0.6rem 0 1rem;
    border-top: 1px solid var(--line);
    margin-top: 0.5rem;
  }
  .nav-toggle[open] + .nav > a,
  .nav-toggle[open] + .nav .navgroup > summary {
    display: block;
    width: 100%;
    padding: 0.7rem 0.25rem;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    font-size: 0.95rem;
  }
  .nav-toggle[open] + .nav .navgroup { width: 100%; }
  .nav-toggle[open] + .nav .navmenu {
    width: 100%;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0.2rem 0 0.4rem 0.9rem;
  }
  .nav-toggle[open] + .nav a.cta {
    margin: 0.9rem 0 0;
    text-align: center;
    width: 100%;
  }
}

/* ---------- sections: the ledger --------------------------- */
main > section,
main section.page-head {
  padding-block: clamp(3rem, 7.5vw, 6rem);
}

main > section + section { border-top: 1px solid var(--line); }

/* the first section after the hero sits a step closer */
.hero + section { padding-block-start: 4.5rem; }

.wash { background: var(--surface); }

.section-head { margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }
.section-head h2 {
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  line-height: 1.2;
  max-width: 36ch;
  margin-bottom: 0.4em;
}
.section-head p.muted {
  max-width: 56ch;
  font-size: 1.02rem;
}

/* numbered ledger sections, identical on every page kind */
main { counter-reset: sec; }
main > section .section-head .eyebrow { counter-increment: sec; }
main > section .section-head .eyebrow::before {
  content: counter(sec, decimal-leading-zero) " / ";
  color: var(--meta-ink);
}

/* ---------- hero: editorial -------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
}
.hero .motif {
  position: absolute;
  top: 0;
  right: 0;
  width: min(62vw, 760px);
  height: 100%;
  opacity: 0.5;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(115deg, transparent 10%, #000 65%);
  mask-image: linear-gradient(115deg, transparent 10%, #000 65%);
}
[data-theme="dark"] .hero .motif { opacity: 0.3; }

.hero .wrap { position: relative; }

.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--chip-bg);
  color: var(--accent);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  margin-bottom: 1.4rem;
}
.hero .eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.hero h1 {
  font-size: var(--h1-size);
  line-height: var(--h1-lh);
  letter-spacing: -0.03em;
  max-width: 21ch;
  margin-bottom: 0.45em;
}

.hero .lead {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.6;
  color: var(--fg-soft);
  max-width: 52ch;
  margin-bottom: 0;
}

.hero-media {
  position: relative;
  margin-top: clamp(2rem, 5vw, 3.25rem);
  z-index: 1;
}
.hero-media::before {
  content: "";
  position: absolute;
  inset: -12% -8%;
  background: radial-gradient(55% 55% at 50% 18%, var(--glow), transparent 72%);
  pointer-events: none;
  z-index: 0;
}
.hero-media .frame { position: relative; z-index: 1; }
.hero .frame img {
  aspect-ratio: 1280 / 720;
  object-fit: cover;
  object-position: top center;
}

/* ---------- frames ----------------------------------------- */
figure.frame {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 60px -24px var(--shadow);
}
figure.frame .bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.55rem 0.85rem;
  background: var(--raise);
  border-bottom: 1px solid var(--line);
}
figure.frame .bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line);
}
figure.frame .bar::after {
  content: "sample data \00b7 caveat attached";
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--meta-ink);
}
figure.frame img { display: block; width: 100%; height: auto; }

/* ---------- problem ---------------------------------------- */
.problem p {
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--fg-soft);
  max-width: var(--measure);
  margin-bottom: 0;
}

/* ---------- grids and cards -------------------------------- */
.grid { display: grid; gap: 1.1rem; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

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

.grid { align-items: stretch; }
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.wash .card { background: var(--bg); }
.card:hover { border-color: var(--accent-2); }
.card h3 {
  font-size: 1.06rem;
  margin: 0 0 0.55em;
}
.features .card h3,
.use-cases .card h3 { min-height: 2.5em; }
.card p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--muted); }
[data-theme="dark"] .card p { color: var(--fg-soft); }
.card .eyebrow { margin-bottom: 0.4rem; }

.glyph {
  width: 28px;
  height: 28px;
  flex: none;
  display: grid;
  place-items: center;
  background: none;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  margin-bottom: 1.25rem;
  opacity: 0.9;
}
.card:hover .glyph { opacity: 1; }
.glyph .icon { width: 16px; height: 16px; }

/* ---------- spotlights ------------------------------------- */
.spotlight {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.spotlight.flip .frame { order: -1; }
.spotlight h2 { font-size: clamp(1.35rem, 2.4vw, 1.8rem); max-width: 24ch; }
.spotlight .muted { max-width: 48ch; margin-bottom: 0; }
.spotlight .frame img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top center;
}
@media (max-width: 860px) {
  .spotlight { grid-template-columns: 1fr; }
  .spotlight.flip .frame { order: 0; }
}

/* ---------- steps ------------------------------------------ */
ol.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  max-width: 50rem;
}
ol.steps > li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1.5rem 0;
  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-mono);
  font-size: 1.15rem;
  color: var(--accent);
  line-height: 1.3;
}
ol.steps h3 { font-size: 1.1rem; margin-bottom: 0.35em; }
ol.steps p { margin: 0; color: var(--fg-soft); font-size: 0.95rem; }

/* ---------- gallery ---------------------------------------- */
.gallery .shots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.gallery .frame img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top center;
}
@media (max-width: 760px) {
  .gallery .shots { grid-template-columns: 1fr; }
}

/* ---------- faq -------------------------------------------- */
.faq details { border-top: 1px solid var(--line); max-width: 50rem; }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  padding: 1.05rem 2.4rem 1.05rem 0;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0.3rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 1.25rem;
  color: var(--accent);
}
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--accent); }
.faq details p {
  margin: 0 0 1.25rem;
  color: var(--fg-soft);
  max-width: 62ch;
}

/* ---------- capture / cta ---------------------------------- */
.cta.wash { border-top: 1px solid var(--line); }

.capture {
  max-width: 40rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.4rem);
}
.capture h2 { font-size: clamp(1.45rem, 2.6vw, 1.9rem); }
.capture .muted { max-width: 52ch; }
.capture form {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.3rem;
}
.capture input[type="email"] {
  flex: 1 1 14rem;
  min-width: 0;
  font: inherit;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.75rem 1rem;
}
.capture input[type="email"]::placeholder { color: var(--meta-ink); }
.capture input[type="email"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.capture .button { flex: none; }
.capture .thanks {
  font-family: var(--font-mono);
  color: var(--accent);
  margin: 1.2rem 0 0;
}
@media (max-width: 560px) {
  .capture form { flex-direction: column; }
}

/* ---------- latest / post lists ---------------------------- */
ul.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 50rem;
}
ul.post-list > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.3rem 1rem;
  align-items: baseline;
  padding-block: 1.375rem;
  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: 700;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-decoration: none;
}
ul.post-list a:hover { color: var(--accent); }
ul.post-list .meta {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--meta-ink);
  white-space: nowrap;
}
ul.post-list p {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.93rem;
  color: var(--muted);
  max-width: 62ch;
}
[data-theme="dark"] ul.post-list p { color: var(--fg-soft); }

p.pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
}
p.pager a {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.55rem 0.95rem;
  color: var(--fg);
}
p.pager a:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- spec pages / content pages ---------------------- */
section.page-head { padding-bottom: clamp(1.5rem, 4vw, 2.5rem); }
section.page-head h1,
article.page h1,
body[data-kind="article"] article h1 {
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  letter-spacing: -0.025em;
  line-height: 1.06;
  max-width: 24ch;
}
section.page-head .lead,
article.page .lead,
body[data-kind="article"] article .lead {
  font-size: 1.12rem;
  line-height: 1.65;
  color: var(--fg-soft);
  max-width: 58ch;
}

p.crumbs {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--meta-ink);
  margin: 0 0 1.6rem;
}
p.crumbs a {
  color: var(--meta-ink);
  text-decoration: none;
}
p.crumbs a:hover { color: var(--accent); }

article.page,
body[data-kind="article"] article {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

article.page .page-hero {
  margin: 2rem 0 0.5rem;
  max-width: 54rem;
}
article.page .page-hero figure.frame {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
/* keep the chrome bar painted above the zoomed screenshot */
article.page .page-hero figure.frame .bar {
  position: relative;
  z-index: 2;
}
article.page .page-hero img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% 20%;
  transform: scale(1.55);
  transform-origin: 50% 42%;
}

/* blocks read as a ruled report */
section.block {
  margin-top: clamp(2.2rem, 5vw, 3.2rem);
  max-width: 54rem;
}
section.block > h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  margin-bottom: 0.9rem;
}
section.block .prose > h3 { font-size: 1.12rem; margin-top: 1.8em; }

/* ---------- prose ------------------------------------------ */
.prose { max-width: var(--measure); }
.prose p { line-height: 1.65; max-width: var(--measure); }
.prose h2 {
  font-size: 1.5rem;
  margin-top: 2em;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}
.prose h3 { font-size: 1.12rem; margin-top: 1.8em; }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1.2em; }
.prose li { margin-bottom: 0.45em; line-height: 1.6; }
.prose li::marker { color: var(--accent); }
.prose blockquote {
  margin: 1.6em 0;
  padding: 0.3rem 0 0.3rem 1.2rem;
  border-left: 3px solid var(--accent);
  color: var(--fg-soft);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--raise);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.1em 0.35em;
}
.prose pre {
  background: var(--raise);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  overflow-x: auto;
  font-size: 0.86rem;
  line-height: 1.6;
}
.prose pre code { background: none; border: 0; padding: 0; }
.prose img { border-radius: 10px; border: 1px solid var(--line); }

/* ---------- tables ----------------------------------------- */
.table-wrap {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow-x: auto;
  margin: 1.4rem 0;
}
.table-wrap table,
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.table-wrap table { min-width: 540px; }
th {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  color: var(--fg-soft);
  background: var(--raise);
  padding: 0.7rem 0.95rem;
  border-bottom: 1px solid var(--line);
}
td {
  padding: 0.7rem 0.95rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.55;
}
tr:last-child td { border-bottom: 0; }
.prose table { border: 1px solid var(--line); border-radius: 10px; }

/* ---------- callout, sources, related ----------------------- */
aside.callout {
  background: var(--caveat-bg);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  padding: 1.1rem 1.3rem;
  margin: 1.5rem 0;
  color: var(--fg);
}
aside.callout p { margin: 0; line-height: 1.6; }
aside.callout p + p { margin-top: 0.7em; }

.sources ul, .sources ol { padding-left: 1.2rem; max-width: var(--measure); }
.sources li { font-size: 0.9rem; margin-bottom: 0.4em; color: var(--fg-soft); }

/* ---------- benefits --------------------------------------- */
.benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1.4rem 0;
}
@media (max-width: 640px) {
  .benefits { grid-template-columns: 1fr; }
}

/* ---------- pricing ---------------------------------------- */
/* the planned-pricing disclosure wears the caveat strip */
body[data-kind="page:pricing"] section.block:first-of-type {
  margin-top: 1.75rem;
}
body[data-kind="page:pricing"] section.block > p.muted {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--caveat-fg);
  background: var(--caveat-bg);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  padding: 0.6rem 0.85rem;
  max-width: 44rem;
  margin: 0 0 1.75rem;
}

.plan-cards { margin: 1.5rem 0; }
.card.plan {
  max-width: 34rem;
  border-top: 3px solid var(--accent);
  padding: 1.8rem 1.7rem;
}
.card.plan h3 { font-size: 1.2rem; }
.plan .price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 2.6rem);
  letter-spacing: -0.03em;
  color: var(--fg);
  line-height: 1.1;
  margin: 0.3rem 0 1rem;
}
.plan .meta { font-size: 0.78rem; color: var(--meta-ink); }
.plan p { font-size: 0.95rem; color: var(--fg-soft); }
ul.includes {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
}
ul.includes li {
  position: relative;
  padding: 0.55rem 0 0.55rem 1.6rem;
  border-top: 1px solid var(--line);
  font-size: 0.93rem;
  color: var(--fg);
}
ul.includes li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 1.05rem;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* ---------- articles --------------------------------------- */
p.byline {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--meta-ink);
  margin: 0 0 1.8rem;
}
figure.cover {
  margin: 0 0 2rem;
  max-width: 54rem;
}
figure.cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--line);
}
[data-theme="dark"] figure.cover img {
  filter: saturate(0.85) brightness(0.88);
}

/* ---------- not found -------------------------------------- */
body[data-kind="not_found"] main > section {
  min-height: 45vh;
  display: block;
  padding-block: clamp(4rem, 10vw, 7rem);
  text-align: left;
}
body[data-kind="not_found"] main .narrow {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
}
body[data-kind="not_found"] .section-head { margin-bottom: 1.2rem; }
body[data-kind="not_found"] .section-head::before {
  content: "home / 404";
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--meta-ink);
  margin-bottom: 1.6rem;
}
body[data-kind="not_found"] .section-head h2 {
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 0;
}
body[data-kind="not_found"] main p { max-width: var(--measure); }

/* ---------- footer ----------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  margin-top: clamp(2rem, 6vw, 4rem);
}
body[data-kind="home"] .site-footer,
article.page + .site-footer { margin-top: 0; }

/* balanced multi-column link index: short groups stay intact,
   the long Resources group flows across the remaining columns */
.site-footer .footer-map {
  display: block;
  columns: 5;
  column-gap: 3rem;
  padding-block: clamp(2.2rem, 5vw, 3.2rem);
}
.site-footer .footer-map > div {
  break-inside: avoid;
  margin-bottom: 1.8rem;
}
.site-footer .footer-map > div:nth-child(3) { break-inside: auto; }
.site-footer .footer-map li { break-inside: avoid; }
@media (max-width: 960px) {
  .site-footer .footer-map { columns: 3; }
}
@media (max-width: 640px) {
  .site-footer .footer-map { columns: 2; }
}
@media (max-width: 440px) {
  .site-footer .footer-map { columns: 1; }
}
.site-footer .footer-map .eyebrow { color: var(--meta-ink); margin-bottom: 0.6rem; }
.site-footer .footer-map ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer .footer-map li { margin-bottom: 0.55rem; }
.site-footer .footer-map a {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--fg-soft);
  text-decoration: none;
}
.site-footer .footer-map a:hover { color: var(--accent); }

.site-footer > .wrap:last-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.6rem;
  padding-block: 1.4rem;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
}
.site-footer > .wrap:last-child nav {
  display: flex;
  gap: 1.1rem;
  margin-left: auto;
}
.site-footer > .wrap:last-child nav a {
  color: var(--fg-soft);
  text-decoration: none;
  font-size: 0.85rem;
}
.site-footer > .wrap:last-child nav a:hover { color: var(--accent); }

a.stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--fg-soft);
  text-decoration: none;
}
a.stamp:hover { color: var(--accent); }
a.stamp img { width: 18px; height: 18px; }

/* ---------- motion (opt-in only) ---------------------------- */
@media (prefers-reduced-motion: no-preference) {
  a, .button, .card, .nav > a, .navmenu a, .faq summary,
  p.pager a, .nav .navgroup > summary {
    transition: color 140ms ease, background-color 140ms ease,
                border-color 140ms ease;
  }
  .button.primary:hover { transform: translateY(-1px); }
  .button { transition: color 140ms ease, background-color 140ms ease,
            border-color 140ms ease, transform 140ms ease; }
}

/* ---------- small screens ----------------------------------- */
@media (max-width: 720px) {
  :root { --h1-size: clamp(2.2rem, 9vw, 2.8rem); }
  .hero .actions::after { font-size: 0.6rem; }
  ol.steps > li { grid-template-columns: 2.6rem minmax(0, 1fr); }
  ul.post-list > li { grid-template-columns: 1fr; }
  ul.post-list .meta { order: -1; }
  .site-footer > .wrap:last-child { flex-direction: column; align-items: flex-start; }
  .site-footer > .wrap:last-child nav { margin-left: 0; }
}

.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; }
/* engine: the menu at the end of the bar opens back from its own end, so its panel cannot run past the window */
header.site-header .navgroup[data-bar-end] > .navmenu { left: auto; right: -0.75rem; }
/* 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 { min-width: 0; }
  header.site-header nav.nav > details > summary { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; }
  header.site-header nav.nav > details > summary > .navlabel { padding-inline: 0; order: -1; }
  header.site-header nav.nav > details > summary > .chevron { margin-inline-end: 0; visibility: visible; order: 1; flex: none; }
  header.site-header .nav > a.cta { flex: none; }
}

/* engine: at desktop width the wordmark starts the header's row and the bar ends it, whatever a theme sets on the row */
@media (min-width: 721px) {
  header.site-header .wrap > nav.nav { flex: 0 1 auto; width: auto; margin-inline-start: auto; }
}

/* 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, 2vw, 1rem); }
  header.site-header .nav-toggle:not([open]) + .nav > a.cta.cta-short { font-size: min(1em, max(0.875rem, 3.6vw)); letter-spacing: normal; }
}

/* 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; }
  header.site-header .nav-toggle:not([open]) + .nav::before,
  header.site-header .nav-toggle:not([open]) + .nav::after { content: none; }
}

/* engine: while the phone menu is shut the action keeps no block margin of its own, so it sits on the row's own centre beside the trigger */
@media (max-width: 720px) {
  header.site-header .nav-toggle:not([open]) + .nav > a.cta { margin-block: 0; }
}

/* engine: every row of the open phone drawer, the action included, carries the engine's own room inside it, so every row's words begin on one edge and the one box a visitor can see is drawn around that room */
@media (max-width: 720px) {
  .nav-toggle[open] + .nav { padding-inline: 0; }
  header.site-header .nav-toggle[open] + .nav > a:not(.cta),
  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:not(.cta),
  header.site-header .nav-toggle[open] + .nav > details > summary { padding-inline: 1rem; }
  header.site-header .nav-toggle[open] + .nav > details > .navmenu { padding-inline-start: calc(1rem + 0.85rem); }
  header.site-header .nav-toggle[open] + .nav > a.cta { padding-inline: 1rem; 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: in the open phone drawer the state of a menu's row is the engine's mark, against the row's far edge, turned over on the one row whose list is under it */
@media (max-width: 720px) {
  header.site-header .nav-toggle[open] + .nav > details.navgroup > summary > .chevron { display: inline-block !important; visibility: visible !important; margin-inline-start: auto !important; margin-inline-end: 0 !important; transform: none !important; opacity: 0.7 !important; }
  header.site-header .nav-toggle[open] + .nav > details.navgroup[open] > summary > .chevron { transform: rotate(180deg) !important; opacity: 1 !important; }
}

/* 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: a container of the site's own takes the free space beside it evenly, so a page sits on the same middle of the paper its chrome does */
.wrap, .narrow { margin-inline: auto; }

/* 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-top: 0.6rem;
    padding-bottom: 0.6rem;
    padding-left: 0.9rem !important;
    padding-right: 0.9rem !important;
    border-bottom: 1px solid var(--line);
  }
  .table-wrap tr:last-child { border-bottom: 0; }
  .table-wrap td {
    display: block !important;
    width: auto !important;
    padding: 0;
    border-bottom: 0;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
  .table-wrap td + td { margin-top: 0.6rem !important; }
  .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; }
  .table-wrap td[data-label]::before {
    content: attr(data-label);
    display: block !important;
    float: none !important;
    position: static !important;
    min-height: 1em !important;
    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: the footer's map and its bottom row are one block in two boxes, so they share one container */
footer.site-footer > .footer-map, footer.site-footer > .wrap { width: min(100% - 2rem, 72rem) !important; max-width: none !important; margin-inline: auto !important; padding-inline: 0 !important; }
/* engine: and the map is part of the footer, never a panel inside it */
footer.site-footer > .footer-map { background: none !important; box-shadow: none !important; border-inline: 0 !important; }

/* 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 section's own pages under the plan's cards stand clear of them, whatever a theme sets on its lists */
.use-cases .section-pages { margin-block-start: calc(var(--space, 1rem) * 2); }

/* 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; }
.post-list li:has(> .meta) > p.also:not(:first-of-type) { grid-row: 4; }
.post-list li:not(:has(> .meta)) > p.also:not(:first-of-type) { grid-row: 3; }

/* engine: a page folded onto a row is part of that row's own line, so its link is set in the line and never as a second title */
.post-list .also a { font: inherit; letter-spacing: inherit; }
.post-list .also 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 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, and the step between them is the engine's own rem rather than the unit a theme bands with */
.page-head:has(+ .page-body) { padding-bottom: 1.5rem; }
/* engine: and it ends where its words do, so a short page never ends in a band of nothing */
.page-body { padding-top: 1rem; padding-bottom: 1.5rem; border-top: 0; min-height: 0; height: auto; aspect-ratio: auto; margin-block: 0; }
/* engine: said again on the column named as what it is and where it is, so an ordinary rule about the page's last section cannot outrank it by weight */
main > section.page-body:last-child { padding-top: 1rem; padding-bottom: 1.5rem; border-top: 0; min-height: 0; height: auto; aspect-ratio: 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 boxes the engine itself puts at that edge hold no air and no floor of their own, so the step under the page's last words is the column's own padding and nothing else */
.page-body > .narrow,
.page-body > .narrow > :last-child,
.page-body > .narrow > :last-child > ul.post-list:last-child { padding-bottom: 0; min-height: 0; height: auto; aspect-ratio: auto; }
/* 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 that head holds the engine's own words: a box a stylesheet GENERATES on it or on the wrap it is poured into is neither its height nor its spacing, so it lands under the standfirst where no rule above can reach it */
main > section.page-head:has(+ .page-body)::before,
main > section.page-head:has(+ .page-body)::after,
main > section.page-head:has(+ .page-body) > div.narrow::before,
main > section.page-head:has(+ .page-body) > div.narrow::after { content: none; }
/* engine: and so does the column that continues it: a box a stylesheet GENERATES above that column's first words, on the column, on the wrap it is poured into or on the box that wrap opens with, lands in the same air and is neither their spacing nor their height either */
main > section.page-head + section.page-body::before,
main > section.page-head + section.page-body > div.narrow::before,
main > section.page-head + section.page-body > div.narrow > :first-child:not(ul.post-list)::before { content: none; }
/* engine: and so do the words that head closes with, one level inside its wrap, which is the reach the rule above has on the column's side: a box generated AFTER the head's last words lands under the standfirst, in the air the engine owns, and a mark left in those words' flow as a block takes a line of its own there */
main > section.page-head:has(+ .page-body) > div.narrow > :last-child::after { content: none; }
/* 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 of the head's over the column's own rem, 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 a mark a theme hangs on one of this column's own block headings is part of that heading's line, sharing its baseline, never a line of its own */
.page-body > .narrow > .block > h2::before,
.page-body > .narrow > .block > h2::after { display: inline-block; vertical-align: baseline; }
/* engine: with the room beside it the engine gives the mark it puts in a block's heading itself (ICON_CSS), because the room a rail gave it went with the rail */
.page-body > .narrow > .block > h2::before { margin-inline-end: 0.4em; }
.page-body > .narrow > .block > h2::after { margin-inline-start: 0.4em; }
/* 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: under 600px a band of product captures is one column, so no capture is drawn past the page's edge */
@media (max-width: 600px) {
  .shots:has(> figure.frame:not(.phone)), .spotlight { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: none !important; grid-auto-flow: row !important; grid-auto-columns: minmax(0, 1fr) !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; }
  .shots:has(> figure.frame:not(.phone)) > *, .spotlight > * { grid-column: 1 / -1 !important; grid-row: auto !important; flex: 0 1 auto !important; }
}

/* engine: under 600px the box that holds a product capture fits the page, so no capture is drawn wider than the window */
@media (max-width: 600px) {
  *:has(> figure.frame:not(.phone)) { box-sizing: border-box !important; max-width: min(100%, 100vw) !important; min-width: 0 !important; margin-inline: 0 !important; }
}

/* engine: under 600px a product capture is painted where it was laid out, so nothing paints it past the page's edge */
@media (max-width: 600px) {
  *:has(> figure.frame:not(.phone)), figure.frame:not(.phone), figure.frame:not(.phone) > img { transform: none !important; scale: none !important; translate: none !important; rotate: none !important; }
}

/* engine: under 600px a product capture's frame is an upright block and the picture is its own, filling it, so nothing lays the picture out wider than the frame that holds it */
@media (max-width: 600px) {
  figure.frame:not(.phone) { display: block !important; writing-mode: horizontal-tb !important; }
  figure.frame:not(.phone) > img { position: static !important; float: none !important; width: 100% !important; }
}

/* engine: under 600px a product capture and every box the page lays it out inside are in the page's own writing mode, so every bound the engine writes on it is read in the page's own axis */
@media (max-width: 600px) {
  figure.frame:not(.phone), :has(figure.frame:not(.phone)) { writing-mode: horizontal-tb !important; }
}

/* engine: the picture of the product in a page head the engine composes is drawn across that head's own reading column, in its flow */
section.page-head > .narrow > .page-hero { display: block !important; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-inline: 0 !important; float: none !important; position: static !important; transform: none !important; scale: none !important; translate: none !important; rotate: none !important; }
section.page-head > .narrow > .page-hero > figure.frame:not(.phone) { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-inline: 0 !important; float: none !important; position: static !important; transform: none !important; scale: none !important; translate: none !important; rotate: none !important; }
section.page-head > .narrow > .page-hero > figure.frame:not(.phone) > img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; transform: none !important; scale: none !important; translate: none !important; rotate: none !important; }

/* engine: the frame of the picture in a page head the engine composes stays in that head's own flow, whatever shape the capture is */
section.page-head > .narrow > .page-hero > figure.frame { float: none !important; position: static !important; }

/* engine: the picture of the product in a page head the engine composes is painted in the room that head gives it, so the room is never blank paper under the standfirst */
section.page-head > .narrow > .page-hero,
section.page-head > .narrow > .page-hero > figure.frame,
section.page-head > .narrow > .page-hero > figure.frame > img { opacity: 1 !important; visibility: visible !important; content-visibility: visible !important; clip-path: none !important; filter: none !important; mix-blend-mode: normal !important; transform: none !important; scale: none !important; translate: none !important; rotate: none !important; }

/* engine: under 600px a product capture's frame fits the window wherever it is laid out, stays in its box's own flow and keeps the picture inside it */
@media (max-width: 600px) {
  *:has(> figure.frame:not(.phone)) { inset: auto !important; }
  figure.frame:not(.phone) { max-width: min(100%, 100vw) !important; position: relative !important; inset: auto !important; float: none !important; }
  figure.frame:not(.phone) > img { margin-inline: 0 !important; padding-inline: 0 !important; }
  section.page-head > .narrow > .page-hero > figure.frame:not(.phone) { max-width: min(100%, 100vw) !important; }
}

/* engine: a band whose only picture is a wide capture is one column, and the picture sits centred under the head on the band's own axis */
.gallery .shots:has(> figure.frame:not(.phone):only-child) { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.gallery .shots > figure.frame:not(.phone):only-child { width: min(100%, 60rem); margin-inline: auto; }

/* engine: a step of a page's steps block keeps its name and its detail in the row's words column */
.block > ol.steps > li > strong, .block > ol.steps > li > p { grid-column: -2 / -1 !important; }

/* engine: a page's card set is two to a row, one where two will not fit, and an odd set's last card fills its row */
@supports (grid-template-columns: repeat(auto-fit, minmax(max(14rem, 40%), 1fr))) {
  .benefits:not(.strip-cells) { grid-template-columns: repeat(auto-fit, minmax(max(14rem, 40%), 1fr)); }
  .benefits:not(.strip-cells) > .card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* engine: a band left with one card is one column, and that card fills the row it sits on */
.benefits:not(.strip-cells):has(> .card:only-child), .plan-cards:has(> .card:only-child), .grid:has(> .card:only-child) { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
.benefits:not(.strip-cells):has(> .card:only-child) > .card, .plan-cards:has(> .card:only-child) > .card, .grid:has(> .card:only-child) > .card { max-width: none; }

/* engine: a page's own questions are one block inside the page, never a band of it */
div.faq { padding-block: 0; margin-block: 0; border-top: 0; border-bottom: 0; min-height: 0; height: auto; }

/* engine: this theme's own rules leave a row of the open phone drawer with no room inside it, so the engine's own room is given back to every row of that drawer, the action included, and the pill's ground is drawn around it again */
@media (max-width: 720px) {
  header.site-header .nav-toggle[open] + .nav > a:not(.cta),
  header.site-header .nav-toggle[open] + .nav > details > summary,
  header.site-header .nav-toggle[open] + .nav > a.cta { padding-inline: 1rem !important; }
}

/* engine: this theme's own rules size a menu's panel for the bar, so inside the open phone drawer the panel is given back to the drawer: no wider than the box that holds it, with the drawer's own room at its far end and one column of rows that fits it */
@media (max-width: 720px) {
  header.site-header .nav-toggle[open] + .nav > details { min-width: 0 !important; max-width: 100% !important; }
  header.site-header .nav-toggle[open] + .nav > details > .navmenu { box-sizing: border-box !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; margin-inline: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; padding-inline-end: 1rem !important; }
  header.site-header .nav-toggle[open] + .nav > details > .navmenu > a { min-width: 0 !important; max-width: 100% !important; white-space: normal !important; overflow-wrap: break-word !important; }
}

/* engine: in the open phone drawer the engine draws its own mark on every menu's row whatever this theme did about the bar's, so a menu's label generates nothing of the theme's own there and a visitor reads one mark */
@media (max-width: 720px) {
  header.site-header .nav-toggle[open] + .nav > details.navgroup > summary::before,
  header.site-header .nav-toggle[open] + .nav > details.navgroup > summary::after,
  header.site-header .nav-toggle[open] + .nav > details.navgroup > summary > .navlabel::before,
  header.site-header .nav-toggle[open] + .nav > details.navgroup > summary > .navlabel::after { content: none !important; }
}

/* engine: this theme draws a drop-down mark of its own on a menu's label and leaves the engine's own mark standing beside it, so on the bar the theme's box generates nothing and the one mark a visitor reads is the engine's */
@media (min-width: 721px) {
  header.site-header nav.nav > details.navgroup > summary::before,
  header.site-header nav.nav > details.navgroup > summary::after,
  header.site-header nav.nav > details.navgroup > summary > .navlabel::before,
  header.site-header nav.nav > details.navgroup > summary > .navlabel::after { content: none !important; }
}

/* engine: this theme's own rules can draw the panel of the menu at the end of the bar somewhere other than where the engine hung it, and that is the one panel with the window's edge beside it, so on the bar it is hung again from its own right edge, in the box the engine gave it and moved by nothing */
@media (min-width: 721px) {
  header.site-header nav.nav > details.navgroup[data-bar-end] { position: relative !important; }
  header.site-header nav.nav > details.navgroup[data-bar-end] > .navmenu { position: absolute !important; left: auto !important; right: -0.75rem !important; margin-inline: 0 !important; transform: none !important; translate: none !important; }
}

/* engine: this theme's own rules size a stacked table's cards or the label inside one, and under 600px a label's line IS the card's own width, so the cards are sized by the window again and each label takes the whole of the line it is given */
@media (max-width: 600px) {
  .table-wrap, .table-wrap table, .table-wrap tbody, .table-wrap tr { min-width: 0 !important; }
  .table-wrap table, .table-wrap tbody, .table-wrap tr { width: auto !important; }
  .table-wrap td[data-label]::before { width: auto !important; min-width: 0 !important; max-width: none !important; }
}

/* engine: the shape blocks a page review asked for (a figure band, a steps band, a comparison strip) */
.figure-band > .figure-band-body { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: calc(var(--space, 1rem) * 1.5) !important; align-items: center !important; min-width: 0 !important; max-width: 100% !important; }
.figure-band > .figure-band-body > .figure-band-words, .figure-band > .figure-band-body > .figure-band-media { grid-column: 1 !important; grid-row: auto !important; min-width: 0 !important; margin: 0 !important; }
@media (min-width: 760px) {
  .figure-band:not(.is-wide) > .figure-band-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) !important; }
  .figure-band:not(.is-wide) > .figure-band-body > .figure-band-words { grid-column: 1 !important; grid-row: 1 !important; }
  .figure-band:not(.is-wide) > .figure-band-body > .figure-band-media { grid-column: 2 !important; grid-row: 1 !important; }
}
.figure-band-media > figure.frame { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; position: static !important; transform: none !important; float: none !important; }
.figure-band-media > figure.frame > img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; }
.figure-band-media > figure.frame.phone { width: min(16rem, 100%) !important; margin-inline: auto !important; }
/* engine: a band that CLOSES with the picture its own words name draws that box alone, after the words or the links it belongs to, with one step of clear space above it (components.band_shot_box, a div and never one of a page's own .block sections) */
div.figure-band { margin: calc(var(--space, 1rem) * 1.5) 0 0 !important; }
.steps-band .steps > li > div { min-width: 0 !important; }
.steps-band .steps > li .step-shot { display: block !important; min-width: 0 !important; margin: var(--space, 1rem) 0 0 !important; }
.steps-band .steps > li .step-shot > figure.frame { box-sizing: border-box !important; width: 100% !important; max-width: 36rem !important; min-width: 0 !important; margin: 0 !important; position: static !important; transform: none !important; float: none !important; }
.steps-band .steps > li .step-shot > figure.frame > img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; }
.steps-band .steps > li .step-shot > figure.frame.phone { width: min(13rem, 100%) !important; }

/* engine: a wide capture under its words at the column's width, never past its own size, whole at every width */
:is(.figure-band.is-wide .figure-band-media, .steps-band .steps > li .step-shot.is-wide) { box-sizing: border-box !important; width: 100% !important; max-width: min(100%, var(--shot-w, 100%)) !important; min-width: 0 !important; margin-inline: 0 !important; }
:is(.figure-band.is-wide .figure-band-media, .steps-band .steps > li .step-shot.is-wide) > figure.frame { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; position: static !important; transform: none !important; float: none !important; }
:is(.figure-band.is-wide .figure-band-media, .steps-band .steps > li .step-shot.is-wide) > figure.frame > img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: 42rem !important; aspect-ratio: auto !important; object-fit: cover !important; object-position: top left !important; }

.comparison-strip > .strip-cells { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: var(--space, 1rem) !important; }
.comparison-strip > .strip-cells > .strip-cell { grid-column: auto !important; grid-row: auto !important; margin-block: 0 !important; min-width: 0 !important; }
@media (min-width: 760px) { .comparison-strip > .strip-cells { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }

/* engine: a band of the site plan's cards as rows, each with its picture */
.feature-rows { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: calc(var(--space, 1rem) * 2) !important; margin: 0 !important; padding: 0 !important; }
.feature-rows > .feature-row { grid-column: 1 / -1 !important; grid-row: auto !important; display: block !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; margin: 0 !important; transform: none !important; float: none !important; }
/* and the cards it has no picture for at all, as the band's own grid, last in the list: the list's own gap is the space above it */
.feature-rows > .grid { grid-column: 1 / -1 !important; margin: 0 !important; min-width: 0 !important; }
.feature-row > .feature-row-body { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: calc(var(--space, 1rem) * 1.5) !important; align-items: center !important; min-width: 0 !important; max-width: 100% !important; }
.feature-row > .feature-row-body > .feature-row-words, .feature-row > .feature-row-body > .feature-row-media { grid-column: 1 !important; grid-row: auto !important; min-width: 0 !important; margin: 0 !important; }
.feature-row-media > figure.frame { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; position: static !important; transform: none !important; float: none !important; }
.feature-row-media > figure.frame > img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; }
.feature-row.is-phone .feature-row-media > figure.frame.phone { width: min(16rem, 100%) !important; margin-inline: auto !important; }
.feature-row.is-art .feature-row-media > figure.illustration { box-sizing: border-box !important; display: block !important; width: min(24rem, 100%) !important; max-width: 100% !important; min-width: 0 !important; margin: 0 auto !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; position: static !important; transform: none !important; float: none !important; }
.feature-row.is-art .feature-row-media > figure.illustration > img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain !important; border-radius: var(--radius, 12px) !important; }
@media (min-width: 760px) {
  .feature-row.is-phone > .feature-row-body, .feature-row.is-art > .feature-row-body { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) !important; }
  .feature-row.is-phone > .feature-row-body > .feature-row-words, .feature-row.is-art > .feature-row-body > .feature-row-words { grid-column: 1 !important; grid-row: 1 !important; }
  .feature-row.is-phone > .feature-row-body > .feature-row-media, .feature-row.is-art > .feature-row-body > .feature-row-media { grid-column: 2 !important; grid-row: 1 !important; }
  .feature-row.is-phone.flip > .feature-row-body, .feature-row.is-art.flip > .feature-row-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) !important; }
  .feature-row.is-phone.flip > .feature-row-body > .feature-row-words, .feature-row.is-art.flip > .feature-row-body > .feature-row-words { grid-column: 2 !important; }
  .feature-row.is-phone.flip > .feature-row-body > .feature-row-media, .feature-row.is-art.flip > .feature-row-body > .feature-row-media { grid-column: 1 !important; }
}

/* engine: a wide capture under its words at the column's width, never past its own size, whole at every width */
:is(.feature-row.is-wide .feature-row-media) { box-sizing: border-box !important; width: 100% !important; max-width: min(100%, var(--shot-w, 100%)) !important; min-width: 0 !important; margin-inline: 0 !important; }
:is(.feature-row.is-wide .feature-row-media) > figure.frame { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; position: static !important; transform: none !important; float: none !important; }
:is(.feature-row.is-wide .feature-row-media) > figure.frame > img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: 42rem !important; aspect-ratio: auto !important; object-fit: cover !important; object-position: top left !important; }