/* The Litter Tray marketing shell (W1).
 *
 * Canonical stylesheet for every new URL under landing/ except the legal tree, which
 * keeps its own inline CSS. Home links this file for shared chrome (Menu sheet, footer
 * columns, page lists) and keeps its own inline stylesheet after it so stay-block tokens
 * still win on conflict. Tokens match landing/legal/* and the home page so the shell
 * does not invent a third palette.
 *
 * Wide viewports: mega-panels open on :hover / :focus-within / [open] (a click on the
 * summary pins the panel). The Menu <details> is display:none and the sheet is a sibling,
 * so the bar is unchanged — Safari will not paint children of a closed <details>, which is
 * why the sheet is not inside the Menu disclosure.
 * Narrow viewports: one slim bar (logo + native Menu summary). The sheet starts closed
 * (no [open] in the markup); [open] ~ .nav-sheet reveals a full-width overlay. How it
 * works, Features and Learn stay per-panel <details> that expand inline; Plans is a
 * plain link. Theme, Log in and the CTA sit as a pair at the sheet foot. No checkbox
 * drawer. Wide viewports use a small script so only one panel is open at a time. */

:root {
  color-scheme: light dark;
  --bg: #f8f3ea;
  --bg-elevated: #fffdf9;
  --bg-soft: #efe6d4;
  --text: #1c1a15;
  --text-muted: #5c5648;
  --border: #ded2b8;
  --brand-brown: #7a4b2a;
  --cta: #2f5ce0;
  --tick: #1e7a43;
  --accent-contrast: #ffffff;
  --shadow-1: 0 1px 1px rgba(20, 18, 14, 0.05), 0 8px 24px rgba(20, 18, 14, 0.08), 0 32px 72px rgba(20, 18, 14, 0.10);
  /* THE CARD SHADOW THE TRAINING DECK DRAWS (phase-2 follow-on 2, Amendment 5, item 27).
     It was written as a literal `rgba()` pair inside `.training-demo-card` in `landing/scenes.css`,
     which is a scene rule: a literal there does not follow `data-theme`, so the deck's cards kept a
     warm-grey drop shadow on the dark theme where every other card on the site switches to black.
     It is a second shadow rather than `--shadow-1` because it is a different one — tighter and
     heavier, a card lifted off a stack rather than a panel lifted off the page — so the light values
     are the deck's own, unchanged. The dark value is black-alpha in the same proportions
     `--shadow-1` uses when it goes dark: its contact layer multiplies its alpha by 4 (0.05 to 0.2)
     and its wide layer by 3.5 (0.08 to 0.28), so the deck's 8px contact layer goes 0.07 to 0.28 and
     its 30px layer 0.13 to 0.46. */
  --shadow-deck: 0 12px 30px rgba(20, 18, 14, 0.13), 0 3px 8px rgba(20, 18, 14, 0.07);
  --radius-md: 15px;
  --radius-sm: 10px;
  /* THE ONE FACE (phase-2 follow-on, Amendment 1). `landing/learn.css` set `.article-body` to
     Georgia, so a scene dropped into a Learn article inherited a serif and the article body itself
     read as Times. A scene is a picture of the product, and the product is not set in Georgia. The
     stack is declared here once and read by `body`, by `.sketch-window` and by every other
     `font-family` under `landing/`, so there is nowhere left for a second face to be written. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14120d;
    --bg-elevated: #1c1a14;
    --bg-soft: #201e16;
    --text: #f5f0e6;
    --text-muted: #b0a99a;
    --border: rgba(224, 194, 150, 0.16);
    --brand-brown: #d99a6c;
    --cta: #4266d5;
    --tick: #6fcf97;
    --accent-contrast: #ffffff;
    --shadow-1: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.28), 0 32px 72px rgba(0, 0, 0, 0.32);
    --shadow-deck: 0 12px 30px rgba(0, 0, 0, 0.46), 0 3px 8px rgba(0, 0, 0, 0.28);
  }
}

:root[data-theme="dark"] {
  --bg: #14120d;
  --bg-elevated: #1c1a14;
  --bg-soft: #201e16;
  --text: #f5f0e6;
  --text-muted: #b0a99a;
  --border: rgba(224, 194, 150, 0.16);
  --brand-brown: #d99a6c;
  --cta: #4266d5;
  --tick: #6fcf97;
  --accent-contrast: #ffffff;
  --shadow-1: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.28), 0 32px 72px rgba(0, 0, 0, 0.32);
  --shadow-deck: 0 12px 30px rgba(0, 0, 0, 0.46), 0 3px 8px rgba(0, 0, 0, 0.28);
  color-scheme: dark;
}

:root[data-theme="light"] { color-scheme: light; }

/* THE TWO PALETTES AGAIN, SCOPED, FOR ONE PAGE THAT HAS TO SHOW BOTH AT ONCE.
 *
 * `/design/scenes/` is the scene library: every scene in the catalogue, side by side, light and
 * dark, so a change to the component can be looked at in one place. The three blocks above are
 * written on `:root`, because a theme is a property of the document; a page that wants a light
 * panel and a dark panel in the same viewport cannot use them.
 *
 * These are the same values, and they are the only place in this file where a colour literal is
 * written outside the root blocks. `scripts/tests/product-scenes.test.ts` asserts that the dark
 * pane agrees with `:root[data-theme="dark"]` declaration for declaration and the light pane with
 * `:root`, so the copy cannot drift: change a token above and the library's panes fail until they
 * are changed too.
 *
 * Scoped to a class that exists on exactly one page, so nothing else on the site can be reached.
 */
.scene-pane-light {
  color-scheme: light;
  --bg: #f8f3ea;
  --bg-elevated: #fffdf9;
  --bg-soft: #efe6d4;
  --text: #1c1a15;
  --text-muted: #5c5648;
  --border: #ded2b8;
  --brand-brown: #7a4b2a;
  --cta: #2f5ce0;
  --tick: #1e7a43;
  --accent-contrast: #ffffff;
  --shadow-1: 0 1px 1px rgba(20, 18, 14, 0.05), 0 8px 24px rgba(20, 18, 14, 0.08), 0 32px 72px rgba(20, 18, 14, 0.10);
  --shadow-deck: 0 12px 30px rgba(20, 18, 14, 0.13), 0 3px 8px rgba(20, 18, 14, 0.07);
}

.scene-pane-dark {
  color-scheme: dark;
  --bg: #14120d;
  --bg-elevated: #1c1a14;
  --bg-soft: #201e16;
  --text: #f5f0e6;
  --text-muted: #b0a99a;
  --border: rgba(224, 194, 150, 0.16);
  --brand-brown: #d99a6c;
  --cta: #4266d5;
  --tick: #6fcf97;
  --accent-contrast: #ffffff;
  --shadow-1: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.28), 0 32px 72px rgba(0, 0, 0, 0.32);
  --shadow-deck: 0 12px 30px rgba(0, 0, 0, 0.46), 0 3px 8px rgba(0, 0, 0, 0.28);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
::selection { background: var(--cta); color: var(--accent-contrast); }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, main#content:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

.skip {
  position: absolute;
  left: 12px;
  top: -40px;
  z-index: 40;
  padding: 8px 12px;
  background: var(--cta);
  color: var(--accent-contrast);
  text-decoration: none;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.88rem;
}
.skip:focus { top: 12px; }

/* ---------- Header / FreeAgent-pattern top bar ---------- */

header.site {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
@media (prefers-reduced-transparency: reduce) {
  header.site { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
header.site .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--text);
  flex-shrink: 0;
}
.brand-mark {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  padding: 2px;
  border-radius: 50%;
  background: #f4ead9;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent);
}
.brand-mark img { width: 100%; height: 100%; display: block; object-fit: contain; }

.site-nav {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}
.nav-menu { display: none; }
.nav-sheet {
  display: flex;
  align-items: center;
  gap: 8px 18px;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}
.nav-sheet > .btn-header-cta { flex-shrink: 0; }
.navpages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 4px;
  min-width: 0;
}
.navchrome {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

.navitem { position: relative; }
.navhit {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 8px 12px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  border: 0;
  font-family: inherit;
}
summary.navhit,
summary.nav-menu-hit {
  list-style: none;
}
summary.navhit::-webkit-details-marker,
summary.navhit::marker,
summary.nav-menu-hit::-webkit-details-marker,
summary.nav-menu-hit::marker { display: none; content: none; }
.navhit:hover, .navhit:focus-visible,
.nav-menu-hit:hover, .nav-menu-hit:focus-visible { background: var(--bg-soft); }
.navhit[aria-current="page"] { color: var(--brand-brown); }
details.navitem > summary.navhit::after,
details.nav-menu > summary.nav-menu-hit::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border: 0.28em solid transparent;
  border-top-color: currentColor;
  transform: translateY(0.18em);
  opacity: 0.7;
}
details.nav-menu[open] > summary.nav-menu-hit::after {
  transform: translateY(-0.05em) rotate(180deg);
}

.navitem > .mega {
  display: none;
  position: absolute;
  z-index: 50;
  top: 100%;
  left: 0;
  padding-top: 0.45rem;
}
.navitem.nav-support > .mega { left: auto; right: 0; }
.navitem:hover > .mega,
.navitem:focus-within > .mega,
.navitem[open] > .mega { display: block; }

.megapanel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(14.5rem, 20rem);
  gap: 1.5rem 2.25rem;
  padding: 1.35rem 1.5rem 1.5rem;
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-1);
  max-height: min(80vh, 42rem);
  overflow: auto;
}
.megapanel-product {
  grid-auto-columns: minmax(15rem, 22rem);
}
.megacol { display: grid; align-content: start; gap: 0.15rem; min-width: 0; }
.megacol-h {
  margin: 0 0.65rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.megagroup { display: grid; gap: 0.1rem; min-width: 0; }
.megagroup + .megagroup { margin-top: 0.85rem; }
.feature-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem 1.5rem;
}
a.megalink {
  display: grid;
  gap: 0.15rem;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
}
a.megalink:hover, a.megalink:focus-visible {
  background: color-mix(in srgb, var(--brand-brown) 9%, var(--bg-elevated));
}
a.megalink[aria-current="page"] { background: var(--bg-soft); }
.megalabel { font-weight: 650; line-height: 1.3; }
.megadesc {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.4;
}

/* GB-19: the theme control wears a word, not a bare glyph. A lone ◐ named neither the current
   appearance nor what a press would do, and the app's own control already settled the language
   (Graham-call B2): the face names the CURRENT state — Auto / Light / Dark — and the title says
   what the next press brings. Same words here, in the chrome's own pill beside Log in. The
   min-width holds the pill steady across the three faces so the control does not wobble as it
   cycles. apps/web/tests/theme-toggle-parity.test.ts pins this copy to the app's. */
.btn-theme::before {
  content: "Theme: ";
  font-weight: 650;
}
.btn-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 7.6rem;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.btn-theme:hover { background: var(--bg-soft); border-color: var(--brand-brown); }

.btn-login {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
}
.btn-login:hover { background: var(--bg-soft); border-color: var(--brand-brown); }

/* The wide header has one clear action. Log in remains available in the narrow Menu sheet,
   where the account routes need to sit together without competing with the primary CTA. */
.navchrome .btn-login { display: none; }

.btn-header-cta {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--cta);
  color: var(--accent-contrast);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
}
.btn-header-cta:hover { filter: brightness(1.05); }

@media (max-width: 70rem) {
  .megapanel {
    grid-auto-flow: row;
    grid-auto-columns: minmax(0, 1fr);
    max-width: min(36rem, calc(100vw - 2rem));
  }
  .feature-groups { grid-template-columns: 1fr; }
}

/* Narrow: one slim bar. The Menu <details> is the native, focusable master toggle
   (closed in the markup). The sheet is its next sibling so a closed disclosure does
   not swallow the wide-viewport mega-menu. Hover must not force a panel open
   (that was the first-tap-navigates / every-panel-expanded defect). Only [open]
   — a summary activation — reveals Product or Support; a link tap then follows. */
