/* Certly brand tokens (generated) */
:root {
  --bg: #f5f7fa;
  --surface: #ffffff;
  --raise: #eaf0f8;
  --fg: #0f1a2e;
  --fg-soft: #3a4a63;
  --muted: #7a8ba3;
  --line: #d0daea;
  --accent: #1a6fd4;
  --accent-ink: #ffffff;
  --accent-1: #d6e8fb;
  --accent-2: #7ab3ee;
  --accent-3: #1a6fd4;
  --accent-4: #124fa0;
  --accent-5: #0b3269;
}

[data-theme="dark"] {
  --bg: #0b1120;
  --surface: #131e33;
  --raise: #1b2b47;
  --fg: #e8edf5;
  --fg-soft: #9aadc7;
  --muted: #546882;
  --line: #253550;
  --accent: #4d96e8;
  --accent-ink: #05101f;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1120;
    --surface: #131e33;
    --raise: #1b2b47;
    --fg: #e8edf5;
    --fg-soft: #9aadc7;
    --muted: #546882;
    --line: #253550;
    --accent: #4d96e8;
    --accent-ink: #05101f;
  }
}

: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); }

/* Certly: the venture's own theme (contract rev 3) */
/* ============================================================
   Certly — "The status board"
   A calm, pale steel page; one dark audit-view panel in the fold
   carrying the four status badges in their functional colours.
   ============================================================ */

/* ---------- 1. Tokens ---------- */

:root {
  --space: 1rem;
  /* prose fills its reading column: the column itself sets the measure,
     so the centred .narrow never leaves a blank right-hand strip */
  --measure: 100%;
  --radius: 10px;

  --h1-size: clamp(2.35rem, 1.35rem + 3.3vw, 3.35rem);
  --h1-lh: 1.05;

  /* accessible soft ink (brand muted fails AA on bg, so we define our own) */
  --muted: #4e5a6b;
  --ink-soft: #4e5a6b;
  --ink-faint: #5d6a7d;

  --line-strong: #ccd5e1;
  --surface-2: #e9eef5;

  /* the dark board panel, identical family in both schemes */
  --panel: #0f1a2e;
  --panel-ink: #e8edf5;
  --panel-soft: #a7b7d0;
  --panel-line: rgba(255, 255, 255, 0.12);
  --panel-link: #9cc4f2;
  --panel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 28px 56px -20px rgba(15, 26, 46, 0.4),
    0 6px 16px -6px rgba(15, 26, 46, 0.18);

  /* four functional status colours — never the accent, decorative use only */
  --st-current: #2e9e63;
  --st-expiring: #dd9f2e;
  --st-expired: #d9564a;
  --st-missing: #93a5bd;

  --chips: linear-gradient(
    90deg,
    var(--st-current) 0 8px,
    transparent 8px 12px,
    var(--st-expiring) 12px 20px,
    transparent 20px 24px,
    var(--st-expired) 24px 32px,
    transparent 32px 36px,
    var(--st-missing) 36px 44px
  );

  --card-shadow: 0 1px 2px rgba(15, 26, 46, 0.05);
  --header-bg: rgba(245, 247, 250, 0.88);
}

[data-theme="dark"] {
  --muted: #a9b4c3;
  --ink-soft: #a9b4c3;
  --ink-faint: #9aa7b8;

  --line-strong: #2c3c58;
  --surface-2: #18222f;

  --panel: #18222f;
  --panel-line: rgba(255, 255, 255, 0.12);
  --panel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  --st-current: #43c07d;
  --st-expiring: #e8b04a;
  --st-expired: #e57368;
  --st-missing: #7e93af;

  --card-shadow: none;
  --header-bg: rgba(11, 17, 32, 0.88);
}

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

html, body {
  max-width: 100%;
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

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

h1 {
  font-size: var(--h1-size);
  line-height: var(--h1-lh);
  letter-spacing: -0.025em;
}

h2 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.05rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; }

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

.muted { color: var(--ink-soft); }
.mono,
code, pre, kbd {
  font-family: var(--font-mono);
}

::selection {
  background: color-mix(in srgb, var(--accent) 26%, transparent);
}

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

.wrap {
  width: min(1140px, 100% - 3rem);
  margin-inline: auto;
}

