/* ============================================================
   eleven.css — site-wide visual system, 2026-08-30.

   Brief: match the look and feel of elevenlabs.io. Studied from the
   live site rather than from memory; the numbers below are measured,
   not guessed:

     body        Inter, 18px, line-height 1.6, pure black
     page bg     #FDFCFC          panels #F5F3F1
     h1          48px, weight 300, letter-spacing -0.02em, lh 1.08
     buttons     border-radius 9999px (194 elements on their homepage)
     panels      20-24px radius (76 elements), small parts 4px (122)
     primary     solid black, not a brand colour
     accent      essentially none; colour comes from imagery

   The reference uses Waldenburg, which is proprietary. Inter is their
   body face and is what this uses throughout, self-hosted as a Latin
   variable subset (48KB) so there is no third-party font request.

   WHY THIS IS A SEPARATE FILE RATHER THAN AN EDIT TO site.css.
   site.css is 900 lines and is loaded by for.html, the live template
   for every /for/<slug> prospect page. This layer loads after it and
   overrides the visual properties while leaving every selector name
   in place, because personalize.js and motion.js query those names and
   fail silently when they move. Reverting is deleting one link tag.
   ============================================================ */

@font-face {
  font-family: 'Inter';
  src: url('/webfonts/Inter.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper:  #FDFCFC;
  --panel:  #F5F3F1;
  --ink:    #000000;
  --slate:  #6B6560;
  --line:   #E6E2DE;
  --signal: #0F7268;

  --wash:   var(--panel);
  --background: var(--paper);
  --foreground: var(--ink);
  --card: var(--paper);
  --border: var(--line);
  --muted-foreground: var(--slate);
  --primary: var(--ink);
  --primary-foreground: var(--paper);

  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --pill:   9999px;
  --r-lg:   24px;
  --r-md:   14px;
  --r-sm:   4px;

  --error:  #AD4B28;
  --wrap:   78rem;
  --header-alpha: 82%;
}

:root[data-theme="dark"], html[data-theme="dark"] {
  --paper:  #0B0B0C;
  --panel:  #151517;
  --ink:    #FAFAFA;
  --slate:  #9A948E;
  --line:   #26262A;
  --signal: #35BFA8;
  --error:  #E07A50;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:  #0B0B0C;
    --panel:  #151517;
    --ink:    #FAFAFA;
    --slate:  #9A948E;
    --line:   #26262A;
    --signal: #35BFA8;
    --error:  #E07A50;
  }
}

/* ---------- base ---------- */

html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.125rem;
  line-height: 1.6;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Light display weights are the single most recognisable thing about the
   reference. 48px at weight 300 rather than 68px at 700 — restraint doing the
   work that scale was doing before. */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--ink);
  letter-spacing: -0.021em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 2.6vw + 1.35rem, 3.5rem); font-weight: 300; line-height: 1.07; }
h2 { font-size: clamp(1.75rem, 1.7vw + 1.15rem, 2.5rem); font-weight: 300; line-height: 1.12; }
h3 { font-size: 1.1875rem; font-weight: 500; line-height: 1.35; letter-spacing: -0.012em; }
h4 { font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; }
strong, b { font-weight: 600; }
p { text-wrap: pretty; }

::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: var(--r-sm); }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }

/* ---------- header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) var(--header-alpha), transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
}
.site-header .wrap { display: flex; align-items: center; gap: 1rem; padding-block: 1rem; }
.logo { display: flex; align-items: center; gap: 0.6rem; color: var(--ink); text-decoration: none; }
.logo svg { width: 1.9rem; height: 1.9rem; }
.logo .wordmark { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.03em; }
.site-nav { display: flex; gap: 0.35rem; margin-left: 1.75rem; }
.site-nav a {
  color: var(--ink); text-decoration: none; font-size: 0.9375rem; font-weight: 400;
  padding: 0.45rem 0.85rem; border-radius: var(--pill); border: 0;
  transition: background-color 0.15s ease;
}
.site-nav a:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); border: 0; }
.site-nav a[aria-current="page"] { background: color-mix(in srgb, var(--ink) 8%, transparent); border: 0; }
.theme-toggle {
  margin-left: auto; width: 2.4rem; height: 2.4rem;
  border-radius: var(--pill); border: 1px solid var(--line);
  background: transparent; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.theme-toggle:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.theme-toggle svg { width: 1.05rem; height: 1.05rem; }

/* ---------- buttons ----------
   Pill, and the primary is solid ink rather than a brand colour. */

.button, .btn, a.button, button.button {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--pill);
  padding: 0.7rem 1.35rem;
  font-family: var(--font-sans);
  font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.button.cta, .btn.primary, .button.primary {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.button.cta:hover, .btn.primary:hover { opacity: 0.84; }
.button.ghost, .btn.ghost, .button.secondary {
  background: var(--paper); color: var(--ink); border-color: var(--line);
}
.button.ghost:hover, .btn.ghost:hover { border-color: var(--ink); background: var(--paper); }

/* ---------- sections ---------- */

.sec { padding-block: clamp(3.5rem, 7vw, 7rem); }
.sec + .sec { border-top: 0; }
.sec.tint, .washed { background: var(--panel); }

.sec-head h2, .sec-head.wide h2 { margin: 0; }
.sec-head p { color: var(--slate); margin: 0.85rem 0 0; font-size: 1.0625rem; }
.sec-head.wide { max-width: 60ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }

/* ---------- panels ---------- */

.pkg, .offer, .versus > div, .freebie, .card {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--paper);
}
.sec.tint .pkg, .sec.tint .offer, .sec.tint .versus > div, .sec.tint .freebie {
  background: var(--paper); border-color: transparent;
}
.pkg.feature, .offer.lead, .versus > div.mine { border-color: var(--ink); }

.pkg .price, .offer h3, .versus .cost {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.025em;
}
.pkg .price { font-size: clamp(2rem, 2.6vw, 2.6rem); }
.pkg li::before, .offer li::before { background: var(--ink); opacity: 0.3; }
.pkg .from, .offer .kind, .tag, .tl .when {
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--slate);
}

/* ---------- prose links ---------- */