@media (max-width: 64rem) {
  html:has(.nav-menu[open]) { overflow: hidden; }
  header.site .wrap {
    flex-wrap: nowrap;
    align-items: center;
  }
  .brand { white-space: nowrap; }
  .site-nav {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
  }
  .nav-menu { display: block; }
  .nav-menu-hit::before {
    content: "";
    display: inline-block;
    width: 1.05em;
    height: 0.82em;
    background:
      linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat,
      linear-gradient(currentColor, currentColor) 0 50% / 100% 2px no-repeat,
      linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat;
  }
  details.nav-menu > summary.nav-menu-hit::after { display: none; }
  .nav-menu-hit {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
    background: transparent;
    border: 0;
    font-family: inherit;
  }
  .nav-sheet { display: none; }
  .nav-menu[open] ~ .nav-sheet {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: calc(100vh - 100%);
    height: calc(100dvh - 100%);
    z-index: 19;
    margin: 0;
    background: var(--bg);
    overflow: hidden;
    overscroll-behavior: contain;
  }
  .navpages, .navchrome {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-left: 0;
    gap: 0;
  }
  .navpages {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.35rem 0 0.5rem;
  }
  .navchrome {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-top: auto;
    padding: 12px 16px 8px;
    border-top: 1px solid var(--border);
    background: var(--bg);
  }
  .nav-menu[open] ~ .nav-sheet > .btn-header-cta {
    flex: 0 0 auto;
    display: block;
    width: auto;
    margin: 0 16px calc(12px + env(safe-area-inset-bottom, 0px));
    text-align: center;
    padding: 12px 16px;
  }
  .navitem { display: grid; width: 100%; }
  .navitem > .mega {
    position: static;
    padding-top: 0.15rem;
    display: none;
  }
  .navitem:hover > .mega,
  .navitem:focus-within > .mega { display: none; }
  .navitem[open] > .mega,
  .navitem[open]:hover > .mega,
  .navitem[open]:focus-within > .mega { display: block; }
  .megapanel {
    grid-auto-flow: row;
    max-width: none;
    max-height: none;
    overflow: visible;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 0.15rem 0 0.4rem;
  }
  .feature-groups { grid-template-columns: 1fr; }
  .navhit, a.megalink {
    width: 100%;
    max-width: none;
    border-radius: 0;
    padding: 0.95rem 1.25rem;
    white-space: normal;
  }
  .navchrome .btn-theme { flex: 0 0 auto; }
  .navchrome .btn-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    text-align: center;
  }
}

@media (max-width: 560px) {
  header.site { padding: 12px 0; }
  header.site .wrap { padding: 0 16px; gap: 10px; }
  .brand { font-size: 0.95rem; gap: 7px; white-space: nowrap; }
  .brand-mark { width: 24px; height: 24px; }
  .faq-item { padding: 14px 14px; }
  .page-list li > a,
  .page-list .coming { padding: 12px 14px; }
  .walk-step { padding: 14px; }
}

/* ---------- Page template ---------- */

main.page {
  flex: 1 1 auto;
  padding: 52px 0 80px;
}
main.page.page-journey { padding-bottom: 0; }
.page-inner { max-width: 760px; }
.page-inner.wide { max-width: 920px; }
.kicker {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
h1 {
  margin: 0 0 16px;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.lede {
  margin: 0 0 20px;
  font-size: 1.05rem;
  color: var(--text-muted);
}
.status {
  margin: 0 0 28px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 0.95rem;
}
.also {
  margin: 0 0 32px;
  font-size: 0.92rem;
}
.also a { color: var(--brand-brown); font-weight: 650; text-decoration: none; }
.also a:hover { text-decoration: underline; }
.also-list {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
  .also-list { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
}
.also-list a {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text);
  font-weight: 650;
  text-decoration: none;
}
.also-list a:hover { border-color: var(--brand-brown); }

.page-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.page-list.two {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 12px 20px;
}
.page-list li > a,
.page-list .coming {
  display: grid;
  gap: 0.2rem;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
}
.page-list li > a {
  text-decoration: none;
  color: var(--text);
}
.page-list li > a:hover { border-color: var(--brand-brown); }
.page-list .item-label { font-weight: 700; }
.page-list .item-desc { color: var(--text-muted); font-size: 0.9rem; }
.page-list .coming .item-desc a { color: var(--brand-brown); font-weight: 650; text-decoration: none; }
.page-list .coming .item-desc a:hover { text-decoration: underline; }
.coming-flag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.faq-stack {
  display: grid;
  gap: 12px;
  margin: 0 0 28px;
}
.faq-item {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
}
.faq-item h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.faq-item p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}
.faq-item a { color: var(--brand-brown); font-weight: 650; text-decoration: none; }
.faq-item a:hover { text-decoration: underline; }
.faq-details { max-width: none; }
.faq-details > .group-h { margin: 40px 0 12px; }
.faq-details > .group-h:first-child { margin-top: 0; }
.faq-details .faq-stack { margin-bottom: 0; }
.faq-details .faq-item p { font-size: 1rem; }
.tutorial-links {
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 1.8vw, 20px);
  margin-top: 28px;
}
.tutorial-links a.objection-card {
  position: relative;
  padding: clamp(22px, 2.6vw, 30px);
  border-radius: 3px;
  background: linear-gradient(178deg, #f3ead6 0%, #e9dec4 100%);
  color: #2a2418;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 12px 30px rgba(0, 0, 0, 0.18);
}
.tutorial-links a.objection-card::before {
  content: attr(data-n);
  display: block;
  margin-bottom: 12px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: #b23a2c;
}
@media (max-width: 760px) {
  .tutorial-links { grid-template-columns: 1fr; }
  .tutorial-links a.objection-card { background: linear-gradient(178deg, #f7f1e4 0%, #efe6d0 100%); }
}
.group-h {
  margin: 28px 0 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- Tutorial walkthrough (W4 fix round) ----------
   Step cards on the page template, with sketch panels in the site's illustration grammar:
   drawn sample lines, dots and buttons built from the existing tokens. Sketches, never
   screenshots, and every word inside one repeats a word the step's prose already says. */
.walk-steps {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  gap: 14px;
}
.walk-step {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  display: grid;
  gap: 8px;
}
.walk-n {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.walk-step h2 { margin: 0; font-size: 1.15rem; letter-spacing: -0.02em; line-height: 1.3; }
.walk-step p { margin: 0; color: var(--text-muted); font-size: 0.95rem; line-height: 1.55; }
.walk-step a { color: var(--brand-brown); font-weight: 650; text-decoration: none; }
.walk-step a:hover { text-decoration: underline; }
.walk-sketch {
  margin-top: 6px;
  padding: 14px 16px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  display: grid;
  gap: 10px;
  max-width: 420px;
}
.sketch-line { display: block; height: 8px; border-radius: 4px; background: var(--border); }
.sketch-line.short { width: 60%; }
.sketch-row { display: flex; gap: 8px; align-items: center; }
.sketch-row .sketch-line { flex: 1 1 auto; }
.sketch-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--text-muted);
  flex: 0 0 auto;
}
.sketch-dot.on { background: var(--brand-brown); border-color: var(--brand-brown); }
.sketch-btn {
  justify-self: start;
  padding: 8px 14px;
  border: 1.5px solid var(--brand-brown);
  border-radius: 999px;
  color: var(--brand-brown);
  font-weight: 700;
  font-size: 0.85rem;
}
.sketch-bar {
  position: relative;
  height: 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.sketch-bar i { position: absolute; inset: 0 38% 0 0; background: var(--brand-brown); opacity: 0.55; }
.sketch-note { font-size: 0.8rem; color: var(--text-muted); }

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

footer.site {
  border-top: 1px solid var(--border);
  padding: 44px 0 26px;
  margin-top: auto;
}
footer.site .footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--border);
}
footer.site .footer-mission { max-width: 320px; flex: 1 1 260px; }
footer.site .footer-mission .brand { font-size: 1.05rem; }
footer.site .footer-mission .brand-mark { width: 24px; height: 24px; }
footer.site .footer-mission-text {
  margin: 12px 0 0;
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.55;
}
footer.site .footer-cols { display: flex; flex-wrap: wrap; gap: 40px 56px; }
footer.site .footer-col-title {
  margin: 0 0 12px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
footer.site .footer-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 8rem;
}
footer.site .footer-col a {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9rem;
}
footer.site .footer-col a:hover { color: var(--text); }

/* THE ICON ON EVERY FOOTER LINK (phase-2 follow-on, Amendment 2; Mike from staging).
 *
 * The header's mega menu gives every destination a glyph and the footer gave the same destinations
 * none, so the two halves of the site's navigation spoke different languages. The glyphs, the
 * viewBox and the stroke weight are the menu's, lifted where the menu has that door and drawn in the
 * same idiom where it does not; they are rendered from `scripts/footer-links.mjs` into all fifty
 * pages, so there is one of each rather than fifty.
 *
 * DECORATIVE, and sized like the header's `.navhit-icon` rather than its tile badge: the anchor is a
 * line of text with a mark beside it, not a card. `currentColor` means the icon dims and lifts with
 * the link's own colour on hover, so nothing here names a colour or needs a hover rule of its own. */
.footer-col-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  opacity: 0.9;
}
footer.site .footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 18px;
  color: var(--text-muted);
  font-size: 0.82rem;
}
footer.site .trust-line { margin: 0; }
footer.site .trust-line b { color: var(--text); font-weight: 800; }
@media (max-width: 560px) {
  footer.site .footer-bottom { flex-direction: column; gap: 6px; }
}

/* W2 page-footer cross-links */
.explore { padding: 12px 0 28px; }
.explore-h {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.explore .also { margin: 0; }
.explore .also-list { margin: 0; }
.features-bridge-grid { display: grid; gap: 16px; }
/* GB-20: the ticked entries were the one place on the site where standing text wore a permanent
   underline in the body colour — reading as emphasis to some and as sixteen doors to others.
   They ARE doors, so they now wear the site's one link language (the .also / .faq-item /
   .walk-step idiom): brand-brown at 650, underline only as hover and focus feedback. Underline
   never rests on this site; colour and weight carry the affordance. */
.includes-list a { color: var(--brand-brown); font-weight: 650; text-decoration: none; }
.includes-list a:hover,
.includes-list a:focus-visible { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- W3 feature and use-case content ----------
 *
 * These blocks add the missing page structure without changing the shared shell. Product
 * illustrations deliberately use ordinary HTML boxes and labels: they are diagrams of real views,
 * never screenshots or promises of a different interface. Every grid uses minmax(0, 1fr) so long
 * labels wrap inside the viewport instead of widening a phone page. */

.detail-page { padding-top: 0; }
.detail-hero {
  padding: clamp(42px, 7vw, 82px) 0 clamp(48px, 8vw, 88px);
}
.detail-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.95fr);
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}
.detail-copy,
.detail-visual,
.product-sketch,
.product-shot,
.sketch-window,
.sketch-row-main { min-width: 0; }
.detail-copy h1 {
  max-width: 18ch;
  margin-bottom: 18px;
  font-size: clamp(2.25rem, 5vw, 4.25rem);
  line-height: 1.02;
}
.detail-situation {
  max-width: 42ch;
  margin: 0 0 12px;
  color: var(--brand-brown);
  font-size: 1rem;
  font-weight: 780;
  line-height: 1.5;
}
.detail-statement {
  max-width: 32ch;
  margin: 0 0 14px;
  font-size: clamp(1.22rem, 2.2vw, 1.65rem);
  line-height: 1.35;
  letter-spacing: -0.015em;
  font-weight: 720;
}
.detail-summary {
  max-width: 58ch;
  margin: 0;
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.7;
}
.detail-truth-note {
  max-width: 58ch;
  margin: 18px 0 0;
  padding: 12px 14px;
  border-left: 3px solid var(--brand-brown);
  background: color-mix(in srgb, var(--brand-brown) 7%, transparent);
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.55;
}
.detail-section-head .path-lede {
  margin-top: 12px;
  color: var(--text);
  font-size: 1.12rem;
  font-weight: 720;
  line-height: 1.45;
}
.kept-honest {
  max-width: 58ch;
  margin-top: 28px;
}
.kept-honest .kicker {
  margin: 0 0 8px;
}
.kept-honest .detail-truth-note {
  margin-top: 0;
}
.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.detail-actions a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.detail-section {
  padding: clamp(52px, 8vw, 88px) 0;
  border-top: 1px solid var(--border);
}
.detail-section.detail-soft {
  background: color-mix(in srgb, var(--bg-soft) 68%, var(--bg));
}
.detail-section-head {
  max-width: 680px;
  margin-bottom: 28px;
}
.detail-section-head h2 {
  margin: 0 0 10px;
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.detail-section-head p {
  margin: 0;
  color: var(--text-muted);
}
.outcome-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.outcome-card {
  min-width: 0;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  box-shadow: 0 1px 1px rgba(20, 18, 14, 0.04);
}
.outcome-card::before {
  content: "";
  display: block;
  width: 34px;
  height: 4px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: var(--brand-brown);
}
.outcome-card h3 {
  margin: 0 0 9px;
  font-size: 1.05rem;
  line-height: 1.3;
}
.never-posts-page .outcome-card h3 { color: var(--text); }
.outcome-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.94rem;
  line-height: 1.62;
}