/* reading container: a deliberate centred measure for long prose */
.narrow {
  width: min(800px, 100% - 3rem);
  margin-inline: auto;
}
.narrow > p,
.narrow > div > p:not(.eyebrow) {
  max-width: var(--measure);
}
/* the two registers stay wide */
body[data-kind="article_index"] .narrow,
body[data-kind="changelog_index"] .narrow {
  width: min(1140px, 100% - 3rem);
}

.grid {
  display: grid;
  gap: 20px;
  grid-auto-rows: 1fr;
  align-items: stretch;
}
/* 6-track grid so a trailing short row spans evenly, no hole at the right */
.grid.cols-3 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid.cols-3 > * { grid-column: span 2; }
.grid.cols-3 > *:nth-child(3n + 1):nth-last-child(2),
.grid.cols-3 > *:nth-child(3n + 2):last-child {
  grid-column: span 3;
}
.grid.cols-3 > *:nth-child(3n + 1):last-child { grid-column: span 6; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}

/* the status chip carried into every section label */
.section-head .eyebrow::before,
.page-head .eyebrow::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  margin-right: 9px;
  background: var(--st-missing);
}
.problem .eyebrow::before { background: var(--st-expired); }
.features .eyebrow::before { background: var(--st-current); }
.how .eyebrow::before { background: var(--st-expiring); }
.use-cases .eyebrow::before { background: var(--st-missing); }
.faq .eyebrow::before { background: var(--st-current); }
.latest .eyebrow::before { background: var(--st-expiring); }

.section-head {
  margin-bottom: calc(var(--space) * 2.75);
  border-top: 1px solid var(--line-strong);
  padding-top: 20px;
}
.hero .section-head,
.capture .section-head {
  border-top: 0;
  padding-top: 0;
}
.section-head h2 {
  max-width: 34ch;
  margin-bottom: 0.4em;
}
/* one left edge for every section's eyebrow, heading and rule: a head
   inside a wide .wrap sits on the narrow column's own edge, and only
   the card grids under it run to the wider measure */
main section > .wrap > .section-head {
  width: min(800px, 100%);
  margin-inline: auto;
}
.section-head p.muted {
  max-width: var(--measure);
  font-size: 1.05rem;
  margin: 0;
}

/* ---------- 3. Buttons & forms ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.97rem;
  letter-spacing: 0.01em;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease;
}
.button:hover { text-decoration: none; }

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

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

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 28px;
}

input[type="email"],
input[type="text"] {
  font: inherit;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 12px 16px;
}
input[type="email"]:focus-visible,
input[type="text"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* ---------- 4. Header ---------- */

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

.site-header .wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 28px;
  padding-block: 14px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--fg);
}
.brand:hover { text-decoration: none; }

.brand svg.mark {
  width: 27px;
  height: 27px;
  display: block;
}

.brand .logotype {
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--fg);
}

/* the four-state chip strip: Certly's smallest signature */
.brand::after {
  content: "";
  width: 44px;
  height: 8px;
  margin-left: 14px;
  background: var(--chips);
  border-radius: 1px;
}

.nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 24px;
  margin-left: auto;
}
.nav a {
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 0.97rem;
}
.nav a:hover {
  color: var(--fg);
  text-decoration: none;
}

.nav a.cta {
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 6px;
  margin-left: 8px;
}
.nav a.cta:hover {
  background: color-mix(in srgb, var(--accent) 86%, var(--fg));
  text-decoration: none;
}

/* grouped menus, if the engine renders them */
.navgroup { position: relative; }
.navgroup > button {
  font: inherit;
  font-weight: 500;
  color: var(--ink-soft);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.navmenu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 220px;
  display: grid;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  box-shadow: var(--panel-shadow);
}
.navmenu a {
  padding: 8px 10px;
  border-radius: 7px;
}
.navmenu a:hover { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }

/* ---------- 5. Hero: the audit-view board ---------- */

.hero {
  position: relative;
  overflow: clip;
  padding: clamp(52px, 7vw, 84px) 0 clamp(48px, 6vw, 72px);
  border-bottom: 1px solid var(--line);
  background: radial-gradient(
    900px 520px at 88% -12%,
    color-mix(in srgb, var(--accent) 10%, transparent),
    transparent 70%
  );
}

.hero svg.motif { display: none; }

.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 6fr);
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
}

.hero .wrap > div:first-child {
  grid-column: 1;
  grid-row: 1;
}