.page :is(p, li) a:not(.button) {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, var(--ink) 28%, transparent);
}
.page :is(p, li) a:not(.button):hover { text-decoration-color: var(--ink); }
.more { font-weight: 500; }

/* ---------- footer ---------- */

.site-footer { border-top: 1px solid var(--line); padding-block: 3rem; background: var(--paper); }
.site-footer p { color: var(--slate); font-size: 0.9375rem; }
.site-footer a { color: var(--ink); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* ============================================================
   PART 2 — page components.

   Scope note: /for/<slug> does NOT load this file. It stays on
   site.css until the prospect template is done separately, so the
   live funnel is untouched by everything here. /assistant does load
   it and reuses the funnel's markup for its hero, which is why the
   .hero, .preview-card and .fact-strip rules below exist.
   ============================================================ */

/* ---------- hero ----------
   The reference puts the headline left and the supporting paragraph
   top-right on the same baseline, with the buttons under the headline.
   It is a two-column head, not a stacked one, and it is a lot of why
   the page reads as composed rather than as a poster. */

.phero, .hero-dark, .page .hero {
  background: var(--paper);
  color: var(--ink);
  padding-block: clamp(3rem, 7vw, 6.5rem) clamp(2.5rem, 5vw, 4rem);
  border: 0;
}
.phero .wrap, .hero-dark .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  grid-template-areas: "head lede" "cta lede" "note lede" "proof proof";
  column-gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.phero h1, .hero-dark h1 {
  grid-area: head; margin: 0; max-width: 15ch; color: var(--ink);
  font-weight: 300; letter-spacing: -0.028em;
}
.hero-dark h1 em, .phero h1 .hl { font-style: normal; color: var(--ink); }
.phero h1 .lt { display: block; color: var(--slate); }
.phero .lede, .hero-dark .lede {
  grid-area: lede; margin: 0.6rem 0 0; max-width: 46ch;
  font-size: 1.0625rem; line-height: 1.6; color: var(--ink);
}
.phero .actions, .hero-dark .actions {
  grid-area: cta; display: flex; flex-wrap: wrap; gap: 0.6rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.phero .caveat, .hero-dark .caveat, .phero .contact {
  grid-area: note; margin: 1.25rem 0 0; font-size: 0.9375rem; color: var(--slate);
}
@media (max-width: 900px) {
  .phero .wrap, .hero-dark .wrap {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "lede" "cta" "note" "proof";
  }
  .phero h1, .hero-dark h1 { max-width: none; }
  .phero .lede, .hero-dark .lede { margin-top: 1.25rem; max-width: none; }
  .phero .actions .button, .hero-dark .actions .button { flex: 1 1 auto; }
}

/* proof strip becomes a panel, which is the reference's habit: put a
   block of related facts inside a rounded surface rather than ruling it. */
.proofbar {
  grid-area: proof;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border: 0; border-radius: var(--r-lg);
  background: var(--panel);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
}
.proofbar > div { padding: clamp(1.5rem, 2.5vw, 2.25rem); border: 0; }
.proofbar > div + div { border-left: 1px solid var(--line); padding-left: clamp(1.5rem, 2.5vw, 2.25rem); }
.proofbar .n {
  display: block; font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.6rem, 2.2vw, 2.1rem); letter-spacing: -0.03em;
  line-height: 1; color: var(--ink); margin-bottom: 0.5rem;
}
.proofbar p { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--slate); max-width: 32ch; }
@media (max-width: 760px) {
  .proofbar { grid-template-columns: 1fr; }
  .proofbar > div + div { border-left: 0; border-top: 1px solid var(--line); padding-left: clamp(1.5rem, 2.5vw, 2.25rem); }
}

/* ---------- grids ---------- */

.grid2, .split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.75rem, 3vw, 3rem); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 2.5vw, 2.5rem); }
@media (max-width: 860px) { .grid2, .split, .grid3 { grid-template-columns: 1fr; gap: 2rem; } }
.feat h3, .split h3 { margin: 0 0 0.5rem; }
.feat p, .split p { margin: 0; color: var(--slate); font-size: 1rem; line-height: 1.6; max-width: 46ch; }

.sec-grid { display: grid; grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }
@media (max-width: 900px) { .sec-grid { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- packages / offers ---------- */

.pkgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.offers, .versus { display: grid; gap: 1rem; }
.offers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.versus { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .pkgs, .versus { grid-template-columns: 1fr; } .offers { grid-template-columns: 1fr; } }
.pkg, .offer { padding: clamp(1.5rem, 2.5vw, 2rem); display: flex; flex-direction: column; gap: 0.6rem; }
.versus > div { padding: clamp(1.5rem, 2.5vw, 2rem); }
.versus .who { font-weight: 500; margin: 0 0 0.6rem; }
.versus .cost { font-size: 1.5rem; margin: 0 0 0.6rem; }
.versus p:last-child { color: var(--slate); font-size: 0.9375rem; margin: 0; }
.pkg ul, .offer ul { list-style: none; padding: 0; margin: 0.75rem 0 0; display: grid; gap: 0.55rem; }
.pkg li, .offer li { position: relative; padding-left: 1.15rem; font-size: 0.9375rem; line-height: 1.5; color: var(--slate); }
.pkg li::before, .offer li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.3rem; height: 0.3rem; border-radius: 50%; }
.pkg .foot, .offer .foot { margin-top: auto; padding-top: 1.5rem; }
.pkg .foot .button, .offer .foot .button { width: 100%; }
.offer > p { color: var(--slate); font-size: 1rem; margin: 0; }

/* ---------- the free-audit block ---------- */

.freebie {
  display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem); padding: clamp(1.75rem, 3.5vw, 3rem);
  background: var(--panel); border-color: transparent;
}
.sec.tint .freebie { background: var(--paper); }
@media (max-width: 820px) { .freebie { grid-template-columns: 1fr; align-items: start; } }
.freebie h3 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 300; letter-spacing: -0.025em; margin: 0.5rem 0 0.75rem; }
.freebie p { margin: 0; color: var(--slate); max-width: 58ch; }
.freebie .price-free { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.5rem, 5vw, 3.5rem); letter-spacing: -0.035em; line-height: 1; color: var(--ink); margin: 0; }

/* ---------- loop / timeline ---------- */