.step-list {
  counter-reset: detail-step;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.step-list > li {
  counter-increment: detail-step;
  min-width: 0;
  padding: 22px 20px 24px;
  border-top: 2px solid var(--border);
}
.step-list > li::before {
  content: counter(detail-step, decimal-leading-zero);
  display: block;
  margin-bottom: 16px;
  color: var(--brand-brown);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.step-list h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  line-height: 1.35;
}
.step-list p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.91rem;
  line-height: 1.58;
}

/* Honest, labelled product diagrams. Internal sample rows are hidden from the accessibility tree;
   the figcaption carries the whole point without making a screen-reader traverse decoration. */
.product-sketch { margin: 0; }

/* A SLOT THAT NOW HOLDS A SCENE INSTEAD OF A SCREENSHOT.
 *
 * The homepage's two bitmap wrappers were built to frame a photograph: they draw the card (border,
 * radius, background, shadow) and crop what is inside it to a fixed shape. A scene brings its own
 * card — `.sketch-window` below — and its own height, so a frame around it is a second border and
 * a crop is a guillotine. The modifier stands the wrapper down and leaves only what it is still
 * for: where the slot sits in the grid, and its caption.
 *
 * The Learn wrappers need no modifier: there the border, radius and crop live on the `picture`
 * child, which a scene simply does not have.
 *
 * Specificity is deliberate rather than decorative. The rules being stood down are written as
 * `body.home-page .hero-shot` and `.product-frame`, so each selector here is written to out-rank
 * its own target exactly, and no `!important` is needed anywhere.
 */
body.home-page .hero-shot.is-scene,
.product-frame.is-scene {
  aspect-ratio: auto;
  max-height: none;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.product-frame.is-scene > figcaption {
  padding: 0;
  border-top: 0;
}
.product-shot {
  margin: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand-brown) 25%, var(--border));
  border-radius: clamp(14px, 3vw, 22px);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-1);
}
.product-shot picture,
body.home-page .hero-shot picture {
  display: block;
}
.product-shot picture {
  height: clamp(360px, 44vw, 560px);
  overflow: hidden;
}
.product-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.product-shot figcaption {
  margin: 0;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}
.product-shot-viewer-probation picture {
  height: clamp(340px, 40vw, 500px);
}
.product-shot-viewer-probation img {
  object-position: center;
}
.tutorial-proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 16px;
  margin: 24px 0 38px;
}
.tutorial-product-shot picture {
  height: clamp(330px, 43vw, 500px);
}
.product-sketch figcaption {
  margin-top: 12px;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}
/* THE COMPONENT SETS ITS OWN FACE (phase-2 follow-on, Amendment 1).
 *
 * `font-family` inherits, and a scene is dropped into places that set one: `.article-body` was
 * Georgia until this round, and the in-app help centre this component is meant to be lifted into
 * one day will set whatever it sets. A picture of the product has to be in the product's face
 * wherever it lands, so the window declares it rather than trusting whatever it was dropped into.
 * The value is the same token `body` reads, so this is a guard and never a second opinion. */
.sketch-window {
  width: 100%;
  overflow: hidden;
  font-family: var(--font-sans);
  border: 1px solid color-mix(in srgb, var(--brand-brown) 25%, var(--border));
  border-radius: clamp(14px, 3vw, 22px);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-1);
}
.sketch-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-soft) 55%, var(--bg-elevated));
}
.sketch-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--border);
}
.sketch-view {
  min-width: 0;
  margin-left: 4px;
  overflow-wrap: anywhere;
  font-size: 0.74rem;
  font-weight: 760;
  color: var(--text-muted);
}
.sketch-count {
  margin-left: auto;
}
/* THE WORD THAT SAYS THE PICTURE IS INVENTED.
 *
 * A scene is drawn to look like the screen, and the sample rows inside it are written to read like
 * a real channel's afternoon. That realism is what makes it useful and what makes it a small lie if
 * nothing says otherwise, so the window's own chrome says it: one badge, beside the breadcrumb,
 * before a reader gets to the first invented sentence.
 *
 * It is a badge and not a whisper on purpose — muted grey next to an already-muted breadcrumb is a
 * thing nobody reads. The tint is the same construction as `.sketch-chip.warn` below, so it takes
 * the brand colour in both themes and measures 6.4:1 against its own panel in each.
 *
 * It carries no `white-space` declaration and needs none: the badge is one word with nothing in it
 * to break at, and `flex: 0 0 auto` stops the row squeezing it. (It would also fail the scene-CSS
 * colour sweep in `scripts/tests/product-scenes.test.ts`, which reads the word `white` in
 * `white-space` as a colour literal — a false positive worth leaving in place, because the sweep is
 * the reason no scene rule can quietly stop following the reader's theme.)
 */
.sketch-example {
  flex: 0 0 auto;
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, var(--brand-brown) 45%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-brown) 9%, var(--bg-elevated));
  color: var(--brand-brown);
  font-size: 0.62rem;
  font-weight: 760;
  line-height: 1.35;
  letter-spacing: 0.03em;
}
.sketch-body { padding: clamp(16px, 3vw, 24px); }
/* THE SCENE'S OWN TYPE SCALE, INSIDE A PAGE OF PROSE.
 *
 * Each of the next three rules is written twice over: once plainly, and once under `.sketch-body`.
 * The second selector is not decoration and not a duplicate — a scene now appears inside
 * `.article-body` on the Learn pages, and `landing/learn.css` styles every `h2` and `p` in there as
 * editorial typography at (0,1,1). A scene is a picture of a screen, so its heading must not
 * suddenly set at 2.4rem with an em of air above it because somebody dropped it into an article.
 * The homepage does the same thing one notch harder: `body.home-page .scene h2` (site.css, the
 * home section headings) is (0,2,2), and it set a scene's title at 40px inside the three product
 * sections — which is how the first painted capture of this lane came back with a heading twice the
 * size of the same heading in the hero, on the same page. Naming both wrappers lifts these three to
 * (0,3,0) and (0,3,1), above every editorial and section-heading rule that reaches into a scene,
 * and the plain selector stays for the one place a `.sketch-title` lives outside a `.sketch-body`
 * (`landing/features/teachable-ai/index.html`, the training demo heading).
 *
 * The capture script measures this rather than trusting it: a scene's title, row text and caption
 * must compute to the same size on every page it appears on.
 */
.sketch-title,
.sketch-window .sketch-body .sketch-title {
  margin: 0 0 13px;
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  letter-spacing: -0.02em;
}
.sketch-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.sketch-sections,
.sketch-window .sketch-body .sketch-sections {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0 0 14px;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 720;
  letter-spacing: 0.02em;
}

.sketch-sections span + span::before {
  content: "·";
  margin-right: 8px;
  color: var(--border);
}
.sketch-tab,
.sketch-chip,
.sketch-button {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow-wrap: anywhere;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 720;
  line-height: 1.25;
}
.sketch-tab.active,
.sketch-chip.good {
  border-color: color-mix(in srgb, var(--tick) 45%, var(--border));
  color: var(--tick);
  background: color-mix(in srgb, var(--tick) 9%, var(--bg-elevated));
}
.sketch-chip.warn {
  border-color: color-mix(in srgb, var(--brand-brown) 45%, var(--border));
  color: var(--brand-brown);
  background: color-mix(in srgb, var(--brand-brown) 9%, var(--bg-elevated));
}
.sketch-rows { display: grid; gap: 9px; }
.sketch-row {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
}
.sketch-row-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 7px 12px;
}
.sketch-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.79rem;
  line-height: 1.35;
}
.sketch-row p,
.sketch-window .sketch-body .sketch-row p {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 0.73rem;
  line-height: 1.45;
}
.sketch-row.ghost {
  opacity: 0.4;
}
.product-sketch ins {
  padding: 0 0.15em;
  background: color-mix(in srgb, var(--brand-brown) 14%, transparent);
  color: inherit;
  text-decoration: none;
}
.sketch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}
.sketch-button {
  border-radius: 7px;
  background: var(--bg-elevated);
  color: var(--text);
}
.sketch-button.primary {
  border-color: var(--cta);
  background: var(--cta);
  color: var(--accent-contrast);
}
.sketch-meter {
  height: 7px;
  margin-top: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--bg-soft);
}
.sketch-meter > span {
  display: block;
  width: var(--meter, 62%);
  height: 100%;
  border-radius: inherit;
  background: var(--brand-brown);
}

/* THE PHONE (phase 2, item 3). One class on the figure and nothing else: the window, the marker,
   the labels and the accessible name are the same catalogue entry, so a phone placement cannot say
   anything a desktop one does not. Written as `.product-sketch.is-phone .sketch-window` so it
   out-ranks `.sketch-window` without an `!important` and without touching any other window. */
.product-sketch.is-phone .sketch-window {
  max-width: 336px;
  margin-inline: auto;
  border-width: 7px;
  border-radius: 32px;
}
.product-sketch.is-phone .sketch-top { padding: 10px 12px; }
.product-sketch.is-phone .sketch-body { padding: 14px 12px 16px; }

/* THE CALLOUT (phase 2, item 3): one control, drawn out of the window and named underneath, for an
   explanation that is about a single button. It sits inside the window and below the panel, so the
   pointer reads as "this control, in there", and the label is rendered as the control itself.
   The label text is not free copy — it is checked against `apps/web/src/views/*.ts` by the same
   assertion that checks every other label in a scene. */
.sketch-callout,
.sketch-window .sketch-callout {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 11px clamp(16px, 3vw, 24px) 13px;
  border-top: 1px solid color-mix(in srgb, var(--brand-brown) 45%, var(--border));
  background: color-mix(in srgb, var(--brand-brown) 8%, var(--bg-elevated));
}
.sketch-callout-mark {
  width: 0;
  height: 0;
  flex: 0 0 auto;
  border-right: 6px solid transparent;
  border-bottom: 7px solid var(--brand-brown);
  border-left: 6px solid transparent;
}
.sketch-callout-label {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid var(--cta);
  border-radius: 7px;
  overflow-wrap: anywhere;
  background: var(--cta);
  color: var(--accent-contrast);
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.25;
}

/* THE CHART (phase 2, Mike: "/use-cases/video-sentiment/ could have a graph on it").
 *
 * The plot is inline SVG — the one drawing allowed inside a scene, because a line over thirty days
 * is not a thing rows and chips can say — and it takes its ink from `currentColor` and the brand
 * token, so it follows the reader's theme exactly like the rest of the window. The element sets the
 * colour; the markup names no colour at all.
 *
 * `.sketch-chart-x` and `.sketch-legend` are written twice over for the same reason the title and
 * the rows are: a scene lands inside `.article-body`, where `landing/learn.css` styles every `p` as
 * editorial typography, and a chart axis set at 1.05rem with an em of air above it is not an axis. */
.sketch-chart { margin: 0 0 12px; }
.sketch-chart-plotbox { position: relative; }
.sketch-chart-plot {
  display: block;
  width: 100%;
  height: clamp(76px, 11vw, 108px);
  color: var(--text-muted);
}

/* THE WORD AT THE END OF THE LINE (phase-2 follow-on, Amendment 4B).
 *
 * `communityChart` labels the end of the current line with the stance WORD, never the number, and it
 * places that word by class rather than by a computed `top` because the app's CSP forbids a `style`
 * attribute. Five rows, chosen by `stanceRow(y)`, are enough for the eye to join the word to the
 * line and few enough to read here. The scene has the same five, for the same reason and by the same
 * arithmetic, so a scene that showed the word in the wrong place would be showing a different chart.
 *
 * It carries the window's own ground so the guides do not run underneath the letters. */