/* the real capture: one legible band of rows, at full page width */
.hero .wrap > div.hero-media {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: clamp(24px, 3.5vw, 48px);
}
.hero .hero-media {
  max-width: 100%;
  min-width: 0;
}
.hero .hero-media figure.frame {
  position: relative;
  width: 100%;
  max-width: 100%;
}
.hero .hero-media figure.frame img {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1280 / 640; /* the cut lands in the gap after a table row */
  object-fit: cover;
  object-position: top;
}
/* soften the crop's bottom edge over the capture's own white table */
.hero .hero-media figure.frame::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16px;
  background: linear-gradient(rgba(255, 255, 255, 0), #ffffff);
  pointer-events: none;
}

.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  margin-bottom: 22px;
}
.hero .eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--st-current);
}

.hero h1 {
  max-width: 16ch;
  margin-bottom: 0.5em;
}

.hero .lead {
  font-size: 1.14rem;
  line-height: 1.62;
  color: var(--ink-soft);
  max-width: 52ch;
  margin: 0;
}

/* the board itself: real supplier rows, real statuses */
.hero .wrap::after {
  content: "";
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  aspect-ratio: 640 / 480;
  border-radius: 14px;
  border: 1px solid var(--panel-line);
  background-color: var(--panel);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3Cg stroke='rgba(255,255,255,0.10)'%3E%3Cpath d='M28 60H612'/%3E%3Cpath d='M28 98H612'/%3E%3Cpath d='M28 424H612'/%3E%3C/g%3E%3Cg stroke='rgba(255,255,255,0.06)'%3E%3Cpath d='M28 150H612'/%3E%3Cpath d='M28 204H612'/%3E%3Cpath d='M28 258H612'/%3E%3Cpath d='M28 312H612'/%3E%3Cpath d='M28 366H612'/%3E%3C/g%3E%3Cg font-family='ui-monospace,Menlo,Consolas,monospace'%3E%3Ctext x='28' y='44' font-size='11' letter-spacing='2.4' fill='%238da2c4'%3ESUPPLIER CERTIFICATES%3C/text%3E%3Ctext x='612' y='44' text-anchor='end' font-size='11' letter-spacing='1.6' fill='%23647a9c'%3EAUDIT VIEW%3C/text%3E%3Cg font-size='10' letter-spacing='1.6' fill='%23647a9c'%3E%3Ctext x='28' y='86'%3ESUPPLIER%3C/text%3E%3Ctext x='252' y='86'%3ECERTIFICATE%3C/text%3E%3Ctext x='402' y='86'%3EEXPIRES%3C/text%3E%3Ctext x='506' y='86'%3ESTATUS%3C/text%3E%3C/g%3E%3Cg font-size='12' fill='%23b6c5dd'%3E%3Ctext x='402' y='128'%3E2027-03-14%3C/text%3E%3Ctext x='402' y='182'%3E2026-10-18%3C/text%3E%3Ctext x='402' y='236'%3E2026-09-12%3C/text%3E%3Ctext x='402' y='290'%3E--%3C/text%3E%3Ctext x='402' y='344'%3E2027-01-30%3C/text%3E%3Ctext x='402' y='398'%3E2026-12-02%3C/text%3E%3C/g%3E%3Cg font-size='10' letter-spacing='1.2' text-anchor='middle'%3E%3Ctext x='553' y='127' fill='%2377d9a1'%3ECURRENT%3C/text%3E%3Ctext x='553' y='181' fill='%23e9bd66'%3EEXPIRING%3C/text%3E%3Ctext x='553' y='235' fill='%23f0928a'%3EEXPIRED%3C/text%3E%3Ctext x='553' y='289' fill='%23aabbd3'%3EMISSING%3C/text%3E%3Ctext x='553' y='343' fill='%2377d9a1'%3ECURRENT%3C/text%3E%3Ctext x='553' y='397' fill='%2377d9a1'%3ECURRENT%3C/text%3E%3C/g%3E%3Ctext x='28' y='456' font-size='11' letter-spacing='1' fill='%23647a9c'%3E2 CHASE EMAILS SCHEDULED 06:00%3C/text%3E%3Ctext x='612' y='456' text-anchor='end' font-size='11' letter-spacing='1' fill='%23647a9c'%3EPDF MATCHES THIS VIEW%3C/text%3E%3C/g%3E%3Cg%3E%3Crect x='506' y='112' width='94' height='22' rx='11' fill='rgba(84,205,138,0.15)'/%3E%3Crect x='506' y='166' width='94' height='22' rx='11' fill='rgba(235,183,82,0.15)'/%3E%3Crect x='506' y='220' width='94' height='22' rx='11' fill='rgba(238,120,110,0.15)'/%3E%3Crect x='506' y='274' width='94' height='22' rx='11' fill='rgba(158,177,203,0.12)' stroke='%239eb1cb' stroke-opacity='0.45' stroke-dasharray='3 3'/%3E%3Crect x='506' y='328' width='94' height='22' rx='11' fill='rgba(84,205,138,0.15)'/%3E%3Crect x='506' y='382' width='94' height='22' rx='11' fill='rgba(84,205,138,0.15)'/%3E%3C/g%3E%3Cg font-family='-apple-system,Segoe UI,Roboto,Arial,sans-serif'%3E%3Cg font-size='14' font-weight='600' fill='%23e6edf7'%3E%3Ctext x='28' y='128'%3EMeadowbrook Dairy%3C/text%3E%3Ctext x='28' y='182'%3EHarwich Mills%3C/text%3E%3Ctext x='28' y='236'%3ENordsee Proteins%3C/text%3E%3Ctext x='28' y='290'%3ECalder Packaging%3C/text%3E%3Ctext x='28' y='344'%3ERiva Ingredients%3C/text%3E%3Ctext x='28' y='398'%3EBruncliffe Flour%3C/text%3E%3C/g%3E%3Cg font-size='12' fill='%2394a9c9'%3E%3Ctext x='252' y='128'%3EAllergen declaration%3C/text%3E%3Ctext x='252' y='182'%3ECoA, batch 4471%3C/text%3E%3Ctext x='252' y='236'%3EAudit certificate%3C/text%3E%3Ctext x='252' y='290'%3EAllergen declaration%3C/text%3E%3Ctext x='252' y='344'%3EFSSC certificate%3C/text%3E%3Ctext x='252' y='398'%3ECoA, lot 2209%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-shadow: var(--panel-shadow);
}