.loop { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; margin: 0; padding: 0; }
@media (max-width: 900px) { .loop { grid-template-columns: 1fr; } }
.loop > li {
  list-style: none; margin: 0; padding: clamp(1.5rem, 2.5vw, 2rem);
  border: 0; border-radius: var(--r-lg); background: var(--panel);
}
.sec.tint .loop > li { background: var(--paper); }
.loop .n { display: block; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; color: var(--slate); margin-bottom: 1.25rem; }
.loop h3 { margin: 0 0 0.6rem; }
.loop p { margin: 0; color: var(--slate); font-size: 0.9375rem; line-height: 1.6; }

.tl { margin: 0; padding: 0; display: grid; gap: 0; counter-reset: tl; }
.tl li { list-style: none; counter-increment: tl; position: relative; padding: 0 0 2rem 3rem; border-left: 1px solid var(--line); margin-left: 0.85rem; }
.tl li:last-child { border-left-color: transparent; padding-bottom: 0; }
.tl li::before {
  content: counter(tl); position: absolute; left: -0.85rem; top: -0.1rem;
  width: 1.7rem; height: 1.7rem; border-radius: var(--pill);
  background: var(--ink); color: var(--paper); border: 0;
  display: grid; place-items: center; font-size: 0.75rem; font-weight: 500;
}
.tl .when { display: block; margin-bottom: 0.35rem; }
.tl h3 { margin: 0 0 0.4rem; }
.tl p { margin: 0; color: var(--slate); font-size: 0.9375rem; max-width: 56ch; }

/* ---------- proof list / FAQ ---------- */

.proof { display: grid; gap: 0; }
.proof article { border-top: 1px solid var(--line); padding-block: clamp(1.5rem, 2.5vw, 2rem); }
.proof article:first-child { border-top: 0; padding-top: 0; }
.proof h3 { margin: 0 0 0.5rem; }
.proof p { margin: 0 0 0.6rem; color: var(--slate); font-size: 1rem; max-width: 64ch; }
.proof p:last-of-type { margin-bottom: 0; }

.qa, .faq { border-top: 1px solid var(--line); }
.qa details, .faq details { border-bottom: 1px solid var(--line); }
.qa summary, .faq summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 1.35rem 2.75rem 1.35rem 0;
  font-family: var(--font-display); font-size: 1.0625rem; font-weight: 500;
  letter-spacing: -0.012em; color: var(--ink);
}
.qa summary::-webkit-details-marker, .faq summary::-webkit-details-marker { display: none; }
.qa summary::after, .faq summary::after {
  content: ""; position: absolute; right: 0.4rem; top: 50%;
  width: 0.62rem; height: 0.62rem;
  border-right: 1.5px solid var(--slate); border-bottom: 1.5px solid var(--slate);
  transform: translateY(-70%) rotate(45deg); transition: transform 0.2s ease;
}
.qa details[open] summary::after, .faq details[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.qa details > p, .faq details > p { margin: 0 0 1.5rem; color: var(--slate); max-width: 64ch; font-size: 1rem; }

/* ---------- closing CTA ---------- */

.close-cta, .book { padding-block: clamp(3.5rem, 7vw, 6rem); background: var(--panel); }
.close-cta h2, .book h2 { margin: 0 0 1rem; max-width: 20ch; }
.close-cta > .wrap > p, .book > .wrap > p { color: var(--slate); max-width: 54ch; margin: 0 0 2rem; font-size: 1.0625rem; }
.assure, .call-detail { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.5rem 2.5rem; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding-top: 2rem; border-top: 1px solid var(--line); }
@media (max-width: 760px) { .assure, .call-detail { grid-template-columns: 1fr; } }
.assure dt, .call-detail dt { font-weight: 500; margin: 0 0 0.3rem; }
.assure dd, .call-detail dd { margin: 0; color: var(--slate); font-size: 0.9375rem; line-height: 1.55; }

/* ---------- resume ---------- */

.cv { max-width: 62rem; }
.cv .block { border-top: 1px solid var(--line); padding-block: clamp(2rem, 4vw, 3rem); }
.cv .block > h2 { font-size: 1.5rem; font-weight: 400; margin: 0 0 1.75rem; }
.cv .role h3 { margin: 0 0 0.2rem; }
.cv .role .org { color: var(--slate); font-size: 0.9375rem; margin: 0 0 0.75rem; }
.cv ul li { color: var(--slate); }
.cv ul li::before { background: var(--ink); opacity: 0.28; }
.cv .tags li { border-radius: var(--pill); border: 1px solid var(--line); color: var(--slate); font-size: 0.8125rem; }
.rows > div { border-top: 1px solid var(--line); }
.rows .k { font-weight: 500; }
.rows .v { color: var(--slate); font-size: 1rem; }
.note, .lead-note, .illustrative-note {
  border-top: 1px solid var(--line); color: var(--slate);
  font-size: 0.9375rem; line-height: 1.6; max-width: 64ch;
}

/* ---------- /assistant reuses the funnel hero markup ---------- */

.page .hero .hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2rem,5vw,4rem); align-items: center; }
@media (max-width: 900px) { .page .hero .hero-grid { grid-template-columns: 1fr; } }
.page .hero .ambient-wheel { display: none; }
.page .preview-card, .page .demo-panel {
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--panel); box-shadow: none; overflow: hidden;
}
.page .fact-strip { background: var(--panel); border: 0; padding-block: 1.5rem; }
.page .fact-strip ul { display: flex; flex-wrap: wrap; gap: 0.75rem 2.5rem; list-style: none; margin: 0; padding: 0; }
.page .fact-strip li { color: var(--slate); font-size: 0.9375rem; }
.page .eyebrow-pill { display: none; }

/* ---------- bits inherited from pages.css ----------
   pages.css is no longer loaded on the marketing pages: its .hero-dark rules
   were written for a dark band and fought this layer on specificity, which is
   how the ghost button ended up white on near-white and the primary stayed
   teal instead of ink. These are the pieces of it still worth having. */