.sketch-chart-stance,
.sketch-window .sketch-body .sketch-chart-stance {
  position: absolute;
  right: 0;
  margin: 0;
  padding: 0 0 0 7px;
  color: var(--brand-brown);
  background: var(--bg-elevated);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.sketch-chart-stance.r1 { top: 0; }
.sketch-chart-stance.r2 { top: 20%; }
.sketch-chart-stance.r3 { top: 40%; }
.sketch-chart-stance.r4 { top: 60%; }
.sketch-chart-stance.r5 { top: 80%; }
.sketch-chart-x,
.sketch-window .sketch-body .sketch-chart-x {
  display: flex;
  justify-content: space-between;
  margin: 7px 0 0;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 720;
  letter-spacing: 0.02em;
  line-height: 1.35;
}
.sketch-legend,
.sketch-window .sketch-body .sketch-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 6px;
  margin: 0 0 14px;
  color: var(--text-muted);
  font-size: 0.73rem;
  line-height: 1.45;
}

/* THE SCENE LIBRARY (phase 2, item 2). `/design/scenes/` is not in the navigation and not in the
   sitemap; it exists so one person can look at every scene in both themes at once. A pane paints
   its own ground from the scoped palette above, which is the whole reason the page can show light
   and dark on one screen. */
.scene-library { display: grid; gap: 34px; }
.scene-library-entry {
  display: grid;
  gap: 12px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}
.scene-library-entry h2 { margin: 0; font-size: clamp(1.1rem, 2.6vw, 1.4rem); }
.scene-library-meta { margin: 0; color: var(--text-muted); font-size: 0.82rem; line-height: 1.5; }
.scene-library-panes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 16px;
}
.scene-library-pane {
  min-width: 0;
  padding: clamp(14px, 3vw, 22px);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text);
  /* THE PANE SCROLLS, NOT THE PAGE (phase-2 follow-on, Amendment 4E). A 1440-pixel box has to be
     lookable-at on a phone, and a review surface that pushes the whole document sideways is a
     review surface nobody can scroll down. */
  overflow-x: auto;
}
.scene-library-shot { flex: 0 0 auto; }
.scene-library-shot.is-390 { width: 390px; }
.scene-library-shot.is-1440 { width: 1440px; }
.scene-library-pane > p {
  margin: 0 0 12px;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.viewer-sample-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  max-height: 14rem;
  margin-top: 12px;
  overflow: hidden;
}
.viewer-sample-list .tlt-mock-text {
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.64rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.related-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px 48px;
}
.related-panel h2,
.related-panel h3 { margin-top: 0; }
.related-panel p { color: var(--text-muted); }
.related-panel .also-list { margin-bottom: 0; }

/* The final journey is one decision aid, not a second site map. Each feature and use-case page
   keeps its hand-picked neighbours, but presents them once as compact routes. */
.journey-next {
  padding: clamp(36px, 6vw, 58px) 0;
  background: color-mix(in srgb, var(--bg-soft) 58%, var(--bg));
}
.journey-next .related-panel {
  gap: 24px clamp(28px, 5vw, 64px);
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
  box-shadow: 0 16px 42px rgba(20, 18, 14, 0.05);
}
.journey-next .kicker { margin-bottom: 8px; }
.journey-next .related-panel h2 {
  margin-bottom: 14px;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.2;
}
.journey-next .also-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.journey-next .also-list a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.25;
}
.journey-next .also-list a:hover,
.journey-next .also-list a:focus-visible {
  border-color: var(--brand-brown);
  color: var(--brand-brown);
}
.journey-index {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.journey-index a {
  color: var(--brand-brown);
  font-size: 0.9rem;
  font-weight: 750;
  text-decoration: none;
}
.journey-index a::after {
  content: " →";
}
.journey-index a:hover,
.journey-index a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hub-intro {
  max-width: 760px;
  padding: 0 0 10px;
}
.hub-intro .detail-statement { max-width: 38ch; }
.hub-section { padding: 26px 0 20px; }
.home-card-intro {
  max-width: 690px;
  margin: 0 0 22px;
  color: var(--text-muted);
}
.page-list.home-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 54rem) {
  .detail-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .detail-visual { max-width: 620px; }
  .outcome-grid { grid-template-columns: minmax(0, 1fr); }
  .step-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-list.home-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 40rem) {
  main.page { padding-bottom: 56px; }
  .wrap { padding-left: 18px; padding-right: 18px; }
  .detail-hero { padding-top: 38px; }
  .detail-copy h1 { font-size: clamp(2.05rem, 12vw, 3.2rem); }
  .detail-statement { font-size: 1.16rem; }
  .step-list,
  .related-panel,
  .page-list.home-card-grid { grid-template-columns: minmax(0, 1fr); }
  .step-list > li { padding-left: 0; padding-right: 0; }
  .detail-actions a { flex: 1 1 10rem; text-align: center; }
  .product-shot picture { height: clamp(330px, 96vw, 430px); }
  .sketch-body { padding: 15px; }
  .sketch-row-main { align-items: flex-start; }
  .viewer-sample-list { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Home-page relay pass (Codex round 1, reworked by FABLE round 2) ----------
   Home-only structure tune toward the reference's hero anatomy + section cadence grammar.
   Scoped to body.home-page so the 39 shell pages are untouched. Round 2 notes:
   - The round-1 inter-scene hairlines are gone: the reference home runs its sections on one
     uninterrupted field (its only rules live inside the hero and the footer) and separates
     bands with space and soft radial auras instead. .scene-aura below is that device.
   - The hero is now the reference's three-part shape: full-width headline band, gradient
     hairline, then a 0.79/1.21 split. The right rail is one bordered product vignette under
     an aura glow.
   Round 3 (FABLE): the one-field logic went page-wide — the inline sheet retired the two
   fixed-dark plates to the page tokens, spread .scene-aura to the ex-plate bands (with a
   per-scene --aura-x so the glow alternates sides), and unified the band rhythm. Details in
   the inline sheet's "Ex-fixed-dark scenes" block and ROUND3-FABLE.md. */

/* Hero anatomy: headline band, hairline, split. */
body.home-page .hero-head { max-width: 100%; }

/* Round 4 (FABLE): the reference headline band ends on a short bold tag line under the h1
   ("Your specialists. Your data." — 17px/19px, 700, -0.01em, mt-3.5, their muted ghost
   colour). Same slot, same type, ours carries the ownership pair. */
body.home-page .hero-tag {
  margin: 14px 0 0;
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-muted);
}

body.home-page .hero-rule {
  display: block;
  height: 1px;
  margin: clamp(26px, 3vw, 32px) 0 clamp(30px, 3.4vw, 36px);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--border) 95%, transparent) 0%,
    color-mix(in srgb, var(--border) 80%, transparent) 72%,
    transparent 100%
  );
  pointer-events: none;
}

body.home-page .hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4.8vw, 44px);
  align-items: start;
}

body.home-page .hero-copy {
  min-width: 0;
  max-width: 46ch;
}

/* The reference hero closes its copy column with a gradient hairline, then TWO proof pairs
   side by side ("mt-7 grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-7"); each pair is a
   12.5px/700/0.01em ghost-muted title full-width on top, then an icon + line row under it
   ("flex items-center gap-3 mt-2" — "Verified by Google" etc.). Round 2 mirrored the shape
   as boxed decorative rows; round 4 (FABLE) fills them with the two true trust facts,
   drops the boxes the reference never had, and recuts the anatomy to the
   verified one: title over icon+text, pairs in two columns. The chip is the icon slot. */
body.home-page .hero-proof-cells {
  margin-top: clamp(24px, 3vw, 32px);
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 24px;
}

body.home-page .hero-proof-cell {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 8px 10px;
  align-items: start;
}

body.home-page .hero-proof-title {
  grid-column: 1 / -1;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: var(--text-muted);
}

body.home-page .hero-proof-chip {
  grid-row: 2;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--brand-brown) 44%, var(--border));
  background: color-mix(in srgb, var(--brand-brown) 18%, var(--bg-soft));
}

body.home-page .hero-proof-text {
  grid-row: 2;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-muted);
}

@media (max-width: 40rem) {
  body.home-page .hero-proof-cells { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

/* The CTA cluster wears the reference's tinted panel (their store-badge box: accent-tinted
   ground, accent border, a soft glow shadow), transposed onto our brown. */
body.home-page .hero .cta-row {
  max-width: 440px;
  padding: 16px 18px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--brand-brown) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-brown) 28%, transparent);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--brand-brown) 14%, transparent);
}

body.home-page .hero-visual {
  display: none;
  position: relative;
  min-width: 0;
}
body.home-page .hero-shot {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--brand-brown) 26%, var(--border));
  background: var(--bg-elevated);
  box-shadow: var(--shadow-1);
  aspect-ratio: 4 / 3;
  max-height: min(38rem, 70vh);
}
body.home-page .hero-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
body.home-page .hero-shot picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* The aura behind the product card: the reference draws a blurred radial at the card's top
   edge, inset -28px, and lets the card float on it. */
body.home-page .hero-card-aura {
  position: absolute;
  inset: -28px;
  border-radius: 34px;
  background: radial-gradient(
    58% 52% at 50% 2%,
    color-mix(in srgb, var(--brand-brown) 24%, transparent) 0%,
    transparent 70%
  );
  filter: blur(10px);
  pointer-events: none;
}

body.home-page .hero-card {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--brand-brown) 26%, var(--border));
  background: color-mix(in srgb, var(--bg-elevated) 94%, var(--bg));
  box-shadow: var(--shadow-1);
  padding: clamp(16px, 1.8vw, 22px);
  display: grid;
  gap: clamp(14px, 1.6vw, 20px);
}

/* Four-across strip, one entry active: the reference's specialist row; here, the four
   standings of the viewer ladder. */
body.home-page .hero-people {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

/* Round 4 (FABLE): the strip entries carry the four standing words and their inventory
   one-liners (the reference's persona strip is name + role at 15px/10.5px-500, the active
   entry accent-coloured and full-opacity, the rest at opacity 0.7). */
body.home-page .hero-person {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 5px;
  opacity: 0.68;
}

body.home-page .hero-person.is-active { opacity: 1; }

body.home-page .hero-visual {
  min-width: 0;
  max-width: 100%;
}
body.home-page .hero-card {
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
body.home-page .hero-card-aura {
  inset: 0;
  max-width: 100%;
}
body.home-page .hero-avatar {
  width: clamp(36px, 3.4vw, 46px);
  height: clamp(36px, 3.4vw, 46px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--brand-brown);
  background: color-mix(in srgb, var(--brand-brown) 26%, var(--bg-soft));
}
body.home-page .hero-avatar svg {
  width: 54%;
  height: 54%;
}
body.home-page .hero-person:nth-child(1) .hero-avatar { color: #5a8f6a; }
body.home-page .hero-person:nth-child(2) .hero-avatar { color: var(--brand-brown); }
body.home-page .hero-person:nth-child(3) .hero-avatar { color: #b07a3a; }
body.home-page .hero-person:nth-child(4) .hero-avatar { color: #a3534a; }

body.home-page .hero-person.is-active .hero-avatar {
  background: color-mix(in srgb, var(--brand-brown) 42%, var(--bg-soft));
  box-shadow:
    0 0 0 2px var(--brand-brown),
    0 6px 18px color-mix(in srgb, var(--brand-brown) 30%, transparent);
}

body.home-page .hero-person-name {
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--text);
}

body.home-page .hero-person.is-active .hero-person-name { color: var(--brand-brown); }

body.home-page .hero-person-role {
  font-size: 0.64rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-muted);
}

/* The exchange panel: the reference's accent-tinted conversation card. Incoming bubble offset
   right (their ml-8), the answer bordered in the accent, then the decision pair. */
body.home-page .hero-thread {
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--brand-brown) 30%, transparent);
  background: color-mix(in srgb, var(--brand-brown) 7%, transparent);
  padding: 14px;
  display: grid;
  gap: 10px;
}

/* Round 4 (FABLE): the panel speaks. Label at the reference's 11px accent register, bubbles at
   their 13px, the answer keeping its 2px accent border, and the decision pair wearing the two
   real button names. */
body.home-page .hero-thread-label {
  font-size: 0.7rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand-brown);
}

body.home-page .hero-bubble {
  border-radius: 12px;
  padding: 10px 12px;
}

body.home-page .hero-bubble-text {
  display: block;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text);
}

body.home-page .hero-bubble-text b { font-weight: 750; }

body.home-page .hero-bubble-in {
  margin-left: 32px;
  background: color-mix(in srgb, var(--bg-soft) 80%, var(--bg-elevated));
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

body.home-page .hero-reply {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

body.home-page .hero-reply-avatar {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-brown) 34%, var(--bg-soft));
}