/* ---------- 6. Home sections ---------- */

main > section {
  padding: clamp(44px, 5vw, 64px) 0;
}

/* problem: a plain, level statement */
.problem h2 {
  font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.35rem);
}
.problem .narrow > p {
  font-size: 1.1rem;
  line-height: 1.75;
  max-width: var(--measure);
}

/* features: quiet cards, filed like records */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 26px;
  box-shadow: var(--card-shadow);
  transition: border-color 0.15s ease;
}
.card:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}
.card h3 { margin-bottom: 0.5em; }
.card p {
  color: var(--ink-soft);
  font-size: 0.96rem;
  margin: 0;
}
.card p.eyebrow {
  color: var(--accent);
  font-size: 0.68rem;
  margin-bottom: 12px;
}

.glyph {
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 3px 9px;
  margin-bottom: 16px;
}

/* how it works: a numbered procedure */
ol.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}
ol.steps > li {
  counter-increment: step;
  position: relative;
  padding: 0 0 40px 66px;
}
ol.steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
}
ol.steps > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 21px;
  top: 48px;
  bottom: 6px;
  width: 1px;
  background: var(--line);
}
ol.steps > li:last-child { padding-bottom: 0; }
ol.steps h3 { margin-bottom: 0.35em; }
ol.steps p {
  color: var(--ink-soft);
  max-width: var(--measure);
  margin: 0;
}

/* washes */
.wash {
  background: color-mix(in srgb, var(--accent) 4%, var(--bg));
  border-block: 1px solid var(--line);
}

/* spotlights */
.spotlight {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.spotlight > div:only-child { grid-column: 1 / -1; }
.spotlight.flip > div:first-child { order: 2; }
.spotlight h2 { max-width: 24ch; }
.spotlight .muted { max-width: var(--measure); }

/* gallery / frames */
.gallery .shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
figure.frame {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
}
figure.frame .bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--fg) 3%, var(--surface));
}
figure.frame .bar > * {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line-strong);
}
figure.frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* faq: a ruled register of questions */
.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;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 2px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--ink-soft);
  line-height: 1;
  flex: none;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details > p {
  padding: 0 2px 20px;
  margin: 0;
  color: var(--ink-soft);
  max-width: var(--measure);
}