.lead { font-size: 1.0625rem; line-height: 1.6; max-width: 64ch; }
.page .lead { color: var(--slate); }
.section-gap { padding-block: clamp(3.5rem, 7vw, 7rem); }
.sec-head.wide h2 { font-size: clamp(2rem, 2.2vw + 1.2rem, 3rem); }
.cv .tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; padding: 0; }
.cv .tags li { list-style: none; padding: 0.3rem 0.8rem; margin: 0; }
.cv .tags li::before { display: none; }
.cv ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.cv ul li { position: relative; padding-left: 1.15rem; line-height: 1.6; max-width: 64ch; }
.cv ul li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 0.3rem; height: 0.3rem; border-radius: 50%; }
.rows { display: grid; gap: 0; }
.rows > div { display: grid; grid-template-columns: minmax(0,14rem) minmax(0,1fr); gap: clamp(1rem,3vw,2.5rem); padding-block: 1.15rem; }
.rows > div:first-child { border-top: 0; }
@media (max-width: 720px) { .rows > div { grid-template-columns: 1fr; gap: 0.25rem; } }
.rows p { margin: 0; }
.note, .lead-note, .illustrative-note { margin-top: clamp(1.75rem, 3vw, 2.5rem); padding-top: 1.25rem; }
.more { display: inline-block; margin-top: 0.5rem; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

@media print {
  .site-header, .close-cta, .book, .phero .actions, .hero-dark .actions { display: none; }
  .sec.tint, .washed, .close-cta, .book, .proofbar, .loop > li { background: none; }
  body { font-size: 10.5pt; }
  .cv .block, .cv .role { break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
}

/* ---------- small screens ----------
   The header nav was hidden below 720px by pages.css. Dropping that file for
   the marketing pages took the rule with it, so logo + three nav links +
   toggle + CTA all had to fit 390px and the document picked up 176px of
   horizontal scroll. Carried over here, along with the rest of the phone
   sizing that lived in the old file. */

@media (max-width: 860px) {
  .site-nav { display: none; }
  .site-header .wrap { padding-block: 0.85rem; gap: 0.6rem; }
  .site-header .button.cta { padding: 0.6rem 1rem; font-size: 0.875rem; }
  .theme-toggle { width: 2.2rem; height: 2.2rem; }
}

@media (max-width: 640px) {
  body { font-size: 1.0625rem; }
  h1 { font-size: clamp(2rem, 8vw, 2.6rem); }
  h2 { font-size: clamp(1.6rem, 6.5vw, 2.1rem); }
  .sec-head.wide h2 { font-size: clamp(1.75rem, 7vw, 2.25rem); }
  .phero, .hero-dark, .page .hero { padding-block: 2.5rem 2rem; }
  .phero .actions .button, .hero-dark .actions .button { width: 100%; }
  .freebie { padding: 1.5rem; }
  .proofbar > div { padding: 1.35rem; }
  .qa summary, .faq summary { font-size: 1rem; padding-right: 2.25rem; }
  .tl li { padding-left: 2.5rem; }
}

/* Belt and braces: nothing on a marketing page should ever scroll sideways. */
html, body { overflow-x: clip; }

/* ---------- two fixes found in the rendered page ----------
   1. .from ("starting at") was display:block in the old file. Inline, it sat
      on the same line as the number and shoved the price off its own left
      edge, which read as a layout bug rather than a label.
   2. .sec.tint .pkg zeroes the border so cards read as surfaces on the tinted
      band, and it outranks .pkg.feature on specificity — so the one card that
      is supposed to be marked lost its mark. Same for .offer and .versus. */

.pkg .from, .offer .kind { display: block; margin-bottom: 0.15rem; }
.pkg .price { margin: 0.9rem 0 0.3rem; line-height: 1.05; }

.sec.tint .pkg.feature,
.sec.tint .offer.lead,
.sec.tint .versus > div.mine,
.pkg.feature, .offer.lead, .versus > div.mine {
  border-color: var(--ink);
}

/* ============================================================
   PART 3 — product screens and long-form pages.

   /build, /manage, /paid, /hosted load app.css; /bot, /terms,
   /privacy and the writing posts load app.css plus a page-local
   <style> block. app.css @imports site.css, so this file lands after
   both and restyles the surfaces without renaming anything.
   ============================================================ */

.app, .app-wide {
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 2.5rem);
}
.app-wide { max-width: 62rem; }
.app h1 { font-size: clamp(1.9rem, 2.4vw + 1.1rem, 2.75rem); margin-bottom: 0.75rem; }
.app h2 { font-size: 1.5rem; font-weight: 400; margin: 2.5rem 0 1rem; }
.app > p, .app .lead { color: var(--slate); }

.card {
  background: var(--panel);
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.field {
  border-radius: var(--pill);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  padding: 0.75rem 1.15rem;
}
.field:focus { outline: 2px solid var(--ink); outline-offset: 1px; border-color: transparent; }
.muted { color: var(--slate); }
.pill {
  border-radius: var(--pill);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--slate);
  font-size: 0.8125rem;
  padding: 0.25rem 0.7rem;
}
.err { color: #B3261E; }
:root[data-theme="dark"] .err, html[data-theme="dark"] .err { color: #F2B8B5; }

/* Build progress and the eval report are the two screens a prospect actually
   looks at, so they get the panel treatment rather than the bare list. */
/* Scoped to .app deliberately. `.steps` is TWO components in this repo: the
   build-progress list on /build, and the three-step "how it works" block on the
   homepage and every /for/ page. Styling it unscoped would break the second. */
.app .steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.app .steps li { color: var(--slate); font-size: 0.9375rem; }
.app .steps li.done, .app .steps li.active { color: var(--ink); }
.report { display: grid; gap: 0.5rem; }
.probe {
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 0.85rem 1.1rem;
  font-size: 0.9375rem;
}
.score { font-family: var(--font-display); font-weight: 300; letter-spacing: -0.03em; }
.snippet, .factlist { color: var(--slate); font-size: 0.9375rem; }
.row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }

/* ---------- long-form: writing posts, terms, privacy, /bot ---------- */

.post, .legal {
  max-width: 42rem;
  margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 2.5rem);
}
.post h1, .legal h1 { margin-bottom: 0.5rem; }
.post h2, .legal h2 {
  font-size: 1.5rem; font-weight: 400; letter-spacing: -0.018em;
  margin: 2.75rem 0 0.85rem;
}
.post h3, .legal h3 { margin: 2rem 0 0.6rem; }
.post p, .legal p { margin: 0 0 1.15rem; }
.post li, .legal li { margin-bottom: 0.5rem; }
.post a, .legal a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, var(--ink) 28%, transparent);
}
.post a:hover, .legal a:hover { text-decoration-color: var(--ink); }
.post .updated, .legal .updated { color: var(--slate); font-size: 0.9375rem; }
.post blockquote {
  margin: 1.75rem 0; padding: 1.25rem 1.5rem;
  background: var(--panel); border-radius: var(--r-md); border: 0;
  color: var(--ink);
}
.post table, .legal table { border-collapse: collapse; width: 100%; margin: 1.5rem 0; font-size: 0.9375rem; }
.post th, .post td, .legal th, .legal td {
  border: 0; border-bottom: 1px solid var(--line);
  padding: 0.7rem 0.75rem 0.7rem 0; text-align: left;
}
.post th, .legal th { font-weight: 500; color: var(--slate); font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; }
.post code, .legal code {
  font-family: var(--font-mono); font-size: 0.875em;
  background: var(--panel); border-radius: var(--r-sm);
  padding: 0.12rem 0.35rem;
}
.post pre { background: var(--panel); border-radius: var(--r-md); padding: 1.15rem; overflow-x: auto; }
.post pre code { background: none; padding: 0; }