body.home-page .hero-bubble-answer {
  flex: 1;
  min-width: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 2px solid var(--brand-brown);
}

body.home-page .hero-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: 36px;
}

body.home-page .hero-chip {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}

body.home-page .hero-chip-hold {
  color: var(--brand-brown);
  background: color-mix(in srgb, var(--brand-brown) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-brown) 45%, var(--border));
}

body.home-page .hero-chip-ok {
  color: color-mix(in srgb, var(--tick) 70%, var(--text));
  background: color-mix(in srgb, var(--tick) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--tick) 45%, var(--border));
}

/* Section auras: the reference's mk-aura — a huge, soft radial pinned behind a section's head,
   clipped to the section. Sections that carry one get position:relative and lift their inner
   container above it. Round 3 (FABLE): the x-position reads a per-scene --aura-x custom
   property (set in the home inline sheet) so the glow alternates left/right down the page the
   way the reference's bands do; unset, it stays centred as round 2 drew it. */
body.home-page .scene-tour,
body.home-page .scene-control,
body.home-page .scene-versus,
body.home-page .scene-price-summary { position: relative; }

body.home-page .scene-aura {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

body.home-page .scene-aura::before {
  content: "";
  position: absolute;
  top: -12%;
  left: var(--aura-x, 50%);
  transform: translateX(-50%);
  width: min(1100px, 130%);
  height: 540px;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--brand-brown) 10%, transparent) 0%,
    transparent 70%
  );
}

body.home-page .scene-tour .scene-inner,
body.home-page .scene-control .scene-inner,
body.home-page .scene-price-summary .scene-inner {
  position: relative;
  z-index: 1;
}

body.home-page .scene-head {
  max-width: 40rem;
  margin: 0 auto;
}

body.home-page .scene-body {
  max-width: 1120px;
  margin: 0 auto;
}

body.home-page .scene-tour .home-hub-shell,
body.home-page .scene-control .home-hub-shell {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--brand-brown) 22%, var(--border));
  border-radius: 22px;
  background: color-mix(in srgb, var(--bg-elevated) 96%, var(--bg));
  box-shadow: var(--shadow-1);
  padding: clamp(16px, 2.1vw, 24px);
}

body.home-page .scene-tour .home-hub-shell::before,
body.home-page .scene-control .home-hub-shell::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(22px, 3.4vw, 36px);
  right: clamp(22px, 3.4vw, 36px);
  height: 1px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--brand-brown) 34%, transparent) 0%,
    color-mix(in srgb, var(--brand-brown) 18%, transparent) 52%,
    transparent 100%
  );
}

body.home-page .scene-tour .home-hub-shell .detail-actions,
body.home-page .scene-control .home-hub-shell .detail-actions {
  margin-top: clamp(20px, 2.8vw, 30px);
}

/* Hub cards use the reference's compact icon-and-title row, with the description flowing under
   it. The feature icons reuse the same inline set as the ruled navigation; the use-case cards
   add one carrying illustration and a consistent set of larger, drawn icons. */
body.home-page .scene-body .home-card-grid li > a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  padding-top: 18px;
}

body.home-page .home-card-title {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  margin-bottom: 9px;
}

body.home-page .home-card-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--brand-brown) 34%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand-brown) 12%, var(--bg-elevated));
  color: var(--brand-brown);
}

body.home-page .home-card-icon svg { width: 16px; height: 16px; }

body.home-page .scene-body .home-card-grid .item-label,
body.home-page .scene-body .home-card-grid .item-desc { display: block; }

body.home-page .scene-body .home-card-grid .item-label {
  min-width: 0;
  line-height: 1.35;
}

body.home-page .scene-body .home-card-grid .item-desc {
  margin-top: 0;
}

/* Use-case card furniture. The primary tile gets a complete comment-sorting scene, including the
   existing cat mark; every supporting tile gets one 96px-viewBox line illustration from the same
   stroke, wash and two-accent system. Nothing here is a loading bar or empty mock surface. */
body.home-page .scene-tour .home-card-grid li > a {
  isolation: isolate;
  min-height: 206px;
  padding: clamp(18px, 2vw, 22px);
  border-color: color-mix(in srgb, var(--brand-brown) 20%, var(--border));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--brand-brown) 5%, var(--bg-elevated)), var(--bg-elevated));
}

body.home-page .scene-tour .home-card-grid li > a::after {
  content: "";
  position: absolute;
  top: 22px;
  right: 22px;
  width: 9px;
  height: 9px;
  border-top: 1.8px solid color-mix(in srgb, var(--brand-brown) 72%, var(--text));
  border-right: 1.8px solid color-mix(in srgb, var(--brand-brown) 72%, var(--text));
  transform: rotate(45deg);
  opacity: 0.72;
}

body.home-page .scene-tour .home-card-copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 8px;
  padding-right: 28px;
}

body.home-page .scene-tour .home-card-copy .home-card-title,
body.home-page .scene-tour .home-card-supporting .home-card-title {
  margin-bottom: 0;
}

body.home-page .scene-tour .use-case-illustration {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 540px;
  margin: auto auto -8px;
}

body.home-page .scene-tour .use-case-illustration svg,
body.home-page .scene-tour .use-case-art svg {
  display: block;
  width: 100%;
  height: auto;
}

body.home-page .scene-tour .use-case-art {
  display: block;
  width: 76px;
  height: 76px;
  margin: 2px 0 auto;
}

body.home-page .scene-tour .use-case-art + .home-card-title { margin-top: 18px; }

body.home-page .scene-tour .art-wash {
  fill: color-mix(in srgb, var(--brand-brown) 12%, var(--bg-elevated));
}

body.home-page .scene-tour .art-paper {
  fill: var(--bg-elevated);
  stroke: color-mix(in srgb, var(--brand-brown) 44%, var(--border));
  stroke-width: 3;
}

body.home-page .scene-tour .art-line {
  fill: none;
  stroke: color-mix(in srgb, var(--brand-brown) 76%, var(--text));
  stroke-width: 3;
  stroke-linejoin: round;
}

body.home-page .scene-tour .art-blue {
  fill: none;
  stroke: var(--cta);
  stroke-width: 4;
}

body.home-page .scene-tour .art-blue-fill { fill: var(--cta); }

body.home-page .scene-tour .art-green {
  fill: none;
  stroke: var(--tick);
  stroke-width: 4;
}

body.home-page .scene-tour .art-green-fill { fill: var(--tick); }
body.home-page .scene-tour .art-dot { fill: color-mix(in srgb, var(--brand-brown) 72%, var(--border)); }
body.home-page .scene-tour .art-dot-green { fill: var(--tick); }
body.home-page .scene-tour .art-cat { fill: color-mix(in srgb, var(--text) 90%, var(--brand-brown)); }
body.home-page .scene-tour .art-eye { fill: #d9b36c; }
body.home-page .scene-tour .art-tray {
  fill: color-mix(in srgb, var(--brand-brown) 15%, var(--bg-elevated));
  stroke: color-mix(in srgb, var(--brand-brown) 78%, var(--text));
  stroke-width: 3;
  stroke-linejoin: round;
}
body.home-page .scene-tour .art-grain { fill: color-mix(in srgb, var(--brand-brown) 58%, var(--border)); }

body.home-page .scene-tour .home-card-primary > a {
  min-height: 424px;
  background:
    radial-gradient(circle at 82% 80%, color-mix(in srgb, var(--cta) 8%, transparent), transparent 44%),
    linear-gradient(145deg, color-mix(in srgb, var(--brand-brown) 9%, var(--bg-elevated)), var(--bg-elevated));
}

@media (min-width: 64rem) {
  body.home-page .scene-tour .home-card-grid,
  body.home-page .scene-control .home-card-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: stretch;
    gap: 12px; /* Round 4: reference bento gap is gap-3 = 12px, not 14. */
  }

  body.home-page .scene-tour .home-card-grid > li,
  body.home-page .scene-control .home-card-grid > li {
    min-width: 0;
    grid-column: span 3;
  }

  body.home-page .scene-tour .home-card-grid > li.home-card-wide,
  body.home-page .scene-control .home-card-grid > li.home-card-wide {
    grid-column: span 6;
  }

  body.home-page .scene-tour .home-card-grid > li.home-card-third {
    grid-column: span 4;
  }

  body.home-page .scene-tour .home-card-grid > li.home-card-tall,
  body.home-page .scene-tour .home-card-grid > li.home-card-primary {
    grid-row: span 2;
  }

  body.home-page .scene-tour .home-card-grid > li.home-card-tall > a,
  body.home-page .scene-tour .home-card-grid > li.home-card-primary > a {
    min-height: 100%;
  }

  body.home-page .scene-tour .home-card-grid > li.home-card-primary { grid-column: span 7; }
  body.home-page .scene-tour .home-card-grid > li.home-card-supporting:nth-child(2),
  body.home-page .scene-tour .home-card-grid > li.home-card-supporting:nth-child(3) { grid-column: span 5; }

  body.home-page .scene-tour .home-card-grid > li.home-card-supporting:nth-child(n + 4) {
    grid-column: span 3;
  }

  body.home-page .scene-tour .home-card-primary > a { min-height: 424px; }
  body.home-page .scene-tour .home-card-supporting > a { min-height: 206px; }

  /* Round 4: the 196px wide-card min-height is gone — the reference sizes bento tiles by
     content and row stretch, never by a fixed floor, and with real descriptions in every
     card the prop height only manufactured empty space. */
}

@media (max-width: 64rem) {
  body.home-page .scene-tour .home-card-primary > a { min-height: 340px; }
  body.home-page .scene-tour .use-case-illustration { max-width: 500px; }
}

@media (max-width: 40rem) {
  body.home-page .scene-tour .home-card-primary > a { min-height: 0; }
  body.home-page .scene-tour .use-case-illustration { margin-top: 20px; }
  body.home-page .scene-tour .use-case-art { width: 68px; height: 68px; }
}

/* Plans band: one parent card shell, then four equal child cards (reference strip grammar). */
body.home-page .scene-price-summary .price-summary-shell {
  border: 1px solid color-mix(in srgb, var(--brand-brown) 22%, var(--border));
  border-radius: 22px;
  background: color-mix(in srgb, var(--bg-elevated) 94%, var(--bg));
  box-shadow: var(--shadow-1);
  padding: clamp(18px, 2.2vw, 28px);
}

body.home-page .scene-price-summary .price-summary-list { margin-top: 0; }

body.home-page .scene-price-summary .price-summary-list li > a {
  position: relative;
  padding-top: 28px;
}

body.home-page .scene-price-summary .price-summary-list li > a::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 20px;
  width: 30px;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-brown) 45%, var(--border));
}

body.home-page .scene-price-summary .price-summary-shell > .support {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

body.home-page .scene-price-summary .price-summary-shell .cta-inline {
  margin-top: clamp(20px, 2.6vw, 30px);
}

/* Reviews/media split inspired by the reference's CustomerReviews block.
   its one-off ::before radial (a different shape from every other band glow) is retired;
   the section now carries the shared .scene-aura device like its siblings, --aura-x set in
   the inline sheet to keep the glow on the right where the old radial sat. */
body.home-page .scene-versus { position: relative; }

body.home-page .versus-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 36px);
}

body.home-page .versus-column { min-width: 0; }

body.home-page .versus-shell .versus-head {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

body.home-page .versus-shell .versus-grid {
  grid-template-columns: minmax(0, 1fr);
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
  gap: 16px;
}

body.home-page .versus-shell .versus-card {
  position: relative;
  padding-top: 50px;
}

body.home-page .versus-shell .versus-card::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 22px;
  width: 66px;
  height: 10px;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--brand-brown) 70%, var(--border)) 46%, transparent 48%)
    left center / 13px 10px repeat-x;
}

body.home-page .versus-shell .versus-card::after {
  content: "";
  position: absolute;
  top: 15px;
  right: 22px;
  width: 54px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--brand-brown) 40%, var(--border));
  background: color-mix(in srgb, var(--brand-brown) 10%, var(--bg-elevated));
}

body.home-page .versus-media {
  display: none;
  min-width: 0;
}