/* cta: the capture form on the board surface */
.cta.wash {
  background: none;
  border-block: 0;
  padding-block: clamp(44px, 5vw, 64px);
}
.capture {
  background: var(--panel);
  color: var(--panel-ink);
  border: 1px solid var(--panel-line);
  border-radius: 18px;
  padding: clamp(36px, 5vw, 56px) clamp(24px, 4vw, 56px);
  text-align: center;
  box-shadow: var(--panel-shadow);
}
.capture h2 {
  color: var(--panel-ink);
  max-width: 24ch;
  margin-inline: auto;
}
.capture h2::before {
  content: "";
  display: block;
  width: 44px;
  height: 8px;
  margin: 0 auto 22px;
  background: linear-gradient(
    90deg,
    #43c07d 0 8px, transparent 8px 12px,
    #e8b04a 12px 20px, transparent 20px 24px,
    #e57368 24px 32px, transparent 32px 36px,
    #93a5bd 36px 44px
  );
}
.capture .muted,
.capture p.note {
  color: var(--panel-soft);
  max-width: 58ch;
  margin-inline: auto;
}
.capture form {
  display: flex;
  gap: 10px;
  justify-content: center;
  max-width: 520px;
  margin: 26px auto 0;
}
.capture input[type="email"] {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--panel-ink);
}
.capture input[type="email"]::placeholder { color: var(--panel-soft); }
.capture input[type="email"]:focus-visible {
  outline-color: var(--panel-link);
  border-color: var(--panel-link);
}
.capture .button.primary:focus-visible { outline-color: var(--panel-link); }
.capture p.note {
  font-size: 0.86rem;
  margin-top: 18px;
  margin-bottom: 0;
}
.capture p.note a {
  color: var(--panel-link);
  text-decoration: underline;
}
.capture .thanks {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  margin: 26px 0 0;
}

/* ---------- 7. Content pages ---------- */

.page-head {
  padding: clamp(48px, 6vw, 72px) 0 1.5rem;
}
.page-head + section { padding-top: 2rem; }

/* indexes open at the same rhythm as content pages */
body[data-kind="article_index"] main > section,
body[data-kind="changelog_index"] main > section {
  padding-block: 3.5rem 5rem;
}
body[data-kind="article_index"] .section-head,
body[data-kind="changelog_index"] .section-head {
  margin-bottom: 2rem;
}
.page-head h1 { max-width: 22ch; }
.page-head .lead,
article .lead {
  font-size: 1.14rem;
  line-height: 1.62;
  color: var(--ink-soft);
  max-width: var(--measure);
}

.crumbs {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 26px;
}
.crumbs a { color: var(--ink-soft); }
.crumbs a:hover { color: var(--accent); }

article.page,
main > article {
  display: block;
  padding: clamp(48px, 6vw, 72px) 0 clamp(48px, 6vw, 72px);
}

section.block { margin-top: calc(var(--space) * 3.5); }
section.block > h2,
aside.block > h2 {
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
article .page-hero { margin: 32px 0; }

aside.block.callout {
  margin-top: calc(var(--space) * 3.5);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 24px 28px;
}
aside.block.callout > h2 {
  border-top: 0;
  padding-top: 0;
  font-size: 1.2rem;
}
aside.block.callout p:last-child { margin-bottom: 0; }

/* plans */
.plan-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 24px;
}
.plan-cards .card h3 { font-size: 1.25rem; }
.plan-cards .card p.price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2rem;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0 0 4px;
}
.plan-cards .card p.meta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-soft);
}
ul.includes {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}
ul.includes li {
  position: relative;
  padding: 6px 0 6px 20px;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
ul.includes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95em;
  width: 7px;
  height: 7px;
  background: var(--accent);
  border-radius: 2px;
}

/* benefits grids inside blocks */
.benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}

/* tables */
.table-wrap { overflow-x: auto; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
th {
  text-align: left;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 10px 14px;
  border-bottom: 2px solid var(--line-strong);
}
/* the register's column labels carry the chip */
th:not(:empty)::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--st-missing);
  margin-right: 8px;
  vertical-align: 1px;
}
th:not(:empty):first-child::before { background: var(--st-current); }
td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

/* sources */
.sources {
  margin-top: calc(var(--space) * 3);
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.sources a { overflow-wrap: anywhere; }

/* ---------- 8. Articles / prose ---------- */

.byline {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-bottom: 28px;
}
.byline::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--st-expiring);
  margin-right: 10px;
  vertical-align: 1px;
}