/* ============================================================
   PART 4 — the prospect template.

   /for/<slug> is the live sales funnel. personalize.js queries these
   exact class names and mountDemo returns early, silently, if
   section.hero or .hero-visual is missing; the #cases reorder throws
   if the four article.case stop being direct children. Nothing here
   renames or restructures anything — it is visual properties only.
   ============================================================ */

.hero { background: var(--paper); }
.hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2rem,5vw,4.5rem); align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
.ambient-wheel { display: none; }
.hero-copy h1 { margin: 0 0 1.25rem; }
.hero-copy .lede { font-size: 1.0625rem; line-height: 1.6; color: var(--slate); margin: 0 0 1.75rem; }
.hero-copy .customline { color: var(--ink); }
.eyebrow-pill { display: none; }

/* the still preview and the live demo share a surface */
.preview-card, .demo-panel {
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--paper); box-shadow: none; overflow: hidden;
}
.preview-bar, .demo-top { background: var(--panel); border-bottom: 1px solid var(--line); }
.demo-msg { border-radius: var(--r-md); font-size: 0.9375rem; }
.demo-msg.from-you { background: var(--ink); color: var(--paper); }
.demo-msg.from-desk { background: var(--panel); color: var(--ink); }
.demo-form { border-top: 1px solid var(--line); background: var(--paper); }
.demo-form input { font-family: var(--font-sans); font-size: 0.9375rem; color: var(--ink); background: transparent; }
.demo-form button { border-radius: var(--pill); background: var(--ink); color: var(--paper); font-weight: 500; }
.chip { border-radius: var(--pill); border: 1px solid var(--line); color: var(--slate); font-size: 0.8125rem; }
.chip.chip-good { border-color: var(--ink); color: var(--ink); }
.demo-note, .share-card { color: var(--slate); font-size: 0.9375rem; }
.chat-avatar { border-radius: var(--pill); }

.fact-strip { background: var(--panel); border: 0; padding-block: 1.5rem; }
.fact-strip ul { display: flex; flex-wrap: wrap; gap: 0.6rem 2.5rem; list-style: none; margin: 0; padding: 0; }
.fact-strip li { color: var(--slate); font-size: 0.9375rem; }

.slips, .build-cols { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1.5rem,2.5vw,2.5rem); }
.build-cols { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 860px) { .slips, .build-cols { grid-template-columns: 1fr; } }
.slips h3, .build-cols h3 { margin: 0 0 0.5rem; }
.slips p, .build-cols p { color: var(--slate); font-size: 1rem; margin: 0; }

.case {
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--paper); padding: clamp(1.5rem,3vw,2.25rem); margin-bottom: 1rem;
}
.case.featured { border-color: var(--ink); }
.manifest-row { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: 0.8125rem; color: var(--slate); margin-bottom: 1rem; }
.case-glyph { width: 1.1rem; height: 1.1rem; stroke: currentColor; fill: none; }
.case h3 { font-size: 1.35rem; font-weight: 400; letter-spacing: -0.018em; margin: 0 0 0.85rem; }
.case .story p { color: var(--slate); font-size: 1rem; }
.outcomes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.25rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
@media (max-width: 700px) { .outcomes { grid-template-columns: 1fr; } }
.outcomes .num { font-family: var(--font-display); font-weight: 300; font-size: 1.5rem; letter-spacing: -0.03em; display: block; color: var(--ink); }
.outcomes small { color: var(--slate); font-size: 0.875rem; line-height: 1.45; display: block; margin-top: 0.25rem; }

.flow, .flow-grid { background: transparent; }
.flow-node { border-radius: var(--r-md); border: 1px solid var(--line); background: var(--paper); }
.flow-arrow, .flow-caption, .flow-foot, .flow-out { color: var(--slate); }

/* ---------- Beautiful UI chat surfaces ----------
   bui.css ships its own token set for the chat widget, tuned around a blue
   accent. Against this palette the send button and the status dot rendered
   bright blue on an otherwise black-and-neutral page, which read as a
   different product bolted on. The tokens are remapped rather than the rules
   rewritten, so the widget keeps its own structure and spacing.

   This block must load AFTER bui.css; the link order on /build, /paid and
   /hosted was changed to match. */

.bui, :root {
  --bui-surface: var(--paper);
  --bui-field: var(--panel);
  --bui-ink: var(--ink);
  --bui-line: var(--line);
  --bui-line-strong: var(--line);
  --bui-hairline: var(--line);
  --bui-accent: var(--ink);
  --bui-accent-ink: var(--paper);
  --bui-hover: color-mix(in srgb, var(--ink) 6%, transparent);
  --bui-radius: 12px;
  --bui-font: var(--font-sans);
}

/* The transcript pane reserves a tall fixed area, so an assistant that has
   only said hello leaves most of a screen empty. Let it size to content with
   a sane floor and ceiling instead. */