@media (min-width: 64rem) {
  body.home-page .hero-split {
    grid-template-columns: minmax(0, 0.79fr) minmax(0, 1.21fr);
    gap: clamp(40px, 5vw, 64px);
  }

  body.home-page .hero-visual {
    display: block;
    justify-self: stretch;
  }

  body.home-page .hero-proof-cells {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  body.home-page .versus-shell {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: clamp(34px, 4.6vw, 56px);
    align-items: center;
  }

  body.home-page .versus-shell .versus-head {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
  }

  body.home-page .versus-shell .versus-grid {
    margin-left: 0;
    margin-right: 0;
  }

  body.home-page .megapanel-product {
    grid-template-columns: minmax(14.5rem, 1fr) minmax(24rem, 1.45fr) minmax(13.5rem, 0.9fr);
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 0;
    padding: 0;
    overflow: hidden;
  }

  body.home-page .megapanel-product > .megacol {
    padding: 1rem 1rem 1.15rem;
  }

  body.home-page .megapanel-product > .megacol + .megacol {
    border-left: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
  }

  body.home-page .megapanel-product .megacol-features {
    background: color-mix(in srgb, var(--brand-brown) 4%, transparent);
  }

  body.home-page .megapanel-product .feature-groups {
    gap: 0.7rem 0.95rem;
  }

  body.home-page .megapanel-product .megagroup {
    padding: 0.2rem 0.35rem 0.45rem;
    border-radius: 10px;
  }

  body.home-page .megapanel-product .megagroup + .megagroup {
    margin-top: 0.55rem;
    border-top: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
    padding-top: 0.75rem;
  }

  body.home-page .megapanel-product a.megalink {
    border-radius: 10px;
  }

  body.home-page .versus-media { display: block; }
}

/* Site navigation: reference-style top-level rules and two-column icon tiles. */
header.site {
  padding: 12px 0;
  border-bottom-color: color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.nav-sheet { gap: 14px; }
.navpages { flex-wrap: nowrap; gap: 2px; }
.navitem-how { --nav-accent: var(--brand-brown); }
.navitem-features { --nav-accent: var(--cta); }
.navitem-learn { --nav-accent: var(--tick); }

.navhit {
  gap: 7px;
  padding: 8px 10px;
  border-radius: 9px;
  font-size: 0.875rem;
  font-weight: 620;
}

.navhit-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: var(--nav-accent, var(--brand-brown));
}

.navitem[open] > .navhit { color: var(--nav-accent, var(--brand-brown)); }

details.navitem > summary.navhit::after {
  width: 6px;
  height: 6px;
  margin-left: 2px;
  border: 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: 0.58;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 120ms ease;
}

details.navitem[open] > summary.navhit::after {
  transform: translateY(1px) rotate(225deg);
}

.navitem > .mega {
  top: calc(100% + 8px);
  padding-top: 0;
}

.navitem-how > .mega { left: -120px; }
.navitem-features > .mega { left: -190px; }
.navitem-learn > .mega { left: auto; right: -108px; }

.mega-tile-grid {
  width: min(40rem, calc(100vw - 32px));
  display: grid;
  grid-template-columns: repeat(2, minmax(17.75rem, 1fr));
  grid-auto-flow: row;
  grid-auto-columns: auto;
  gap: 8px 10px;
  max-height: calc(100vh - 96px);
  max-height: calc(100dvh - 96px);
  padding: 14px;
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: 14px;
  border-color: color-mix(in srgb, var(--nav-accent, var(--brand-brown)) 22%, var(--border));
  background: color-mix(in srgb, var(--bg-elevated) 96%, var(--nav-accent, var(--brand-brown)));
  box-shadow: 0 24px 60px rgba(37, 30, 22, 0.19), 0 6px 18px rgba(37, 30, 22, 0.08);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}

.navitem-features .mega-tile-grid,
.navitem-learn .mega-tile-grid,
.navitem-how .mega-tile-grid {
  width: min(40rem, calc(100vw - 32px));
}

.mega-group-h {
  grid-column: 1 / -1;
  margin: 8px 6px 2px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mega-tile-featured + .mega-group-h {
  margin-top: 6px;
}

.mega-tile {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 9px 11px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: color-mix(in srgb, var(--nav-accent, var(--brand-brown)) 4%, var(--bg-elevated));
  color: var(--text);
  text-decoration: none;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.mega-tile:hover,
.mega-tile:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--nav-accent, var(--brand-brown)) 33%, var(--border));
  background: color-mix(in srgb, var(--nav-accent, var(--brand-brown)) 9%, var(--bg-elevated));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--nav-accent, var(--brand-brown)) 11%, transparent);
}

.mega-tile-featured {
  grid-column: 1 / -1;
  background: color-mix(in srgb, var(--nav-accent, var(--brand-brown)) 8%, var(--bg-elevated));
}

.mega-tile-featured::after {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  margin-left: auto;
  border-top: 1.5px solid var(--nav-accent, var(--brand-brown));
  border-right: 1.5px solid var(--nav-accent, var(--brand-brown));
  transform: rotate(45deg);
}

.mega-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--nav-accent, var(--brand-brown)) 26%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--nav-accent, var(--brand-brown)) 13%, var(--bg-elevated));
  color: var(--nav-accent, var(--brand-brown));
}

.mega-icon { margin-top: 1px; }
.mega-icon svg { width: 20px; height: 20px; }
.mega-tile > span:last-child { min-width: 0; display: grid; gap: 2px; }
.mega-tile strong { font-size: 0.875rem; line-height: 1.25; }
.mega-tile small { color: var(--text-muted); font-size: 0.75rem; line-height: 1.35; }

.btn-header-cta { padding-inline: 15px; }

/* Evidence cards replace the rejected third-party statistics with product-grounded benefits. */
body.home-page .safety-stats {
  max-width: 760px;
  margin: 30px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

body.home-page .safety-stat {
  min-width: 0;
  padding: clamp(22px, 3vw, 30px);
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--brand-brown) 22%, var(--border));
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg-elevated) 94%, var(--brand-brown));
  box-shadow: var(--shadow-1);
}

body.home-page .safety-benefit-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border: 1px solid color-mix(in srgb, var(--brand-brown) 28%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand-brown) 12%, var(--bg-elevated));
  color: var(--brand-brown);
}

body.home-page .safety-benefit-icon svg { width: 23px; height: 23px; }
body.home-page .safety-stat .safety-stat-number {
  margin: 0 0 10px;
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}
body.home-page .safety-stat .safety-stat-label { margin: 0; color: var(--text-muted); line-height: 1.65; }

/* The audit explanation gives the review/media split a real product story. */
body.home-page .versus-audit {
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid color-mix(in srgb, var(--brand-brown) 24%, var(--border));
  border-radius: 22px;
  background: color-mix(in srgb, var(--bg-elevated) 94%, var(--brand-brown));
  box-shadow: var(--shadow-1);
}

body.home-page .versus-audit h3 {
  margin: 8px 0 22px;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

body.home-page .versus-audit-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
body.home-page .versus-audit-list li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  padding: 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand-brown) 6%, var(--bg));
}
body.home-page .versus-audit-list li > span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--brand-brown);
  color: var(--accent-contrast);
  font-size: 0.75rem;
  font-weight: 750;
}
body.home-page .versus-audit-list div { display: grid; gap: 3px; }
body.home-page .versus-audit-list strong { font-size: 0.88rem; line-height: 1.3; }
body.home-page .versus-audit-list small { color: var(--text-muted); font-size: 0.76rem; line-height: 1.45; }

@media (max-width: 64rem) {
  .nav-menu[open] ~ .nav-sheet { background: color-mix(in srgb, var(--bg) 96%, var(--brand-brown)); }
  .navpages { gap: 2px; padding: 12px 14px 18px; }
  .navitem { border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent); }
  .navpages > .navhit,
  .navitem > summary.navhit {
    min-height: 54px;
    padding: 14px 8px;
    border-radius: 10px;
    font-size: 1.12rem;
    font-weight: 720;
  }
  .navhit-icon { width: 20px; height: 20px; }
  .navitem > .mega { position: static; padding: 0 0 10px; }
  .navitem:hover > .mega,
  .navitem:focus-within > .mega { display: none; }
  .navitem[open] > .mega,
  .navitem[open]:hover > .mega,
  .navitem[open]:focus-within > .mega { display: block; }
  .mega-tile-grid,
  .navitem-features .mega-tile-grid {
    width: auto;
    grid-template-columns: 1fr;
    gap: 5px;
    max-height: none;
    padding: 5px 0 8px 24px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .mega-tile-featured { grid-column: auto; }
  .mega-tile { min-height: 50px; padding: 7px 9px; }
  .mega-icon { width: 32px; height: 32px; flex-basis: 32px; border-radius: 9px; }
  .mega-icon svg { width: 18px; height: 18px; }
  .mega-tile strong { white-space: normal; }
  .mega-group-h {
    margin-top: 12px;
    padding-left: 0;
  }
}