figure.cover {
  margin: 0 0 32px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
}
figure.cover img { display: block; width: 100%; height: auto; }

.prose {
  font-size: 1.04rem;
  line-height: 1.72;
}
.prose > * { max-width: var(--measure); }
.prose p { margin: 0 0 1.15em; }
.prose h2 {
  font-size: 1.5rem;
  margin: 2em 0 0.6em;
}
.prose h3 {
  font-size: 1.18rem;
  margin: 1.7em 0 0.5em;
}
.prose ol {
  padding-left: 1.3em;
  margin: 0 0 1.15em;
}
.prose ul {
  list-style: none;
  padding-left: 0;
  margin: 0 0 1.15em;
}
.prose ul > li {
  position: relative;
  padding-left: 1.35em;
}
.prose ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--accent);
}
.prose li { margin-bottom: 0.4em; }
.prose ol li::marker { color: var(--accent); }
.prose blockquote {
  margin: 1.6em 0;
  padding: 0.2em 0 0.2em 1.3em;
  border-left: 3px solid var(--accent);
  color: var(--ink-soft);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose code {
  font-size: 0.88em;
  background: color-mix(in srgb, var(--fg) 7%, var(--bg));
  border-radius: 5px;
  padding: 0.15em 0.4em;
}
.prose pre {
  background: var(--panel);
  color: var(--panel-ink);
  border: 1px solid var(--panel-line);
  border-radius: 10px;
  padding: 18px 22px;
  overflow-x: auto;
  font-size: 0.88rem;
  line-height: 1.6;
  margin: 1.4em 0;
}
.prose pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}
.prose table { margin: 1.4em 0; }
.prose img { max-width: 100%; height: auto; border-radius: 10px; }
.prose hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.2em 0;
}

/* ---------- 9. Indexes ---------- */

ul.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.post-list > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px 28px;
  padding: 2rem 1rem;
  margin-inline: -1rem;
  border-top: 1px solid var(--line);
  border-radius: 8px;
  transition: background-color 0.15s ease;
}
ul.post-list > li:hover { background: var(--surface-2); }
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.25rem;
  letter-spacing: -0.01em;
  color: var(--fg);
}
/* every entry is a record: it carries a leading status square */
ul.post-list a::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--st-expiring);
  margin-right: 12px;
  vertical-align: 2px;
}
ul.post-list a:hover { color: var(--accent); text-decoration: none; }
ul.post-list .meta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-soft);
  white-space: nowrap;
}
ul.post-list p {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 0.96rem;
  max-width: 34rem;
  /* the engine hard-truncates excerpts; ellipse the line instead */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

p.pager {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
}
p.pager a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.94rem;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 9px 16px;
  color: var(--fg);
}
p.pager a:hover {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}

.related { margin-top: calc(var(--space) * 3.5); }
.latest .post-list a { font-size: 1.12rem; }

/* changelog reads as a dated register */
body[data-kind="changelog_index"] ul.post-list a,
body[data-kind="changelog_entry"] h1 {
  letter-spacing: -0.01em;
}
body[data-kind="changelog_index"] ul.post-list > li { padding: 1.5rem 1rem; }
body[data-kind="changelog_index"] ul.post-list a { font-size: 1.1rem; }
/* shipped entries wear the current chip */
body[data-kind="changelog_index"] ul.post-list a::before {
  background: var(--st-current);
}

/* ---------- 10. Not found ---------- */

body[data-kind="not_found"] main > section {
  padding-block: 7rem;
}
body[data-kind="not_found"] .section-head {
  border-top: 0;
  padding-top: 0;
  margin-bottom: 8px;
}
body[data-kind="not_found"] .section-head h2 {
  max-width: none;
  font-size: clamp(2rem, 4vw, 2.8rem);
}
body[data-kind="not_found"] .section-head h2::before {
  content: "";
  display: block;
  width: 44px;
  height: 8px;
  margin-bottom: 22px;
  background: var(--chips);
  border-radius: 1px;
}
body[data-kind="not_found"] p { color: var(--ink-soft); }

/* ---------- 11. Footer ---------- */