/* The real class names are .bui-*, not .chat-*. An earlier pass styled
   .chat-log / .chat-msg / .chat-foot, which exist nowhere in this repo, so
   none of it applied and the panel kept bui.css's own look. Found by dumping
   the live DOM instead of assuming the markup. */
.bui.panel, .chat { border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--paper); overflow: hidden; }
.bui-head { background: var(--panel); border-bottom: 1px solid var(--line); }
.bui-role { color: var(--slate); }
.bui-log { min-height: 7rem; max-height: 26rem; padding: 1.15rem; }
/* bui.css scopes its own rules as `.bui .bui-msg.me`, which outranks a bare
   class selector, so these have to match that specificity to land. */
.bui .bui-msg { border-radius: var(--r-md); font-size: 0.9375rem; line-height: 1.6; }
.bui .bui-msg.them { background: var(--panel); color: var(--ink); }
.bui .bui-msg.me { background: var(--ink); color: var(--paper); }
.bui .bui-composer:focus-within { border-color: var(--ink); box-shadow: none; outline: none; }
.bui-foot { border-top: 1px solid var(--line); background: var(--paper); padding: 0.75rem; }
.bui-composer { border-radius: var(--pill); background: var(--panel); border: 1px solid transparent; }
.bui-composer:focus-within { border-color: var(--ink); box-shadow: none; }
.bui-composer textarea, .bui-composer input { background: transparent; color: var(--ink); font-family: var(--font-sans); }
.bui-send { border-radius: var(--pill); background: var(--ink); color: var(--paper); border: 0; }
.bui-note { color: var(--slate); font-size: 0.875rem; }

/* The eval report is the artefact worth looking at, so it gets real structure. */
.score { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 1.25rem; }
.score .n { font-family: var(--font-display); font-weight: 300; font-size: 2.25rem; letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.score .of { color: var(--slate); font-size: 0.9375rem; }
/* No ::before here. The markup already renders its own tick, and adding one
   produced two check marks per row in the report. Recolour the existing one
   instead — it was the old teal. */
.probe { display: flex; gap: 0.75rem; align-items: flex-start; }
.probe.pass { color: var(--ink); }
/* app.css sets `.probe.pass .mark { color: var(--signal) }` — specificity
   (0,3,0), so a bare `.probe .mark` never won and the ticks stayed the old
   teal. Matched here. The pass/fail distinction is carried by the glyph, so
   pass goes ink with the rest of the system and only failure keeps a colour,
   which is the one place colour is actually saying something. */
.probe.pass .mark { color: var(--ink); font-weight: 500; }
.probe.fail .mark { color: #B3261E; font-weight: 500; }
.probe { padding: 0.5rem 0; }
.probe.fail { color: #B3261E; }
.factlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.factlist li { color: var(--slate); font-size: 0.9375rem; line-height: 1.6; padding-left: 1.15rem; position: relative; }
.factlist li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 0.3rem; height: 0.3rem; border-radius: 50%; background: var(--ink); opacity: 0.3; }

/* ============================================================
   PART 5 — imagery.

   Two kinds, and the split is deliberate. The reference's imagery is
   product imagery: abstract spheres that stand for the voices they
   sell. Generic stock — teams round a laptop, handshakes — would
   read as filler against a page this bare, so the images that carry
   weight here are the ones that are actually ours: a real portrait,
   because a solo consultant is what is being bought, and one
   Unsplash gradient used the way the reference uses its spheres.

   IMAGE PROVENANCE
   /img/vince.jpg           ours.
   /img/abstract-waves.jpg  Unsplash, photo-1618005182384-a83a8bd57fbe,
                            abstract 3D wave render (purple/blue/orange).
                            Unsplash License: free for commercial use,
                            attribution not required but recorded here anyway.
                            Downloaded square-cropped (imgix fit=crop, never
                            fit=scale — scale distorts) and self-hosted so the
                            pages carry no third-party image dependency.
   ============================================================ */

.portrait {
  display: block;
  border-radius: var(--pill);
  object-fit: cover;
  background: var(--panel);
}
.who-row {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border-radius: var(--r-lg);
  background: var(--panel);
}
.sec.tint .who-row { background: var(--paper); }
.who-row .portrait { width: 72px; height: 72px; flex: none; }
.who-row p { margin: 0; font-size: 0.9375rem; color: var(--slate); line-height: 1.55; }
.who-row strong { display: block; color: var(--ink); font-weight: 500; font-size: 1rem; margin-bottom: 0.2rem; }

/* Portrait in a hero: bigger, and it leads the column. */
.phero .portrait { width: 104px; height: 104px; margin-bottom: 1.5rem; }

/* The gradient. Circular, generously sized, and never behind text — it is a
   subject in its own right rather than a background wash. */
.orb-band { padding-block: clamp(3rem, 6vw, 5.5rem); background: var(--panel); }
.orb-band .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 900px) {
  .orb-band .wrap { grid-template-columns: 1fr; gap: 2rem; }
  .orb-band .orb { order: -1; }
}
.orb-band h2 { margin: 0 0 1rem; }
.orb-band p { margin: 0; color: var(--slate); max-width: 52ch; font-size: 1.0625rem; }
.orb {
  width: 100%;
  max-width: 340px;
  /* height must be set explicitly: the img's height="…" attribute acts as a
     presentational default, and aspect-ratio only engages when height is
     auto. Without this line the attribute height wins and the orb renders
     at full intrinsic height — a stretched ellipse. */
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  margin-inline: auto;
  display: block;
}

/* Product screenshots, when they appear, get the same surface as everything
   else rather than floating on the page. */
.shot {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--panel);
}
figure { margin: 0; }
figcaption { margin-top: 0.75rem; font-size: 0.875rem; color: var(--slate); }

/* ============================================================
   PART 6 — the last of the old design.

   The assistant page still read as the previous system because the
   funnel markup it reuses carries components site.css sets in IBM
   Plex Mono and in the old teal. Monospace on a fact strip and a
   chat header is the loudest remaining tell; the reference sets
   everything in one face and lets weight and size do the work.
   ============================================================ */