@media (max-width: 42rem) {
  body.home-page .safety-stats { grid-template-columns: 1fr; }
  .btn-header-cta { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  details.navitem > summary.navhit::after,
  .mega-tile { transition: none; }
  .mega-tile:hover,
  .mega-tile:focus-visible { transform: none; }
}

@media (min-width: 64.0625rem) and (prefers-reduced-motion: no-preference) {
  .navitem:hover > .mega,
  .navitem:focus-within > .mega,
  .navitem[open] > .mega { animation: mega-in 130ms ease; }
}
@keyframes mega-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Round 7 (GROK): section-by-section measurement lock to the reference home
   (`../ref-wellnessproject/site/index.html` + `_next/static/chunks/40m_f6hgc5goz.js`).
   Home copy/layout stays on body.home-page; the rebuilt mega-menu chrome is site-wide. ---------- */

body.home-page .wrap {
  max-width: 72rem; /* max-w-6xl = 1152px, was 1120px */
  padding: 0 20px; /* px-5 */
}
@media (min-width: 64rem) {
  body.home-page .wrap { padding: 0 32px; } /* lg:px-8 */
}

header.site {
  padding: 12px 0; /* ~h-14 bar */
}

@media (min-width: 64.0625rem) {
  .navpages { gap: 1.75rem; } /* gap-7 = 28px; was 2px */
  .navhit {
    font-weight: 500; /* font-medium */
    padding: 8px 4px;
  }
}

/* Hero: pt-8 pb-12 / sm:pt-12 sm:pb-16 / lg:pt-14 lg:pb-20 */
body.home-page .hero {
  padding: 32px 0 48px;
}
@media (min-width: 40rem) {
  body.home-page .hero { padding: 48px 0 64px; }
}
@media (min-width: 64rem) {
  body.home-page .hero { padding: 56px 0 80px; }
}

body.home-page .hero h1 {
  font-size: clamp(32px, 4.6vw, 56px);
  font-weight: 700; /* font-bold, was 800 */
  line-height: 1.03;
  letter-spacing: -0.022em;
}

body.home-page .hero-tag {
  margin: 14px 0 0; /* mt-3.5 */
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
@media (min-width: 40rem) {
  body.home-page .hero-tag { font-size: 19px; } /* sm:text-[19px] */
}

body.home-page .hero-rule {
  margin: 32px 0; /* space above + below the hairline = split mt-8 */
  height: 1px;
}
@media (min-width: 64rem) {
  body.home-page .hero-rule { margin: 36px 0; } /* lg:mt-9 */
}
body.home-page .hero-split {
  margin-top: 0;
  gap: 40px; /* gap-10 */
}
@media (min-width: 40rem) {
  body.home-page .hero-split { gap: 48px; } /* sm:gap-12 */
}
@media (min-width: 64rem) {
  body.home-page .hero-split {
    grid-template-columns: minmax(0, 0.79fr) minmax(0, 1.21fr);
    column-gap: 64px; /* lg:gap-x-16 */
    row-gap: 0;
  }
}

body.home-page .hero .subhead {
  max-width: 46ch;
  margin: 0 0 32px;
  font-size: 15px;
  line-height: 1.62;
}
@media (min-width: 40rem) {
  body.home-page .hero .subhead { font-size: 16px; }
}

body.home-page .hero .cta-row {
  max-width: 440px;
  padding: 16px; /* p-4 */
  border-radius: 16px; /* rounded-2xl */
  box-shadow: 0 14px 34px color-mix(in srgb, var(--brand-brown) 16%, transparent);
}

body.home-page .hero-proof-cells {
  margin-top: 28px; /* mt-7 */
  padding-top: 0;
  border-top: 0; /* hairline already lives as .hero-rule; this extra rule was ours */
  gap: 28px 24px; /* gap-y-7 gap-x-6 */
}
body.home-page .hero-proof-title {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
body.home-page .hero-proof-chip {
  width: 16px;
  height: 16px;
  margin-top: 8px; /* mt-2 under the title row */
}
body.home-page .hero-proof-text { font-size: 12.5px; line-height: 1.5; }
@media (max-width: 39.99rem) {
  body.home-page .hero-proof-cells { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

body.home-page .hero-card {
  border-radius: 16px; /* rounded-2xl */
  padding: 16px; /* p-4 */
}
body.home-page .hero-card-aura {
  inset: -28px;
  border-radius: 16px;
}
body.home-page .hero-people { gap: 10px; }
body.home-page .hero-avatar {
  width: 36px;
  height: 36px;
}
body.home-page .hero-person-name { font-size: 15px; font-weight: 700; }
body.home-page .hero-person-role { font-size: 10.5px; font-weight: 500; }
body.home-page .hero-thread { border-radius: 16px; padding: 16px; }
body.home-page .hero-thread-label {
  font-size: 11px;
  letter-spacing: 0.08em;
}
body.home-page .hero-bubble-in { margin-left: 32px; } /* ml-8 */
body.home-page .hero-chip { font-size: 12px; padding: 5px 12px; }

/* Major bands: py-14 / sm:py-20 / lg:py-28 */
body.home-page .scene,
body.home-page .scene-tour,
body.home-page .scene-control,
body.home-page .scene-price-summary,
body.home-page .scene-founder,
body.home-page .scene-section-banner,
body.home-page .scene-versus,
body.home-page .scene-seats {
  padding: 56px 0;
}
@media (min-width: 40rem) {
  body.home-page .scene,
  body.home-page .scene-tour,
  body.home-page .scene-control,
  body.home-page .scene-price-summary,
  body.home-page .scene-founder,
  body.home-page .scene-section-banner,
  body.home-page .scene-versus,
  body.home-page .scene-seats {
    padding: 80px 0;
  }
}
@media (min-width: 64rem) {
  body.home-page .scene,
  body.home-page .scene-tour,
  body.home-page .scene-control,
  body.home-page .scene-price-summary,
  body.home-page .scene-founder,
  body.home-page .scene-section-banner,
  body.home-page .scene-versus,
  body.home-page .scene-seats {
    padding: 112px 0;
  }
}

body.home-page .scene-inner,
body.home-page .scene-tour .scene-inner,
body.home-page .scene-control .scene-inner,
body.home-page .scene-price-summary .scene-inner,
body.home-page .scene-section-banner .scene-inner,
body.home-page .scene-seats .scene-inner,
body.home-page .founder-inner {
  max-width: 72rem;
  padding: 0 20px;
}
@media (min-width: 64rem) {
  body.home-page .scene-inner,
  body.home-page .scene-tour .scene-inner,
  body.home-page .scene-control .scene-inner,
  body.home-page .scene-price-summary .scene-inner,
  body.home-page .scene-section-banner .scene-inner,
  body.home-page .scene-seats .scene-inner,
  body.home-page .founder-inner { padding: 0 32px; }
}

body.home-page .scene-head {
  max-width: 36rem; /* max-w-xl */
  margin: 0 auto 40px; /* mb-10 */
  text-align: center;
}
@media (min-width: 40rem) {
  body.home-page .scene-head { margin-bottom: 48px; } /* sm:mb-12 */
}
@media (min-width: 64rem) {
  body.home-page .scene-head { margin-bottom: 64px; } /* lg:mb-16 */
}

body.home-page .eyebrow {
  margin: 0 0 12px; /* mb-3 */
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
@media (max-width: 39.99rem) {
  body.home-page .eyebrow { font-size: 13px; }
}

body.home-page .scene h2 {
  margin: 0 0 12px; /* mb-3 */
  font-size: clamp(1.75rem, 2.4vw, 2.25rem); /* 28–36px */
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

body.home-page .scene .support,
body.home-page .home-card-intro {
  max-width: 36rem;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.62;
}

body.home-page .scene-body { max-width: 72rem; }

/* Hub shells: reference grids sit on the field, not inside a parent card */
body.home-page .scene-tour .home-hub-shell,
body.home-page .scene-control .home-hub-shell,
body.home-page .scene-price-summary .price-summary-shell {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
body.home-page .scene-tour .home-hub-shell::before,
body.home-page .scene-control .home-hub-shell::before { display: none; }

body.home-page .page-list.home-card-grid { gap: 12px; } /* gap-3 bento */
body.home-page .scene-control .home-card-grid,
body.home-page .price-summary-list { gap: 16px; } /* gap-4 four-up */

body.home-page .scene-body .home-card-grid li > a,
body.home-page .page-list.home-card-grid li > a {
  padding: 20px; /* p-5 */
  border-radius: 16px; /* rounded-2xl */
}
body.home-page .home-card-icon {
  width: 24px;
  height: 24px;
  flex-basis: 24px;
  border-radius: 6px;
}
body.home-page .home-card-icon svg { width: 14px; height: 14px; }
body.home-page .home-card-title { gap: 8px; margin-bottom: 8px; }
body.home-page .home-card-grid .item-label { font-size: 15px; font-weight: 700; }
body.home-page .home-card-grid .item-desc { font-size: 13px; line-height: 1.375; } /* leading-snug */

body.home-page .price-summary-list li > a {
  padding: 20px;
  border-radius: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
body.home-page .price-summary-list li > a:hover,
body.home-page .price-summary-list li > a:focus-visible {
  border-color: color-mix(in srgb, var(--brand-brown) 55%, var(--border));
  box-shadow: var(--shadow-1);
  transform: translateY(-2px);
}
body.home-page .price-summary-list .item-label {
  font-size: 12px;
  letter-spacing: 0.07em;
}
body.home-page .scene-price-summary .price-summary-shell .cta-inline { margin-top: 32px; }
body.home-page .scene-tour .home-hub-shell .detail-actions,
body.home-page .scene-control .home-hub-shell .detail-actions { margin-top: 32px; }

body.home-page .scene-founder .founder-card {
  gap: 40px; /* gap-10 */
  padding: 32px;
  border-radius: 16px;
}
@media (min-width: 40rem) {
  body.home-page .scene-founder .founder-card { gap: 48px; } /* sm:gap-12 */
}
body.home-page .founder-card-text p:not(.eyebrow) {
  font-size: 15px;
  line-height: 1.62;
}

body.home-page .safety-stats {
  max-width: 72rem;
  margin-top: 40px;
  gap: 16px;
}
body.home-page .safety-stat {
  padding: 20px;
  border-radius: 16px;
}
body.home-page .safety-benefit-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 16px;
  border-radius: 6px;
}
body.home-page .safety-stat .safety-stat-number {
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 700;
}

body.home-page .versus-shell { gap: 40px; }
@media (min-width: 40rem) {
  body.home-page .versus-shell { gap: 48px; }
}
@media (min-width: 64rem) {
  body.home-page .versus-shell {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* lg:grid-cols-2, was 1fr + 320px */
    gap: 48px;
    align-items: center;
  }
}
body.home-page .versus-shell .versus-head { margin-bottom: 40px; }
body.home-page .versus-shell .versus-grid { gap: 16px; }
body.home-page .versus-shell .versus-card,
body.home-page .versus-audit {
  padding: 20px;
  border-radius: 16px;
}
body.home-page .versus-title { font-size: 18px; font-weight: 700; }
body.home-page .versus-list { gap: 12px; font-size: 13px; }

/* Closing: max-w-3xl, py-12 / lg:py-20 */
body.home-page .scene-closing { padding: 48px 0; }
@media (min-width: 64rem) {
  body.home-page .scene-closing { padding: 80px 0; }
}
body.home-page .closing-inner {
  max-width: 48rem;
  padding: 0 20px;
}
@media (min-width: 64rem) {
  body.home-page .closing-inner { padding: 0 32px; }
}
body.home-page .closing-inner h2 {
  margin: 0 0 16px;
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}
body.home-page .closing-body {
  font-size: 15px;
  line-height: 1.62;
}
body.home-page .closing-cta { margin-top: 32px; gap: 12px; }
body.home-page .closing-chips { margin-top: 32px; gap: 8px; }
body.home-page .closing-chip {
  padding: 8px 12px;
  font-size: 12px;
}

/* Footer: py-10 / sm:py-14, 13px links, 12px labels */
body.home-page footer.site { padding: 40px 0 32px; }
@media (min-width: 40rem) {
  body.home-page footer.site { padding: 56px 0 40px; }
}
body.home-page footer.site .footer-cols { gap: 32px 24px; } /* gap-y-8 gap-x-6 */
body.home-page footer.site .footer-col-title {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
}
body.home-page footer.site .footer-col a {
  font-size: 13px;
  padding: 2px 0;
}
body.home-page footer.site .footer-mission-text {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.62;
  max-width: 28rem;
}
body.home-page footer.site .footer-bottom { margin-top: 40px; padding-top: 32px; }

@media (max-width: 24.375rem) { /* 390px: single column, no overflow */
  body.home-page .wrap,
  body.home-page .scene-inner,
  body.home-page .scene-tour .scene-inner,
  body.home-page .scene-control .scene-inner,
  body.home-page .scene-price-summary .scene-inner,
  body.home-page .founder-inner,
  body.home-page .closing-inner { padding-left: 20px; padding-right: 20px; }
  body.home-page .hero-people { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  body.home-page .hero-person-name { font-size: 11px; }
  body.home-page .hero-bubble-in { margin-left: 16px; }
  body.home-page .hero .cta-row { max-width: 100%; }
}

/* ---------- Round 8 (CODEX): closing audit corrections ----------
   Round 7 correctly found the reference's 1152px inner measure, but put the 20/32px gutters
   inside that width. The reference puts them on the outer section, so its content still reaches
   1152px. It also borrowed the FAQ's 48/80 rhythm for the final CTA, flattened the hero's second
   rule, reduced its 62px cast to 36px, and changed the review/media split from 1fr + 320px to
   equal columns. These home-only locks restore the measurements in the mirrored markup. */

/* The header really does include its gutters inside max-w-6xl; page sections do not. */
body.home-page .wrap,
body.home-page .scene-inner,
body.home-page .scene-tour .scene-inner,
body.home-page .scene-control .scene-inner,
body.home-page .scene-price-summary .scene-inner,
body.home-page .scene-section-banner .scene-inner,
body.home-page .scene-seats .scene-inner,
body.home-page .founder-inner {
  max-width: calc(72rem + 40px);
}
header.site .wrap { max-width: 72rem; }

@media (min-width: 64rem) {
  body.home-page .wrap,
  body.home-page .scene-inner,
  body.home-page .scene-tour .scene-inner,
  body.home-page .scene-control .scene-inner,
  body.home-page .scene-price-summary .scene-inner,
  body.home-page .scene-section-banner .scene-inner,
  body.home-page .scene-seats .scene-inner,
  body.home-page .founder-inner {
    max-width: calc(72rem + 64px);
  }
  header.site .wrap { max-width: 72rem; }
}

/* Hero: wide rule mt-7/mb-8 (lg: mt-8/mb-9), then the card, then a second ruled proof row. */
body.home-page .hero-rule { margin: 28px 0 32px; }
body.home-page .hero-tag { color: var(--text); }
body.home-page .hero-visual {
  display: block;
  justify-self: stretch;
  min-width: 0;
  max-width: 100%;
}
body.home-page .hero-card {
  gap: 16px;
  padding: 16px;
  border-radius: 22px;
  max-width: 100%;
  overflow: hidden;
}
body.home-page .hero-card-aura { border-radius: 34px; }
body.home-page .hero-people { column-gap: 4px; row-gap: 12px; }
body.home-page .hero-avatar { width: 62px; height: 62px; }
body.home-page .hero-person.is-active { transform: scale(1.06); }

body.home-page .hero-proof-cells {
  margin-top: 0;
  padding-top: 28px;
  border-top: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  gap: 28px 24px;
}
body.home-page .hero-proof-cell {
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 8px 12px;
}
body.home-page .hero-proof-chip {
  width: 40px;
  height: 40px;
  margin-top: 0;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: var(--brand-brown);
}
body.home-page .hero-proof-chip svg { width: 21px; height: 21px; }
body.home-page .hero-proof-title { color: var(--text); }

@media (min-width: 40rem) {
  body.home-page .hero-card { gap: 20px; padding: 22px; }
}
@media (min-width: 64rem) {
  body.home-page .hero-rule { margin: 32px 0 36px; }
  body.home-page .hero-copy { grid-column: 1; grid-row: 1; }
  body.home-page .hero-visual { grid-column: 2; grid-row: 1 / span 2; }
  body.home-page .hero-proof-cells {
    grid-column: 1;
    grid-row: 2;
    margin-top: 36px;
  }
}

/* Desktop menu surfaces use the reference's 580/600px configurations and 12px shell inset. */
@media (min-width: 64.0625rem) {
  .mega-tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
  }
  .navitem-how .mega-tile-grid {
    width: min(580px, calc(100vw - 28px));
  }
  .navitem-features .mega-tile-grid,
  .navitem-learn .mega-tile-grid {
    width: min(600px, calc(100vw - 28px));
  }
}

/* The reference's normal section title is 28-40px; 36px is only the smaller FAQ register. */
body.home-page .scene h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
body.home-page .scene-aura::before { top: -10%; }
@media (min-width: 64rem) {
  body.home-page .scene-tour .scene-head,
  body.home-page .scene-price-summary .scene-head { margin-bottom: 48px; }
}

/* Card families: vp-card is 22px. Compact directory cards use 18px padding; media/evidence
   cards use 20-22px. Round 7's blanket 16px radius/20px padding conflated inner panels with
   their outer cards. */
body.home-page .page-list.home-card-grid { gap: 16px; }
body.home-page .scene-body .home-card-grid li > a,
body.home-page .page-list.home-card-grid li > a { border-radius: 22px; }
body.home-page .scene-tour .home-card-grid li > a { padding: 22px; }
body.home-page .scene-control .home-card-grid li > a { padding: 18px; }
body.home-page .price-summary-list li > a { border-radius: 22px; }
body.home-page .safety-stat { border-radius: 22px; }
body.home-page .versus-shell .versus-card,
body.home-page .versus-audit {
  padding: 22px;
  border-radius: 22px;
}

/* Loved-on-iPhone section: minmax(0,1fr) + 320px, gap-12, lg:py-24. */
@media (min-width: 64rem) {
  body.home-page .scene-versus { padding: 96px 0; }
  body.home-page .versus-shell {
    grid-template-columns: minmax(0, 1fr) 320px;
    column-gap: 48px;
    row-gap: 48px;
  }
  body.home-page .versus-column { display: contents; }
  body.home-page .versus-shell .versus-head {
    grid-column: 1 / -1;
    grid-row: 1;
    max-width: 42rem;
    margin: 0 auto;
    text-align: center;
  }
  body.home-page .versus-shell .versus-grid {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
  }
  body.home-page .versus-media {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
  }
}

/* The final CTA is a major aura band, not the preceding FAQ's compact py-12/lg:py-20 band. */
body.home-page .scene-closing { padding: 56px 0; }
body.home-page .closing-inner { max-width: calc(48rem + 40px); }
body.home-page .closing-inner h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
body.home-page .closing-mark {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
  color: var(--text);
}
body.home-page .closing-mark img {
  width: clamp(168px, 22vw, 240px);
  height: auto;
  display: block;
  border-radius: 24px;
  filter: drop-shadow(0 18px 36px color-mix(in srgb, var(--brand-brown) 18%, transparent));
}
body.home-page footer.site { margin-top: 48px; }
@media (min-width: 40rem) {
  body.home-page .scene-closing { padding: 80px 0; }
  body.home-page footer.site { margin-top: 80px; }
  body.home-page footer.site .footer-cols { gap: 32px; }
}
@media (min-width: 64rem) {
  body.home-page .scene-closing { padding: 112px 0; }
  body.home-page .closing-inner { max-width: calc(48rem + 64px); }
}

/* ---------- Round 9 (GROK): remaining structure against the reference home
   (`../ref-wellnessproject/site/index.html`). Copy is untouched. Scoped to
   body.home-page. Dashboard bento is grid-cols-12 gap-4 with mixed 8+4 / 4-up
   spans; crew is lg:grid-cols-2 gap-12 p-8 rounded-2xl; specialists open with
   the same centered kicker+h2 stack (mb-10/12/16); footer is a filled column
   grid with 32px gaps; reviews media column stays 320px from Round 8. ---------- */

@media (min-width: 64rem) {
  /* Use-case mosaic: dashboard lead tile is col-span-8 + col-span-4, not 7+5. */
  body.home-page .scene-tour .home-card-grid > li.home-card-primary { grid-column: span 8; }
  body.home-page .scene-tour .home-card-grid > li.home-card-supporting:nth-child(2),
  body.home-page .scene-tour .home-card-grid > li.home-card-supporting:nth-child(3) {
    grid-column: span 4;
  }

  /* 18-feature field: one 8+4 opening row, then four complete 4-ups (16×span-3).
     The previous 6+3+3 wides left a 6-col last row. */
  body.home-page .scene-control .home-card-grid {
    gap: 16px; /* gap-4, same as the reference dashboard */
  }
  body.home-page .scene-control .home-card-grid > li.home-card-lead { grid-column: span 8; }
  body.home-page .scene-control .home-card-grid > li.home-card-side { grid-column: span 4; }

  /* Crew split: two equal columns, 32px pad, 16px radius, 48px gap. */
  body.home-page .scene-founder .founder-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    padding: 32px;
    border-radius: 16px;
    align-items: center;
  }
  body.home-page .founder-photo {
    width: 100%;
    max-width: 280px;
    order: 2;
    justify-self: end;
  }

  /* Access band uses the same 2-col / 48px split as crew, on the 6xl measure. */
  body.home-page .seats-grid {
    max-width: 72rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
  }

  /* Plans row: four equal cards, 16px gutters (inline 14px was the leftover). */
  body.home-page .price-summary-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }

  /* Four real columns, 32px both axes — do not invent two empty ones. */
  body.home-page footer.site .footer-cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
  }
}

/* Specialists opening: kicker + h2 in .scene-head, 40/48/64 close. */
body.home-page .scene-section-banner .scene-head {
  max-width: 36rem;
  margin: 0 auto 40px;
  text-align: center;
}
@media (min-width: 40rem) {
  body.home-page .scene-section-banner .scene-head { margin-bottom: 48px; }
}
@media (min-width: 64rem) {
  body.home-page .scene-section-banner .scene-head { margin-bottom: 64px; }
}

/* Two benefit cards on the 6xl measure, 16px apart, 22px radius. */
body.home-page .safety-stats {
  max-width: 72rem;
  margin: 0 auto;
  gap: 16px;
}
body.home-page .safety-stat { border-radius: 22px; }

@media (max-width: 24.375rem) {
  body.home-page .seats-grid,
  body.home-page .scene-founder .founder-card,
  body.home-page footer.site .footer-cols {
    grid-template-columns: minmax(0, 1fr);
  }
  body.home-page .founder-photo {
    max-width: 128px;
    order: 0;
    justify-self: center;
  }
}

/* ---------- Round 10 (CODEX): final convergence locks ----------
   Round 8 widened generic home .wrap containers so section padding sits outside a true 1152px
   content measure. The reference footer is the exception alongside its header: max-w-6xl owns
   its px-5 / lg:px-8 gutters, so its outer box stays 1152px. Keep the home footer on that exact
   outer measure while retaining its four populated columns. */
body.home-page footer.site > .wrap { max-width: 72rem; }

/* Public layout sprint: compact outcomes, native disclosures and explicit page scope. */
.public-disclosure { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-elevated); padding: 0 18px; }
.public-disclosure > summary { min-height: 48px; padding-block: 14px; cursor: pointer; font-weight: 700; line-height: 1.5; }
.public-disclosure > summary:focus-visible { outline: 3px solid var(--brand-brown); outline-offset: 3px; border-radius: 4px; }
.public-disclosure > p { margin: 0 0 18px; line-height: 1.6; }
.public-disclosure a { text-underline-offset: .18em; }
body.home-page .scene:not(.scene-founder) { padding-block: clamp(44px, 6vw, 80px); }
body.home-page .hero { padding-bottom: 32px; }
body.home-page #how-it-works { scroll-margin-top: 100px; }
body.home-page .benefit-links { display: flex; flex-wrap: wrap; gap: 10px 18px; list-style: none; padding: 0; margin: 24px 0 0; }
body.home-page .benefit-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 650; text-underline-offset: .2em; }
body.home-page .creator-benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; list-style: none; padding: 0; margin: 28px 0 16px; }
body.home-page .creator-benefit-grid li { display: flex; min-width: 0; }
body.home-page .creator-benefit-grid a { display: flex; flex-direction: column; flex: 1; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-elevated); color: var(--text); text-decoration: none; }
body.home-page .creator-benefit-grid h3 { margin: 0 0 14px; font-size: 1.25rem; }
body.home-page .creator-benefit-grid p { margin: 0; color: var(--text-muted); line-height: 1.6; }
body.home-page .creator-benefit-grid a:hover { border-color: var(--brand-brown); }
body.home-page .creator-benefit-grid a:focus-visible { outline: 3px solid var(--brand-brown); outline-offset: 4px; }
body.home-page .home-benefits h2, body.home-page .home-everyday h2 { max-width: 22ch; margin-inline: auto; text-align: center; }
body.home-page .home-benefits > .wrap > .support { text-align: center; }
body.home-page .everyday-disclosures { display: grid; gap: 12px; max-width: 820px; margin: 28px auto 0; }
body.home-page .scene-trust .public-disclosure { max-width: 700px; margin: 20px auto 0; text-align: left; }
body.home-page .page-list.price-summary-list { align-items: stretch; }
body.home-page .price-summary-list li { display: flex; }
body.home-page .page-list.price-summary-list li > a { flex: 1; min-width: 0; box-sizing: border-box; }
body.home-page .price-summary-list .item-label { min-height: 1.5em; }
body.home-page .price-summary-list .item-desc { display: block; }
.use-case-hub .detail-hero { padding-block: 38px 24px; }
.use-case-hub .hub-intro { max-width: 850px; }
.use-case-hub .detail-section { padding-block: 24px 40px; }
.use-case-hub .detail-section-head { margin-bottom: 20px; }
.use-case-hub .page-list.two { gap: 18px; align-items: stretch; }
.use-case-hub .page-list li { display: flex; min-width: 0; }
.use-case-hub .page-list li > a { flex: 1; display: flex; flex-direction: column; padding: 22px; gap: 10px; }
.sponsor-scope { grid-column: 1 / -1; max-width: 800px; margin-inline: auto; line-height: 1.6; }
.sponsor-scope > p { margin-block: 8px; }
.sponsor-scope .public-disclosure { margin-top: 16px; }
@media (max-width: 52rem) {
 body.home-page .creator-benefit-grid { grid-template-columns: 1fr; }
 .use-case-hub .page-list.two { grid-template-columns: 1fr; }
 .use-case-hub .detail-hero { padding-block: 24px 12px; }
 .use-case-hub .detail-section { padding-top: 16px; }
}

/* Feature-page copies of the approved homepage founder note. */
.feature-founder { padding: clamp(2.5rem, 6vw, 5rem) 0; }
.feature-founder .founder-inner { max-width: 72rem; margin: 0 auto; padding-inline: clamp(20px, 3vw, 32px); }
.feature-founder .founder-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 16px; padding: clamp(24px, 4vw, 32px); box-shadow: var(--shadow-1); text-align: left; }
.feature-founder .founder-photo { display: block; width: 180px; max-width: 100%; height: auto; justify-self: center; border: 3px solid var(--bg-elevated); border-radius: var(--radius-md); box-shadow: var(--shadow-1); }
.feature-founder .founder-card-text { min-width: 0; max-width: 62ch; }
.feature-founder .eyebrow { margin: 0 0 12px; color: var(--text-muted); font-size: .85rem; line-height: 1.5; }
.feature-founder h2 { margin: 0 0 18px; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; letter-spacing: -.02em; }
.feature-founder .founder-card-text p:not(.eyebrow) { margin: 0 0 12px; color: var(--text); font-size: 15px; line-height: 1.62; }
.feature-founder .founder-card-text p.sign-off { color: var(--text-muted); font-size: .85rem; margin-bottom: 0; }
@media (min-width: 64rem) {
  .feature-founder .founder-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
  .feature-founder .founder-photo { width: 100%; max-width: 280px; order: 2; justify-self: end; }
}
@media (max-width: 35rem) {
  .feature-founder .founder-photo { width: 128px; }
}