.site-footer {
  margin-top: clamp(32px, 5vw, 56px);
  border-top: 1px solid var(--line);
  padding: 40px 0 48px;
  font-size: 0.92rem;
}
.site-footer .footer-map {
  width: min(1140px, 100% - 3rem);
  margin: 0 auto 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 28px;
}
.site-footer .footer-map a {
  display: block;
  color: var(--ink-soft);
  padding: 3px 0;
}
.site-footer .footer-map a:hover { color: var(--accent); }
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}
.site-footer strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
}
.site-footer .muted { color: var(--ink-soft); }
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.site-footer nav a {
  color: var(--ink-soft);
  font-weight: 500;
}
.site-footer nav a:hover { color: var(--accent); }
a.stamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft);
  font-size: 0.84rem;
}
a.stamp img { display: block; }
a.stamp:hover { color: var(--fg); text-decoration: none; }

/* ---------- 12. Responsive ---------- */

@media (max-width: 1024px) {
  .grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.cols-3 > *,
  .grid.cols-3 > *:nth-child(3n + 1):nth-last-child(2),
  .grid.cols-3 > *:nth-child(3n + 2):last-child {
    grid-column: auto;
  }
  .grid.cols-3 > *:nth-child(odd):last-child { grid-column: 1 / -1; }
  .plan-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero .wrap {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero .wrap > div:first-child { grid-row: 1; grid-column: 1; }
  .hero .wrap::after {
    grid-column: 1;
    grid-row: 2;
    max-width: 620px;
  }
  .hero .wrap > div.hero-media { grid-column: 1; grid-row: 3; }
}

@media (max-width: 760px) {
  .grid.cols-3,
  .grid.cols-2,
  .plan-cards,
  .benefits,
  .gallery .shots,
  .spotlight {
    grid-template-columns: 1fr;
  }
  .grid { grid-auto-rows: auto; }
  .grid.cols-3 > *,
  .grid.cols-3 > *:nth-child(odd):last-child {
    grid-column: auto;
  }
  .spotlight.flip > div:first-child { order: 0; }

  .site-header .wrap { padding-block: 12px; }
  .brand::after { display: none; }
  .nav {
    gap: 4px 16px;
    font-size: 0.92rem;
  }
  .nav a.cta { margin-left: 0; padding: 8px 14px; }

  .hero { padding-top: 36px; }
  .hero .lead { font-size: 1.06rem; }

  /* on a phone the capture scales to fit: the same top-half crop as
     desktop, whole from edge to edge, so the status line reads in full
     and all four status-count cards stay in view */
  .hero .hero-media figure.frame {
    max-width: 440px;
    margin-inline: auto;
  }

  main > section { padding: 36px 0; }

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

  ul.post-list > li { grid-template-columns: 1fr; }
  ul.post-list .meta { order: -1; }

  ol.steps > li { padding-left: 54px; }
  ol.steps > li::before { width: 36px; height: 36px; font-size: 0.84rem; }
  ol.steps > li:not(:last-child)::after { left: 18px; top: 42px; }

  .site-footer .wrap {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* under 600px the engine shows the capture whole and uncropped, which
   scales the full desktop dashboard into the phone column as a grey smear;
   the dark audit board above already carries the same supplier rows and
   statuses legibly there, so the duplicate capture rests on small screens */
@media (max-width: 600px) {
  .hero .hero-media { display: none; }
}

@media (max-width: 480px) {
  /* two even link rows, then a full-width CTA */
  .nav {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    column-gap: 1rem;
    row-gap: 0.4rem;
    font-size: 0.9375rem;
    width: 100%;
  }
  .nav a.cta {
    grid-column: 1 / -1;
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0.5rem 0 0;
    text-align: center;
  }
  ul.post-list > li {
    padding-inline: 0.75rem;
    margin-inline: -0.75rem;
  }
}

/* ---------- 13. Motion, restrained ---------- */

@media (prefers-reduced-motion: no-preference) {
  .hero .wrap::after {
    animation: certly-rise 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  }
  @keyframes certly-rise {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  .hero .eyebrow::before {
    animation: certly-pulse 2.6s ease-in-out infinite;
  }
  @keyframes certly-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
  }
  .card,
  .button {
    transition: border-color 0.15s ease, background-color 0.15s ease,
      color 0.15s ease, transform 0.15s ease;
  }
  .button.primary:hover,
  .button.secondary:hover {
    transform: translateY(-1px);
  }
}

.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; }
  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; }