/* The accent. .hl is the payoff span in the product hero — teal there was the
   old brand. Note the /for/ case: on a prospect page .hl holds the COMPANY
   NAME, so it must stay ink and must stay wrappable. */
.hero h1 .hl, .phero h1 .hl, .hero-dark h1 em { color: var(--ink); }

/* Everything below was mono. */
.fact-strip li,
.preview-bar, .preview-bar *,
.chip,
.manifest,
.demo-top .sub,
.share-card .share-eyebrow,
.flow-node h4, .flow-caption, .flow-foot, .flow-out, .flow-arrow,
.outcomes .num, .manifest-row,
.agent-badge, .definition {
  font-family: var(--font-sans);
  letter-spacing: -0.006em;
}
.fact-strip li { font-size: 0.9375rem; }
.preview-bar { font-size: 0.8125rem; color: var(--slate); }
.chip { font-size: 0.8125rem; }
.demo-top .sub { font-size: 0.8125rem; color: var(--slate); }
.manifest-row { font-size: 0.8125rem; letter-spacing: 0.01em; }

/* Mono survives in exactly one place, where it is doing real work: code and
   the fetcher's user-agent string on /bot. */
code, kbd, samp, pre, .post code, .legal code { font-family: var(--font-mono); }

/* The URL box is the product's primary control and was still a square field
   next to a pill button. */
#urlform { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
#url, #urlform input[type="url"], #urlform input[type="text"] {
  flex: 1 1 18rem;
  border-radius: var(--pill);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  padding: 0.8rem 1.25rem;
}
#url:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
#urlgo { border-radius: var(--pill); background: var(--ink); color: var(--paper); border: 0; padding: 0.8rem 1.5rem; font-weight: 500; }
#urlerr { color: #B3261E; font-size: 0.9375rem; }

/* ============================================================
   PART 7 — vertical rhythm.

   Measured across the four pages rather than eyeballed, and three
   things were off:

   1. Three different section heights were in play. .sec computed to
      100.8px of padding, .orb-band to 86.4 and .close-cta to 96, so
      the page stepped slightly every time the band changed. One
      token now drives all of them.
   2. Where two sections share a background they merge into a single
      slab, and their padding adds up — 201.6px of empty between two
      blocks that read as one section. Only a colour change earns the
      full double gap; same-colour neighbours collapse it.
   3. The resume's .cv block had zero top padding, so it butted
      straight into the hero.
   ============================================================ */

:root { --sec-y: clamp(3.5rem, 7vw, 7rem); }

.sec, .orb-band, .close-cta, .book, .section-gap { padding-block: var(--sec-y); }

/* Same-colour neighbours: one section's worth of air between them, not two.
   Adjacent tinted sections also lose the seam so they read as one surface. */
.sec.tint + .sec.tint,
.orb-band + .sec.tint,
.sec.tint + .orb-band,
.sec.tint + .close-cta,
.orb-band + .close-cta,
.fact-strip + .sec.tint {
  padding-top: calc(var(--sec-y) * 0.5);
}
.sec.tint:has(+ .sec.tint),
.sec.tint:has(+ .close-cta),
.orb-band:has(+ .sec.tint) {
  padding-bottom: calc(var(--sec-y) * 0.5);
}
/* Untinted neighbours, same idea. .close-cta is excluded from both sides: it
   always paints --panel regardless of whether it carries .tint, so treating it
   as untinted collapsed a gap across a real colour change. */
.sec:not(.tint):not(.close-cta) + .sec:not(.tint):not(.close-cta) { padding-top: calc(var(--sec-y) * 0.5); }
.sec:not(.tint):not(.close-cta):has(+ .sec:not(.tint):not(.close-cta)) { padding-bottom: calc(var(--sec-y) * 0.5); }

/* The hero already carries its own bottom space; the first section after it
   does not need a full measure on top as well. */
.hero + .sec, .phero + .sec, .hero-dark + .sec,
.hero + .orb-band, .phero + .orb-band, .hero-dark + .orb-band {
  padding-top: calc(var(--sec-y) * 0.72);
}
.fact-strip { padding-block: 1.5rem; }

/* Resume: the CV column is not a .sec, so it never picked up the rhythm. */
.wrap.cv { padding-top: var(--sec-y); padding-bottom: var(--sec-y); }
.cv .block:first-child { border-top: 0; padding-top: 0; }

/* A product screenshot should support the claim beside it, not become the
   section. The eval report is 16 rows tall at full length and dominated the
   proof list; the asset is clipped to the score plus the first several checks,
   and this is the backstop if a future one is not. */
.shot { max-height: 30rem; object-fit: cover; object-position: top center; }

/* ============================================================
   PART 8 — audit round one: mobile menu, hero artifact, DOM
   product components, pipeline diagram, icon system.
   Icon grammar is the sun/moon toggle's: 24 viewBox, 1.7px
   stroke, round caps, currentColor, no fills. Three sizes only.
   ============================================================ */

/* ---------- mobile nav disclosure ---------- */
.menu { position: relative; display: none; }
.menu > summary {
  list-style: none; width: 2.2rem; height: 2.2rem; border: 1px solid var(--line);
  border-radius: var(--pill); display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer; color: var(--ink); background: var(--paper);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary svg { width: 1.05rem; height: 1.05rem; }
.menu .icon-x { display: none; }
.menu[open] .icon-x { display: block; }
.menu[open] .icon-bars { display: none; }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 0.6rem); min-width: 13rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 0.4rem; display: grid; z-index: 60;
  box-shadow: 0 12px 32px color-mix(in srgb, var(--ink) 10%, transparent);
}
.menu-panel a {
  padding: 0.75rem 0.9rem; border-radius: 10px; color: var(--ink);
  text-decoration: none; font-size: 1rem;
}
.menu-panel a:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
@media (max-width: 860px) {
  .menu { display: block; margin-left: auto; }
  .site-header .theme-toggle { margin-left: 0; }
}

/* ---------- homepage hero artifact ---------- */
/* Overrides the shared phero/hero-dark template for the homepage only:
   the lede keeps the top-right slot, the product card fills the void
   beneath it that previously sat empty above the proofbar. */
.hero-dark .wrap { grid-template-areas: "head lede" "cta vis" "note vis" "proof proof"; }
.hero-vis { grid-area: vis; margin-top: 1.5rem; }
.hero-vis .preview-card { width: 100%; }
.vis-caption { margin: 0.6rem 0 0; font-size: 0.8125rem; color: var(--slate); max-width: 52ch; }
.preview-foot {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1rem;
  border-top: 1px solid var(--line); font-size: 0.8125rem; color: var(--ink);
  text-decoration: none;
}
.preview-foot svg { width: 14px; height: 14px; flex: none; }
.preview-foot .dim { color: var(--slate); }
@media (max-width: 900px) {
  .hero-dark .wrap { grid-template-areas: "head" "lede" "cta" "note" "vis" "proof"; }
  .hero-vis { margin-top: 0.5rem; }
}

/* ---------- safety report, rendered rather than screenshotted ---------- */
.report-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.1rem, 2vw, 1.5rem);
}
.report-card .score { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 1rem; }
.report-card .score .big {
  font-family: var(--font-display); font-weight: 300; font-size: 2rem;
  letter-spacing: -0.03em; color: var(--ink); line-height: 1;
}
.report-card .score .lbl { font-size: 0.875rem; color: var(--slate); }
.report-card .rows { display: grid; gap: 0.45rem; }
.rrow {
  display: flex; align-items: center; gap: 0.6rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  padding: 0.55rem 0.8rem; font-size: 0.9375rem; color: var(--ink);
}
.rrow svg { width: 15px; height: 15px; flex: none; color: var(--ink); }
.report-card .rest { margin: 0.8rem 0 0; font-size: 0.8125rem; color: var(--slate); }

/* ---------- rendered transcript (real words, re-set as DOM) ---------- */
.composer-mock {
  display: flex; align-items: center; gap: 0.6rem; margin-top: 0.9rem;
  border: 1px solid var(--line); border-radius: var(--pill);
  padding: 0.65rem 0.65rem 0.65rem 1.1rem; color: var(--slate); font-size: 0.9375rem;
  background: var(--paper);
}
.composer-mock .send {
  margin-left: auto; width: 2rem; height: 2rem; border-radius: 50%; flex: none;
  background: var(--ink); color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
}
.composer-mock .send svg { width: 14px; height: 14px; }

/* ---------- pipeline diagram ---------- */
.pipe { display: block; width: 100%; height: auto; margin-top: 0.5rem; }
.pipe text {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; fill: var(--slate);
}
.pipe .node { fill: none; stroke: var(--line); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.pipe .edge { fill: none; stroke: var(--line); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.pipe .accent { stroke: var(--signal); }
.pipe .accent-t { fill: var(--signal); }
.pipe-v { display: none; }
@media (max-width: 720px) {
  .pipe-h { display: none; }
  .pipe-v { display: block; max-width: 320px; }
}
.pipe-caption { margin: 0.9rem 0 0; font-size: 0.8125rem; color: var(--slate); }

/* ---------- icon system ---------- */
.fico { display: block; width: 24px; height: 24px; color: var(--slate); margin-bottom: 0.75rem; }
.fact-strip li { display: inline-flex; align-items: center; gap: 0.5rem; }
.fico-16 { width: 16px; height: 16px; color: var(--slate); flex: none; }
.more svg { width: 14px; height: 14px; margin-left: 0.3rem; vertical-align: -2px; }

/* numbered findings: the audit section's blocks are sequential deliverables */
.feat > .n {
  display: block; font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.06em; color: var(--slate); margin-bottom: 0.75rem;
}

/* ---------- writing index rows ---------- */
.writing-rows { display: grid; margin-top: 2.4rem; }
.writing-rows a.wrow {
  display: block; padding: 1.5rem 0; border-top: 1px solid var(--line);
  text-decoration: none; color: var(--ink);
}
.writing-rows a.wrow:last-child { border-bottom: 1px solid var(--line); }
.writing-rows .tag {
  display: block; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--slate); margin-bottom: 0.5rem;
}
.writing-rows h3 { margin: 0 0 0.4rem; font-weight: 450; }
.writing-rows p { margin: 0; color: var(--slate); font-size: 0.9375rem; line-height: 1.6; max-width: 62ch; }
.writing-rows a.wrow:hover h3 { text-decoration: underline; text-underline-offset: 3px; }

/* The diagram needs the full band, not the orb's old 340px column —
   at column width its 12px mono labels scale below legibility. */
.orb-band .pipe-wrap { grid-column: 1 / -1; max-width: 900px; margin-top: 1.5rem; }


/* ============================================================
   PART 9 — /for prospect pages: retire the old accents.
   Selector names are the funnel contract and stay untouched;
   only colours, faces and radii change here.
   ============================================================ */
.case h3, .case.featured h3 { color: var(--ink); }
.case .outcomes div {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--r-md);
}
.case .num { color: var(--ink); font-weight: 300; letter-spacing: -0.02em; }
.flow-node { border-radius: var(--r-md); }
.flow-node.is-agent {
  border-color: var(--line); border-width: 1px;
  background: var(--panel); box-shadow: none;
}
.flow-node li + li { border-top-style: solid; }
.flow-out li svg { stroke: var(--ink); }
.flow-node h4 {
  font-family: var(--font-sans); font-weight: 500;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
}
.flow-node.is-agent h4 { font-size: 0.9rem; text-transform: none; letter-spacing: -0.01em; }
.agent-badge { font-family: var(--font-sans); font-weight: 500; letter-spacing: 0.04em; }
.demo-note, .demo-top .sub { font-family: var(--font-sans); }
.demo-note { font-size: 0.8125rem; letter-spacing: 0; }
.flow-caption { font-family: var(--font-sans); }

/* accessibility round: form-control boundaries need 3:1 (WCAG 1.4.11) */
#urlform input, .demo-form input, .demo-form textarea, #claimform input {
  border-color: color-mix(in srgb, var(--slate) 75%, var(--line));
}
.writing-rows h2 { margin: 0 0 0.4rem; font-size: 1.1875rem; font-weight: 500; letter-spacing: -0.012em; line-height: 1.35; }
.writing-rows a.wrow:hover h2 { text-decoration: underline; text-underline-offset: 3px; }
.flow-foot { border-style: solid; border-radius: var(--r-md); }